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

apps/scandic-web/components/Blocks/DynamicContent/Points/ExpiringPoints/AwardPoints/index.tsx

@@ -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>
+  )
+}