Merged in feat/sw-3472-booking-flow-parameterization (pull request #2811)

feat(SW-3272): Add BookingFlowConfig

* Add BookingFlowConfig

* Rename "provider" to BookingFlowConfig

* Change bookingCode to boolean

* Fix error


Approved-by: Joakim Jäderberg
Approved-by: Linus Flood

packages/booking-flow/lib/bookingFlowConfig/bookingFlowConfig.tsx

@@ -0,0 +1,47 @@
+import "server-only"
+
+import { cache } from "react"
+
+import { BookingFlowConfigContextProvider } from "./bookingFlowConfigContext"
+
+export type BookingFlowConfig = {
+  bookingCodeEnabled: boolean
+}
+
+const getRef = cache(() => ({
+  current: undefined as BookingFlowConfig | undefined,
+}))
+
+function setBookingFlowConfig(newConfig: BookingFlowConfig) {
+  getRef().current = newConfig
+}
+
+export function getBookingFlowConfig(): BookingFlowConfig {
+  const contextConfig = getRef().current
+
+  if (!contextConfig) {
+    throw new Error("BookingFlowConfig not set")
+  }
+
+  return contextConfig
+}
+
+/*
+ * Sets up both a server side context and a client side context
+ * for the booking flow config.
+ */
+export async function BookingFlowConfig({
+  children,
+  config,
+}: {
+  children: React.ReactNode
+  config: BookingFlowConfig
+}) {
+  setBookingFlowConfig(config)
+
+  return (
+    <BookingFlowConfigContextProvider config={config}>
+      {children}
+    </BookingFlowConfigContextProvider>
+  )
+}

packages/booking-flow/lib/bookingFlowConfig/bookingFlowConfigContext.tsx

@@ -0,0 +1,39 @@
+"use client"
+
+import { createContext, useContext } from "react"
+
+import type { BookingFlowConfig } from "./bookingFlowConfig"
+
+type BookingFlowConfigContextData = {
+  config: BookingFlowConfig
+}
+
+const BookingFlowConfigContext = createContext<
+  BookingFlowConfigContextData | undefined
+>(undefined)
+
+export const useBookingFlowConfig = (): BookingFlowConfigContextData => {
+  const context = useContext(BookingFlowConfigContext)
+
+  if (!context) {
+    throw new Error(
+      "useBookingFlowConfig must be used within a BookingFlowConfigContextProvider. Did you forget to use BookingFlowConfig in the consuming app?"
+    )
+  }
+
+  return context
+}
+
+export function BookingFlowConfigContextProvider({
+  children,
+  config,
+}: {
+  children: React.ReactNode
+  config: BookingFlowConfig
+}) {
+  return (
+    <BookingFlowConfigContext.Provider value={{ config }}>
+      {children}
+    </BookingFlowConfigContext.Provider>
+  )
+}

packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Voucher/index.tsx

@@ -5,15 +5,18 @@ import { useIntl } from "react-intl"
 import Caption from "@scandic-hotels/design-system/Caption"
 import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
 
+import { useBookingFlowConfig } from "../../../../../bookingFlowConfig/bookingFlowConfigContext"
 import BookingCode from "../BookingCode"
 import RewardNight from "../RewardNight"
 
 import styles from "./voucher.module.css"
 
 export default function Voucher() {
+  const { config } = useBookingFlowConfig()
+
   return (
     <div className={styles.optionsContainer}>
-      <BookingCode />
+      {config.bookingCodeEnabled && <BookingCode />}
       <div className={styles.options}>
         <div className={styles.option}>
           <RewardNight />
@@ -25,6 +28,7 @@ export default function Voucher() {
 
 export function VoucherSkeleton() {
   const intl = useIntl()
+  const { config } = useBookingFlowConfig()
 
   const vouchers = intl.formatMessage({
     defaultMessage: "Code / Voucher",
@@ -35,14 +39,16 @@ export function VoucherSkeleton() {
 
   return (
     <div className={styles.optionsContainer}>
-      <div className={styles.voucherSkeletonContainer}>
-        <label>
-          <Caption type="bold" color="red" asChild>
-            <span>{vouchers}</span>
-          </Caption>
-        </label>
-        <SkeletonShimmer width="100%" display="block" />
-      </div>
+      {config.bookingCodeEnabled && (
+        <div className={styles.voucherSkeletonContainer}>
+          <label>
+            <Caption type="bold" color="red" asChild>
+              <span>{vouchers}</span>
+            </Caption>
+          </label>
+          <SkeletonShimmer width="100%" display="block" />
+        </div>
+      )}
 
       <div className={styles.options}>
         <div className={cx(styles.option, styles.showOnTablet)}>