diff --git a/app/home/(user)/(dashboard)/order/[orderId]/confirmed/order-confirmed-loading-wrapper.tsx b/app/home/(user)/(dashboard)/order/[orderId]/confirmed/order-confirmed-loading-wrapper.tsx new file mode 100644 index 0000000..939962d --- /dev/null +++ b/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(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 ( + +
+
+ +
+

+ +

+
+
+ ); + } + + return ( + + } /> + +
+ + + + +
+
+ ); +} + +export default OrderConfirmedLoadingWrapper; diff --git a/app/home/(user)/(dashboard)/order/[orderId]/confirmed/page.tsx b/app/home/(user)/(dashboard)/order/[orderId]/confirmed/page.tsx index eeebd7b..eaffa1c 100644 --- a/app/home/(user)/(dashboard)/order/[orderId]/confirmed/page.tsx +++ b/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 ( - - } /> - -
- - - - -
-
- ); + return ; } export default withI18n(OrderConfirmedPage);