132 lines
3.1 KiB
TypeScript
132 lines
3.1 KiB
TypeScript
// 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,
|
|
});
|