Release 26/07/2024

.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

@@ -39,7 +39,7 @@ Project initiated by WDCC in 2023.
 **2023:** This project is focused on developing a new website for the University of Auckand's Snowsports Club (UASC) from their existing website,
 with the purpose of improving bookings for both users and admins.
 
-**2024:** We are focused on creating a functional website the University of Auckand's Snowsports Club (UASC) for their existing website, by the clients proposed mid-year deadline. The functional website will comprise a sign-up process, membership management system and booking process. The follow-up focus after the proposed mid-year deadline is to improve the website through user experience updates, quality of life updates, implementing new features on the website and improving the website user inferface.
+**2024:** We are focused on creating a functional website for the University of Auckand's Snowsports Club (UASC) by the clients proposed mid-year deadline. The functional website will comprise a sign-up process, membership management system and booking process. The follow-up focus after the mid-year deadline is to improve the website through implementing an events page (to replace the Facebook events page process), user experience updates, implementing new features on the website and improving the website user inferface.
 
 ## Get started
 

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/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/Booking/BookingCreation/BookingCreation.test.tsx

@@ -50,8 +50,19 @@ describe("RequirementCheckBoxes", () => {
       "agreed-to-general-policy-checkbox"
     )
 
+    const dietaryRequirementsInput = getByTestId("dietary-requirements-input")
+
     fireEvent.click(nightPolicyCheckbox)
     fireEvent.click(bookingPolicyCheckbox)
+    fireEvent.change(dietaryRequirementsInput, {
+      target: { value: "i" }
+    })
+
+    expect(mockOnValidityChange).toHaveBeenCalledWith(false)
+
+    fireEvent.change(dietaryRequirementsInput, {
+      target: { value: "i3" }
+    })
 
     expect(mockOnValidityChange).toHaveBeenCalledWith(true)
   })
