feat: add mobile summary

components/HotelReservation/EnterDetails/Summary/index.tsx

@@ -6,7 +6,7 @@ import { useIntl } from "react-intl"
 import { dt } from "@/lib/dt"
 import { useEnterDetailsStore } from "@/stores/enter-details"
 
-import { ArrowRightIcon } from "@/components/Icons"
+import { ArrowRightIcon, CloseIcon } from "@/components/Icons"
 import Divider from "@/components/TempDesignSystem/Divider"
 import Link from "@/components/TempDesignSystem/Link"
 import Body from "@/components/TempDesignSystem/Text/Body"
@@ -36,20 +36,25 @@ export default function Summary({
   const [chosenBreakfast, setChosenBreakfast] = useState<
     BreakfastPackage | BreakfastPackageEnum.NO_BREAKFAST
   >()
-  const [totalPrice, setTotalPrice] = useState({
-    local: parsePrice(room.localPrice.price),
-    euro: parsePrice(room.euroPrice.price),
-  })
   const intl = useIntl()
   const lang = useLang()
-  const { fromDate, toDate, bedType, breakfast } = useEnterDetailsStore(
-    (state) => ({
-      fromDate: state.roomData.fromDate,
-      toDate: state.roomData.toDate,
-      bedType: state.userData.bedType,
-      breakfast: state.userData.breakfast,
-    })
-  )
+  const {
+    fromDate,
+    toDate,
+    bedType,
+    breakfast,
+    setTotalPrice,
+    totalPrice,
+    toggleSummaryOpen,
+  } = useEnterDetailsStore((state) => ({
+    fromDate: state.roomData.fromDate,
+    toDate: state.roomData.toDate,
+    bedType: state.userData.bedType,
+    breakfast: state.userData.breakfast,
+    toggleSummaryOpen: state.toggleSummaryOpen,
+    setTotalPrice: state.setTotalPrice,
+    totalPrice: state.totalPrice,
+  }))
 
   const diff = dt(toDate).diff(fromDate, "days")
 
@@ -70,21 +75,48 @@ export default function Summary({
       setChosenBreakfast(breakfast)
       if (breakfast === BreakfastPackageEnum.NO_BREAKFAST) {
         setTotalPrice({
-          local: parsePrice(room.localPrice.price),
-          euro: parsePrice(room.euroPrice.price),
+          local: {
+            price: parsePrice(room.localPrice.price),
+            currency: room.localPrice.currency!,
+          },
+          euro: {
+            price: parsePrice(room.euroPrice.price),
+            currency: room.euroPrice.currency!,
+          },
         })
       } else {
         setTotalPrice({
-          local:
-            parsePrice(room.localPrice.price) +
-            parsePrice(breakfast.localPrice.totalPrice),
-          euro:
-            parsePrice(room.euroPrice.price) +
-            parsePrice(breakfast.requestedPrice.totalPrice),
+          local: {
+            price:
+              parsePrice(room.localPrice.price) +
+              parsePrice(breakfast.localPrice.totalPrice),
+            currency: room.localPrice.currency!,
+          },
+          euro: {
+            price:
+              parsePrice(room.euroPrice.price) +
+              parsePrice(breakfast.requestedPrice.totalPrice),
+            currency: room.euroPrice.currency!,
+          },
         })
       }
     }
-  }, [bedType, breakfast, room.localPrice, room.euroPrice])
+  }, [bedType, breakfast, room.localPrice, room.euroPrice, setTotalPrice])
+
+  useEffect(() => {
+    setTotalPrice({
+      local: {
+        price: parsePrice(room.localPrice.price),
+        currency: room.localPrice.currency!,
+      },
+      euro: {
+        price: parsePrice(room.euroPrice.price),
+        currency: room.euroPrice.currency!,
+      },
+    })
+  }, [room.localPrice, room.euroPrice, setTotalPrice])
+
+  const showToggleButton = true
 
   return (
     <section className={styles.summary}>
@@ -95,6 +127,7 @@ export default function Summary({
           <ArrowRightIcon color="peach80" height={15} width={15} />
           {dt(toDate).locale(lang).format("ddd, D MMM")} ({nights})
         </Body>
+        {showToggleButton ? <CloseIcon onClick={toggleSummaryOpen} /> : null}
       </header>
       <Divider color="primaryLightSubtle" />
       <div className={styles.addOns}>
@@ -203,8 +236,8 @@ export default function Summary({
               {intl.formatMessage(
                 { id: "{amount} {currency}" },
                 {
-                  amount: intl.formatNumber(totalPrice.local),
-                  currency: room.localPrice.currency,
+                  amount: intl.formatNumber(totalPrice.local.price),
+                  currency: totalPrice.local.currency,
                 }
               )}
             </Body>
@@ -213,14 +246,14 @@ export default function Summary({
               {intl.formatMessage(
                 { id: "{amount} {currency}" },
                 {
-                  amount: intl.formatNumber(totalPrice.euro),
-                  currency: room.euroPrice.currency,
+                  amount: intl.formatNumber(totalPrice.euro.price),
+                  currency: totalPrice.euro.currency,
                 }
               )}
             </Caption>
           </div>
         </div>
-        <Divider color="primaryLightSubtle" />
+        <Divider className={styles.bottomDivider} color="primaryLightSubtle" />
       </div>
     </section>
   )