Merged in monorepo-step-1 (pull request #1080)

Migrate to a monorepo setup - step 1 * Move web to subfolder /apps/scandic-web * Yarn + transitive deps - Move to yarn - design-system package removed for now since yarn doesn't support the parameter for token (ie project currently broken) - Add missing transitive dependencies as Yarn otherwise prevents these imports - VS Code doesn't pick up TS path aliases unless you open /apps/scandic-web instead of root (will be fixed with monorepo) * Pin framer-motion to temporarily fix typing issue https://github.com/adobe/react-spectrum/issues/7494 * Pin zod to avoid typ error There seems to have been a breaking change in the types returned by zod where error is now returned as undefined instead of missing in the type. We should just handle this but to avoid merge conflicts just pin the dependency for now. * Pin react-intl version Pin version of react-intl to avoid tiny type issue where formatMessage does not accept a generic any more. This will be fixed in a future commit, but to avoid merge conflicts just pin for now. * Pin typescript version Temporarily pin version as newer versions as stricter and results in a type error. Will be fixed in future commit after merge. * Setup workspaces * Add design-system as a monorepo package * Remove unused env var DESIGN_SYSTEM_ACCESS_TOKEN * Fix husky for monorepo setup * Update netlify.toml * Add lint script to root package.json * Add stub readme * Fix react-intl formatMessage types * Test netlify.toml in root * Remove root toml * Update netlify.toml publish path * Remove package-lock.json * Update build for branch/preview builds Approved-by: Linus Flood
2025-02-26 10:36:17 +00:00
parent 667cab6fb6
commit 80100e7631
2731 changed files with 30986 additions and 23708 deletions
@@ -0,0 +1,35 @@
+"use client"
+
+import { useIntl } from "react-intl"
+
+import CopyIcon from "@/components/Icons/Copy"
+import Button from "@/components/TempDesignSystem/Button"
+import { toast } from "@/components/TempDesignSystem/Toasts"
+
+import styles from "./copybutton.module.css"
+
+import type { CopyButtonProps } from "@/types/components/myPages/membership"
+
+export default function CopyButton({ membershipNumber }: CopyButtonProps) {
+  const intl = useIntl()
+
+  function handleCopy() {
+    navigator.clipboard.writeText(membershipNumber)
+    toast.success(
+      intl.formatMessage({ id: "Membership ID copied to clipboard" })
+    )
+  }
+
+  return (
+    <Button
+      onClick={handleCopy}
+      className={styles.button}
+      type="button"
+      variant="icon"
+      size="small"
+      intent="tertiary"
+    >
+      <CopyIcon color="pale" />
+    </Button>
+  )
+}
@@ -0,0 +1,5 @@
+.button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
@@ -0,0 +1,21 @@
+.hero {
+  border-radius: var(--Corner-radius-xLarge);
+  display: grid;
+  gap: var(--Spacing-x2);
+  grid-template-columns: 1fr;
+  padding: var(--Spacing-x7) var(--Spacing-x6);
+}
+
+.burgundy {
+  background-color: var(--Scandic-Brand-Burgundy);
+}
+
+.red {
+  background-color: var(--Scandic-Brand-Scandic-Red);
+}
+
+@media screen and (min-width: 768px) {
+  .hero {
+    grid-template-columns: 1fr 1fr;
+  }
+}
@@ -0,0 +1,7 @@
+import type { VariantProps } from "class-variance-authority"
+
+import type { heroVariants } from "./heroVariants"
+
+export interface HeroProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "color">,
+    VariantProps<typeof heroVariants> {}
@@ -0,0 +1,15 @@
+import { cva } from "class-variance-authority"
+
+import styles from "./hero.module.css"
+
+export const heroVariants = cva(styles.hero, {
+  variants: {
+    color: {
+      burgundy: styles.burgundy,
+      red: styles.red,
+    },
+  },
+  defaultVariants: {
+    color: "red",
+  },
+})
@@ -0,0 +1,8 @@
+import { heroVariants } from "./heroVariants"
+
+import type { HeroProps } from "./hero"
+
+export default function Hero({ className, color, children }: HeroProps) {
+  const classNames = heroVariants({ className, color })
+  return <section className={classNames}>{children}</section>
+}
@@ -0,0 +1,36 @@
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+import { getIntl } from "@/i18n"
+
+import CopyButton from "../../Buttons/CopyButton"
+import { membershipNumberVariants } from "./membershipNumberVariants"
+
+import styles from "./membershipNumber.module.css"
+
+import type { MembershipNumberProps } from "@/types/components/myPages/membershipNumber"
+
+export default async function MembershipNumber({
+  className,
+  color,
+  membership,
+}: MembershipNumberProps) {
+  const intl = await getIntl()
+  const classNames = membershipNumberVariants({ className, color })
+
+  return (
+    <div className={classNames}>
+      <Caption color="pale">
+        {intl.formatMessage({ id: "Membership ID: " })}
+      </Caption>
+      <span className={styles.icon}>
+        <Caption className={styles.icon} color="pale" asChild>
+          <code data-hj-suppress>
+            {membership?.membershipNumber ?? intl.formatMessage({ id: "N/A" })}
+          </code>
+        </Caption>
+        {membership?.membershipNumber && (
+          <CopyButton membershipNumber={membership.membershipNumber} />
+        )}
+      </span>
+    </div>
+  )
+}
@@ -0,0 +1,37 @@
+.membershipContainer {
+  align-items: center;
+  background: var(--Scandic-Brand-Burgundy);
+  border-radius: var(--Corner-radius-Small);
+  display: grid;
+  grid-template-columns: 1fr;
+  justify-items: center;
+  padding: var(--Spacing-x1) var(--Spacing-x2) 0;
+}
+
+.icon {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  justify-content: center;
+  padding-left: var(--Spacing-x2);
+}
+
+.burgundy {
+  background-color: var(--Main-Brand-Burgundy);
+}
+
+.red {
+  background-color: var(--Scandic-Brand-Scandic-Red);
+}
+
+@media screen and (min-width: 768px) {
+  .membershipContainer {
+    grid-template-columns: auto auto;
+    padding: 0 0 0 var(--Spacing-x2);
+    gap: var(--Spacing-x-half);
+  }
+
+  .icon {
+    padding-left: 0;
+  }
+}
@@ -0,0 +1,15 @@
+import { cva } from "class-variance-authority"
+
+import styles from "./membershipNumber.module.css"
+
+export const membershipNumberVariants = cva(styles.membershipContainer, {
+  variants: {
+    color: {
+      burgundy: styles.burgundy,
+      red: styles.red,
+    },
+  },
+  defaultVariants: {
+    color: "burgundy",
+  },
+})
@@ -0,0 +1,41 @@
+.friend {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x4);
+  justify-content: center;
+}
+
+.header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x2);
+}
+
+.levelLabel {
+  position: relative;
+  transform: rotate(-13deg) translate(0px, -15px);
+  margin-left: -35px;
+}
+
+.friend .name {
+  text-align: center;
+}
+
+.membership {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x2);
+  justify-content: center;
+}
+
+.membershipContainer {
+  align-items: center;
+  background: var(--Scandic-Brand-Burgundy);
+  border-radius: var(--Corner-radius-Small);
+  display: grid;
+  grid-template-columns: 1fr;
+  justify-items: center;
+  padding: var(--Spacing-x1) var(--Spacing-x7) 0 var(--Spacing-x7);
+}
@@ -0,0 +1,54 @@
+import {
+  MembershipLevelEnum,
+  membershipLevels,
+} from "@/constants/membershipLevels"
+
+import MembershipLevelIcon from "@/components/Levels/Icon"
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Title from "@/components/TempDesignSystem/Text/Title"
+import { getIntl } from "@/i18n"
+import { isHighestMembership } from "@/utils/user"
+
+import styles from "./friend.module.css"
+
+import type { FriendProps } from "@/types/components/myPages/friend"
+
+export default async function Friend({
+  children,
+  membership,
+  name,
+}: FriendProps) {
+  const intl = await getIntl()
+  if (!membership?.membershipLevel) {
+    return null
+  }
+  const isHighestLevel = isHighestMembership(membership.membershipLevel)
+
+  const lvlMessageHighest = intl.formatMessage({ id: "Highest level" })
+
+  const lvlMessageLevel = intl.formatMessage(
+    { id: "Level {level}" },
+    { level: membershipLevels[membership.membershipLevel] }
+  )
+
+  return (
+    <section className={styles.friend}>
+      <header className={styles.header}>
+        <Body color="white" textTransform="bold" textAlign="center">
+          {isHighestLevel ? lvlMessageHighest : lvlMessageLevel}
+        </Body>
+        <MembershipLevelIcon
+          level={MembershipLevelEnum[membership.membershipLevel]}
+          height="110"
+          width="220"
+        />
+      </header>
+      <div className={styles.membership}>
+        <Title data-hj-suppress className={styles.name} color="pale" level="h3">
+          {name}
+        </Title>
+        {children}
+      </div>
+    </section>
+  )
+}
@@ -0,0 +1,36 @@
+import { Lang } from "@/constants/languages"
+import { dt } from "@/lib/dt"
+
+import Body from "@/components/TempDesignSystem/Text/Body"
+import { getIntl } from "@/i18n"
+import { getLang } from "@/i18n/serverContext"
+import { getMembership } from "@/utils/user"
+
+import type { UserProps } from "@/types/components/myPages/user"
+
+export default async function ExpiringPoints({ user }: UserProps) {
+  const intl = await getIntl()
+  const membership = getMembership(user.memberships)
+
+  if (!membership || !membership.pointsToExpire) {
+    //  TODO: handle this case?
+    return null
+  }
+  const d = dt(membership.pointsExpiryDate)
+
+  const dateFormat = getLang() == Lang.fi ? "DD.MM.YYYY" : "YYYY-MM-DD"
+
+  return (
+    <section>
+      <Body color="white" textTransform="bold" textAlign="center">
+        {intl.formatMessage(
+          { id: "{points} spendable points expiring by {date}" },
+          {
+            points: intl.formatNumber(membership.pointsToExpire),
+            date: d.format(dateFormat),
+          }
+        )}
+      </Body>
+    </section>
+  )
+}
@@ -0,0 +1,13 @@
+.points {
+  display: grid;
+  gap: var(--Spacing-x5);
+  text-wrap: balance;
+}
+
+@media screen and (min-width: 768px) {
+  .points {
+    grid-auto-flow: column;
+    row-gap: 0;
+    column-gap: var(--Spacing-x2);
+  }
+}
@@ -0,0 +1,5 @@
+import styles from "./container.module.css"
+
+export default function PointsContainer({ children }: React.PropsWithChildren) {
+  return <section className={styles.points}>{children}</section>
+}
@@ -0,0 +1,41 @@
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Title from "@/components/TempDesignSystem/Text/Title"
+import { getIntl } from "@/i18n"
+
+import styles from "./pointsColumn.module.css"
+
+import type { PointsColumnProps } from "@/types/components/myPages/points"
+
+export async function PointsColumn({
+  title,
+  subtitle,
+  value,
+}: PointsColumnProps) {
+  const intl = await getIntl()
+
+  let number = "N/A"
+  if (typeof value === "number") {
+    number = intl.formatNumber(value)
+  }
+
+  return (
+    <article className={styles.article}>
+      <Body
+        color="white"
+        textTransform="bold"
+        textAlign="center"
+        className={styles.firstRow}
+      >
+        {title}
+      </Body>
+      <Title color="white" level="h2" textAlign="center">
+        {number}
+      </Title>
+      {subtitle ? (
+        <Body color="white" textAlign="center">
+          {subtitle}
+        </Body>
+      ) : null}
+    </article>
+  )
+}
@@ -0,0 +1,9 @@
+@media screen and (min-width: 768px) {
+  .firstRow {
+    align-content: flex-end;
+  }
+
+  .article {
+    display: grid;
+  }
+}
@@ -0,0 +1,53 @@
+import { MembershipLevelEnum } from "@/constants/membershipLevels"
+import { serverClient } from "@/lib/trpc/server"
+
+import { getIntl } from "@/i18n"
+import { getMembership } from "@/utils/user"
+
+import PointsContainer from "./Container"
+import { PointsColumn } from "./PointsColumn"
+
+import type { UserProps } from "@/types/components/myPages/user"
+
+export default async function Points({ user }: UserProps) {
+  const intl = await getIntl()
+
+  const membership = getMembership(user.memberships)
+
+  const nextLevel =
+    membership?.nextLevel && MembershipLevelEnum[membership.nextLevel]
+      ? await serverClient().contentstack.loyaltyLevels.byLevel({
+          level: MembershipLevelEnum[membership.nextLevel],
+        })
+      : null
+
+  return (
+    <PointsContainer>
+      <PointsColumn
+        value={membership?.currentPoints}
+        title={intl.formatMessage({ id: "Your points to spend" })}
+        subtitle={intl.formatMessage({ id: "as of today" })}
+      />
+      {nextLevel && (
+        <PointsColumn
+          value={membership?.pointsRequiredToNextlevel}
+          title={intl.formatMessage({ id: "Points needed to level up" })}
+          subtitle={intl.formatMessage(
+            { id: "next level: {nextLevel}" },
+            { nextLevel: nextLevel.name }
+          )}
+        />
+      )}
+      {/* TODO: Show NextLevelNightsColumn when nightsToTopTier data is correct from Antavo */}
+      {/* {membership?.nightsToTopTier && (
+        <NextLevelNightsColumn
+          nights={membership.nightsToTopTier}
+          subtitle={
+            membership.tierExpirationDate &&
+            `by ${membership.tierExpirationDate}`
+          }
+        />
+      )} */}
+    </PointsContainer>
+  )
+}
@@ -0,0 +1,18 @@
+import Divider from "@/components/TempDesignSystem/Divider"
+
+import ExpiringPoints from "./ExpiringPoints"
+import Points from "./Points"
+
+import styles from "./stats.module.css"
+
+import type { UserProps } from "@/types/components/myPages/user"
+
+export default function Stats({ user }: UserProps) {
+  return (
+    <section className={styles.stats}>
+      <Points user={user} />
+      <Divider color="pale" />
+      <ExpiringPoints user={user} />
+    </section>
+  )
+}
@@ -0,0 +1,11 @@
+.stats {
+  align-content: center;
+  display: grid;
+  gap: var(--Spacing-x2);
+}
+
+@media screen and (min-width: 1367px) {
+  .stats {
+    gap: var(--Spacing-x4);
+  }
+}
@@ -0,0 +1,46 @@
+import { getProfile } from "@/lib/trpc/memoizedRequests"
+
+import SectionContainer from "@/components/Section/Container"
+import SectionHeader from "@/components/Section/Header"
+import SectionLink from "@/components/Section/Link"
+import Divider from "@/components/TempDesignSystem/Divider"
+
+import Hero from "./Friend/Hero"
+import MembershipNumber from "./Friend/MembershipNumber"
+import Friend from "./Friend"
+import Stats from "./Stats"
+
+import styles from "./overview.module.css"
+
+import type { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"
+
+export default async function Overview({
+  link,
+  subtitle,
+  title,
+}: AccountPageComponentProps) {
+  const user = await getProfile()
+  if (!user || "error" in user) {
+    return null
+  }
+
+  return (
+    <SectionContainer>
+      <SectionHeader
+        link={link}
+        preamble={subtitle}
+        title={title}
+        headingAs={"h3"}
+        headingLevel={"h1"}
+      />
+      <Hero color="red">
+        <Friend membership={user.membership} name={user.name}>
+          <MembershipNumber color="burgundy" membership={user.membership} />
+        </Friend>
+        <Divider className={styles.divider} color="peach" />
+        <Stats user={user} />
+      </Hero>
+      <SectionLink link={link} variant="mobile" />
+    </SectionContainer>
+  )
+}
@@ -0,0 +1,22 @@
+.divider {
+  margin-top: var(--Spacing-x2);
+}
+
+@media screen and (max-width: 767px) {
+  .container {
+    /* Full-width override styling */
+    left: 50%;
+    margin-left: -50vw;
+    margin-right: -50vw;
+    padding: 0 var(--Spacing-x2);
+    position: relative;
+    right: 50%;
+    width: 100dvw;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .divider {
+    display: none;
+  }
+}