"feat: update data APIs to fetch orders and events via fetch instead of axios, add Order and Event models, update selectors and reducers, add EventDetail page with joined members display"

03_source/mobile/src/pages/OrderDetail/index.tsx

@@ -0,0 +1,173 @@
+// REQ0041/home_discover_event_tab
+
+import {
+  IonPage,
+  IonHeader,
+  IonToolbar,
+  IonButtons,
+  IonButton,
+  IonIcon,
+  IonTitle,
+  IonContent,
+  useIonRouter,
+} from '@ionic/react';
+import { chevronBackOutline, menuOutline } from 'ionicons/icons';
+import React, { useEffect, useRef, useState } from 'react';
+import { useParams } from 'react-router';
+import { IOrderItem } from '../../models/Order';
+import { connect } from '../../data/connect';
+import * as selectors from '../../data/selectors';
+
+import './style.scss';
+import paths from '../../paths';
+
+interface OwnProps {}
+
+interface StateProps {
+  order: IOrderItem;
+}
+
+interface DispatchProps {}
+
+interface OrderDetailProps extends OwnProps, StateProps, DispatchProps {}
+
+const OrderDetail: React.FC<OrderDetailProps> = ({ order }) => {
+  const { id } = useParams<{ id: string }>();
+  const router = useIonRouter();
+
+  function handleBackClick() {
+    router.goBack();
+  }
+
+  return (
+    <IonPage id="speaker-list">
+      <IonHeader translucent={true} className="ion-no-border">
+        <IonToolbar>
+          <IonButtons slot="start">
+            {/* <IonMenuButton /> */}
+            <IonButton
+              shape="round"
+              id="events-open-modal"
+              expand="block"
+              onClick={handleBackClick}
+            >
+              <IonIcon slot="icon-only" icon={chevronBackOutline}></IonIcon>
+            </IonButton>
+          </IonButtons>
+          <IonTitle>Order Details (訂單詳情)</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+
+      <IonContent className="ion-padding" fullscreen={true}>
+        <div>
+          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+            <div>Total</div>
+            <div>{order.totalAmount}</div>
+          </div>
+          <div>
+            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+              <div>created at:</div>
+              <div>{order.createdAt}</div>
+            </div>
+            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+              <div>updated at:</div>
+              <div>{order.updatedAt}</div>
+            </div>
+          </div>
+          <div>
+            <h2>History</h2>
+            <h3>Delivery</h3>
+            <div style={{ display: 'flex', gap: '1rem' }}>
+              <div>
+                {order.history?.timeline.map((t) => (
+                  <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+                    <div>{t.title}</div>
+                    <div>{t.time}</div>
+                  </div>
+                ))}
+              </div>
+            </div>
+            <div>
+              <h3>擇要</h3>
+              <div>
+                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+                  <div>Order time</div>
+                  <div>29 May 2025 4:01 pm</div>
+                </div>
+
+                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+                  <div>Payment time</div>
+                  <div>29 May 2025 4:01 pm</div>
+                </div>
+
+                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+                  <div>Delivery time for the carrier</div>
+                  <div>29 May 2025 4:01 pm</div>
+                </div>
+
+                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+                  <div>Completion time</div>
+                  <div>29 May 2025 4:01 pm</div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div>
+            <h2>Delivery</h2>
+
+            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+              <div>Ship by</div>
+              <div>{order.delivery.shipBy}</div>
+            </div>
+
+            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+              <div>Speedy</div>
+              <div>{order.delivery.speedy}</div>
+            </div>
+
+            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+              <div>Tracking No.</div>
+              <div>{order.delivery.trackingNumber}</div>
+            </div>
+          </div>
+
+          <div>
+            <h2>Shipping</h2>
+
+            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+              <div>Address</div>
+              <div>{order.shippingAddress.fullAddress}</div>
+            </div>
+
+            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+              <div>Phone Number</div>
+              <div>{order.shippingAddress.phoneNumber}</div>
+            </div>
+          </div>
+
+          <div>
+            <h2>Payment</h2>
+
+            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+              <div>Card Type</div>
+              <div>{order.payment.cardType}</div>
+            </div>
+
+            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+              <div>Card Number</div>
+              <div>{order.payment.cardNumber}</div>
+            </div>
+          </div>
+        </div>
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default connect({
+  mapStateToProps: (state, ownProps) => ({
+    order: selectors.getOrder(state, ownProps),
+  }),
+  component: React.memo(OrderDetail),
+});

03_source/mobile/src/pages/OrderDetail/style.scss

@@ -0,0 +1,2 @@
+#order-detail-page {
+}