@@ -67,8 +78,14 @@ describe("RequirementCheckBoxes", () => {
       "agreed-to-general-policy-checkbox"
     )
 
+    const dietaryRequirementsInput = getByTestId("dietary-requirements-input")
+
     fireEvent.click(nightPolicyCheckbox)
 
+    fireEvent.change(dietaryRequirementsInput, {
+      target: { value: "ii" }
+    })
+
     expect(mockOnValidityChange).toHaveBeenCalledWith(false)
 
     fireEvent.click(bookingPolicyCheckbox)

client/src/components/composite/Booking/BookingCreation/BookingCreation.tsx

@@ -165,7 +165,9 @@ export const CreateBookingSection = ({
         variant="default"
         onClick={() => {
           if (!isValidForCreation) {
-            alert("Please check all the required acknowledgements")
+            alert(
+              "Please check all the required acknowledgements and enter your dietary requirements"
+            )
             return
           }
           if (
@@ -312,12 +314,7 @@ export const CreateBookingSection = ({
             onValidityChange={(newValid) => {
               setIsValidForCreation(newValid)
             }}
-          />
-
-          <TextInput
-            onChange={(e) => handleAllergyChange?.(e.target.value)}
-            label="Please describe your dietary requirements"
-            placeholder="Enter dietary requirements here"
+            handleAllergyChange={handleAllergyChange}
           />
 
           {hasExistingSession ? (
@@ -338,47 +335,78 @@ interface IRequirementCheckBoxes {
    * @param newValid if the current state of the checkboxes is valid
    */
   onValidityChange: (newValid: boolean) => void
+
+  /**
+   * @param newAllergies
+   */
+  handleAllergyChange?: (newAllergies: string) => void
 }
 
+/**
+ * To allow users to enter "no"
+ */
+const DIETARY_REQUIREMENTS_MIN_LENGTH = 2 as const
+
 /**
  * Provides a way to see if the user has agreed to all required policy
  * @deprecated only for internal use in `BookingCreation`, exported for testing purposes
  */
 export const RequirementCheckBoxes = ({
-  onValidityChange
+  onValidityChange,
+  handleAllergyChange
 }: IRequirementCheckBoxes) => {
   const [acceptedRequirements, setAcceptedRequirements] = useState<{
     nightPolicy?: boolean
     bookingPolicy?: boolean
+    dietaryRequirements?: boolean
   }>({})
   useEffect(() => {
     onValidityChange(
-      !!acceptedRequirements.nightPolicy && !!acceptedRequirements.bookingPolicy
+      !!acceptedRequirements.nightPolicy &&
+        !!acceptedRequirements.bookingPolicy &&
+        !!acceptedRequirements.dietaryRequirements
     )
   }, [acceptedRequirements, onValidityChange])
 
   return (
-    <span className="mb-3 flex w-full flex-col gap-1">
-      <Checkbox
-        data-testid="agreed-to-night-policy-checkbox"
-        onChange={(e) => {
-          setAcceptedRequirements({
-            ...acceptedRequirements,
-            nightPolicy: e.target.checked
-          })
-        }}
-        label="I understand that each date corresponds to one night's stay"
-      />
-      <Checkbox
-        data-testid="agreed-to-general-policy-checkbox"
-        label="I have read and acknowledged the booking policy"
+    <>
+      <span className="mb-3 flex w-full flex-col gap-1">
+        <Checkbox
+          data-testid="agreed-to-night-policy-checkbox"
+          onChange={(e) => {
+            setAcceptedRequirements({
+              ...acceptedRequirements,
+              nightPolicy: e.target.checked
+            })
+          }}
+          label="I understand that each date corresponds to one night's stay"
+        />
+        <Checkbox
+          data-testid="agreed-to-general-policy-checkbox"
+          label="I have read and acknowledged the booking policy"
+          onChange={(e) => {
+            setAcceptedRequirements({
+              ...acceptedRequirements,
+              bookingPolicy: e.target.checked
+            })
+          }}
+        />
+      </span>
+
+      <TextInput
         onChange={(e) => {
+          handleAllergyChange?.(e.target.value)
+
           setAcceptedRequirements({
             ...acceptedRequirements,
-            bookingPolicy: e.target.checked
+            dietaryRequirements:
+              e.target.value.length >= DIETARY_REQUIREMENTS_MIN_LENGTH
           })
         }}
+        data-testid="dietary-requirements-input"
+        label="Please describe your dietary requirements"
+        placeholder="Enter dietary requirements here"
       />
-    </span>
+    </>
   )
 }

client/src/components/generic/ExecImage/ExecImage.story.tsx

@@ -0,0 +1,23 @@
+import React from "react"
+import type { Meta, StoryObj } from "@storybook/react"
+import ExecImage, { ExecImageProps } from "./ExecImage"
+
+const meta: Meta<typeof ExecImage> = {
+  component: ExecImage,
+  title: "Components/generic/ExecImage"
+}
+
+type Story = StoryObj<typeof meta>
+
+export default meta
+
+export const DefaultExecImage: Story = (args: ExecImageProps) => (
+  <ExecImage {...args} />
+)
+
+DefaultExecImage.args = {
+  src: "https://static01.nyt.com/images/2022/12/30/multimedia/30soccer-ronaldo-1-76fd/30soccer-ronaldo-1-76fd-mediumSquareAt3X.jpg",
+  alt: "Placeholder Image",
+  title: "Admin suii",
+  name: "Ronaldo"
+}

client/src/components/generic/ExecImage/ExecImage.tsx

@@ -0,0 +1,32 @@
+import React from "react"
+import Image from "next/image"
+
+export interface ExecImageProps {
+  src: string
+  alt: string
+  title: string
+  name: string
+}
+
+const ExecImage: React.FC<ExecImageProps> = ({ src, alt, title, name }) => {
+  return (
+    <div className="group relative flex h-[163px] w-[163px] flex-shrink-0 overflow-hidden rounded-[4px]">
+      <Image
+        src={src}
+        alt={alt}
+        width={163}
+        height={163}
+        className="h-full w-full object-cover transition-opacity duration-300"
+      />
+      <div className="bg-dark-blue-100 absolute left-0 top-0 h-full w-full opacity-0 transition-opacity duration-300 group-hover:opacity-80"></div>
+      <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform text-center opacity-0 transition-opacity duration-300 group-hover:opacity-100">
+        <p className="text-[12px] font-bold uppercase tracking-wider text-white">
+          {title}
+        </p>
+        <p className="text-[16px] font-normal text-white">{name}</p>
+      </div>
+    </div>
+  )
+}
+
+export default ExecImage