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

apps/scandic-web/components/Profile/AddCreditCardButton/addCreditCardButton.module.css

@@ -0,0 +1,3 @@
+.addCreditCardButton {
+  justify-self: flex-start;
+}

apps/scandic-web/components/Profile/AddCreditCardButton/index.tsx

@@ -0,0 +1,105 @@
+"use client"
+
+import { usePathname, useRouter, useSearchParams } from "next/navigation"
+import { useEffect, useRef } from "react"
+import { useIntl } from "react-intl"
+
+import { trpc } from "@/lib/trpc/client"
+
+import { PlusCircleIcon } from "@/components/Icons"
+import Button from "@/components/TempDesignSystem/Button"
+import { toast } from "@/components/TempDesignSystem/Toasts"
+import useLang from "@/hooks/useLang"
+
+import styles from "./addCreditCardButton.module.css"
+
+function useAddCardResultToast() {
+  const hasRunOnce = useRef(false)
+  const intl = useIntl()
+  const router = useRouter()
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+
+  useEffect(() => {
+    if (hasRunOnce.current) return
+
+    const success = searchParams.get("success")
+    const failure = searchParams.get("failure")
+    const cancel = searchParams.get("cancel")
+    const error = searchParams.get("error")
+
+    if (success) {
+      setTimeout(() => {
+        toast.success(
+          intl.formatMessage({ id: "Your card was successfully saved!" })
+        )
+      })
+    } else if (cancel) {
+      setTimeout(() => {
+        toast.warning(
+          intl.formatMessage({
+            id: "You canceled adding a new credit card.",
+          })
+        )
+      })
+    } else if (failure || error) {
+      setTimeout(() => {
+        toast.error(
+          intl.formatMessage({
+            id: "Something went wrong and we couldn't add your card. Please try again later.",
+          })
+        )
+      })
+    }
+
+    router.replace(pathname)
+    hasRunOnce.current = true
+  }, [intl, pathname, router, searchParams])
+}
+
+export default function AddCreditCardButton() {
+  const intl = useIntl()
+  const router = useRouter()
+  const lang = useLang()
+  useAddCardResultToast()
+
+  const initiateAddCard = trpc.user.creditCard.add.useMutation({
+    onSuccess: (result) => {
+      if (result?.attribute.link) {
+        router.push(result.attribute.link)
+        router.refresh() // / Could be removed on NextJs 15
+      } else {
+        toast.error(
+          intl.formatMessage({
+            id: "We could not add a card right now, please try again later.",
+          })
+        )
+      }
+    },
+    onError: () => {
+      toast.error(
+        intl.formatMessage({
+          id: "An error occurred when adding a credit card, please try again later.",
+        })
+      )
+    },
+  })
+
+  return (
+    <Button
+      className={styles.addCreditCardButton}
+      variant="icon"
+      theme="base"
+      intent="text"
+      onClick={() =>
+        initiateAddCard.mutate({
+          language: lang,
+        })
+      }
+      wrapping
+    >
+      <PlusCircleIcon color="burgundy" />
+      {intl.formatMessage({ id: "Add new card" })}
+    </Button>
+  )
+}

apps/scandic-web/components/Profile/CreditCardList/CreditCardList.module.css

@@ -0,0 +1,4 @@
+.cardContainer {
+  display: grid;
+  gap: var(--Spacing-x1);
+}

apps/scandic-web/components/Profile/CreditCardList/index.tsx

@@ -0,0 +1,31 @@
+"use client"
+
+import React from "react"
+
+import { trpc } from "@/lib/trpc/client"
+
+import CreditCardRow from "../CreditCardRow"
+
+import styles from "./CreditCardList.module.css"
+
+import type { CreditCard } from "@/types/user"
+
+export default function CreditCardList({
+  initialData,
+}: {
+  initialData?: CreditCard[] | null
+}) {
+  const creditCards = trpc.user.creditCards.useQuery(undefined, { initialData })
+
+  if (!creditCards.data || !creditCards.data.length) {
+    return null
+  }
+
+  return (
+    <div className={styles.cardContainer}>
+      {creditCards.data.map((card) => (
+        <CreditCardRow key={card.id} card={card} />
+      ))}
+    </div>
+  )
+}

apps/scandic-web/components/Profile/CreditCardRow/creditCardRow.module.css

@@ -0,0 +1,10 @@
+.card {
+  display: grid;
+  align-items: center;
+  column-gap: var(--Spacing-x1);
+  grid-template-columns: auto auto auto 1fr;
+  justify-items: flex-end;
+  padding: var(--Spacing-x1) var(--Spacing-x-one-and-half,);
+  border-radius: var(--Corner-radius-Small);
+  background-color: var(--Base-Background-Primary-Normal);
+}

apps/scandic-web/components/Profile/CreditCardRow/index.tsx

@@ -0,0 +1,22 @@
+import { CreditCard } from "@/components/Icons"
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+
+import DeleteCreditCardConfirmation from "../DeleteCreditCardConfirmation"
+
+import styles from "./creditCardRow.module.css"
+
+import type { CreditCardRowProps } from "@/types/components/myPages/myProfile/creditCards"
+
+export default function CreditCardRow({ card }: CreditCardRowProps) {
+  const maskedCardNumber = `**** ${card.truncatedNumber.slice(-4)}`
+
+  return (
+    <div className={styles.card}>
+      <CreditCard color="black" />
+      <Body textTransform="bold">{card.type}</Body>
+      <Caption color="textMediumContrast">{maskedCardNumber}</Caption>
+      <DeleteCreditCardConfirmation card={card} />
+    </div>
+  )
+}

apps/scandic-web/components/Profile/DeleteCreditCardButton/index.tsx

