feat(MED-105): update orders table to be by each separate order

app/home/(user)/(dashboard)/order/page.tsx

@@ -7,10 +7,11 @@ import { PageBody } from '@kit/ui/makerkit/page';
 import pathsConfig from '~/config/paths.config';
 import { Trans } from '@kit/ui/trans';
 import { HomeLayoutPageHeader } from '../../_components/home-page-header';
-import OrdersTable from '../../_components/orders/orders-table';
 import { withI18n } from '~/lib/i18n/with-i18n';
-import type { IOrderLineItem } from '../../_components/orders/types';
 import { getAnalysisOrders } from '~/lib/services/order.service';
+import OrderBlock from '../../_components/orders/order-block';
+import React from 'react';
+import { Divider } from '@medusajs/ui';
 
 export async function generateMetadata() {
   const { t } = await createI18nServerInstance();
@@ -29,42 +30,7 @@ async function OrdersPage() {
     redirect(pathsConfig.auth.signIn);
   }
 
-  const analysisPackagesType = productTypes.find(({ metadata }) => metadata?.handle === 'analysis-packages');
-  const analysisPackageOrders: IOrderLineItem[] = medusaOrders.flatMap(({ id, items, payment_status, fulfillment_status }) => items
-    ?.filter((item) => item.product_type_id === analysisPackagesType?.id)
-    .map((item) => {
-      const localOrder = analysisOrders.find((order) => order.medusa_order_id === id);
-      if (!localOrder) {
-        return null;
-      }
-      return {
-        item,
-        medusaOrderId: id,
-        orderId: localOrder?.id,
-        orderStatus: localOrder.status,
-        analysis_element_ids: localOrder.analysis_element_ids,
-      }
-    })
-    .filter((order) => order !== null)
-  || []);
-
-  const otherOrders: IOrderLineItem[] = medusaOrders
-    .filter(({ items }) => items?.some((item) => item.product_type_id !== analysisPackagesType?.id))
-    .flatMap(({ id, items, payment_status, fulfillment_status }) => items
-      ?.map((item) => {
-        const analysisOrder = analysisOrders.find((order) => order.medusa_order_id === id);
-        if (!analysisOrder) {
-          return null;
-        }
-        return {
-          item,
-          medusaOrderId: id,
-          orderId: analysisOrder.id,
-          orderStatus: analysisOrder.status,
-        }
-      })
-      .filter((order) => order !== null)
-    || []);
+  const analysisPackagesType = productTypes.find(({ metadata }) => metadata?.handle === 'analysis-packages')!;
 
   return (
     <>
@@ -73,8 +39,27 @@ async function OrdersPage() {
         description={<Trans i18nKey={'orders:description'} />}
       />
       <PageBody>
-        <OrdersTable orderItems={analysisPackageOrders} title="orders:table.analysisPackage" />
-        <OrdersTable orderItems={otherOrders} title="orders:table.otherOrders" />
+        {analysisOrders.map((analysisOrder) => {
+          const medusaOrder = medusaOrders.find(({ id }) => id === analysisOrder.medusa_order_id);
+          if (!medusaOrder) {
+            return null;
+          }
+
+          const medusaOrderItems = medusaOrder.items || [];
+          const medusaOrderItemsAnalysisPackages = medusaOrderItems.filter((item) => item.product_type_id === analysisPackagesType?.id);
+          const medusaOrderItemsOther = medusaOrderItems.filter((item) => item.product_type_id !== analysisPackagesType?.id);
+
+          return (
+            <React.Fragment key={analysisOrder.id}>
+              <Divider className="my-6" />
+              <OrderBlock
+                analysisOrder={analysisOrder}
+                itemsAnalysisPackage={medusaOrderItemsAnalysisPackages}
+                itemsOther={medusaOrderItemsOther}
+              />
+            </React.Fragment>
+          )
+        })}
       </PageBody>
     </>
   );