diff --git a/app/[lang]/(live)/(public)/[contentType]/[uid]/layout.module.css b/app/[lang]/(live)/(public)/[contentType]/[uid]/layout.module.css index 8effc5412..998c4ff65 100644 --- a/app/[lang]/(live)/(public)/[contentType]/[uid]/layout.module.css +++ b/app/[lang]/(live)/(public)/[contentType]/[uid]/layout.module.css @@ -2,6 +2,6 @@ background-color: var(--Scandic-Brand-Warm-White); display: grid; font-family: var(--typography-Body-Regular-fontFamily); - gap: var(--Spacing-x5); + gap: var(--Spacing-x3); grid-template-rows: auto 1fr; } diff --git a/components/ContentType/LoyaltyPage/loyaltyPage.module.css b/components/ContentType/LoyaltyPage/loyaltyPage.module.css index b2bffc7b8..203e19793 100644 --- a/components/ContentType/LoyaltyPage/loyaltyPage.module.css +++ b/components/ContentType/LoyaltyPage/loyaltyPage.module.css @@ -15,9 +15,9 @@ @media screen and (min-width: 1367px) { .content { - gap: var(--Spacing-x3); - padding-left: var(--Spacing-x3); - padding-right: var(--Spacing-x3); + gap: var(--Spacing-x5); + padding-left: var(--Spacing-x5); + padding-right: var(--Spacing-x5); } .content:has(> aside) { diff --git a/components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/index.tsx b/components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/index.tsx index b0140b2f7..70aa7abaa 100644 --- a/components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/index.tsx +++ b/components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/index.tsx @@ -82,7 +82,7 @@ function LevelCard({ formatMessage, lang, level }: LevelCardProps) { } return (
-
+
-
+ {qualifications} diff --git a/components/Loyalty/Sidebar/JoinLoyalty/index.tsx b/components/Loyalty/Sidebar/JoinLoyalty/index.tsx index bc4b2e2c1..481f984a7 100644 --- a/components/Loyalty/Sidebar/JoinLoyalty/index.tsx +++ b/components/Loyalty/Sidebar/JoinLoyalty/index.tsx @@ -1,5 +1,6 @@ import { login } from "@/constants/routes/handleAuth" +import { auth } from "@/auth" import ArrowRight from "@/components/Icons/ArrowRight" import { ScandicFriends } from "@/components/Levels" import Button from "@/components/TempDesignSystem/Button" @@ -20,6 +21,11 @@ export default async function JoinLoyaltyContact({ lang, }: JoinLoyaltyContactProps & LangParams) { const { formatMessage } = await getIntl() + const session = await auth() + + if (session) { + return null + } return (
@@ -35,23 +41,21 @@ export default async function JoinLoyaltyContact({
{formatMessage({ id: "Already a friend?" })} - + - - {formatMessage({ id: "Log in here" })} - - + {formatMessage({ id: "Log in here" })} +
{block.contact ? : null} diff --git a/components/Loyalty/Sidebar/JoinLoyalty/joinLoyalty.module.css b/components/Loyalty/Sidebar/JoinLoyalty/joinLoyalty.module.css index 0ed530076..23d1e2049 100644 --- a/components/Loyalty/Sidebar/JoinLoyalty/joinLoyalty.module.css +++ b/components/Loyalty/Sidebar/JoinLoyalty/joinLoyalty.module.css @@ -14,12 +14,6 @@ width: fit-content; } -.linkWrapper { - display: flex; - align-items: center; - gap: var(--Spacing-x-half); -} - .link { display: flex; align-items: center; diff --git a/components/Loyalty/Sidebar/MyPagesNavigation/index.tsx b/components/Loyalty/Sidebar/MyPagesNavigation/index.tsx new file mode 100644 index 000000000..72bc034d3 --- /dev/null +++ b/components/Loyalty/Sidebar/MyPagesNavigation/index.tsx @@ -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 +} diff --git a/components/Loyalty/Sidebar/index.tsx b/components/Loyalty/Sidebar/index.tsx index 4eaf8d8d9..1cdbe63bc 100644 --- a/components/Loyalty/Sidebar/index.tsx +++ b/components/Loyalty/Sidebar/index.tsx @@ -1,10 +1,14 @@ import JsonToHtml from "@/components/JsonToHtml" import JoinLoyaltyContact from "./JoinLoyalty" +import MyPagesNavigation from "./MyPagesNavigation" 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 { LangParams } from "@/types/params" @@ -36,6 +40,19 @@ export default function SidebarLoyalty({ lang={lang} /> ) + case SidebarTypenameEnum.LoyaltyPageSidebarDynamicContent: + switch (block.dynamic_content.component) { + case LoyaltySidebarDynamicComponentEnum.my_pages_navigation: + return ( + + ) + default: + return null + } + default: return null } diff --git a/components/TempDesignSystem/Link/link.module.css b/components/TempDesignSystem/Link/link.module.css index 934db83b0..bcf90ec33 100644 --- a/components/TempDesignSystem/Link/link.module.css +++ b/components/TempDesignSystem/Link/link.module.css @@ -17,7 +17,7 @@ .icon { align-items: center; display: flex; - gap: var(--Spacing-x1); + gap: var(--Spacing-x-half); } .myPage { diff --git a/components/TempDesignSystem/LoyaltyCard/index.tsx b/components/TempDesignSystem/LoyaltyCard/index.tsx index afafd6e7c..db060ef42 100644 --- a/components/TempDesignSystem/LoyaltyCard/index.tsx +++ b/components/TempDesignSystem/LoyaltyCard/index.tsx @@ -26,15 +26,13 @@ export default function LoyaltyCard({ })} > {image ? ( -
- {image.meta.alt -
+ {image.meta.alt ) : null} {heading} @@ -46,18 +44,21 @@ export default function LoyaltyCard({ ) : null} <div className={styles.buttonContainer}> {link ? ( - <span className={styles.linkWrapper}> - <ArrowRight color="burgundy" className={styles.icon} /> - <Link - className={styles.link} + <Link + className={styles.link} + color="burgundy" + href={link.href} + target={link.openInNewTab ? "_blank" : undefined} + variant="myPage" + > + <ArrowRight color="burgundy" - href={link.href} - target={link.openInNewTab ? "_blank" : undefined} - variant="myPage" - > - {link.title} - </Link> - </span> + className={styles.icon} + height="20" + width="20" + /> + {link.title} + </Link> ) : null} </div> </article> diff --git a/components/TempDesignSystem/LoyaltyCard/loyaltyCard.module.css b/components/TempDesignSystem/LoyaltyCard/loyaltyCard.module.css index c6c1f59dc..bc83ef0b7 100644 --- a/components/TempDesignSystem/LoyaltyCard/loyaltyCard.module.css +++ b/components/TempDesignSystem/LoyaltyCard/loyaltyCard.module.css @@ -15,6 +15,7 @@ object-fit: contain; height: 160px; width: auto; + justify-self: center; } .white { @@ -27,12 +28,6 @@ justify-content: center; } -.linkWrapper { - display: flex; - align-items: baseline; - gap: var(--Spacing-x-half); -} - .link { display: flex; align-items: center; diff --git a/lib/graphql/Query/LoyaltyPage.graphql b/lib/graphql/Query/LoyaltyPage.graphql index 4fbc38a7b..1749eaac5 100644 --- a/lib/graphql/Query/LoyaltyPage.graphql +++ b/lib/graphql/Query/LoyaltyPage.graphql @@ -100,6 +100,11 @@ query GetLoyaltyPage($locale: String!, $uid: String!) { heading sidebar { __typename + ... on LoyaltyPageSidebarDynamicContent { + dynamic_content { + component + } + } ... on LoyaltyPageSidebarJoinLoyaltyContact { join_loyalty_contact { title diff --git a/server/routers/contentstack/loyaltyPage/output.ts b/server/routers/contentstack/loyaltyPage/output.ts index f17e4fbdc..83a5ac8d0 100644 --- a/server/routers/contentstack/loyaltyPage/output.ts +++ b/server/routers/contentstack/loyaltyPage/output.ts @@ -8,6 +8,7 @@ import { LoyaltyBlocksTypenameEnum, LoyaltyCardsGridEnum, LoyaltyComponentEnum, + LoyaltySidebarDynamicComponentEnum, SidebarTypenameEnum, } from "@/types/components/loyalty/enums" 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", [ loyaltyPageSidebarTextContent, + loyaltyPageSidebarDynamicContent, 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 Sidebar = JoinLoyaltyContact | RteSidebarContent +export type Sidebar = + | JoinLoyaltyContact + | RteSidebarContent + | SideBarDynamicContent type LoyaltyPageDataRaw = z.infer<typeof validateLoyaltyPageSchema> export type LoyaltyPage = Omit<LoyaltyPageDataRaw, "blocks" | "sidebar"> & { diff --git a/types/components/loyalty/enums.ts b/types/components/loyalty/enums.ts index a27e15b57..4859d23eb 100644 --- a/types/components/loyalty/enums.ts +++ b/types/components/loyalty/enums.ts @@ -13,10 +13,15 @@ export type JoinLoyaltyContactContact = Typename< export enum SidebarTypenameEnum { LoyaltyPageSidebarJoinLoyaltyContact = "LoyaltyPageSidebarJoinLoyaltyContact", LoyaltyPageSidebarContent = "LoyaltyPageSidebarContent", + LoyaltyPageSidebarDynamicContent = "LoyaltyPageSidebarDynamicContent", } export type SidebarTypename = keyof typeof SidebarTypenameEnum +export enum LoyaltySidebarDynamicComponentEnum { + my_pages_navigation = "my_pages_navigation", +} + export enum LoyaltyComponentEnum { loyalty_levels = "loyalty_levels", how_it_works = "how_it_works",