Merged in feat/SW-1879-aa-tracking-bed-breakfastpayment (pull request #1789)

feat: SW-1879 Tracking enter-details sections

* feat: SW-1879 Tracking enter-details sections

* feat: SW-1879 removed onSelect to trigger in onSubmit

* feat: SW-1879 Removed onSelect and triggered inside onSubmit

* feat: SW-1879 Optimized to remove unnecessary useEffect triggers in every re-render

* feat: SW-1879 Updated breakfast package typings

* feat: SW-1879 Reverted RadioCardProps

* feat: SW-1879 Optimised code


Approved-by: Tobias Johansson
Approved-by: Christian Andolf

apps/scandic-web/components/HotelReservation/EnterDetails/BedType/index.tsx

@@ -12,6 +12,7 @@ import {
 
 import RadioCard from "@/components/TempDesignSystem/Form/RadioCard"
 import { useRoomContext } from "@/contexts/Details/Room"
+import { trackBedSelection } from "@/utils/tracking"
 
 import { bedTypeFormSchema } from "./schema"
 
@@ -47,18 +48,17 @@ export default function BedType() {
           roomTypeCode: matchingRoom.value,
         }
         updateBedType(bedType)
+        trackBedSelection(bedType.roomTypeCode)
       }
     },
     [bedTypes, updateBedType]
   )
 
