xx.tsx

import React from 'react';
import {Typography, makeStyles, createStyles} from '@material-ui/core';
import {StatusUpdates, 
  Body
} from 'mock-data-service/types/OrderStatusContent';

export interface OrderStatusDescriptionProps {
  currentStatus: string;
  content: StatusUpdates;
}

// const orderStatusMapping: {[key: string]: keyof Body | undefined} = {
//   'ORDER RECEIVED': 'receivedFromPatient',
//   'PHARMACIST IS REVIEWING': 'pharmacistReviewing',
//   'PREPARING FOR SHIPMENT': 'filling',
//   'ORDER SHIPPED': 'shippedNoTracking',
//   'ORDER IS IN TRANSIT': 'shippedNoTracking',
//   'ORDER DELIVERED': 'shippedNoTracking'
// };

// const getOrderStatusMapping = (key: string): keyof Body | undefined => {
//   if (key) {
//     return orderStatusMapping[key];
//   }
//   return;
// };

const useStyles = makeStyles(() =>
  createStyles({
    statusUpdate: {
      display: 'flex',
      marginBottom: '20px',
      maxWidth: '35.625rem',
      padding: '20px',
      paddingLeft: '30px'
    },
    orderStatusHeading: {
      marginBottom: '10px'
    },
    orderStatusBody: {
      paddingBottom: '20px'
    }
  })
);

export const OrderStatusDescription: React.FC<OrderStatusDescriptionProps> = ({currentStatus, content}) => {
  const classes = useStyles();

  const orderStatusMapping2: {[key: string]: string} = {
    'ORDER RECEIVED': content.body.receivedFromPatient,
    'PHARMACIST IS REVIEWING': content.body.pharmacistReviewing,
    'PREPARING FOR SHIPMENT': content.body.filling,
    'ORDER SHIPPED': content.body.shippedNoTracking,
    'ORDER IS IN TRANSIT': content.body.shippedNoTracking,
    'ORDER DELIVERED': content.body.shippedNoTracking
  };

  const orderStatusContentKey = orderStatusMapping2[currentStatus];
  let description = '';
  if (orderStatusContentKey as keyof Body) {
    description = content.body[orderStatusContentKey];
  }

  return (
    <div className={classes.statusUpdate}>
      <div>
        <Typography variant="h4" gutterBottom className={classes.orderStatusHeading}>
          {currentStatus}
        </Typography>
        <Typography variant="body1" className={classes.orderStatusBody}>
          {description}
        </Typography>
      </div>
    </div>
  );
};