From 6f293be3a7b608578c32eb0578110eea8fa916f8 Mon Sep 17 00:00:00 2001 From: Arvid Norlin Date: Tue, 13 Aug 2024 11:33:06 +0200 Subject: [PATCH] feat(SW-164): Add pagination for friendship transactions --- .../Points/EarnAndBurn/Desktop/index.tsx | 76 ---------------- .../Desktop/Row/AwardPoints.tsx | 0 .../Desktop/Row/awardPointsVariants.ts | 0 .../Desktop/Row/index.tsx | 9 +- .../Desktop/Row/row.module.css | 0 .../Desktop/desktop.module.css | 19 ++++ .../TransactionTable/Desktop/index.tsx | 91 +++++++++++++++++++ .../{ => TransactionTable}/Mobile/index.tsx | 38 ++++++-- .../Mobile/mobile.module.css | 10 ++ .../EarnAndBurn/TransactionTable/index.tsx | 34 +++++++ .../Blocks/Points/EarnAndBurn/index.tsx | 8 +- server/routers/user/query.ts | 1 + .../components/myPages/myPage/earnAndBurn.ts | 7 +- 13 files changed, 202 insertions(+), 91 deletions(-) delete mode 100644 components/MyPages/Blocks/Points/EarnAndBurn/Desktop/index.tsx rename components/MyPages/Blocks/Points/EarnAndBurn/{ => TransactionTable}/Desktop/Row/AwardPoints.tsx (100%) rename components/MyPages/Blocks/Points/EarnAndBurn/{ => TransactionTable}/Desktop/Row/awardPointsVariants.ts (100%) rename components/MyPages/Blocks/Points/EarnAndBurn/{ => TransactionTable}/Desktop/Row/index.tsx (87%) rename components/MyPages/Blocks/Points/EarnAndBurn/{ => TransactionTable}/Desktop/Row/row.module.css (100%) rename components/MyPages/Blocks/Points/EarnAndBurn/{ => TransactionTable}/Desktop/desktop.module.css (57%) create mode 100644 components/MyPages/Blocks/Points/EarnAndBurn/TransactionTable/Desktop/index.tsx rename components/MyPages/Blocks/Points/EarnAndBurn/{ => TransactionTable}/Mobile/index.tsx (67%) rename components/MyPages/Blocks/Points/EarnAndBurn/{ => TransactionTable}/Mobile/mobile.module.css (73%) create mode 100644 components/MyPages/Blocks/Points/EarnAndBurn/TransactionTable/index.tsx diff --git a/components/MyPages/Blocks/Points/EarnAndBurn/Desktop/index.tsx b/components/MyPages/Blocks/Points/EarnAndBurn/Desktop/index.tsx deleted file mode 100644 index 3046e44e2..000000000 --- a/components/MyPages/Blocks/Points/EarnAndBurn/Desktop/index.tsx +++ /dev/null @@ -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 ( -
- {transactions.length ? ( - - - - {tableHeadings.map((heading) => ( - - ))} - - - - {transactions.map((transaction) => ( - - ))} - -
- - {formatMessage({ id: heading })} - -
- ) : ( - // TODO: add once pagination is available through API - // - - - - {tableHeadings.map((heading) => ( - - ))} - - - - - - - -
- {heading} -
- {formatMessage({ id: "No transactions available" })} -
- )} -
- ) -} diff --git a/components/MyPages/Blocks/Points/EarnAndBurn/Desktop/Row/AwardPoints.tsx b/components/MyPages/Blocks/Points/EarnAndBurn/TransactionTable/Desktop/Row/AwardPoints.tsx similarity index 100% rename from components/MyPages/Blocks/Points/EarnAndBurn/Desktop/Row/AwardPoints.tsx rename to components/MyPages/Blocks/Points/EarnAndBurn/TransactionTable/Desktop/Row/AwardPoints.tsx diff --git a/components/MyPages/Blocks/Points/EarnAndBurn/Desktop/Row/awardPointsVariants.ts b/components/MyPages/Blocks/Points/EarnAndBurn/TransactionTable/Desktop/Row/awardPointsVariants.ts similarity index 100% rename from components/MyPages/Blocks/Points/EarnAndBurn/Desktop/Row/awardPointsVariants.ts rename to components/MyPages/Blocks/Points/EarnAndBurn/TransactionTable/Desktop/Row/awardPointsVariants.ts diff --git a/components/MyPages/Blocks/Points/EarnAndBurn/Desktop/Row/index.tsx b/components/MyPages/Blocks/Points/EarnAndBurn/TransactionTable/Desktop/Row/index.tsx similarity index 87% rename from components/MyPages/Blocks/Points/EarnAndBurn/Desktop/Row/index.tsx rename to components/MyPages/Blocks/Points/EarnAndBurn/TransactionTable/Desktop/Row/index.tsx index 661a476d7..540b68891 100644 --- a/components/MyPages/Blocks/Points/EarnAndBurn/Desktop/Row/index.tsx +++ b/components/MyPages/Blocks/Points/EarnAndBurn/TransactionTable/Desktop/Row/index.tsx @@ -1,6 +1,9 @@ +"use client" + +import { useIntl } from "react-intl" + import { dt } from "@/lib/dt" -import { getIntl } from "@/i18n" import { getLang } from "@/i18n/serverContext" import AwardPoints from "./AwardPoints" @@ -9,8 +12,8 @@ import styles from "./row.module.css" import type { RowProps } from "@/types/components/myPages/myPage/earnAndBurn" -export default async function Row({ transaction }: RowProps) { - const { formatMessage } = await getIntl() +export default function Row({ transaction }: RowProps) { + const { formatMessage } = useIntl() const description = transaction.hotelName && transaction.city ? `${transaction.hotelName}, ${transaction.city} ${transaction.nights} ${formatMessage({ id: "nights" })}` diff --git a/components/MyPages/Blocks/Points/EarnAndBurn/Desktop/Row/row.module.css b/components/MyPages/Blocks/Points/EarnAndBurn/TransactionTable/Desktop/Row/row.module.css similarity index 100% rename from components/MyPages/Blocks/Points/EarnAndBurn/Desktop/Row/row.module.css rename to components/MyPages/Blocks/Points/EarnAndBurn/TransactionTable/Desktop/Row/row.module.css diff --git a/components/MyPages/Blocks/Points/EarnAndBurn/Desktop/desktop.module.css b/components/MyPages/Blocks/Points/EarnAndBurn/TransactionTable/Desktop/desktop.module.css similarity index 57% rename from components/MyPages/Blocks/Points/EarnAndBurn/Desktop/desktop.module.css rename to components/MyPages/Blocks/Points/EarnAndBurn/TransactionTable/Desktop/desktop.module.css index 101d99cec..113c23aba 100644 --- a/components/MyPages/Blocks/Points/EarnAndBurn/Desktop/desktop.module.css +++ b/components/MyPages/Blocks/Points/EarnAndBurn/TransactionTable/Desktop/desktop.module.css @@ -28,6 +28,25 @@ 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 { display: flex; diff --git a/components/MyPages/Blocks/Points/EarnAndBurn/TransactionTable/Desktop/index.tsx b/components/MyPages/Blocks/Points/EarnAndBurn/TransactionTable/Desktop/index.tsx new file mode 100644 index 000000000..fc12a4a00 --- /dev/null +++ b/components/MyPages/Blocks/Points/EarnAndBurn/TransactionTable/Desktop/index.tsx @@ -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 ( +
+ {transactions.length ? ( +
+ + + + {tableHeadings.map((heading) => ( + + ))} + + + + {transactions.map((transaction, idx) => ( + + ))} + +
+ + {formatMessage({ id: heading })} + +
+ {hasMore ? ( +
+ +
+ ) : null} +
+ ) : ( + + + + {tableHeadings.map((heading) => ( + + ))} + + + + + + + +
+ {heading} +
+ {formatMessage({ id: "No transactions available" })} +
+ )} +
+ ) +} diff --git a/components/MyPages/Blocks/Points/EarnAndBurn/Mobile/index.tsx b/components/MyPages/Blocks/Points/EarnAndBurn/TransactionTable/Mobile/index.tsx similarity index 67% rename from components/MyPages/Blocks/Points/EarnAndBurn/Mobile/index.tsx rename to components/MyPages/Blocks/Points/EarnAndBurn/TransactionTable/Mobile/index.tsx index ec8f62412..9a00e1eef 100644 --- a/components/MyPages/Blocks/Points/EarnAndBurn/Mobile/index.tsx +++ b/components/MyPages/Blocks/Points/EarnAndBurn/TransactionTable/Mobile/index.tsx @@ -1,16 +1,25 @@ +"use client" + +import { useIntl } from "react-intl" + 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 { getIntl } from "@/i18n" import { getLang } from "@/i18n/serverContext" 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 (
@@ -28,8 +37,11 @@ export default async function MobileTable({ transactions }: TableProps) { {transactions.length ? ( - transactions.map((transaction) => ( - + transactions.map((transaction, idx) => ( +
{dt(transaction.checkinDate) @@ -55,6 +67,18 @@ export default async function MobileTable({ transactions }: TableProps) { )}
+ + {hasMore ? ( + + ) : null}
) } diff --git a/components/MyPages/Blocks/Points/EarnAndBurn/Mobile/mobile.module.css b/components/MyPages/Blocks/Points/EarnAndBurn/TransactionTable/Mobile/mobile.module.css similarity index 73% rename from components/MyPages/Blocks/Points/EarnAndBurn/Mobile/mobile.module.css rename to components/MyPages/Blocks/Points/EarnAndBurn/TransactionTable/Mobile/mobile.module.css index 3b40d8c69..ac7e30bda 100644 --- a/components/MyPages/Blocks/Points/EarnAndBurn/Mobile/mobile.module.css +++ b/components/MyPages/Blocks/Points/EarnAndBurn/TransactionTable/Mobile/mobile.module.css @@ -34,6 +34,16 @@ padding: var(--Spacing-x4); 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) { .container { diff --git a/components/MyPages/Blocks/Points/EarnAndBurn/TransactionTable/index.tsx b/components/MyPages/Blocks/Points/EarnAndBurn/TransactionTable/index.tsx new file mode 100644 index 000000000..8a2c0050a --- /dev/null +++ b/components/MyPages/Blocks/Points/EarnAndBurn/TransactionTable/index.tsx @@ -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 ( + <> + + + + ) +} diff --git a/components/MyPages/Blocks/Points/EarnAndBurn/index.tsx b/components/MyPages/Blocks/Points/EarnAndBurn/index.tsx index a989e6429..521e8d954 100644 --- a/components/MyPages/Blocks/Points/EarnAndBurn/index.tsx +++ b/components/MyPages/Blocks/Points/EarnAndBurn/index.tsx @@ -4,8 +4,7 @@ import SectionContainer from "@/components/Section/Container" import SectionHeader from "@/components/Section/Header" import SectionLink from "@/components/Section/Link" -import DesktopTable from "./Desktop" -import MobileTable from "./Mobile" +import { TransactionTable } from "./TransactionTable" import type { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage" @@ -22,8 +21,9 @@ export default async function EarnAndBurn({ return ( - - + + + ) diff --git a/server/routers/user/query.ts b/server/routers/user/query.ts index 055c09766..946ec5945 100644 --- a/server/routers/user/query.ts +++ b/server/routers/user/query.ts @@ -455,6 +455,7 @@ export const userQueryRouter = router({ transaction: router({ friendTransactions: protectedProcedure.query(async (opts) => { const apiResponse = await api.get(api.endpoints.v1.friendTransactions, { + cache: "no-store", headers: { Authorization: `Bearer ${opts.ctx.session.token.access_token}`, }, diff --git a/types/components/myPages/myPage/earnAndBurn.ts b/types/components/myPages/myPage/earnAndBurn.ts index 42d51d123..7791aea22 100644 --- a/types/components/myPages/myPage/earnAndBurn.ts +++ b/types/components/myPages/myPage/earnAndBurn.ts @@ -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" @@ -27,6 +27,11 @@ export interface TableProps { transactions: Transactions } +export interface TablePropsPagination extends TableProps { + showMore: () => void + hasMore: boolean +} + export interface RowProps { transaction: Transaction }