Merged in fix/LOY-408-promo-client-side-dynamic-states (pull request #2956)

fix(LOY-408): Make auth parts of promohero client components

* fix(LOY-408): Move auth parts of promohero client side

* chore(LOY-408): remove unused code


Approved-by: Linus Flood
Approved-by: Matilda Landström

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

@@ -1,5 +1,5 @@
 "use client"
-import { useRouter } from "next/navigation"
+
 import { useIntl } from "react-intl"
 
 import { Button } from "@scandic-hotels/design-system/Button"
@@ -25,7 +25,6 @@ export default function ActivateOffer({
 }: ActivateOfferProps) {
   const intl = useIntl()
   const lang = useLang()
-  const router = useRouter()
   const trpcUtils = trpc.useUtils()
 
   async function handleActivateFlow() {
@@ -41,8 +40,7 @@ export default function ActivateOffer({
   const activateCampaign = trpc.user.promoCampaign.add.useMutation({
     onSuccess: async (data) => {
       if (!data) return
-      trpcUtils.user.promoCampaign.invalidate()
-      router.refresh()
+      await trpcUtils.user.getSafely.invalidate()
     },
   })
 

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

@@ -1,13 +1,14 @@
+"use client"
+
+import { useIntl } from "react-intl"
+
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import { getIntl } from "@/i18n"
-
 import styles from "../hero.module.css"
 
-// @TODO: The ineligble message has not been finalized yet and is prone to change.
-export default async function IneligibleMessage() {
-  const intl = await getIntl()
+export default function IneligibleMessage() {
+  const intl = useIntl()
 
   return (
     <div className={styles.ineligibleMessage}>

apps/scandic-web/components/ContentType/PromoCampaignPage/Hero/hero.module.css

@@ -76,6 +76,11 @@
   border-radius: 0 0 var(--card-radius) var(--card-radius);
 }
 
+.loadingCard {
+  background-color: var(--Surface-Brand-Accent-Default);
+  border-radius: 0 0 var(--card-radius) var(--card-radius);
+}
+
 .heading {
   color: var(--Text-Brand-OnAccent-Heading);
 }
@@ -163,7 +168,8 @@
     padding: var(--Space-x7) var(--Space-x3);
   }
 
-  .authCard {
+  .authCard,
+  .loadingCard {
     border-radius: 0;
   }
 }

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

@@ -1,13 +1,13 @@
+"use client"
+
 import { cx } from "class-variance-authority"
+import { useIntl } from "react-intl"
 
 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 { getProfileSafely } from "@/lib/trpc/memoizedRequests"
-
-import { getIntl } from "@/i18n"
+import { trpc } from "@scandic-hotels/trpc/client"
 
 import ActivateOffer from "./ActivateOffer"
 import IneligibleMessage from "./IneligibleMessage"
@@ -29,15 +29,16 @@ interface PromoCampaignHeroProps extends React.HTMLAttributes<HTMLDivElement> {
   promoCode: PromoCode
 }
 
-export default async function PromoCampaignHero({
+export default function PromoCampaignHero({
   promoHero,
   eligibleLevels,
   promoCode,
   className,
   ...props
 }: PromoCampaignHeroProps) {
-  const intl = await getIntl()
-  const profile = await getProfileSafely()
+  const intl = useIntl()
+  const { data: profile, isLoading: profileLoading } =
+    trpc.user.getSafely.useQuery()
 
   const { image, heading, benefits } = promoHero
   const isLoggedIn = !!profile
@@ -117,7 +118,7 @@ export default async function PromoCampaignHero({
           <CampaignCTA />
         </div>
 
-        {!isLoggedIn && (
+        {!profile && !profileLoading ? (
           <div className={cx(styles.card, styles.authCard)}>
             <Typography
               variant="Title/Overline/sm"
@@ -146,7 +147,9 @@ export default async function PromoCampaignHero({
             </div>
             <PromoSignUpButton />
           </div>
-        )}
+        ) : profileLoading ? (
+          <div className={cx(styles.card, styles.loadingCard)} aria-hidden />
+        ) : null}
       </div>
     </header>
   )