fix: trigger memberPrice modal for membership number too

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

@@ -1,5 +1,7 @@
 "use client"
 
+import { useEffect, useState } from "react"
+import { useFormContext, useWatch } from "react-hook-form"
 import { useIntl } from "react-intl"
 
 import MagicWandIcon from "@scandic-hotels/design-system/Icons/MagicWandIcon"
@@ -14,20 +16,35 @@ import { formatPrice } from "@/utils/numberFormatting"
 
 import styles from "./modal.module.css"
 
-import type { Dispatch, SetStateAction } from "react"
-
 import { CurrencyEnum } from "@/types/enums/currency"
 
-export default function MemberPriceModal({
-  isOpen,
-  setIsOpen,
-}: {
-  isOpen: boolean
-  setIsOpen: Dispatch<SetStateAction<boolean>>
-}) {
-  const { room } = useRoomContext()
+export default function MemberPriceModal() {
+  const {
+    actions: { updatePriceForMembershipNo },
+    room,
+  } = useRoomContext()
   const memberRate = "member" in room.roomRate ? room.roomRate.member : null
   const intl = useIntl()
+  const [isOpen, setIsOpen] = useState(false)
+  const { getFieldState, trigger } = useFormContext()
+
+  const [join, membershipNo] = useWatch({ name: ["join", "membershipNo"] })
+
+  useEffect(() => {
+    if (join) {
+      setIsOpen(true)
+    }
+  }, [join])
+
+  useEffect(() => {
+    trigger("membershipNo").then((isValid) => {
+      const { isDirty } = getFieldState("membershipNo")
+      updatePriceForMembershipNo(membershipNo, isValid)
+      if (isValid && isDirty) {
+        setIsOpen(true)
+      }
+    })
+  }, [getFieldState, membershipNo, trigger, updatePriceForMembershipNo])
 
   if (!memberRate) {
     return null
@@ -36,7 +53,7 @@ export default function MemberPriceModal({
   const memberPrice = memberRate?.localPrice ?? memberRate?.requestedPrice
 
   return (
-    <Modal isOpen={isOpen} onToggle={setIsOpen}>
+    <Modal isOpen={isOpen} onToggle={() => setIsOpen(false)}>
       <div className={styles.modalContent}>
         <div className={styles.innerModalContent}>
           <MagicWandIcon width="265px" />

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

@@ -1,6 +1,5 @@
 "use client"
 
-import { useState } from "react"
 import { useIntl } from "react-intl"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
@@ -10,8 +9,6 @@ import Caption from "@/components/TempDesignSystem/Text/Caption"
 import { useRoomContext } from "@/contexts/Details/Room"
 import { formatPrice } from "@/utils/numberFormatting"
 
-import MemberPriceModal from "../../MemberPriceModal"
-
 import styles from "./joinScandicFriendsCard.module.css"
 
 import type { JoinScandicFriendsCardProps } from "@/types/components/hotelReservation/enterDetails/details"
@@ -26,13 +23,9 @@ export default function JoinScandicFriendsCard({
     roomNr,
     actions: { updateJoin },
   } = useRoomContext()
-  const [isMemberPriceModalOpen, setIsMemberPriceModalOpen] = useState(false)
 
   function onChange(event: { target: { value: boolean } }) {
     updateJoin(event.target.value)
-    if (event.target.value) {
-      setIsMemberPriceModalOpen(true)
-    }
   }
 
   if (!("member" in room.roomRate) || !room.roomRate.member) {
@@ -106,10 +99,6 @@ export default function JoinScandicFriendsCard({
           </Caption>
         ))}
       </div>
-      <MemberPriceModal
-        isOpen={isMemberPriceModalOpen}
-        setIsOpen={setIsMemberPriceModalOpen}
-      />
     </div>
   )
 }

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

@@ -13,6 +13,7 @@ import Phone from "@/components/TempDesignSystem/Form/Phone"
 import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 import { useRoomContext } from "@/contexts/Details/Room"
 
+import MemberPriceModal from "../MemberPriceModal"
 import JoinScandicFriendsCard from "./JoinScandicFriendsCard"
 import { getMultiroomDetailsSchema } from "./schema"
 
@@ -52,11 +53,7 @@ export default function Details() {
   )
 
   const methods = useForm({
-    criteriaMode: "all",
-    mode: "all",
-    resolver: zodResolver(getMultiroomDetailsSchema(crossValidationData)),
-    reValidateMode: "onChange",
-    values: {
+    defaultValues: {
       countryCode: initialData.countryCode,
       email: initialData.email,
       firstName: initialData.firstName,
@@ -68,6 +65,10 @@ export default function Details() {
         comment: room.specialRequest.comment,
       },
     },
+    criteriaMode: "all",
+    mode: "all",
+    resolver: zodResolver(getMultiroomDetailsSchema(crossValidationData)),
+    reValidateMode: "onChange",
   })
 
   const {
@@ -189,6 +190,7 @@ export default function Details() {
           )}
           <SpecialRequests registerOptions={{ onBlur: updateDetailsStore }} />
         </div>
+        <MemberPriceModal />
       </form>
     </FormProvider>
   )

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

@@ -1,6 +1,4 @@
 "use client"
-
-import { useState } from "react"
 import { useIntl } from "react-intl"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
@@ -16,8 +14,6 @@ import { useRoomContext } from "@/contexts/Details/Room"
 import useLang from "@/hooks/useLang"
 import { formatPrice } from "@/utils/numberFormatting"
 
-import MemberPriceModal from "../../MemberPriceModal"
-
 import styles from "./joinScandicFriendsCard.module.css"
 
 import type { JoinScandicFriendsCardProps } from "@/types/components/hotelReservation/enterDetails/details"
@@ -32,13 +28,9 @@ export default function JoinScandicFriendsCard({
     room,
     actions: { updateJoin },
   } = useRoomContext()
-  const [isMemberPriceModalOpen, setIsMemberPriceModalOpen] = useState(false)
 
   function onChange(event: { target: { value: boolean } }) {
     updateJoin(event.target.value)
-    if (event.target.value) {
-      setIsMemberPriceModalOpen(true)
-    }
   }
 
   if (!("member" in room.roomRate) || !room.roomRate.member) {
@@ -156,10 +148,6 @@ export default function JoinScandicFriendsCard({
           )}
         </Footnote>
       </div>
-      <MemberPriceModal
-        isOpen={isMemberPriceModalOpen}
-        setIsOpen={setIsMemberPriceModalOpen}
-      />
     </div>
   )
 }

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

@@ -13,6 +13,7 @@ import Phone from "@/components/TempDesignSystem/Form/Phone"
 import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 import { useRoomContext } from "@/contexts/Details/Room"
 
+import MemberPriceModal from "../MemberPriceModal"
 import JoinScandicFriendsCard from "./JoinScandicFriendsCard"
 import { guestDetailsSchema, signedInDetailsSchema } from "./schema"
 import Signup from "./Signup"
@@ -43,25 +44,25 @@ export default function Details({ user }: DetailsProps) {
   const memberRate = "member" in room.roomRate ? room.roomRate.member : null
 
   const methods = useForm({
-    criteriaMode: "all",
-    mode: "all",
-    resolver: zodResolver(user ? signedInDetailsSchema : guestDetailsSchema),
-    reValidateMode: "onChange",
-    values: {
-      countryCode: user?.address?.countryCode ?? initialData.countryCode,
+    defaultValues: {
+      countryCode: user?.address?.countryCode || initialData.countryCode,
       dateOfBirth:
         "dateOfBirth" in initialData ? initialData.dateOfBirth : undefined,
-      email: user?.email ?? initialData.email,
-      firstName: user?.firstName ?? initialData.firstName,
+      email: user?.email || initialData.email,
+      firstName: user?.firstName || initialData.firstName,
       join: initialData.join,
-      lastName: user?.lastName ?? initialData.lastName,
+      lastName: user?.lastName || initialData.lastName,
       membershipNo: initialData.membershipNo,
-      phoneNumber: user?.phoneNumber ?? initialData.phoneNumber,
+      phoneNumber: user?.phoneNumber || initialData.phoneNumber,
       zipCode: "zipCode" in initialData ? initialData.zipCode : undefined,
       specialRequest: {
         comment: room.specialRequest.comment,
       },
     },
+    criteriaMode: "all",
+    mode: "all",
+    resolver: zodResolver(user ? signedInDetailsSchema : guestDetailsSchema),
+    reValidateMode: "onChange",
   })
 
   const {
@@ -168,6 +169,7 @@ export default function Details({ user }: DetailsProps) {
           )}
           <SpecialRequests registerOptions={{ onBlur: updateDetailsStore }} />
         </div>
+        <MemberPriceModal />
       </form>
     </FormProvider>
   )