Merged in feat/LOY-116-remove-cta-from-signup-verify-page (pull request #1335)

refactor(LOY-116): consolidate signup auth & remove SignUpVerification component

* refactor(LOY-116): simplify signup authentication and remove SignUpVerification component

- Remove SignUpVerification component and its related files
- Move authentication checks to page-level components
- Consolidate signup flow authentication logic
- Remove unused signup verification link variant

* refactor(LOY-116): remove "sign up verification" from TrackingPosition type


Approved-by: Christian Andolf

app/[lang]/(live)/(public)/[contentType]/[uid]/page.tsx

@@ -1,10 +1,12 @@
 import { headers } from "next/headers"
-import { notFound } from "next/navigation"
+import { notFound,redirect  } from "next/navigation"
 
+import { overview } from "@/constants/routes/myPages"
 import { isSignupPage } from "@/constants/routes/signup"
 import { env } from "@/env/server"
 import { getHotelPage } from "@/lib/trpc/memoizedRequests"
 
+import { auth } from "@/auth"
 import DestinationOverviewPage from "@/components/ContentType/DestinationOverviewPage"
 import DestinationCityPage from "@/components/ContentType/DestinationPage/DestinationCityPage"
 import DestinationCountryPage from "@/components/ContentType/DestinationPage/DestinationCountryPage"
@@ -14,7 +16,8 @@ import LoyaltyPage from "@/components/ContentType/LoyaltyPage"
 import StartPage from "@/components/ContentType/StartPage"
 import CollectionPage from "@/components/ContentType/StaticPages/CollectionPage"
 import ContentPage from "@/components/ContentType/StaticPages/ContentPage"
-import { setLang } from "@/i18n/serverContext"
+import { getLang,setLang } from "@/i18n/serverContext"
+import { isValidSession } from "@/utils/session"
 
 import type {
   ContentTypeParams,
@@ -38,12 +41,17 @@ export default async function ContentTypePage({
     case PageContentTypeEnum.collectionPage:
       return <CollectionPage />
     case PageContentTypeEnum.contentPage: {
-      // Hide content pages for signup routes when signup flow is disabled.
+      const isSignupRoute = isSignupPage(pathname)
-      if (!env.SHOW_SIGNUP_FLOW) {
+
-        const isSignupRoute = isSignupPage(pathname)
+      if (isSignupRoute) {
-        if (isSignupRoute) {
+        if (!env.SHOW_SIGNUP_FLOW) {
           return notFound()
         }
+
+        const session = await auth()
+        if (isValidSession(session)) {
+          redirect(overview[getLang()])
+        }
       }
 
       return <ContentPage />

components/Blocks/DynamicContent/SignUpVerification/index.tsx

@@ -1,36 +0,0 @@
-import { redirect } from "next/navigation"
-
-import { overview } from "@/constants/routes/myPages"
-
-import { auth } from "@/auth"
-import LoginButton from "@/components/LoginButton"
-import { getIntl } from "@/i18n"
-import { getLang } from "@/i18n/serverContext"
-import { isValidSession } from "@/utils/session"
-
-import styles from "./signUpVerification.module.css"
-
-import type { SignUpVerificationProps } from "@/types/components/blocks/dynamicContent"
-
-export default async function SignUpVerification({
-  dynamic_content,
-}: SignUpVerificationProps) {
-  const session = await auth()
-  if (isValidSession(session)) {
-    redirect(overview[getLang()])
-  }
-  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

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

components/Blocks/DynamicContent/SignupFormWrapper/index.tsx

@@ -1,21 +1,9 @@
-import { redirect } from "next/navigation"
-
-import { overview } from "@/constants/routes/myPages"
-
-import { auth } from "@/auth"
 import SignupForm from "@/components/Forms/Signup"
-import { getLang } from "@/i18n/serverContext"
-import { isValidSession } from "@/utils/session"
 
 import type { SignupFormWrapperProps } from "@/types/components/blocks/dynamicContent"
 
 export default async function SignupFormWrapper({
   dynamic_content,
 }: SignupFormWrapperProps) {
-  const session = await auth()
-  if (isValidSession(session)) {
-    // We don't want to allow users to access signup if they are already authenticated.
-    redirect(overview[getLang()])
-  }
   return <SignupForm {...dynamic_content} />
 }

components/Blocks/DynamicContent/index.tsx

@@ -14,7 +14,6 @@ import NextLevelRewardsBlock from "@/components/Blocks/DynamicContent/Rewards/Ne
 import SASLinkedAccount from "@/components/Blocks/DynamicContent/SAS/LinkedAccounts"
 import SASTierComparisonBlock from "@/components/Blocks/DynamicContent/SASTierComparison"
 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"
@@ -70,8 +69,6 @@ function DynamicContentBlocks(props: DynamicContentProps) {
       return <PreviousStays {...dynamic_content} />
     case DynamicContentEnum.Blocks.components.sign_up_form:
       return <SignupFormWrapper dynamic_content={dynamic_content} />
-    case DynamicContentEnum.Blocks.components.sign_up_verification:
-      return <SignUpVerification dynamic_content={dynamic_content} />
     case DynamicContentEnum.Blocks.components.soonest_stays:
       return <SoonestStays {...dynamic_content} />
     case DynamicContentEnum.Blocks.components.upcoming_stays:

components/TempDesignSystem/Link/link.module.css

@@ -274,15 +274,3 @@
   text-decoration: none;
   padding: var(--Spacing-x-half) var(--Spacing-x1);
 }
-
-.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

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

types/components/blocks/dynamicContent.ts

@@ -20,5 +20,3 @@ export interface OverviewTableProps extends PartialDynamicContent {
 }
 
 export interface SignupFormWrapperProps extends PartialDynamicContent {}
-
-export interface SignUpVerificationProps extends PartialDynamicContent {}

types/components/tracking.ts

@@ -187,5 +187,4 @@ export type TrackingPosition =
   | "top menu"
   | "hamburger menu"
   | "join scandic friends sidebar"
-  | "sign up verification"
   | "enter details"