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

feat(WEB-162): final design for my profile page

Browse Source
This commit is contained in:
Simon Emanuelsson
2024-06-07 10:36:23 +02:00
committed by Christel Westerberg
parent a7b04df7b6
commit 5f3e417593
96 changed files with 802 additions and 494 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/[lang]/(live)/(protected)/my-pages/layout.module.css
View File

@@ -1,5 +1,5 @@
.layout {
background-color: var(--Scandic-Brand-Pale-Peach);
background-color: var(--Scandic-Brand-Warm-White);
display: grid;
font-family: var(--typography-Body-Regular-fontFamily);
gap: var(--Spacing-x3);

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

@@ -1,5 +1 @@
import CommunicationPreferences from "@/components/MyProfile/CommunicationPreferences"
export default function Communication() {
return <CommunicationPreferences />
}
export { default } from "../page"

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

@@ -0,0 +1,10 @@
.container {
display: grid;
gap: var(--Spacing-x3);
max-width: 510px;
}
.content {
display: grid;
gap: var(--Spacing-x1);
}

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

@@ -1,5 +1,31 @@
import CommunicationPreferences from "@/components/MyProfile/CommunicationPreferences"
import { ArrowRightIcon } from "@/components/Icons"
import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import { getIntl } from "@/i18n"
export default function Communication() {
return <CommunicationPreferences />
import styles from "./page.module.css"
export default async function CommunicationSlot() {
const { formatMessage } = await getIntl()
return (
<section className={styles.container}>
<article className={styles.content}>
<Subtitle>
{formatMessage({ id: "My communication preferences" })}
</Subtitle>
<Body>
{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" })}
</Body>
</Link>
</section>
)
}

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

@@ -1,5 +1 @@
import CreditCards from "@/components/MyProfile/CreditCards"
export default function CreditCardSlot() {
return <CreditCards />
}
export { default } from "../page"

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

@@ -0,0 +1,10 @@
.container {
display: grid;
gap: var(--Spacing-x3);
max-width: 510px;
}
.content {
display: grid;
gap: var(--Spacing-x1);
}

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

@@ -1,5 +1,29 @@
import CreditCards from "@/components/MyProfile/CreditCards"
import { PlusCircleIcon } from "@/components/Icons"
import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import { getIntl } from "@/i18n"
export default function CreditCardSlot() {
return <CreditCards />
import styles from "./page.module.css"
export default async function CreditCardSlot() {
const { formatMessage } = await getIntl()
return (
<section className={styles.container}>
<article className={styles.content}>
<Subtitle>{formatMessage({ id: "My credit cards" })}</Subtitle>
<Body>
{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">
{formatMessage({ id: "Add new card" })}
</Body>
</Link>
</section>
)
}

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

@@ -1,41 +0,0 @@
"use client"
import { useIntl } from "react-intl"
import { profile } from "@/constants/routes/myPages"
import { useProfileStore } from "@/stores/edit-profile"
import Button from "@/components/TempDesignSystem/Button"
import Link from "@/components/TempDesignSystem/Link"
import type { LangParams, PageArgs } from "@/types/params"
export default function EditProfile({ params }: PageArgs<LangParams>) {
const { formatMessage } = useIntl()
const isPending = useProfileStore((store) => store.pending)
const isValid = useProfileStore((store) => store.valid)
const cancel = formatMessage({ id: "Cancel" })
const save = formatMessage({ id: "Save" })
return (
<>
<Button
aria-label={cancel}
asChild
form="edit-profile"
size="small"
type="reset"
>
<Link href={profile[params.lang]}>{cancel}</Link>
</Button>
<Button
aria-label={save}
disabled={!isValid || isPending}
form="edit-profile"
size="small"
type="submit"
>
{save}
</Button>
</>
)
}

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

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

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

@@ -1,5 +0,0 @@
import MembershipCard from "@/components/MyProfile/MembershipCard"
export default function MembershipCardSlot() {
return <MembershipCard />
}

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

@@ -1,5 +0,0 @@
import MembershipCard from "@/components/MyProfile/MembershipCard"
export default function MembershipCardSlot() {
return <MembershipCard />
}

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

@@ -1,5 +0,0 @@
import Password from "@/components/MyProfile/Password"
export default function PasswordSlot() {
return <Password />
}

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

@@ -1,5 +0,0 @@
import Password from "@/components/MyProfile/Password"
export default function PasswordSlot() {
return <Password />
}

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

@@ -0,0 +1,36 @@
.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);
justify-content: space-between;
}
.info {
display: grid;
gap: var(--Spacing-x-one-and-half) var(--Spacing-x7);
grid-template-columns: auto auto;
}
.item {
display: grid;
gap: var(--Spacing-x1);
grid-template-columns: auto auto 1fr;
}

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

@@ -1,5 +1,96 @@
import Profile from "@/components/MyProfile/Profile"
// import { dt } from "@/lib/dt"
import { serverClient } from "@/lib/trpc/server"
export default function ProfileInfo() {
return <Profile />
import {
EmailIcon,
GlobeIcon,
LocationIcon,
LockIcon,
PhoneIcon,
} from "@/components/Icons"
import Button from "@/components/TempDesignSystem/Button"
import Divider from "@/components/TempDesignSystem/Divider"
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() {
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}>
<hgroup>
<Title as="h4" color="red" level="h1">
{user.name}
</Title>
<Title as="h4" color="burgundy" level="h2">
{user.dateOfBirth}
</Title>
</hgroup>
<Button className={styles.btn} size="large" theme="primaryStrong">
{formatMessage({ id: "Edit profile" })}
</Button>
</header>
<Divider color="burgundy" opacity={8} />
<section className={styles.profile}>
<article className={styles.info}>
<div className={styles.item}>
<LocationIcon color="burgundy" />
<Body color="burgundy" textTransform="bold">
{formatMessage({ id: "Address" })}
</Body>
<Body color="burgundy">
{user.address.streetAddress
? `${user.address.streetAddress}, `
: ""}
{user.address.city ? `${user.address.city}, ` : ""}
{user.address.country ? `${user.address.country}` : ""}
{!user.address.streetAddress &&
!user.address.city &&
!user.address.country
? "N/A"
: null}
</Body>
</div>
<div className={styles.item}>
<EmailIcon color="burgundy" />
<Body color="burgundy" textTransform="bold">
{formatMessage({ id: "Email" })}
</Body>
<Body color="burgundy">{user.email}</Body>
</div>
<div className={styles.item}>
<PhoneIcon color="burgundy" />
<Body color="burgundy" textTransform="bold">
{formatMessage({ id: "Phone number" })}
</Body>
<Body color="burgundy">{user.phoneNumber}</Body>
</div>
<div className={styles.item}>
<GlobeIcon color="burgundy" />
<Body color="burgundy" textTransform="bold">
{formatMessage({ id: "Language" })}
</Body>
<Body color="burgundy">{user.language}</Body>
</div>
</article>
<aside>
<div className={styles.item}>
<LockIcon color="burgundy" />
<Body color="burgundy" textTransform="bold">
{formatMessage({ id: "Password" })}
</Body>
<Body color="burgundy">**********</Body>
</div>
</aside>
</section>
</section>
)
}

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

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

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

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

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

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

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

@@ -1,18 +0,0 @@
import { profileEdit } from "@/constants/routes/myPages"
import Button from "@/components/TempDesignSystem/Button"
import Link from "@/components/TempDesignSystem/Link"
import { getIntl } from "@/i18n"
import type { LangParams, PageArgs } from "@/types/params"
export default async function ProfileView({ params }: PageArgs<LangParams>) {
const { formatMessage } = await getIntl()
return (
<Button asChild size="small">
<Link href={profileEdit[params.lang]}>
{formatMessage({ id: "Edit" })}
</Link>
</Button>
)
}

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

@@ -1,5 +0,0 @@
import Wishes from "@/components/MyProfile/Wishes"
export default function WishesSlot() {
return <Wishes />
}

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

@@ -1,5 +0,0 @@
import Wishes from "@/components/MyProfile/Wishes"
export default function WishesSlot() {
return <Wishes />
}

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

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

25
app/[lang]/(live)/(protected)/my-pages/profile/layout.tsx
View File

@@ -1,4 +1,4 @@
import MaxWidth from "@/components/MaxWidth"
import Divider from "@/components/TempDesignSystem/Divider"
import type { ProfileLayoutProps } from "@/types/components/myPages/myProfile/layout"
@@ -6,28 +6,17 @@ export default function ProfileLayout({
children,
communication,
creditCards,
edit,
membershipCard,
password,
profile,
view,
wishes,
}: React.PropsWithChildren<ProfileLayoutProps>) {
return (
<MaxWidth className="profile-page" tag="main">
<div className="profile-btns">
{edit}
{view}
</div>
{profile}
<main>
{children}
<section className="profile-cards">
{communication}
{wishes}
{membershipCard}
<section className="profile-layout">
{profile}
{creditCards}
{password}
<Divider color="burgundy" opacity={8} />
{communication}
</section>
</MaxWidth>
</main>
)
}

26
app/[lang]/(live)/(protected)/my-pages/profile/profileLayout.css
View File

@@ -2,26 +2,10 @@
* Due to css import issues with parallell routes we are forced to
* use a regular css file and import it in the page.tsx
*/
.profile-page {
.profile-layout {
background-color: var(--Main-Grey-White);
border-radius: var(--Corner-radius-xLarge);
display: grid;
gap: 3rem;
}
.profile-btns {
align-items: center;
display: flex;
gap: 1rem;
justify-content: flex-end;
position: absolute;
right: 0;
/* Creates the 16px gap from design */
top: -1.6rem;
/* Moves itself to top of container to avoid calc */
transform: translateY(-100%);
}
.profile-cards {
display: grid;
gap: 0.4rem;
grid-template-columns: 1fr 1fr;
gap: var(--Spacing-x4);
padding: var(--Spacing-x3);
}

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

@@ -0,0 +1,17 @@
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 Normal file
View File

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