feat(SW-360): Add signup verification route w. tracking for login

components/Blocks/DynamicContent/SignUpVerification/index.tsx

@@ -0,0 +1,26 @@
+import LoginButton from "@/components/Current/Header/LoginButton"
+import { getIntl } from "@/i18n"
+
+import styles from "./signUpVerification.module.css"
+
+import type { SignUpVerificationProps } from "@/types/components/blocks/dynamicContent"
+
+export default async function SignUpVerification({
+  title,
+  subtitle,
+}: SignUpVerificationProps) {
+  const intl = await getIntl()
+
+  return (
+    <div className={styles.container}>
+      <LoginButton
+        className={styles.loginButton}
+        trackingId="signUpVerificationLogin"
+        position="sign up verification"
+        variant="signupVerification"
+      >
+        {intl.formatMessage({ id: "Proceed to login" })}
+      </LoginButton>
+    </div>
+  )
+}

components/Blocks/DynamicContent/SignUpVerification/signUpVerification.module.css

@@ -0,0 +1,6 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  margin-top: var(--Spacing-x3);
+}

components/Blocks/DynamicContent/SignupFormWrapper/index.tsx

@@ -3,21 +3,20 @@ import { redirect } from "next/navigation"
 import { overview } from "@/constants/routes/myPages"
 
 import { auth } from "@/auth"
+import Form from "@/components/Forms/Register"
 import { getLang } from "@/i18n/serverContext"
 
-import Form from "../index"
+import type { RegisterFormProps } from "@/types/components/form/registerForm"
 
