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

feat(SW-285): Add support for sidebar

Browse Source
This commit is contained in:
Chuma McPhoy
2024-09-02 22:43:08 +02:00
parent 60636d8cbe
commit a444746ccb
14 changed files with 594 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
components/Content/Sidebar/JoinLoyalty/Contact/ContactRow/contactRow.module.css Normal file
View File

@@ -0,0 +1,5 @@
.link {
display: flex;
align-items: center;
gap: var(--Spacing-x1);
}

57
components/Content/Sidebar/JoinLoyalty/Contact/ContactRow/index.tsx Normal file
View File

@@ -0,0 +1,57 @@
import { serverClient } from "@/lib/trpc/server"
import { EmailIcon, PhoneIcon } from "@/components/Icons"
import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
import { getValueFromContactConfig } from "@/utils/contactConfig"
import styles from "./contactRow.module.css"
import type { ContactRowProps } from "@/types/components/content/sidebar"
export default async function ContactRow({ contact }: ContactRowProps) {
const data = await serverClient().contentstack.base.contact()
if (!data) {
return null
}
const val = getValueFromContactConfig(contact.contact_field, data)
if (!val) {
return null
}
let Icon = null
if (contact.contact_field.includes("email")) {
Icon = EmailIcon
} else if (contact.contact_field.includes("phone")) {
Icon = PhoneIcon
}
let openableLink = val
if (contact.contact_field.includes("email")) {
openableLink = `mailto:${val}`
} else if (contact.contact_field.includes("phone")) {
openableLink = `tel:${val}`
}
return (
<div>
<Body color="burgundy" textTransform="bold">
{contact.display_text}
</Body>
<Link
className={styles.link}
href={openableLink}
variant="underscored"
color="burgundy"
size="small"
>
{Icon ? <Icon width="20" height="20" color="burgundy" /> : null}
{val}
</Link>
<Footnote color="burgundy">{contact.footnote}</Footnote>
</div>
)
}

19
components/Content/Sidebar/JoinLoyalty/Contact/contact.module.css Normal file
View File

@@ -0,0 +1,19 @@
.contactContainer {
display: none;
}
@media screen and (min-width: 1367px) {
.contactContainer {
border-top: 1px solid var(--UI-Grey-30);
display: flex;
flex-direction: column;
gap: var(--Spacing-x2);
justify-content: center;
padding-top: var(--Spacing-x2);
}
.contact {
display: grid;
gap: var(--Spacing-x-one-and-half);
}
}

33
components/Content/Sidebar/JoinLoyalty/Contact/index.tsx Normal file
View File

@@ -0,0 +1,33 @@
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import { getIntl } from "@/i18n"
import ContactRow from "./ContactRow"
import styles from "./contact.module.css"
import { JoinLoyaltyContactTypenameEnum } from "@/types/components/content/enums"
import type { ContactProps } from "@/types/components/content/sidebar"
export default async function Contact({ contactBlock }: ContactProps) {
const { formatMessage } = await getIntl()
return (
<article className={styles.contactContainer}>
<Subtitle>{formatMessage({ id: "Contact us" })}</Subtitle>
<section className={styles.contact}>
{contactBlock.map(({ contact, __typename }, i) => {
switch (__typename) {
case JoinLoyaltyContactTypenameEnum.ContentPageSidebarJoinLoyaltyContactBlockContactContact:
return (
<ContactRow
key={`${contact.display_text}-${i}`}
contact={contact}
/>
)
default:
return null
}
})}
</section>
</article>
)
}

73
components/Content/Sidebar/JoinLoyalty/index.tsx Normal file
View File

