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({ />