build: d805a69a-e437-4a58-a083-30e34be74fcd

2026-05-27 17:03:30 +00:00
commit 687d5ad9d1
99 changed files with 7967 additions and 0 deletions
@@ -0,0 +1,121 @@
+import React, { useEffect, useState } from 'react';
+import {
+  IonButton,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonPage,
+  IonTitle,
+  IonToolbar,
+  useIonViewWillEnter,
+} from '@ionic/react';
+import { checkmarkCircle } from 'ionicons/icons';
+import { useHistory } from 'react-router-dom';
+import { LAST_ORDER_STORAGE_KEY } from './Home';
+import {
+  setStatusBarBackground,
+  setStatusBarStyle,
+  Style,
+} from '../utils/statusBar';
+
+type OrderInfo = {
+  id: string;
+  orderNumber: string;
+  total: number;
+  itemCount: number;
+  status: string;
+};
+
+const OrderConfirmation: React.FC = () => {
+  const history = useHistory();
+  const [order, setOrder] = useState<OrderInfo | null>(null);
+
+  useIonViewWillEnter(() => {
+    setStatusBarStyle(Style.Dark);
+    setStatusBarBackground('#ffffff');
+  });
+
+  useEffect(() => {
+    try {
+      const savedOrder = localStorage.getItem(LAST_ORDER_STORAGE_KEY);
+      if (!savedOrder) {
+        setOrder(null);
+        return;
+      }
+
+      setOrder(JSON.parse(savedOrder) as OrderInfo);
+    } catch {
+      setOrder(null);
+    }
+  }, []);
+
+  return (
+    <IonPage>
+      <IonHeader className="ion-no-border">
+        <IonToolbar>
+          <IonTitle>Order placed</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent className="ion-padding">
+        <div className="confirmation-card">
+          <IonIcon icon={checkmarkCircle} color="success" />
+          <h1>Thanks for your order!</h1>
+          <p className="muted-text">
+            Your order has been placed successfully and is now being prepared.
+          </p>
+
+          {order ? (
+            <div className="confirmation-details">
+              <div>
+                <span>Order number</span>
+                <strong>{order.orderNumber}</strong>
+              </div>
+              <div>
+                <span>Status</span>
+                <strong>{order.status.replaceAll('_', ' ')}</strong>
+              </div>
+              <div>
+                <span>Items</span>
+                <strong>{order.itemCount}</strong>
+              </div>
+              <div>
+                <span>Total paid</span>
+                <strong>${order.total.toFixed(2)}</strong>
+              </div>
+            </div>
+          ) : (
+            <p className="muted-text">
+              We could not load the order summary, but your next browse session
+              is ready.
+            </p>
+          )}
+
+          {order && (
+            <IonButton
+              expand="block"
+              onClick={() => history.replace(`/orders/${order.id}`)}
+            >
+              Track this order
+            </IonButton>
+          )}
+          <IonButton
+            fill="outline"
+            expand="block"
+            onClick={() => history.replace('/orders')}
+          >
+            View all orders
+          </IonButton>
+          <IonButton
+            fill="clear"
+            expand="block"
+            onClick={() => history.replace('/home')}
+          >
+            Continue shopping
+          </IonButton>
+        </div>
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default OrderConfirmation;