feat(MED-97): use spinner in order confirmed view and wait for payment to be captured in webhook

app/home/(user)/(dashboard)/order/[orderId]/confirmed/order-confirmed-loading-wrapper.tsx

@@ -0,0 +1,81 @@
+'use client';
+
+import CartTotals from '@/app/home/(user)/_components/order/cart-totals';
+import OrderDetails from '@/app/home/(user)/_components/order/order-details';
+import OrderItems from '@/app/home/(user)/_components/order/order-items';
+import Divider from '@modules/common/components/divider';
+
+import { PageBody, PageHeader } from '@kit/ui/page';
+import { Trans } from '@kit/ui/trans';
+
+import { StoreOrder } from '@medusajs/types';
+import { AnalysisOrder } from '~/lib/types/analysis-order';
+import { useEffect, useRef, useState } from 'react';
+import { retrieveOrder } from '@lib/data/orders';
+import { GlobalLoader } from '@kit/ui/makerkit/global-loader';
+
+function OrderConfirmedLoadingWrapper({
+  medusaOrder: initialMedusaOrder,
+  order,
+}: {
+  medusaOrder: StoreOrder;
+  order: AnalysisOrder;
+}) {
+  const [medusaOrder, setMedusaOrder] = useState<StoreOrder>(initialMedusaOrder);
+  const fetchingRef = useRef(false);
+
+  const paymentStatus = medusaOrder.payment_status;
+  const medusaOrderId = order.medusa_order_id;
+
+  useEffect(() => {
+    if (paymentStatus === 'captured') {
+      return;
+    }
+
+    const interval = setInterval(async () => {
+      if (fetchingRef.current) {
+        return;
+      }
+
+      fetchingRef.current = true;
+      const medusaOrder = await retrieveOrder(medusaOrderId, false);
+      fetchingRef.current = false;
+
+      setMedusaOrder(medusaOrder);
+    }, 2_000);
+
+    return () => clearInterval(interval);
+  }, [paymentStatus, medusaOrderId]);
+
+  const isPaid = paymentStatus === 'captured';
+
+  if (!isPaid) {
+    return (
+      <PageBody>
+        <div className="flex flex-col justify-start items-center h-full pt-[10vh]">
+          <div>
+            <GlobalLoader />
+          </div>
+          <h4 className="text-center">
+            <Trans i18nKey="cart:orderConfirmed.paymentConfirmationLoading" />
+          </h4>
+        </div>
+      </PageBody>
+    );
+  }
+
+  return (
+    <PageBody>
+      <PageHeader title={<Trans i18nKey="cart:orderConfirmed.title" />} />
+      <Divider />
+      <div className="small:grid-cols-[1fr_360px] grid grid-cols-1 gap-x-40 gap-y-6 lg:px-4">
+        <OrderDetails order={order} />
+        <Divider />
+        <OrderItems medusaOrder={medusaOrder} />
+        <CartTotals medusaOrder={medusaOrder} />
+      </div>
+    </PageBody>
+  );
+}
+
+export default OrderConfirmedLoadingWrapper;

app/home/(user)/(dashboard)/order/[orderId]/confirmed/page.tsx

@@ -1,18 +1,13 @@
 import { redirect } from 'next/navigation';
 
-import CartTotals from '@/app/home/(user)/_components/order/cart-totals';
-import OrderDetails from '@/app/home/(user)/_components/order/order-details';
-import OrderItems from '@/app/home/(user)/_components/order/order-items';
 import { createI18nServerInstance } from '@/lib/i18n/i18n.server';
 import { retrieveOrder } from '@lib/data/orders';
-import Divider from '@modules/common/components/divider';
 
 import { pathsConfig } from '@kit/shared/config';
-import { PageBody, PageHeader } from '@kit/ui/page';
-import { Trans } from '@kit/ui/trans';
 
 import { withI18n } from '~/lib/i18n/with-i18n';
 import { getAnalysisOrder } from '~/lib/services/order.service';
+import OrderConfirmedLoadingWrapper from './order-confirmed-loading-wrapper';
 
 export async function generateMetadata() {
   const { t } = await createI18nServerInstance();
@@ -41,18 +36,7 @@ async function OrderConfirmedPage(props: {
     redirect(pathsConfig.app.myOrders);
   }
 
-  return (
-    <PageBody>
-      <PageHeader title={<Trans i18nKey="cart:orderConfirmed.title" />} />
-      <Divider />
-      <div className="small:grid-cols-[1fr_360px] grid grid-cols-1 gap-x-40 gap-y-6 lg:px-4">
-        <OrderDetails order={order} />
-        <Divider />
-        <OrderItems medusaOrder={medusaOrder} />
-        <CartTotals medusaOrder={medusaOrder} />
-      </div>
-    </PageBody>
-  );
+  return <OrderConfirmedLoadingWrapper medusaOrder={medusaOrder} order={order} />;
 }
 
 export default withI18n(OrderConfirmedPage);