Merge pull request 'feat: add order-view (#9)' (#51) from feature/order-view into main

Reviewed-on: #51

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

@@ -0,0 +1 @@
+export { OrderDetails } from './order-details';

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

@@ -0,0 +1,99 @@
+import React, { FC } from 'react';
+import {
+  Alert,
+  AlertIcon,
+  Heading,
+  HStack,
+  UnorderedList,
+  VStack,
+  ListItem,
+  Text,
+} from '@chakra-ui/react';
+import { useTranslation } from 'react-i18next';
+
+import { Order } from '../../../models/landing';
+import { formatDatetime } from '../../../lib';
+import { carBodySelectOptions } from '../../order-form/form/car-body/helper';
+
+import { OrderStatus } from './status';
+
+type OrderDetailsProps = Order.View;
+
+export const OrderDetails: FC<OrderDetailsProps> = ({
+  id,
+  status,
+  phone,
+  carNumber,
+  carBody,
+  carColor,
+  location,
+  datetimeBegin,
+  datetimeEnd,
+}) => {
+  const { t } = useTranslation('~', {
+    keyPrefix: 'dry-wash.order-view.details',
+  });
+  const { t: tCarBody } = useTranslation('~', {
+    keyPrefix: 'dry-wash.order-create.car-body-select.options',
+  });
+
+  return (
+    <VStack p={4} alignItems='flex-start' gap={4}>
+      <HStack
+        width='full'
+        flexWrap='wrap'
+        justifyContent='space-between'
+        gap={2}
+      >
+        <Heading as='h2' size='lg'>
+          {t('title', { number: id })}
+        </Heading>
+        <OrderStatus value={status} />
+      </HStack>
+      <UnorderedList styleType='none'>
+        {[
+          {
+            label: t('owner'),
+            value: phone,
+          },
+          {
+            label: t('car'),
+            value: [
+              carNumber,
+              tCarBody(
+                `${carBodySelectOptions.find(({ value }) => value === carBody)?.labelTKey}`,
+              ),
+              carColor,
+            ]
+              .filter((v) => v)
+              .join(', '),
+          },
+          {
+            label: t('location'),
+            value: location,
+          },
+          {
+            label: t('datetime-range'),
+            value: [
+              formatDatetime(datetimeBegin),
+              formatDatetime(datetimeEnd),
+            ].join(' - '),
+          },
+        ].map(({ label, value }, i) => (
+          <ListItem key={i}>
+            {label}:{' '}
+            <Text as='span' color='primary.500' fontWeight='bold'>
+              {value}
+            </Text>
+          </ListItem>
+        ))}
+      </UnorderedList>
+      <Alert status='info' alignItems='flex-start'>
+        <AlertIcon />
+        {t('alert')}
+      </Alert>
+    </VStack>
+  );
+};
+
+// todo: add i18n for date & time

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

@@ -0,0 +1 @@
+export { OrderStatus } from './order-status';

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

@@ -0,0 +1,49 @@
+import { Tag, TagProps } from '@chakra-ui/react';
+import React, { FC } from 'react';
+import { useTranslation } from 'react-i18next';
+import { TFunction } from 'i18next';
+
+import { Order } from '../../../../models/landing';
+
+const getPropsByStatus = (
+  status: Order.Status,
+  t: TFunction<'~', 'dry-wash.arm.order.status'>,
+): TagProps => {
+  switch (status) {
+    case 'canceled':
+      return {
+        colorScheme: 'red',
+        children: t('canceled'),
+      };
+    case 'progress':
+      return {
+        colorScheme: 'yellow',
+        children: t('progress'),
+      };
+    case 'pending':
+      return {
+        colorScheme: 'yellow',
+        children: t('pending'),
+      };
+    case 'working':
+      return {
+        colorScheme: 'yellow',
+        children: t('working'),
+      };
+    case 'complete':
+      return {
+        colorScheme: 'green',
+        children: t('complete'),
+      };
+  }
+};
+
+export const OrderStatus: FC<{ value: Order.Status }> = ({ value }) => {
+  const { t } = useTranslation('~', {
+    keyPrefix: 'dry-wash.arm.order.status',
+  });
+
+  const props = getPropsByStatus(value, t);
+
+  return <Tag variant='solid' {...props} />;
+};

src/components/order-view/index.ts

@@ -0,0 +1 @@
+export * from './details';