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

feat(WEB-162): final design edit profile page

Browse Source
This commit is contained in:
Simon Emanuelsson
2024-06-18 08:15:57 +02:00
committed by Christel Westerberg
parent 5f3e417593
commit d84efcbb0f
81 changed files with 1538 additions and 711 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
app/[lang]/(live)/(protected)/my-pages/profile/@communication/page.tsx
View File

@@ -11,19 +11,19 @@ export default async function CommunicationSlot() {
return (
<section className={styles.container}>
<article className={styles.content}>
<Subtitle>
<Subtitle color="black">
{formatMessage({ id: "My communication preferences" })}
</Subtitle>
<Body>
<Body color="black">
{formatMessage({
id: "Tell us what information and updates you'd like to receive, and how, by clicking the link below.",
})}
</Body>
</article>
<Link href="#" variant="icon">
<ArrowRightIcon color="red" />
<Body color="red" textTransform="underlined">
{formatMessage({ id: "Add new card" })}
<ArrowRightIcon color="burgundy" />
<Body color="burgundy" textTransform="underlined">
{formatMessage({ id: "Manage preferences" })}
</Body>
</Link>
</section>

10
app/[lang]/(live)/(protected)/my-pages/profile/@creditCards/page.tsx
View File

@@ -11,16 +11,18 @@ export default async function CreditCardSlot() {
return (
<section className={styles.container}>
<article className={styles.content}>
<Subtitle>{formatMessage({ id: "My credit cards" })}</Subtitle>
<Body>
<Subtitle color="black">
{formatMessage({ id: "My credit cards" })}
</Subtitle>
<Body color="black">
{formatMessage({
id: "Check out the credit cards saved to your profile. Pay with a saved card when signed in for a smoother web experience.",
})}
</Body>
</article>
<Link href="#" variant="icon">
<PlusCircleIcon color="red" />
<Body color="red" textTransform="underlined">
<PlusCircleIcon color="burgundy" />
<Body color="burgundy" textTransform="underlined">
{formatMessage({ id: "Add new card" })}
</Body>
</Link>

2
app/[lang]/(live)/(protected)/my-pages/profile/@profile/edit/default.tsx
View File

@@ -1,3 +1,3 @@
export default function Default() {
export default function DefaultEditProfileSlot() {
return null
}

12
app/[lang]/(live)/(protected)/my-pages/profile/@profile/edit/page.tsx
View File

@@ -1,5 +1,11 @@
import EditProfile from "@/components/MyProfile/Profile/Edit"
import { serverClient } from "@/lib/trpc/server"
export default function EditProfileSlot() {
return <EditProfile />
import Form from "@/components/Forms/Edit/Profile"
export default async function EditProfileSlot() {
const user = await serverClient().user.get({ mask: false })
if (!user) {
return null
}
return <Form user={user} />
}

7
app/[lang]/(live)/(protected)/my-pages/profile/@profile/layout.module.css Normal file
View File

@@ -0,0 +1,7 @@
.container {
background-color: var(--Scandic-Brand-Pale-Peach);
border-radius: var(--Corner-radius-Large);
display: grid;
gap: var(--Spacing-x3);
padding: var(--Spacing-x3);
}

7
app/[lang]/(live)/(protected)/my-pages/profile/@profile/layout.tsx Normal file
View File

@@ -0,0 +1,7 @@
import styles from "./layout.module.css"
export default function ProfileSlotLayout({
children,
}: React.PropsWithChildren) {
return <section className={styles.container}>{children}</section>
}

19
app/[lang]/(live)/(protected)/my-pages/profile/@profile/page.module.css
View File

@@ -1,22 +1,3 @@
.container {
background-color: var(--Scandic-Brand-Warm-White);
border-radius: var(--Corner-radius-Large);
display: grid;
gap: var(--Spacing-x3);
padding: var(--Spacing-x3);
}
.header {
align-items: center;
display: flex;
gap: var(--Spacing-x2);
justify-content: space-between;
}
button.btn {
border: 1px solid var(--Base-Border-Subtle);
}
.profile {
display: flex;
gap: var(--Spacing-x2);

29
app/[lang]/(live)/(protected)/my-pages/profile/@profile/page.tsx
View File

@@ -1,4 +1,4 @@
// import { dt } from "@/lib/dt"
import { profileEdit } from "@/constants/routes/myPages"
import { serverClient } from "@/lib/trpc/server"
import {
@@ -8,36 +8,41 @@ import {
LockIcon,
PhoneIcon,
} from "@/components/Icons"
import Header from "@/components/Profile/Header"
import Button from "@/components/TempDesignSystem/Button"
import Divider from "@/components/TempDesignSystem/Divider"
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 styles from "./page.module.css"
export default async function Profile() {
import type { LangParams, PageArgs } from "@/types/params"
export default async function Profile({ params }: PageArgs<LangParams>) {
const { formatMessage } = await getIntl()
const user = await serverClient().user.get()
if (!user) {
return null
}
// const dob = dt(user.dateOfBirth).format("DD/MM/YYYY")
return (
<section className={styles.container}>
<header className={styles.header}>
<>
<Header>
<hgroup>
<Title as="h4" color="red" level="h1">
{user.name}
<Title as="h4" color="peach80" level="h1">
{formatMessage({ id: "Welcome" })}
</Title>
<Title as="h4" color="burgundy" level="h2">
{user.dateOfBirth}
{user.name}
</Title>
</hgroup>
<Button className={styles.btn} size="large" theme="primaryStrong">
{formatMessage({ id: "Edit profile" })}
<Button asChild intent="secondary" size="small" theme="base">
<Link color="none" href={profileEdit[params.lang]}>
{formatMessage({ id: "Edit profile" })}
</Link>
</Button>
</header>
</Header>
<Divider color="burgundy" opacity={8} />
<section className={styles.profile}>
<article className={styles.info}>
@@ -91,6 +96,6 @@ export default async function Profile() {
</div>
</aside>
</section>
</section>
</>
)
}

5
app/[lang]/(live)/(protected)/my-pages/profile/edit/page.tsx Normal file
View File

@@ -0,0 +1,5 @@
import "../profileLayout.css"
export default function EditProfilePage() {
return null
}

17
app/[lang]/(live)/@languageSwitcher/[...paths]/page.tsx
View File

@@ -1,17 +0,0 @@
import { serverClient } from "@/lib/trpc/server"
import Desktop from "@/components/Current/Header/LanguageSwitcher/Desktop"
import Mobile from "@/components/Current/Header/LanguageSwitcher/Mobile"
export default async function LanguageSwitcher() {
const data = await serverClient().contentstack.languageSwitcher.get()
if (!data) {
return null
}
return (
<>
<Desktop currentLanguage={data.lang} urls={data.urls} />
<Mobile currentLanguage={data.lang} urls={data.urls} />
</>
)
}

3
app/[lang]/(live)/@languageSwitcher/default.tsx
View File

@@ -1,3 +0,0 @@
export default function DefaultLanguageSwitcher() {
return null
}

2
app/api/web/auth/[...nextauth]/route.ts
View File

@@ -1,3 +1 @@
export { GET, POST } from "@/auth"
export const runtime = "edge"

8
app/globals.css
View File

@@ -72,14 +72,6 @@
src: url(/_static/fonts/fira-sans/medium.woff2) format("woff2");
}
@font-face {
font-display: swap;
font-family: "fira sans";
font-style: normal;
font-weight: 500;
src: url(/_static/fonts/fira-sans/Medium.woff2) format("woff2");
}
@font-face {
font-display: swap;
font-family: "fira sans";