fix: add correct routing

app/[lang]/(live)/(protected)/my-pages/benefits/page.module.css

@@ -1,6 +1,6 @@
 .container {
   display: flex;
-  gap: 3.4rem;
+  gap: 4.2rem;
   flex-direction: column;
   max-width: var(--max-width);
   padding-left: 2rem;
@@ -36,7 +36,7 @@
   .container {
     padding-left: 0;
     padding-right: 0;
-    gap: 4.7rem;
+    gap: 6.4rem;
   }
 
   .preamble {

components/MyPages/Blocks/Benefits/NextLevel/index.tsx

@@ -1,18 +1,19 @@
 import { serverClient } from "@/lib/trpc/server"
 
+import { Lock } from "react-feather"
 import Title from "../../../Title"
 import Button from "@/components/TempDesignSystem/Button"
-import { Lock } from "react-feather"
+import Link from "next/link"
 
 import styles from "./next.module.css"
 
 export default async function NextLevelBenefitsBlock() {
-  const { nextLevel, perks } = await serverClient().user.benefits.next()
+  const { nextLevel, perks } = await serverClient().user.benefits.nextLevel()
 
   return (
     <section className={styles.container}>
       <header className={styles.header}>
-        <Title as="h3" uppercase>
+        <Title as="h4" level="h2" uppercase className={styles.title}>
           Next Level perks and benefits.
         </Title>
         <p className={styles.subtitle}>
@@ -23,7 +24,7 @@ export default async function NextLevelBenefitsBlock() {
       <div className={styles.cardContainer}>
         {perks.map((perk) => (
           <article key={perk.id} className={styles.card}>
-            <Button type="button" intent="secondary" variant="icon" disabled>
+            <Button type="button" intent="secondary" disabled>
               <Lock height={16} />
               Level up to unlock
             </Button>
@@ -34,6 +35,13 @@ export default async function NextLevelBenefitsBlock() {
           </article>
         ))}
       </div>
+      <div className={styles.buttonContainer}>
+        <Button intent="primary" asChild>
+          <Link href="#" className={styles.buttonText}>
+            Explore all levels and benefits
+          </Link>
+        </Button>
+      </div>
     </section>
   )
 }

components/MyPages/Blocks/Benefits/NextLevel/next.module.css

@@ -8,6 +8,10 @@
   gap: 0.4rem;
 }
 
+.title {
+  font-weight: 600;
+}
+
 .card {
   text-decoration: none;
   display: flex;
@@ -31,6 +35,15 @@
   font-size: var(--typography-Subtitle-Mobile-fontSize, 18px);
 }
 
+.buttonContainer {
+  display: flex;
+  justify-content: center;
+}
+
+.buttonText {
+  text-decoration: none;
+}
+
 @media screen and (min-width: 950px) {
   .cardContainer {
     grid-template-columns: 1fr 1fr 1fr;

components/MyPages/Blocks/Overview/index.tsx

@@ -10,7 +10,9 @@ export default function Overview({ user }: OverviewProps) {
   return (
     <section className={styles.container}>
       <header>
-        <Title uppercase>Good morning</Title>
+        <Title as="h2" uppercase>
+          Good morning
+        </Title>
       </header>
       <section className={styles.overview}>
         <Friend user={user} />

components/MyPages/Blocks/UpcomingStays/index.tsx

@@ -14,7 +14,7 @@ export default function UpcomingStays({
   return (
     <section className={styles.container}>
       <header className={styles.header}>
-        <Title level="h2" uppercase>
+        <Title level="h2" as="h4" uppercase>
           Your upcoming stays
         </Title>
         <Link className={styles.link} href="#">

components/TempDesignSystem/Button/button.module.css

@@ -14,11 +14,11 @@
   display: flex;
   font-family: var(--ff-fira-sans);
   font-size: 1.8rem;
-  font-weight: 600;
-  gap: 1.6rem;
+  font-weight: 500;
+  gap: 1rem;
   letter-spacing: 1%;
   line-height: 2.2rem;
-  padding: 1.3rem 3rem;
+  padding: 0.75rem 1.65rem;
 }
 
 .icon {
@@ -32,7 +32,7 @@
   border: 2px solid transparent;
   outline: 1px solid transparent;
   border-radius: 46px;
-  padding: 6px 12px;
+  color: var(--Main-Grey-00, #fff);
 }
 
 .primary:hover {
@@ -51,7 +51,6 @@
   background-color: transparent;
   color: var(--some-grey-color, #444343);
   border-radius: 46px;
-  padding: 6px 12px;
   font-size: 12px;
   display: flex;
   align-items: center;

constants/routes/authRequired.ts

@@ -1,4 +1,4 @@
-import { myPages, profile } from "./myPages"
+import { benefits, myPages, profile } from "./myPages"
 
 /**
  * These are routes in code we know requires auth
@@ -8,4 +8,5 @@ import { myPages, profile } from "./myPages"
 export const authRequired = [
   ...Object.values(myPages),
   ...Object.values(profile),
+  ...Object.values(benefits),
 ]

constants/routes/myPages.js

@@ -26,3 +26,13 @@ export const profile = {
   no: `${myPages.no}/profile-no`,
   sv: `${myPages.sv}/profile-sv`,
 }
+
+/** @type {import('@/types/routes').LangRoute} */
+export const benefits = {
+  da: `${myPages.da}/fordele`,
+  de: `${myPages.de}/vorteile`,
+  en: `${myPages.en}/benefits`,
+  fi: `${myPages.fi}/etuja`,
+  no: `${myPages.no}/fordeler`,
+  sv: `${myPages.sv}/formaner`,
+}

next.config.js

@@ -1,7 +1,7 @@
 import createJiti from "jiti"
 
 import { login } from "./constants/routes/handleAuth.js"
-import { myPages, profile } from "./constants/routes/myPages.js"
+import { myPages, profile, benefits } from "./constants/routes/myPages.js"
 
 const jiti = createJiti(new URL(import.meta.url).pathname)
 jiti("./env/server")
@@ -67,23 +67,23 @@ const nextConfig = {
         { source: profile.no, destination: "/no/my-pages/profile" },
         { source: profile.sv, destination: "/sv/my-pages/profile" },
         {
-          source: `/da/${benefitsPageNames.da}`,
+          source: `${benefits.da}`,
           destination: "/da/my-pages/benefits",
         },
         {
-          source: `/de/${benefitsPageNames.de}`,
+          source: `${benefits.de}`,
           destination: "/de/my-pages/benefits",
         },
         {
-          source: `/fi/${benefitsPageNames.fi}`,
+          source: `${benefits.fi}`,
           destination: "/fi/my-pages/benefits",
         },
         {
-          source: `/no/${benefitsPageNames.no}`,
+          source: `${benefits.no}`,
           destination: "/no/my-pages/benefits",
         },
         {
-          source: `/sv/${benefitsPageNames.sv}`,
+          source: `${benefits.sv}`,
           destination: "/sv/my-pages/benefits",
         },
       ],

package-lock.json

@@ -2237,7 +2237,7 @@
     },
     "node_modules/@scandic-hotels/design-system": {
       "version": "0.1.0",
-      "resolved": "git+https://x-token-auth@bitbucket.org/scandic-swap/design-system.git#ea5ae53b69bf868f88728db3baa81006fa0ccad4",
+      "resolved": "git+https://x-token-auth:ATCTT3xFfGN0gu4BSBWR71ifMM-_iAT2ip_jnjF0OjTkYhEB3sn71fPCGuMUA7O3BxJ2oHptZVGAlVvMUoeo3Wfute7RYido9HlvrVjemqns9hR3WSf6eNHhsSy5bLtxQ6VK7mnSSAGHaCqTejxirs_PmOB_jPIi1Ft4OEDehtnMxCteg8rO-IE%3D27DF8E0B@bitbucket.org/scandic-swap/design-system.git#ea5ae53b69bf868f88728db3baa81006fa0ccad4",
       "peerDependencies": {
         "react": "^18.2.0",
         "react-aria-components": "^1.0.1",

server/routers/user/query.ts

@@ -1,7 +1,6 @@
 import { badRequestError, internalServerError } from "@/server/errors/trpc"
 import { protectedProcedure, router } from "@/server/trpc"
 import { getUserSchema } from "./output"
-import { benefitsPageNames } from "@/constants/myPages"
 
 export const userQueryRouter = router({
   get: protectedProcedure.query(async function (opts) {
@@ -27,7 +26,7 @@ export const userQueryRouter = router({
     current: protectedProcedure.query(async function (opts) {
       // TODO: Make request to get user data from Scandic API
 
-      const hardCodedBenefits = [
+      const currentBenefits = [
         {
           id: 1,
           value: "€5 voucher",
@@ -53,7 +52,7 @@ export const userQueryRouter = router({
           href: "#",
         },
       ]
-      const response = hardCodedBenefits
+      const response = currentBenefits
       return response
 
       // if (!response.ok) {
@@ -66,10 +65,10 @@ export const userQueryRouter = router({
       // }
       // return validJson
     }),
-    next: protectedProcedure.query(async function (opts) {
+    nextLevel: protectedProcedure.query(async function (opts) {
       // TODO: Make request to get user data from Scandic API
 
-      const hardCodedBenefits = [
+      const nextLevelPerks = [
         {
           id: 1,
 
@@ -85,7 +84,7 @@ export const userQueryRouter = router({
           explanation: "25% extra bonus points on each stay",
         },
       ]
-      const response = { nextLevel: "Close Friend", perks: hardCodedBenefits }
+      const response = { nextLevel: "Close Friend", perks: nextLevelPerks }
       return response
 
       // if (!response.ok) {