scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(SW-164): Add pagination for friendship transactions

Browse Source
This commit is contained in:
Arvid Norlin
2024-08-13 11:33:06 +02:00
parent 2282e35a71
commit 6f293be3a7
13 changed files with 202 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
components/MyPages/Blocks/Points/EarnAndBurn/Desktop/index.tsx
View File

@@ -1,76 +0,0 @@
import Body from "@/components/TempDesignSystem/Text/Body"
import { getIntl } from "@/i18n"
import Row from "./Row"
import styles from "./desktop.module.css"
import type { TableProps } from "@/types/components/myPages/myPage/earnAndBurn"
const tableHeadings = [
"Arrival date",
"Description",
"Booking number",
"Transaction date",
"Points",
]
export default async function DesktopTable({ transactions }: TableProps) {
const { formatMessage } = await getIntl()
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">
{formatMessage({ id: heading })}
</Body>
</th>
))}
</tr>
</thead>
<tbody>
{transactions.map((transaction) => (
<Row
key={transaction.confirmationNumber}
transaction={transaction}
/>
))}
</tbody>
</table>
) : (
// TODO: add once pagination is available through API
// <Button
// disabled={isFetching}
// intent="primary"
// bgcolor="white"
// type="button"
// onClick={loadMoreData}
// >
// {formatMessage({id:"See more transactions"})}
// </Button>
<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}>
{formatMessage({ id: "No transactions available" })}
</td>
</tr>
</tbody>
</table>
)}
</div>
)
}

0
components/MyPages/Blocks/Points/EarnAndBurn/Desktop/Row/AwardPoints.tsx → components/MyPages/Blocks/Points/EarnAndBurn/TransactionTable/Desktop/Row/AwardPoints.tsx
View File

0
components/MyPages/Blocks/Points/EarnAndBurn/Desktop/Row/awardPointsVariants.ts → components/MyPages/Blocks/Points/EarnAndBurn/TransactionTable/Desktop/Row/awardPointsVariants.ts
View File

9
components/MyPages/Blocks/Points/EarnAndBurn/Desktop/Row/index.tsx → components/MyPages/Blocks/Points/EarnAndBurn/TransactionTable/Desktop/Row/index.tsx
View File

