Merge pull request #125 from flickmatch/ws-group-link

added whatsapp group link
flickmatch · Jan 22, 2024 · 7abbf54 · 7abbf54
2 parents e978ce6 + 2f9df93
commit 7abbf54
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 6 deletions.
diff --git a/react-fm/src/pages/matchQueues/GamesList.tsx b/react-fm/src/pages/matchQueues/GamesList.tsx
@@ -49,6 +49,11 @@ export const GamesList: FC<event> = ({ gameEvent, cityName }) => {
       <Accordion
         className={isPortrait ? styles.mobileAccordion : styles.accordion}
         key={playingEvent.eventId}
+        sx={{
+          '&:before': {
+            display: 'none',
+          },
+        }}
       >
         <AccordionSummary
           expandIcon={<ExpandMoreIcon />}

diff --git a/react-fm/src/pages/matchQueues/Queue.module.scss b/react-fm/src/pages/matchQueues/Queue.module.scss
@@ -30,6 +30,7 @@ body {
 .accordion {
   background: #1a1919;
   margin-bottom: 35px;
+  border-radius: 10px;
 }
 
 .mobileAccordion {

diff --git a/react-fm/src/pages/matchQueues/constants.ts b/react-fm/src/pages/matchQueues/constants.ts
@@ -48,7 +48,10 @@ const query = JSON.stringify({
 
 const apiUrl = 'https://service.flickmatch.in:8443/platform-0.0.1-SNAPSHOT/graphql';
 
-export { avatars, query, apiUrl };
+const gurugramGroupLink = 'https://chat.whatsapp.com/Hw9P3QVc7HcFE7aT9Khu04';
+const hyderabadGroupLink = 'https://chat.whatsapp.com/C45og1xI1lk9HDCIzljQdL';
+
+export { avatars, query, apiUrl, gurugramGroupLink, hyderabadGroupLink };
 
 //fields to be add in the query inside events object
 // team_division,

diff --git a/react-fm/src/pages/matchQueues/eventsComponents/Events.module.scss b/react-fm/src/pages/matchQueues/eventsComponents/Events.module.scss
@@ -42,6 +42,12 @@ input:-webkit-autofill:active {
   color: #fff;
 }
 
+.whatsappGroupIcon {
+  margin-left: 15px;
+  margin-bottom: -4.5px;
+  color: #fff;
+}
+
 .title {
   color: #4ce95a;
   font-size: 18px;

diff --git a/react-fm/src/pages/matchQueues/eventsComponents/Events.tsx b/react-fm/src/pages/matchQueues/eventsComponents/Events.tsx
@@ -3,12 +3,14 @@ import type { FC } from 'react';
 import { CurrencyRupeeSharp } from '@mui/icons-material';
 import AttachMoneyIcon from '@mui/icons-material/AttachMoney';
 import LocationOnIcon from '@mui/icons-material/LocationOn';
+import WhatsAppIcon from '@mui/icons-material/WhatsApp';
 import Grid from '@mui/material/Grid';
 import Typography from '@mui/material/Typography';
 
 import { FlexBox } from '@/components/styled';
 import useOrientation from '@/hooks/useOrientation';
 
+import { gurugramGroupLink, hyderabadGroupLink } from '../constants';
 import mapCityData from '../map';
 import type { EventDetails } from '../types/Events.types';
 import styles from './Events.module.scss';
@@ -31,12 +33,13 @@ export const EventsCard: FC<EventDetails> = ({
   const isPortrait = useOrientation();
   const openSpots = reservedPlayersCount - reservedPlayersList.length;
   const openWaitList = waitListPlayersCount - waitListPlayers.length;
+  const whatsappGroupLink = eventId === 'Hyderabad' ? hyderabadGroupLink : gurugramGroupLink;
 
   //getting next day date
   const tomorrow = new Date();
   tomorrow.setDate(tomorrow.getDate() + 1);
   const dateToString = tomorrow.toString();
-  const index = dateToString.indexOf('2023');
+  const index = dateToString.indexOf('2024');
   const futureDate = dateToString.substring(0, index);
 
   const dateFormat = new Date().toLocaleDateString('en-US', {
@@ -78,7 +81,7 @@ export const EventsCard: FC<EventDetails> = ({
   };
 
   const price = () => (
-    <Grid item xs={4} sm={4} md={4}>
+    <Grid item xs={4} sm={4} md={3}>
       <Typography className={styles.title}>
         Price{' '}
         <span>
@@ -89,6 +92,17 @@ export const EventsCard: FC<EventDetails> = ({
     </Grid>
   );
 
+  const whatsappGroup = () => (
+    <Grid item xs={4} sm={4} md={4}>
+      <Typography className={styles.title}>
+        Game Group{' '}
+        <a href={whatsappGroupLink} target="_blank" rel="noreferrer">
+          <WhatsAppIcon className={styles.whatsappGroupIcon} />
+        </a>
+      </Typography>
+    </Grid>
+  );
+
   const timeFrame = () => {
     let timeZone;
     mapCityData.forEach((cityData) => {
@@ -106,7 +120,7 @@ export const EventsCard: FC<EventDetails> = ({
   };
 
   const dateTime = () => (
-    <Grid item xs={4} sm={6} md={6}>
+    <Grid item xs={4} sm={6} md={4}>
       <Typography className={styles.title}>
         Date{''}
         {/* {eventId === '2' || eventId === '1' ? (
@@ -122,7 +136,7 @@ export const EventsCard: FC<EventDetails> = ({
   );
 
   const googleLocation = () => (
-    <Grid item xs={4} sm={4} md={4}>
+    <Grid item xs={4} sm={4} md={3}>
       <Typography className={styles.title}>
         Google Map{' '}
         <a href={venueLocationLink} target="_blank" rel="noreferrer">
@@ -133,7 +147,7 @@ export const EventsCard: FC<EventDetails> = ({
   );
 
   const numberOfPlayers = () => (
-    <Grid item xs={4} sm={4} md={4}>
+    <Grid item xs={4} sm={4} md={3}>
       <Typography className={styles.title}>
         Number of Players <span>{reservedPlayersCount}</span>
       </Typography>
@@ -189,6 +203,7 @@ export const EventsCard: FC<EventDetails> = ({
         >
           {price()}
           {dateTime()}
+          {whatsappGroup()}
         </Grid>
       </FlexBox>
       <FlexBox