completed call api move cart to order

hdcola · Nov 4, 2024 · 75efa67 · 75efa67
1 parent c4889e3
commit 75efa67
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 2 deletions.
diff --git a/src/api/usePaymentCheckout.ts b/src/api/usePaymentCheckout.ts
@@ -0,0 +1,32 @@
+import { useQuery } from '@tanstack/react-query';
+import axios from 'axios';
+import useLoginStore from '../store/useLoginStore';
+
+interface PaymentCheckoutInfo {
+    order_id: number;
+    user_id: number;
+    payment_ref: string;
+    payment_method: string;
+    full_name: string;
+    status: string;
+    total: number;
+}
+
+const fetchPaymentCheckout = async (paymentId: string): Promise<PaymentCheckoutInfo> => {
+    const { authToken } = useLoginStore.getState();
+
+    const { data } = await axios.post(
+        `${import.meta.env.VITE_API_URL}/api/payments/checkout`,
+        { paymentId },
+        { headers: { Authorization: `Bearer ${authToken}` }, }
+    );
+    return data;
+};
+
+export const usePaymentCheckout = (paymentId: string | null) => {
+    return useQuery({
+        queryKey: ['payment-checkout', paymentId],
+        queryFn: () => fetchPaymentCheckout(paymentId!),
+        enabled: !!paymentId,
+    });
+};
diff --git a/src/pages/CompletePage.tsx b/src/pages/CompletePage.tsx
@@ -14,9 +14,9 @@ import {
     TableCell,
     Stack,
     Button,
-    Box,
     Avatar,
 } from '@mui/material';
+import { usePaymentCheckout } from '../api/usePaymentCheckout';
 
 type StatusKey =
     | 'succeeded'
@@ -60,6 +60,7 @@ export const CompletePage = () => {
 
     const [status, setStatus] = useState<StatusKey>('default');
     const [intentId, setIntentId] = useState<string | null>(null);
+    const { data: checkoutInfo } = usePaymentCheckout(intentId);
 
     useEffect(() => {
         if (!stripe) {
@@ -115,7 +116,7 @@ export const CompletePage = () => {
                                             width: '30%',
                                         }}
                                     >
-                                        ID
+                                        Payment ID
                                     </TableCell>
                                     <TableCell>{intentId}</TableCell>
                                 </TableRow>
@@ -132,6 +133,43 @@ export const CompletePage = () => {
                                         {status}
                                     </TableCell>
                                 </TableRow>
+                                {checkoutInfo && (
+                                    <>
+                                        <TableRow>
+                                            <TableCell
+                                                component="th"
+                                                sx={{ fontWeight: 'bold' }}
+                                            >
+                                                Order ID
+                                            </TableCell>
+                                            <TableCell>
+                                                {checkoutInfo.order_id}
+                                            </TableCell>
+                                        </TableRow>
+                                        <TableRow>
+                                            <TableCell
+                                                component="th"
+                                                sx={{ fontWeight: 'bold' }}
+                                            >
+                                                Customer
+                                            </TableCell>
+                                            <TableCell>
+                                                {checkoutInfo.full_name}
+                                            </TableCell>
+                                        </TableRow>
+                                        <TableRow>
+                                            <TableCell
+                                                component="th"
+                                                sx={{ fontWeight: 'bold' }}
+                                            >
+                                                Total
+                                            </TableCell>
+                                            <TableCell>
+                                                ${checkoutInfo.total.toFixed(2)}
+                                            </TableCell>
+                                        </TableRow>
+                                    </>
+                                )}
                             </TableBody>
                         </Table>
                     )}