fix(frontend): status badge Unavailable renamed to Requested

closes #374

src/components/MovieDetails/index.tsx

@@ -23,7 +23,6 @@ import {
   MediaRequestStatus,
 } from '../../../server/constants/media';
 import RequestModal from '../RequestModal';
-import Badge from '../Common/Badge';
 import ButtonWithDropdown from '../Common/ButtonWithDropdown';
 import axios from 'axios';
 import SlideOver from '../Common/SlideOver';
@@ -36,9 +35,9 @@ import RTAudRotten from '../../assets/rt_aud_rotten.svg';
 import type { RTRating } from '../../../server/api/rottentomatoes';
 import Error from '../../pages/_error';
 import Head from 'next/head';
-import globalMessages from '../../i18n/globalMessages';
 import ExternalLinkBlock from '../ExternalLinkBlock';
 import { sortCrewPriority } from '../../utils/creditHelpers';
+import StatusBadge from '../StatusBadge';
 
 const messages = defineMessages({
   releasedate: 'Release Date',
@@ -217,21 +216,7 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
         </div>
         <div className="flex flex-col flex-1 mt-4 text-center text-white lg:mr-4 lg:mt-0 lg:text-left">
           <div className="mb-2">
-            {data.mediaInfo?.status === MediaStatus.AVAILABLE && (
-              <Badge badgeType="success">
-                {intl.formatMessage(globalMessages.available)}
-              </Badge>
-            )}
-            {data.mediaInfo?.status === MediaStatus.PROCESSING && (
-              <Badge badgeType="danger">
-                {intl.formatMessage(globalMessages.unavailable)}
-              </Badge>
-            )}
-            {data.mediaInfo?.status === MediaStatus.PENDING && (
-              <Badge badgeType="warning">
-                {intl.formatMessage(globalMessages.pending)}
-              </Badge>
-            )}
+            <StatusBadge status={data.mediaInfo?.status} />
           </div>
           <h1 className="text-2xl lg:text-4xl">
             {data.title}{' '}