From 3653032ec79400269de95d4b3f4a16266f1498ca Mon Sep 17 00:00:00 2001 From: sam5102 Date: Thu, 23 Nov 2023 21:01:13 +0530 Subject: [PATCH 1/2] upi paymentsintegrated --- react-fm/package-lock.json | 37 ++++ react-fm/package.json | 1 + react-fm/src/pages/matchQueues/Queue.tsx | 4 +- react-fm/src/pages/matchQueues/constants.ts | 1 + react-fm/src/pages/matchQueues/data.ts | 4 + .../eventsComponents/Events.module.scss | 34 +++ .../matchQueues/eventsComponents/Events.tsx | 4 +- .../matchQueues/eventsComponents/JoinNow.tsx | 197 +++++++++++++++++- .../pages/matchQueues/types/Events.types.tsx | 1 + react-fm/src/routes/index.ts | 2 +- react-fm/src/sections/Header/Header.tsx | 6 +- react-fm/src/sections/Sidebar/Sidebar.tsx | 8 +- 12 files changed, 279 insertions(+), 20 deletions(-) diff --git a/react-fm/package-lock.json b/react-fm/package-lock.json index cd36b7c4..980c17eb 100644 --- a/react-fm/package-lock.json +++ b/react-fm/package-lock.json @@ -31,6 +31,7 @@ "recoil": "^0.7.5" }, "devDependencies": { + "@iconify/react": "^4.1.1", "@trivago/prettier-plugin-sort-imports": "^3.3.0", "@types/lodash": "^4.14.197", "@types/node": "^18.7.21", @@ -2077,6 +2078,27 @@ "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==", "dev": true }, + "node_modules/@iconify/react": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/@iconify/react/-/react-4.1.1.tgz", + "integrity": "sha512-jed14EjvKjee8mc0eoscGxlg7mSQRkwQG3iX3cPBCO7UlOjz0DtlvTqxqEcHUJGh+z1VJ31Yhu5B9PxfO0zbdg==", + "dev": true, + "dependencies": { + "@iconify/types": "^2.0.0" + }, + "funding": { + "url": "https://github.com/sponsors/cyberalien" + }, + "peerDependencies": { + "react": ">=16" + } + }, + "node_modules/@iconify/types": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz", + "integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==", + "dev": true + }, "node_modules/@jridgewell/gen-mapping": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz", @@ -11087,6 +11109,21 @@ "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==", "dev": true }, + "@iconify/react": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/@iconify/react/-/react-4.1.1.tgz", + "integrity": "sha512-jed14EjvKjee8mc0eoscGxlg7mSQRkwQG3iX3cPBCO7UlOjz0DtlvTqxqEcHUJGh+z1VJ31Yhu5B9PxfO0zbdg==", + "dev": true, + "requires": { + "@iconify/types": "^2.0.0" + } + }, + "@iconify/types": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz", + "integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==", + "dev": true + }, "@jridgewell/gen-mapping": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz", diff --git a/react-fm/package.json b/react-fm/package.json index 181d8854..b7b0bfcc 100644 --- a/react-fm/package.json +++ b/react-fm/package.json @@ -39,6 +39,7 @@ "recoil": "^0.7.5" }, "devDependencies": { + "@iconify/react": "^4.1.1", "@trivago/prettier-plugin-sort-imports": "^3.3.0", "@types/lodash": "^4.14.197", "@types/node": "^18.7.21", diff --git a/react-fm/src/pages/matchQueues/Queue.tsx b/react-fm/src/pages/matchQueues/Queue.tsx index 9584dcd6..adfda2a3 100644 --- a/react-fm/src/pages/matchQueues/Queue.tsx +++ b/react-fm/src/pages/matchQueues/Queue.tsx @@ -152,7 +152,8 @@ function MatchQueue() { stripePaymentUrl={playingEvent.stripePaymentUrl} charges={0} date={''} - eventId={''} + uniqueEventId={playingEvent.uniqueEventId} + eventId={playingEvent.eventId} reservedPlayersCount={playingEvent.reservedPlayersCount} reservedPlayersList={playingEvent.reservedPlayersList} time={''} @@ -166,6 +167,7 @@ function MatchQueue() { {/*Event Details*/} = ({ charges, date, time, + uniqueEventId, eventId, venueName, venueLocationLink, @@ -157,7 +158,8 @@ export const EventsCard: FC = ({ stripePaymentUrl={stripePaymentUrl} charges={0} date={''} - eventId={''} + uniqueEventId={uniqueEventId} + eventId={eventId} reservedPlayersCount={reservedPlayersCount} reservedPlayersList={reservedPlayersList} time={''} diff --git a/react-fm/src/pages/matchQueues/eventsComponents/JoinNow.tsx b/react-fm/src/pages/matchQueues/eventsComponents/JoinNow.tsx index 41008593..244f3239 100644 --- a/react-fm/src/pages/matchQueues/eventsComponents/JoinNow.tsx +++ b/react-fm/src/pages/matchQueues/eventsComponents/JoinNow.tsx @@ -1,14 +1,26 @@ +import { useState } from 'react'; import type { FC } from 'react'; import ReactGA from 'react-ga'; +import CreditCardIcon from '@mui/icons-material/CreditCard'; import LockIcon from '@mui/icons-material/Lock'; import Alert from '@mui/material/Alert'; import AlertTitle from '@mui/material/AlertTitle'; import Button from '@mui/material/Button'; +import Dialog from '@mui/material/Dialog'; +import DialogActions from '@mui/material/DialogActions'; +import DialogContent from '@mui/material/DialogContent'; +import DialogTitle from '@mui/material/DialogTitle'; +import TextField from '@mui/material/TextField'; import Tooltip from '@mui/material/Tooltip'; +import { Icon } from '@iconify/react'; + +import { FlexBox } from '@/components/styled'; +import useOrientation from '@/hooks/useOrientation'; import useNotifications from '@/store/notifications'; +import { apiUrl } from '../constants'; import type { EventDetails } from '../types/Events.types'; import styles from './Events.module.scss'; @@ -19,8 +31,14 @@ export const JoinNow: FC = ({ waitListPlayers, waitListPlayersCount, venueName, + uniqueEventId, }) => { const [, notificationsActions] = useNotifications(); + const isPortrait = useOrientation(); + const [showPaymentOptions, setShowPaymentOptions] = useState(false); + const [open, setOpen] = useState(false); + const [userData, setUserData] = useState({ name: '', email: '', phoneNumber: '' }); + const openSpots = reservedPlayersCount - reservedPlayersList.length; const openWaitList = waitListPlayersCount - waitListPlayers.length; @@ -47,18 +65,179 @@ export const JoinNow: FC = ({ }); } + const handleName = (e: { target: { value: string } }) => { + setUserData({ ...userData, name: e.target.value }); + }; + + const handleEmail = (e: { target: { value: string } }) => { + setUserData({ ...userData, email: e.target.value }); + }; + + const handleNumber = (e: { target: { value: string } }) => { + setUserData({ ...userData, phoneNumber: e.target.value }); + }; + + const paymentOptions = (event: { stopPropagation: () => void }) => { + event.stopPropagation(); + setShowPaymentOptions(true); + }; + + const handleClickOpen = (event: { stopPropagation: () => void }) => { + event.stopPropagation(); + setOpen(true); + }; + + const userInput = { + input: { + uniqueEventId: uniqueEventId, + playerInputList: [{ waNumber: userData.phoneNumber, name: userData.name }], + }, + }; + + const handlePay = (event: { stopPropagation: () => void }) => { + event.stopPropagation(); + const { name, email, phoneNumber }: { name: string; email: string; phoneNumber: string } = + userData; + + if (name === '' || email === '' || phoneNumber === '') { + alert('Please fill all the details'); + } else { + setOpen(false); + + const generateUrl = () => { + fetch(apiUrl, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + query: `mutation InitiatePayment { + initiatePayment( + input: { + uniqueEventId: "${uniqueEventId}" + playerInputList: [{ waNumber: "${phoneNumber}", name: "${name}" }] + } + ) { + isInitiated + paymentLink + } + }`, + variables: userInput, + }), + }) + .then((response) => response.json()) + .then((result) => { + const paymentUrl = result.data.initiatePayment.paymentLink; + window.open(paymentUrl, '_blank'); + }) + .catch((error) => { + // eslint-disable-next-line no-console + console.log(error); + }); + }; + + generateUrl(); + } + }; + + const handleClose = (event: { stopPropagation: () => void }) => { + event.stopPropagation(); + setOpen(false); + setShowPaymentOptions(false); + }; + + const onModalClick = (e: { stopPropagation: () => void }) => { + e.stopPropagation(); + }; + return ( <> {openWaitList > 0 ? ( - + <> + {!showPaymentOptions ? ( + + ) : null} + + {showPaymentOptions ? ( + + + + + ) : null} + + + Player Details + + + + + + + + + + + ) : ( diff --git a/react-fm/src/pages/matchQueues/types/Events.types.tsx b/react-fm/src/pages/matchQueues/types/Events.types.tsx index 7f6180f6..7cb52dc1 100644 --- a/react-fm/src/pages/matchQueues/types/Events.types.tsx +++ b/react-fm/src/pages/matchQueues/types/Events.types.tsx @@ -10,6 +10,7 @@ type EventDetails = { charges: number; date: string; eventId: string; + uniqueEventId: string; reservedPlayersCount: number; reservedPlayersList: ReservedPlayerDetails[]; time: string; diff --git a/react-fm/src/routes/index.ts b/react-fm/src/routes/index.ts index 56b06b91..c0096409 100644 --- a/react-fm/src/routes/index.ts +++ b/react-fm/src/routes/index.ts @@ -15,7 +15,7 @@ const routes: Routes = { path: '/home', }, [Pages.Welcome]: { - component: asyncComponentLoader(() => import('@/pages/matchQueues')), + component: asyncComponentLoader(() => import('@/pages/welcome')), path: '/', title: 'Home', icon: HomeIcon, diff --git a/react-fm/src/sections/Header/Header.tsx b/react-fm/src/sections/Header/Header.tsx index c904f9ac..c3608d68 100644 --- a/react-fm/src/sections/Header/Header.tsx +++ b/react-fm/src/sections/Header/Header.tsx @@ -29,10 +29,8 @@ function Header() { const menus = () => !isPortrait ? ( - - - Home - + + Home diff --git a/react-fm/src/sections/Sidebar/Sidebar.tsx b/react-fm/src/sections/Sidebar/Sidebar.tsx index 9c749c5b..d8ab6526 100644 --- a/react-fm/src/sections/Sidebar/Sidebar.tsx +++ b/react-fm/src/sections/Sidebar/Sidebar.tsx @@ -16,9 +16,9 @@ import styles from './Sidebar.module.scss'; function Sidebar() { const [isSidebarOpen, sidebarActions] = useSidebar(); - const toHome = (navTitle: string | undefined) => { - navTitle === 'Home' ? (location.href = 'https://play.flickmatch.in/home') : null; - }; + // const toHome = (navTitle: string | undefined) => { + // navTitle === 'Home' ? (location.href = 'https://play.flickmatch.in/home') : null; + // }; return ( {Icon ? : } - toHome(title)}> + {title} From fd1aa6c0de7518b18a969f6332433a52c97b2984 Mon Sep 17 00:00:00 2001 From: sam5102 Date: Tue, 28 Nov 2023 08:06:35 +0530 Subject: [PATCH 2/2] number input scrolling fixed --- .../eventsComponents/Events.module.scss | 14 ++++++++++++++ .../pages/matchQueues/eventsComponents/JoinNow.tsx | 2 +- 2 files changed, 15 insertions(+), 1 deletion(-) diff --git a/react-fm/src/pages/matchQueues/eventsComponents/Events.module.scss b/react-fm/src/pages/matchQueues/eventsComponents/Events.module.scss index a7ee3d00..37030e4a 100644 --- a/react-fm/src/pages/matchQueues/eventsComponents/Events.module.scss +++ b/react-fm/src/pages/matchQueues/eventsComponents/Events.module.scss @@ -1,3 +1,17 @@ +input[type='number']::-webkit-inner-spin-button, +input[type='number']::-webkit-outer-spin-button { + -webkit-appearance: none; + margin: 0; +} + +input:-webkit-autofill, +input:-webkit-autofill:hover, +input:-webkit-autofill:focus, +input:-webkit-autofill:active { + -webkit-box-shadow: 0 0 0 30px #3d3d3d inset !important; + -webkit-text-fill-color: #fff; +} + .eventSchedule { margin-top: 25px; color: #fff; diff --git a/react-fm/src/pages/matchQueues/eventsComponents/JoinNow.tsx b/react-fm/src/pages/matchQueues/eventsComponents/JoinNow.tsx index 244f3239..1a882cec 100644 --- a/react-fm/src/pages/matchQueues/eventsComponents/JoinNow.tsx +++ b/react-fm/src/pages/matchQueues/eventsComponents/JoinNow.tsx @@ -185,7 +185,7 @@ export const JoinNow: FC = ({ ) : null} - Player Details + Become our standout Flickplayer