add visual car details

src/components/order-view/details/car/car-details.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { FC } from 'react';
+import { Flex, Image } from '@chakra-ui/react';
+
+import { Order } from '../../../../models';
+import {
+  carBodySelectOptions,
+  carColorSelectOptions,
+} from '../../../order-form';
+
+import { LicensePlate } from './license-plate';
+
+type Props = Pick<Order.View, 'carNumber' | 'carBody' | 'carColor'>;
+
+export const CarDetails: FC<Props> = ({ carNumber, carBody, carColor }) => {
+  const image = carBodySelectOptions.find(({ value }) => value === carBody).img;
+  const color =
+    carColorSelectOptions.find(({ value }) => value === carColor)?.code ??
+    'black';
+
+  return (
+    <Flex direction='column' alignItems='center' p={2}>
+      <div style={{ backgroundColor: color, width: 'fit-content' }}>
+        <Image src={image} style={{ mixBlendMode: 'lighten' }} />
+      </div>
+      <LicensePlate carNumber={carNumber} />
+    </Flex>
+  );
+};

src/components/order-view/details/car/index.ts

@@ -0,0 +1 @@
+export { CarDetails } from './car-details';

src/components/order-view/details/car/license-plate/index.ts

@@ -0,0 +1 @@
+export { LicensePlate } from './license-plate';

src/components/order-view/details/car/license-plate/license-plate.tsx

@@ -0,0 +1,52 @@
+import React, { FC } from 'react';
+import { Flex, HStack, Text } from '@chakra-ui/react';
+
+import { Order } from '../../../../../models';
+
+export const LicensePlate: FC<Pick<Order.View, 'carNumber'>> = ({
+  carNumber,
+}) => {
+  const firstLetter = carNumber.substring(0, 1);
+  const digits = carNumber.substring(1, 4);
+  const lastLetters = carNumber.substring(4, 6);
+  const region = carNumber.substring(6);
+
+  return (
+    <Flex
+      align='center'
+      bg='black'
+      borderRadius='md'
+      width='fit-content'
+      boxShadow='md'
+      fontFamily='mono'
+      fontWeight='bold'
+      fontSize='24px'
+      textTransform='uppercase'
+      color='black'
+      alignItems='stretch'
+    >
+      <HStack
+        bg='white'
+        border='2px solid black'
+        borderRadius='md'
+        px={2}
+        gap={0}
+        alignItems='baseline'
+      >
+        <Text>{firstLetter}</Text>
+        <Text fontSize='28px' lineHeight={0}>{digits}</Text>
+        <Text>{lastLetters}</Text>
+      </HStack>
+      <Flex
+        bg='white'
+        border='2px solid black'
+        borderInlineStart='none'
+        borderRadius='md'
+        px={2}
+        alignItems='center'
+      >
+        {region}
+      </Flex>
+    </Flex>
+  );
+};

src/components/order-view/details/order-details.tsx

@@ -7,6 +7,7 @@ import {
   UnorderedList,
   ListItem,
   Text,
+  Flex,
 } from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
 import dayjs from 'dayjs';
@@ -17,12 +18,10 @@ import 'dayjs/locale/en';
 
 import { Order } from '../../../models/landing';
 import { formatDatetime } from '../../../lib';
-import {
-  carBodySelectOptions,
-  carColorSelectOptions,
-} from '../../order-form';
+import { carBodySelectOptions, carColorSelectOptions } from '../../order-form';
 
 import { OrderStatus } from './status';
+import { CarDetails } from './car';
 
 type OrderDetailsProps = Pick<
   Order.View,
@@ -60,7 +59,9 @@ export const OrderDetails: FC<OrderDetailsProps> = ({
   const { t: tCarColor } = useTranslation('~', {
     keyPrefix: 'dry-wash.order-create.car-color-select.colors',
   });
-  const carColorTKey = carColorSelectOptions.find(({ value }) => value === carColor)?.labelTKey;
+  const carColorTKey = carColorSelectOptions.find(
+    ({ value }) => value === carColor,
+  )?.labelTKey;
 
   return (
     <>
@@ -76,44 +77,43 @@ export const OrderDetails: FC<OrderDetailsProps> = ({
         <Text>{dayjs(created).format('LLL')}</Text>
         <OrderStatus value={status} />
       </HStack>
-      <UnorderedList styleType='none'>
-        {[
-          {
-            label: t('owner'),
-            value: phone,
-          },
-          {
-            label: t('car'),
-            value: [
-              carNumber,
-              tCarBody(
-                `${carBodySelectOptions.find(({ value }) => value === carBody)?.labelTKey}`,
-              ),
-              carColorTKey ? tCarColor(carColorTKey) : carColor,
-            ]
-              .filter((v) => v)
-              .join(', '),
-          },
-          {
-            label: t('location'),
-            value: location,
-          },
-          {
-            label: t('datetime-range'),
-            value: [
-              formatDatetime(startWashTime),
-              formatDatetime(endWashTime),
-            ].join(' - '),
-          },
-        ].map(({ label, value }, i) => (
-          <ListItem key={i}>
-            {label}:{' '}
-            <Text as='span' color='primary.500' fontWeight='bold'>
-              {value}
-            </Text>
-          </ListItem>
-        ))}
-      </UnorderedList>
+      <Flex direction={{ base: 'column', md: 'row-reverse' }} gap={4}>
+        <CarDetails
+          carNumber={carNumber}
+          carBody={carBody}
+          carColor={carColor}
+        />
+        <UnorderedList styleType='none'>
+          {[
+            {
+              label: t('car'),
+              value: `${tCarBody(carBodySelectOptions.find(({ value }) => value === carBody)?.labelTKey)} (${carColorTKey ? tCarColor(carColorTKey) : carColor})`,
+            },
+            {
+              label: t('owner'),
+              value: phone,
+            },
+            {
+              label: t('location'),
+              value: location,
+            },
+            {
+              label: t('datetime-range'),
+              value: [
+                formatDatetime(startWashTime),
+                formatDatetime(endWashTime),
+              ].join(' - '),
+            },
+          ].map(({ label, value }, i) => (
+            <ListItem key={i}>
+              <Text as='span' color='primary.400'>
+                {label}:
+              </Text>{' '}
+              <Text as='span'>{value}</Text>
+            </ListItem>
+          ))}
+        </UnorderedList>
+      </Flex>
       <Alert status='info' alignItems='flex-start'>
         <AlertIcon />
         {t('alert')}

src/pages/order-view/index.tsx

@@ -74,7 +74,7 @@ const Page: FC = () => {
                   <VStack
                     p={4}
                     alignItems='flex-start'
-                    gap={4}
+                    gap={6}
                     data-testid='order-details'
                   >
                     <OrderDetails