From 74b05ed6a075c77d0725c6efa2b251b77b1cd432 Mon Sep 17 00:00:00 2001 From: Christel Westerberg Date: Mon, 3 Jun 2024 15:18:00 +0200 Subject: [PATCH 01/11] feat: add edge request function --- .../current-content-page/page.tsx | 9 +-- .../Header/MainMenu/mainMenu.module.css | 1 + lib/graphql/_request.ts | 74 +++++++++++++++++++ lib/graphql/batchRequest.ts | 4 +- lib/graphql/edgeRequest.ts | 20 +++++ lib/graphql/request.ts | 55 ++------------ .../routers/contentstack/accountPage/query.ts | 6 +- .../routers/contentstack/breadcrumbs/utils.ts | 6 +- .../routers/contentstack/loyaltyPage/query.ts | 6 +- .../contentstack/myPages/navigation/query.ts | 6 +- utils/entry.ts | 30 +++----- 11 files changed, 122 insertions(+), 95 deletions(-) create mode 100644 lib/graphql/_request.ts create mode 100644 lib/graphql/edgeRequest.ts diff --git a/app/[lang]/(live-current)/current-content-page/page.tsx b/app/[lang]/(live-current)/current-content-page/page.tsx index 8b46a3a7a..209bded9a 100644 --- a/app/[lang]/(live-current)/current-content-page/page.tsx +++ b/app/[lang]/(live-current)/current-content-page/page.tsx @@ -5,7 +5,6 @@ import { GetCurrentBlockPageTrackingData } from "@/lib/graphql/Query/CurrentBloc import { request } from "@/lib/graphql/request" import ContentPage from "@/components/Current/ContentPage" -import Header from "@/components/Current/Header" import Tracking from "@/components/Current/Tracking" import type { LangParams, PageArgs, UriParams } from "@/types/params" @@ -27,9 +26,7 @@ export default async function CurrentContentPage({ locale: params.lang, url: searchParams.uri, }, - { - next: { tags: [`${searchParams.uri}-${params.lang}`] }, - } + { tags: [`${searchParams.uri}-${params.lang}`] } ) if (!response.data?.all_current_blocks_page?.total) { @@ -43,9 +40,7 @@ export default async function CurrentContentPage({ const pageDataForTracking = await request( GetCurrentBlockPageTrackingData, { uid: response.data.all_current_blocks_page.items[0].system.uid }, - { - next: { tags: [`${searchParams.uri}-en`] }, - } + { tags: [`${searchParams.uri}-en`] } ) const pageData = response.data.all_current_blocks_page.items[0] diff --git a/components/Current/Header/MainMenu/mainMenu.module.css b/components/Current/Header/MainMenu/mainMenu.module.css index e159b06a5..7a824eb34 100644 --- a/components/Current/Header/MainMenu/mainMenu.module.css +++ b/components/Current/Header/MainMenu/mainMenu.module.css @@ -275,6 +275,7 @@ .logo { width: 102.17px; height: 100%; + padding-bottom: 4px; } .listWrapper { diff --git a/lib/graphql/_request.ts b/lib/graphql/_request.ts new file mode 100644 index 000000000..6b4c254d1 --- /dev/null +++ b/lib/graphql/_request.ts @@ -0,0 +1,74 @@ +import "server-only" + +import { GraphQLClient } from "graphql-request" + +import { env } from "@/env/server" + +import type { DocumentNode } from "graphql" + +import type { Data } from "@/types/request" + +export async function request( + client: GraphQLClient, + query: string | DocumentNode, + variables?: {}, + next?: NextFetchRequestConfig +): Promise> { + try { + if (next) { + client.requestConfig.next = next + } + + if (env.PRINT_QUERY) { + const print = (await import("graphql/language/printer")).print + const rawResponse = await client.rawRequest( + print(query as DocumentNode), + variables, + { + access_token: env.CMS_ACCESS_TOKEN, + "Content-Type": "application/json", + } + ) + + /** + * TODO: Send to Monitoring (Logging and Metrics) + */ + console.log({ + complexityLimit: rawResponse.headers.get("x-query-complexity"), + }) + console.log({ + referenceDepth: rawResponse.headers.get("x-reference-depth"), + }) + console.log({ resolverCost: rawResponse.headers.get("x-resolver-cost") }) + + return { + data: rawResponse.data, + } + } + + const print = (await import("graphql/language/printer")).print + const nr = Math.random() + console.log(`START REQUEST ${nr}`) + console.time(`OUTGOING REQUEST ${nr}`) + console.log(`Sending reqeust to ${env.CMS_URL}`) + console.log(`Query:`, print(query as DocumentNode)) + console.log(`Variables:`, variables) + + const response = await client.request({ + document: query, + requestHeaders: { + access_token: env.CMS_ACCESS_TOKEN, + "Content-Type": "application/json", + }, + variables, + }) + + console.timeEnd(`OUTGOING REQUEST ${nr}`) + console.log({ response }) + + return { data: response } + } catch (error) { + console.error(error) + throw new Error("Something went wrong") + } +} diff --git a/lib/graphql/batchRequest.ts b/lib/graphql/batchRequest.ts index e0208970b..10e5835fd 100644 --- a/lib/graphql/batchRequest.ts +++ b/lib/graphql/batchRequest.ts @@ -12,9 +12,7 @@ export async function batchRequest( try { const response = await Promise.allSettled( queries.map((query) => - request(query.document, query.variables, { - next: { tags: query.tags }, - }) + request(query.document, query.variables, { tags: query.tags }) ) ) diff --git a/lib/graphql/edgeRequest.ts b/lib/graphql/edgeRequest.ts new file mode 100644 index 000000000..c1e3f53f3 --- /dev/null +++ b/lib/graphql/edgeRequest.ts @@ -0,0 +1,20 @@ +import { DocumentNode } from "graphql" +import { GraphQLClient } from "graphql-request" + +import { env } from "@/env/server" + +import { request as _request } from "./_request" + +import { Data } from "@/types/request" + +const client = new GraphQLClient(env.CMS_URL, { + fetch: fetch, +}) + +export async function edgeRequest( + query: string | DocumentNode, + variables?: {}, + next?: NextFetchRequestConfig +): Promise> { + return _request(client, query, variables, next) +} diff --git a/lib/graphql/request.ts b/lib/graphql/request.ts index f27a4ecb5..71952e7af 100644 --- a/lib/graphql/request.ts +++ b/lib/graphql/request.ts @@ -1,16 +1,14 @@ -import "server-only" - +import { DocumentNode } from "graphql" import { GraphQLClient } from "graphql-request" import { cache } from "react" import { env } from "@/env/server" -import type { DocumentNode } from "graphql" +import { request as _request } from "./_request" -import type { Data } from "@/types/request" +import { Data } from "@/types/request" const client = new GraphQLClient(env.CMS_URL, { - cache: "force-cache", fetch: cache(async function ( url: URL | RequestInfo, params: RequestInit | undefined @@ -22,50 +20,7 @@ const client = new GraphQLClient(env.CMS_URL, { export async function request( query: string | DocumentNode, variables?: {}, - options?: Pick + next?: NextFetchRequestConfig ): Promise> { - if (options?.cache) { - client.requestConfig.cache = options.cache - } - if (options?.next) { - client.requestConfig.next = options.next - } - - if (env.PRINT_QUERY) { - const { print } = await import("graphql") - const rawResponse = await client.rawRequest( - print(query as DocumentNode), - variables, - { - access_token: env.CMS_ACCESS_TOKEN, - "Content-Type": "application/json", - } - ) - - /** - * TODO: Send to Monitoring (Logging and Metrics) - */ - console.log({ - complexityLimit: rawResponse.headers.get("x-query-complexity"), - }) - console.log({ - referenceDepth: rawResponse.headers.get("x-reference-depth"), - }) - console.log({ resolverCost: rawResponse.headers.get("x-resolver-cost") }) - - return { - data: rawResponse.data, - } - } - - const response = await client.request({ - document: query, - requestHeaders: { - access_token: env.CMS_ACCESS_TOKEN, - "Content-Type": "application/json", - }, - variables, - }) - - return { data: response } + return _request(client, query, variables, next) } diff --git a/server/routers/contentstack/accountPage/query.ts b/server/routers/contentstack/accountPage/query.ts index dc72edd54..5e348898e 100644 --- a/server/routers/contentstack/accountPage/query.ts +++ b/server/routers/contentstack/accountPage/query.ts @@ -37,9 +37,7 @@ export const accountPageQueryRouter = router({ uid, }, { - next: { - tags: [generateRefsResponseTag(lang, uid)], - }, + tags: [generateRefsResponseTag(lang, uid)], } ) @@ -71,7 +69,7 @@ export const accountPageQueryRouter = router({ locale: lang, uid, }, - { next: { tags } } + { tags } ) if (!response.data) { diff --git a/server/routers/contentstack/breadcrumbs/utils.ts b/server/routers/contentstack/breadcrumbs/utils.ts index b1e9869cc..6a3cc6d04 100644 --- a/server/routers/contentstack/breadcrumbs/utils.ts +++ b/server/routers/contentstack/breadcrumbs/utils.ts @@ -68,9 +68,7 @@ export type Variables = { export async function getRefsResponse(query: string, variables: Variables) { const refsResponse = await request(query, variables, { - next: { - tags: [generateRefsResponseTag(variables.locale, variables.url, affix)], - }, + tags: [generateRefsResponseTag(variables.locale, variables.url, affix)], }) if (!refsResponse.data) { throw notFound(refsResponse) @@ -91,7 +89,7 @@ export async function getResponse( variables: Variables, tags: string[] ) { - const response = await request(query, variables, { next: { tags } }) + const response = await request(query, variables, { tags }) if (!response.data) { throw notFound(response) } diff --git a/server/routers/contentstack/loyaltyPage/query.ts b/server/routers/contentstack/loyaltyPage/query.ts index 511f4c9c0..4bf440066 100644 --- a/server/routers/contentstack/loyaltyPage/query.ts +++ b/server/routers/contentstack/loyaltyPage/query.ts @@ -54,9 +54,7 @@ export const loyaltyPageQueryRouter = router({ uid, }, { - next: { - tags: [generateRefsResponseTag(lang, uid)], - }, + tags: [generateRefsResponseTag(lang, uid)], } ) @@ -90,7 +88,7 @@ export const loyaltyPageQueryRouter = router({ locale: lang, uid, }, - { next: { tags } } + { tags } ) if (!response.data) { diff --git a/server/routers/contentstack/myPages/navigation/query.ts b/server/routers/contentstack/myPages/navigation/query.ts index b9f619231..c13153a55 100644 --- a/server/routers/contentstack/myPages/navigation/query.ts +++ b/server/routers/contentstack/myPages/navigation/query.ts @@ -60,9 +60,7 @@ export const navigationQueryRouter = router({ GetNavigationMyPagesRefs, { locale: lang }, { - next: { - tags: [generateRefsResponseTag(lang, "navigation_my_pages")], - }, + tags: [generateRefsResponseTag(lang, "navigation_my_pages")], } ) @@ -90,7 +88,7 @@ export const navigationQueryRouter = router({ const response = await request( GetNavigationMyPages, { locale: lang }, - { next: { tags } } + { tags } ) if (!response.data) { diff --git a/utils/entry.ts b/utils/entry.ts index bd308cc08..c66f42e0e 100644 --- a/utils/entry.ts +++ b/utils/entry.ts @@ -1,31 +1,23 @@ -import { DocumentNode, print } from "graphql" - import { Lang } from "@/constants/languages" -import { env } from "@/env/server" +import { edgeRequest } from "@/lib/graphql/edgeRequest" import { ResolveEntryByUrl } from "@/lib/graphql/Query/ResolveEntry.graphql" import { internalServerError } from "@/server/errors/next" import { validateEntryResolveSchema } from "@/types/requests/entry" export async function resolve(url: string, lang = Lang.en) { - const result = await fetch(env.CMS_URL, { - method: "POST", - headers: { - access_token: env.CMS_ACCESS_TOKEN, - "Content-Type": "application/json", + const response = await edgeRequest( + ResolveEntryByUrl, + { + locale: lang, + url, }, - body: JSON.stringify({ - query: print(ResolveEntryByUrl as DocumentNode), - variables: { - locale: lang, - url, - }, - }), - }) + { + revalidate: 3600, + } + ) - const { data } = await result.json() - - const validatedData = validateEntryResolveSchema.safeParse(data) + const validatedData = validateEntryResolveSchema.safeParse(response.data) if (!validatedData.success) { throw internalServerError(validatedData.error) From d5b08e3a36907137857a9c2c3d0bd0442f76e475 Mon Sep 17 00:00:00 2001 From: Christel Westerberg Date: Tue, 4 Jun 2024 13:35:45 +0200 Subject: [PATCH 02/11] fix: localize 404 and ensure header when no lang --- .../(live)/middleware-error/404/page.tsx | 11 ++ app/[lang]/(live-current)/not-found.tsx | 19 +-- components/Current/Header/index.tsx | 4 +- components/Current/NotFound/Texts.ts | 131 ++++++++++++++++++ components/Current/NotFound/index.tsx | 48 +++++++ .../Current/NotFound/notFound.module.css | 70 ++++++++++ middleware.ts | 6 +- server/routers/contentstack/base/input.ts | 5 + 8 files changed, 282 insertions(+), 12 deletions(-) create mode 100644 app/[lang]/(live)/middleware-error/404/page.tsx create mode 100644 components/Current/NotFound/Texts.ts create mode 100644 components/Current/NotFound/index.tsx create mode 100644 components/Current/NotFound/notFound.module.css create mode 100644 server/routers/contentstack/base/input.ts diff --git a/app/[lang]/(live)/middleware-error/404/page.tsx b/app/[lang]/(live)/middleware-error/404/page.tsx new file mode 100644 index 000000000..231435b23 --- /dev/null +++ b/app/[lang]/(live)/middleware-error/404/page.tsx @@ -0,0 +1,11 @@ +import { Lang } from "@/constants/languages" + +import NotFound from "@/components/Current/NotFound" + +import { LangParams, PageArgs } from "@/types/params" + +export default function NotFoundPage({ params }: PageArgs) { + const lang = params.lang || Lang.en + + return +} diff --git a/app/[lang]/(live-current)/not-found.tsx b/app/[lang]/(live-current)/not-found.tsx index b709a17c2..490af676a 100644 --- a/app/[lang]/(live-current)/not-found.tsx +++ b/app/[lang]/(live-current)/not-found.tsx @@ -1,11 +1,12 @@ -import { getIntl } from "@/i18n" +import { headers } from "next/headers" -export default async function NotFound() { - const { formatMessage } = await getIntl() - return ( -
-

