Merged in feat/SW-165-correct-labels (pull request #427)
Feat/SW-165 correct labels * feat(SW-165): sort friend transactions and return additional properties * feat(SW-165): Added points being calculated label * feat(SW-165): added transactionDate for transactions without checkinDate * feat(SW-165): Updated description copy for various reward types * feat(SW-165): filter out expired transactions * feat(SW-165): removed Mobile table and unified them into Table instead * feat(SW-165): Added bookingUrl to friend transactions * fix(SW-165): style fixes * fix(SW-165): fix issues from merge * fix(SW-165): remove comment * fix(SW-165): fixed booking urls not being set and smaller fixes * fix(SW-165): added comment regarding 'BALFWD' Approved-by: Michael Zetterberg Approved-by: Christel Westerberg
This commit is contained in:
Tobias Johansson
@@ -0,0 +1,40 @@
|
||||
import { useIntl } from "react-intl"
|
||||
|
||||
import { Lang } from "@/constants/languages"
|
||||
|
||||
import { awardPointsVariants } from "./awardPointsVariants"
|
||||
|
||||
import type { AwardPointsVariantProps } from "@/types/components/myPages/myPage/earnAndBurn"
|
||||
|
||||
export default function AwardPoints({
|
||||
awardPoints,
|
||||
isCalculated,
|
||||
}: {
|
||||
awardPoints: number
|
||||
isCalculated: boolean
|
||||
}) {
|
||||
let variant: AwardPointsVariantProps["variant"] = undefined
|
||||
const intl = useIntl()
|
||||
|
||||
if (isCalculated) {
|
||||
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}>
|
||||
{isCalculated
|
||||
? formatter.format(awardPoints)
|
||||
: intl.formatMessage({ id: "Points being calculated" })}
|
||||
</td>
|
||||
)
|
||||
}
|
||||
@@ -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,
|
||||
},
|
||||
},
|
||||
})
|
||||
@@ -0,0 +1,82 @@
|
||||
"use client"
|
||||
|
||||
import { useIntl } from "react-intl"
|
||||
|
||||
import { dt } from "@/lib/dt"
|
||||
|
||||
import Link from "@/components/TempDesignSystem/Link"
|
||||
import useLang from "@/hooks/useLang"
|
||||
|
||||
import AwardPoints from "./AwardPoints"
|
||||
|
||||
import styles from "./row.module.css"
|
||||
|
||||
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 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:
|
||||
if (transaction.hotelId === "ORS")
|
||||
description = intl.formatMessage({ id: "Former Scandic Hotel" })
|
||||
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.stayAdj:
|
||||
if (transaction.confirmationNumber === "BALFWD")
|
||||
description = intl.formatMessage({
|
||||
id: "Points earned prior to May 1, 2021",
|
||||
})
|
||||
break
|
||||
case RewardTransactionTypes.pointShop:
|
||||
description = intl.formatMessage({ id: "Scandic Friends Point Shop" })
|
||||
break
|
||||
}
|
||||
|
||||
const arrival = dt(transaction.checkinDate).locale(lang).format("DD MMM YYYY")
|
||||
const transactionDate = dt(transaction.transactionDate)
|
||||
.locale(lang)
|
||||
.format("DD MMM YYYY")
|
||||
|
||||
return (
|
||||
<tr className={styles.tr}>
|
||||
<AwardPoints
|
||||
awardPoints={transaction.awardPoints}
|
||||
isCalculated={transaction.pointsCalculated}
|
||||
/>
|
||||
<td className={`${styles.td} ${styles.description}`}>{description}</td>
|
||||
<td className={styles.td}>
|
||||
{transaction.type === RewardTransactionTypes.stay &&
|
||||
transaction.bookingUrl ? (
|
||||
<Link variant="underscored" href={transaction.bookingUrl}>
|
||||
{transaction.confirmationNumber}
|
||||
</Link>
|
||||
) : (
|
||||
transaction.confirmationNumber
|
||||
)}
|
||||
</td>
|
||||
<td className={styles.td}>
|
||||
{transaction.checkinDate ? arrival : transactionDate}
|
||||
</td>
|
||||
</tr>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
.tr {
|
||||
border-bottom: 1px solid var(--Scandic-Brand-Pale-Peach);
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.td {
|
||||
background-color: #fff;
|
||||
color: var(--UI-Text-High-contrast);
|
||||
padding: var(--Spacing-x2);
|
||||
position: relative;
|
||||
text-align: left;
|
||||
text-wrap: nowrap;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-weight: var(--typography-Body-Bold-fontWeight);
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.td {
|
||||
padding: var(--Spacing-x3);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,68 @@
|
||||
"use client"
|
||||
|
||||
import { useIntl } from "react-intl"
|
||||
|
||||
import Body from "@/components/TempDesignSystem/Text/Body"
|
||||
|
||||
import Row from "./Row"
|
||||
|
||||
import styles from "./table.module.css"
|
||||
|
||||
import type { TableProps } from "@/types/components/myPages/myPage/earnAndBurn"
|
||||
|
||||
const tableHeadings = [
|
||||
"Points",
|
||||
"Description",
|
||||
"Booking number",
|
||||
"Arrival date",
|
||||
]
|
||||
|
||||
export default function Table({ transactions }: TableProps) {
|
||||
const intl = useIntl()
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
{transactions.length ? (
|
||||
<table className={styles.table}>
|
||||
<thead className={styles.thead}>
|
||||
<tr>
|
||||
{tableHeadings.map((heading) => (
|
||||
<th key={heading} className={styles.th}>
|
||||
<Body textTransform="bold">
|
||||
{intl.formatMessage({ id: heading })}
|
||||
</Body>
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{transactions.map((transaction, index) => (
|
||||
<Row
|
||||
key={`${transaction.confirmationNumber}-${index}`}
|
||||
transaction={transaction}
|
||||
/>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
) : (
|
||||
<table className={styles.table}>
|
||||
<thead className={styles.thead}>
|
||||
<tr>
|
||||
{tableHeadings.map((heading) => (
|
||||
<th key={heading} className={styles.th}>
|
||||
{heading}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td colSpan={tableHeadings.length} className={styles.placeholder}>
|
||||
{intl.formatMessage({ id: "No transactions available" })}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-x: auto;
|
||||
border-radius: var(--Corner-radius-Small);
|
||||
}
|
||||
|
||||
.table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.thead {
|
||||
background-color: var(--Scandic-Brand-Pale-Peach);
|
||||
border-left: 1px solid var(--Scandic-Brand-Pale-Peach);
|
||||
border-right: 1px solid var(--Scandic-Brand-Pale-Peach);
|
||||
color: var(--Main-Brand-Burgundy);
|
||||
}
|
||||
|
||||
.th {
|
||||
text-align: left;
|
||||
text-wrap: nowrap;
|
||||
padding: var(--Spacing-x2);
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
width: 100%;
|
||||
padding: 24px;
|
||||
text-align: center;
|
||||
border: 1px solid var(--Scandic-Brand-Pale-Peach);
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.footer {
|
||||
background-color: var(--Scandic-Brand-Pale-Peach);
|
||||
border-left: 1px solid var(--Scandic-Brand-Pale-Peach);
|
||||
border-right: 1px solid var(--Scandic-Brand-Pale-Peach);
|
||||
display: flex;
|
||||
padding: 20px 32px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.loadMoreButton {
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
color: var(--Main-Brand-Burgundy);
|
||||
font-size: var(--typography-Caption-Bold-Desktop-fontSize);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--Spacing-x-half);
|
||||
cursor: pointer;
|
||||
}
|
||||
@media screen and (min-width: 768px) {
|
||||
.container {
|
||||
border-radius: var(--Corner-radius-Large);
|
||||
}
|
||||
|
||||
.th {
|
||||
padding: var(--Spacing-x2) var(--Spacing-x3);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user