@@ -0,0 +1,73 @@
import { serverClient } from "@/lib/trpc/server"
import LoginButton from "@/components/Current/Header/LoginButton"
import ArrowRight from "@/components/Icons/ArrowRight"
import { ScandicFriends } from "@/components/Levels"
import Button from "@/components/TempDesignSystem/Button"
import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
import Title from "@/components/TempDesignSystem/Text/Title"
import { getIntl } from "@/i18n"
import Contact from "./Contact"
import styles from "./joinLoyalty.module.css"
import type { JoinLoyaltyContactProps } from "@/types/components/content/sidebar"
export default async function JoinLoyaltyContact({
block,
}: JoinLoyaltyContactProps) {
const { formatMessage } = await getIntl()
const user = await serverClient().user.name()
// Check if we have user, that means we are logged in.
if (user) {
return null
}
return (
<section>
<article className={styles.wrapper}>
<Title as="h4" level="h3" textTransform="capitalize">
{block.title}
</Title>
<ScandicFriends color="red" />
{block.preamble ? <Body>{block.preamble}</Body> : null}
{block.button ? (
<Button
asChild
intent="primary"
theme="base"
className={styles.button}
>
<Link
href={block.button.href}
color="white"
target={block.button.openInNewTab ? "_blank" : "_self"}
>
{block.button.title}
</Link>
</Button>
) : null}
<section className={styles.loginContainer}>
<Body>{formatMessage({ id: "Already a friend?" })}</Body>
<LoginButton
className={styles.link}
trackingId="loginJoinLoyalty"
position="join scandic friends sidebar"
color="burgundy"
>
<ArrowRight
color="burgundy"
className={styles.icon}
height="20"
width="20"
/>
{formatMessage({ id: "Log in here" })}
</LoginButton>
</section>
</article>
{block.contact ? <Contact contactBlock={block.contact} /> : null}
</section>
)
}

24
components/Content/Sidebar/JoinLoyalty/joinLoyalty.module.css Normal file
View File

@@ -0,0 +1,24 @@
.wrapper {
display: grid;
gap: var(--Spacing-x3);
padding-bottom: var(--Spacing-x5);
padding-top: var(--Spacing-x4);
}
.loginContainer {
display: grid;
gap: var(--Spacing-x2);
}
.button {
width: fit-content;
}
.link {
display: flex;
align-items: center;
}
.icon {
align-self: center;
}

13
components/Content/Sidebar/MyPagesNavigation/index.tsx Normal file
View File

@@ -0,0 +1,13 @@
import { serverClient } from "@/lib/trpc/server"
import MyPagesSidebar from "@/components/MyPages/Sidebar"
export async function MyPagesNavigation() {
const user = await serverClient().user.name()
// Check if we have user, that means we are logged in andt the My Pages menu can show.
if (!user) {
return null
}
return <MyPagesSidebar />
}

52
components/Content/Sidebar/index.tsx Normal file
View File

@@ -0,0 +1,52 @@
import JsonToHtml from "@/components/JsonToHtml"
import JoinLoyaltyContact from "./JoinLoyalty"
import { MyPagesNavigation } from "./MyPagesNavigation"
import styles from "./sidebar.module.css"
import {
SidebarDynamicComponentEnum,
SidebarTypenameEnum,
} from "@/types/components/content/enums"
import { SidebarProps } from "@/types/components/content/sidebar"
export default function SidebarLoyalty({ blocks }: SidebarProps) {
return (
<aside className={styles.aside}>
{blocks.map((block, idx) => {
switch (block.__typename) {
case SidebarTypenameEnum.ContentPageSidebarContent:
return (
<section
className={styles.content}
key={`${block.__typename}-${idx}`}
>
<JsonToHtml
embeds={block.content.content.embedded_itemsConnection.edges}
nodes={block.content.content.json.children}
/>
</section>
)
case SidebarTypenameEnum.ContentPageSidebarJoinLoyaltyContact:
return (
<JoinLoyaltyContact
block={block.join_loyalty_contact}
key={`${block.__typename}-${idx}`}
/>
)
case SidebarTypenameEnum.ContentPageSidebarDynamicContent:
switch (block.dynamic_content.component) {
case SidebarDynamicComponentEnum.my_pages_navigation:
return <MyPagesNavigation key={`${block.__typename}-${idx}`} />
default:
return null
}
default:
return null
}
})}
</aside>
)
}

