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

feat(WEB-154): my profile view

Browse Source
This commit is contained in:
Simon Emanuelsson
2024-04-05 08:28:20 +02:00
parent 3b05b9f205
commit 82e4d40203
95 changed files with 1239 additions and 196 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
app/[lang]/(live)/(protected)/my-pages/_constants.ts
View File

@@ -1,3 +1,20 @@
export const breadcrumbs = {
"/my-pages": [
{
title: "My Pages"
}
],
"/my-pages/profile": [
{
href: "/my-pages",
title: "My Pages"
},
{
title: "My Profile",
},
],
}
export const challenges = {
journeys: [
{
@@ -84,3 +101,14 @@ export const stays = [
hotel: "Scandic Oslo City",
},
]
export const extendedUser = {
journeys: challenges.journeys,
membershipId: 30812404844732,
nights: 14,
points: 20720,
qualifyingPoints: 5000,
shortcuts,
stays,
victories: challenges.victories,
}

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

@@ -1,31 +1,28 @@
.page {
.layout {
--max-width: 101.4rem;
--header-height: 4.5rem;
display: grid;
font-family: var(--ff-fira-sans);
grid-template-rows: auto 1fr;
grid-template-rows: var(--header-height) auto 1fr;
min-height: 100dvh;
}
.content {
display: grid;
padding: 0 0 17.5rem;
padding-bottom: 7.7rem;
padding-left: 0;
padding-right: 0;
padding-top: 0;
position: relative;
}
@media screen and (min-width: 950px) {
.page {
gap: 5.8rem;
}
.content {
gap: 10rem;
grid-template-columns: 25rem 1fr;
padding-bottom: 17.5rem;
padding-left: 2.4rem;
padding-right: 2.4rem;
padding-top: 5.8rem;
}
}
}

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

@@ -1,5 +1,7 @@
import { firaMono, firaSans } from "@/app/[lang]/(live)/fonts"
import { breadcrumbs } from "./_constants"
import Breadcrumbs from "@/components/MyPages/Breadcrumbs"
import Header from "@/components/MyPages/Header"
import Sidebar from "@/components/MyPages/Sidebar"
@@ -54,8 +56,11 @@ export default async function MyPagesLayout({
const menuItems = mapMenuItems(navigation.items)
return (
<div className={`${firaMono.variable} ${firaSans.variable} ${styles.page}`}>
<div
className={`${firaMono.variable} ${firaSans.variable} ${styles.layout}`}
>
<Header lang={params.lang} />
<Breadcrumbs breadcrumbs={breadcrumbs} lang={params.lang} />
<div className={styles.content}>
<Sidebar menuItems={menuItems} />
{children}

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

@@ -1,7 +1,6 @@
.blocks {
display: grid;
gap: 4.2rem;
max-width: var(--max-width);
padding-left: 2rem;
padding-right: 2rem;
}
@@ -12,4 +11,4 @@
padding-left: 0;
padding-right: 0;
}
}
}

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

@@ -1,7 +1,8 @@
import { serverClient } from "@/lib/trpc/server"
import { challenges, shortcuts, stays } from "./_constants"
import { extendedUser } from "./_constants"
import MaxWidth from "@/components/MaxWidth"
import Overview from "@/components/MyPages/Blocks/Overview"
import Shortcuts from "@/components/MyPages/Blocks/Shortcuts"
import UpcomingStays from "@/components/MyPages/Blocks/UpcomingStays"
@@ -14,17 +15,10 @@ export default async function MyPage({ params }: PageArgs<LangParams>) {
const data = await serverClient().user.get()
const user = {
...data,
journeys: challenges.journeys,
membershipId: 30812404844732,
nights: 14,
points: 20720,
qualifyingPoints: 5000,
shortcuts,
stays,
victories: challenges.victories,
...extendedUser,
}
return (
<main className={styles.blocks}>
<MaxWidth className={styles.blocks} tag="main">
<Overview user={user} />
<UpcomingStays lang={params.lang} stays={user.stays} />
<Shortcuts
@@ -32,6 +26,6 @@ export default async function MyPage({ params }: PageArgs<LangParams>) {
title="Handy Shortcuts"
subtitle="The community at your fingertips"
/>
</main>
</MaxWidth>
)
}

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

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

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

@@ -0,0 +1,10 @@
import Button from "@/components/TempDesignSystem/Button";
export default function EditProfile() {
return (
<>
<Button form="edit-profile" type="reset">Cancel</Button>
<Button form="edit-profile" type="submit">Save</Button>
</>
)
}

11
app/[lang]/(live)/(protected)/my-pages/profile/@verifyCode/(.)verify/page.tsx Normal file
View File

@@ -0,0 +1,11 @@
import Modal from "@/components/Modal";
export default function VerifyCode() {
return (
<Modal>
<Modal.Header>
<Modal.Title>Verify Code</Modal.Title>
</Modal.Header>
</Modal>
)
}

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

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

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

@@ -0,0 +1,22 @@
import Button from "@/components/TempDesignSystem/Button";
import Link from "@/components/TempDesignSystem/Link";
import styles from "./view.module.css"
import type { LangParams, PageArgs } from "@/types/params";
export default function ProfileView({ params }: PageArgs<LangParams>) {
return (
<Button
asChild
bgcolor="quarternary"
className={styles.btn}
size="small"
weight="regular"
>
<Link href={`/${params.lang}/my-pages/profile/verify`}>
Edit
</Link>
</Button>
)
}

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

@@ -0,0 +1,3 @@
.btn {
position: absolute;
}

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

@@ -0,0 +1,16 @@
type ProfileLayoutProps = React.PropsWithChildren<{
edit: React.ReactNode
verifyCode: React.ReactNode
view: React.ReactNode
}>
export default function ProfileLayout({ children, edit, verifyCode, view }: ProfileLayoutProps) {
return (
<>
{edit}
{view}
{children}
{verifyCode}
</>
)
}

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

@@ -0,0 +1,10 @@
.page {
display: grid;
gap: 3rem;
}
.cards {
display: grid;
gap: 0.4rem;
grid-template-columns: 1fr 1fr;
}

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

@@ -0,0 +1,36 @@
import { serverClient } from "@/lib/trpc/server";
import { extendedUser } from "../_constants";
import CommunicationPreferences from "@/components/MyProfile/CommunicationPreferences";
import CreditCards from "@/components/MyProfile/CreditCards";
import MaxWidth from "@/components/MaxWidth";
import MembershipCard from "@/components/MyProfile/MembershipCard";
import Password from "@/components/MyProfile/Password";
import Profile from "@/components/MyProfile/Profile";
import Wishes from "@/components/MyProfile/Wishes";
import styles from "./page.module.css"
import Modal from "@/components/Modal";
export default async function MyProfile() {
const data = await serverClient().user.get()
const user = {
...data,
...extendedUser,
}
return (
<MaxWidth className={styles.page} tag="main">
<Modal>
<h1>HALLÅ ELLER!?!</h1>
</Modal>
<Profile user={user} />
<section className={styles.cards}>
<CommunicationPreferences />
<Wishes />
<MembershipCard />
<CreditCards />
<Password />
</section>
</MaxWidth>
)
}

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

@@ -0,0 +1,9 @@
export default function VerifyPage() {
return (
<section>
<header>
<h1>Verify that code already!</h1>
</header>
</section>
)
}