Merged in feat/LOY-391-my-points-transactions-table-design (pull request #3415)

Feat/LOY-391 my points transactions table design * feat(LOY-391): Added new design to point transaction table * fix(LOY-391): rebase fix * fix(LOY-391): fix * fix(LOY-391): fix * fix(LOY-391): fixed sticky header etc. * feat(LOY-391): added focus on the newest loaded item in the list * fix(LOY-391): cleaned up * fix(LOY-391): style fix * fix(LOY-391): fixed PR-comments, types, removed the old files for earn and burn table * fix(LOY-391): fixed PR-comments * feat(LOY-391): added useCallback so scrolling is avoided when clicking see all on expiring points Approved-by: Anton Gunnarsson Approved-by: Matilda Landström
2026-01-20 08:41:09 +00:00
parent 8b56fa84e7
commit 5af64ef896
23 changed files with 473 additions and 347 deletions
@@ -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(--Space-x05);
+}
+
+.negation {
+  color: var(--Base-Text-Accent);
+}
+
+.negation::before {
+  color: var(--Base-Text-Accent);
+  content: "-";
+  margin-right: var(--Space-x05);
+}
@@ -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,
+    },
+  },
+})
@@ -0,0 +1,45 @@
+import { useIntl } from "react-intl"
+
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+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,
+  })
+
+  return (
+    <Typography variant="Body/Paragraph/mdBold" className={classNames}>
+      <span>
+        {isCalculated
+          ? intl.formatNumber(awardPoints)
+          : intl.formatMessage({
+              id: "earnAndBurn.awardPoints.pointsBeingCalculated",
+              defaultMessage: "Points being calculated",
+            })}
+      </span>
+    </Typography>
+  )
+}
@@ -8,7 +8,7 @@ import { Typography } from "@scandic-hotels/design-system/Typography"

 import useLang from "@/hooks/useLang"

-import AwardPoints from "../../EarnAndBurn/AwardPoints"
+import AwardPoints from "../AwardPoints"

 export default function ExpiringPointsTable({
  points,