15
components/Content/Sidebar/sidebar.module.css Normal file
View File

@@ -0,0 +1,15 @@
.aside {
display: none;
}
.content {
padding: var(--Spacing-x0) var(--Spacing-x2);
}
@media screen and (min-width: 1366px) {
.aside {
align-content: flex-start;
display: grid;
gap: var(--Spacing-x4);
}
}

124
lib/graphql/Query/ContentPage.graphql
View File

@@ -1,3 +1,4 @@
#import "../Fragments/Image.graphql"
#import "../Fragments/Blocks/Card.graphql" #import "../Fragments/Blocks/Card.graphql"
#import "../Fragments/Blocks/LoyaltyCard.graphql" #import "../Fragments/Blocks/LoyaltyCard.graphql"
@@ -112,6 +113,66 @@ query GetContentPage($locale: String!, $uid: String!) {
preamble preamble
} }
hero_image hero_image
sidebar {
__typename
... on ContentPageSidebarDynamicContent {
dynamic_content {
component
}
}
... on ContentPageSidebarJoinLoyaltyContact {
join_loyalty_contact {
title
preamble
button {
cta_text
external_link {
title
href
}
open_in_new_tab
linkConnection {
edges {
node {
__typename
...AccountPageLink
...ContentPageLink
...LoyaltyPageLink
}
}
}
}
contact {
... on ContentPageSidebarJoinLoyaltyContactBlockContactContact {
__typename
contact {
display_text
contact_field
footnote
}
}
}
}
}
... on ContentPageSidebarContent {
content {
content {
json
embedded_itemsConnection {
edges {
node {
__typename
...Image
...LoyaltyPageLink
...ContentPageLink
}
}
totalCount
}
}
}
}
}
system { system {
uid uid
created_at created_at
@@ -203,6 +264,51 @@ query GetContentPageRefs($locale: String!, $uid: String!) {
} }
} }
} }
sidebar {
... on ContentPageSidebarContent {
__typename
content {
content {
embedded_itemsConnection {
edges {
node {
# No fragments used since we want to include __typename for each type to avoid fetching SystemAsset
... on ContentPage {
__typename
system {
...System
}
}
... on LoyaltyPage {
__typename
system {
...System
}
}
}
}
}
}
}
}
... on ContentPageSidebarJoinLoyaltyContact {
__typename
join_loyalty_contact {
button {
linkConnection {
edges {
node {
__typename
...AccountPageRef
...ContentPageRef
...LoyaltyPageRef
}
}
}
}
}
}
}
system { system {
...System ...System
} }
@@ -212,16 +318,25 @@ query GetContentPageRefs($locale: String!, $uid: String!) {
query GetDaDeEnUrlsContentPage($uid: String!) { query GetDaDeEnUrlsContentPage($uid: String!) {
de: all_content_page(where: { uid: $uid }, locale: "de") { de: all_content_page(where: { uid: $uid }, locale: "de") {
items { items {
web {
original_url
}
url url
} }
} }
en: all_content_page(where: { uid: $uid }, locale: "en") { en: all_content_page(where: { uid: $uid }, locale: "en") {
items { items {
web {
original_url
}
url url
} }
} }
da: all_content_page(where: { uid: $uid }, locale: "da") { da: all_content_page(where: { uid: $uid }, locale: "da") {
items { items {
web {
original_url
}
url url
} }
} }
@@ -230,16 +345,25 @@ query GetDaDeEnUrlsContentPage($uid: String!) {
query GetFiNoSvUrlsContentPage($uid: String!) { query GetFiNoSvUrlsContentPage($uid: String!) {
fi: all_content_page(where: { uid: $uid }, locale: "fi") { fi: all_content_page(where: { uid: $uid }, locale: "fi") {
items { items {
web {
original_url
}
url url
} }
} }
no: all_content_page(where: { uid: $uid }, locale: "no") { no: all_content_page(where: { uid: $uid }, locale: "no") {
items { items {
web {
original_url
}
url url
} }
} }
sv: all_content_page(where: { uid: $uid }, locale: "sv") { sv: all_content_page(where: { uid: $uid }, locale: "sv") {
items { items {
web {
original_url
}
url url
} }
} }

113
server/routers/contentstack/contentPage/output.ts
View File

@@ -8,6 +8,9 @@ import {
CardsGridEnum, CardsGridEnum,
ContentBlocksTypenameEnum, ContentBlocksTypenameEnum,
DynamicContentComponentEnum, DynamicContentComponentEnum,
JoinLoyaltyContactTypenameEnum,
SidebarDynamicComponentEnum,
SidebarTypenameEnum,
} from "@/types/components/content/enums" } from "@/types/components/content/enums"
import { ImageVaultAsset } from "@/types/components/imageVault" import { ImageVaultAsset } from "@/types/components/imageVault"
import { Embeds } from "@/types/requests/embeds" import { Embeds } from "@/types/requests/embeds"
@@ -133,6 +136,62 @@ const contentPageBlockItem = z.discriminatedUnion("__typename", [
contentPageShortcuts, contentPageShortcuts,
]) ])
const contentPageSidebarTextContent = z.object({
__typename: z.literal(SidebarTypenameEnum.ContentPageSidebarContent),
content: z.object({
content: z.object({
embedded_itemsConnection: z.object({
edges: z.array(z.any()),
totalCount: z.number(),
}),
json: z.any(),
}),
}),
})
const contentPageJoinLoyaltyContact = z.object({
__typename: z.literal(
SidebarTypenameEnum.ContentPageSidebarJoinLoyaltyContact
),
join_loyalty_contact: z.object({
title: z.string().nullable(),
preamble: z.string().nullable(),
button: z
.object({
openInNewTab: z.boolean(),
title: z.string(),
href: z.string(),
isExternal: z.boolean(),
})
.nullable(),
contact: z.array(
z.object({
__typename: z.literal(
JoinLoyaltyContactTypenameEnum.ContentPageSidebarJoinLoyaltyContactBlockContactContact
),
contact: z.object({
display_text: z.string().nullable(),
contact_field: z.string(),
footnote: z.string().nullable(),
}),
})
),
}),
})
const contentPageSidebarDynamicContent = z.object({
__typename: z.literal(SidebarTypenameEnum.ContentPageSidebarDynamicContent),
dynamic_content: z.object({
component: z.nativeEnum(SidebarDynamicComponentEnum),
}),
})
const contentPageSidebarItem = z.discriminatedUnion("__typename", [
contentPageSidebarTextContent,
contentPageSidebarDynamicContent,
contentPageJoinLoyaltyContact,
])
export type DynamicContent = z.infer<typeof contentPageDynamicContent> export type DynamicContent = z.infer<typeof contentPageDynamicContent>
type BlockContentRaw = z.infer<typeof contentPageBlockTextContent> type BlockContentRaw = z.infer<typeof contentPageBlockTextContent>
@@ -163,6 +222,25 @@ export type CardsRaw = CardsGrid["cards_grid"]["cards"][number]
export type Block = RteBlockContent | Shortcuts | CardsGrid | DynamicContent export type Block = RteBlockContent | Shortcuts | CardsGrid | DynamicContent
type SidebarContentRaw = z.infer<typeof contentPageSidebarTextContent>
export type RteSidebarContent = Omit<SidebarContentRaw, "content"> & {
content: {
content: {
json: RTEDocument
embedded_itemsConnection: EdgesWithTotalCount<Embeds>
}
}
}
type SideBarDynamicContent = z.infer<typeof contentPageSidebarDynamicContent>
export type JoinLoyaltyContact = z.infer<typeof contentPageJoinLoyaltyContact>
export type Sidebar =
| JoinLoyaltyContact
| RteSidebarContent
| SideBarDynamicContent
// Content Page Schema and types // Content Page Schema and types
export const validateContentPageSchema = z.object({ export const validateContentPageSchema = z.object({
content_page: z.object({ content_page: z.object({
@@ -173,6 +251,7 @@ export const validateContentPageSchema = z.object({
}), }),
hero_image: imageVaultAssetSchema.nullable().optional(), hero_image: imageVaultAssetSchema.nullable().optional(),
blocks: z.array(contentPageBlockItem).nullable(), blocks: z.array(contentPageBlockItem).nullable(),
sidebar: z.array(contentPageSidebarItem).nullable(),
system: z.object({ system: z.object({
uid: z.string(), uid: z.string(),
locale: z.nativeEnum(Lang), locale: z.nativeEnum(Lang),
@@ -185,9 +264,13 @@ export const validateContentPageSchema = z.object({
export type ContentPageDataRaw = z.infer<typeof validateContentPageSchema> export type ContentPageDataRaw = z.infer<typeof validateContentPageSchema>
type ContentPageRaw = ContentPageDataRaw["content_page"] type ContentPageRaw = ContentPageDataRaw["content_page"]
export type ContentPage = Omit<ContentPageRaw, "blocks" | "hero_image"> & { export type ContentPage = Omit<
ContentPageRaw,
"blocks" | "hero_image" | "sidebar"
> & {
heroImage?: ImageVaultAsset heroImage?: ImageVaultAsset
blocks: Block[] blocks: Block[]
sidebar: Sidebar[]
} }
const pageConnectionRefs = z.object({ const pageConnectionRefs = z.object({
@@ -305,9 +388,37 @@ const contentPageBlockRefsItem = z.discriminatedUnion("__typename", [
contentPageDynamicContentRefs, contentPageDynamicContentRefs,
]) ])
const contentPageSidebarTextContentRef = z.object({
__typename: z.literal(SidebarTypenameEnum.ContentPageSidebarContent),
content: z.object({
content: z.object({
embedded_itemsConnection: rteConnectionRefs,
}),
}),
})
const contentPageSidebarJoinLoyaltyContactRef = z.object({
__typename: z.literal(
SidebarTypenameEnum.ContentPageSidebarJoinLoyaltyContact
),
join_loyalty_contact: z.object({
button: z
.object({
linkConnection: pageConnectionRefs,
})
.nullable(),
}),
})
const contentPageSidebarRefsItem = z.discriminatedUnion("__typename", [
contentPageSidebarTextContentRef,
contentPageSidebarJoinLoyaltyContactRef,
])
export const validateContentPageRefsSchema = z.object({ export const validateContentPageRefsSchema = z.object({
content_page: z.object({ content_page: z.object({
blocks: z.array(contentPageBlockRefsItem).nullable(), blocks: z.array(contentPageBlockRefsItem).nullable(),
sidebar: z.array(contentPageSidebarRefsItem).nullable(),
system: z.object({ system: z.object({
content_type_uid: z.string(), content_type_uid: z.string(),
uid: z.string(), uid: z.string(),

21
server/routers/contentstack/contentPage/query.ts
View File

@@ -12,6 +12,7 @@ import {
Block, Block,
ContentPage, ContentPage,
ContentPageDataRaw, ContentPageDataRaw,
Sidebar,
validateContentPageSchema, validateContentPageSchema,
} from "./output" } from "./output"
import { import {
@@ -25,6 +26,7 @@ import {
import { import {
CardsGridEnum, CardsGridEnum,
ContentBlocksTypenameEnum, ContentBlocksTypenameEnum,
SidebarTypenameEnum,
} from "@/types/components/content/enums" } from "@/types/components/content/enums"
import { import {
TrackingChannelEnum, TrackingChannelEnum,
@@ -145,11 +147,29 @@ export const contentPageQueryRouter = router({
}) })
: null : null
const sidebar = response.data.content_page.sidebar
? response.data.content_page.sidebar.map((item: any) => {
switch (item.__typename) {
case SidebarTypenameEnum.ContentPageSidebarJoinLoyaltyContact:
return {
...item,
join_loyalty_contact: {
...item.join_loyalty_contact,
button: makeButtonObject(item.join_loyalty_contact.button),
},
}
default:
return item
}
})
: null
const heroImage = makeImageVaultImage(content_page.hero_image) const heroImage = makeImageVaultImage(content_page.hero_image)
const validatedContentPage = validateContentPageSchema.safeParse({ const validatedContentPage = validateContentPageSchema.safeParse({
content_page: { content_page: {
...content_page, ...content_page,
blocks: processedBlocks, blocks: processedBlocks,
sidebar,
hero_image: heroImage, hero_image: heroImage,
}, },
}) })
@@ -169,6 +189,7 @@ export const contentPageQueryRouter = router({
...restContentPage, ...restContentPage,
heroImage, heroImage,
blocks: blocks as Block[], blocks: blocks as Block[],
sidebar: sidebar as Sidebar[],
} }
const tracking: TrackingSDKPageData = { const tracking: TrackingSDKPageData = {

25
types/components/content/enums.ts
View File

@@ -1,3 +1,7 @@
import { JoinLoyaltyContact } from "@/server/routers/contentstack/contentPage/output"
import { Typename } from "@/types/requests/utils/typename"
export enum ContentBlocksTypenameEnum { export enum ContentBlocksTypenameEnum {
ContentPageBlocksContent = "ContentPageBlocksContent", ContentPageBlocksContent = "ContentPageBlocksContent",
ContentPageBlocksShortcuts = "ContentPageBlocksShortcuts", ContentPageBlocksShortcuts = "ContentPageBlocksShortcuts",
@@ -15,3 +19,24 @@ export enum DynamicContentComponentEnum {
how_it_works = "how_it_works", how_it_works = "how_it_works",
overview_table = "overview_table", overview_table = "overview_table",
} }
export enum SidebarTypenameEnum {
ContentPageSidebarJoinLoyaltyContact = "ContentPageSidebarJoinLoyaltyContact",
ContentPageSidebarContent = "ContentPageSidebarContent",
ContentPageSidebarDynamicContent = "ContentPageSidebarDynamicContent",
}
export type SidebarTypename = keyof typeof SidebarTypenameEnum
export enum JoinLoyaltyContactTypenameEnum {
ContentPageSidebarJoinLoyaltyContactBlockContactContact = "ContentPageSidebarJoinLoyaltyContactBlockContactContact",
}
export type JoinLoyaltyContactContact = Typename<
JoinLoyaltyContact["join_loyalty_contact"],
JoinLoyaltyContactTypenameEnum.ContentPageSidebarJoinLoyaltyContactBlockContactContact
>
export enum SidebarDynamicComponentEnum {
my_pages_navigation = "my_pages_navigation",
}

21
types/components/content/sidebar.ts Normal file
View File

@@ -0,0 +1,21 @@
import { ContactFields } from "@/server/routers/contentstack/base/output"
import {
JoinLoyaltyContact,
Sidebar,
} from "@/server/routers/contentstack/contentPage/output"
export type SidebarProps = {
blocks: Sidebar[]
}
export type JoinLoyaltyContactProps = {
block: JoinLoyaltyContact["join_loyalty_contact"]
}
export type ContactProps = {
contactBlock: JoinLoyaltyContact["join_loyalty_contact"]["contact"]
}
export type ContactRowProps = {
contact: ContactFields
}