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

feat(WEB-170): edit profile view

Browse Source
This commit is contained in:
Simon Emanuelsson
2024-04-11 18:51:38 +02:00
parent 82e4d40203
commit 9396b2c3d5
114 changed files with 3642 additions and 2171 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

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

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

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

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

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

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

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

@@ -1,10 +1,3 @@
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>
</>
)
export default function Default() {
return null
}

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

@@ -0,0 +1,38 @@
"use client"
import { _ } from "@/lib/translation"
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 isPending = useProfileStore((store) => store.pending)
const isValid = useProfileStore((store) => store.valid)
return (
<>
<Button
aria-label="Cancel"
asChild
bgcolor="white"
form="edit-profile"
size="small"
type="reset"
>
<Link href={profile[params.lang]}>{_("Cancel")}</Link>
</Button>
<Button
bgcolor="quarternary"
disabled={!isValid || isPending}
form="edit-profile"
size="small"
type="submit"
weight="regular"
>
{_("Save")}
</Button>
</>
)
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,8 @@
import { serverClient } from "@/lib/trpc/server"
import EditProfile from "@/components/MyProfile/Profile/Edit"
export default async function EditProfileSlot() {
const user = await serverClient().user.get()
return <EditProfile user={user} />
}

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

@@ -0,0 +1,8 @@
import { serverClient } from "@/lib/trpc/server"
import Profile from "@/components/MyProfile/Profile"
export default async function ProfileInfo() {
const user = await serverClient().user.get()
return <Profile user={user} />
}

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

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

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

@@ -1,22 +1,3 @@
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>
)
export default function Default() {
return null
}

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

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

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

@@ -0,0 +1,15 @@
import { _ } from "@/lib/translation"
import { profileEdit } from "@/constants/routes/myPages"
import Button from "@/components/TempDesignSystem/Button"
import Link from "@/components/TempDesignSystem/Link"
import type { LangParams, PageArgs } from "@/types/params"
export default function ProfileView({ params }: PageArgs<LangParams>) {
return (
<Button asChild bgcolor="quarternary" size="small" weight="regular">
<Link href={profileEdit[params.lang]}>{_("Edit")}</Link>
</Button>
)
}

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,23 @@
.page {
display: grid;
gap: 3rem;
}
.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%);
}
.cards {
display: grid;
gap: 0.4rem;
grid-template-columns: 1fr 1fr;
}

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

@@ -1,16 +1,33 @@
type ProfileLayoutProps = React.PropsWithChildren<{
edit: React.ReactNode
verifyCode: React.ReactNode
view: React.ReactNode
}>
import MaxWidth from "@/components/MaxWidth"
export default function ProfileLayout({ children, edit, verifyCode, view }: ProfileLayoutProps) {
import styles from "./layout.module.css"
import type { ProfileLayoutProps } from "@/types/components/myPages/myProfile/layout"
export default function ProfileLayout({
communication,
creditCards,
edit,
membershipCard,
password,
profile,
view,
wishes,
}: React.PropsWithChildren<ProfileLayoutProps>) {
return (
<>
{edit}
{view}
{children}
{verifyCode}
</>
<MaxWidth className={styles.page} tag="main">
<div className={styles.btns}>
{edit}
{view}
</div>
{profile}
<section className={styles.cards}>
{communication}
{wishes}
{membershipCard}
{creditCards}
{password}
</section>
</MaxWidth>
)
}

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

@@ -1,10 +0,0 @@
.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
View File

@@ -1,36 +0,0 @@
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
View File

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