diff --git a/client/src/pages/dashboard/components/CheckerPageMetrics 2.tsx b/client/src/pages/dashboard/components/CheckerPageMetrics 2.tsx deleted file mode 100644 index e7cbb7d..0000000 --- a/client/src/pages/dashboard/components/CheckerPageMetrics 2.tsx +++ /dev/null @@ -1,144 +0,0 @@ -import styles from "./CheckerPageMetrics.module.css"; -import { - useState, - useEffect, - Dispatch, - SetStateAction, - useContext, -} from "react"; -import { ArrowDown2, ArrowUp2 } from "iconsax-react"; -import { DashboardContextProvider } from "../Dashboard"; -import IDashboardContext from "../../../types/IDashboardContext"; - -const getKeyFromDisplayString = ( - displayString: string, - map: { [key: string]: string } -) => { - for (const key in map) { - if (map[key] === displayString) { - return key; - } - } - return map[Object.keys(map)[0]]; -}; - -const CheckerPageMetrics = () => { - /* time periods: last 7 days, last 2 weeks, last month, all time */ - const [dashboard, setDashboard] = useContext(DashboardContextProvider) as [ - IDashboardContext, - Dispatch> - ]; - - const metrics = - dashboard.dashboardPage?.pages.length !== 0 && - dashboard.dashboardPage && - dashboard.selectedPageIndex !== undefined - ? dashboard.dashboardPage.pages[dashboard.selectedPageIndex].metrics - : Object.create(null); - - const possibleTimePeriodsDisplay: { [key: string]: string } = { - allTime: "all time", - lastDay: "last day", - last7Days: "last 7 days", - last30Days: "last 30 days", - }; - const possibleTimePeriods = Object.keys(metrics); - - const [timePeriod, setTimePeriod] = useState(); - const [isOpen, setIsOpen] = useState(false); - - useEffect(() => { - setTimePeriod(possibleTimePeriodsDisplay[possibleTimePeriods[0]]); - }, [dashboard.dashboardPage && dashboard.selectedPageIndex !== undefined]); - - const handleSelectTimePeriod = (time: string) => { - setIsOpen(!isOpen); - setTimePeriod(time); - }; - - return ( -
-
-
{} - : () => setIsOpen(!isOpen) - } - > -

- {Object.getPrototypeOf(metrics) === null ? "N/A" : timePeriod}{" "} -

-
- {!isOpen && } - {isOpen && } -
-
- {isOpen && ( -
- {Object.values(possibleTimePeriodsDisplay).map((time) => ( -
handleSelectTimePeriod(time)} - style={{ transform: "translate(0%, 5.7vh)" }} - > -

{time}

-
- ))} -
- )} -
-
-

number of users

-

total number of checks performed

-

- {Object.getPrototypeOf(metrics) === null - ? "N/A" - : timePeriod && - metrics[ - getKeyFromDisplayString(timePeriod, possibleTimePeriodsDisplay) - ].numberOfChecks} -

-
-
-

duplicates found

-

- total number of existing memberships found -

-

- {Object.getPrototypeOf(metrics) === null - ? "N/A" - : timePeriod && - metrics[ - getKeyFromDisplayString(timePeriod, possibleTimePeriodsDisplay) - ].numberOfDuplicates} -

