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

fix: add my pages nav sidebar for logged in users

Browse Source
This commit is contained in:
Christel Westerberg
2024-07-01 11:30:34 +02:00
parent 323df671d8
commit d206d576a7
13 changed files with 101 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/[lang]/(live)/(public)/[contentType]/[uid]/layout.module.css
View File

@@ -2,6 +2,6 @@
background-color: var(--Scandic-Brand-Warm-White); background-color: var(--Scandic-Brand-Warm-White);
display: grid; display: grid;
font-family: var(--typography-Body-Regular-fontFamily); font-family: var(--typography-Body-Regular-fontFamily);
gap: var(--Spacing-x5); gap: var(--Spacing-x3);
grid-template-rows: auto 1fr; grid-template-rows: auto 1fr;
} }

6
components/ContentType/LoyaltyPage/loyaltyPage.module.css
View File

@@ -15,9 +15,9 @@
@media screen and (min-width: 1367px) { @media screen and (min-width: 1367px) {
.content { .content {
gap: var(--Spacing-x3); gap: var(--Spacing-x5);
padding-left: var(--Spacing-x3); padding-left: var(--Spacing-x5);
padding-right: var(--Spacing-x3); padding-right: var(--Spacing-x5);
} }
.content:has(> aside) { .content:has(> aside) {

4
components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/index.tsx
View File

@@ -82,7 +82,7 @@ function LevelCard({ formatMessage, lang, level }: LevelCardProps) {
} }
return ( return (
<article className={styles.card}> <article className={styles.card}>
<section> <header>
<BiroScript <BiroScript
type="two" type="two"
color="primaryLightOnSurfaceAccent" color="primaryLightOnSurfaceAccent"
@@ -91,7 +91,7 @@ function LevelCard({ formatMessage, lang, level }: LevelCardProps) {
{formatMessage({ id: "Level" })} {level.level} {formatMessage({ id: "Level" })} {level.level}
</BiroScript> </BiroScript>
<Level color="red" /> <Level color="red" />
</section> </header>
<Title textAlign="center" level="h5"> <Title textAlign="center" level="h5">
{qualifications} {qualifications}
</Title> </Title>

26
components/Loyalty/Sidebar/JoinLoyalty/index.tsx
View File

@@ -1,5 +1,6 @@
import { login } from "@/constants/routes/handleAuth" import { login } from "@/constants/routes/handleAuth"
import { auth } from "@/auth"
import ArrowRight from "@/components/Icons/ArrowRight" import ArrowRight from "@/components/Icons/ArrowRight"
import { ScandicFriends } from "@/components/Levels" import { ScandicFriends } from "@/components/Levels"
import Button from "@/components/TempDesignSystem/Button" import Button from "@/components/TempDesignSystem/Button"
@@ -20,6 +21,11 @@ export default async function JoinLoyaltyContact({
lang, lang,
}: JoinLoyaltyContactProps & LangParams) { }: JoinLoyaltyContactProps & LangParams) {
const { formatMessage } = await getIntl() const { formatMessage } = await getIntl()
const session = await auth()
if (session) {
return null
}
return ( return (
<section> <section>
<article className={styles.wrapper}> <article className={styles.wrapper}>
@@ -35,23 +41,21 @@ export default async function JoinLoyaltyContact({
</Button> </Button>
<section className={styles.loginContainer}> <section className={styles.loginContainer}>
<Body>{formatMessage({ id: "Already a friend?" })}</Body> <Body>{formatMessage({ id: "Already a friend?" })}</Body>
<span className={styles.linkWrapper}> <Link
className={styles.link}
color="burgundy"
href={`/${lang}/login`}
variant="icon"
size="small"
>
<ArrowRight <ArrowRight
color="burgundy" color="burgundy"
className={styles.icon} className={styles.icon}
height="20" height="20"
width="20" width="20"
/> />
<Link {formatMessage({ id: "Log in here" })}
className={styles.link} </Link>
color="burgundy"
href={`/${lang}/login`}
variant="icon"
size="small"
>
{formatMessage({ id: "Log in here" })}
</Link>
</span>
</section> </section>
</article> </article>
{block.contact ? <Contact contactBlock={block.contact} /> : null} {block.contact ? <Contact contactBlock={block.contact} /> : null}

6
components/Loyalty/Sidebar/JoinLoyalty/joinLoyalty.module.css
View File

@@ -14,12 +14,6 @@
width: fit-content; width: fit-content;
} }
.linkWrapper {
display: flex;
align-items: center;
gap: var(--Spacing-x-half);
}
.link { .link {
display: flex; display: flex;
align-items: center; align-items: center;

14
components/Loyalty/Sidebar/MyPagesNavigation/index.tsx Normal file
View File

@@ -0,0 +1,14 @@
import { auth } from "@/auth"
import MyPagesSidebar from "@/components/MyPages/Sidebar"
import { LangParams } from "@/types/params"
export default async function MyPagesNavigation({ lang }: LangParams) {
const session = await auth()
if (!session) {
return null
}
return <MyPagesSidebar lang={lang} />
}

19
components/Loyalty/Sidebar/index.tsx
View File

@@ -1,10 +1,14 @@
import JsonToHtml from "@/components/JsonToHtml" import JsonToHtml from "@/components/JsonToHtml"
import JoinLoyaltyContact from "./JoinLoyalty" import JoinLoyaltyContact from "./JoinLoyalty"
import MyPagesNavigation from "./MyPagesNavigation"
import styles from "./sidebar.module.css" import styles from "./sidebar.module.css"
import { SidebarTypenameEnum } from "@/types/components/loyalty/enums" import {
LoyaltySidebarDynamicComponentEnum,
SidebarTypenameEnum,
} from "@/types/components/loyalty/enums"
import { SidebarProps } from "@/types/components/loyalty/sidebar" import { SidebarProps } from "@/types/components/loyalty/sidebar"
import { LangParams } from "@/types/params" import { LangParams } from "@/types/params"
@@ -36,6 +40,19 @@ export default function SidebarLoyalty({
lang={lang} lang={lang}
/> />
) )
case SidebarTypenameEnum.LoyaltyPageSidebarDynamicContent:
switch (block.dynamic_content.component) {
case LoyaltySidebarDynamicComponentEnum.my_pages_navigation:
return (
<MyPagesNavigation
key={`${block.__typename}-${idx}`}
lang={lang}
/>
)
default:
return null
}
default: default:
return null return null
} }

2
components/TempDesignSystem/Link/link.module.css
View File

@@ -17,7 +17,7 @@
.icon { .icon {
align-items: center; align-items: center;
display: flex; display: flex;
gap: var(--Spacing-x1); gap: var(--Spacing-x-half);
} }
.myPage { .myPage {

41
components/TempDesignSystem/LoyaltyCard/index.tsx
View File

@@ -26,15 +26,13 @@ export default function LoyaltyCard({
})} })}
> >
{image ? ( {image ? (
<section> <Image
<Image src={image.url}
src={image.url} width={180}
width={180} height={160}
height={160} className={styles.image}
className={styles.image} alt={image.meta.alt || image.title}
alt={image.meta.alt || image.title} />
/>
</section>
) : null} ) : null}
<Title as="h5" level="h3" textAlign="center"> <Title as="h5" level="h3" textAlign="center">
{heading} {heading}
@@ -46,18 +44,21 @@ export default function LoyaltyCard({
) : null} ) : null}
<div className={styles.buttonContainer}> <div className={styles.buttonContainer}>
{link ? ( {link ? (
<span className={styles.linkWrapper}> <Link
<ArrowRight color="burgundy" className={styles.icon} /> className={styles.link}
<Link color="burgundy"
className={styles.link} href={link.href}
target={link.openInNewTab ? "_blank" : undefined}
variant="myPage"
>
<ArrowRight
color="burgundy" color="burgundy"
href={link.href} className={styles.icon}
target={link.openInNewTab ? "_blank" : undefined} height="20"
variant="myPage" width="20"
> />
{link.title} {link.title}
</Link> </Link>
</span>
) : null} ) : null}
</div> </div>
</article> </article>

7
components/TempDesignSystem/LoyaltyCard/loyaltyCard.module.css
View File

@@ -15,6 +15,7 @@
object-fit: contain; object-fit: contain;
height: 160px; height: 160px;
width: auto; width: auto;
justify-self: center;
} }
.white { .white {
@@ -27,12 +28,6 @@
justify-content: center; justify-content: center;
} }
.linkWrapper {
display: flex;
align-items: baseline;
gap: var(--Spacing-x-half);
}
.link { .link {
display: flex; display: flex;
align-items: center; align-items: center;

5
lib/graphql/Query/LoyaltyPage.graphql
View File

@@ -100,6 +100,11 @@ query GetLoyaltyPage($locale: String!, $uid: String!) {
heading heading
sidebar { sidebar {
__typename __typename
... on LoyaltyPageSidebarDynamicContent {
dynamic_content {
component
}
}
... on LoyaltyPageSidebarJoinLoyaltyContact { ... on LoyaltyPageSidebarJoinLoyaltyContact {
join_loyalty_contact { join_loyalty_contact {
title title

16
server/routers/contentstack/loyaltyPage/output.ts
View File

@@ -8,6 +8,7 @@ import {
LoyaltyBlocksTypenameEnum, LoyaltyBlocksTypenameEnum,
LoyaltyCardsGridEnum, LoyaltyCardsGridEnum,
LoyaltyComponentEnum, LoyaltyComponentEnum,
LoyaltySidebarDynamicComponentEnum,
SidebarTypenameEnum, SidebarTypenameEnum,
} from "@/types/components/loyalty/enums" } from "@/types/components/loyalty/enums"
import { Embeds } from "@/types/requests/embeds" import { Embeds } from "@/types/requests/embeds"
@@ -166,8 +167,16 @@ const loyaltyPageJoinLoyaltyContact = z.object({
}), }),
}) })
const loyaltyPageSidebarDynamicContent = z.object({
__typename: z.literal(SidebarTypenameEnum.LoyaltyPageSidebarDynamicContent),
dynamic_content: z.object({
component: z.nativeEnum(LoyaltySidebarDynamicComponentEnum),
}),
})
const loyaltyPageSidebarItem = z.discriminatedUnion("__typename", [ const loyaltyPageSidebarItem = z.discriminatedUnion("__typename", [
loyaltyPageSidebarTextContent, loyaltyPageSidebarTextContent,
loyaltyPageSidebarDynamicContent,
loyaltyPageJoinLoyaltyContact, loyaltyPageJoinLoyaltyContact,
]) ])
@@ -226,8 +235,13 @@ export type RteSidebarContent = Omit<SidebarContentRaw, "content"> & {
} }
} }
} }
type SideBarDynamicContent = z.infer<typeof loyaltyPageSidebarDynamicContent>
export type JoinLoyaltyContact = z.infer<typeof loyaltyPageJoinLoyaltyContact> export type JoinLoyaltyContact = z.infer<typeof loyaltyPageJoinLoyaltyContact>
export type Sidebar = JoinLoyaltyContact | RteSidebarContent export type Sidebar =
| JoinLoyaltyContact
| RteSidebarContent
| SideBarDynamicContent
type LoyaltyPageDataRaw = z.infer<typeof validateLoyaltyPageSchema> type LoyaltyPageDataRaw = z.infer<typeof validateLoyaltyPageSchema>
export type LoyaltyPage = Omit<LoyaltyPageDataRaw, "blocks" | "sidebar"> & { export type LoyaltyPage = Omit<LoyaltyPageDataRaw, "blocks" | "sidebar"> & {

5
types/components/loyalty/enums.ts
View File

@@ -13,10 +13,15 @@ export type JoinLoyaltyContactContact = Typename<
export enum SidebarTypenameEnum { export enum SidebarTypenameEnum {
LoyaltyPageSidebarJoinLoyaltyContact = "LoyaltyPageSidebarJoinLoyaltyContact", LoyaltyPageSidebarJoinLoyaltyContact = "LoyaltyPageSidebarJoinLoyaltyContact",
LoyaltyPageSidebarContent = "LoyaltyPageSidebarContent", LoyaltyPageSidebarContent = "LoyaltyPageSidebarContent",
LoyaltyPageSidebarDynamicContent = "LoyaltyPageSidebarDynamicContent",
} }
export type SidebarTypename = keyof typeof SidebarTypenameEnum export type SidebarTypename = keyof typeof SidebarTypenameEnum
export enum LoyaltySidebarDynamicComponentEnum {
my_pages_navigation = "my_pages_navigation",
}
export enum LoyaltyComponentEnum { export enum LoyaltyComponentEnum {
loyalty_levels = "loyalty_levels", loyalty_levels = "loyalty_levels",
how_it_works = "how_it_works", how_it_works = "how_it_works",