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

feat: create blocks component for loyalty

Browse Source
This commit is contained in:
Christel Westerberg
2024-04-22 09:54:24 +02:00
parent 3a0c8610dc
commit fc0e5aed02
17 changed files with 193 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
app/[lang]/(live)/(public)/loyalty-page/page.tsx
View File

@@ -1,12 +1,13 @@
import Title from "@/components/Title"
import MaxWidth from "@/components/MaxWidth"
import { serverClient } from "@/lib/trpc/server"
import { LangParams, PageArgs, UriParams } from "@/types/params"
import { notFound } from "next/navigation"
import { serverClient } from "@/lib/trpc/server"
import MaxWidth from "@/components/MaxWidth"
import Sidebar from "@/components/Loyalty/Sidebar"
import { Blocks } from "@/components/Loyalty/Blocks"
import type { LangParams, PageArgs, UriParams } from "@/types/params"
import styles from "./page.module.css"
import Sidebar from "@/components/Loyalty/Sidebar"
export default async function LoyaltyPage({
params,
@@ -32,8 +33,7 @@ export default async function LoyaltyPage({
: null}
</aside>
<section className={styles.blocks}>
<Title as="h3">{loyaltyPage.title}</Title>
<Content content={loyaltyPage.content} />
<Blocks blocks={loyaltyPage.blocks} />
</section>
</MaxWidth>
)
@@ -41,7 +41,3 @@ export default async function LoyaltyPage({
return notFound()
}
}
function Content(content: any) {
return <></>
}

26
components/Loyalty/Blocks/index.tsx Normal file
View File

@@ -0,0 +1,26 @@
import JsonToHtml from "@/components/JsonToHtml"
import {
Blocks as BlocksType,
LoyaltyBlocksTypenameEnum,
} from "@/types/requests/loyaltyPage"
export function Blocks({ blocks }: { blocks: BlocksType[] }) {
return blocks.map((block) => {
switch (block.__typename) {
case LoyaltyBlocksTypenameEnum.LoyaltyPageBlocksCardGrid:
return <p>Cards</p>
case LoyaltyBlocksTypenameEnum.LoyaltyPageBlocksContent:
return (
<JsonToHtml
nodes={block.content.json.children}
embeds={block.content.embedded_itemsConnection.edges}
/>
)
case LoyaltyBlocksTypenameEnum.LoyaltyPageBlocksDynamicContent:
return <p>Dynamic</p>
default:
return null
}
})
}

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

@@ -1,12 +1,13 @@
import Title from "@/components/Title"
import JsonToHtml from "@/components/JsonToHtml"
import Contact from "./Contact"
import Button from "@/components/TempDesignSystem/Button"
import Link from "@/components/TempDesignSystem/Link"
import styles from "./joinLoyalty.module.css"
import Image from "@/components/Image"
import type { JoinLoyaltyContact } from "@/types/requests/loyaltyPage"
import styles from "./joinLoyalty.module.css"
export default function JoinLoyaltyContact({
block,
}: {
@@ -15,10 +16,15 @@ export default function JoinLoyaltyContact({
return (
<div className={styles.container}>
<div className={styles.wrapper}>
<JsonToHtml
embeds={block.body.embedded_itemsConnection.edges}
nodes={block.body.json.children}
{block.title && <Title level="h3">{block.title}</Title>}
<Image
alt="Scandic Friends"
className={styles.image}
height={65}
src="/_static/icons/scandic-friends.png"
width={203}
/>
{block.preamble && <p className={styles.preamble}>{block.preamble}</p>}
<Button intent="primary">
<span>{block.login_button_text}</span>
</Button>
@@ -29,9 +35,11 @@ export default function JoinLoyaltyContact({
</Link>
</div>
</div>
<section className={styles.contactContainer}>
<Title level="h5">Contact</Title>
</section>
{block.contact
? block.contact.map((contact, i) => (
<Contact key={i} contactFields={contact.contact.contact_fields} />
))
: null}
</div>
)
}

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

@@ -13,6 +13,15 @@
padding: 4rem 2rem;
}
.preamble {
font-family: var(--fira-sans);
font-size: 1.6rem;
font-weight: 400;
line-height: 2.4rem;
text-align: center;
margin: 0;
}
.logoutLink {
text-decoration: none;
color: var(--some-black-color, #2e2e2e);

2
components/MyPages/Blocks/Overview/UpcomingStays/index.tsx
View File

@@ -3,8 +3,8 @@ import { serverClient } from "@/lib/trpc/server"
import StayCard from "@/components/MyPages/Blocks/Stays/StayCard"
import EmptyUpcomingStaysBlock from "@/components/MyPages/Blocks/Stays/Upcoming/EmptyUpcomingStays"
import Title from "@/components/MyPages/Title"
import Link from "@/components/TempDesignSystem/Link"
import Title from "@/components/Title"
import styles from "./upcoming.module.css"

2
components/MyPages/Blocks/Stays/Header/index.tsx
View File

@@ -1,4 +1,4 @@
import Title from "@/components/MyPages/Title"
import Title from "@/components/Title"
import styles from "./header.module.css"

2
components/MyPages/Blocks/Stays/Previous/EmptyPreviousStays/index.tsx
View File

@@ -1,6 +1,6 @@
import { _ } from "@/lib/translation"
import Title from "@/components/MyPages/Title"
import Title from "@/components/Title"
import styles from "./emptyPreviousStays.module.css"

2
components/MyPages/Blocks/Stays/Upcoming/EmptyUpcomingStays/index.tsx
View File

@@ -2,8 +2,8 @@ import Link from "next/link"
import { _ } from "@/lib/translation"
import Title from "@/components/MyPages/Title"
import Button from "@/components/TempDesignSystem/Button"
import Title from "@/components/Title"
import styles from "./emptyUpcomingStays.module.css"

8
lib/graphql/Fragments/PageLink/AccountPageLink.graphql Normal file
View File

@@ -0,0 +1,8 @@
fragment AccountPageLink on AccountPage {
system {
locale
uid
}
title
url
}

8
lib/graphql/Fragments/PageLink/ContentPageLink.graphql Normal file
View File

@@ -0,0 +1,8 @@
fragment ContentPageLink on ContentPage {
system {
locale
uid
}
url
title
}

8
lib/graphql/Fragments/PageLink/CurrentContentPageLink.graphql Normal file
View File

@@ -0,0 +1,8 @@
fragment CurrentBlocksPageLink on CurrentBlocksPage {
system {
locale
uid
}
title
url
}

8
lib/graphql/Fragments/PageLink/LoyaltyPageLink.graphql Normal file
View File

@@ -0,0 +1,8 @@
fragment LoyaltyPageLink on LoyaltyPage {
system {
locale
uid
}
title
url
}

35
lib/graphql/Fragments/PageLinks.graphql
View File

@@ -1,35 +0,0 @@
fragment CurrentBlocksPageLink on CurrentBlocksPage {
system {
locale
uid
}
title
url
}
fragment AccountPageLink on AccountPage {
system {
locale
uid
}
title
url
}
fragment LoyaltyPageLink on LoyaltyPage {
system {
locale
uid
}
title
url
}
fragment ContentPageLink on ContentPage {
system {
locale
uid
}
url
title
}

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

@@ -1,57 +1,71 @@
#import "../Fragments/Image.graphql"
#import "../Fragments/PageLink/AccountPageLink.graphql"
#import "../Fragments/PageLink/ContentPageLink.graphql"
#import "../Fragments/PageLink/LoyaltyPageLink.graphql"
query GetLoyaltyPage($locale: String!, $url: String!) {
all_loyalty_page(where: { url: $url, locale: $locale }) {
items {
content {
... on LoyaltyPageContentLoyaltyLevels {
blocks {
... on LoyaltyPageBlocksDynamicContent {
__typename
loyalty_levels {
heading
sub_heading
level_card {
loyalty_level
dynamic_content {
title
preamble
component
link {
text
pageConnection {
edges {
node {
...ContentPageLink
...LoyaltyPageLink
}
}
}
}
}
}
... on LoyaltyPageContentCardGrid {
... on LoyaltyPageBlocksCardGrid {
__typename
card_grid {
heading
subheading
preamble
cards {
referenceConnection {
edges {
node {
... on LoyaltyPage {
system {
locale
uid
}
url
title
}
... on ContentPage {
system {
locale
uid
}
url
title
}
... on AccountPage {
system {
locale
uid
}
url
title
}
__typename
...LoyaltyPageLink
...ContentPageLink
...AccountPageLink
}
}
}
heading
subheading
preamble
}
}
}
... on LoyaltyPageBlocksContent {
__typename
content {
content {
json
embedded_itemsConnection {
edges {
node {
... on SysAsset {
title
url
dimension {
width
height
}
}
}
}
}
}
}
}
@@ -62,6 +76,7 @@ query GetLoyaltyPage($locale: String!, $url: String!) {
__typename
join_loyalty_contact {
title
preamble
contact {
... on LoyaltyPageSidebarJoinLoyaltyContactBlockContactContact {
__typename
@@ -71,17 +86,6 @@ query GetLoyaltyPage($locale: String!, $url: String!) {
}
}
login_button_text
body {
json
embedded_itemsConnection(limit: 30) {
edges {
node {
__typename
...Image
}
}
}
}
}
}
... on LoyaltyPageSidebarContent {
@@ -92,6 +96,7 @@ query GetLoyaltyPage($locale: String!, $url: String!) {
embedded_itemsConnection {
edges {
node {
__typename
...Image
}
}
@@ -108,24 +113,6 @@ query GetLoyaltyPage($locale: String!, $url: String!) {
title
}
}
seo_metadata {
description
title
imageConnection {
edges {
node {
file_size
filename
dimension {
height
width
}
url
title
}
}
}
}
}
system {
uid

4
lib/graphql/Query/NavigationMyPages.graphql
View File

@@ -1,4 +1,6 @@
#import "../Fragments/PageLinks.graphql"
#import "../Fragments/PageLink/AccountPageLink.graphql"
#import "../Fragments/PageLink/ContentPageLink.graphql"
#import "../Fragments/PageLink/LoyaltyPageLink.graphql"
query GetNavigationMyPages($locale: String!) {
all_navigation_my_pages(locale: $locale) {

BIN
public/_static/icons/scandic-friends.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.1 KiB

69
types/requests/loyaltyPage.ts
View File

@@ -26,18 +26,21 @@ type Contact = {
}
}
enum JoinLoyaltyContactTypenameEnum {
LoyaltyPageSidebarJoinLoyaltyContactBlockContactContact = "LoyaltyPageSidebarJoinLoyaltyContactBlockContactContact",
}
type JoinLoyaltyContactEnum = Typename<
Contact,
JoinLoyaltyContactTypenameEnum.LoyaltyPageSidebarJoinLoyaltyContactBlockContactContact
>
export type JoinLoyaltyContact = {
join_loyalty_contact: {
title: string
contact: Typename<
Contact,
"LoyaltyPageSidebarLoyaltyJoinContactBlockContactContact"
>
title?: string
preamble?: string
contact: JoinLoyaltyContactEnum[]
login_button_text: string
body: {
embedded_itemsConnection: Edges<Embeds>
json: RTEDocument
}
}
}
@@ -48,36 +51,52 @@ export type Sidebar =
SidebarTypenameEnum.LoyaltyPageSidebarJoinLoyaltyContact
>
enum ContentBlocks {
LoyaltyPageContentLoyaltyLevels = "LoyaltyPageContentLoyaltyLevels",
LoyaltyPageContentCardGrid = "LoyaltyPageContentCardGrid",
export enum LoyaltyBlocksTypenameEnum {
LoyaltyPageBlocksDynamicContent = "LoyaltyPageBlocksDynamicContent",
LoyaltyPageBlocksCardGrid = "LoyaltyPageBlocksCardGrid",
LoyaltyPageBlocksContent = "LoyaltyPageBlocksContent",
}
type CardGrid = {
card_grid: {
heading: string
subheading: string
preamble: string
cards: {
referenceConnection: Edges<PageLink>
heading: string
subheading: string
preamble: string
}
}
}
type LoyaltyLevels = {
loyalty_levels: {
heading: string
sub_heading?: string
level_card: {
loyalty_level: number
}[]
type Content = {
content: {
embedded_itemsConnection: Edges<Embeds>
json: RTEDocument
}
}
export type Content =
| Typename<CardGrid, ContentBlocks.LoyaltyPageContentCardGrid>
| Typename<LoyaltyLevels, ContentBlocks.LoyaltyPageContentLoyaltyLevels>
type LoyaltyComponent = "loyalty_levels" | "how_it_works" | "overview_table"
type DynamicContent = {
dynamic_content: {
title: string
preamble?: string
component: LoyaltyComponent
link: {
text?: string
page: Edges<PageLink>
}
}
}
export type Blocks =
| Typename<CardGrid, LoyaltyBlocksTypenameEnum.LoyaltyPageBlocksCardGrid>
| Typename<
DynamicContent,
LoyaltyBlocksTypenameEnum.LoyaltyPageBlocksDynamicContent
>
| Typename<Content, LoyaltyBlocksTypenameEnum.LoyaltyPageBlocksContent>
export type Breadcrumb = {
href: string
@@ -91,7 +110,7 @@ export type Breadcrumbs = {
export type LoyaltyPage = {
sidebar: Sidebar[]
content: Content[]
blocks: Blocks[]
web: {
breadcrumbs: Breadcrumbs
}