@@ -0,0 +1,41 @@
+"use client"
+import { useIntl } from "react-intl"
+
+import { trpc } from "@/lib/trpc/client"
+
+import { DeleteIcon } from "@/components/Icons"
+import Button from "@/components/TempDesignSystem/Button"
+import { toast } from "@/components/TempDesignSystem/Toasts"
+
+export default function DeleteCreditCardButton({
+  creditCardId,
+}: {
+  creditCardId: string
+}) {
+  const intl = useIntl()
+  const trpcUtils = trpc.useUtils()
+
+  const deleteCreditCardMutation = trpc.user.creditCard.delete.useMutation({
+    onSuccess() {
+      trpcUtils.user.creditCards.invalidate()
+      toast.success(
+        intl.formatMessage({ id: "Credit card deleted successfully" })
+      )
+    },
+    onError() {
+      toast.error(
+        intl.formatMessage({
+          id: "Failed to delete credit card, please try again later.",
+        })
+      )
+    },
+  })
+  async function handleDelete() {
+    deleteCreditCardMutation.mutate({ creditCardId })
+  }
+  return (
+    <Button variant="icon" theme="base" intent="text" onClick={handleDelete}>
+      <DeleteIcon color="burgundy" />
+    </Button>
+  )
+}

apps/scandic-web/components/Profile/DeleteCreditCardConfirmation.tsx

@@ -0,0 +1,63 @@
+"use client"
+import { useIntl } from "react-intl"
+
+import { trpc } from "@/lib/trpc/client"
+
+import Dialog from "@/components/Dialog"
+import { DeleteIcon } from "@/components/Icons"
+import Button from "@/components/TempDesignSystem/Button"
+import { toast } from "@/components/TempDesignSystem/Toasts"
+
+import type { DeleteCreditCardConfirmationProps } from "@/types/components/myPages/myProfile/creditCards"
+
+export default function DeleteCreditCardConfirmation({
+  card,
+}: DeleteCreditCardConfirmationProps) {
+  const intl = useIntl()
+  const trpcUtils = trpc.useUtils()
+
+  const deleteCard = trpc.user.creditCard.delete.useMutation({
+    onSuccess() {
+      trpcUtils.user.creditCards.invalidate()
+
+      toast.success(
+        intl.formatMessage({ id: "Your card was successfully removed!" })
+      )
+    },
+    onError() {
+      toast.error(
+        intl.formatMessage({
+          id: "Something went wrong and we couldn't remove your card. Please try again later.",
+        })
+      )
+    },
+  })
+
+  function handleProceedDeleteCard(close: () => void) {
+    deleteCard.mutate({ creditCardId: card.id }, { onSettled: close })
+  }
+
+  const lastFourDigits = card.truncatedNumber.slice(-4)
+
+  const bodyText = intl.formatMessage(
+    {
+      id: "Are you sure you want to remove the card ending with {lastFourDigits} from your member profile?",
+    },
+    { lastFourDigits }
+  )
+
+  return (
+    <Dialog
+      bodyText={bodyText}
+      cancelButtonText={intl.formatMessage({ id: "No, keep card" })}
+      proceedOnClick={handleProceedDeleteCard}
+      proceedText={intl.formatMessage({ id: "Yes, remove my card" })}
+      titleText={intl.formatMessage({ id: "Remove card from member profile" })}
+      trigger={
+        <Button intent="secondary" size="small" theme="base">
+          <DeleteIcon color="burgundy" />
+        </Button>
+      }
+    />
+  )
+}

apps/scandic-web/components/Profile/Header/header.module.css

@@ -0,0 +1,6 @@
+.header {
+  align-items: center;
+  display: flex;
+  gap: var(--Spacing-x2);
+  justify-content: space-between;
+}

apps/scandic-web/components/Profile/Header/index.tsx

@@ -0,0 +1,5 @@
+import styles from "./header.module.css"
+
+export default function Header({ children }: React.PropsWithChildren) {
+  return <header className={styles.header}>{children}</header>
+}

apps/scandic-web/components/Profile/ManagePreferencesButton/index.tsx

@@ -0,0 +1,51 @@
+"use client"
+
+import { useIntl } from "react-intl"
+
+import { trpc } from "@/lib/trpc/client"
+
+import ArrowRight from "@/components/Icons/ArrowRight"
+import Button from "@/components/TempDesignSystem/Button"
+import { toast } from "@/components/TempDesignSystem/Toasts"
+
+import styles from "./managePreferencesButton.module.css"
+
+export default function ManagePreferencesButton() {
+  const intl = useIntl()
+  const generatePreferencesLink = trpc.user.generatePreferencesLink.useMutation(
+    {
+      onSuccess: (preferencesLink) => {
+        if (preferencesLink) {
+          window.open(preferencesLink, "_blank")
+        } else {
+          toast.error(
+            intl.formatMessage({
+              id: "It is not posible to manage your communication preferences right now, please try again later or contact support if the problem persists.",
+            })
+          )
+        }
+      },
+      onError: () => {
+        toast.error(
+          intl.formatMessage({
+            id: "An error occurred trying to manage your preferences, please try again later.",
+          })
+        )
+      },
+    }
+  )
+
+  return (
+    <Button
+      className={styles.managePreferencesButton}
+      variant="icon"
+      theme="base"
+      intent="text"
+      onClick={() => generatePreferencesLink.mutate()}
+      wrapping
+    >
+      <ArrowRight color="burgundy" />
+      {intl.formatMessage({ id: "Manage preferences" })}
+    </Button>
+  )
+}

apps/scandic-web/components/Profile/ManagePreferencesButton/managePreferencesButton.module.css

@@ -0,0 +1,3 @@
+.managePreferencesButton {
+  justify-self: flex-start;
+}