feat: make steps of enter details flow dynamic depending on data

components/HotelReservation/EnterDetails/Summary/BottomSheet/index.tsx

@@ -3,7 +3,7 @@
 import { PropsWithChildren } from "react"
 import { useIntl } from "react-intl"
 
-import { useEnterDetailsStore } from "@/stores/enter-details"
+import { useDetailsStore } from "@/stores/details"
 
 import Button from "@/components/TempDesignSystem/Button"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
@@ -17,9 +17,9 @@ export function SummaryBottomSheet({ children }: PropsWithChildren) {
   const intl = useIntl()
 
   const { isSummaryOpen, toggleSummaryOpen, totalPrice, isSubmittingDisabled } =
-    useEnterDetailsStore((state) => ({
+    useDetailsStore((state) => ({
       isSummaryOpen: state.isSummaryOpen,
-      toggleSummaryOpen: state.toggleSummaryOpen,
+      toggleSummaryOpen: state.actions.toggleSummaryOpen,
       totalPrice: state.totalPrice,
       isSubmittingDisabled: state.isSubmittingDisabled,
     }))

components/HotelReservation/EnterDetails/Summary/index.tsx

@@ -5,7 +5,7 @@ import { ChevronDown } from "react-feather"
 import { useIntl } from "react-intl"
 
 import { dt } from "@/lib/dt"
-import { EnterDetailsState, useEnterDetailsStore } from "@/stores/enter-details"
+import { useDetailsStore } from "@/stores/details"
 
 import { ArrowRightIcon } from "@/components/Icons"
 import Button from "@/components/TempDesignSystem/Button"
@@ -18,45 +18,39 @@ import useLang from "@/hooks/useLang"
 
 import styles from "./summary.module.css"
 
-import { BedTypeSchema } from "@/types/components/hotelReservation/enterDetails/bedType"
-import { RoomsData } from "@/types/components/hotelReservation/enterDetails/bookingData"
-import { BreakfastPackage } from "@/types/components/hotelReservation/enterDetails/breakfast"
-import { BreakfastPackageEnum } from "@/types/enums/breakfast"
+import type { BedTypeSchema } from "@/types/components/hotelReservation/enterDetails/bedType"
+import type { BreakfastPackage } from "@/types/components/hotelReservation/enterDetails/breakfast"
+import type { SummaryProps } from "@/types/components/hotelReservation/enterDetails/summary"
+import type { DetailsState } from "@/types/stores/details"
 
-function storeSelector(state: EnterDetailsState) {
+function storeSelector(state: DetailsState) {
   return {
-    fromDate: state.roomData.fromDate,
-    toDate: state.roomData.toDate,
-    bedType: state.userData.bedType,
-    breakfast: state.userData.breakfast,
-    toggleSummaryOpen: state.toggleSummaryOpen,
-    setTotalPrice: state.setTotalPrice,
+    fromDate: state.data.booking.fromDate,
+    toDate: state.data.booking.toDate,
+    bedType: state.data.bedType,
+    breakfast: state.data.breakfast,
+    toggleSummaryOpen: state.actions.toggleSummaryOpen,
+    setTotalPrice: state.actions.setTotalPrice,
     totalPrice: state.totalPrice,
   }
 }
 
-export default function Summary({
-  showMemberPrice,
-  room,
-}: {
-  showMemberPrice: boolean
-  room: RoomsData
-}) {
+export default function Summary({ showMemberPrice, room }: SummaryProps) {
   const [chosenBed, setChosenBed] = useState<BedTypeSchema>()
   const [chosenBreakfast, setChosenBreakfast] = useState<
-    BreakfastPackage | BreakfastPackageEnum.NO_BREAKFAST
+    BreakfastPackage | false
   >()
   const intl = useIntl()
   const lang = useLang()
   const {
-    fromDate,
-    toDate,
     bedType,
     breakfast,
+    fromDate,
     setTotalPrice,
-    totalPrice,
+    toDate,
     toggleSummaryOpen,
-  } = useEnterDetailsStore(storeSelector)
+    totalPrice,
+  } = useDetailsStore(storeSelector)
 
   const diff = dt(toDate).diff(fromDate, "days")
 
@@ -88,36 +82,39 @@ export default function Summary({
     setChosenBed(bedType)
     setChosenBreakfast(breakfast)
 
-    if (breakfast && breakfast !== BreakfastPackageEnum.NO_BREAKFAST) {
-      setTotalPrice({
-        local: {
-          price: roomsPriceLocal + parseInt(breakfast.localPrice.totalPrice),
-          currency: room.localPrice.currency,
-        },
-        euro:
-          room.euroPrice && roomsPriceEuro
-            ? {
+    if (breakfast || breakfast === false) {
+      setChosenBreakfast(breakfast)
+      if (breakfast === false) {
+        setTotalPrice({
+          local: {
+            price: roomsPriceLocal,
+            currency: room.localPrice.currency,
+          },
+          euro:
+            room.euroPrice && roomsPriceEuro
+              ? {
+                price: roomsPriceEuro,
+                currency: room.euroPrice.currency,
+              }
+              : undefined,
+        })
+      } else {
+        setTotalPrice({
+          local: {
+            price: roomsPriceLocal + parseInt(breakfast.localPrice.totalPrice),
+            currency: room.localPrice.currency,
+          },
+          euro:
+            room.euroPrice && roomsPriceEuro
+              ? {
                 price:
                   roomsPriceEuro +
                   parseInt(breakfast.requestedPrice.totalPrice),
                 currency: room.euroPrice.currency,
               }
-            : undefined,
-      })
-    } else {
-      setTotalPrice({
-        local: {
-          price: roomsPriceLocal,
-          currency: room.localPrice.currency,
-        },
-        euro:
-          room.euroPrice && roomsPriceEuro
-            ? {
-                price: roomsPriceEuro,
-                currency: room.euroPrice.currency,
-              }
-            : undefined,
-      })
+              : undefined,
+        })
+      }
     }
   }, [
     bedType,
@@ -187,24 +184,24 @@ export default function Summary({
         </div>
         {room.packages
           ? room.packages.map((roomPackage) => (
-              <div className={styles.entry} key={roomPackage.code}>
-                <div>
-                  <Body color="uiTextHighContrast">
-                    {roomPackage.description}
-                  </Body>
-                </div>
-
-                <Caption color="uiTextHighContrast">
-                  {intl.formatMessage(
-                    { id: "{amount} {currency}" },
-                    {
-                      amount: roomPackage.localPrice.price,
-                      currency: roomPackage.localPrice.currency,
-                    }
-                  )}
-                </Caption>
+            <div className={styles.entry} key={roomPackage.code}>
+              <div>
+                <Body color="uiTextHighContrast">
+                  {roomPackage.description}
+                </Body>
               </div>
-            ))
+
+              <Caption color="uiTextHighContrast">
+                {intl.formatMessage(
+                  { id: "{amount} {currency}" },
+                  {
+                    amount: roomPackage.localPrice.price,
+                    currency: roomPackage.localPrice.currency,
+                  }
+                )}
+              </Caption>
+            </div>
+          ))
           : null}
         {chosenBed ? (
           <div className={styles.entry}>
@@ -224,37 +221,36 @@ export default function Summary({
           </div>
         ) : null}
 
-        {chosenBreakfast ? (
-          chosenBreakfast === BreakfastPackageEnum.NO_BREAKFAST ? (
-            <div className={styles.entry}>
-              <Body color="uiTextHighContrast">
-                {intl.formatMessage({ id: "No breakfast" })}
-              </Body>
-              <Caption color="uiTextHighContrast">
-                {intl.formatMessage(
-                  { id: "{amount} {currency}" },
-                  { amount: "0", currency: room.localPrice.currency }
-                )}
-              </Caption>
-            </div>
-          ) : (
-            <div className={styles.entry}>
-              <Body color="uiTextHighContrast">
-                {intl.formatMessage({ id: "Breakfast buffet" })}
-              </Body>
-              <Caption color="uiTextHighContrast">
-                {intl.formatMessage(
-                  { id: "{amount} {currency}" },
-                  {
-                    amount: chosenBreakfast.localPrice.totalPrice,
-                    currency: chosenBreakfast.localPrice.currency,
-                  }
-                )}
-              </Caption>
-            </div>
-          )
-        ) : null}
-      </div>
+        {chosenBreakfast === false ? (
+          <div className={styles.entry}>
+            <Body color="uiTextHighContrast">
+              {intl.formatMessage({ id: "No breakfast" })}
+            </Body>
+            <Caption color="uiTextMediumContrast">
+              {intl.formatMessage(
+                { id: "{amount} {currency}" },
+                { amount: "0", currency: room.localPrice.currency }
+              )}
+            </Caption>
+          </div>
+        ) : chosenBreakfast?.code ? (
+          <div className={styles.entry}>
+            <Body color="uiTextHighContrast">
+              {intl.formatMessage({ id: "Breakfast buffet" })}
+            </Body>
+            <Caption color="uiTextMediumContrast">
+              {intl.formatMessage(
+                { id: "{amount} {currency}" },
+                {
+                  amount: chosenBreakfast.localPrice.totalPrice,
+                  currency: chosenBreakfast.localPrice.currency,
+                }
+              )}
+            </Caption>
+          </div>
+        ) : null
+        }
+      </div >
       <Divider color="primaryLightSubtle" />
       <div className={styles.total}>
         <div className={styles.entry}>
@@ -295,6 +291,6 @@ export default function Summary({
         </div>
         <Divider className={styles.bottomDivider} color="primaryLightSubtle" />
       </div>
-    </section>
+    </section >
   )
 }