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" />