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/AwardPoints/awardPoints.module.css
+++ b/components/MyPages/Blocks/Points/EarnAndBurn/AwardPoints/awardPoints.module.css
@@ -0,0 +1,23 @@
+.awardPoints {
+  color: var(--Base-Text-High-contrast);
+}
+
+.addition {
+  color: var(--Secondary-Light-On-Surface-Accent);
+}
+
+.addition::before {
+  color: var(--Secondary-Light-On-Surface-Accent);
+  content: "+";
+  margin-right: var(--Spacing-x-half);
+}
+
+.negation {
+  color: var(--Base-Text-Accent);
+}
+
+.negation::before {
+  color: var(--Base-Text-Accent);
+  content: "-";
+  margin-right: var(--Spacing-x-half);
+}
--- a/components/MyPages/Blocks/Points/EarnAndBurn/AwardPoints/awardPointsVariants.ts
+++ b/components/MyPages/Blocks/Points/EarnAndBurn/AwardPoints/awardPointsVariants.ts
@@ -0,0 +1,12 @@
+import { cva } from "class-variance-authority"
+
+import styles from "./awardPoints.module.css"
+
+export const awardPointsVariants = cva(styles.awardPoints, {
+  variants: {
+    variant: {
+      addition: styles.addition,
+      negation: styles.negation,
+    },
+  },
+})
--- a/components/MyPages/Blocks/Points/EarnAndBurn/AwardPoints/index.tsx
+++ b/components/MyPages/Blocks/Points/EarnAndBurn/AwardPoints/index.tsx
@@ -0,0 +1,44 @@
+import { useIntl } from "react-intl"
+
+import { Lang } from "@/constants/languages"
+
+import Body from "@/components/TempDesignSystem/Text/Body"
+
+import { awardPointsVariants } from "./awardPointsVariants"
+
+import type { AwardPointsVariantProps } from "@/types/components/myPages/myPage/earnAndBurn"
+
+export default function AwardPoints({
+  awardPoints,
+  isCalculated,
+  isExpiringPoints = false,
+}: {
+  awardPoints: number
+  isCalculated: boolean
+  isExpiringPoints?: boolean
+}) {
+  let variant: AwardPointsVariantProps["variant"] = null
+  const intl = useIntl()
+
+  if (isCalculated && !isExpiringPoints) {
+    if (awardPoints > 0) {
+      variant = "addition"
+    } else if (awardPoints < 0) {
+      variant = "negation"
+      awardPoints = Math.abs(awardPoints)
+    }
+  }
+  const classNames = awardPointsVariants({
+    variant,
+  })
+
+  // sv hardcoded to force space on thousands
+  const formatter = new Intl.NumberFormat(Lang.sv)
+  return (
+    <Body textTransform="bold" className={classNames}>
+      {isCalculated
+        ? formatter.format(awardPoints)
+        : intl.formatMessage({ id: "Points being calculated" })}
+    </Body>
+  )
+}