Student application (#62)

* Add custom modal component * Display modal on student ticket registration button * Code Cleanup * Add rourkela shines as partners
TEDxNITRourkela · Mar 9, 2021 · a699cb5 · a699cb5
1 parent a6b6c1a
commit a699cb5
Show file tree

Hide file tree

Showing 6 changed files with 190 additions and 46 deletions.
diff --git a/client/src/assets/img/pages.js b/client/src/assets/img/pages.js
@@ -83,6 +83,8 @@ export const PARTNERS = Object.freeze({
     'https://res.cloudinary.com/tedxnitrourkela/image/upload/partners/tedx/my_puri-removebg-preview_iupdzm.png',
   ODISHA_TRENDING:
     'https://res.cloudinary.com/tedxnitrourkela/image/upload/partners/tedx/odisha_trending_sndntr.png',
+  ROURKELA_SHINES:
+    'https://res.cloudinary.com/tedxnitrourkela/image/upload/partners/tedx/Rourkela_shines-removebg-preview_edahhf.png',
 });
 
 export const TICKETS = Object.freeze({

diff --git a/client/src/assets/placeholder/partner.js b/client/src/assets/placeholder/partner.js
@@ -52,6 +52,12 @@ export const PARTNER = Object.freeze({
         hrefTitle: 'Odisha Trending',
         size: '20%',
       },
+      {
+        img: PARTNERS.ROURKELA_SHINES,
+        hrefTitle: 'Rourkela Shines',
+        href: 'https://www.instagram.com/rourkelashines/?hl=en',
+        size: '12%',
+      },
     ],
   },
   FOUR: {

diff --git a/client/src/components/shared/Modal.js b/client/src/components/shared/Modal.js
@@ -0,0 +1,76 @@
+import React from 'react';
+import { makeStyles, Typography } from '@material-ui/core';
+import Modal from '@material-ui/core/Modal';
+import Backdrop from '@material-ui/core/Backdrop';
+import Fade from '@material-ui/core/Fade';
+
+const useStyles = makeStyles((theme) => ({
+  modal: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  paper: {
+    minHeight: '200px',
+    backgroundColor: theme.palette.background.default,
+    border: '2px solid #1a1a1a',
+    boxShadow: theme.shadows[5],
+    padding: theme.spacing(2, 4, 3),
+  },
+  title: {
+    fontFamily: 'Zilla Slab',
+    color: '#fff',
+  },
+  content: {
+    fontFamily: 'Helvetica',
+    color: '#fff',
+    marginBottom: '50px',
+  },
+}));
+
+export default function TransitionsModal({
+  open,
+  setOpen,
+  title,
+  content,
+  actions,
+}) {
+  const classes = useStyles();
+
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  return (
+    <Modal
+      aria-labelledby='transition-modal-title'
+      aria-describedby='transition-modal-description'
+      className={classes.modal}
+      open={open}
+      onClose={handleClose}
+      closeAfterTransition
+      BackdropComponent={Backdrop}
+      BackdropProps={{
+        timeout: 500,
+      }}
+    >
+      <Fade in={open}>
+        <div className={classes.paper}>
+          <Typography
+            className={`${classes.title} transition-modal-title`}
+            variant='h2'
+          >
+            {title}
+          </Typography>
+          <Typography
+            className={`${classes.content} transition-modal-description`}
+            variant='body1'
+          >
+            {content}
+          </Typography>
+          {actions}
+        </div>
+      </Fade>
+    </Modal>
+  );
+}
diff --git a/client/src/components/tickets/GoogleForm.js b/client/src/components/tickets/GoogleForm.js
@@ -1,16 +1,11 @@
-import React, { useState } from 'react';
+import React from 'react';
 
 // Libraries
 import { makeStyles, Typography, Modal } from '@material-ui/core';
 
-function Tickets() {
-  const [open, setOpen] = useState(false);
+function Tickets({ open, setOpen, setModalOpen }) {
   const classes = useStyles();
 
-  const handleOpen = () => {
-    setOpen(true);
-  };
-
   const handleClose = () => {
     setOpen(false);
   };
@@ -46,7 +41,7 @@ function Tickets() {
           Are you an NITR student? Apply here!!
         </Typography>
         <button
-          onClick={handleOpen}
+          onClick={() => setModalOpen(true)}
           type='button'
           className={classes.studentButton}
         >
@@ -57,8 +52,8 @@ function Tickets() {
         </Modal>
       </div>
       <Typography variant='body2' className={classes.message}>
-        NITR Students will be able to watch the event live on YouTube after
-        registration.
+        Only registered NITR Students will be able to watch the event live on
+        YouTube.
       </Typography>
     </div>
   );

diff --git a/client/src/components/tickets/Ticket.js b/client/src/components/tickets/Ticket.js
@@ -1,4 +1,3 @@
-/* eslint-disable max-len */
 /* eslint-disable no-undef */
 import React, { useEffect } from 'react';
 
@@ -10,7 +9,6 @@ import { SnackbarProvider, useSnackbar } from 'notistack';
 import { TICKETS } from '../../assets/img/pages';
 
 // Utilities
-import { analytics } from '../../config/firebase';
 import createBrowserHistory from '../../utils/history';
 
 const PAYMENT_STATUS = {
@@ -21,18 +19,7 @@ const PAYMENT_STATUS = {
   INITIATED: 'Payment initiated',
 };
 
-function Tickets({ short }) {
-  // Logic to determine the type of ticket.
-  const referrals = window.location.pathname.split('/');
-  let isReferral;
-  if (referrals && referrals[1] === 'tickets' && referrals[2] === 'referrals')
-    isReferral = true;
-  else isReferral = false;
-
-  const paymentLink = isReferral
-    ? `https://www.instamojo.com/@StudentActivityCenter/${referrals[3]}/`
-    : /* eslint-disable-next-line */
-      'https://www.instamojo.com/@StudentActivityCenter/l2819ae69330f4c8a8ee450758aa6b022/';
+function Tickets({ short, handlePayment }) {
   const imageURL = TICKETS.NOPRICE;
 
   // Snackbar functions
@@ -74,10 +61,16 @@ function Tickets({ short }) {
       action,
     });
 
-  // Main Payment function
-  const handlePayment = () => {
+  useEffect(() => {
+    const script = document.createElement('script');
+    script.src = 'https://js.instamojo.com/v1/checkout.js';
+    script.async = true;
+
+    document.body.appendChild(script);
+  }, []);
+
+  const handlePaymentClick = () => {
     if (Instamojo) {
-      /* Configuring Handlers */
       Instamojo.configure({
         handlers: {
           onOpen: onPayOpen,
@@ -86,21 +79,10 @@ function Tickets({ short }) {
           onFailure: onPayFail,
         },
       });
-
-      // Log Button Payment Event
-      analytics().logEvent('Pay Button Clicked');
-
-      Instamojo.open(paymentLink);
     }
-  };
 
-  useEffect(() => {
-    const script = document.createElement('script');
-    script.src = 'https://js.instamojo.com/v1/checkout.js';
-    script.async = true;
-
-    document.body.appendChild(script);
-  }, []);
+    handlePayment();
+  };
 
   return (
     <div className={classes.container}>
@@ -113,7 +95,9 @@ function Tickets({ short }) {
 
         <button
           onClick={
-            short ? () => createBrowserHistory.push('/tickets') : handlePayment
+            short
+              ? () => createBrowserHistory.push('/tickets')
+              : handlePaymentClick
           }
           type='button'
           className={classes.button}
@@ -125,10 +109,10 @@ function Tickets({ short }) {
   );
 }
 
-export default function IntegratedTickets({ short = false }) {
+export default function IntegratedTickets({ short = false, handlePayment }) {
   return (
     <SnackbarProvider maxSnack={3}>
-      <Tickets short={short} />
+      <Tickets short={short} handlePayment={handlePayment} />
     </SnackbarProvider>
   );
 }

diff --git a/client/src/views/Tickets.js b/client/src/views/Tickets.js
@@ -1,5 +1,6 @@
 /* eslint-disable no-undef */
-import React, { useEffect } from 'react';
+/* eslint-disable max-len */
+import React, { useEffect, useState } from 'react';
 
 // Libraries
 import { Container, makeStyles, Typography } from '@material-ui/core';
@@ -13,6 +14,7 @@ import { analytics } from '../config/firebase';
 import Ticket from '../components/tickets/Ticket';
 import CustomTable from '../components/shared/Table';
 import GoogleForm from '../components/tickets/GoogleForm';
+import Modal from '../components/shared/Modal';
 
 // Assets
 import { GRAPHICS } from '../assets/img/graphics';
@@ -27,12 +29,58 @@ function Tickets() {
     isReferral = true;
   else isReferral = false;
 
+  const paymentLink = isReferral
+    ? `https://www.instamojo.com/@StudentActivityCenter/${referrals[3]}/`
+    : /* eslint-disable-next-line */
+      'https://www.instamojo.com/@StudentActivityCenter/l2819ae69330f4c8a8ee450758aa6b022/';
+
+  // Component States
+  const [modalOpen, setModalOpen] = useState(false);
+  const [googleFormOpen, setGoogleFormOpen] = useState(false);
+  // const [checkoutOpen, setCheckoutOpen] = useState(false);
+
+  // Button Handlers
+  const handleYoutubeClick = () => {
+    setModalOpen(false);
+    setGoogleFormOpen(true);
+  };
+  const handleAirmeetClick = () => {
+    setModalOpen(false);
+
+    // Log Button Payment Event
+    analytics().logEvent('Pay Button Clicked');
+
+    if (Instamojo) Instamojo.open(paymentLink);
+  };
+
   const classes = useStyles();
 
   useEffect(() => {
     analytics().logEvent('Tickets Page Loaded');
   }, []);
 
+  const modalAction = (
+    <div className={classes.actionsContainer}>
+      <button
+        onClick={handleYoutubeClick}
+        onKeyDown={handleYoutubeClick}
+        className={classes.button}
+        type='button'
+      >
+        Register to watch YouTube Livestream (Free)
+      </button>
+
+      <button
+        onClick={handleAirmeetClick}
+        onKeyDown={handleAirmeetClick}
+        className={classes.button}
+        type='button'
+      >
+        Become a part of the event at Airmeet
+      </button>
+    </div>
+  );
+
   return (
     <div className={classes.root}>
       <Helmet>
@@ -50,7 +98,7 @@ function Tickets() {
 
       <Container className={classes.container}>
         <div className={classes.left}>
-          <Ticket />
+          <Ticket handlePayment={handleAirmeetClick} />
 
           <a href='https://files.tedxnitrourkela.com/Ticket_TnC.pdf'>
             <Typography variant='body2' className={classes.terms}>
@@ -71,7 +119,11 @@ function Tickets() {
         </div>
       </Container>
       <Container className={classes.bottom}>
-        <GoogleForm />
+        <GoogleForm
+          open={googleFormOpen}
+          setOpen={setGoogleFormOpen}
+          setModalOpen={setModalOpen}
+        />
       </Container>
 
       <div className={classes.carouselContainer}>
@@ -96,6 +148,14 @@ function Tickets() {
           </Carousel>
         </Container>
       </div>
+
+      <Modal
+        title='NITR Student Registeration'
+        content='Please choose the relevant option. Only registered IDs will get to see event live on YouTube'
+        actions={modalAction}
+        open={modalOpen}
+        setOpen={setModalOpen}
+      />
     </div>
   );
 }
@@ -182,4 +242,25 @@ const useStyles = makeStyles((theme) => ({
     color: '#fff',
     marginBottom: 30,
   },
+  actionsContainer: {
+    display: 'flex',
+    justifyContent: 'space-around',
+    alignItems: 'center',
+    backgroundColor: 'transparent',
+  },
+  button: {
+    margin: 'auto 10px',
+    border: '1px solid #FF2B06',
+    borderRadius: '6px',
+    backgroundColor: '#1a1a1a',
+    padding: '10px 20px',
+    color: '#ffffff',
+    minWidth: '150px',
+    width: 'auto',
+    fontSize: '14px',
+    '&:hover': {
+      backgroundColor: '#FF2B06',
+      cursor: 'pointer',
+    },
+  },
 }));