631 frontend connect the policy to sanity (#773)

* Added schemas and util files for each of the policies sub folders

* Fixed codestyle issue

* Implemented policies using sanity schema and utilised this on the tab content, which is displayed on the bookings page

* Formatted file properly

* Removed async from file as its not supported

* ran yarn to pass precode checks

* Removed unwanted changes

* Fetched the policies blocks, stored the values and called this in layout to be displayed above the footer

* Added title and order to policies schema and util so that it can be sorted by either the title or order

* Fixed the bug now the headings match with the content, nothing is out of bounds

* Fixed TabContent.story and ran yarn-dev-server

* removed line in packag.json server

* deleted package-lock.json file

* restore yarn.lock to master version

* Adjusted layout.tsx to remove type error

* Fixed issue in TabsComponent.story.tsx and reset default export on layoout.tsx

* Fixed duplicate imports issue

* fix errors

---------

Co-authored-by: bcho892 <[email protected]>

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,22 @@
+"use client"
+
+import {
+  BookingContext,
+  PolicyWithTextBlocks
+} from "@/components/composite/Booking/BookingContext"
+import { useContext, useEffect } from "react"
+
+const BookingPolicyStorage = ({
+  policies
+}: {
+  policies: PolicyWithTextBlocks[]
+}) => {
+  const { setPolicies } = useContext(BookingContext)
+  useEffect(() => {
+    setPolicies?.(policies)
+  }, [policies, setPolicies])
+
+  return null
+}
+
+export default BookingPolicyStorage

client/src/app/bookings/layout.tsx

@@ -11,17 +11,28 @@ 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: 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,7 +47,7 @@ const InnerBookingLayout = ({ children }: IBookingLayout) => {
         </div>
       </div>
       <span className="relative z-[11]">
-        <PolicyTabs />
+        <PolicyTabs policiesArray={PoliciesContent} />
       </span>
       <Footer />
     </>

client/src/app/bookings/page.tsx

@@ -5,6 +5,9 @@ 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"
+import { PolicyWithTextBlocks } from "@/components/composite/Booking/BookingContext"
 
 const BookingPage = async () => {
   const lodgeInfo = await sanityQuery<LodgeInformation[]>(
@@ -34,6 +37,20 @@ 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: PolicyWithTextBlocks[] = fetchedPolicies.map((policy) => {
+    return {
+      ...policy,
+      information: policy.information ? (
+        <PortableText value={policy.information} />
+      ) : (
+        <></>
+      )
+    }
+  })
+
   return (
     <>
       <BookingInformationAndCreation
@@ -43,6 +60,7 @@ const BookingPage = async () => {
           imageSrcs: processedImages
         }}
       />
+      <BookingPolicyStorage policies={policies} />
     </>
   )
 }

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

@@ -5,8 +5,13 @@ 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"
 
+export type PolicyWithTextBlocks = Omit<Policies, "information"> & {
+  information: JSX.Element
+}
+
 interface IBookingContext {
   /**
    * @param startDate **UTC Midnight** date to request the session for
@@ -43,6 +48,16 @@ interface IBookingContext {
    * Parsed message describing problems arising from a network call
    */
   errorMessage?: string
+
+  /**
+   * Booking Policy Items fetched from Sanity
+   */
+  policies?: PolicyWithTextBlocks[]
+
+  /**
+   * Setter function for the booking policies
+   */
+  setPolicies?: (newPolicies: PolicyWithTextBlocks[]) => void
 }
 
 /**
@@ -63,6 +78,8 @@ export const BookingContextProvider = ({
     error
   } = useBookingPaymentClientSecretMutation()
 
+  const [policies, setPolicies] = useState<PolicyWithTextBlocks[]>([])
+
   const [allergies, setAllergies] = useState<string>("")
 
   const { mutateAsync: updateAllergies } = useEditSelfMutation()
@@ -108,6 +125,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,27 +1,87 @@
 import type { Meta } from "@storybook/react"
-import {
-  BehaviourPolicyContent,
-  BookingPolicyContent,
-  PolicyTabs
-} from "./TabsContent"
+import { PolicyTabs } from "./TabsContent"
+import { PortableText } from "next-sanity"
 
 const meta: Meta = {
   component: PolicyTabs
 }
 
+const PoliciesContent = [
+  {
+    order: 0,
+    title: "LODGE BOOKINGS",
+    information: (
+      <PortableText
+        value={[
+          {
+            _key: "1",
+            _type: "block",
+            children: [
+              {
+                _key: "2",
+                _type: "span",
+                marks: [],
+                text: "This is the lodge bookings policy"
+              }
+            ],
+            markDefs: [],
+            style: "normal"
+          }
+        ]}
+      />
+    )
+  },
+  {
+    order: 1,
+    title: "CANCELLATION",
+    information: (
+      <PortableText
+        value={[
+          {
+            _key: "3",
+            _type: "block",
+            children: [
+              {
+                _key: "4",
+                _type: "span",
+                marks: [],
+                text: "This is the cancellation policy"
+              }
+            ],
+            markDefs: [],
+            style: "normal"
+          }
+        ]}
+      />
+    )
+  },
+  {
+    order: 2,
+    title: "BEHAVIOUR",
+    information: (
+      <PortableText
+        value={[
+          {
+            _key: "5",
+            _type: "block",
+            children: [
+              {
+                _key: "6",
+                _type: "span",
+                marks: [],
+                text: "This is the behaviour policy"
+              }
+            ],
+            markDefs: [],
+            style: "normal"
+          }
+        ]}
+      />
+    )
+  }
+]
+
 export default meta
 export const DefaultPolicyTabs = () => {
-  return <PolicyTabs />
-}
-
-export const BookingPolicyStory = () => {
-  return <BookingPolicyContent />
-}
-
-export const CancellationPolicyStory = () => {
-  return <CancellationPolicyStory />
-}
-
-export const BehaviourPolicyStory = () => {
-  return <BehaviourPolicyContent />
+  return <PolicyTabs policiesArray={PoliciesContent} />
 }