From 55fe30c77a5e3215c84946d1c3c32388243529c4 Mon Sep 17 00:00:00 2001 From: Christel Westerberg Date: Fri, 12 Apr 2024 13:48:50 +0200 Subject: [PATCH] fix: add correct routing --- .../my-pages/benefits/page.module.css | 4 ++-- .../MyPages/Blocks/Benefits/NextLevel/index.tsx | 16 ++++++++++++---- .../Blocks/Benefits/NextLevel/next.module.css | 13 +++++++++++++ components/MyPages/Blocks/Overview/index.tsx | 4 +++- .../MyPages/Blocks/UpcomingStays/index.tsx | 2 +- .../TempDesignSystem/Button/button.module.css | 9 ++++----- constants/routes/authRequired.ts | 3 ++- constants/routes/myPages.js | 10 ++++++++++ next.config.js | 12 ++++++------ package-lock.json | 2 +- server/routers/user/query.ts | 11 +++++------ 11 files changed, 59 insertions(+), 27 deletions(-) diff --git a/app/[lang]/(live)/(protected)/my-pages/benefits/page.module.css b/app/[lang]/(live)/(protected)/my-pages/benefits/page.module.css index 6fe98fc88..dc1c040f8 100644 --- 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: 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 { diff --git a/components/MyPages/Blocks/Benefits/NextLevel/index.tsx b/components/MyPages/Blocks/Benefits/NextLevel/index.tsx index a63ed3482..7beef2325 100644 --- a/components/MyPages/Blocks/Benefits/NextLevel/index.tsx +++ b/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 (
- + <Title as="h4" level="h2" uppercase className={styles.title}> Next Level perks and benefits.

@@ -23,7 +24,7 @@ export default async function NextLevelBenefitsBlock() {

{perks.map((perk) => (
- @@ -34,6 +35,13 @@ export default async function NextLevelBenefitsBlock() {
))}
+
+ +
) } diff --git a/components/MyPages/Blocks/Benefits/NextLevel/next.module.css b/components/MyPages/Blocks/Benefits/NextLevel/next.module.css index 6239c2960..aa24a19b8 100644 --- a/components/MyPages/Blocks/Benefits/NextLevel/next.module.css +++ b/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; diff --git a/components/MyPages/Blocks/Overview/index.tsx b/components/MyPages/Blocks/Overview/index.tsx index 82657ea30..891a477f1 100644 --- a/components/MyPages/Blocks/Overview/index.tsx +++ b/components/MyPages/Blocks/Overview/index.tsx @@ -10,7 +10,9 @@ export default function Overview({ user }: OverviewProps) { return (
- Good morning + + Good morning +
diff --git a/components/MyPages/Blocks/UpcomingStays/index.tsx b/components/MyPages/Blocks/UpcomingStays/index.tsx index 8a683f993..338140828 100644 --- a/components/MyPages/Blocks/UpcomingStays/index.tsx +++ b/components/MyPages/Blocks/UpcomingStays/index.tsx @@ -14,7 +14,7 @@ export default function UpcomingStays({ return (
- + <Title level="h2" as="h4" uppercase> Your upcoming stays diff --git a/components/TempDesignSystem/Button/button.module.css b/components/TempDesignSystem/Button/button.module.css index 9aae3f590..c6b9368e4 100644 --- a/components/TempDesignSystem/Button/button.module.css +++ b/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; diff --git a/constants/routes/authRequired.ts b/constants/routes/authRequired.ts index 99574989a..d57b39576 100644 --- a/constants/routes/authRequired.ts +++ b/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), ] diff --git a/constants/routes/myPages.js b/constants/routes/myPages.js index 0f4e98f55..699c39ed9 100644 --- a/constants/routes/myPages.js +++ b/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`, +} diff --git a/next.config.js b/next.config.js index a44696790..089d41af1 100644 --- a/next.config.js +++ b/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", }, ], diff --git a/package-lock.json b/package-lock.json index 7fe17b923..7b6ef45e4 100644 --- a/package-lock.json +++ b/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", diff --git a/server/routers/user/query.ts b/server/routers/user/query.ts index c83c1c862..8d1079d2c 100644 --- a/server/routers/user/query.ts +++ b/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) {