From 9396b2c3d59c6d2445157d44f7bd70b6fe02cb6a Mon Sep 17 00:00:00 2001 From: Simon Emanuelsson Date: Thu, 11 Apr 2024 18:51:38 +0200 Subject: [PATCH] feat(WEB-170): edit profile view --- actions/editProfile.ts | 44 + .../(live)/(protected)/my-pages/_constants.ts | 104 +- .../(live)/(protected)/my-pages/layout.tsx | 44 +- .../(live)/(protected)/my-pages/page.tsx | 13 +- .../default.tsx | 2 +- .../my-pages/profile/@communication/page.tsx | 5 + .../my-pages/profile/@creditCards/default.tsx | 3 + .../my-pages/profile/@creditCards/page.tsx | 5 + .../my-pages/profile/@edit/default.tsx | 2 +- .../my-pages/profile/@edit/edit/default.tsx | 11 +- .../my-pages/profile/@edit/edit/page.tsx | 38 + .../my-pages/profile/@edit/page.tsx | 3 + .../profile/@membershipCard/default.tsx | 3 + .../my-pages/profile/@membershipCard/page.tsx | 5 + .../my-pages/profile/@password/default.tsx | 3 + .../my-pages/profile/@password/page.tsx | 5 + .../my-pages/profile/@profile/default.tsx | 3 + .../profile/@profile/edit/default.tsx | 3 + .../my-pages/profile/@profile/edit/page.tsx | 8 + .../my-pages/profile/@profile/page.tsx | 8 + .../profile/@verifyCode/(.)verify/page.tsx | 11 - .../my-pages/profile/@view/default.tsx | 23 +- .../my-pages/profile/@view/edit/default.tsx | 3 + .../my-pages/profile/@view/page.tsx | 15 + .../my-pages/profile/@view/view.module.css | 3 - .../my-pages/profile/@wishes/default.tsx | 3 + .../my-pages/profile/@wishes/page.tsx | 5 + .../my-pages/profile/edit/page.tsx | 3 + .../my-pages/profile/layout.module.css | 23 + .../(protected)/my-pages/profile/layout.tsx | 41 +- .../my-pages/profile/page.module.css | 10 - .../(protected)/my-pages/profile/page.tsx | 36 - .../my-pages/profile/verify/page.tsx | 9 - components/Icons/Calendar.tsx | 14 + components/Icons/ChevronDown.tsx | 17 + components/Icons/Email.tsx | 14 + components/Icons/House.tsx | 9 + components/Icons/Phone.tsx | 9 + components/Icons/index.tsx | 5 + components/MaxWidth/maxWidth.module.css | 3 +- components/Modal/Header/header.module.css | 1 - components/Modal/Header/index.tsx | 9 - components/Modal/Modal/index.tsx | 22 - components/Modal/Modal/modal.module.css | 11 - components/Modal/Overlay/index.tsx | 44 - components/Modal/Overlay/overlay.module.css | 9 - components/Modal/Portal.tsx | 9 - components/Modal/Title/index.tsx | 9 - components/Modal/Title/title.module.css | 1 - components/Modal/index.tsx | 20 - .../Blocks/UpcomingStays/Stay/index.tsx | 2 +- .../MyPages/Blocks/UpcomingStays/index.tsx | 2 +- components/MyPages/Sidebar/Client.tsx | 46 - components/MyPages/Sidebar/helpers.ts | 30 + components/MyPages/Sidebar/index.tsx | 40 +- components/MyPages/Sidebar/sidebar.module.css | 3 +- .../lai.module.css => Field/field.module.css} | 6 +- components/MyProfile/Field/index.tsx | 26 + components/MyProfile/LabelAndIcon/index.tsx | 25 - components/MyProfile/Profile/Container.tsx | 32 + .../MyProfile/Profile/Edit/Form/Content.tsx | 126 + .../Profile/Edit/Form/form.module.css | 5 + .../MyProfile/Profile/Edit/Form/index.tsx | 61 + .../MyProfile/Profile/Edit/Form/schema.ts | 29 + components/MyProfile/Profile/Edit/index.tsx | 12 + components/MyProfile/Profile/index.tsx | 156 +- .../TempDesignSystem/Button/button.module.css | 24 +- components/TempDesignSystem/Button/index.tsx | 3 +- .../TempDesignSystem/Button/variants.ts | 4 + .../Form/Country/countries.ts | 256 ++ .../Form/Country/country.module.css | 61 + .../TempDesignSystem/Form/Country/country.ts | 7 + .../TempDesignSystem/Form/Country/index.tsx | 109 + .../Form/Date/Select/index.tsx | 82 + .../Form/Date/Select/select.module.css | 54 + .../Form/Date/Select/select.ts | 16 + .../Form/Date/date.module.css | 30 + components/TempDesignSystem/Form/Date/date.ts | 9 + .../TempDesignSystem/Form/Date/index.tsx | 120 + .../Form/ErrorMessage/error.module.css | 8 + .../Form/ErrorMessage/errorMessage.ts | 18 + .../Form/ErrorMessage/index.tsx | 18 + .../TempDesignSystem/Form/Input/index.tsx | 44 + .../Form/Input/input.module.css | 13 + .../TempDesignSystem/Form/Input/input.ts | 9 + .../TempDesignSystem/Form/Phone/index.tsx | 97 + .../Form/Phone/phone.module.css | 25 + .../TempDesignSystem/Form/Phone/phone.ts | 7 + .../Form/SelectChevron/chevron.module.css | 7 + .../Form/SelectChevron/index.tsx | 11 + components/TempDesignSystem/Link/index.tsx | 7 +- constants/myPages.js | 17 - constants/myPages.ts | 19 - constants/routes/authRequired.ts | 5 +- constants/routes/myPages.js | 23 +- env/server.ts | 1 + lib/graphql/Fragments/PageLinks.graphql | 3 + lib/translation.ts | 3 + next.config.js | 43 +- package-lock.json | 2970 +++++++++-------- package.json | 8 +- public/chevron-down.svg | 8 + routes/protected.ts | 16 - server/routers/user/query.ts | 17 +- server/routers/user/temp.ts | 101 + stores/edit-profile.ts | 23 + types/components/icon.ts | 4 + types/components/myPages/myProfile/edit.ts | 34 + types/components/myPages/myProfile/layout.ts | 10 + types/requests/myPages/navigation.ts | 64 +- types/requests/utils/typename.ts | 4 + types/user.ts | 4 + utils/phoneValidator.ts | 87 + utils/rangeArray.ts | 6 + 114 files changed, 3642 insertions(+), 2171 deletions(-) create mode 100644 actions/editProfile.ts rename app/[lang]/(live)/(protected)/my-pages/profile/{@verifyCode => @communication}/default.tsx (96%) create mode 100644 app/[lang]/(live)/(protected)/my-pages/profile/@communication/page.tsx create mode 100644 app/[lang]/(live)/(protected)/my-pages/profile/@creditCards/default.tsx create mode 100644 app/[lang]/(live)/(protected)/my-pages/profile/@creditCards/page.tsx create mode 100644 app/[lang]/(live)/(protected)/my-pages/profile/@edit/edit/page.tsx create mode 100644 app/[lang]/(live)/(protected)/my-pages/profile/@edit/page.tsx create mode 100644 app/[lang]/(live)/(protected)/my-pages/profile/@membershipCard/default.tsx create mode 100644 app/[lang]/(live)/(protected)/my-pages/profile/@membershipCard/page.tsx create mode 100644 app/[lang]/(live)/(protected)/my-pages/profile/@password/default.tsx create mode 100644 app/[lang]/(live)/(protected)/my-pages/profile/@password/page.tsx create mode 100644 app/[lang]/(live)/(protected)/my-pages/profile/@profile/default.tsx create mode 100644 app/[lang]/(live)/(protected)/my-pages/profile/@profile/edit/default.tsx create mode 100644 app/[lang]/(live)/(protected)/my-pages/profile/@profile/edit/page.tsx create mode 100644 app/[lang]/(live)/(protected)/my-pages/profile/@profile/page.tsx delete mode 100644 app/[lang]/(live)/(protected)/my-pages/profile/@verifyCode/(.)verify/page.tsx create mode 100644 app/[lang]/(live)/(protected)/my-pages/profile/@view/edit/default.tsx create mode 100644 app/[lang]/(live)/(protected)/my-pages/profile/@view/page.tsx delete mode 100644 app/[lang]/(live)/(protected)/my-pages/profile/@view/view.module.css create mode 100644 app/[lang]/(live)/(protected)/my-pages/profile/@wishes/default.tsx create mode 100644 app/[lang]/(live)/(protected)/my-pages/profile/@wishes/page.tsx create mode 100644 app/[lang]/(live)/(protected)/my-pages/profile/edit/page.tsx create mode 100644 app/[lang]/(live)/(protected)/my-pages/profile/layout.module.css delete mode 100644 app/[lang]/(live)/(protected)/my-pages/profile/page.module.css delete mode 100644 app/[lang]/(live)/(protected)/my-pages/profile/page.tsx delete mode 100644 app/[lang]/(live)/(protected)/my-pages/profile/verify/page.tsx create mode 100644 components/Icons/Calendar.tsx create mode 100644 components/Icons/ChevronDown.tsx create mode 100644 components/Icons/Email.tsx create mode 100644 components/Icons/House.tsx create mode 100644 components/Icons/Phone.tsx create mode 100644 components/Icons/index.tsx delete mode 100644 components/Modal/Header/header.module.css delete mode 100644 components/Modal/Header/index.tsx delete mode 100644 components/Modal/Modal/index.tsx delete mode 100644 components/Modal/Modal/modal.module.css delete mode 100644 components/Modal/Overlay/index.tsx delete mode 100644 components/Modal/Overlay/overlay.module.css delete mode 100644 components/Modal/Portal.tsx delete mode 100644 components/Modal/Title/index.tsx delete mode 100644 components/Modal/Title/title.module.css delete mode 100644 components/Modal/index.tsx delete mode 100644 components/MyPages/Sidebar/Client.tsx create mode 100644 components/MyPages/Sidebar/helpers.ts rename components/MyProfile/{LabelAndIcon/lai.module.css => Field/field.module.css} (87%) create mode 100644 components/MyProfile/Field/index.tsx delete mode 100644 components/MyProfile/LabelAndIcon/index.tsx create mode 100644 components/MyProfile/Profile/Container.tsx create mode 100644 components/MyProfile/Profile/Edit/Form/Content.tsx create mode 100644 components/MyProfile/Profile/Edit/Form/form.module.css create mode 100644 components/MyProfile/Profile/Edit/Form/index.tsx create mode 100644 components/MyProfile/Profile/Edit/Form/schema.ts create mode 100644 components/MyProfile/Profile/Edit/index.tsx create mode 100644 components/TempDesignSystem/Form/Country/countries.ts create mode 100644 components/TempDesignSystem/Form/Country/country.module.css create mode 100644 components/TempDesignSystem/Form/Country/country.ts create mode 100644 components/TempDesignSystem/Form/Country/index.tsx create mode 100644 components/TempDesignSystem/Form/Date/Select/index.tsx create mode 100644 components/TempDesignSystem/Form/Date/Select/select.module.css create mode 100644 components/TempDesignSystem/Form/Date/Select/select.ts create mode 100644 components/TempDesignSystem/Form/Date/date.module.css create mode 100644 components/TempDesignSystem/Form/Date/date.ts create mode 100644 components/TempDesignSystem/Form/Date/index.tsx create mode 100644 components/TempDesignSystem/Form/ErrorMessage/error.module.css create mode 100644 components/TempDesignSystem/Form/ErrorMessage/errorMessage.ts create mode 100644 components/TempDesignSystem/Form/ErrorMessage/index.tsx create mode 100644 components/TempDesignSystem/Form/Input/index.tsx create mode 100644 components/TempDesignSystem/Form/Input/input.module.css create mode 100644 components/TempDesignSystem/Form/Input/input.ts create mode 100644 components/TempDesignSystem/Form/Phone/index.tsx create mode 100644 components/TempDesignSystem/Form/Phone/phone.module.css create mode 100644 components/TempDesignSystem/Form/Phone/phone.ts create mode 100644 components/TempDesignSystem/Form/SelectChevron/chevron.module.css create mode 100644 components/TempDesignSystem/Form/SelectChevron/index.tsx delete mode 100644 constants/myPages.js delete mode 100644 constants/myPages.ts create mode 100644 lib/translation.ts create mode 100644 public/chevron-down.svg delete mode 100644 routes/protected.ts create mode 100644 server/routers/user/temp.ts create mode 100644 stores/edit-profile.ts create mode 100644 types/components/icon.ts create mode 100644 types/components/myPages/myProfile/edit.ts create mode 100644 types/components/myPages/myProfile/layout.ts create mode 100644 utils/phoneValidator.ts create mode 100644 utils/rangeArray.ts diff --git a/actions/editProfile.ts b/actions/editProfile.ts new file mode 100644 index 000000000..812c9a6e5 --- /dev/null +++ b/actions/editProfile.ts @@ -0,0 +1,44 @@ +"use server" + +import { editProfileSchema } from "@/components/MyProfile/Profile/Edit/Form/schema" +import { ZodError } from "zod" + +import { type State, Status } from "@/types/components/myPages/myProfile/edit" + +export async function editProfile(_prevState: State, values: FormData) { + try { + const data = editProfileSchema.parse(Object.fromEntries(values.entries())) + + /** + * TODO: Update profile data when endpoint from + * API team is ready + */ + + console.info(`EditProfileSchema.Parse Data`) + console.log(data) + + return { + message: "All good!", + status: Status.success, + } + } catch (error) { + if (error instanceof ZodError) { + return { + errors: error.issues.map((issue) => ({ + message: `Server validation: ${issue.message}`, + path: issue.path.join("."), + })), + message: "Invalid form data", + status: Status.error, + } + } + + console.info(`EditProfile Server Action Error`) + console.error(error) + + return { + message: "Something went wrong. Please try again.", + status: Status.error, + } + } +} diff --git a/app/[lang]/(live)/(protected)/my-pages/_constants.ts b/app/[lang]/(live)/(protected)/my-pages/_constants.ts index bb3b03dc8..1ee770976 100644 --- a/app/[lang]/(live)/(protected)/my-pages/_constants.ts +++ b/app/[lang]/(live)/(protected)/my-pages/_constants.ts @@ -1,114 +1,16 @@ export const breadcrumbs = { "/my-pages": [ { - title: "My Pages" - } + title: "My Pages", + }, ], "/my-pages/profile": [ { href: "/my-pages", - title: "My Pages" + title: "My Pages", }, { title: "My Profile", }, ], } - -export const challenges = { - journeys: [ - { - tag: "After work queen", - title: "Try 3 Hotel Bars, Pocket 200 Points", - }, - { - tag: "Dine & Shine", - title: "Visit 3 scandic Restaurants, Earn 150 Points", - }, - ], - victories: [ - { - tag: "Capital Explorer", - title: "Stay in 3 scandic hotels, in three Capitals, Gain 2000 Points", - }, - { - tag: "Friends Feast", - title: "Dine with 3 Buddies, Snag a Free Breakfast", - }, - { - tag: "Eco Warrior", - title: "Choose Green, Get 500 Points", - }, - ], -} - -export const shortcuts = [ - { - href: "#", - title: "My Benefit", - }, - { - href: "#", - title: "Program overview", - }, - // { - // href: "#", - // title: "Scandic Friends shop", - // }, - // { - // href: "#", - // title: "Fire and safety", - // }, - // { - // href: "#", - // title: "Our sustainability work", - // }, - // { - // href: "#", - // title: "How you earn points", - // }, - // { - // href: "#", - // title: "How you use points", - // }, - // { - // href: "#", - // title: "Missing points", - // }, - // { - // href: "#", - // title: "Our term and conditions", - // }, -] - -export const stays = [ - { - dateArrive: new Date("04 27 2024"), - dateDepart: new Date("04 28 2024"), - guests: 2, - hotel: "Scandic Helsinki Hub", - }, - { - dateArrive: new Date("05 27 2024"), - dateDepart: new Date("05 28 2024"), - guests: 2, - hotel: "Scandic Örebro Central", - }, - { - dateArrive: new Date("06 27 2024"), - dateDepart: new Date("06 28 2024"), - guests: 2, - hotel: "Scandic Oslo City", - }, -] - -export const extendedUser = { - journeys: challenges.journeys, - membershipId: 30812404844732, - nights: 14, - points: 20720, - qualifyingPoints: 5000, - shortcuts, - stays, - victories: challenges.victories, -} diff --git a/app/[lang]/(live)/(protected)/my-pages/layout.tsx b/app/[lang]/(live)/(protected)/my-pages/layout.tsx index 62d99018d..e83d541ba 100644 --- a/app/[lang]/(live)/(protected)/my-pages/layout.tsx +++ b/app/[lang]/(live)/(protected)/my-pages/layout.tsx @@ -8,53 +8,11 @@ import Sidebar from "@/components/MyPages/Sidebar" import styles from "./layout.module.css" import type { LangParams, LayoutArgs } from "@/types/params" -import { request } from "@/lib/graphql/request" -import { - GetNavigationMyPagesData, - NavigationItem, - MenuItem, - PageLink, - PageLinkEnum, -} from "@/types/requests/myPages/navigation" -import { GetNavigationMyPages } from "@/lib/graphql/Query/NavigationMyPages.graphql" - -function getURL(node: PageLink) { - switch (node.__typename) { - case PageLinkEnum.ContentPage: - return node.web.url - case PageLinkEnum.AccountPage: - case PageLinkEnum.LoyaltyPage: - return node.url - } -} - -function mapMenuItems(navigationItems: NavigationItem[]) { - return navigationItems.map(({ item }): MenuItem => { - const { node } = item.pageConnection.edges[0] - - return { - uid: node.system.uid, - url: getURL(node), - linkText: item.link_text || node.title, - subItems: item.sub_items ? mapMenuItems(item.sub_items) : null, - } - }) -} export default async function MyPagesLayout({ children, params, }: React.PropsWithChildren>) { - const response = await request( - GetNavigationMyPages, - { - locale: params.lang, - } - ) - // navigation_my_pages is of type Single, hence the hard [0] - const navigation = response.data.all_navigation_my_pages.items[0] - const menuItems = mapMenuItems(navigation.items) - return (
- + {children}
diff --git a/app/[lang]/(live)/(protected)/my-pages/page.tsx b/app/[lang]/(live)/(protected)/my-pages/page.tsx index e29ded786..2a76f5785 100644 --- a/app/[lang]/(live)/(protected)/my-pages/page.tsx +++ b/app/[lang]/(live)/(protected)/my-pages/page.tsx @@ -1,7 +1,6 @@ +import { _ } from "@/lib/translation" import { serverClient } from "@/lib/trpc/server" -import { extendedUser } from "./_constants" - import MaxWidth from "@/components/MaxWidth" import Overview from "@/components/MyPages/Blocks/Overview" import Shortcuts from "@/components/MyPages/Blocks/Shortcuts" @@ -12,19 +11,15 @@ import styles from "./page.module.css" import type { LangParams, PageArgs } from "@/types/params" export default async function MyPage({ params }: PageArgs) { - const data = await serverClient().user.get() - const user = { - ...data, - ...extendedUser, - } + const user = await serverClient().user.get() return ( ) diff --git a/app/[lang]/(live)/(protected)/my-pages/profile/@verifyCode/default.tsx b/app/[lang]/(live)/(protected)/my-pages/profile/@communication/default.tsx similarity index 96% rename from app/[lang]/(live)/(protected)/my-pages/profile/@verifyCode/default.tsx rename to app/[lang]/(live)/(protected)/my-pages/profile/@communication/default.tsx index 827ef624b..86b9e9a38 100644 --- a/app/[lang]/(live)/(protected)/my-pages/profile/@verifyCode/default.tsx +++ b/app/[lang]/(live)/(protected)/my-pages/profile/@communication/default.tsx @@ -1,3 +1,3 @@ export default function Default() { return null -} \ No newline at end of file +} diff --git a/app/[lang]/(live)/(protected)/my-pages/profile/@communication/page.tsx b/app/[lang]/(live)/(protected)/my-pages/profile/@communication/page.tsx new file mode 100644 index 000000000..cd138565d --- /dev/null +++ b/app/[lang]/(live)/(protected)/my-pages/profile/@communication/page.tsx @@ -0,0 +1,5 @@ +import CommunicationPreferences from "@/components/MyProfile/CommunicationPreferences" + +export default function Communication() { + return +} diff --git a/app/[lang]/(live)/(protected)/my-pages/profile/@creditCards/default.tsx b/app/[lang]/(live)/(protected)/my-pages/profile/@creditCards/default.tsx new file mode 100644 index 000000000..86b9e9a38 --- /dev/null +++ b/app/[lang]/(live)/(protected)/my-pages/profile/@creditCards/default.tsx @@ -0,0 +1,3 @@ +export default function Default() { + return null +} diff --git a/app/[lang]/(live)/(protected)/my-pages/profile/@creditCards/page.tsx b/app/[lang]/(live)/(protected)/my-pages/profile/@creditCards/page.tsx new file mode 100644 index 000000000..fc36f789e --- /dev/null +++ b/app/[lang]/(live)/(protected)/my-pages/profile/@creditCards/page.tsx @@ -0,0 +1,5 @@ +import CreditCards from "@/components/MyProfile/CreditCards" + +export default function CreditCardSlot() { + return +} diff --git a/app/[lang]/(live)/(protected)/my-pages/profile/@edit/default.tsx b/app/[lang]/(live)/(protected)/my-pages/profile/@edit/default.tsx index ddef0b3e6..86b9e9a38 100644 --- a/app/[lang]/(live)/(protected)/my-pages/profile/@edit/default.tsx +++ b/app/[lang]/(live)/(protected)/my-pages/profile/@edit/default.tsx @@ -1,3 +1,3 @@ -export default function DefaultEdit() { +export default function Default() { return null } diff --git a/app/[lang]/(live)/(protected)/my-pages/profile/@edit/edit/default.tsx b/app/[lang]/(live)/(protected)/my-pages/profile/@edit/edit/default.tsx index 8252fdf0f..86b9e9a38 100644 --- a/app/[lang]/(live)/(protected)/my-pages/profile/@edit/edit/default.tsx +++ b/app/[lang]/(live)/(protected)/my-pages/profile/@edit/edit/default.tsx @@ -1,10 +1,3 @@ -import Button from "@/components/TempDesignSystem/Button"; - -export default function EditProfile() { - return ( - <> - - - - ) +export default function Default() { + return null } diff --git a/app/[lang]/(live)/(protected)/my-pages/profile/@edit/edit/page.tsx b/app/[lang]/(live)/(protected)/my-pages/profile/@edit/edit/page.tsx new file mode 100644 index 000000000..70fa4a645 --- /dev/null +++ b/app/[lang]/(live)/(protected)/my-pages/profile/@edit/edit/page.tsx @@ -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) { + const isPending = useProfileStore((store) => store.pending) + const isValid = useProfileStore((store) => store.valid) + return ( + <> + + + + ) +} diff --git a/app/[lang]/(live)/(protected)/my-pages/profile/@edit/page.tsx b/app/[lang]/(live)/(protected)/my-pages/profile/@edit/page.tsx new file mode 100644 index 000000000..c17431379 --- /dev/null +++ b/app/[lang]/(live)/(protected)/my-pages/profile/@edit/page.tsx @@ -0,0 +1,3 @@ +export default function Page() { + return null +} diff --git a/app/[lang]/(live)/(protected)/my-pages/profile/@membershipCard/default.tsx b/app/[lang]/(live)/(protected)/my-pages/profile/@membershipCard/default.tsx new file mode 100644 index 000000000..86b9e9a38 --- /dev/null +++ b/app/[lang]/(live)/(protected)/my-pages/profile/@membershipCard/default.tsx @@ -0,0 +1,3 @@ +export default function Default() { + return null +} diff --git a/app/[lang]/(live)/(protected)/my-pages/profile/@membershipCard/page.tsx b/app/[lang]/(live)/(protected)/my-pages/profile/@membershipCard/page.tsx new file mode 100644 index 000000000..924d5c4cb --- /dev/null +++ b/app/[lang]/(live)/(protected)/my-pages/profile/@membershipCard/page.tsx @@ -0,0 +1,5 @@ +import MembershipCard from "@/components/MyProfile/MembershipCard" + +export default function MembershipCardSlot() { + return +} diff --git a/app/[lang]/(live)/(protected)/my-pages/profile/@password/default.tsx b/app/[lang]/(live)/(protected)/my-pages/profile/@password/default.tsx new file mode 100644 index 000000000..86b9e9a38 --- /dev/null +++ b/app/[lang]/(live)/(protected)/my-pages/profile/@password/default.tsx @@ -0,0 +1,3 @@ +export default function Default() { + return null +} diff --git a/app/[lang]/(live)/(protected)/my-pages/profile/@password/page.tsx b/app/[lang]/(live)/(protected)/my-pages/profile/@password/page.tsx new file mode 100644 index 000000000..51895bc82 --- /dev/null +++ b/app/[lang]/(live)/(protected)/my-pages/profile/@password/page.tsx @@ -0,0 +1,5 @@ +import Password from "@/components/MyProfile/Password" + +export default function PasswordSlot() { + return +} diff --git a/app/[lang]/(live)/(protected)/my-pages/profile/@profile/default.tsx b/app/[lang]/(live)/(protected)/my-pages/profile/@profile/default.tsx new file mode 100644 index 000000000..86b9e9a38 --- /dev/null +++ b/app/[lang]/(live)/(protected)/my-pages/profile/@profile/default.tsx @@ -0,0 +1,3 @@ +export default function Default() { + return null +} diff --git a/app/[lang]/(live)/(protected)/my-pages/profile/@profile/edit/default.tsx b/app/[lang]/(live)/(protected)/my-pages/profile/@profile/edit/default.tsx new file mode 100644 index 000000000..86b9e9a38 --- /dev/null +++ b/app/[lang]/(live)/(protected)/my-pages/profile/@profile/edit/default.tsx @@ -0,0 +1,3 @@ +export default function Default() { + return null +} diff --git a/app/[lang]/(live)/(protected)/my-pages/profile/@profile/edit/page.tsx b/app/[lang]/(live)/(protected)/my-pages/profile/@profile/edit/page.tsx new file mode 100644 index 000000000..d2ba5182e --- /dev/null +++ b/app/[lang]/(live)/(protected)/my-pages/profile/@profile/edit/page.tsx @@ -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 +} diff --git a/app/[lang]/(live)/(protected)/my-pages/profile/@profile/page.tsx b/app/[lang]/(live)/(protected)/my-pages/profile/@profile/page.tsx new file mode 100644 index 000000000..b1f828678 --- /dev/null +++ b/app/[lang]/(live)/(protected)/my-pages/profile/@profile/page.tsx @@ -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 +} diff --git a/app/[lang]/(live)/(protected)/my-pages/profile/@verifyCode/(.)verify/page.tsx b/app/[lang]/(live)/(protected)/my-pages/profile/@verifyCode/(.)verify/page.tsx deleted file mode 100644 index a177b8d41..000000000 --- a/app/[lang]/(live)/(protected)/my-pages/profile/@verifyCode/(.)verify/page.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import Modal from "@/components/Modal"; - -export default function VerifyCode() { - return ( - - - Verify Code - - - ) -} diff --git a/app/[lang]/(live)/(protected)/my-pages/profile/@view/default.tsx b/app/[lang]/(live)/(protected)/my-pages/profile/@view/default.tsx index def44df05..86b9e9a38 100644 --- a/app/[lang]/(live)/(protected)/my-pages/profile/@view/default.tsx +++ b/app/[lang]/(live)/(protected)/my-pages/profile/@view/default.tsx @@ -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) { - return ( - - ) +export default function Default() { + return null } diff --git a/app/[lang]/(live)/(protected)/my-pages/profile/@view/edit/default.tsx b/app/[lang]/(live)/(protected)/my-pages/profile/@view/edit/default.tsx new file mode 100644 index 000000000..86b9e9a38 --- /dev/null +++ b/app/[lang]/(live)/(protected)/my-pages/profile/@view/edit/default.tsx @@ -0,0 +1,3 @@ +export default function Default() { + return null +} diff --git a/app/[lang]/(live)/(protected)/my-pages/profile/@view/page.tsx b/app/[lang]/(live)/(protected)/my-pages/profile/@view/page.tsx new file mode 100644 index 000000000..365533f77 --- /dev/null +++ b/app/[lang]/(live)/(protected)/my-pages/profile/@view/page.tsx @@ -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) { + return ( + + ) +} diff --git a/app/[lang]/(live)/(protected)/my-pages/profile/@view/view.module.css b/app/[lang]/(live)/(protected)/my-pages/profile/@view/view.module.css deleted file mode 100644 index 136a638cf..000000000 --- a/app/[lang]/(live)/(protected)/my-pages/profile/@view/view.module.css +++ /dev/null @@ -1,3 +0,0 @@ -.btn { - position: absolute; -} \ No newline at end of file diff --git a/app/[lang]/(live)/(protected)/my-pages/profile/@wishes/default.tsx b/app/[lang]/(live)/(protected)/my-pages/profile/@wishes/default.tsx new file mode 100644 index 000000000..86b9e9a38 --- /dev/null +++ b/app/[lang]/(live)/(protected)/my-pages/profile/@wishes/default.tsx @@ -0,0 +1,3 @@ +export default function Default() { + return null +} diff --git a/app/[lang]/(live)/(protected)/my-pages/profile/@wishes/page.tsx b/app/[lang]/(live)/(protected)/my-pages/profile/@wishes/page.tsx new file mode 100644 index 000000000..d22592741 --- /dev/null +++ b/app/[lang]/(live)/(protected)/my-pages/profile/@wishes/page.tsx @@ -0,0 +1,5 @@ +import Wishes from "@/components/MyProfile/Wishes" + +export default function WishesSlot() { + return +} diff --git a/app/[lang]/(live)/(protected)/my-pages/profile/edit/page.tsx b/app/[lang]/(live)/(protected)/my-pages/profile/edit/page.tsx new file mode 100644 index 000000000..fe4978be0 --- /dev/null +++ b/app/[lang]/(live)/(protected)/my-pages/profile/edit/page.tsx @@ -0,0 +1,3 @@ +export default function EditPage() { + return null +} diff --git a/app/[lang]/(live)/(protected)/my-pages/profile/layout.module.css b/app/[lang]/(live)/(protected)/my-pages/profile/layout.module.css new file mode 100644 index 000000000..abde89e1c --- /dev/null +++ b/app/[lang]/(live)/(protected)/my-pages/profile/layout.module.css @@ -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; +} diff --git a/app/[lang]/(live)/(protected)/my-pages/profile/layout.tsx b/app/[lang]/(live)/(protected)/my-pages/profile/layout.tsx index d2504b779..13678b37f 100644 --- a/app/[lang]/(live)/(protected)/my-pages/profile/layout.tsx +++ b/app/[lang]/(live)/(protected)/my-pages/profile/layout.tsx @@ -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) { return ( - <> - {edit} - {view} - {children} - {verifyCode} - + +
+ {edit} + {view} +
+ {profile} +
+ {communication} + {wishes} + {membershipCard} + {creditCards} + {password} +
+
) } diff --git a/app/[lang]/(live)/(protected)/my-pages/profile/page.module.css b/app/[lang]/(live)/(protected)/my-pages/profile/page.module.css deleted file mode 100644 index aa1e27153..000000000 --- a/app/[lang]/(live)/(protected)/my-pages/profile/page.module.css +++ /dev/null @@ -1,10 +0,0 @@ -.page { - display: grid; - gap: 3rem; -} - -.cards { - display: grid; - gap: 0.4rem; - grid-template-columns: 1fr 1fr; -} \ No newline at end of file diff --git a/app/[lang]/(live)/(protected)/my-pages/profile/page.tsx b/app/[lang]/(live)/(protected)/my-pages/profile/page.tsx deleted file mode 100644 index bd11b2244..000000000 --- a/app/[lang]/(live)/(protected)/my-pages/profile/page.tsx +++ /dev/null @@ -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 ( - - -

HALLÅ ELLER!?!

-
- -
- - - - - -
-
- ) -} diff --git a/app/[lang]/(live)/(protected)/my-pages/profile/verify/page.tsx b/app/[lang]/(live)/(protected)/my-pages/profile/verify/page.tsx deleted file mode 100644 index 0be0d64a0..000000000 --- a/app/[lang]/(live)/(protected)/my-pages/profile/verify/page.tsx +++ /dev/null @@ -1,9 +0,0 @@ -export default function VerifyPage() { - return ( -
-
-

Verify that code already!

-
-
- ) -} diff --git a/components/Icons/Calendar.tsx b/components/Icons/Calendar.tsx new file mode 100644 index 000000000..f7a086a62 --- /dev/null +++ b/components/Icons/Calendar.tsx @@ -0,0 +1,14 @@ +import Image from "@/components/Image" + +import type { IconProps } from "@/types/components/icon" + +export default function CalendarIcon({ height = 20, width = 20 }: IconProps) { + return ( + Calendar Icon + ) +} diff --git a/components/Icons/ChevronDown.tsx b/components/Icons/ChevronDown.tsx new file mode 100644 index 000000000..c38e3ccf9 --- /dev/null +++ b/components/Icons/ChevronDown.tsx @@ -0,0 +1,17 @@ +import Image from "@/components/Image" + +import type { IconProps } from "@/types/components/icon" + +export default function ChevronDownIcon({ + height = 20, + width = 20, +}: IconProps) { + return ( + Chevron Down Icon + ) +} diff --git a/components/Icons/Email.tsx b/components/Icons/Email.tsx new file mode 100644 index 000000000..0f6e265da --- /dev/null +++ b/components/Icons/Email.tsx @@ -0,0 +1,14 @@ +import Image from "@/components/Image" + +import type { IconProps } from "@/types/components/icon" + +export default function EmailIcon({ height = 20, width = 20 }: IconProps) { + return ( + Email Icon + ) +} diff --git a/components/Icons/House.tsx b/components/Icons/House.tsx new file mode 100644 index 000000000..19f889c19 --- /dev/null +++ b/components/Icons/House.tsx @@ -0,0 +1,9 @@ +import Image from "@/components/Image" + +import type { IconProps } from "@/types/components/icon" + +export default function HouseIcon({ height = 20, width = 20 }: IconProps) { + return ( + House Icon + ) +} diff --git a/components/Icons/Phone.tsx b/components/Icons/Phone.tsx new file mode 100644 index 000000000..a87bb3575 --- /dev/null +++ b/components/Icons/Phone.tsx @@ -0,0 +1,9 @@ +import Image from "@/components/Image" + +import type { IconProps } from "@/types/components/icon" + +export default function PhoneIcon({ height = 20, width = 20 }: IconProps) { + return ( + Phone Icon + ) +} diff --git a/components/Icons/index.tsx b/components/Icons/index.tsx new file mode 100644 index 000000000..5104937a2 --- /dev/null +++ b/components/Icons/index.tsx @@ -0,0 +1,5 @@ +export { default as CalendarIcon } from "./Calendar" +export { default as ChevronDownIcon } from "./ChevronDown" +export { default as EmailIcon } from "./Email" +export { default as HouseIcon } from "./House" +export { default as PhoneIcon } from "./Phone" diff --git a/components/MaxWidth/maxWidth.module.css b/components/MaxWidth/maxWidth.module.css index 9985ce86d..5b96e46b0 100644 --- a/components/MaxWidth/maxWidth.module.css +++ b/components/MaxWidth/maxWidth.module.css @@ -1,3 +1,4 @@ .container { max-width: var(--max-width); -} \ No newline at end of file + position: relative; +} diff --git a/components/Modal/Header/header.module.css b/components/Modal/Header/header.module.css deleted file mode 100644 index 6e25c1cb9..000000000 --- a/components/Modal/Header/header.module.css +++ /dev/null @@ -1 +0,0 @@ -.header {} \ No newline at end of file diff --git a/components/Modal/Header/index.tsx b/components/Modal/Header/index.tsx deleted file mode 100644 index 404ae1c35..000000000 --- a/components/Modal/Header/index.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import styles from "./header.module.css" - -export default function Header({ children }: React.PropsWithChildren) { - return ( -
- {children} -
- ) -} diff --git a/components/Modal/Modal/index.tsx b/components/Modal/Modal/index.tsx deleted file mode 100644 index d31e0b659..000000000 --- a/components/Modal/Modal/index.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import { forwardRef } from "react" - -import styles from "./modal.module.css" - -const Modal = forwardRef( - function ({ children }, ref) { - return ( -
- {children} -
- ) - } -) - -Modal.displayName = "Modal" - -export default Modal diff --git a/components/Modal/Modal/modal.module.css b/components/Modal/Modal/modal.module.css deleted file mode 100644 index 51ad05b35..000000000 --- a/components/Modal/Modal/modal.module.css +++ /dev/null @@ -1,11 +0,0 @@ -.modal { - background-color: var(--some-white-color, #F2F2F2); - border-radius: 0.4rem; - left: 50%; - outline: none; - overflow: auto; - padding: 3.5rem 7rem; - position: absolute; - top: 50%; - transform: translate(-50%, -50%); -} \ No newline at end of file diff --git a/components/Modal/Overlay/index.tsx b/components/Modal/Overlay/index.tsx deleted file mode 100644 index df6ac5287..000000000 --- a/components/Modal/Overlay/index.tsx +++ /dev/null @@ -1,44 +0,0 @@ -"use client" -import { useCallback, useLayoutEffect } from "react"; -import { useRouter } from "next/navigation"; - -import { useHandleKeyPress } from "@/hooks/useHandleKeyPress"; - -import styles from "./overlay.module.css" - -export default function Overlay({ children }: React.PropsWithChildren) { - const router = useRouter() - - const handleOnClose = useCallback(() => { - return router.back() - }, [router]) - - const handleOnEscape = useCallback((evt: KeyboardEvent) => { - if (evt.code === "Escape") { - handleOnClose() - } - }, [handleOnClose]) - - useHandleKeyPress(handleOnEscape) - - useLayoutEffect(() => { - // Get original body overflow - const originalStyle = window.getComputedStyle(document.body).overflow; - // Prevent scrolling on mount - document.body.style.overflow = 'hidden'; - // Re-enable scrolling when component unmounts - return () => { - document.body.style.overflow = originalStyle; - }; - }, []); - - return ( -
- {children} -
- ); -}; \ No newline at end of file diff --git a/components/Modal/Overlay/overlay.module.css b/components/Modal/Overlay/overlay.module.css deleted file mode 100644 index d1eaa333a..000000000 --- a/components/Modal/Overlay/overlay.module.css +++ /dev/null @@ -1,9 +0,0 @@ -.overlay { - background-color: rgba(0, 0, 0, 0.3); - bottom: 0; - left: 0; - position: fixed; - right: 0; - top: 0; - z-index: 9999; -} \ No newline at end of file diff --git a/components/Modal/Portal.tsx b/components/Modal/Portal.tsx deleted file mode 100644 index c3ef90464..000000000 --- a/components/Modal/Portal.tsx +++ /dev/null @@ -1,9 +0,0 @@ -"use client" -import { createPortal } from 'react-dom'; - -export default function Portal({ children }: React.PropsWithChildren) { - return createPortal( - children, - document.body - ); -}; diff --git a/components/Modal/Title/index.tsx b/components/Modal/Title/index.tsx deleted file mode 100644 index a5bf60d1c..000000000 --- a/components/Modal/Title/index.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import styles from "./title.module.css" - -export default function Title({ children }: React.PropsWithChildren) { - return ( -

- {children} -

- ) -} diff --git a/components/Modal/Title/title.module.css b/components/Modal/Title/title.module.css deleted file mode 100644 index 0eb961927..000000000 --- a/components/Modal/Title/title.module.css +++ /dev/null @@ -1 +0,0 @@ -.heading {} \ No newline at end of file diff --git a/components/Modal/index.tsx b/components/Modal/index.tsx deleted file mode 100644 index c042e8e5a..000000000 --- a/components/Modal/index.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import Header from "./Header" -import UiModal from "./Modal" -import Overlay from "./Overlay" -import Portal from "./Portal" -import Title from "./Title" - -export default function Modal({ children }: React.PropsWithChildren) { - return ( - - - - {children} - - - - ) -} - -Modal.Header = Header -Modal.Title = Title diff --git a/components/MyPages/Blocks/UpcomingStays/Stay/index.tsx b/components/MyPages/Blocks/UpcomingStays/Stay/index.tsx index a2cd5fdaa..dbe53d3bf 100644 --- a/components/MyPages/Blocks/UpcomingStays/Stay/index.tsx +++ b/components/MyPages/Blocks/UpcomingStays/Stay/index.tsx @@ -36,7 +36,7 @@ export default function Stay({ />