feat(MED-105): update order details redirect and shown page

app/home/(user)/_components/order/cart-totals.tsx

@@ -6,8 +6,8 @@ import React from "react"
 import { useTranslation } from "react-i18next"
 import { Trans } from '@kit/ui/trans';
 
-export default function CartTotals({ order }: {
-  order: StoreOrder
+export default function CartTotals({ medusaOrder }: {
+  medusaOrder: StoreOrder
 }) {
   const { i18n: { language } } = useTranslation()
   const {
@@ -17,7 +17,7 @@ export default function CartTotals({ order }: {
     tax_total,
     discount_total,
     gift_card_total,
-  } = order
+  } = medusaOrder
 
   return (
     <div>

app/home/(user)/_components/order/order-completed.tsx

@@ -1,27 +0,0 @@
-import { Trans } from '@kit/ui/trans';
-import { PageBody, PageHeader } from '@kit/ui/page';
-import { StoreOrder } from "@medusajs/types"
-import Divider from "@modules/common/components/divider"
-
-import CartTotals from "./cart-totals"
-import OrderDetails from "./order-details"
-import OrderItems from "./order-items"
-
-export default async function OrderCompleted({
-  order,
-}: {
-  order: StoreOrder,
-}) {
-  return (
-    <PageBody>
-      <PageHeader title={<Trans i18nKey="cart:orderConfirmed.title" />} />
-      <Divider />
-      <div className="grid grid-cols-1 small:grid-cols-[1fr_360px] gap-x-40 lg:px-4 gap-y-6">
-        <OrderDetails order={order} />
-        <Divider />
-        <OrderItems order={order} />
-        <CartTotals order={order} />
-      </div>
-    </PageBody>
-  )
-}

app/home/(user)/_components/order/order-details.tsx

@@ -1,47 +1,21 @@
-import { StoreOrder } from "@medusajs/types"
 import { Trans } from '@kit/ui/trans';
+import { formatDate } from 'date-fns';
+import { AnalysisOrder } from "~/lib/services/order.service";
 
-export default function OrderDetails({ order, showStatus }: {
-  order: StoreOrder
-  showStatus?: boolean
+export default function OrderDetails({ order }: {
+  order: AnalysisOrder
 }) {
-  const formatStatus = (str: string) => {
-    const formatted = str.split("_").join(" ")
-
-    return formatted.slice(0, 1).toUpperCase() + formatted.slice(1)
-  }
-
   return (
     <div className="flex flex-col gap-y-2">
       <span>
         <Trans i18nKey="cart:orderConfirmed.orderDate" />:{" "}
         <span>
-          {new Date(order.created_at).toLocaleDateString()}
+          {formatDate(order.created_at, 'dd.MM.yyyy HH:mm')}
         </span>
       </span>
       <span className="text-ui-fg-interactive">
-        <Trans i18nKey="cart:orderConfirmed.orderNumber" />: <span data-testid="order-id">{order.display_id}</span>
+        <Trans i18nKey="cart:orderConfirmed.orderNumber" />: <span data-testid="order-id">{order.medusa_order_id}</span>
       </span>
-
-      {showStatus && (
-        <>
-          <span>
-            <Trans i18nKey="cart:orderConfirmed.orderStatus" />:{" "}
-            <span className="text-ui-fg-subtle">
-              {formatStatus(order.fulfillment_status)}
-            </span>
-          </span>
-          <span>
-            <Trans i18nKey="cart:orderConfirmed.paymentStatus" />:{" "}
-            <span
-              className="text-ui-fg-subtle "
-              data-testid="order-payment-status"
-            >
-              {formatStatus(order.payment_status)}
-            </span>
-          </span>
-        </>
-      )}
     </div>
   )
 }

app/home/(user)/_components/order/order-item.tsx

@@ -1,7 +1,7 @@
 import { StoreCartLineItem, StoreOrderLineItem } from "@medusajs/types"
 import { TableCell, TableRow } from "@kit/ui/table"
 
-import LineItemOptions from "@modules/common/components/line-item-options"
+// import LineItemOptions from "@modules/common/components/line-item-options"
 import LineItemPrice from "@modules/common/components/line-item-price"
 import LineItemUnitPrice from "@modules/common/components/line-item-unit-price"
 
@@ -9,6 +9,7 @@ export default function OrderItem({ item, currencyCode }: {
   item: StoreCartLineItem | StoreOrderLineItem
   currencyCode: string
 }) {
+  const partnerLocationName = item.metadata?.partner_location_name;
   return (
     <TableRow className="w-full" data-testid="product-row">
       {/* <TableCell className="px-6 w-24">
@@ -22,9 +23,9 @@ export default function OrderItem({ item, currencyCode }: {
           className="txt-medium-plus text-ui-fg-base"
           data-testid="product-name"
         >
-          {item.product_title}{` (${item.metadata?.partner_location_name ?? "-"})`}
+          {item.product_title}{` ${partnerLocationName ? `(${partnerLocationName})` : ''}`}
         </span>
-        <LineItemOptions variant={item.variant} data-testid="product-variant" />
+        {/* <LineItemOptions variant={item.variant} data-testid="product-variant" /> */}
       </TableCell>
 
       <TableCell className="px-6">

app/home/(user)/_components/order/order-items.tsx

@@ -7,10 +7,10 @@ import OrderItem from "./order-item"
 import { Heading } from "@kit/ui/heading"
 import { Trans } from '@kit/ui/trans';
 
-export default function OrderItems({ order }: {
-  order: StoreOrder
+export default function OrderItems({ medusaOrder }: {
+  medusaOrder: StoreOrder
 }) {
-  const items = order.items
+  const items = medusaOrder.items
 
   return (
     <div className="flex flex-col gap-y-4">
@@ -27,7 +27,7 @@ export default function OrderItems({ order }: {
                   <OrderItem
                     key={item.id}
                     item={item}
-                    currencyCode={order.currency_code}
+                    currencyCode={medusaOrder.currency_code}
                   />
                 ))
               : repeat(5).map((i) => <SkeletonLineItem key={i} />)}

app/home/(user)/_components/orders/orders-item.tsx

@@ -6,6 +6,7 @@ import { Eye } from "lucide-react";
 import Link from "next/link";
 import { formatDate } from "date-fns";
 import { IOrderLineItem } from "./types";
+import { Trans } from '@kit/ui/trans';
 
 export default function OrdersItem({ orderItem }: {
   orderItem: IOrderLineItem,
@@ -22,15 +23,13 @@ export default function OrdersItem({ orderItem }: {
         {formatDate(orderItem.item.created_at, 'dd.MM.yyyy HH:mm')}
       </TableCell>
 
-      {orderItem.orderStatus && (
-        <TableCell className="px-6">
-          {orderItem.orderStatus}
-        </TableCell>
-      )}
+      <TableCell className="px-6 whitespace-nowrap">
+        <Trans i18nKey={`orders:status.${orderItem.orderStatus}`} />
+      </TableCell>
 
       <TableCell className="text-right px-6">
         <span className="flex gap-x-1 justify-end w-[60px]">
-          <Link href={`/home/analysis-results`} className="flex items-center justify-between text-small-regular">
+          <Link href={`/home/order/${orderItem.orderId}`} className="flex items-center justify-between text-small-regular">
             <button
               className="flex gap-x-1 text-ui-fg-subtle hover:text-ui-fg-base cursor-pointer"
             >

app/home/(user)/_components/orders/orders-table.tsx

@@ -9,8 +9,6 @@ import {
 import OrdersItem from "./orders-item";
 import { IOrderLineItem } from "./types";
 
-const IS_SHOWN_ORDER_STATUS = true as boolean;
-
 export default function OrdersTable({ orderItems, title }: {
   orderItems: IOrderLineItem[];
   title: string;
@@ -29,10 +27,9 @@ export default function OrdersTable({ orderItems, title }: {
           <TableHead className="px-6">
             <Trans i18nKey="orders:table.createdAt" />
           </TableHead>
-          {IS_SHOWN_ORDER_STATUS && (
-            <TableHead className="px-6">
-            </TableHead>
-          )}
+          <TableHead className="px-6">
+            <Trans i18nKey="orders:table.status" />
+          </TableHead>
           <TableHead className="px-6">
           </TableHead>
         </TableRow>

app/home/(user)/_components/orders/types.ts

@@ -2,6 +2,7 @@ import { StoreOrderLineItem } from "@medusajs/types";
 
 export interface IOrderLineItem {
   item: StoreOrderLineItem;
-  orderId: string;
+  medusaOrderId: string;
+  orderId: number;
   orderStatus: string;
 }