Merged in fix/move-sas-comparison-to-dynamic-content (pull request #1279)

Move SASTierComparison block to DynamicContent

Approved-by: Erik Tiekstra

components/Blocks/DynamicContent/SASTierComparison/index.tsx

@@ -0,0 +1,25 @@
+import { serverClient } from "@/lib/trpc/server"
+
+import { SasTierComparison } from "@/components/SasTierComparison"
+
+type SASTierComparisonBlockProps = {
+  title: string
+  preamble: string
+}
+export default async function SASTierComparisonBlock({
+  title,
+  preamble,
+}: SASTierComparisonBlockProps) {
+  const tierComparison =
+    await serverClient().contentstack.partner.getSasTierComparison()
+
+  if (!tierComparison) return null
+
+  return (
+    <SasTierComparison
+      title={title}
+      preamble={preamble}
+      tierComparison={tierComparison}
+    />
+  )
+}

components/Blocks/DynamicContent/index.tsx

@@ -11,6 +11,7 @@ import ExpiringPoints from "@/components/Blocks/DynamicContent/Points/ExpiringPo
 import PointsOverview from "@/components/Blocks/DynamicContent/Points/Overview"
 import CurrentRewardsBlock from "@/components/Blocks/DynamicContent/Rewards/CurrentRewards"
 import NextLevelRewardsBlock from "@/components/Blocks/DynamicContent/Rewards/NextLevel"
+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"
@@ -74,6 +75,13 @@ function DynamicContentBlocks(props: DynamicContentProps) {
       return <SoonestStays {...dynamic_content} />
     case DynamicContentEnum.Blocks.components.upcoming_stays:
       return <UpcomingStays {...dynamic_content} />
+    case DynamicContentEnum.Blocks.components.sas_tier_comparison:
+      return (
+        <SASTierComparisonBlock
+          title={dynamic_content.title}
+          preamble={dynamic_content.subtitle}
+        />
+      )
     default:
       return null
   }

components/Blocks/index.tsx

@@ -7,7 +7,6 @@ import ShortcutsList from "@/components/Blocks/ShortcutsList"
 import TextCols from "@/components/Blocks/TextCols"
 import UspGrid from "@/components/Blocks/UspGrid"
 import JsonToHtml from "@/components/JsonToHtml"
-import { SasTierComparison } from "@/components/SasTierComparison"
 
 import AccordionSection from "./Accordion"
 import FullWidthCampaign from "./FullWidthCampaign"
@@ -103,8 +102,6 @@ export default function Blocks({ blocks }: BlocksProps) {
         )
       case BlocksEnums.block.UspGrid:
         return <UspGrid usp_grid={block.usp_grid} />
-      case BlocksEnums.block.SasTierComparison:
-        return <SasTierComparison content={block.sas_tier_comparison} />
       case BlocksEnums.block.FullWidthCampaign:
         return <FullWidthCampaign content={block.full_width_campaign} />
       case BlocksEnums.block.JoinScandicFriends:

components/SasTierComparison/index.tsx

@@ -12,30 +12,28 @@ import Caption from "../TempDesignSystem/Text/Caption"
 import Subtitle from "../TempDesignSystem/Text/Subtitle"
 import Title from "../TempDesignSystem/Text/Title"
 
-import styles from "./sas-tier-comparison.module.css"
+import styles from "./sasTierComparison.module.css"
 
 import type { ReactNode } from "react"
 
-import type { SasTierComparison } from "@/types/trpc/routers/contentstack/blocks"
-
-type SasTierComparisonContent = SasTierComparison["sas_tier_comparison"]
+import type { SasTierComparison } from "@/types/trpc/routers/contentstack/partner"
 
 type TierComparisonProps = {
-  content: SasTierComparisonContent
+  title?: string
+  preamble?: string
+  tierComparison: NonNullable<SasTierComparison>
 }
 
-export function SasTierComparison({ content }: TierComparisonProps) {
-  const comparisonContent = content.sasTierComparison
-
-  if (!comparisonContent) return null
-
+export function SasTierComparison({
+  title,
+  preamble,
+  tierComparison,
+}: TierComparisonProps) {
   return (
     <SectionContainer className={styles.comparisonSection}>
       <div className={styles.header}>
-        <Title level="h2">{comparisonContent.title}</Title>
-        {comparisonContent.preamble && (
-          <p className={styles.preamble}>{comparisonContent.preamble}</p>
-        )}
+        <Title level="h2">{title}</Title>
+        {preamble && <p className={styles.preamble}>{preamble}</p>}
       </div>
       <div>
         <div className={styles.columnHeaders}>
@@ -53,11 +51,11 @@ export function SasTierComparison({ content }: TierComparisonProps) {
             priority
             width={215}
           />
-          <ColumnTitle>{comparisonContent.scandic_column_title}</ColumnTitle>
-          <ColumnTitle>{comparisonContent.sas_column_title}</ColumnTitle>
+          <ColumnTitle>{tierComparison.scandic_column_title}</ColumnTitle>
+          <ColumnTitle>{tierComparison.sas_column_title}</ColumnTitle>
         </div>
         <div className={styles.tierMatchList}>
-          {comparisonContent.tier_matches.map((tierMatch, i) => (
+          {tierComparison.tier_matches.map((tierMatch, i) => (
             <TierDetails key={i} tierMatch={tierMatch}>
               <JsonToHtml
                 nodes={tierMatch.content.json?.children}
@@ -68,10 +66,10 @@ export function SasTierComparison({ content }: TierComparisonProps) {
           ))}
         </div>
       </div>
-      {comparisonContent.cta?.href && (
+      {tierComparison.cta?.href && (
         <Button theme="primaryLight" asChild className={styles.ctaButton}>
-          <Link href={comparisonContent.cta.href} color="white">
-            {comparisonContent.cta.title}
+          <Link href={tierComparison.cta.href} color="white">
+            {tierComparison.cta.title}
           </Link>
         </Button>
       )}
@@ -79,9 +77,7 @@ export function SasTierComparison({ content }: TierComparisonProps) {
   )
 }
 
-type TierMatch = NonNullable<
-  SasTierComparisonContent["sasTierComparison"]
->["tier_matches"][number]
+type TierMatch = NonNullable<SasTierComparison>["tier_matches"][number]
 
 function TierDetails({
   children,