Merge branch 'master' into 610-frontend-sort-the-membership-prices-be…

…fore-returning-thme

.github/workflows/delete-firebase-client-on-close.yml

@@ -0,0 +1,28 @@
+name: Delete firebase channel upon PR close
+
+on:
+  pull_request:
+    types: [closed]
+
+jobs:
+  delete_firebase_channel:
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+    steps:
+      # Substring workaround by using shell method
+      - name: Get short pull request title
+        id: get-short-pr
+        run: |
+          echo "pr=$(echo ${{github.head_ref}} | cut -c 1-20)" >> $GITHUB_OUTPUT
+
+      - uses: actions/checkout@v3
+
+      - uses: w9jds/[email protected]
+        with:
+          # as we didn't specify a specific channel id, firebase-action defaults
+          # with using pr<ticket number>-<ticket reference substringed to 20 chars>
+          args: hosting:channel:delete pr${{ github.event.pull_request.number }}-${{ steps.get-short-pr.outputs.pr }} --force
+        env:
+          # The Firebase service account key
+          GCP_SA_KEY: ${{ secrets.FIREBASE_SERVICE_ACCOUNT_UASC_CEEBC }}
+          PROJECT_ID: uasc-ceebc

README.md

@@ -18,6 +18,7 @@ Project initiated by WDCC in 2023.
 - Kunal Bhaskar
 - Miguel Landingin
 - Ray Xiao
+- Troy Mackenzie-Smee
 
 ## 2023 Team Leadership
 

client/README.md

@@ -1,3 +1,7 @@
+# Frotend architecture information
+
+https://github.com/UoaWDCC/uasc-web/wiki/Frontend-Architecture
+
 This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
 
 ## Getting Started

client/src/components/composite/Admin/AdminAvailabilityView/AdminAvailabilityView.tsx

@@ -1,12 +1,12 @@
 import Calendar from "@/components/generic/Calendar/Calendar"
 import Button from "@/components/generic/FigmaButtons/FigmaButton"
 import { BookingAvailability } from "@/models/Booking"
-import { useContext } from "react"
+import { useContext, useMemo } from "react"
 import { DateSelectionContext } from "./DateSelectionContext"
 import Table from "@/components/generic/ReusableTable/Table"
 import { Timestamp } from "firebase/firestore"
 import TextInput from "@/components/generic/TextInputComponent/TextInput"
