feat(SW-415): Update Room card UI

components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/PriceTable/index.tsx

@@ -0,0 +1,56 @@
+import { useIntl } from "react-intl"
+
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+
+import { PriceTableProps } from "@/types/components/hotelReservation/selectRate/flexibilityOption"
+
+export default function PriceTable({
+  publicPrice,
+  memberPrice,
+}: PriceTableProps) {
+  const intl = useIntl()
+
+  const { localPrice: publicLocalPrice, requestedPrice: publicRequestedPrice } =
+    publicPrice || {}
+  const { localPrice: memberLocalPrice, requestedPrice: memberRequestedPrice } =
+    memberPrice || {}
+
+  const showRequestedPrice = publicRequestedPrice && memberRequestedPrice
+
+  return (
+    <dl>
+      <div>
+        <dt>{intl.formatMessage({ id: "Standard price" })}</dt>
+        <dd>
+          {publicLocalPrice ? (
+            <>
+              {publicLocalPrice.pricePerNight} {publicLocalPrice.currency}/
+              {intl.formatMessage({ id: "night" })}
+            </>
+          ) : (
+            <Subtitle type="two">{intl.formatMessage({ id: "n/a" })}</Subtitle>
+          )}
+        </dd>
+      </div>
+
+      {memberLocalPrice && (
+        <div>
+          <dt>{intl.formatMessage({ id: "Member price" })}</dt>
+          <dd>
+            {memberLocalPrice.pricePerNight} {memberLocalPrice.currency}/
+            {intl.formatMessage({ id: "night" })}
+          </dd>
+        </div>
+      )}
+      {showRequestedPrice && (
+        <div>
+          <dt>{intl.formatMessage({ id: "Approx." })}</dt>
+          <dd>
+            {publicRequestedPrice.pricePerNight}/
+            {memberRequestedPrice.pricePerNight} {publicRequestedPrice.currency}
+          </dd>
+        </div>
+      )}
+    </dl>
+  )
+}