{formatMessage({ id: "Not found" })}

-

{formatMessage({ id: "Could not find requested resource" })}

-
- ) +import { Lang } from "@/constants/languages" + +import NotFound from "@/components/Current/NotFound" + +export default function NotFoundPage() { + const headersList = headers() + const lang = headersList.get("x-sh-language") as Lang + + return } diff --git a/components/Current/Header/index.tsx b/components/Current/Header/index.tsx index 03072e6dd..ca3c8e855 100644 --- a/components/Current/Header/index.tsx +++ b/components/Current/Header/index.tsx @@ -16,7 +16,9 @@ export default async function Header({ lang, languageSwitcher, }: LangParams & { languageSwitcher: React.ReactNode }) { - const data = await serverClient().contentstack.base.header() + const data = await serverClient().contentstack.base.header({ + lang, + }) const session = await auth() const homeHref = homeHrefs[env.NODE_ENV][lang] diff --git a/components/Current/NotFound/Texts.ts b/components/Current/NotFound/Texts.ts new file mode 100644 index 000000000..1e78535a7 --- /dev/null +++ b/components/Current/NotFound/Texts.ts @@ -0,0 +1,131 @@ +import { Lang } from "@/constants/languages" + +type Texts = { + title: string + goToStartPage: { + question: string + link: string + linkText: string + } + goToDestinations: { + question: string + link: string + linkText: string + } + goToOffers: { + question: string + link: string + linkText: string + } +} + +export const texts: Record = { + en: { + title: "Sorry, page not found.", + goToStartPage: { + question: "Would you like to go back to the ", + link: "https://www.scandichotels.com/", + linkText: "startpage", + }, + goToDestinations: { + question: "Or take a trip to our ", + link: "https://www.scandichotels.com/hotels", + linkText: "destinations", + }, + goToOffers: { + question: " or latest ", + link: "https://www.scandichotels.com/weekend-packages-and-offers", + linkText: "offers", + }, + }, + sv: { + title: "Oj då, vi kunde inte hitta sidan du söker.", + goToStartPage: { + question: "Vill du gå tillbaka till ", + link: "https://www.scandichotels.se/", + linkText: "startsidan", + }, + goToDestinations: { + question: "Eller resa till våra ", + link: "https://www.scandichotels.se/hotell", + linkText: "destinationer", + }, + goToOffers: { + question: " eller se våra senaste ", + link: "https://www.scandichotels.se/erbjudanden-och-weekendpaket", + linkText: "erbjudanden", + }, + }, + de: { + title: "Tut uns leid, Seite nicht gefunden.", + goToStartPage: { + question: "Möchten Sie zurück zur ", + link: "https://www.scandichotels.de/", + linkText: "Startseite", + }, + goToDestinations: { + question: "Oder machen Sie einen Ausflug zu unseren ", + link: "https://www.scandichotels.de/hotelsuche", + linkText: "Reisezielen", + }, + goToOffers: { + question: " und aktuellen ", + link: "https://www.scandichotels.de/angebote-arrangements", + linkText: "Angeboten", + }, + }, + fi: { + title: "TValitettavasti sivua ei löydy.", + goToStartPage: { + question: "Haluaisitko mennä takaisin ", + link: "https://www.scandichotels.fi/", + linkText: "etusivulle", + }, + goToDestinations: { + question: "Voit myös tutustu ", + link: "https://www.scandichotels.fi/hotellit", + linkText: "kohteisiimme", + }, + goToOffers: { + question: " tai ajankohtaisiin ", + link: "https://www.scandichotels.fi/tarjoukset", + linkText: "tarjouksiimme", + }, + }, + no: { + title: "Oi da, vi fant ikke siden du lette etter...", + goToStartPage: { + question: "Vil du gå tilbake til ", + link: "https://www.scandichotels.no/", + linkText: "startsiden", + }, + goToDestinations: { + question: "Eller ta en tur til våre ", + link: "https://www.scandichotels.no/hotell", + linkText: "destinasjoner", + }, + goToOffers: { + question: " eller siste ", + link: "https://www.scandichotels.no/hotelltilbud", + linkText: "tilbud", + }, + }, + da: { + title: "Hov - siden kan ikke findes!", + goToStartPage: { + question: "Vil du gå tilbage til ", + link: "https://www.scandichotels.dk/", + linkText: "startsiden", + }, + goToDestinations: { + question: "Eller tag en tur til vores ", + link: "https://www.scandichotels.dk/hoteller", + linkText: "destinationer", + }, + goToOffers: { + question: " eller seneste ", + link: "https://www.scandichotels.dk/tilbud-og-hotelpakker", + linkText: "tilbud", + }, + }, +} diff --git a/components/Current/NotFound/index.tsx b/components/Current/NotFound/index.tsx new file mode 100644 index 000000000..b65d47fd5 --- /dev/null +++ b/components/Current/NotFound/index.tsx @@ -0,0 +1,48 @@ +import { texts } from "./Texts" + +import styles from "./notFound.module.css" + +import { LangParams } from "@/types/params" + +export default function NotFound({ lang }: LangParams) { + const infoTexts = texts[lang] + return ( +
+
+

{infoTexts.title}

+
+

+ {infoTexts.goToStartPage.question} + + {infoTexts.goToStartPage.linkText} + + ? +

+

+ {infoTexts.goToDestinations.question} + + {infoTexts.goToDestinations.linkText} + + {infoTexts.goToOffers.question} + + {infoTexts.goToOffers.linkText} + + . +

+
+
+
+ ) +} diff --git a/components/Current/NotFound/notFound.module.css b/components/Current/NotFound/notFound.module.css new file mode 100644 index 000000000..9229e0f91 --- /dev/null +++ b/components/Current/NotFound/notFound.module.css @@ -0,0 +1,70 @@ +.container { + margin-top: 0; + background: var(--Main-Grey-White); + position: relative; + border-top: 50px solid var(--Main-Grey-White); + background-clip: content-box; +} + +.content { + position: relative; + text-align: center; + box-sizing: content-box; + max-width: 1200px; + margin: 0 auto; + padding: 70px 30px; +} + +.header { + font-family: + brandon text, + Arial, + Helvetica, + sans-serif; + font-size: 32px; + line-height: 1; + margin: 0; + text-transform: uppercase; + font-weight: 400; + color: #483729; +} + +.pitch { + margin-top: 32px; + margin-bottom: 16px; +} + +.text { + font-family: + Helvetica Neue, + Roboto, + Helvetica, + Arial, + sans-serif; + font-weight: 300; + line-height: normal; + text-transform: none; + font-size: 20px; + color: #333; +} + +.link { + color: #00838e; + text-decoration: none; +} + +@media screen and (min-width: 740px) { + .content { + text-align: left; + } +} + +@media screen and (min-width: 950px) { + .header { + font-size: 46px; + } + + .text { + font-size: 24px; + } +} diff --git a/middleware.ts b/middleware.ts index 0a43a4d46..c1f303d23 100644 --- a/middleware.ts +++ b/middleware.ts @@ -1,6 +1,6 @@ import { NextMiddleware, NextResponse } from "next/server" -import { findLang } from "./constants/languages" +import { findLang, Lang } from "./constants/languages" import * as authRequired from "./middlewares/authRequired" import * as cmsContent from "./middlewares/cmsContent" import * as currentWebLogin from "./middlewares/currentWebLogin" @@ -16,8 +16,10 @@ export const middleware: NextMiddleware = async (request, event) => { // Without it we shortcircuit early. // We use middleware-error route because notFound() requires a root layout // which we do not want. We can move to that once all Current stuff is gone. + + // Default to English if no lang is found. return NextResponse.rewrite( - new URL(`/${lang}/middleware-error/404`, request.nextUrl), + new URL(`/${Lang.en}/middleware-error/404`, request.nextUrl), { status: 404, statusText: "Not found", diff --git a/server/routers/contentstack/base/input.ts b/server/routers/contentstack/base/input.ts new file mode 100644 index 000000000..c4156c105 --- /dev/null +++ b/server/routers/contentstack/base/input.ts @@ -0,0 +1,5 @@ +import { z } from "zod" + +import { Lang } from "@/constants/languages" + +export const headerInput = z.object({ lang: z.nativeEnum(Lang) }) From d84c27b73c4ca9522cd3510a0aa1228236420bac Mon Sep 17 00:00:00 2001 From: Christel Westerberg Date: Tue, 4 Jun 2024 13:37:17 +0200 Subject: [PATCH 03/11] fix: add keys on mapped components --- components/Current/Aside/Contacts/Contact.tsx | 17 ++++++++++++----- components/Current/Blocks/index.tsx | 8 ++++---- .../OverviewTable/BenefitCard/index.tsx | 5 ++++- .../OverviewTable/BenefitList/index.tsx | 3 ++- components/Loyalty/Blocks/WebView/index.tsx | 11 +++++++++-- components/Loyalty/Blocks/index.tsx | 11 +++++++++-- components/Loyalty/Sidebar/index.tsx | 10 +++++++--- components/MyPages/AccountPage/Content.tsx | 6 ++++-- .../MyPages/AccountPage/Webview/Content.tsx | 6 ++++-- 9 files changed, 55 insertions(+), 22 deletions(-) diff --git a/components/Current/Aside/Contacts/Contact.tsx b/components/Current/Aside/Contacts/Contact.tsx index f56260741..39232af72 100644 --- a/components/Current/Aside/Contacts/Contact.tsx +++ b/components/Current/Aside/Contacts/Contact.tsx @@ -12,13 +12,13 @@ export default function Contact({ sections, system: { locale } }: ContactNode) { const visitingAddressMessage = getVisitingAddressMessage(locale) return (
- {sections.map((section) => { + {sections.map((section, idx) => { switch (section.__typename) { case Section.ContactBlockSectionsExtraInfo: return

{section.extra_info.text}

case Section.ContactBlockSectionsMailingAddress: return ( -

+

{section.mailing_address.name}
{section.mailing_address.street} @@ -30,7 +30,10 @@ export default function Contact({ sections, system: { locale } }: ContactNode) { ) case Section.ContactBlockSectionsPhone: return ( -

+

{section.phone.title}

) case Section.ContactBlockSectionsTitle: - return

{section.title.text}

+ return ( +

+ {section.title.text} +

+ ) case Section.ContactBlockSectionsVisitingAddress: return ( -

+

{visitingAddressMessage}: {section.visiting_address.street}{" "}

) diff --git a/components/Current/Blocks/index.tsx b/components/Current/Blocks/index.tsx index 9f269813b..dfb21f55b 100644 --- a/components/Current/Blocks/index.tsx +++ b/components/Current/Blocks/index.tsx @@ -14,15 +14,15 @@ export default function Blocks({ blocks }: BlocksProps) { return (
- {blocks.map((block) => { + {blocks.map((block, idx) => { const type = block.__typename switch (type) { case BlocksTypenameEnum.CurrentBlocksPageBlocksList: - return + return case BlocksTypenameEnum.CurrentBlocksPageBlocksPuffs: - return + return case BlocksTypenameEnum.CurrentBlocksPageBlocksText: - return + return default: console.log(`Unknown type: (${type})`) return null diff --git a/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitCard/index.tsx b/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitCard/index.tsx index 0e655233d..3ba7c1f85 100644 --- a/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitCard/index.tsx +++ b/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitCard/index.tsx @@ -37,7 +37,10 @@ export default function BenefitCard({
{comparedValues.map((benefit, idx) => ( -
+
))} diff --git a/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitList/index.tsx b/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitList/index.tsx index d5f6a6a22..6e3fb3c86 100644 --- a/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitList/index.tsx +++ b/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitList/index.tsx @@ -29,8 +29,9 @@ export default function BenefitList({ levels }: BenefitListProps) { { + comparedValues={levelBenefits.map((benefit, idx) => { return { + key: `${benefit.name}-${idx}`, value: benefit.value, unlocked: benefit.unlocked, valueDetails: benefit.valueDetails, diff --git a/components/Loyalty/Blocks/WebView/index.tsx b/components/Loyalty/Blocks/WebView/index.tsx index 354b04078..85a881142 100644 --- a/components/Loyalty/Blocks/WebView/index.tsx +++ b/components/Loyalty/Blocks/WebView/index.tsx @@ -14,10 +14,15 @@ export function Blocks({ lang, blocks }: BlocksProps & LangParams) { const firstItem = idx === 0 switch (block.__typename) { case LoyaltyBlocksTypenameEnum.LoyaltyPageBlocksCardsGrid: - return + return ( + + ) case LoyaltyBlocksTypenameEnum.LoyaltyPageBlocksContent: return ( -
+
) case LoyaltyBlocksTypenameEnum.LoyaltyPageBlocksShortcuts: @@ -49,6 +55,7 @@ export function Blocks({ lang, blocks }: BlocksProps & LangParams) { return ( +
) case LoyaltyBlocksTypenameEnum.LoyaltyPageBlocksShortcuts: return ( ) case LoyaltyBlocksTypenameEnum.LoyaltyPageBlocksCardsGrid: - return + return ( + + ) default: return null } diff --git a/components/Loyalty/Sidebar/index.tsx b/components/Loyalty/Sidebar/index.tsx index 6ffc56b34..2cc4d4c23 100644 --- a/components/Loyalty/Sidebar/index.tsx +++ b/components/Loyalty/Sidebar/index.tsx @@ -9,12 +9,15 @@ import { SidebarProps } from "@/types/components/loyalty/sidebar" export default function SidebarLoyalty({ blocks, lang }: SidebarProps) { return ( -