+  const selectedBedType = methods.watch("bedType")
+  const handleSubmit = methods.handleSubmit
   useEffect(() => {
-    if (methods.formState.isSubmitting) {
-      return
-    }
-
-    methods.watch(() => methods.handleSubmit(onSubmit)())
-  }, [methods, onSubmit])
+    handleSubmit(onSubmit)()
+  }, [selectedBedType, handleSubmit, onSubmit])
 
   return (
     <FormProvider {...methods}>

apps/scandic-web/components/HotelReservation/EnterDetails/Breakfast/index.tsx

@@ -14,6 +14,7 @@ import RadioCard from "@/components/TempDesignSystem/Form/RadioCard"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import { useRoomContext } from "@/contexts/Details/Room"
 import { formatPrice } from "@/utils/numberFormatting"
+import { trackBreakfastSelection } from "@/utils/tracking"
 
 import { breakfastFormSchema } from "./schema"
 
@@ -25,6 +26,7 @@ import { BreakfastPackageEnum } from "@/types/enums/breakfast"
 export default function Breakfast() {
   const intl = useIntl()
   const packages = useEnterDetailsStore((state) => state.breakfastPackages)
+  const hotelId = useEnterDetailsStore((state) => state.booking.hotelId)
   const {
     actions: { updateBreakfast },
     room,
@@ -49,22 +51,26 @@ export default function Breakfast() {
 
   const onSubmit = useCallback(
     (values: BreakfastFormSchema) => {
-      const pkg = packages?.find((p) => p.code === values.breakfast)
+      const pkg = packages.find((p) => p.code === values.breakfast)
       if (pkg) {
         updateBreakfast(pkg)
       } else {
         updateBreakfast(false)
       }
+      trackBreakfastSelection({
+        breakfastPackage: pkg ?? packages[0],
+        hotelId,
+        units: pkg ? room.adults : 0,
+      })
     },
-    [packages, updateBreakfast]
+    [packages, hotelId, room.adults, updateBreakfast]
   )
 
+  const selectedBreakfast = methods.watch("breakfast")
+  const handleSubmit = methods.handleSubmit
   useEffect(() => {
-    if (methods.formState.isSubmitting) {
-      return
-    }
-    methods.watch(() => methods.handleSubmit(onSubmit)())
-  }, [methods, onSubmit])
+    handleSubmit(onSubmit)()
+  }, [selectedBreakfast, handleSubmit, onSubmit])
 
   return (
     <FormProvider {...methods}>

apps/scandic-web/components/HotelReservation/EnterDetails/Confirm/index.tsx

@@ -13,6 +13,7 @@ import { PaymentMethodEnum } from "@/constants/booking"
 import Modal from "@/components/Modal"
 import Divider from "@/components/TempDesignSystem/Divider"
 import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
+import { trackPaymentSectionOpen } from "@/utils/tracking/booking"
 
 import MySavedCards from "../Payment/MySavedCards"
 import PaymentOption from "../Payment/PaymentOption"
@@ -40,7 +41,16 @@ export default function ConfirmBooking({
       <div className={styles.guaranteeContainer}>
         <div className={styles.title}>
           <div className={styles.checkbox}>
-            <Checkbox name="guarantee" />
+            <Checkbox
+              name="guarantee"
+              registerOptions={{
+                onChange: (e) => {
+                  if (e.target.value) {
+                    trackPaymentSectionOpen()
+                  }
+                },
+              }}
+            />
             <Typography variant="Body/Paragraph/mdBold">
               <p>
                 {intl.formatMessage({

apps/scandic-web/components/HotelReservation/EnterDetails/Details/Multiroom/index.tsx

@@ -13,7 +13,9 @@ import Input from "@/components/TempDesignSystem/Form/Input"
 import Phone from "@/components/TempDesignSystem/Form/Phone"
 import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 import { useRoomContext } from "@/contexts/Details/Room"
+import { trackPaymentSectionOpen } from "@/utils/tracking/booking"
 
+import { hasPrepaidRate } from "../../Payment/helpers"
 import JoinScandicFriendsCard from "./JoinScandicFriendsCard"
 import { multiroomDetailsSchema } from "./schema"
 
@@ -25,10 +27,13 @@ const formID = "enter-details"
 export default function Details() {
   const intl = useIntl()
 
-  const { canProceedToPayment, lastRoom } = useEnterDetailsStore((state) => ({
-    canProceedToPayment: state.canProceedToPayment,
-    lastRoom: state.lastRoom,
-  }))
+  const { canProceedToPayment, lastRoom, rooms } = useEnterDetailsStore(
+    (state) => ({
+      canProceedToPayment: state.canProceedToPayment,
+      lastRoom: state.lastRoom,
+      rooms: state.rooms,
+    })
+  )
 
   const {
     actions: { updateDetails },
@@ -61,6 +66,8 @@ export default function Details() {
   const guestIsGoingToJoin = methods.watch("join")
   const guestIsMember = methods.watch("membershipNo")
 
+  const hasPrepaidRates = rooms.some(hasPrepaidRate)
+
   return (
     <FormProvider {...methods}>
       <form
@@ -144,6 +151,11 @@ export default function Details() {
             typography="Body/Paragraph/mdBold"
             size="Medium"
             type="submit"
+            onPress={
+              isPaymentNext && canProceedToPayment && hasPrepaidRates
+                ? trackPaymentSectionOpen
+                : undefined
+            }
           >
             {isPaymentNext
               ? intl.formatMessage({

apps/scandic-web/components/HotelReservation/EnterDetails/Details/RoomOne/index.tsx

@@ -14,6 +14,7 @@ import Input from "@/components/TempDesignSystem/Form/Input"
 import Phone from "@/components/TempDesignSystem/Form/Phone"
 import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 import { useRoomContext } from "@/contexts/Details/Room"
+import { trackPaymentSectionOpen } from "@/utils/tracking/booking"
 
 import JoinScandicFriendsCard from "./JoinScandicFriendsCard"
 import MemberPriceModal from "./MemberPriceModal"
@@ -162,6 +163,11 @@ export default function Details({ user }: DetailsProps) {
             typography="Body/Paragraph/mdBold"
             size="Medium"
             type="submit"
+            onPress={
+              isPaymentNext && canProceedToPayment && !room.isFlexRate
+                ? trackPaymentSectionOpen
+                : undefined
+            }
           >
             {isPaymentNext
               ? intl.formatMessage({

apps/scandic-web/components/HotelReservation/EnterDetails/Room/Multiroom.tsx

@@ -26,7 +26,7 @@ export default function Multiroom() {
   }))
 
   const showBreakfastStep =
-    !room.breakfastIncluded && !!breakfastPackages?.length
+    !room.breakfastIncluded && !!breakfastPackages.length
 
   const arePreviousRoomsValid = rooms.slice(0, idx).every((r) => r.isComplete)
 

apps/scandic-web/components/HotelReservation/EnterDetails/Room/One.tsx

@@ -40,7 +40,7 @@ export default function RoomOne({ user }: { user: SafeUser }) {
   )
 
   const showBreakfastStep =
-    !room.breakfastIncluded && !!breakfastPackages?.length
+    !room.breakfastIncluded && !!breakfastPackages.length
 
   return (
     <section>