-import { DEFAULT_BOOKING_AVAILABILITY } from "@/utils/Constants"
+import { DEFAULT_BOOKING_AVAILABILITY, MS_IN_SECOND } from "@/utils/Constants"
 import { DateUtils } from "@/components/utils/DateUtils"
 /**
  * Reasonable amount of items to display on table
@@ -63,13 +63,17 @@ export const formatBookingSlotsForAvailabilityView = (
   return slots
     .filter(
       (slot) =>
-        slot.date.seconds >= startDate.seconds &&
-        slot.date.seconds <= endDate.seconds
+        DateUtils.timestampMilliseconds(slot.date) >=
+          startDate.seconds * MS_IN_SECOND &&
+        DateUtils.timestampMilliseconds(slot.date) <=
+          endDate.seconds * MS_IN_SECOND
     )
     .map((slot) => {
       return {
         uid: slot.id,
-        Date: DateUtils.timestampToDate(slot.date).toDateString(),
+        Date: new Date(
+          DateUtils.timestampMilliseconds(slot.date)
+        ).toDateString(),
         "Max Bookings": slot.maxBookings.toString(),
         "Available Spaces": slot.availableSpaces.toString()
       }
@@ -105,15 +109,19 @@ const AdminAvailabilityView = ({
     setSlotQty
   } = useContext(DateSelectionContext)
 
-  const dateRangeDefined = startDate && endDate
+  const dateRangeDefined = !!(startDate && endDate)
 
-  const tableData: CondensedBookingInfoColumn[] = dateRangeDefined
-    ? formatBookingSlotsForAvailabilityView(
-        Timestamp.fromDate(startDate),
-        Timestamp.fromDate(endDate),
-        slots
-      )
-    : [CONDENSED_BOOKING_INFO_DEFAULT_DATA]
+  const tableData: CondensedBookingInfoColumn[] = useMemo(
+    () =>
+      dateRangeDefined
+        ? formatBookingSlotsForAvailabilityView(
+            Timestamp.fromDate(startDate),
+            Timestamp.fromDate(endDate),
+            slots
+          )
+        : [CONDENSED_BOOKING_INFO_DEFAULT_DATA],
+    [startDate, endDate, dateRangeDefined, slots]
+  )
 
   const formattedDateRanges = formatDateRangeForDialog(startDate, endDate)
 

client/src/components/composite/Admin/AdminBookingView/AdminBookingView.tsx

@@ -9,7 +9,7 @@ import {
 import { useState, useRef } from "react"
 import { useClickOutside } from "@/components/utils/Utils"
 import ModalContainer from "@/components/generic/ModalContainer/ModalContainer"
-import AdminBookingCreationPopUp from "./AdminBookingCreationPopUp"
+import WrappedAdminBookingCreationPopUp from "./WrappedAdminBookingCreationPopUp"
 
 /**
  * The format of the columns in the admin booking view.
@@ -167,7 +167,7 @@ export const AdminBookingView = ({
         />
       </div>
       <ModalContainer isOpen={openAddBookingPopup}>
-        <AdminBookingCreationPopUp
+        <WrappedAdminBookingCreationPopUp
           handleClose={() => setOpenAddBookingPopup(false)}
         />
       </ModalContainer>

client/src/components/composite/Contact/Contact.tsx

@@ -1,4 +1,3 @@
-import FullPageBackgroundImage from "@/components/generic/FullPageBackgroundImage/FullPageBackgroundImage"
 import ContactDetailPanel, {
   IContactDetailPanel
 } from "./ContactDetailPanel/ContactDetailPanel"
@@ -9,12 +8,25 @@ interface IContact extends IContactDetailPanel {}
 const Contact = ({ items }: IContact) => {
   return (
     <>
-      <FullPageBackgroundImage>
-        <div className="flex w-full max-w-[800px] flex-col gap-4 py-4">
-          <h2 className="text-dark-blue-100 italic">Contact Us</h2>
+      <div
+        className="bg-mountain-background-image relative z-10 flex min-h-[100vh] w-fit
+      min-w-full flex-col items-center bg-cover bg-top bg-no-repeat md:px-8"
+      >
+        <div className="bg-gray-1 pointer-events-none absolute -z-30 h-full w-full opacity-70" />
+        <div className="z-20 flex w-full max-w-[800px] flex-col items-center gap-4 pb-8 pt-16">
+          <h2 className="text-dark-blue-100 mr-auto italic">Contact Us</h2>
           <ContactDetailPanel items={items} />
+          <div className="mb-4 mt-4 w-full">
+            <iframe
+              src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3090.3296850757993!2d175.5528169760526!3d-39.235387071653925!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6d6b01d610042f1d%3A0x1071f4930186b3c0!2sUniversity%20of%20Auckland%20Snowsports%20Club!5e0!3m2!1sen!2snz!4v1722071878514!5m2!1sen!2snz"
+              width="100%"
+              height="450"
+              loading="lazy"
+            ></iframe>
+          </div>
         </div>
-      </FullPageBackgroundImage>
+      </div>
+
       <Footer />
     </>
   )

client/src/components/composite/SignUpForm/PageConfig/PageConfig.tsx

@@ -19,7 +19,6 @@ import {
   PAYMENT_ROUTE,
   PERSONAL_ROUTE_1,
   PERSONAL_ROUTE_2,
-  SUCCESS_ROUTE,
   RouteNames
 } from "../utils/RouteNames"
 import {
@@ -100,9 +99,7 @@ export const PAGINATED_FORM_PAGES = (
     index: PAGES.AccountSetup,
     title: "Account",
     // goes back to one page earlier in history, otherwise does nothing
-    onBack: () => navigateFn(-1),
-    // after setting up the account, the next button is enabled and shows the success section
-    onNext: () => navigateFn(SUCCESS_ROUTE)
+    onBack: () => navigateFn(-1)
   },
   {
     index: PAGES.Success,

client/src/components/composite/SignUpForm/Sections/AccountSetupSection.tsx

@@ -42,10 +42,6 @@ const AccountSetupSection = () => {
         >
           Set Password
         </Button>
-        <h5 className="mt-3">
-          You may skip this step by clicking "next" if you have already set your
-          password with the link sent to <strong>{currentUser?.email}</strong>
-        </h5>
       </div>
     </div>
   )

client/src/components/generic/AlertsComponent/AlertsComponent.tsx

@@ -7,8 +7,18 @@ import WarningIcon from "@/assets/icons/warning.svg"
 import XIcon from "@/assets/icons/x.svg"
 
 type AlertsInputProp = {
+  /**
+   * What should be displayed to the user inside the alert
+   */
   message: string