-import { RegisterFormProps } from "@/types/components/form/registerForm"
-
-export default async function ServerRegisterForm({
-  link,
-  subtitle,
-  title,
-}: RegisterFormProps) {
+export default async function SignupFormWrapper({
+  dynamic_content,
+}: {
+  dynamic_content: RegisterFormProps
+}) {
   const session = await auth()
   if (session) {
     // We don't want to allow users to signup if they are already authenticated.
     redirect(overview[getLang()])
   }
-  return <Form link={link} subtitle={subtitle} title={title} />
+  return <Form {...dynamic_content} />
 }

components/Blocks/DynamicContent/index.tsx

@@ -7,10 +7,11 @@ import ExpiringPoints from "@/components/Blocks/DynamicContent/Points/ExpiringPo
 import PointsOverview from "@/components/Blocks/DynamicContent/Points/Overview"
 import CurrentRewardsBlock from "@/components/Blocks/DynamicContent/Rewards/CurrentLevel"
 import NextLevelRewardsBlock from "@/components/Blocks/DynamicContent/Rewards/NextLevel"
+import SignupFormWrapper from "@/components/Blocks/DynamicContent/SignupFormWrapper"
+import SignUpVerification from "@/components/Blocks/DynamicContent/SignUpVerification"
 import PreviousStays from "@/components/Blocks/DynamicContent/Stays/Previous"
 import SoonestStays from "@/components/Blocks/DynamicContent/Stays/Soonest"
 import UpcomingStays from "@/components/Blocks/DynamicContent/Stays/Upcoming"
-import ServerRegisterForm from "@/components/Forms/Register/ServerRegisterForm"
 
 import type { DynamicContentProps } from "@/types/components/blocks/dynamicContent"
 import { DynamicContentEnum } from "@/types/enums/dynamicContent"
@@ -53,7 +54,9 @@ export default async function DynamicContent({
     case DynamicContentEnum.Blocks.components.previous_stays:
       return <PreviousStays {...dynamic_content} />
     case DynamicContentEnum.Blocks.components.sign_up_form:
-      return <ServerRegisterForm {...dynamic_content} />
+      return <SignupFormWrapper dynamic_content={dynamic_content} />
+    case DynamicContentEnum.Blocks.components.sign_up_verification:
+      return <SignUpVerification {...dynamic_content} />
     case DynamicContentEnum.Blocks.components.soonest_stays:
       return <SoonestStays {...dynamic_content} />
     case DynamicContentEnum.Blocks.components.upcoming_stays:

components/Current/Header/LoginButton.tsx

@@ -18,11 +18,13 @@ export default function LoginButton({
   trackingId,
   children,
   color = "black",
+  variant = "default",
 }: PropsWithChildren<{
   className: string
   trackingId: string
   position: TrackingPosition
   color?: LinkProps["color"]
+  variant?: "default" | "signupVerification"
 }>) {
   const lang = useLang()
   const pathName = useLazyPathname()
@@ -49,6 +51,7 @@ export default function LoginButton({
       color={color}
       href={href}
       prefetch={false}
+      variant={variant}
     >
       {children}
     </Link>

components/TempDesignSystem/Link/link.module.css

@@ -218,3 +218,15 @@
   color: var(--Base-Text-High-contrast);
   background-color: var(--Base-Surface-Primary-light-Hover-alt);
 }
+
+.signupVerification {
+  background-color: var(--Base-Button-Primary-Fill-Normal);
+  color: var(--Base-Button-Inverted-Fill-Normal);
+  cursor: pointer;
+  padding: var(--Spacing-x-one-and-half) var(--Spacing-x2);
+  border-radius: var(--Corner-radius-Rounded);
+  text-decoration: none;
+  display: inline-block;
+  text-align: center;
+  transition: background-color 0.3s ease;
+}

components/TempDesignSystem/Link/variants.ts

@@ -35,6 +35,7 @@ export const linkVariants = cva(styles.link, {
       shortcut: styles.shortcut,
       sidebar: styles.sidebar,
       tab: styles.tab,
+      signupVerification: styles.signupVerification,
     },
   },
   defaultVariants: {

i18n/dictionaries/da.json

@@ -219,6 +219,7 @@
   "Points needed to level up": "Point nødvendige for at stige i niveau",
   "Points needed to stay on level": "Point nødvendige for at holde sig på niveau",
   "Previous victories": "Tidligere sejre",
+  "Proceed to login": "Fortsæt til login",
   "Proceed to payment method": "Fortsæt til betalingsmetode",
   "Public price from": "Offentlig pris fra",
   "Public transport": "Offentlig transport",

i18n/dictionaries/de.json

@@ -213,13 +213,13 @@
   "Please enter a valid phone number": "Bitte geben Sie eine gültige Telefonnummer ein",
   "points": "Punkte",
   "Points": "Punkte",
-  "points": "Punkte",
   "Points being calculated": "Punkte werden berechnet",
   "Points earned prior to May 1, 2021": "Zusammengeführte Punkte vor dem 1. Mai 2021",
   "Points may take up to 10 days to be displayed.": "Es kann bis zu 10 Tage dauern, bis Punkte angezeigt werden.",
   "Points needed to level up": "Punkte, die zum Levelaufstieg benötigt werden",
   "Points needed to stay on level": "Erforderliche Punkte, um auf diesem Level zu bleiben",
   "Previous victories": "Bisherige Siege",
+  "Proceed to login": "Weiter zum Login",
   "Proceed to payment method": "Weiter zur Zahlungsmethode",
   "Public price from": "Öffentlicher Preis ab",
   "Public transport": "Öffentliche Verkehrsmittel",

i18n/dictionaries/en.json

@@ -218,6 +218,7 @@
   "Points needed to level up": "Points needed to level up",
   "Points needed to stay on level": "Points needed to stay on level",
   "Previous victories": "Previous victories",
+  "Proceed to login": "Proceed to login",
   "Proceed to payment method": "Proceed to payment method",
   "Public price from": "Public price from",
   "Public transport": "Public transport",

i18n/dictionaries/fi.json

@@ -219,6 +219,7 @@
   "Points needed to level up": "Tarvitset vielä",
   "Points needed to stay on level": "Tällä tasolla pysymiseen tarvittavat pisteet",
   "Previous victories": "Edelliset voitot",
+  "Proceed to login": "Jatka kirjautumiseen",
   "Proceed to payment method": "Siirry maksutavalle",
   "Public price from": "Julkinen hinta alkaen",
   "Public transport": "Julkinen liikenne",

i18n/dictionaries/no.json

@@ -216,6 +216,7 @@
   "Points needed to level up": "Poeng som trengs for å komme opp i nivå",
   "Points needed to stay on level": "Poeng som trengs for å holde seg på nivå",
   "Previous victories": "Tidligere seire",
+  "Proceed to login": "Fortsett til innlogging",
   "Proceed to payment method": "Fortsett til betalingsmetode",
   "Public price from": "Offentlig pris fra",
   "Public transport": "Offentlig transport",

i18n/dictionaries/sv.json

@@ -217,6 +217,7 @@
   "Points needed to level up": "Poäng som behövs för att gå upp i nivå",
   "Points needed to stay on level": "Poäng som behövs för att hålla sig på nivå",
   "Previous victories": "Tidigare segrar",
+  "Proceed to login": "Fortsätt till inloggning",
   "Proceed to payment method": "Gå vidare till betalningsmetod",
   "Public price from": "Offentligt pris från",
   "Public transport": "Kollektivtrafik",

server/routers/contentstack/contentPage/query.ts

@@ -21,8 +21,6 @@ export const contentPageQueryRouter = router({
   get: contentstackExtendedProcedureUID.query(async ({ ctx }) => {
     const { lang, uid } = ctx
 
-    // TODO: Add logic to: check if Authed & Content Page URL is a "signup page", if so, redirect to home page.
-
     const contentPageRefsData = await fetchContentPageRefs(lang, uid)
     const contentPageRefs = validateContentPageRefs(
       contentPageRefsData,

types/components/blocks/dynamicContent.ts

@@ -18,3 +18,16 @@ export interface LoyaltyLevelsProps extends PartialDynamicContent {
 export interface OverviewTableProps extends PartialDynamicContent {
   firstItem: boolean
 }
+
+export interface SignUpVerificationProps {
+  title: string
+  subtitle: string
+}
+
+export interface SignupFormWrapperProps {
+  dynamic_content: {
+    link: string
+    subtitle: string
+    title: string
+  }
+}

types/components/tracking.ts

@@ -78,3 +78,4 @@ export type TrackingPosition =
   | "top menu"
   | "hamburger menu"
   | "join scandic friends sidebar"
+  | "sign up verification"

types/enums/dynamicContent.ts

@@ -13,6 +13,7 @@ export namespace DynamicContentEnum {
       points_overview = "points_overview",
       previous_stays = "previous_stays",
       sign_up_form = "sign_up_form",
+      sign_up_verification = "sign_up_verification",
       soonest_stays = "soonest_stays",
       upcoming_stays = "upcoming_stays",
     }
@@ -31,6 +32,7 @@ export namespace DynamicContentEnum {
       components.points_overview,
       components.previous_stays,
       components.sign_up_form,
+      components.sign_up_verification,
       components.soonest_stays,
       components.upcoming_stays,
     ]