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

Move SASTierComparison block to DynamicContent

Approved-by: Erik Tiekstra

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,