fix: align price formatting

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

@@ -9,6 +9,7 @@ import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import useLang from "@/hooks/useLang"
 import { getNights } from "@/utils/dateFormatting"
+import { formatPrice } from "@/utils/numberFormatting"
 
 import styles from "./priceDetailsTable.module.css"
 
@@ -47,13 +48,9 @@ export function storeSelector(state: DetailsState) {
     bedType: state.bedType,
     booking: state.booking,
     breakfast: state.breakfast,
-    join: state.guest.join,
-    membershipNo: state.guest.membershipNo,
     packages: state.packages,
     roomRate: state.roomRate,
     roomPrice: state.roomPrice,
-    toggleSummaryOpen: state.actions.toggleSummaryOpen,
-    togglePriceDetailsModalOpen: state.actions.togglePriceDetailsModalOpen,
     totalPrice: state.totalPrice,
     vat: state.vat,
   }
@@ -65,20 +62,8 @@ export default function PriceDetailsTable({
   const intl = useIntl()
   const lang = useLang()
 
-  const {
-    bedType,
-    booking,
-    breakfast,
-    join,
-    membershipNo,
-    packages,
-    roomPrice,
-    roomRate,
-    toggleSummaryOpen,
-    togglePriceDetailsModalOpen,
-    totalPrice,
-    vat,
-  } = useEnterDetailsStore(storeSelector)
+  const { bedType, booking, breakfast, roomPrice, totalPrice, vat } =
+    useEnterDetailsStore(storeSelector)
 
   // TODO: Update for Multiroom later
   const { adults, children } = booking.rooms[0]
@@ -98,10 +83,11 @@ export default function PriceDetailsTable({
             <Row
               key={night.format("YYMMDD")}
               label={dt(night).locale(lang).format("ddd, D MMM YYYY")}
-              value={intl.formatNumber(roomPrice.perNight.local.price, {
-                currency: roomPrice.perNight.local.currency,
-                style: "currency",
-              })}
+              value={formatPrice(
+                intl,
+                roomPrice.perNight.local.price,
+                roomPrice.perNight.local.currency
+              )}
             />
           )
         })}
@@ -110,10 +96,7 @@ export default function PriceDetailsTable({
         <TableSection>
           <Row
             label={bedType.description}
-            value={intl.formatNumber(0, {
-              currency: roomPrice.perStay.local.currency,
-              style: "currency",
-            })}
+            value={formatPrice(intl, 0, roomPrice.perStay.local.currency)}
           />
         </TableSection>
       ) : null}
@@ -125,12 +108,10 @@ export default function PriceDetailsTable({
               { id: "booking.adults.breakfasts" },
               { totalAdults: adults, totalBreakfasts: nights.length }
             )}
-            value={intl.formatNumber(
+            value={formatPrice(
+              intl,
               parseInt(breakfast.localPrice.totalPrice),
-              {
-                currency: breakfast.localPrice.currency,
-                style: "currency",
-              }
+              breakfast.localPrice.currency
             )}
           />
           {children?.length ? (
@@ -142,10 +123,7 @@ export default function PriceDetailsTable({
                   totalBreakfasts: nights.length,
                 }
               )}
-              value={intl.formatNumber(0, {
-                currency: breakfast.localPrice.currency,
-                style: "currency",
-              })}
+              value={formatPrice(intl, 0, breakfast.localPrice.currency)}
             />
           ) : null}
         </TableSection>
@@ -154,17 +132,11 @@ export default function PriceDetailsTable({
         <TableSectionHeader title={intl.formatMessage({ id: "Total" })} />
         <Row
           label={intl.formatMessage({ id: "booking.vat.excl" })}
-          value={intl.formatNumber(priceExclVat, {
-            currency: totalPrice.local.currency,
-            style: "currency",
-          })}
+          value={formatPrice(intl, priceExclVat, totalPrice.local.currency)}
         />
         <Row
           label={intl.formatMessage({ id: "booking.vat" }, { vat })}
-          value={intl.formatNumber(vatAmount, {
-            currency: totalPrice.local.currency,
-            style: "currency",
-          })}
+          value={formatPrice(intl, vatAmount, totalPrice.local.currency)}
         />
         <tr className={styles.row}>
           <td>
@@ -174,10 +146,11 @@ export default function PriceDetailsTable({
           </td>
           <td className={styles.price}>
             <Body textTransform="bold">
-              {intl.formatNumber(totalPrice.local.price, {
-                currency: totalPrice.local.currency,
-                style: "currency",
-              })}
+              {formatPrice(
+                intl,
+                totalPrice.local.price,
+                totalPrice.local.currency
+              )}
             </Body>
           </td>
         </tr>