+  /**
+   * Controls what the styling of the alert will be
+   */
   variant?: "success" | "notification" | "error"
+  /**
+   * If there should be an embedded button into the alert to allow
+   * for the user to close it
+   */
   isButton?: boolean
 }
 

client/src/components/generic/Checkbox/Checkbox.tsx

@@ -1,4 +1,7 @@
 interface ICheckboxProps {
+  /**
+   * The text that appears for the checkbox
+   */
   label: string
 }
 

client/src/components/generic/ContactDetail/ContactDetail.tsx

@@ -1,6 +1,21 @@
 export interface IContactDetail {
+  /**
+   * The main description of the contact
+   *
+   * @example "Admin"
+   */
   title: string
+  /**
+   * The extended description of the contact
+   *
+   * @example "For all payment issues and queries"
+   */
   description?: string
+  /**
+   * The email that is associated with the contact
+   *
+   * @example "[email protected]"
+   */
   email?: string
 }
 

client/src/components/generic/Dropdown/Dropdown.tsx

@@ -1,7 +1,17 @@
 import React from "react"
 
 type DropdownProps = React.SelectHTMLAttributes<HTMLSelectElement> & {
+  /**
+   * The main text that appears above the dropdown
+   *
+   * @example "Favourite sport"
+   */
   label?: string
+  /**
+   * The subheading of the textbox, i.e if the label was "Favourite sport":
+   *
+   * @example "Only include ones you have played in the last year"
+   */
   description?: string
 }
 

client/src/components/generic/ExcitmentSlider/ExcitementSlider.tsx

@@ -3,7 +3,18 @@
 import React, { useState } from "react"
 
 interface ExcitementSliderProps {
+  /**
+   * The lowest value the slider should go to
+   *
+   * @example -69
+   */
   min: number
+
+  /**
+   * The lowest value the slider should go to
+   *
+   * @example 69
+   */
   max: number
 }
 

client/src/components/generic/MenuList/MenuList.tsx

@@ -1,6 +1,17 @@
 import { ReactNode } from "react"
 
 interface IMenuListProps {
+  /**
+   * Which side the children should start,
+   *
+   * e.g for `left`:
+   *
+   * /-start here--------------/
+   *
+   * e.g for `right`:
+   *
+   * /------------start here--/
+   */
   anchor?: "left" | "right"
   children?: ReactNode
 }

client/src/components/generic/MenuTab/MenuTab.tsx

@@ -3,6 +3,11 @@ import DownArrow from "@/assets/icons/downarrow.svg"
 import MenuList from "../MenuList/MenuList"
 
 interface IMenuTabProps {
+  /**
+   * What should be shown for the text on the tab
+   *
+   * @example "Home"
+   */
   displayText: string
 }
 type props = IMenuTabProps & React.ButtonHTMLAttributes<HTMLButtonElement>