Merged in fix/sw-1897-member-price-modal (pull request #1856)

fix(sw-1897): show member price modal immediately

* fix(sw-1897): show member price modal immediately

* Make checkbox fully controlled

* Remove action in the store that wasn't used


Approved-by: Hrishikesh Vaipurkar

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

@@ -1,5 +1,6 @@
 "use client"
 
+import { useState } from "react"
 import { useIntl } from "react-intl"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
@@ -15,6 +16,8 @@ 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"
@@ -25,7 +28,18 @@ export default function JoinScandicFriendsCard({
 }: JoinScandicFriendsCardProps) {
   const lang = useLang()
   const intl = useIntl()
-  const { room } = useRoomContext()
+  const {
+    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) {
     return null
@@ -64,7 +78,11 @@ export default function JoinScandicFriendsCard({
 
   return (
     <div className={styles.cardContainer}>
-      <Checkbox name={name} className={styles.checkBox}>
+      <Checkbox
+        name={name}
+        className={styles.checkBox}
+        registerOptions={{ onChange }}
+      >
         <div>
           <Caption type="label" textTransform="uppercase" color="red">
             {saveOnJoiningLabel}
@@ -138,6 +156,10 @@ export default function JoinScandicFriendsCard({
           )}
         </Footnote>
       </div>
+      <MemberPriceModal
+        isOpen={isMemberPriceModalOpen}
+        setIsOpen={setIsMemberPriceModalOpen}
+      />
     </div>
   )
 }