diff --git a/app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/stays/default.tsx b/app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/stays/default.tsx new file mode 100644 index 000000000..86b9e9a38 --- /dev/null +++ b/app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/stays/default.tsx @@ -0,0 +1,3 @@ +export default function Default() { + return null +} diff --git a/app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/stays/page.tsx b/app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/stays/page.tsx new file mode 100644 index 000000000..721a56db2 --- /dev/null +++ b/app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/stays/page.tsx @@ -0,0 +1,17 @@ +import { serverClient } from "@/lib/trpc/server" +import { stays } from "@/constants/routes/myPages" + +import Breadcrumbs from "@/components/MyPages/Breadcrumbs" + +import type { LangParams, PageArgs } from "@/types/params" + +export default async function StaysBreadcrumbs({ + params, +}: PageArgs) { + const href = stays[params.lang].replace(`/${params.lang}`, "") + const breadcrumbs = await serverClient().contentstack.breadcrumbs.get({ + href, + locale: params.lang, + }) + return +} diff --git a/app/[lang]/(live)/(protected)/my-pages/overview/page.tsx b/app/[lang]/(live)/(protected)/my-pages/overview/page.tsx index a9bcd261b..3d8948b7b 100644 --- a/app/[lang]/(live)/(protected)/my-pages/overview/page.tsx +++ b/app/[lang]/(live)/(protected)/my-pages/overview/page.tsx @@ -4,7 +4,7 @@ import { serverClient } from "@/lib/trpc/server" 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" +import UpcomingStays from "@/components/MyPages/Blocks/Overview/UpcomingStays" import styles from "./page.module.css" @@ -12,10 +12,11 @@ import type { LangParams, PageArgs } from "@/types/params" export default async function MyPageOverview({ params }: PageArgs) { const user = await serverClient().user.get() + return ( - + ) { + return ( +
+ + +
+ ) +} diff --git a/components/MyPages/Blocks/Overview/UpcomingStays/index.tsx b/components/MyPages/Blocks/Overview/UpcomingStays/index.tsx new file mode 100644 index 000000000..bfdd59224 --- /dev/null +++ b/components/MyPages/Blocks/Overview/UpcomingStays/index.tsx @@ -0,0 +1,38 @@ +import { serverClient } from "@/lib/trpc/server" + +import Link from "@/components/TempDesignSystem/Link" +import Title from "@/components/MyPages/Title" +import StayCard from "../../Stays/StayCard" +import EmptyUpcomingStaysBlock from "../../Stays/EmptyUpcomingStays" + +import styles from "./upcoming.module.css" + +import type { LangParams } from "@/types/params" + +export default async function UpcomingStays({ lang }: LangParams) { + const stays = await serverClient().user.stays.upcoming({ + perPage: 3, + }) + + return ( +
+
+ + Your upcoming stays + + + See all + +
+ {stays.length ? ( +
+ {stays.map((stay) => ( + + ))} +
+ ) : ( + + )} +
+ ) +} diff --git a/components/MyPages/Blocks/UpcomingStays/upcoming.module.css b/components/MyPages/Blocks/Overview/UpcomingStays/upcoming.module.css similarity index 90% rename from components/MyPages/Blocks/UpcomingStays/upcoming.module.css rename to components/MyPages/Blocks/Overview/UpcomingStays/upcoming.module.css index f6ca62bcd..d1237395d 100644 --- a/components/MyPages/Blocks/UpcomingStays/upcoming.module.css +++ b/components/MyPages/Blocks/Overview/UpcomingStays/upcoming.module.css @@ -1,8 +1,8 @@ .container { display: grid; gap: 2.2rem; - margin-right: -2rem; overflow: hidden; + margin-right: -2rem; } .header { @@ -31,16 +31,15 @@ display: none; } -@media screen and (max-width: 950px) { - .stays { - padding-right: 2rem; - } -} - @media screen and (min-width: 950px) { .container { margin-right: 0; } + @media screen and (max-width: 950px) { + .stays { + padding-right: 2rem; + } + } .link { color: var(--some-black-color, #111); diff --git a/components/MyPages/Blocks/Shortcuts/index.tsx b/components/MyPages/Blocks/Shortcuts/index.tsx index f71de4927..7aacfeba6 100644 --- a/components/MyPages/Blocks/Shortcuts/index.tsx +++ b/components/MyPages/Blocks/Shortcuts/index.tsx @@ -14,7 +14,7 @@ export default function Shortcuts({ return (
- + <Title level="h2" as="h5" uppercase> {title}

{subtitle}

diff --git a/components/MyPages/Blocks/Stays/EmptyPreviousStays/emptyPreviousStays.module.css b/components/MyPages/Blocks/Stays/EmptyPreviousStays/emptyPreviousStays.module.css new file mode 100644 index 000000000..44999673c --- /dev/null +++ b/components/MyPages/Blocks/Stays/EmptyPreviousStays/emptyPreviousStays.module.css @@ -0,0 +1,9 @@ +.container { + align-items: center; + display: flex; + justify-content: center; + min-height: 25rem; + background-color: var(--some-grey-color, #f2f2f2); + border-radius: 0.8rem; + max-width: var(--max-width); +} diff --git a/components/MyPages/Blocks/Stays/EmptyPreviousStays/index.tsx b/components/MyPages/Blocks/Stays/EmptyPreviousStays/index.tsx new file mode 100644 index 000000000..fe212c799 --- /dev/null +++ b/components/MyPages/Blocks/Stays/EmptyPreviousStays/index.tsx @@ -0,0 +1,12 @@ +import Title from "@/components/MyPages/Title" +import styles from "./emptyPreviousStays.module.css" + +export default function EmptyPreviousStaysBlock() { + return ( +
+ + You have no previous stays. + +
+ ) +} diff --git a/components/MyPages/Blocks/Stays/EmptyUpcomingStays/emptyUpcomingStays.module.css b/components/MyPages/Blocks/Stays/EmptyUpcomingStays/emptyUpcomingStays.module.css new file mode 100644 index 000000000..76d189ba0 --- /dev/null +++ b/components/MyPages/Blocks/Stays/EmptyUpcomingStays/emptyUpcomingStays.module.css @@ -0,0 +1,26 @@ +.button { + background-color: var(--some-red-color, #ed2027); +} + +.link { + text-decoration: none; +} + +.redTitle { + color: var(--some-red-color, #ed2027); + display: block; +} + +.container { + align-items: center; + display: flex; + flex-direction: column; + justify-content: center; + min-height: 25rem; + gap: 2.5rem; + background-color: var(--some-grey-color, #f2f2f2); + border-radius: 0.8rem; + max-width: var(--max-width); + margin-bottom: 0.5rem; + padding: 0 2rem; +} diff --git a/components/MyPages/Blocks/Stays/EmptyUpcomingStays/index.tsx b/components/MyPages/Blocks/Stays/EmptyUpcomingStays/index.tsx new file mode 100644 index 000000000..202461807 --- /dev/null +++ b/components/MyPages/Blocks/Stays/EmptyUpcomingStays/index.tsx @@ -0,0 +1,25 @@ +import Title from "@/components/MyPages/Title" +import Button from "@/components/TempDesignSystem/Button" +import styles from "./emptyUpcomingStays.module.css" +import Link from "next/link" + +export default function EmptyUpcomingStaysBlock() { + return ( +
+ + You have no upcoming stays. + <span className={styles.redTitle}> Where should you go next?</span> + + +
+ ) +} diff --git a/components/MyPages/Blocks/Stays/Header/header.module.css b/components/MyPages/Blocks/Stays/Header/header.module.css new file mode 100644 index 000000000..f16c5f6d3 --- /dev/null +++ b/components/MyPages/Blocks/Stays/Header/header.module.css @@ -0,0 +1,13 @@ +.subtitle { + padding-top: 0.5rem; + padding-bottom: 2.5rem; + margin: 0; +} + +@media screen and (min-width: 950px) { + .subtitle { + width: 60%; + padding-top: 2.5rem; + padding-bottom: 5rem; + } +} diff --git a/components/MyPages/Blocks/Stays/Header/index.tsx b/components/MyPages/Blocks/Stays/Header/index.tsx new file mode 100644 index 000000000..6d7ea5bca --- /dev/null +++ b/components/MyPages/Blocks/Stays/Header/index.tsx @@ -0,0 +1,18 @@ +import Title from "@/components/MyPages/Title" + +import styles from "./header.module.css" + +import { HeaderProps } from "@/types/components/myPages/stays/title" + +export default function Header({ title, subtitle }: HeaderProps) { + return ( +
+ + {title} + + + {subtitle} + +
+ ) +} diff --git a/components/MyPages/Blocks/Stays/Previous/index.tsx b/components/MyPages/Blocks/Stays/Previous/index.tsx new file mode 100644 index 000000000..d5e6ab44b --- /dev/null +++ b/components/MyPages/Blocks/Stays/Previous/index.tsx @@ -0,0 +1,28 @@ +import { serverClient } from "@/lib/trpc/server" + +import EmptyPreviousStaysBlock from "../EmptyPreviousStays" +import Header from "../Header" +import StayList from "../StayList" + +import styles from "./previous.module.css" + +import type { LangParams } from "@/types/params" + +export default async function PreviousStays({ lang }: LangParams) { + const stays = await serverClient().user.stays.previous() + + return ( +
+
+ + {stays.length ? ( + + ) : ( + + )} +
+ ) +} diff --git a/components/MyPages/Blocks/Stays/Previous/previous.module.css b/components/MyPages/Blocks/Stays/Previous/previous.module.css new file mode 100644 index 000000000..020f53751 --- /dev/null +++ b/components/MyPages/Blocks/Stays/Previous/previous.module.css @@ -0,0 +1,3 @@ +.container { + max-width: var(--max-width); +} diff --git a/components/MyPages/Blocks/UpcomingStays/Stay/index.tsx b/components/MyPages/Blocks/Stays/StayCard/index.tsx similarity index 78% rename from components/MyPages/Blocks/UpcomingStays/Stay/index.tsx rename to components/MyPages/Blocks/Stays/StayCard/index.tsx index a89a20160..e82c2b1f5 100644 --- a/components/MyPages/Blocks/UpcomingStays/Stay/index.tsx +++ b/components/MyPages/Blocks/Stays/StayCard/index.tsx @@ -1,20 +1,18 @@ import { dt } from "@/lib/dt" - import Image from "@/components/Image" -import Title from "@/components/MyPages/Title" import styles from "./stay.module.css" +import Title from "@/components/MyPages/Title" -import type { LangParams } from "@/types/params" -import type { StayProps } from "@/types/components/myPages/myPage/stays" +import type { StayCardProps } from "@/types/components/myPages/stays/stayCard" -export default function Stay({ - dateArrive, - dateDepart, - guests, - hotel, +export default function StayCard({ + stay, lang, -}: StayProps & LangParams) { + showDayCount = false, +}: StayCardProps) { + const { dateArrive, dateDepart, guests, hotel } = stay + const daysUntilArrival = dt(dateArrive).diff(dt(), "days") const arrival = dt(dateArrive).locale(lang) const arrivalDate = arrival.format("DD MMM") @@ -22,12 +20,15 @@ export default function Stay({ const depart = dt(dateDepart).locale(lang) const departDate = depart.format("DD MMM YYYY") const departDateTime = depart.format("YYYY-MM-DD") + return (
-
- -
+ {showDayCount ? ( +
+ +
+ ) : null} Placeholder image flower