diff --git a/app/[lang]/(live)/(public)/loyalty-page/layout.module.css b/app/[lang]/(live)/(public)/loyalty-page/layout.module.css index cd47ec147..4ddc7b911 100644 --- a/app/[lang]/(live)/(public)/loyalty-page/layout.module.css +++ b/app/[lang]/(live)/(public)/loyalty-page/layout.module.css @@ -6,4 +6,5 @@ font-family: var(--ff-fira-sans); grid-template-rows: var(--header-height) auto 1fr; min-height: 100dvh; + background-color: var(--Brand-Coffee-Subtle); } diff --git a/app/[lang]/(live)/(public)/loyalty-page/page.module.css b/app/[lang]/(live)/(public)/loyalty-page/page.module.css index ebc27135f..c8531f21d 100644 --- a/app/[lang]/(live)/(public)/loyalty-page/page.module.css +++ b/app/[lang]/(live)/(public)/loyalty-page/page.module.css @@ -6,6 +6,13 @@ position: relative; } +.blocks { + display: grid; + gap: 4.2rem; + padding-left: 2rem; + padding-right: 2rem; +} + @media screen and (min-width: 950px) { .content { gap: 10rem; @@ -15,4 +22,10 @@ padding-right: 2.4rem; padding-top: 5.8rem; } + + .blocks { + gap: 6.4rem; + padding-left: 0; + padding-right: 0; + } } diff --git a/app/[lang]/(live)/(public)/loyalty-page/page.tsx b/app/[lang]/(live)/(public)/loyalty-page/page.tsx index 7b03e2191..7abe910d3 100644 --- a/app/[lang]/(live)/(public)/loyalty-page/page.tsx +++ b/app/[lang]/(live)/(public)/loyalty-page/page.tsx @@ -6,6 +6,7 @@ import { LangParams, PageArgs, UriParams } from "@/types/params" import { notFound } from "next/navigation" import styles from "./page.module.css" +import Sidebar from "@/components/Loyalty/Sidebar" export default async function LoyaltyPage({ params, @@ -22,13 +23,19 @@ export default async function LoyaltyPage({ }) return ( -
- - - {loyaltyPage.title} + + +
+ {loyaltyPage.title} - -
+ + ) } catch (err) { return notFound() diff --git a/components/JsonToHtml/renderOptions.tsx b/components/JsonToHtml/renderOptions.tsx index 2a6eb0d86..b9423cc48 100644 --- a/components/JsonToHtml/renderOptions.tsx +++ b/components/JsonToHtml/renderOptions.tsx @@ -29,6 +29,10 @@ function extractPossibleAttributes(attrs: Attributes) { props.className = attrs["class-name"] } else if (attrs.classname) { props.className = attrs.classname + } else if (attrs?.style?.["text-align"]) { + props.style = { + textAlign: attrs?.style?.["text-align"], + } } return props @@ -250,6 +254,11 @@ export const renderOptions: RenderOptions = { const image = embeds?.[node?.attrs?.["asset-uid"]] if (image.node.__typename === EmbedEnum.SysAsset) { const alt = image?.node?.title ?? node.attrs.alt + const alignment = node.attrs?.style?.["text-align"] + ? { + alignSelf: node.attrs?.style?.["text-align"], + } + : {} return ( ) } diff --git a/components/Loyalty/Sidebar/JoinLoyalty/Contact/index.tsx b/components/Loyalty/Sidebar/JoinLoyalty/Contact/index.tsx new file mode 100644 index 000000000..351362cff --- /dev/null +++ b/components/Loyalty/Sidebar/JoinLoyalty/Contact/index.tsx @@ -0,0 +1,8 @@ +import { Lang } from "@/constants/languages" +import { serverClient } from "@/lib/trpc/server" + +export default function Contact({ lang }: { lang: Lang }) { + const data = serverClient().contentstack.contactConfig.get({ lang }) + + return
+} diff --git a/components/Loyalty/Sidebar/JoinLoyalty/index.tsx b/components/Loyalty/Sidebar/JoinLoyalty/index.tsx new file mode 100644 index 000000000..25ef804e2 --- /dev/null +++ b/components/Loyalty/Sidebar/JoinLoyalty/index.tsx @@ -0,0 +1,37 @@ +import Title from "@/components/Title" +import JsonToHtml from "@/components/JsonToHtml" +import Button from "@/components/TempDesignSystem/Button" +import Link from "@/components/TempDesignSystem/Link" + +import styles from "./joinLoyalty.module.css" + +import type { JoinLoyaltyContact } from "@/types/requests/loyaltyPage" + +export default function JoinLoyaltyContact({ + block, +}: { + block: JoinLoyaltyContact["join_loyalty_contact"] +}) { + return ( +
+
+ + +
+ + Already a friend?
+ Click here to log in + +
+
+
+ Contact +
+
+ ) +} diff --git a/components/Loyalty/Sidebar/JoinLoyalty/joinLoyalty.module.css b/components/Loyalty/Sidebar/JoinLoyalty/joinLoyalty.module.css new file mode 100644 index 000000000..cd22348e6 --- /dev/null +++ b/components/Loyalty/Sidebar/JoinLoyalty/joinLoyalty.module.css @@ -0,0 +1,42 @@ +.container { + display: grid; + font-weight: 600; + background-color: var(--Base-Background-Elevated); + border-radius: 32px 4px 4px 32px; +} + +.wrapper { + display: flex; + align-items: center; + flex-direction: column; + gap: 2rem; + padding: 4rem 2rem; +} + +.logoutLink { + text-decoration: none; + color: var(--some-black-color, #2e2e2e); + font-size: 1.2rem; +} + +.linkContainer { + text-align: center; +} + +.contactContainer { + display: none; +} + +@media screen and (min-width: 950px) { + .wrapper { + gap: 3rem; + } + + .contactContainer { + display: block; + border-top: 0.5px solid var(--Base-Border-Disabled); + display: flex; + justify-content: center; + padding: 3.4rem; + } +} diff --git a/components/Loyalty/Sidebar/index.tsx b/components/Loyalty/Sidebar/index.tsx new file mode 100644 index 000000000..94cd937d2 --- /dev/null +++ b/components/Loyalty/Sidebar/index.tsx @@ -0,0 +1,20 @@ +import JsonToHtml from "@/components/JsonToHtml" +import JoinLoyaltyContact from "./JoinLoyalty" + +import { Sidebar, SidebarTypenameEnum } from "@/types/requests/loyaltyPage" + +export default function SidebarLoyalty({ block }: { block: Sidebar }) { + switch (block.__typename) { + case SidebarTypenameEnum.LoyaltyPageSidebarContent: + return ( + + ) + case SidebarTypenameEnum.LoyaltyPageSidebarJoinLoyaltyContact: + return + default: + return null + } +} diff --git a/lib/graphql/Query/ContactConfig.graphql b/lib/graphql/Query/ContactConfig.graphql new file mode 100644 index 000000000..381d00941 --- /dev/null +++ b/lib/graphql/Query/ContactConfig.graphql @@ -0,0 +1,37 @@ +query GetContactConfig($locale: String!) { + all_contact_config(locale: $locale) { + items { + email { + address + name + } + email_loyalty { + address + name + } + mailing_address { + name + street + zip + country + city + } + phone { + number + name + } + phone_loyalty { + name + number + } + title + visiting_address { + country + city + street + zip + } + } + total + } +} diff --git a/lib/graphql/Query/LoyaltyPage.graphql b/lib/graphql/Query/LoyaltyPage.graphql index e8f884fbc..07eebacb6 100644 --- a/lib/graphql/Query/LoyaltyPage.graphql +++ b/lib/graphql/Query/LoyaltyPage.graphql @@ -1,3 +1,5 @@ +#import "../Fragments/Image.graphql" + query GetLoyaltyPage($locale: String!, $url: String!) { all_loyalty_page(where: { url: $url, locale: $locale }) { items { @@ -56,12 +58,12 @@ query GetLoyaltyPage($locale: String!, $url: String!) { } title sidebar { - ... on LoyaltyPageSidebarLoyaltyJoinContact { + ... on LoyaltyPageSidebarJoinLoyaltyContact { __typename - loyalty_join_contact { + join_loyalty_contact { title contact { - ... on LoyaltyPageSidebarLoyaltyJoinContactBlockContactContact { + ... on LoyaltyPageSidebarJoinLoyaltyContactBlockContactContact { __typename contact { contact_fields @@ -71,19 +73,11 @@ query GetLoyaltyPage($locale: String!, $url: String!) { login_button_text body { json - embedded_itemsConnection { + embedded_itemsConnection(limit: 30) { edges { node { - ... on SysAsset { - title - dimension { - width - height - } - file_size - filename - url - } + __typename + ...Image } } } @@ -98,16 +92,7 @@ query GetLoyaltyPage($locale: String!, $url: String!) { embedded_itemsConnection { edges { node { - ... on SysAsset { - title - url - file_size - filename - dimension { - width - height - } - } + ...Image } } } @@ -123,7 +108,6 @@ query GetLoyaltyPage($locale: String!, $url: String!) { title } } - original_url seo_metadata { description title diff --git a/server/routers/contentstack/contactConfig/index.ts b/server/routers/contentstack/contactConfig/index.ts new file mode 100644 index 000000000..155949945 --- /dev/null +++ b/server/routers/contentstack/contactConfig/index.ts @@ -0,0 +1,5 @@ +import { mergeRouters } from "@/server/trpc" + +import { contactConfigQueryRouter } from "./query" + +export const contactConfigRouter = mergeRouters(contactConfigQueryRouter) diff --git a/server/routers/contentstack/contactConfig/query.ts b/server/routers/contentstack/contactConfig/query.ts new file mode 100644 index 000000000..83d183c54 --- /dev/null +++ b/server/routers/contentstack/contactConfig/query.ts @@ -0,0 +1,32 @@ +import { z } from "zod" + +import { badRequestError } from "@/server/errors/trpc" +import { publicProcedure, router } from "@/server/trpc" +import { request } from "@/lib/graphql/request" +import { Lang } from "@/constants/languages" + +import GetContactConfig from "@/lib/graphql/Query/ContactConfig.graphql" + +import type { GetContactConfigData } from "@/types/requests/contactConfig" + +export const contactConfigQueryRouter = router({ + get: publicProcedure + .input(z.object({ lang: z.nativeEnum(Lang) })) + .query(async ({ input }) => { + const contactConfig = await request( + GetContactConfig, + { + locale: input.lang, + }, + { + tags: [`contact-config-${input.lang}`], + } + ) + + if (contactConfig.data && contactConfig.data.all_contact_config.total) { + return contactConfig.data.all_contact_config.items[0] + } + + throw badRequestError() + }), +}) diff --git a/server/routers/contentstack/index.ts b/server/routers/contentstack/index.ts index 1a570fa8e..3f765813d 100644 --- a/server/routers/contentstack/index.ts +++ b/server/routers/contentstack/index.ts @@ -2,8 +2,10 @@ import { router } from "@/server/trpc" import { breadcrumbsRouter } from "./breadcrumbs" import { loyaltyPageRouter } from "./loyaltyPage" +import { contactConfigRouter } from "./contactConfig" export const contentstackRouter = router({ breadcrumbs: breadcrumbsRouter, loyaltyPage: loyaltyPageRouter, + contactConfig: contactConfigRouter, }) diff --git a/server/routers/contentstack/loyaltyPage/index.tsx b/server/routers/contentstack/loyaltyPage/index.ts similarity index 100% rename from server/routers/contentstack/loyaltyPage/index.tsx rename to server/routers/contentstack/loyaltyPage/index.ts diff --git a/types/requests/loyaltyPage.ts b/types/requests/loyaltyPage.ts index 6b04dd127..598a1f724 100644 --- a/types/requests/loyaltyPage.ts +++ b/types/requests/loyaltyPage.ts @@ -1,16 +1,18 @@ import { PageLink } from "./myPages/navigation" +import { Edges } from "./utils/edges" import type { AllRequestResponse } from "./utils/all" import type { Typename } from "./utils/typename" -import { Edges } from "./utils/edges" import type { RTEDocument } from "../rte/node" import type { Embeds } from "./embeds" import type { ContactField } from "./contactConfig" -enum SidebarTypenameEnum { - LoyaltyPageSidebarLoyaltyJoinContact = "LoyaltyPageSidebarLoyaltyJoinContact", +export enum SidebarTypenameEnum { + LoyaltyPageSidebarJoinLoyaltyContact = "LoyaltyPageSidebarJoinLoyaltyContact", LoyaltyPageSidebarContent = "LoyaltyPageSidebarContent", } +export type SidebarTypename = keyof typeof SidebarTypenameEnum + type SidebarContent = { content: { embedded_itemsConnection: Edges @@ -24,8 +26,8 @@ type Contact = { } } -type LoyaltyJoinContact = { - loyalty_join_contact: { +export type JoinLoyaltyContact = { + join_loyalty_contact: { title: string contact: Typename< Contact, @@ -42,8 +44,8 @@ type LoyaltyJoinContact = { export type Sidebar = | Typename | Typename< - LoyaltyJoinContact, - SidebarTypenameEnum.LoyaltyPageSidebarLoyaltyJoinContact + JoinLoyaltyContact, + SidebarTypenameEnum.LoyaltyPageSidebarJoinLoyaltyContact > enum ContentBlocks {