631 frontend connect the policy to sanity

client/sanity/schema.ts

@@ -5,13 +5,15 @@ import { LodgeInfoSchema } from "@/models/sanity/LodgeInfo/Schema"
 import { type SchemaTypeDefinition } from "sanity"
 import { CommitteeMemberSchema } from "@/models/sanity/CommitteeMembers/Schema"
 import { LifeMemberSchema } from "@/models/sanity/LifeMembers/Schema"
+import { PoliciesSchema } from "@/models/sanity/Policies/Schema"
 
 export const schema: { types: SchemaTypeDefinition[] } = {
   types: [
     AboutItemSchema,
     HomePageSchema,
     ContactDetailSchema,
     LodgeInfoSchema,
+    PoliciesSchema,
     CommitteeMemberSchema,
     LifeMemberSchema
   ]

client/src/app/bookings/BookingPolicyStorage.tsx

@@ -0,0 +1,16 @@
+"use client"
+
+import { BookingContext } from "@/components/composite/Booking/BookingContext"
+import { useContext, useEffect } from "react"
+import { Policies } from "@/models/sanity/Policies/Utils"
+
+const BookingPolicyStorage = ({ policies }: { policies: Policies[] }) => {
+  const { setPolicies } = useContext(BookingContext)
+  useEffect(() => {
+    setPolicies?.(policies)
+  }, [policies, setPolicies])
+
+  return null
+}
+
+export default BookingPolicyStorage

client/src/app/bookings/layout.tsx

@@ -11,17 +11,30 @@ import { Footer } from "@/components/generic/Footer/Footer"
 import { QueryClientProvider } from "@tanstack/react-query"
 import queryClient from "@/services/QueryClient"
 
-type IBookingLayout = Readonly<{ children: ReactNode }>
+type IBookingLayout = Readonly<{
+  children: ReactNode
+  policyInfoProps: Omit<React.ReactNode, "handbookBookLodgeClick"> & {
+    children?: React.ReactNode
+  }
+}>
 
 const InnerBookingLayout = ({ children }: IBookingLayout) => {
-  const { getExistingSession } = useContext(BookingContext)
+  const { getExistingSession, policies } = useContext(BookingContext)
 
   const getExistingSessionCallback = useCallback(() => {
     getExistingSession?.()
   }, [getExistingSession])
 
   useUserLoggedInCallback(getExistingSessionCallback)
 
+  const PoliciesContent = policies
+    ? policies.slice(0, 3).map((policy) => ({
+        order: policy.order || 0, // Ensure order is a number
+        title: policy.title || "Untitled", // Ensure title is a string
+        information: policy.information || [] // Make sure information is an array of PortableTextBlocks
+      }))
+    : []
+
   return (
     <>
       <div
@@ -36,18 +49,23 @@ const InnerBookingLayout = ({ children }: IBookingLayout) => {
         </div>
       </div>
       <span className="relative z-[11]">
-        <PolicyTabs />
+        <PolicyTabs policiesArray={PoliciesContent} />
       </span>
       <Footer />
     </>
   )
 }
 
-export default function BookingLayout({ children }: IBookingLayout) {
+export default function BookingLayout({
+  children,
+  policyInfoProps
+}: IBookingLayout) {
   return (
     <QueryClientProvider client={queryClient}>
       <BookingContextProvider>
-        <InnerBookingLayout>{children}</InnerBookingLayout>
+        <InnerBookingLayout policyInfoProps={policyInfoProps}>
+          {children}
+        </InnerBookingLayout>
       </BookingContextProvider>
     </QueryClientProvider>
   )

client/src/app/bookings/page.tsx

@@ -5,6 +5,8 @@ import {
   LodgeInformation
 } from "@/models/sanity/LodgeInfo/Utils"
 import { PortableText } from "@portabletext/react"
+import { Policies, POLICIES_GROQ_QUERY } from "@/models/sanity/Policies/Utils"
+import BookingPolicyStorage from "./BookingPolicyStorage"
 
 const BookingPage = async () => {
   const lodgeInfo = await sanityQuery<LodgeInformation[]>(
@@ -34,6 +36,12 @@ const BookingPage = async () => {
         : ""
     ) || []
 
+  const fetchedPolicies = await sanityQuery<Policies[]>(POLICIES_GROQ_QUERY)
+
+  /** We assume there will be only one based on the way {@link Policies } is set up in sanity */
+  // If list isn't empty, assign all policies to the variable
+  const policies = fetchedPolicies.length > 0 ? fetchedPolicies : []
+
   return (
     <>
       <BookingInformationAndCreation
@@ -43,6 +51,7 @@ const BookingPage = async () => {
           imageSrcs: processedImages
         }}
       />
+      <BookingPolicyStorage policies={policies} />
     </>
   )
 }

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

@@ -5,6 +5,7 @@ import { BOOKING_AVAILABLITY_KEY } from "@/services/Booking/BookingQueries"
 import { useBookingPaymentClientSecretMutation } from "@/services/Payment/PaymentMutations"
 import queryClient from "@/services/QueryClient"
 import { useEditSelfMutation } from "@/services/User/UserMutations"
+import { Policies } from "@/models/sanity/Policies/Utils"
 import { useRouter } from "next/navigation"
 
 interface IBookingContext {
@@ -43,6 +44,16 @@ interface IBookingContext {
    * Parsed message describing problems arising from a network call
    */
   errorMessage?: string
+
+  /**
+   * Booking Policy Items fetched from Sanity
+   */
+  policies?: Policies[]
+
+  /**
+   * Setter function for the booking policies
+   */
+  setPolicies?: (newPolicies: Policies[]) => void
 }
 
 /**
@@ -63,6 +74,8 @@ export const BookingContextProvider = ({
     error
   } = useBookingPaymentClientSecretMutation()
 
+  const [policies, setPolicies] = useState<Policies[]>([])
+
   const [allergies, setAllergies] = useState<string>("")
 
   const { mutateAsync: updateAllergies } = useEditSelfMutation()
@@ -108,6 +121,8 @@ export const BookingContextProvider = ({
         isPending,
         setAllergies,
         forceRefreshBookings,
+        policies,
+        setPolicies,
         errorMessage:
           error?.name === "UnavailableBookingError" ? error?.message : undefined
       }}

client/src/components/composite/BookingsPolicyTabs/TabsContent.story.tsx

@@ -1,9 +1,5 @@
 import type { Meta } from "@storybook/react"
-import {
-  BehaviourPolicyContent,
-  BookingPolicyContent,
-  PolicyTabs
-} from "./TabsContent"
+import { PolicyTabs } from "./TabsContent"
 
 const meta: Meta = {
   component: PolicyTabs
@@ -13,15 +9,3 @@ export default meta
 export const DefaultPolicyTabs = () => {
   return <PolicyTabs />
 }
-
-export const BookingPolicyStory = () => {
-  return <BookingPolicyContent />
-}
-
-export const CancellationPolicyStory = () => {
-  return <CancellationPolicyStory />
-}
-
-export const BehaviourPolicyStory = () => {
-  return <BehaviourPolicyContent />
-}