Merged in fix/SW-113 (pull request #385)

fix(SW-113): add colors to negative and positive point transactions

Approved-by: Michael Zetterberg

components/MyPages/Blocks/Points/EarnAndBurn/Desktop/Row/AwardPoints.tsx

@@ -0,0 +1,26 @@
+import { Lang } from "@/constants/languages"
+
+import { awardPointsVariants } from "./awardPointsVariants"
+
+import type {
+  AwardPointsProps,
+  AwardPointsVariantProps,
+} from "@/types/components/myPages/myPage/earnAndBurn"
+
+export default function AwardPoints({ awardPoints }: AwardPointsProps) {
+  let variant: AwardPointsVariantProps["variant"] = undefined
+  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 <td className={classNames}>{formatter.format(awardPoints)} pts</td>
+}

components/MyPages/Blocks/Points/EarnAndBurn/Desktop/Row/awardPointsVariants.ts

@@ -0,0 +1,12 @@
+import { cva } from "class-variance-authority"
+
+import styles from "./row.module.css"
+
+export const awardPointsVariants = cva(styles.td, {
+  variants: {
+    variant: {
+      addition: styles.addition,
+      negation: styles.negation,
+    },
+  },
+})

components/MyPages/Blocks/Points/EarnAndBurn/Desktop/Row/index.tsx

@@ -2,6 +2,8 @@ import { dt } from "@/lib/dt"
 
 import { getIntl } from "@/i18n"
 
+import AwardPoints from "./AwardPoints"
+
 import styles from "./row.module.css"
 
 import type { RowProps } from "@/types/components/myPages/myPage/earnAndBurn"
@@ -16,20 +18,13 @@ export default async function Row({ transaction, lang }: RowProps) {
   const departure = dt(transaction.checkoutDate)
     .locale(lang)
     .format("DD MMM YYYY")
-  const values = [
-    arrival,
-    description,
-    transaction.confirmationNumber,
-    departure,
-    transaction.awardPoints,
-  ]
   return (
     <tr className={styles.tr}>
-      {values.map((value, idx) => (
-        <td key={`value-${idx}`} className={styles.td}>
-          {value}
-        </td>
-      ))}
+      <td className={styles.td}>{arrival}</td>
+      <td className={styles.td}>{description}</td>
+      <td className={styles.td}>{transaction.confirmationNumber}</td>
+      <td className={styles.td}>{departure}</td>
+      <AwardPoints awardPoints={transaction.awardPoints} />
     </tr>
   )
 }

components/MyPages/Blocks/Points/EarnAndBurn/Desktop/Row/row.module.css

@@ -3,7 +3,31 @@
 }
 
 .td {
-  text-align: left;
-  padding: 16px 32px;
   background-color: #fff;
+  color: var(--UI-Text-High-contrast);
+  padding: var(--Spacing-x2) var(--Spacing-x4);
+  position: relative;
+  text-align: left;
+}
+
+.addition {
+  color: var(--Secondary-Light-On-Surface-Accent);
+}
+
+.addition::before {
+  color: var(--Secondary-Light-On-Surface-Accent);
+  content: "+";
+  left: var(--Spacing-x2);
+  position: absolute;
+}
+
+.negation {
+  color: var(--Base-Text-Accent);
+}
+
+.negation::before {
+  color: var(--Base-Text-Accent);
+  content: "-";
+  left: var(--Spacing-x2);
+  position: absolute;
 }

components/MyPages/Blocks/Points/EarnAndBurn/Mobile/index.tsx

@@ -1,5 +1,6 @@
 import { dt } from "@/lib/dt"
 
+import AwardPoints from "@/components/MyPages/Blocks/Points/EarnAndBurn/Desktop/Row/AwardPoints"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import { getIntl } from "@/i18n"
 
@@ -41,9 +42,7 @@ export default async function MobileTable({ lang, transactions }: TableProps) {
                     {`${transaction.nights} ${formatMessage({ id: transaction.nights === 1 ? "night" : "nights" })}`}
                   </span>
                 </td>
-                <td className={styles.transactionPoints}>
-                  {`${transaction.awardPoints} P`}
-                </td>
+                <AwardPoints awardPoints={transaction.awardPoints} />
               </tr>
             ))
           ) : (

components/MyPages/Blocks/Points/EarnAndBurn/Mobile/mobile.module.css

@@ -29,10 +29,6 @@
   font-weight: 700;
 }
 
-.transactionPoints {
-  font-size: var(--typography-Body-Regular-fontSize);
-}
-
 .placeholder {
   text-align: center;
   padding: var(--Spacing-x4);

types/components/myPages/myPage/earnAndBurn.ts

@@ -1,3 +1,7 @@
+import { awardPointsVariants } from "@/components/MyPages/Blocks/Points/EarnAndBurn/Desktop/Row/awardPointsVariants"
+
+import type { VariantProps } from "class-variance-authority"
+
 import type { Lang } from "@/constants/languages"
 import type { UserQueryRouter } from "../user"
 
@@ -5,8 +9,10 @@ export type TransactionResponse = Awaited<
   ReturnType<UserQueryRouter["transaction"]["friendTransactions"]>
 >
 export type TransactionsNonNullResponseObject = NonNullable<TransactionResponse>
-export type Transactions = NonNullable<TransactionsNonNullResponseObject>["data"]
-export type Transaction = NonNullable<TransactionsNonNullResponseObject>["data"][number]
+export type Transactions =
+  NonNullable<TransactionsNonNullResponseObject>["data"]
+export type Transaction =
+  NonNullable<TransactionsNonNullResponseObject>["data"][number]
 
 export type ClientEarnAndBurnProps = {
   initialData: TransactionsNonNullResponseObject
@@ -26,3 +32,8 @@ export interface RowProps {
   lang: Lang
   transaction: Transaction
 }
+
+export interface AwardPointsProps extends Pick<Transaction, "awardPoints"> {}
+
+export interface AwardPointsVariantProps
+  extends VariantProps<typeof awardPointsVariants> {}