-
-
- ); -}; - -export default CheckerPageMetrics; diff --git a/client/src/pages/dashboard/components/CheckerPageMetrics.module 2.css b/client/src/pages/dashboard/components/CheckerPageMetrics.module 2.css deleted file mode 100644 index 331401d..0000000 --- a/client/src/pages/dashboard/components/CheckerPageMetrics.module 2.css +++ /dev/null @@ -1,98 +0,0 @@ -.container { - border-radius: 10px; - padding: 20px; - display: flex; - flex-direction: column; - height: 100%; - width: 100%; -} - -.subcontainer { - border-radius: 10px; - padding: 10px 20px; - display: flex; - flex-direction: column; - width: 100%; -} - -.header { - color: rgb(3, 4, 94); - font-size: 3.7vh; - font-family: Montserrat; - font-weight: 600; - line-height: 1.1em; -} - -.subheader { - color: rgb(3, 4, 94, 0.48); - font-size: 1.5vh; - font-style: italic; - font-weight: 500; -} - -.statisticText { - color: #03045e; - font-size: 5vh; - font-weight: 900; - /* font-family: Montserrat; */ -} - -.dropdown { - position: relative; - height: 6vh; - width: 15vw; - border-radius: 10px; - display: flex; - flex-direction: row; - align-items: center; - justify-content: space-between; - border: none; - z-index: 2; - cursor: pointer; -} - -.dropdownText { - padding: 10%; - color: white; - font-size: 2vh; - font-family: Montserrat; - font-weight: 600; -} - -.dropdownArrow { - padding: 10% 5% 10% 0%; - display: flex; - align-items: center; -} - -.dropdownList { - position: absolute; - border-radius: 10px; - background: #489ef4; - overflow-x: hidden; - overflow-y: auto; - width: 15vw; - height: 21.7 vh; -} - -.dropdownCard { - align-items: center; - column-gap: 10px; - cursor: pointer; - display: flex; - padding: 5px 20px; - fill-opacity: 50%; - z-index: 3; - font-size: 1.7vh; - font-weight: 500; - font-family: Montserrat; - height: 5vh; - /*disable highlighting of text*/ - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - &:hover { - background: #0c81d4; - } -} diff --git a/client/src/pages/dashboard/components/CheckerPagePreview 2.tsx b/client/src/pages/dashboard/components/CheckerPagePreview 2.tsx deleted file mode 100644 index f997a2f..0000000 --- a/client/src/pages/dashboard/components/CheckerPagePreview 2.tsx +++ /dev/null @@ -1,169 +0,0 @@ -import React, { - useState, - useRef, - Dispatch, - SetStateAction, - useContext, -} from 'react'; -import styles from './CheckerPagePreview.module.css'; -import ClubCheckerPage from '../../club-checker-page/ClubCheckerPage'; -import Textfield from '../../../components/Textfield'; -import copyIcon from '../../../assets/CopyIcon2.svg'; -import ClickNextArrow from '../../../assets/ClickNextArrow.svg'; -import ClickPrevArrow from '../../../assets/ClickPreviousArrow.svg'; -import { DashboardContextProvider } from '../Dashboard'; -import IDashboardContext from '../../../types/IDashboardContext'; - -const CheckerPagePreview = () => { - const [dashboard, setDashboard] = useContext(DashboardContextProvider) as [ - IDashboardContext, - Dispatch> - ]; - - const textFieldRef = useRef(null); - - const pages = dashboard.dashboardPage?.pages; - if (pages === undefined) { - return
; - } - - const currentPageIndex = dashboard.selectedPageIndex; - - const handleNextPage = () => { - if (currentPageIndex !== undefined && currentPageIndex < pages.length - 1) { - setDashboard({ ...dashboard, selectedPageIndex: currentPageIndex + 1 }); - } - }; - - const handlePrevPage = () => { - if (currentPageIndex !== undefined && currentPageIndex > 0) { - setDashboard({ ...dashboard, selectedPageIndex: currentPageIndex - 1 }); - } - }; - - let currentPageData; - if (currentPageIndex !== undefined) { - currentPageData = pages[currentPageIndex]; // Get the data for the current page - } - - const handleCopyButtonClick = async () => { - if (textFieldRef.current) { - const value = textFieldRef.current?.placeholder; - try { - await navigator.clipboard.writeText(value); - console.log('Copy succeeded'); - } catch (error) { - console.log('Copy failed: ', error); - } - } - }; - - return ( -
-

Checker Pages

- {currentPageIndex === undefined || currentPageData === undefined ? ( -
No checker pages created for this club!
- ) : ( -
- {/* Read-only textbox and copy button */} -
- - -
- -
- -
- {/*div for links */} -
- {/* Edit button (edit functionality to be implemented) */} - Edit - | - {/* View API keys button (view API keys functionality to be implemented) */} - View API Keys - | - {/* Delete button (delete functionality to be implemented) */} - Delete -
- {/* Navigation buttons */} -
- {currentPageIndex > 0 && ( - Click Previous - )} -
-
- {currentPageIndex < pages.length - 1 && ( - Click Next - )} -
- - {pages.length > 1 && ( -
- {/* Show the navigation dots */} - {pages.map((page, index) => ( - - setDashboard({ ...dashboard, selectedPageIndex: index }) - } - > - - - ))} -
- )} -
-
-
- )} -
- ); -}; - -export default CheckerPagePreview; diff --git a/client/src/pages/dashboard/components/CheckerPagePreview.module 2.css b/client/src/pages/dashboard/components/CheckerPagePreview.module 2.css deleted file mode 100644 index fe14757..0000000 --- a/client/src/pages/dashboard/components/CheckerPagePreview.module 2.css +++ /dev/null @@ -1,194 +0,0 @@ -/* CheckerPagePreview.module.css */ -@import url("../../club-checker-page/ClubCheckerPage.module.css"); - -@font-face { - font-family: "Montserrat SemiBold"; - src: url("/Montserrat-SemiBold.ttf"); -} - -@font-face { - font-family: "Montserrat Light"; - src: url("/Montserrat-Light.ttf"); -} - -@font-face { - font-family: "Montserrat Italic"; - src: url("/Montserrat-Italic-VariableFont_wght.ttf"); -} -/* Container styles for positioning */ -/*.uploadButtonContainer {*/ -/* position: relative;*/ -/* width: auto;*/ -/* height: auto;*/ -/* color: #707070;*/ -/* background-color: #ddd;*/ -/* border-radius: 20px;*/ -/*}*/ - -.container { - height: 10px !important; -} - -.previewContainer { - position: relative; - padding: 1em; /* Add padding to match the dashboardItemContainer */ - align-items: center; -} - -/* Styles for the overlaid

tag */ -.overlayText { - font-family: "Montserrat SemiBold"; - color: #03045e; /* Change the color to your desired text color */ - pointer-events: none; /* Prevent the

tag from intercepting events */ - margin-bottom: 2%; -} - -.preview { - position: relative; - width: 100%; - height: 100%; -} - -.checkerPageWrapper { - position: relative; - display: flex; - flex-direction: column; - align-items: center; /* Center horizontally */ - justify-content: center; /* Center vertically */ -} - -.overlayButtons { - position: absolute; - height: 100%; - width: 100%; -} - -.pageLinksContainer { - left: 10px; - top: 10px; - position: absolute; - width: fit-content; -} - -.overlayButtons a { - color: #03045e; - text-decoration: none; - border-radius: 5px; -} - -.overlayButtons span { - color: #03045e; -} - -.prevArrowContainer { - position: absolute; - top: 45%; - left: 15px; - width: fit-content; -} - -.nextArrowContainer { - position: absolute; - top: 45%; - right: 15px; - width: fit-content; -} - -.prevArrow { - width: 3rem; - height: 3rem; - /* background-color: transparent; */ - /* transition: background-color 0.2s ease; */ - display: flex; -} - -.nextArrow { - width: 3rem; - height: 3rem; - /* background-color: transparent; - transition: background-color 0.2s ease; - margin-left: auto; - margin-top: 30rem; - display: flex; */ -} - -.prevArrow:hover, -.nextArrow:hover { - background-color: transparent; /* Remove any background color on hover */ - opacity: 0.6; /* Reduce opacity slightly on hover for visual feedback */ -} - -.pagination { - display: flex; - justify-content: center; - align-items: center; - position: absolute; - bottom: 10px; /* Adjust the distance from the bottom */ - left: 50%; /* Center horizontally */ - transform: translateX(-50%); /* Center horizontally */ -} - -.pagination .dot, -.pagination .activeDot { - width: 13px; - height: 13px; - background-color: #ffffff; - border-radius: 50%; - margin: 0 4px; - cursor: pointer; - transition: background-color 0.2s ease; -} - -.pagination .activeDot { - background-color: #ffffff; - position: relative; -} - -.pagination .activeDot.clicked .innerDot { - background-color: #dbdbdb; /* Change the color to black when clicked */ -} - -.pagination .activeDot .innerDot { - position: absolute; - width: 75%; - height: 75%; - background-color: transparent; - border-radius: 50%; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); -} - -.urlContainer input::placeholder { - color: #03045e; - font-family: "Montserrat Italic"; - font-weight: bold; -} - -.urlContainer { - position: relative; - display: flex; - align-items: center; - margin-bottom: 1.5%; -} - -.copyButton { - position: absolute; - right: 0rem; /* Adjust the distance from the right */ - width: 2.5rem; - height: 70%; - background-color: transparent; - border: none; - cursor: pointer; - z-index: 1; /* Ensure the button is above the Textfield */ -} - -.copyIcon { - width: 100%; - height: 100%; - transition: fill 0.2s ease; -} - -.copyButton:hover .copyIcon { - fill: #1e40af; /* Change the color to your desired icon color on hover */ -} diff --git a/client/src/pages/dashboard/components/CheckerPagePreview.tsx b/client/src/pages/dashboard/components/CheckerPagePreview.tsx index 01d969b..f272e2a 100644 --- a/client/src/pages/dashboard/components/CheckerPagePreview.tsx +++ b/client/src/pages/dashboard/components/CheckerPagePreview.tsx @@ -95,7 +95,7 @@ const CheckerPagePreview = () => { { - const [dashboard, setDashboard] = useContext(DashboardContextProvider) as [ - IDashboardContext, - Dispatch> - ]; - - const admins = dashboard.dashboardPage?.clubAdmins || []; //Need to rename this when I find out what the name being saved to the context is - // const admins = ["Adam McKinsley", "Bob Arthur", "Cindy Wong", "Amanda Young"]; - - return ( - <> -

-

club admins

-
- {admins.map((admin) => ( -

- {admin} -

- ))} -
-
- - ); -}; - -export default ClubAdminsList; diff --git a/client/src/pages/dashboard/components/ClubAdminsList.module 2.css b/client/src/pages/dashboard/components/ClubAdminsList.module 2.css deleted file mode 100644 index 5430489..0000000 --- a/client/src/pages/dashboard/components/ClubAdminsList.module 2.css +++ /dev/null @@ -1,26 +0,0 @@ -.classListContainer { - width: 100%; -} - -.namesContainer { - width: 100%; - height: 80px; - background-color: #c1c1c2; - border-radius: 7px; - overflow-y: scroll; - padding: 0.5em 1em; -} - -.classListHeader { - font-family: "Montserrat"; - color: #03045e; - font-size: 18px; - padding-bottom: 0.1em; -} - -.adminName { - color: #03045e; - font-family: "Montserrat"; - font-weight: 500; - font-size: 12px; -} diff --git a/client/src/pages/dashboard/components/ClubSize 2.tsx b/client/src/pages/dashboard/components/ClubSize 2.tsx deleted file mode 100644 index 06556fc..0000000 --- a/client/src/pages/dashboard/components/ClubSize 2.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import { DashboardContextProvider } from "../Dashboard"; -import IDashboardContext from "../../../types/IDashboardContext"; -import styles from "./ClubSize.module.css"; -import { useContext, Dispatch, SetStateAction } from "react"; - -const ClubSize = () => { - // retrieve context - const [dashboard, setDashboard] = useContext(DashboardContextProvider) as [ - IDashboardContext, - Dispatch> - ]; - - let memberCount; - const selectedPageIndex = dashboard.selectedPageIndex; - if ( - selectedPageIndex !== undefined && - dashboard.dashboardPage?.pages.length !== 0 - ) { - const pageId = dashboard.dashboardPage?.pages[selectedPageIndex].id; - if (pageId !== undefined) { - memberCount = - dashboard.dashboardPage?.memberCountByPageId[pageId].totalMembers; - } - } - - return ( -
-
-

number of club users

-

- specific to the Google Sheet for this checker page -

-

- {memberCount !== undefined ? memberCount : "N/A"} -

-
-
- ); -}; - -export default ClubSize; diff --git a/client/src/pages/dashboard/components/ClubSize.module 2.css b/client/src/pages/dashboard/components/ClubSize.module 2.css deleted file mode 100644 index ecba497..0000000 --- a/client/src/pages/dashboard/components/ClubSize.module 2.css +++ /dev/null @@ -1,45 +0,0 @@ - -@font-face { - font-family: "Montserrat-ExtraBold"; - src: url('/Montserrat-ExtraBold.ttf'); -} - -@font-face { - font-family: "Montserrat-SemiBold-Italics"; - src: url('/Montserrat-SemiBoldItalic.ttf'); -} - -.container{ - background: #E0E0E0; - border-radius: 20px; - padding: 2% 5% 2% 5%; - display: flex; - flex-direction: column; - justify-content: space-between; - row-gap: 0%; - width: 100%; - height: 100%; - font-family: "montserrat"; - } - - .header{ - color: rgb(3, 4, 94); - font-size: 1.75rem; - font-weight: 600; - line-height: 1.1em; - } - - .subheader{ - color: rgb(3, 4, 94, 0.48); - font-size: 1.5vh; - /* font-style: italic; - font-weight: 500; */ - font-family: 'Montserrat-SemiBold-Italics' ; - } - - .sizeText{ - color: #03045E; - font-size: 5vh; - /* font-weight: 900; */ - font-family: 'Montserrat-ExtraBold'; - } \ No newline at end of file diff --git a/client/src/pages/dashboard/components/GenerateInviteCode 2.tsx b/client/src/pages/dashboard/components/GenerateInviteCode 2.tsx deleted file mode 100644 index aed203b..0000000 --- a/client/src/pages/dashboard/components/GenerateInviteCode 2.tsx +++ /dev/null @@ -1,168 +0,0 @@ -import styles from "./GenerateInviteCode.module.css"; -import Button from "../../../components/Button"; -import axios from "axios"; -import { - Dispatch, - SetStateAction, - useContext, - useEffect, - useState, -} from "react"; -import { Copy, TickCircle } from "iconsax-react"; -import { CircularProgress } from "@mui/material"; -import IDashboardContext from "../../../types/IDashboardContext"; -import { DashboardContextProvider } from "../Dashboard"; - -const GenerateInviteCode = () => { - // retrieve context - const [dashboard, setDashboard] = useContext(DashboardContextProvider) as [ - IDashboardContext, - Dispatch> - ]; - - const [copied, setIsCopied] = useState(false); - const [generateDisabled, setGenerateDisabled] = useState(false); - const [loadingState, setLoadingState] = useState(false); - const [generateButtonColor, setGenerateButtonColor] = useState("#087DF1"); - const [generateButtonText, setGenerateButtonText] = useState("generate!"); - const [fontsize, setFontsize] = useState("1.4vh"); - const [text, setText] = useState("click generate"); - const [subheader, setSubheader] = useState( - "click to generate a new invite code" - ); - const [cancelTokenSource, setCancelTokenSource] = useState( - axios.CancelToken.source() - ); - - const handleClick = () => { - const newCancelToken = axios.CancelToken.source(); - setCancelTokenSource(newCancelToken); - setGenerateDisabled(true); - setGenerateButtonText(""); - setLoadingState(true); - axios - .get(`/club/create-invite-code/${dashboard.selectedClub?.id}`, { - cancelToken: newCancelToken.token, - }) - .then(function (response) { - if (response.status === 200) { - setText(response.data); - setSubheader( - "copy this invite code - you won’t get to see it again!" - ); - setLoadingState(false); - setGenerateButtonColor("#838383"); - setGenerateButtonText("code expires in 2 hours"); - setFontsize("1vh"); - } - }) - .catch(function (error) { - if (axios.isCancel(error)) { - // Handle the cancellation here - console.log("Request canceled:", error.message); - } else { - console.error(error); - } - }); - }; - - const resetLayout = () => { - setSubheader("click to generate a new invite code"); - cancelTokenSource.cancel("Cancel generating code due to switching club"); - setLoadingState(false); - setGenerateDisabled(false); - setGenerateButtonColor("#087DF1"); - setGenerateButtonText("generate!"); - setText("click generate"); - setFontsize("1.4vh"); - setIsCopied(false); - }; - - useEffect(() => { - resetLayout(); - }, [dashboard.selectedClub?.id]); - - const handleCopy = () => { - navigator.clipboard.writeText(text); - setIsCopied(true); - setTimeout(() => setIsCopied(false), 2000); - }; - - const buttonStyle = { - display: "flex", - alignItems: "center", - justifyContent: "center", - background: "transparent", - border: "none", - outline: "none", - cursor: "pointer", - marginLeft: "16vw", - marginTop: "-3.2vh", - }; - - const iconStyle = { - color: "#03045E", - size: 20, - }; - - return ( - <> -
-
-

invite new admin

-

{subheader}

-
-
-
- {text} - {text !== "click generate" && ( - - )} -
-
- {loadingState ? ( -
- -
- ) : ( - "" - )} - -
-
-
- - ); -}; - -export default GenerateInviteCode; diff --git a/client/src/pages/onboarding-confirmation-page/ConfirmationPage.tsx b/client/src/pages/onboarding-confirmation-page/ConfirmationPage.tsx index 1fa8b39..365307d 100644 --- a/client/src/pages/onboarding-confirmation-page/ConfirmationPage.tsx +++ b/client/src/pages/onboarding-confirmation-page/ConfirmationPage.tsx @@ -1,20 +1,20 @@ -import styles from './style.module.css'; -import WDCCLogo from '../../assets/wdcc_blue_logo.svg'; -import CopyIcon from '../../assets/CopyIcon2.svg'; -import CopyTickIcon from '../../assets/CopyTickIcon.svg'; -import femaleStanding from '../../assets/femaleStanding.svg'; -import { useLocation, useNavigate } from 'react-router'; -import { useEffect, useState } from 'react'; -import Button from '../../components/Button'; +import styles from "./style.module.css"; +import WDCCLogo from "../../assets/wdcc_blue_logo.svg"; +import CopyIcon from "../../assets/CopyIcon2.svg"; +import CopyTickIcon from "../../assets/CopyTickIcon.svg"; +import femaleStanding from "../../assets/femaleStanding.svg"; +import { useLocation, useNavigate } from "react-router"; +import { useEffect, useState } from "react"; +import Button from "../../components/Button"; export const ConfimationPage = () => { const navigate = useNavigate(); const handleDashboardButtonClick = () => { - navigate('/dashboard'); + navigate("/dashboard"); }; const handleCreateAnotherButtonClick = () => { - navigate('/create-page', { state: location.state?.clubDetails }); + navigate("/create-page", { state: location.state?.clubDetails }); }; const [icon, setIcon] = useState(CopyIcon); @@ -22,7 +22,7 @@ export const ConfimationPage = () => { const location = useLocation(); // uncomment this line when we have te link from the other page and comment the line below - const link = 'https://www.wdcc.com/' + location.state?.pathId; + const link = "https://membership.wdcc.co.nz/" + location.state?.pathId; // const link = "https://www.wdcc.com/laurhliapoiueroij"; return ( @@ -42,28 +42,31 @@ export const ConfimationPage = () => { click on the link below to see your fresh new page:
+ background: "#E0E0E0", + height: "10vh", + color: "#707070", + display: "flex", + alignItems: "center", + marginTop: "2vh", + marginBottom: "2vh", + borderRadius: "8px", + paddingLeft: "1vw", + }} + >
+ fontWeight: "900", + fontStyle: "italic", + whiteSpace: "nowrap", + overflow: "hidden", + textOverflow: "ellipsis", + }} + > + style={{ color: "#707070", fontSize: "2.5vh" }} + > {link}
@@ -71,9 +74,9 @@ export const ConfimationPage = () => { src={icon} alt="copy icon" style={{ - marginLeft: 'auto', - marginRight: '2vw', - cursor: 'pointer', + marginLeft: "auto", + marginRight: "2vw", + cursor: "pointer", }} onClick={() => { setIcon(CopyTickIcon);