@@ -1,6 +1,9 @@
"use client"
import { useIntl } from "react-intl"
import { dt } from "@/lib/dt" import { dt } from "@/lib/dt"
import { getIntl } from "@/i18n"
import { getLang } from "@/i18n/serverContext" import { getLang } from "@/i18n/serverContext"
import AwardPoints from "./AwardPoints" import AwardPoints from "./AwardPoints"
@@ -9,8 +12,8 @@ import styles from "./row.module.css"
import type { RowProps } from "@/types/components/myPages/myPage/earnAndBurn" import type { RowProps } from "@/types/components/myPages/myPage/earnAndBurn"
export default async function Row({ transaction }: RowProps) { export default function Row({ transaction }: RowProps) {
const { formatMessage } = await getIntl() const { formatMessage } = useIntl()
const description = const description =
transaction.hotelName && transaction.city transaction.hotelName && transaction.city
? `${transaction.hotelName}, ${transaction.city} ${transaction.nights} ${formatMessage({ id: "nights" })}` ? `${transaction.hotelName}, ${transaction.city} ${transaction.nights} ${formatMessage({ id: "nights" })}`

0
components/MyPages/Blocks/Points/EarnAndBurn/Desktop/Row/row.module.css → components/MyPages/Blocks/Points/EarnAndBurn/TransactionTable/Desktop/Row/row.module.css
View File

19
components/MyPages/Blocks/Points/EarnAndBurn/Desktop/desktop.module.css → components/MyPages/Blocks/Points/EarnAndBurn/TransactionTable/Desktop/desktop.module.css
View File

@@ -28,6 +28,25 @@
background-color: #fff; 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) { @media screen and (min-width: 768px) {
.container { .container {
display: flex; display: flex;

91
components/MyPages/Blocks/Points/EarnAndBurn/TransactionTable/Desktop/index.tsx Normal file
View File

@@ -0,0 +1,91 @@
"use client"
import { useIntl } from "react-intl"
import { ChevronDownIcon } from "@/components/Icons"
import Body from "@/components/TempDesignSystem/Text/Body"
import Row from "./Row"
import styles from "./desktop.module.css"
import type { TablePropsPagination } from "@/types/components/myPages/myPage/earnAndBurn"
const tableHeadings = [
"Arrival date",
"Description",
"Booking number",
"Transaction date",
"Points",
]
export default function DesktopTable({
transactions,
showMore,
hasMore,
}: TablePropsPagination) {
const { formatMessage } = useIntl()
return (
<div className={styles.container}>
{transactions.length ? (
<div>
<table className={styles.table}>
<thead className={styles.thead}>
<tr>
{tableHeadings.map((heading) => (
<th key={heading} className={styles.th}>
<Body textTransform="bold">
{formatMessage({ id: heading })}
</Body>
</th>
))}
</tr>
</thead>
<tbody>
{transactions.map((transaction, idx) => (
<Row
key={`${transaction.confirmationNumber}-${idx}`}
transaction={transaction}
/>
))}
</tbody>
</table>
{hasMore ? (
<div className={styles.footer}>
<button
className={styles.loadMoreButton}
onClick={() => {
showMore()
}}
>
<ChevronDownIcon color="burgundy" height={24} width={24} />
{formatMessage({ id: "Show more" })}
</button>
</div>
) : null}
</div>
) : (
<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}>
{formatMessage({ id: "No transactions available" })}
</td>
</tr>
</tbody>
</table>
)}
</div>
)
}

38
components/MyPages/Blocks/Points/EarnAndBurn/Mobile/index.tsx → components/MyPages/Blocks/Points/EarnAndBurn/TransactionTable/Mobile/index.tsx
View File

@@ -1,16 +1,25 @@
"use client"
import { useIntl } from "react-intl"
import { dt } from "@/lib/dt" import { dt } from "@/lib/dt"
import AwardPoints from "@/components/MyPages/Blocks/Points/EarnAndBurn/Desktop/Row/AwardPoints" import { ChevronDownIcon } from "@/components/Icons"
import AwardPoints from "@/components/MyPages/Blocks/Points/EarnAndBurn/TransactionTable/Desktop/Row/AwardPoints"
import Body from "@/components/TempDesignSystem/Text/Body" import Body from "@/components/TempDesignSystem/Text/Body"
import { getIntl } from "@/i18n"
import { getLang } from "@/i18n/serverContext" import { getLang } from "@/i18n/serverContext"
import styles from "./mobile.module.css" import styles from "./mobile.module.css"
import type { TableProps } from "@/types/components/myPages/myPage/earnAndBurn" import type { TablePropsPagination } from "@/types/components/myPages/myPage/earnAndBurn"
export default function MobileTable({
transactions,
showMore,
hasMore,
}: TablePropsPagination) {
const { formatMessage } = useIntl()
export default async function MobileTable({ transactions }: TableProps) {
const { formatMessage } = await getIntl()
return ( return (
<div className={styles.container}> <div className={styles.container}>
<table className={styles.table}> <table className={styles.table}>
@@ -28,8 +37,11 @@ export default async function MobileTable({ transactions }: TableProps) {
</thead> </thead>
<tbody> <tbody>
{transactions.length ? ( {transactions.length ? (
transactions.map((transaction) => ( transactions.map((transaction, idx) => (
<tr className={styles.tr} key={transaction.confirmationNumber}> <tr
className={styles.tr}
key={`${transaction.confirmationNumber}-${idx}`}
>
<td className={`${styles.td} ${styles.transactionDetails}`}> <td className={`${styles.td} ${styles.transactionDetails}`}>
<span className={styles.transactionDate}> <span className={styles.transactionDate}>
{dt(transaction.checkinDate) {dt(transaction.checkinDate)
@@ -55,6 +67,18 @@ export default async function MobileTable({ transactions }: TableProps) {
)} )}
</tbody> </tbody>
</table> </table>
{hasMore ? (
<button
className={styles.loadMoreButton}
onClick={() => {
showMore()
}}
>
<ChevronDownIcon height={24} width={24} />
{formatMessage({ id: "Show more" })}
</button>
) : null}
</div> </div>
) )
} }

10
components/MyPages/Blocks/Points/EarnAndBurn/Mobile/mobile.module.css → components/MyPages/Blocks/Points/EarnAndBurn/TransactionTable/Mobile/mobile.module.css
View File

@@ -34,6 +34,16 @@
padding: var(--Spacing-x4); padding: var(--Spacing-x4);
border: 1px solid var(--Main-Grey-10); border: 1px solid var(--Main-Grey-10);
} }
.loadMoreButton {
background-color: var(--Main-Grey-10);
border: none;
display: flex;
align-items: center;
justify-content: center;
gap: var(--Spacing-x-half);
padding: var(--Spacing-x2);
width: 100%;
}
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
.container { .container {

34
components/MyPages/Blocks/Points/EarnAndBurn/TransactionTable/index.tsx Normal file
View File

@@ -0,0 +1,34 @@
"use client"
import { useState } from "react"
import DesktopTable from "./Desktop"
import MobileTable from "./Mobile"
import { TableProps } from "@/types/components/myPages/myPage/earnAndBurn"
export function TransactionTable({ transactions }: TableProps) {
const [transactionDisplayCount, setTransactionDisplayCount] = useState(5)
const showMoreTransactions = () => {
setTransactionDisplayCount((count) => count + 5)
}
const displayedTransactions = transactions.slice(0, transactionDisplayCount)
const hasMoreTransactions = transactions.length > transactionDisplayCount
return (
<>
<MobileTable
transactions={displayedTransactions}
showMore={showMoreTransactions}
hasMore={hasMoreTransactions}
/>
<DesktopTable
transactions={displayedTransactions}
showMore={showMoreTransactions}
hasMore={hasMoreTransactions}
/>
</>
)
}

8
components/MyPages/Blocks/Points/EarnAndBurn/index.tsx
View File

@@ -4,8 +4,7 @@ import SectionContainer from "@/components/Section/Container"
import SectionHeader from "@/components/Section/Header" import SectionHeader from "@/components/Section/Header"
import SectionLink from "@/components/Section/Link" import SectionLink from "@/components/Section/Link"
import DesktopTable from "./Desktop" import { TransactionTable } from "./TransactionTable"
import MobileTable from "./Mobile"
import type { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage" import type { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"
@@ -22,8 +21,9 @@ export default async function EarnAndBurn({
return ( return (
<SectionContainer> <SectionContainer>
<SectionHeader title={title} link={link} subtitle={subtitle} /> <SectionHeader title={title} link={link} subtitle={subtitle} />
<MobileTable transactions={transactions.data} />
<DesktopTable transactions={transactions.data} /> <TransactionTable transactions={transactions.data} />
<SectionLink link={link} variant="mobile" /> <SectionLink link={link} variant="mobile" />
</SectionContainer> </SectionContainer>
) )

1
server/routers/user/query.ts
View File

@@ -455,6 +455,7 @@ export const userQueryRouter = router({
transaction: router({ transaction: router({
friendTransactions: protectedProcedure.query(async (opts) => { friendTransactions: protectedProcedure.query(async (opts) => {
const apiResponse = await api.get(api.endpoints.v1.friendTransactions, { const apiResponse = await api.get(api.endpoints.v1.friendTransactions, {
cache: "no-store",
headers: { headers: {
Authorization: `Bearer ${opts.ctx.session.token.access_token}`, Authorization: `Bearer ${opts.ctx.session.token.access_token}`,
}, },

7
types/components/myPages/myPage/earnAndBurn.ts
View File

@@ -1,4 +1,4 @@
import { awardPointsVariants } from "@/components/MyPages/Blocks/Points/EarnAndBurn/Desktop/Row/awardPointsVariants" import { awardPointsVariants } from "@/components/MyPages/Blocks/Points/EarnAndBurn/TransactionTable/Desktop/Row/awardPointsVariants"
import type { VariantProps } from "class-variance-authority" import type { VariantProps } from "class-variance-authority"
@@ -27,6 +27,11 @@ export interface TableProps {
transactions: Transactions transactions: Transactions
} }
export interface TablePropsPagination extends TableProps {
showMore: () => void
hasMore: boolean
}
export interface RowProps { export interface RowProps {
transaction: Transaction transaction: Transaction
} }