fix: add next level perks block

2024-04-11 16:02:30 +02:00
parent c398309cdd
commit 85b83bc58b
15 changed files with 182 additions and 103 deletions
--- a/app/[lang]/(live)/(protected)/my-pages/benefits/_constants.ts
+++ b/app/[lang]/(live)/(protected)/my-pages/benefits/_constants.ts
@@ -0,0 +1,5 @@
+export const shortcuts = [
+  { href: "#", title: "Member prices on hotel nights" },
+  { href: "#", title: "Great deals from our partners" },
+  { href: "#", title: "A special gift on your birthday" },
+]
--- a/app/[lang]/(live)/(protected)/my-pages/benefits/page.module.css
+++ b/app/[lang]/(live)/(protected)/my-pages/benefits/page.module.css
@@ -1,6 +1,6 @@
 .container {
  display: flex;
-  gap: 20px;
+  gap: 2rem;
  flex-direction: column;
  max-width: var(--max-width);
  padding-left: 2rem;
@@ -10,15 +10,22 @@
 .header {
  display: grid;
  gap: 2rem;
-  margin-top: 40px;
+  margin-top: 4rem;
 }

 .title {
  font-weight: 600;
 }

+.red {
+  color: var(--some-red-color, #ed2027);
+}
+
 .preamble {
  font-weight: 400;
+  font-family: var(--fira-sans);
+  font-size: 2.4rem;
+  margin: 0;
 }

@media screen and (min-width: 950px) {
@@ -29,6 +36,6 @@
  .container {
    padding-left: 0;
    padding-right: 0;
-    gap: 34px;
+    gap: 3.4rem;
  }
 }
--- a/app/[lang]/(live)/(protected)/my-pages/benefits/page.tsx
+++ b/app/[lang]/(live)/(protected)/my-pages/benefits/page.tsx
@@ -1,42 +1,38 @@
-import { request } from "@/lib/graphql/request"
-import { serverClient } from "@/lib/trpc/server"
-import GetBenefitsPage from "@/lib/graphql/Query/BenefitPage.graphql"
-
 import Title from "@/components/MyPages/Title"
-import BenefitsBlock from "@/components/MyPages/Blocks/Benefits"
+import CurrentBenefitsBlock from "@/components/MyPages/Blocks/Benefits/CurrentLevel"
+import NextLevelBenefitsBlock from "@/components/MyPages/Blocks/Benefits/NextLevel"
+import Shortcuts from "@/components/MyPages/Blocks/Shortcuts"

-import styles from "./page.module.css"
+import { shortcuts } from "./_constants"

 import type { LangParams, PageArgs } from "@/types/params"
-import type { GetBenefitsPageData } from "@/types/requests/benefitPage"
-
-export default async function BenefitsPage({ params }: PageArgs<LangParams>) {
-  const contentResponse = await request<GetBenefitsPageData>(GetBenefitsPage, {
-    locale: params.lang,
-    url: "/my-pages/benefits",
-  })
-
-  const benefitsData = await serverClient().user.get()
-
-  if (!contentResponse.data.all_my_page?.total) {
-    console.log("#### DATA ####")
-    console.log(contentResponse.data)
-    throw new Error("Not found")
-  }
-
-  const contentData = contentResponse.data.all_my_page.items[0]
+import styles from "./page.module.css"

+export default function BenefitsPage({ params }: PageArgs<LangParams>) {
  return (
    <main className={styles.container}>
      <header className={styles.header}>
-        <Title level="h2" className={styles.title} uppercase>
-          {contentData.title}
-        </Title>
-        <Title level="h3" className={styles.preamble}>
-          {contentData.preamble}
+        <Title as="h3" className={styles.title} uppercase>
+          Your Perks and benefits. Tailored just for{" "}
+          <span className={styles.red}>you.</span>
        </Title>
+        <p className={styles.preamble}>
+          Discover the exclusive benefits and delightful surprises our
+          friendship unlocks.
+        </p>
      </header>
-      <BenefitsBlock />
+      <CurrentBenefitsBlock />
+      <Shortcuts
+        shortcuts={shortcuts}
+        title={
+          <span className={styles.title}>
+            Perks and benefits{" "}
+            <span className={styles.red}>for All friends.</span>
+          </span>
+        }
+        subtitle="Always Yours. Universal Benefits for the Scandic Friends community."
+      />
+      <NextLevelBenefitsBlock />
    </main>
  )
 }
--- a/app/[lang]/(live)/(protected)/my-pages/page.tsx
+++ b/app/[lang]/(live)/(protected)/my-pages/page.tsx
@@ -27,7 +27,11 @@ export default async function MyPage({ params }: PageArgs<LangParams>) {
    <main className={styles.blocks}>
      <Overview user={user} />
      <UpcomingStays lang={params.lang} stays={user.stays} />
-      <Shortcuts shortcuts={user.shortcuts} />
+      <Shortcuts
+        shortcuts={user.shortcuts}
+        title="Handy Shortcuts"
+        subtitle="The community at your fingertips"
+      />
    </main>
  )
 }
--- a/app/[lang]/(live)/layout.tsx
+++ b/app/[lang]/(live)/layout.tsx
@@ -11,6 +11,7 @@ import type { Metadata } from "next"
 import type { LangParams, LayoutArgs } from "@/types/params"

 import "@/app/globals.css"
+import "@scandic-hotels/design-system/style.css"

 export const metadata: Metadata = {
  description: "New web",
--- a/components/MyPages/Blocks/Benefits/CurrentLevel/current.module.css
+++ b/components/MyPages/Blocks/Benefits/CurrentLevel/current.module.css
@@ -7,15 +7,28 @@
  color: var(--some-black-color, #111);
  /* font-family: var(--ff-brandon-text); */
  font-weight: 500;
+  text-align: center;
 }

 .value {
  color: var(--some-red-color, #ed2027);
 }

+.subtitle {
+  font-family: var(--ff-fira-sans);
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 14.4px;
+  text-align: center;
+  color: var(--some-black-color, #111);
+  margin: 0;
+}
+
 .card {
  text-decoration: none;
-  display: grid;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
  justify-content: center;
  align-items: center;
  padding: 30px;
--- a/components/MyPages/Blocks/Benefits/CurrentLevel/index.tsx
+++ b/components/MyPages/Blocks/Benefits/CurrentLevel/index.tsx
@@ -1,19 +1,20 @@
 import { serverClient } from "@/lib/trpc/server"
-import Title from "../../Title"
-import styles from "./benefits.module.css"
+import Title from "../../../Title"
+import styles from "./current.module.css"
 import Link from "next/link"

-export default async function BenefitsBlock() {
-  const benefits = await serverClient().user.benefits()
+export default async function CurrentBenefitsBlock() {
+  const benefits = await serverClient().user.benefits.current()

  return (
    <section className={styles.container}>
      {benefits.map((benefit) => (
        <Link href={benefit.href} key={benefit.id} className={styles.card}>
-          <Title level="h2" className={styles.title}>
+          <Title level="h3" as="h4" className={styles.title}>
            <span className={styles.value}>{benefit.value}</span>{" "}
            {benefit.explanation}
          </Title>
+          <p className={styles.subtitle}>{benefit.subtitle}</p>
        </Link>
      ))}
    </section>
--- a/components/MyPages/Blocks/Shortcuts/index.tsx
+++ b/components/MyPages/Blocks/Shortcuts/index.tsx
@@ -6,14 +6,18 @@ import styles from "./shortcuts.module.css"

 import type { ShortcutsProps } from "@/types/components/myPages/shortcuts"

-export default function Shortcuts({ shortcuts }: ShortcutsProps) {
+export default function Shortcuts({
+  shortcuts,
+  title,
+  subtitle,
+}: ShortcutsProps) {
  return (
    <section className={styles.shortcuts}>
      <header className={styles.header}>
-        <Title level="h2" uppercase>
-          Handy Shortcuts
+        <Title level="h2" as="h4" uppercase>
+          {title}
        </Title>
-        <p className={styles.subtitle}>The community at your fingertips</p>
+        <p className={styles.subtitle}>{subtitle}</p>
      </header>
      <section className={styles.links}>
        {shortcuts.map((shortcut) => (
--- a/components/MyPages/Title/index.tsx
+++ b/components/MyPages/Title/index.tsx
@@ -15,7 +15,6 @@ const config = {
      h3: styles.h3,
      h4: styles.h4,
      h5: styles.h5,
-      h6: styles.h6,
    },
  },
  defaultVariants: {
--- a/components/MyPages/Title/title.module.css
+++ b/components/MyPages/Title/title.module.css
@@ -9,41 +9,53 @@
 }

 .h1 {
-  font-size: 2.4rem;
-  line-height: 2.8rem;
+  font-size: var(--typography-Title1-Mobile-fontSize);
+  line-height: var(--typography-Title1-Mobile-lineHeight) + "%";
 }

 .h2 {
-  font-size: 2.2rem;
-  line-height: 2.6rem;
+  font-size: var(--typography-Title2-Mobile-fontSize);
+  line-height: var(--typography-Title2-Mobile-lineHeight) + "%";
 }

 .h3 {
-  font-size: 1.8rem;
-  line-height: 2.2rem;
+  font-size: var(--typography-Title3-Mobile-fontSize);
+  line-height: var(--typography-Title3-Mobile-lineHeight) + "%";
 }

 .h4 {
-  font-size: 1.6rem;
-  line-height: 1.8rem;
+  font-size: var(--typography-Title4-Mobile-fontSize);
+  line-height: var(--typography-Title4-Mobile-lineHeight) + "%";
 }

 .h5 {
-  font-size: 1.3rem;
-}
-
-.h6 {
-  font-size: 1rem;
+  font-size: var(--typography-Title5-Mobile-fontSize);
+  line-height: var(--typography-Title5-Mobile-lineHeight) + "%";
 }

@media screen and (min-width: 950px) {
  .h1 {
-    font-size: 3.8rem;
-    line-height: 4.5rem;
+    font-size: var(--typography-Title1-Desktop-fontSize);
+    line-height: var(--typography-Title1-Desktop-lineHeight) + "%";
  }

  .h2 {
-    font-size: 3.4rem;
-    line-height: 4.1rem;
+    font-size: var(--typography-Title2-Desktop-fontSize);
+    line-height: var(--typography-Title2-Desktop-lineHeight) + "%";
+  }
+
+  .h3 {
+    font-size: var(--typography-Title3-Desktop-fontSize);
+    line-height: var(--typography-Title3-Desktop-lineHeight) + "%";
+  }
+
+  .h4 {
+    font-size: var(--typography-Title4-Desktop-fontSize);
+    line-height: var(--typography-Title4-Desktop-lineHeight) + "%";
+  }
+
+  .h5 {
+    font-size: var(--typography-Title5-Desktop-fontSize);
+    line-height: var(--typography-Title5-Desktop-lineHeight) + "%";
  }
 }
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,7 +12,7 @@
        "@contentstack/live-preview-utils": "^1.4.0",
        "@netlify/plugin-nextjs": "^5.0.0",
        "@radix-ui/react-slot": "^1.0.2",
-        "@scandic-hotels/design-system": "git+https://x-token-auth:$DESIGN_SYSTEM_ACCESS_TOKEN@bitbucket.org/scandic-swap/design-system.git#v0.1.0-rc.2",
+        "@scandic-hotels/design-system": "git+https://x-token-auth:$DESIGN_SYSTEM_ACCESS_TOKEN@bitbucket.org/scandic-swap/design-system.git#v0.1.0-rc.3",
        "@t3-oss/env-nextjs": "^0.9.2",
        "@tanstack/react-query": "^5.28.6",
        "@trpc/client": "^11.0.0-next-beta.318",
--- a/package.json
+++ b/package.json
@@ -21,7 +21,7 @@
    "@contentstack/live-preview-utils": "^1.4.0",
    "@netlify/plugin-nextjs": "^5.0.0",
    "@radix-ui/react-slot": "^1.0.2",
-    "@scandic-hotels/design-system": "git+https://x-token-auth:$DESIGN_SYSTEM_ACCESS_TOKEN@bitbucket.org/scandic-swap/design-system.git#v0.1.0-rc.2",
+    "@scandic-hotels/design-system": "git+https://x-token-auth:$DESIGN_SYSTEM_ACCESS_TOKEN@bitbucket.org/scandic-swap/design-system.git#v0.1.0-rc.3",
    "@t3-oss/env-nextjs": "^0.9.2",
    "@tanstack/react-query": "^5.28.6",
    "@trpc/client": "^11.0.0-next-beta.318",
--- a/server/routers/user/query.ts
+++ b/server/routers/user/query.ts
@@ -23,46 +23,80 @@ export const userQueryRouter = router({
    }
    return validJson
  }),
-  benefits: protectedProcedure.query(async function (opts) {
-    // TODO: Make request to get user data from Scandic API
+  benefits: router({
+    current: protectedProcedure.query(async function (opts) {
+      // TODO: Make request to get user data from Scandic API

-    const hardCodedBenefits = [
-      {
-        id: 1,
-        value: "€5 voucher",
-        explanation: "to spend in bar & restaurant for each night",
-        subtitle:
-          "Lorem ipsum dolor sit amet consectetur. Pharetra lectus sagittis turpis blandit feugiat amet enim massa.",
-        href: "#",
-      },
-      {
-        id: 2,
-        value: "Breakfast to go",
-        explanation: "for early birds, when staying",
-        subtitle:
-          "Lorem ipsum dolor sit amet consectetur. Pharetra lectus sagittis turpis blandit feugiat amet enim massa.",
-        href: "#",
-      },
-      {
-        id: 3,
-        value: "15% discount",
-        explanation: "in the restaurant & the bar",
-        subtitle:
-          "Lorem ipsum dolor sit amet consectetur. Pharetra lectus sagittis turpis blandit feugiat amet enim massa.",
-        href: "#",
-      },
-    ]
-    const response = hardCodedBenefits
-    return response
+      const hardCodedBenefits = [
+        {
+          id: 1,
+          value: "€5 voucher",
+          explanation: "to spend in bar & restaurant for each night",
+          subtitle:
+            "Lorem ipsum dolor sit amet consectetur. Pharetra lectus sagittis turpis blandit feugiat amet enim massa.",
+          href: "#",
+        },
+        {
+          id: 2,
+          value: "Breakfast to go",
+          explanation: "for early birds, when staying",
+          subtitle:
+            "Lorem ipsum dolor sit amet consectetur. Pharetra lectus sagittis turpis blandit feugiat amet enim massa.",
+          href: "#",
+        },
+        {
+          id: 3,
+          value: "15% discount",
+          explanation: "in the restaurant & the bar",
+          subtitle:
+            "Lorem ipsum dolor sit amet consectetur. Pharetra lectus sagittis turpis blandit feugiat amet enim massa.",
+          href: "#",
+        },
+      ]
+      const response = hardCodedBenefits
+      return response

-    // if (!response.ok) {
-    //   throw internalServerError()
-    // }
-    // const json = await response.json()
-    // const validJson = getUserSchema.parse(json)
-    // if (!validJson) {
-    //   throw badRequestError()
-    // }
-    // return validJson
+      // if (!response.ok) {
+      //   throw internalServerError()
+      // }
+      // const json = await response.json()
+      // const validJson = getUserSchema.parse(json)
+      // if (!validJson) {
+      //   throw badRequestError()
+      // }
+      // return validJson
+    }),
+    next: protectedProcedure.query(async function (opts) {
+      // TODO: Make request to get user data from Scandic API
+
+      const hardCodedBenefits = [
+        {
+          id: 1,
+
+          explanation: "Free soft drink voucher for the kids when staying",
+        },
+        {
+          id: 2,
+
+          explanation: "Free early check in",
+        },
+        {
+          id: 3,
+          explanation: "25% extra bonus points on each stay",
+        },
+      ]
+      const response = { nextLevel: "Close Friend", perks: hardCodedBenefits }
+      return response
+
+      // if (!response.ok) {
+      //   throw internalServerError()
+      // }
+      // const json = await response.json()
+      // const validJson = getUserSchema.parse(json)
+      // if (!validJson) {
+      //   throw badRequestError()
+      // }
+      // return validJson
+    }),
  }),
 })
--- a/types/components/myPages/shortcuts.ts
+++ b/types/components/myPages/shortcuts.ts
@@ -1,5 +1,8 @@
 import type { User } from "@/types/user"
+import { ReactNode } from "react"

 export type ShortcutsProps = {
  shortcuts: User["shortcuts"]
+  title: string | ReactNode
+  subtitle?: string
 }
--- a/types/components/myPages/title.ts
+++ b/types/components/myPages/title.ts
@@ -1,4 +1,4 @@
-type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6"
+type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5"

 export interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
  as?: HeadingLevel