Merged in feat/CJ-17-points-expiration-table (pull request #527)

Feat/CJ-17 points expiration table * feat(CJ-17): Added point expiration table and refactored to use Table component * feat(CJ-17): Use Table component inside Row * fix(CJ-117): Added missing css class and update date formatting * fix(CJ-117): Added copy of membershipLevel route with a protectedProcedure Approved-by: Christel Westerberg
2024-09-05 09:28:25 +00:00
parent 650b38b409
commit 238de4cd3a
20 changed files with 260 additions and 234 deletions
--- a/components/MyPages/Blocks/Points/EarnAndBurn/JourneyTable/ClientTable/Row/index.tsx
+++ b/components/MyPages/Blocks/Points/EarnAndBurn/JourneyTable/ClientTable/Row/index.tsx
@@ -0,0 +1,100 @@
+"use client"
+
+import { usePathname } from "next/navigation"
+import { useIntl } from "react-intl"
+
+import { webviews } from "@/constants/routes/webviews"
+import { dt } from "@/lib/dt"
+
+import AwardPoints from "@/components/MyPages/Blocks/Points/EarnAndBurn/AwardPoints"
+import Link from "@/components/TempDesignSystem/Link"
+import Table from "@/components/TempDesignSystem/Table"
+import Body from "@/components/TempDesignSystem/Text/Body"
+import useLang from "@/hooks/useLang"
+
+import type { RowProps } from "@/types/components/myPages/myPage/earnAndBurn"
+import { RewardTransactionTypes } from "@/types/components/myPages/myPage/enums"
+
+export default function Row({ transaction }: RowProps) {
+  const intl = useIntl()
+  const lang = useLang()
+  const pathName = usePathname()
+  const isWebview = webviews.includes(pathName)
+
+  const nightString = `${transaction.nights} ${transaction.nights === 1 ? intl.formatMessage({ id: "night" }) : intl.formatMessage({ id: "nights" })}`
+
+  let description =
+    transaction.hotelName && transaction.city
+      ? `${transaction.hotelName}, ${transaction.city} ${nightString}`
+      : `${nightString}`
+
+  switch (transaction.type) {
+    case RewardTransactionTypes.stay:
+    case RewardTransactionTypes.stayAdj:
+      if (transaction.hotelId === "ORS") {
+        description = intl.formatMessage({ id: "Former Scandic Hotel" })
+      }
+      if (transaction.confirmationNumber === "BALFWD") {
+        description = intl.formatMessage({
+          id: "Points earned prior to May 1, 2021",
+        })
+      }
+      break
+    case RewardTransactionTypes.ancillary:
+      description = intl.formatMessage({ id: "Extras to your booking" })
+      break
+    case RewardTransactionTypes.enrollment:
+      description = intl.formatMessage({ id: "Sign up bonus" })
+      break
+    case RewardTransactionTypes.mastercard_points:
+      description = intl.formatMessage({ id: "Scandic Friends Mastercard" })
+      break
+    case RewardTransactionTypes.tui_points:
+      description = intl.formatMessage({ id: "TUI Points" })
+
+    case RewardTransactionTypes.pointShop:
+      description = intl.formatMessage({ id: "Scandic Friends Point Shop" })
+      break
+  }
+
+  const arrival = dt(transaction.checkinDate).locale(lang).format("DD MMM YYYY")
+
+  function renderConfirmationNumber() {
+    if (transaction.confirmationNumber === "BALFWD") return null
+
+    if (
+      !isWebview &&
+      transaction.bookingUrl &&
+      (transaction.type === RewardTransactionTypes.stay ||
+        transaction.type === RewardTransactionTypes.rewardNight)
+    ) {
+      return (
+        <Link variant="underscored" href={transaction.bookingUrl}>
+          {transaction.confirmationNumber}
+        </Link>
+      )
+    }
+
+    return transaction.confirmationNumber
+  }
+
+  return (
+    <Table.TR>
+      <Table.TD>
+        <AwardPoints
+          awardPoints={transaction.awardPoints}
+          isCalculated={transaction.pointsCalculated}
+        />
+      </Table.TD>
+      <Table.TD>
+        <Body textTransform="bold">{description}</Body>
+      </Table.TD>
+      <Table.TD>{renderConfirmationNumber()}</Table.TD>
+      <Table.TD>
+        {transaction.checkinDate && transaction.confirmationNumber !== "BALFWD"
+          ? arrival
+          : null}
+      </Table.TD>
+    </Table.TR>
+  )
+}