From 2f6500f46d5cc60116e86bd8b16fd355664192fd Mon Sep 17 00:00:00 2001 From: Michael Zetterberg Date: Fri, 19 Apr 2024 17:07:23 +0200 Subject: [PATCH] feat: static my stays --- .../my-pages/@breadcrumbs/stays/default.tsx | 3 + .../my-pages/@breadcrumbs/stays/page.tsx | 17 +++ .../(protected)/my-pages/overview/page.tsx | 5 +- .../my-pages/stays/page.module.css | 17 +++ .../(protected)/my-pages/stays/page.tsx | 15 ++ .../Blocks/Overview/UpcomingStays/index.tsx | 38 +++++ .../UpcomingStays/upcoming.module.css | 13 +- components/MyPages/Blocks/Shortcuts/index.tsx | 2 +- .../emptyPreviousStays.module.css | 9 ++ .../Blocks/Stays/EmptyPreviousStays/index.tsx | 12 ++ .../emptyUpcomingStays.module.css | 26 ++++ .../Blocks/Stays/EmptyUpcomingStays/index.tsx | 25 +++ .../Blocks/Stays/Header/header.module.css | 13 ++ .../MyPages/Blocks/Stays/Header/index.tsx | 18 +++ .../MyPages/Blocks/Stays/Previous/index.tsx | 28 ++++ .../Blocks/Stays/Previous/previous.module.css | 3 + .../Stay => Stays/StayCard}/index.tsx | 29 ++-- .../Stay => Stays/StayCard}/stay.module.css | 14 +- .../MyPages/Blocks/Stays/StayList/index.tsx | 28 ++++ .../Blocks/Stays/StayList/stayList.module.css | 32 ++++ .../MyPages/Blocks/Stays/Upcoming/index.tsx | 29 ++++ .../Blocks/Stays/Upcoming/upcoming.module.css | 3 + .../MyPages/Blocks/UpcomingStays/index.tsx | 31 ---- constants/routes/authRequired.ts | 10 +- constants/routes/myPages.js | 10 ++ server/routers/user/query.ts | 39 ++++- server/routers/user/temp.ts | 143 +++++++++++++++++- types/components/myPages/myPage/stay.ts | 7 + types/components/myPages/myPage/stays.ts | 7 - types/components/myPages/stays/stayCard.ts | 8 + types/components/myPages/stays/stayList.ts | 7 + types/components/myPages/stays/title.ts | 4 + types/user.ts | 8 - 33 files changed, 576 insertions(+), 77 deletions(-) create mode 100644 app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/stays/default.tsx create mode 100644 app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/stays/page.tsx create mode 100644 app/[lang]/(live)/(protected)/my-pages/stays/page.module.css create mode 100644 app/[lang]/(live)/(protected)/my-pages/stays/page.tsx create mode 100644 components/MyPages/Blocks/Overview/UpcomingStays/index.tsx rename components/MyPages/Blocks/{ => Overview}/UpcomingStays/upcoming.module.css (90%) create mode 100644 components/MyPages/Blocks/Stays/EmptyPreviousStays/emptyPreviousStays.module.css create mode 100644 components/MyPages/Blocks/Stays/EmptyPreviousStays/index.tsx create mode 100644 components/MyPages/Blocks/Stays/EmptyUpcomingStays/emptyUpcomingStays.module.css create mode 100644 components/MyPages/Blocks/Stays/EmptyUpcomingStays/index.tsx create mode 100644 components/MyPages/Blocks/Stays/Header/header.module.css create mode 100644 components/MyPages/Blocks/Stays/Header/index.tsx create mode 100644 components/MyPages/Blocks/Stays/Previous/index.tsx create mode 100644 components/MyPages/Blocks/Stays/Previous/previous.module.css rename components/MyPages/Blocks/{UpcomingStays/Stay => Stays/StayCard}/index.tsx (78%) rename components/MyPages/Blocks/{UpcomingStays/Stay => Stays/StayCard}/stay.module.css (86%) create mode 100644 components/MyPages/Blocks/Stays/StayList/index.tsx create mode 100644 components/MyPages/Blocks/Stays/StayList/stayList.module.css create mode 100644 components/MyPages/Blocks/Stays/Upcoming/index.tsx create mode 100644 components/MyPages/Blocks/Stays/Upcoming/upcoming.module.css delete mode 100644 components/MyPages/Blocks/UpcomingStays/index.tsx create mode 100644 types/components/myPages/myPage/stay.ts delete mode 100644 types/components/myPages/myPage/stays.ts create mode 100644 types/components/myPages/stays/stayCard.ts create mode 100644 types/components/myPages/stays/stayList.ts create mode 100644 types/components/myPages/stays/title.ts 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