Merged in fix/make-promohero-signup-button-client-component (pull request #2889)

fix: make promo hero signup cta client component

* fix: make promo hero signup cta client component


Approved-by: Matilda Landström

apps/scandic-web/components/ContentType/PromoCampaignPage/Hero/PromoSignUpButton.tsx

@@ -0,0 +1,37 @@
+"use client"
+
+import { useIntl } from "react-intl"
+
+import { signup } from "@scandic-hotels/common/constants/routes/signup"
+import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
+import { trackEvent } from "@scandic-hotels/tracking/base"
+
+import useLang from "@/hooks/useLang"
+
+export default function PromoSignUpButton() {
+  const lang = useLang()
+  const intl = useIntl()
+
+  return (
+    <ButtonLink
+      onClick={() =>
+        trackEvent({
+          event: "signupStart",
+          signUp: {
+            position: "campaign banner signup cta",
+            action: "signup start",
+            ctaName: "signup",
+          },
+        })
+      }
+      href={signup[lang]}
+      variant="Secondary"
+      color="Inverted"
+      size="Medium"
+    >
+      {intl.formatMessage({
+        defaultMessage: "Sign up",
+      })}
+    </ButtonLink>
+  )
+}

apps/scandic-web/components/ContentType/PromoCampaignPage/Hero/index.tsx

@@ -1,21 +1,18 @@
 import { cx } from "class-variance-authority"
 
-import { signup } from "@scandic-hotels/common/constants/routes/signup"
-import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import Image from "@scandic-hotels/design-system/Image"
 import { Typography } from "@scandic-hotels/design-system/Typography"
-import { trackEvent } from "@scandic-hotels/tracking/base"
 
 import { getProfileSafely } from "@/lib/trpc/memoizedRequests"
 
 import { getIntl } from "@/i18n"
-import { getLang } from "@/i18n/serverContext"
 
 import ActivateOffer from "./ActivateOffer"
 import IneligibleMessage from "./IneligibleMessage"
 import PromoLoginButton from "./PromoLoginButton"
+import PromoSignUpButton from "./PromoSignUpButton"
 import { isUserEligibleForPromo } from "./utils"
 
 import styles from "./hero.module.css"
@@ -40,7 +37,6 @@ export default async function PromoCampaignHero({
   ...props
 }: PromoCampaignHeroProps) {
   const intl = await getIntl()
-  const lang = await getLang()
   const profile = await getProfileSafely()
 
   const { image, heading, benefits } = promoHero
@@ -148,26 +144,7 @@ export default async function PromoCampaignHero({
               </Typography>
               <Divider color="white" />
             </div>
-            <ButtonLink
-              onClick={() =>
-                trackEvent({
-                  event: "signupStart",
-                  signUp: {
-                    position: "campaign banner signup cta",
-                    action: "signup start",
-                    ctaName: "signup",
-                  },
-                })
-              }
-              href={signup[lang]}
-              variant="Secondary"
-              color="Inverted"
-              size="Medium"
-            >
-              {intl.formatMessage({
-                defaultMessage: "Sign up",
-              })}
-            </ButtonLink>
+            <PromoSignUpButton />
           </div>
         )}
       </div>