feat: implement event joining flow with dummy payment page, including route configuration, Redux state management, and UI updates for event detail page

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

@@ -0,0 +1,131 @@
+// REQ0041/home_discover_event_tab
+
+import {
+  IonPage,
+  IonHeader,
+  IonToolbar,
+  IonButtons,
+  IonButton,
+  IonIcon,
+  IonTitle,
+  IonContent,
+  useIonRouter,
+  IonToast,
+} from '@ionic/react';
+import { chevronBackOutline, menuOutline } from 'ionicons/icons';
+import React, { useEffect, useRef, useState } from 'react';
+import './style.scss';
+import PATHS from '../../PATHS';
+import axios from 'axios';
+import { UserState } from '../../data/user/user.state';
+import { connect } from '../../data/connect';
+
+import * as selectors from '../../data/selectors';
+import constants from '../../constants';
+
+interface OwnProps {}
+
+interface StateProps {
+  isLoggedin: boolean;
+  //
+  partyUserState: UserState;
+  //
+  joinEventId: string;
+}
+
+interface DispatchProps {}
+
+interface PageProps extends OwnProps, StateProps, DispatchProps {}
+
+const DummyPayPage: React.FC<PageProps> = ({
+  isLoggedin,
+  partyUserState,
+  //
+  joinEventId,
+}) => {
+  const router = useIonRouter();
+
+  // if (!isLoggedin) return <NotLoggedIn />;
+
+  async function handlePayClick() {
+    try {
+      await axios.post(constants.PARTY_USER_JOIN_EVENT, {
+        data: {
+          eventItemId: joinEventId,
+          email: partyUserState.meta?.email,
+        },
+      });
+
+      router.goBack();
+
+      setShowJoinOKToast(true);
+    } catch (error) {
+      console.error(error);
+    }
+  }
+
+  function handleCancelClick() {
+    router.goBack();
+  }
+
+  const [showJoinOKToast, setShowJoinOKToast] = useState(false);
+
+  return (
+    <IonPage id="speaker-list">
+      <IonHeader translucent={true} className="ion-no-border">
+        <IonToolbar>
+          <IonButtons slot="start">
+            {/* <IonMenuButton /> */}
+            <IonButton shape="round">
+              <IonIcon slot="icon-only" icon={chevronBackOutline}></IonIcon>
+            </IonButton>
+          </IonButtons>
+          <IonTitle>Dummy pay event page</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+
+      <IonContent fullscreen={true}>
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            alignItems: 'center',
+            gap: '1rem',
+            textAlign: 'center',
+
+            padding: '3rem',
+          }}
+        >
+          <div>This is a dummy page to emulate payment gateway work</div>
+
+          <div>
+            <div>pay for event</div>
+            <pre style={{ backgroundColor: 'RGB(0,0,0, 0.1)' }}>{JSON.stringify(joinEventId)}</pre>
+          </div>
+
+          <IonButton onClick={handlePayClick}>Pay</IonButton>
+          <IonButton onClick={handleCancelClick}>Cancel</IonButton>
+        </div>
+
+        <IonToast
+          isOpen={showJoinOKToast}
+          message="ok, event paid, thank you..."
+          duration={2000}
+          // onDidDismiss={() => setShowJoinOKToast(false)}
+        />
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default connect<OwnProps, StateProps, DispatchProps>({
+  mapStateToProps: (state) => ({
+    isLoggedin: state.user.isLoggedin,
+    //
+    joinEventId: selectors.getEventIdToJoin(state),
+    //
+    partyUserState: selectors.getPartyUserState(state),
+  }),
+  component: DummyPayPage,
+});

03_source/mobile/src/pages/DummyEventPayPage/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;
+}