feat: add party payment flow with dummy pay page implementation and route configuration

03_source/mobile/src/App.tsx

@@ -66,6 +66,7 @@ import PrivacyAgreement from './pages/PrivacyAgreement';
 import EventDetail from './pages/EventDetail';
 import MemberProfile from './pages/MemberProfile';
 import OrderDetail from './pages/OrderDetail';
+import DummyPayPage from './pages/DummyPayPage';
 
 setupIonicReact();
 
@@ -131,6 +132,8 @@ const IonicApp: React.FC<IonicAppProps> = ({ darkMode, schedule, setIsLoggedIn,
             <Route exact={true} path={PATHS.PRIVACY_AGREEMENT} component={PrivacyAgreement} />
 
             {/* Event and profile detail pages */}
+            <Route exact={true} path="/dummy_pay_page" component={DummyPayPage} />
+
             <Route exact={true} path="/event_detail/:id" component={EventDetail} />
             <Route exact={true} path="/profile/:id" component={MemberProfile} />
 

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

@@ -0,0 +1,37 @@
+// REQ0041/home_discover_event_tab
+
+import {
+  IonPage,
+  IonHeader,
+  IonToolbar,
+  IonButtons,
+  IonButton,
+  IonIcon,
+  IonTitle,
+  IonContent,
+} from '@ionic/react';
+import { menuOutline } from 'ionicons/icons';
+import React, { useEffect, useRef, useState } from 'react';
+import './style.scss';
+
+const DummyPayPage: React.FC = () => {
+  return (
+    <IonPage id="speaker-list">
+      <IonHeader translucent={true} className="ion-no-border">
+        <IonToolbar>
+          <IonButtons slot="end">
+            {/* <IonMenuButton /> */}
+            <IonButton shape="round" id="events-open-modal" expand="block">
+              <IonIcon slot="icon-only" icon={menuOutline}></IonIcon>
+            </IonButton>
+          </IonButtons>
+          <IonTitle>Discover Events</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+
+      <IonContent fullscreen={true}>DummyPayPage</IonContent>
+    </IonPage>
+  );
+};
+
+export default DummyPayPage;

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

@@ -0,0 +1,103 @@
+#about-page {
+  ion-toolbar {
+    position: absolute;
+
+    top: 0;
+    left: 0;
+    right: 0;
+
+    --background: transparent;
+    --color: white;
+  }
+
+  ion-toolbar ion-back-button,
+  ion-toolbar ion-button,
+  ion-toolbar ion-menu-button {
+    --color: white;
+  }
+
+  .about-header {
+    position: relative;
+
+    width: 100%;
+    height: 30%;
+  }
+
+  .about-header .about-image {
+    position: absolute;
+
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+
+    background-position: center;
+    background-size: cover;
+    background-repeat: no-repeat;
+
+    opacity: 0;
+
+    transition: opacity 500ms ease-in-out;
+  }
+
+  .about-header .madison {
+    background-image: url('/assets/img/about/madison.jpg');
+  }
+
+  .about-header .austin {
+    background-image: url('/assets/img/about/austin.jpg');
+  }
+
+  .about-header .chicago {
+    background-image: url('/assets/img/about/chicago.jpg');
+  }
+
+  .about-header .seattle {
+    background-image: url('/assets/img/about/seattle.jpg');
+  }
+
+  .about-info {
+    position: relative;
+    margin-top: -10px;
+    border-radius: 10px;
+    background: var(--ion-background-color, #fff);
+    z-index: 2; // display rounded border above header image
+  }
+
+  .about-info h3 {
+    margin-top: 0;
+  }
+
+  .about-info ion-list {
+    padding-top: 0;
+  }
+
+  .about-info p {
+    line-height: 130%;
+
+    color: var(--ion-color-dark);
+  }
+
+  .about-info ion-icon {
+    margin-inline-end: 32px;
+  }
+
+  /*
+   * iOS Only
+   */
+
+  .ios .about-info {
+    --ion-padding: 19px;
+  }
+
+  .ios .about-info h3 {
+    font-weight: 700;
+  }
+}
+
+#date-input-popover {
+  --offset-y: -var(--ion-safe-area-bottom);
+
+  --max-width: 90%;
+  --width: 336px;
+}