feat(SW-1063): add member price modal

components/HotelReservation/EnterDetails/Details/index.tsx

@@ -1,6 +1,6 @@
 "use client"
 import { zodResolver } from "@hookform/resolvers/zod"
-import { useCallback } from "react"
+import { useCallback, useState } from "react"
 import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"
 
@@ -13,6 +13,7 @@ import Phone from "@/components/TempDesignSystem/Form/Phone"
 import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 
 import JoinScandicFriendsCard from "./JoinScandicFriendsCard"
+import MemberPriceModal from "./MemberPriceModal"
 import { guestDetailsSchema, signedInDetailsSchema } from "./schema"
 import Signup from "./Signup"
 import SpecialRequests from "./SpecialRequests"
@@ -27,6 +28,8 @@ import type {
 const formID = "enter-details"
 export default function Details({ user, memberPrice }: DetailsProps) {
   const intl = useIntl()
+  const [isMemberPriceModalOpen, setIsMemberPriceModalOpen] = useState(false)
+
   const initialData = useEnterDetailsStore((state) => state.guest)
   const updateDetails = useEnterDetailsStore(
     (state) => state.actions.updateDetails
@@ -53,9 +56,12 @@ export default function Details({ user, memberPrice }: DetailsProps) {
 
   const onSubmit = useCallback(
     (values: DetailsSchema) => {
+      if ((values.join || values.membershipNo) && memberPrice) {
+        setIsMemberPriceModalOpen(true)
+      }
       updateDetails(values)
     },
-    [updateDetails]
+    [updateDetails, setIsMemberPriceModalOpen, memberPrice]
   )
 
   return (
@@ -130,6 +136,10 @@ export default function Details({ user, memberPrice }: DetailsProps) {
             {intl.formatMessage({ id: "Proceed to payment method" })}
           </Button>
         </footer>
+        <MemberPriceModal
+          isOpen={isMemberPriceModalOpen}
+          setIsOpen={setIsMemberPriceModalOpen}
+        />
       </form>
     </FormProvider>
   )