feat(SW-285): Add support for sidebar
This commit is contained in:
Chuma McPhoy
@@ -0,0 +1,5 @@
|
||||
.link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--Spacing-x1);
|
||||
}
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
@@ -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
33
components/Content/Sidebar/JoinLoyalty/Contact/index.tsx
Normal 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
73
components/Content/Sidebar/JoinLoyalty/index.tsx
Normal 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>
|
||||
)
|
||||
}
|
||||
@@ -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
13
components/Content/Sidebar/MyPagesNavigation/index.tsx
Normal 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
52
components/Content/Sidebar/index.tsx
Normal 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
15
components/Content/Sidebar/sidebar.module.css
Normal 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);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user