Merged in feat/LOY-501-table-sorting (pull request #3321)

feat(LOY-501): add sorting to Reward Night Table

* feat(LOY-501): add sorting using Tanstack Table


Approved-by: Chuma Mcphoy (We Ahead)

apps/scandic-web/components/Blocks/DynamicContent/RewardNights/OfferPrice.tsx

@@ -0,0 +1,39 @@
+"use client"
+import { useIntl } from "react-intl"
+
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import { formatDate, type HotelData } from "./util"
+
+import styles from "./rewardNights.module.css"
+
+export function OfferPrice(offer: HotelData["rewardNight"]["campaign"]) {
+  const intl = useIntl()
+
+  return (
+    <div className={styles.offerPrice}>
+      <Typography variant="Body/Paragraph/mdBold">
+        <p className={styles.highlightedText}>
+          {intl.formatMessage({
+            id: "rewardNights.offerPrice",
+            defaultMessage: "Offer price",
+          })}
+        </p>
+      </Typography>
+      <Typography variant="Label/xsBold">
+        <p>
+          {intl.formatMessage({
+            id: "rewardNights.stayBetween:",
+            defaultMessage: "Stay between:",
+          })}
+        </p>
+      </Typography>
+      <Typography variant="Label/xsRegular">
+        <time>
+          {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+          {formatDate(offer.start)} - {formatDate(offer.end)}
+        </time>
+      </Typography>
+    </div>
+  )
+}