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 f151c4c6e..6fe98fc88 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: 2rem; + gap: 3.4rem; flex-direction: column; max-width: var(--max-width); padding-left: 2rem; @@ -10,7 +10,7 @@ .header { display: grid; gap: 2rem; - margin-top: 4rem; + padding-top: 4rem; } .title { @@ -24,18 +24,22 @@ .preamble { font-weight: 400; font-family: var(--fira-sans); - font-size: 2.4rem; + font-size: var(--typography-Subtitle-Mobile-fontSize, 18px); margin: 0; } @media screen and (min-width: 950px) { .header { - margin: 0; + padding: 0; } .container { padding-left: 0; padding-right: 0; - gap: 3.4rem; + gap: 4.7rem; + } + + .preamble { + font-size: var(--typography-Subtitle-Desktop-fontSize, 18px); } } diff --git a/components/MyPages/Blocks/Benefits/CurrentLevel/index.tsx b/components/MyPages/Blocks/Benefits/CurrentLevel/index.tsx index fc537723d..55c7ac3aa 100644 --- a/components/MyPages/Blocks/Benefits/CurrentLevel/index.tsx +++ b/components/MyPages/Blocks/Benefits/CurrentLevel/index.tsx @@ -10,7 +10,7 @@ export default async function CurrentBenefitsBlock() {
{benefits.map((benefit) => ( - + <Title level="h3" as="h5" className={styles.title}> <span className={styles.value}>{benefit.value}</span>{" "} {benefit.explanation} diff --git a/components/MyPages/Blocks/Benefits/NextLevel/index.tsx b/components/MyPages/Blocks/Benefits/NextLevel/index.tsx new file mode 100644 index 000000000..a63ed3482 --- /dev/null +++ b/components/MyPages/Blocks/Benefits/NextLevel/index.tsx @@ -0,0 +1,39 @@ +import { serverClient } from "@/lib/trpc/server" + +import Title from "../../../Title" +import Button from "@/components/TempDesignSystem/Button" +import { Lock } from "react-feather" + +import styles from "./next.module.css" + +export default async function NextLevelBenefitsBlock() { + const { nextLevel, perks } = await serverClient().user.benefits.next() + + return ( +
+
+ + Next Level perks and benefits. + +

+ Here's a sneak peek at the extra benefits waiting just for you, + when you level up to {nextLevel} +

+
+
+ {perks.map((perk) => ( +
+ +
+ As our {nextLevel}{" "} +

{perk.explanation}

+
+
+ ))} +
+
+ ) +} diff --git a/components/MyPages/Blocks/Benefits/NextLevel/next.module.css b/components/MyPages/Blocks/Benefits/NextLevel/next.module.css new file mode 100644 index 000000000..6239c2960 --- /dev/null +++ b/components/MyPages/Blocks/Benefits/NextLevel/next.module.css @@ -0,0 +1,47 @@ +.container { + display: grid; + gap: 1.5rem; +} + +.cardContainer { + display: grid; + gap: 0.4rem; +} + +.card { + text-decoration: none; + display: flex; + flex-direction: column; + gap: 2rem; + justify-content: center; + align-items: center; + padding: 2rem; + border-radius: 4px; + background-color: var(--some-grey-color, #e5e5e5); + text-align: center; +} + +.level { + font-size: var(--typography-Script-Mobile-fontSize, 18px); + font-weight: var(--typography-Script-Mobile-fontWeight); + font-style: italic; /* font-family: var(--ff-biro-script-plus); */ +} + +.subtitle { + font-size: var(--typography-Subtitle-Mobile-fontSize, 18px); +} + +@media screen and (min-width: 950px) { + .cardContainer { + grid-template-columns: 1fr 1fr 1fr; + } + + .level { + font-size: var(--typography-Script-Desktop-fontSize); + font-weight: var(--typography-Script-Desktop-fontWeight); + } + + .subtitle { + font-size: var(--typography-Subtitle-Desktop-fontSize, 18px); + } +} diff --git a/components/MyPages/Title/title.module.css b/components/MyPages/Title/title.module.css index 872eb70ea..0601b3d78 100644 --- a/components/MyPages/Title/title.module.css +++ b/components/MyPages/Title/title.module.css @@ -10,52 +10,52 @@ .h1 { font-size: var(--typography-Title1-Mobile-fontSize); - line-height: var(--typography-Title1-Mobile-lineHeight) + "%"; + line-height: var(--typography-Title1-Mobile-lineHeight); } .h2 { font-size: var(--typography-Title2-Mobile-fontSize); - line-height: var(--typography-Title2-Mobile-lineHeight) + "%"; + line-height: var(--typography-Title2-Mobile-lineHeight); } .h3 { font-size: var(--typography-Title3-Mobile-fontSize); - line-height: var(--typography-Title3-Mobile-lineHeight) + "%"; + line-height: var(--typography-Title3-Mobile-lineHeight); } .h4 { font-size: var(--typography-Title4-Mobile-fontSize); - line-height: var(--typography-Title4-Mobile-lineHeight) + "%"; + line-height: var(--typography-Title4-Mobile-lineHeight); } .h5 { font-size: var(--typography-Title5-Mobile-fontSize); - line-height: var(--typography-Title5-Mobile-lineHeight) + "%"; + line-height: var(--typography-Title5-Mobile-lineHeight); } @media screen and (min-width: 950px) { .h1 { font-size: var(--typography-Title1-Desktop-fontSize); - line-height: var(--typography-Title1-Desktop-lineHeight) + "%"; + line-height: var(--typography-Title1-Desktop-lineHeight); } .h2 { font-size: var(--typography-Title2-Desktop-fontSize); - line-height: var(--typography-Title2-Desktop-lineHeight) + "%"; + line-height: var(--typography-Title2-Desktop-lineHeight); } .h3 { font-size: var(--typography-Title3-Desktop-fontSize); - line-height: var(--typography-Title3-Desktop-lineHeight) + "%"; + line-height: var(--typography-Title3-Desktop-lineHeight); } .h4 { font-size: var(--typography-Title4-Desktop-fontSize); - line-height: var(--typography-Title4-Desktop-lineHeight) + "%"; + line-height: var(--typography-Title4-Desktop-lineHeight); } .h5 { font-size: var(--typography-Title5-Desktop-fontSize); - line-height: var(--typography-Title5-Desktop-lineHeight) + "%"; + line-height: var(--typography-Title5-Desktop-lineHeight); } } diff --git a/components/TempDesignSystem/Button/button.module.css b/components/TempDesignSystem/Button/button.module.css index ea5e9f4ca..9aae3f590 100644 --- a/components/TempDesignSystem/Button/button.module.css +++ b/components/TempDesignSystem/Button/button.module.css @@ -23,4 +23,53 @@ .icon { font-size: 1.8rem; + align-items: baseline; +} + +/* Primary styles */ +.primary { + background-color: var(--some-grey-color, #444343); + border: 2px solid transparent; + outline: 1px solid transparent; + border-radius: 46px; + padding: 6px 12px; +} + +.primary:hover { + background: var(--some-grey-color, #444343); +} + +.primary:active, +.primary:focus { + border: var(--some-grey-color, #444343); + outline: var(--some-grey-color, #444343); +} + +/* Secondary styles */ +.secondary { + border: 1px solid var(--some-grey-color, #444343); + background-color: transparent; + color: var(--some-grey-color, #444343); + border-radius: 46px; + padding: 6px 12px; + font-size: 12px; + display: flex; + align-items: center; +} + +.secondary:hover { + border: 1px solid var(--some-grey-color, #444343); +} + +.secondary:active, +.secondary:focus { + border: 1px solid var(--some-grey-color, #444343); +} + +/* Disabled styles */ +.btn:disabled { + border: 1px solid var(--some-grey-color, #444343); + background-color: transparent; + color: var(--some-grey-color, #444343); + cursor: not-allowed; } diff --git a/components/TempDesignSystem/Button/index.tsx b/components/TempDesignSystem/Button/index.tsx index 79658da92..1c09b6f63 100644 --- a/components/TempDesignSystem/Button/index.tsx +++ b/components/TempDesignSystem/Button/index.tsx @@ -10,8 +10,14 @@ export default function Button({ asChild = false, className, variant, + intent, ...props }: ButtonProps) { const Comp = asChild ? Slot : "button" - return + return ( + + ) } diff --git a/components/TempDesignSystem/Button/variants.ts b/components/TempDesignSystem/Button/variants.ts index c629d09de..81d90eeba 100644 --- a/components/TempDesignSystem/Button/variants.ts +++ b/components/TempDesignSystem/Button/variants.ts @@ -8,6 +8,10 @@ export const buttonVariants = cva(styles.btn, { default: styles.default, icon: styles.icon, }, + intent: { + primary: styles.primary, + secondary: styles.secondary, + }, }, defaultVariants: { variant: "default", diff --git a/lib/graphql/Fragments/CurrentBlocksPage/Breadcrumbs.graphql b/lib/graphql/Fragments/Breadcrumbs.graphql similarity index 100% rename from lib/graphql/Fragments/CurrentBlocksPage/Breadcrumbs.graphql rename to lib/graphql/Fragments/Breadcrumbs.graphql diff --git a/lib/graphql/Fragments/CurrentBlocksPage/PageLinks.graphql b/lib/graphql/Fragments/PageLinks.graphql similarity index 100% rename from lib/graphql/Fragments/CurrentBlocksPage/PageLinks.graphql rename to lib/graphql/Fragments/PageLinks.graphql diff --git a/lib/graphql/Fragments/CurrentBlocksPage/Preamble.graphql b/lib/graphql/Fragments/Preamble.graphql similarity index 100% rename from lib/graphql/Fragments/CurrentBlocksPage/Preamble.graphql rename to lib/graphql/Fragments/Preamble.graphql diff --git a/lib/graphql/Query/BenefitPage.graphql b/lib/graphql/Query/BenefitPage.graphql deleted file mode 100644 index 9db523ae3..000000000 --- a/lib/graphql/Query/BenefitPage.graphql +++ /dev/null @@ -1,45 +0,0 @@ -fragment Breadcrumbs on MyPage { - breadcrumbs { - parents { - href - title - } - title - } -} - -query GetBenefitsPage($locale: String!, $url: String!) { - all_my_page(where: { code_defined_route: $url, locale: $locale }) { - items { - blocks { - ... on MyPageBlocksShortcuts { - __typename - shortcuts { - external_link { - href - title - } - } - } - ... on MyPageBlocksNextLevelBlock { - __typename - next_level_block { - subtitle - title - } - } - ... on MyPageBlocksPersonalBenefitsBlock { - __typename - personal_benefits_block { - is_visible - } - } - } - ...Breadcrumbs - preamble - title - url - } - total - } -} diff --git a/lib/graphql/Query/CurrentBlockPage.graphql b/lib/graphql/Query/CurrentBlockPage.graphql index dcab7ed98..b275b328f 100644 --- a/lib/graphql/Query/CurrentBlockPage.graphql +++ b/lib/graphql/Query/CurrentBlockPage.graphql @@ -3,9 +3,9 @@ #import "../Fragments/Blocks/List.graphql" #import "../Fragments/Blocks/Puff.graphql" #import "../Fragments/Blocks/Text.graphql" -#import "../Fragments/CurrentBlocksPage/Breadcrumbs.graphql" +#import "../Fragments/Breadcrumbs.graphql" #import "../Fragments/Hero.graphql" -#import "../Fragments/CurrentBlocksPage/Preamble.graphql" +#import "../Fragments/Preamble.graphql" query GetCurrentBlockPage($locale: String!, $url: String!) { all_current_blocks_page(limit: 1, locale: $locale, where: { url: $url }) { diff --git a/package-lock.json b/package-lock.json index 38b9dd07b..7fe17b923 100644 --- 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.3", + "@scandic-hotels/design-system": "git+https://x-token-auth:$DESIGN_SYSTEM_ACCESS_TOKEN@bitbucket.org/scandic-swap/design-system.git#v0.1.0-rc.5", "@t3-oss/env-nextjs": "^0.9.2", "@tanstack/react-query": "^5.28.6", "@trpc/client": "^11.0.0-next-beta.318", @@ -2237,7 +2237,7 @@ }, "node_modules/@scandic-hotels/design-system": { "version": "0.1.0", - "resolved": "git+https://x-token-auth:ATCTT3xFfGN0gu4BSBWR71ifMM-_iAT2ip_jnjF0OjTkYhEB3sn71fPCGuMUA7O3BxJ2oHptZVGAlVvMUoeo3Wfute7RYido9HlvrVjemqns9hR3WSf6eNHhsSy5bLtxQ6VK7mnSSAGHaCqTejxirs_PmOB_jPIi1Ft4OEDehtnMxCteg8rO-IE%3D27DF8E0B@bitbucket.org/scandic-swap/design-system.git#33f0dc9660683409679f9f1a977dec049608377e", + "resolved": "git+https://x-token-auth@bitbucket.org/scandic-swap/design-system.git#ea5ae53b69bf868f88728db3baa81006fa0ccad4", "peerDependencies": { "react": "^18.2.0", "react-aria-components": "^1.0.1", diff --git a/package.json b/package.json index e0f2c0368..77e57a9bc 100644 --- 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.3", + "@scandic-hotels/design-system": "git+https://x-token-auth:$DESIGN_SYSTEM_ACCESS_TOKEN@bitbucket.org/scandic-swap/design-system.git#v0.1.0-rc.5", "@t3-oss/env-nextjs": "^0.9.2", "@tanstack/react-query": "^5.28.6", "@trpc/client": "^11.0.0-next-beta.318", diff --git a/types/requests/benefitPage.ts b/types/requests/benefitPage.ts deleted file mode 100644 index 97fbd7209..000000000 --- a/types/requests/benefitPage.ts +++ /dev/null @@ -1,56 +0,0 @@ -import type { AllRequestResponse } from "./utils/all" -import type { MyPageBlocksEnum, Typename } from "./utils/typename" - -type Shortcuts = { - title: string - subtitle: string - external_link: { - href: string - title: string - } -} - -type PersonalBenefitsBlock = { - is_visible: boolean -} - -type NextLevelBlock = { - title: string - subtitle: string -} - -export type Blocks = - | Typename - | Typename< - PersonalBenefitsBlock, - MyPageBlocksEnum.MyPageBlocksPersonalBenefitsBlock - > - | Typename - -export type Breadcrumb = { - href: string - title: string -} - -export type Breadcrumbs = { - parents: Breadcrumb[] - title: string -} - -export type BenefitPage = { - content: Blocks[] - breadcrumbs: Breadcrumbs - code_defined_route: string - preamble: string - system: { - created_at: string - uid: string - updated_at: string - } - title: string - url: string -} - -export type GetBenefitsPageData = { - all_my_page: AllRequestResponse -} diff --git a/types/requests/utils/typename.ts b/types/requests/utils/typename.ts index 10840abf6..5c59848bf 100644 --- a/types/requests/utils/typename.ts +++ b/types/requests/utils/typename.ts @@ -16,10 +16,3 @@ export type BlocksTypename = keyof typeof BlocksTypenameEnum export type Typename = T & { __typename: K } - -export enum MyPageBlocksEnum { - MyPageBlocksNextLevelBlock = "MyPageBlocksNextLevelBlock", - MyPageBlocksPersonalBenefitsBlock = "MyPageBlocksPersonalBenefitsBlock", - MyPageBlocksShortcuts = "MyPageBlocksShortcuts", -} -export type MyPageBlocksTypename = keyof typeof MyPageBlocksEnum