feat: add mobile design to accordions

components/HotelReservation/EnterDetails/Summary/BottomSheet/bottomSheet.module.css

@@ -19,7 +19,7 @@
   transition: 0.5s ease-in-out;
 }
 
-.priceDetails {
+.priceDetailsButton {
   display: block;
   border: none;
   background: none;
@@ -28,6 +28,7 @@
   transition:
     opacity 0.5s ease-in-out,
     padding 0.5s ease-in-out;
+  cursor: pointer;
 }
 
 .wrapper[data-open="true"] {
@@ -38,12 +39,12 @@
   grid-template-columns: 0fr 1fr;
 }
 
-.wrapper[data-open="true"] .priceDetails {
+.wrapper[data-open="true"] .priceDetailsButton {
   opacity: 0;
   padding: 0;
 }
 
 .content,
-.priceDetails {
+.priceDetailsButton {
   overflow: hidden;
 }

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

@@ -8,7 +8,6 @@ import { useEnterDetailsStore } from "@/stores/enter-details"
 import Button from "@/components/TempDesignSystem/Button"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
-import { formatNumber } from "@/utils/format"
 
 import styles from "./bottomSheet.module.css"
 
@@ -30,14 +29,14 @@ export function SummaryBottomSheet({ children }: PropsWithChildren) {
         <button
           data-open={isSummaryOpen}
           onClick={toggleSummaryOpen}
-          className={styles.priceDetails}
+          className={styles.priceDetailsButton}
         >
           <Caption>{intl.formatMessage({ id: "Total price" })}:</Caption>
           <Subtitle>
             {intl.formatMessage(
               { id: "{amount} {currency}" },
               {
-                amount: formatNumber(totalPrice.local.price),
+                amount: intl.formatNumber(totalPrice.local.price),
                 currency: totalPrice.local.currency,
               }
             )}