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: {