Merged in feature/tier-matching-component (pull request #1175)

SAS Tier matching comparison block (SW-921) Approved-by: Joakim Jäderberg Approved-by: Matilda Landström
2025-01-22 08:15:31 +00:00
parent dc115ca368
commit eacca33847
13 changed files with 416 additions and 1 deletions
--- a/components/SasTierComparison/index.tsx
+++ b/components/SasTierComparison/index.tsx
@@ -0,0 +1,163 @@
+"use client"
+import { type Key, useState } from "react"
+
+import Link from "@/components/TempDesignSystem/Link"
+import Title from "@/components/TempDesignSystem/Text/Title"
+
+import { ArrowRightIcon, CompareArrowsIcon } from "../Icons"
+import SectionContainer from "../Section/Container"
+import SectionHeader from "../Section/Header"
+import Button from "../TempDesignSystem/Button"
+import Select from "../TempDesignSystem/Select"
+
+import styles from "./sas-tier-comparison.module.css"
+
+import type { SasTierComparison } from "@/types/trpc/routers/contentstack/blocks"
+
+type SasTierComparisonContent = SasTierComparison["sas_tier_comparison"]
+
+type TierComparisonProps = {
+  content: SasTierComparisonContent
+  firstItem: boolean
+}
+
+const scandicSasTierMappings: [string[], string[]][] = [
+  [["L1", "L2", "L3"], ["Basic"]],
+  [["L4"], ["Silver"]],
+  [["L5"], ["Gold"]],
+  [
+    ["L6", "L7"],
+    ["Diamond", "Pandion"],
+  ],
+]
+
+export function SasTierComparison({ content, firstItem }: TierComparisonProps) {
+  const comparisonContent = content.sasTierComparison
+
+  const scandic = comparisonContent?.scandic_friends
+  const sas = comparisonContent?.sas_eb
+
+  const [activeScandicTierCode, setActiveScandicTierCode] = useState(
+    scandic?.tiers.at(0)?.tier_code ?? ""
+  )
+  const [activeSasTierCode, setActiveSasTierCode] = useState(
+    sas?.tiers.at(0)?.tier_code ?? ""
+  )
+
+  if (!scandic || !sas) return null
+
+  const onChangeScandic = (k: Key) => {
+    const key = k.toString()
+    setActiveScandicTierCode(k.toString())
+
+    const mapping = scandicSasTierMappings.find(([tierMapping]) =>
+      tierMapping.includes(key)
+    )
+    if (!mapping) return
+    const sasTierCode = mapping[1][0]
+    setActiveSasTierCode(sasTierCode)
+  }
+
+  const onChangeSas = (k: Key) => {
+    const key = k.toString()
+    setActiveSasTierCode(key)
+
+    const mapping = scandicSasTierMappings.find(([_, tierMapping]) =>
+      tierMapping.includes(key)
+    )
+    if (!mapping) return
+    const scandicTierCode = mapping[0][0]
+    setActiveScandicTierCode(scandicTierCode)
+  }
+
+  return (
+    <SectionContainer className={styles.comparisonSection}>
+      <div className={styles.header}>
+        <SectionHeader title={comparisonContent.title} topTitle={firstItem} />
+        {comparisonContent.preamble && (
+          <p className={styles.preamble}>{comparisonContent.preamble}</p>
+        )}
+      </div>
+      <div className={styles.comparisonCard}>
+        <div className={styles.comparisonContainer}>
+          <div className={styles.comparisonBrand}>
+            <Title level="h3" textTransform="regular">
+              {scandic.title}
+            </Title>
+            <Select
+              name="friends-level"
+              label={scandic.label}
+              aria-label={scandic.label}
+              items={scandic.tiers.map((tier) => ({
+                label: tier.tier_label,
+                value: tier.tier_code,
+              }))}
+              value={activeScandicTierCode}
+              onSelect={onChangeScandic}
+            />
+            {scandic.read_more_link && (
+              <ReadMoreLink
+                href={scandic.read_more_link.href}
+                title={scandic.read_more_link.title}
+              />
+            )}
+          </div>
+          <div className={styles.comparisonIcon}>
+            <CompareArrowsIcon width={24} height={24} />
+          </div>
+          <div className={styles.comparisonBrand}>
+            <Title level="h3" textTransform="regular">
+              {sas.title}
+            </Title>
+            <Select
+              name="eb-level"
+              label={sas.label}
+              aria-label={sas.label}
+              items={sas.tiers.map((tier) => ({
+                label: tier.tier_label,
+                value: tier.tier_code,
+              }))}
+              value={activeSasTierCode}
+              onSelect={onChangeSas}
+            />
+            {sas.read_more_link && (
+              <ReadMoreLink
+                href={sas.read_more_link.href}
+                title={sas.read_more_link.title}
+              />
+            )}
+          </div>
+        </div>
+        {comparisonContent.cta && (
+          <div className={styles.ctaContainer}>
+            <Button
+              asChild
+              intent="primary"
+              size="small"
+              theme="base"
+              className={styles.ctaLink}
+            >
+              <Link color="none" href={comparisonContent.cta.href}>
+                {comparisonContent.cta.title}
+              </Link>
+            </Button>
+          </div>
+        )}
+      </div>
+    </SectionContainer>
+  )
+}
+
+function ReadMoreLink({ href, title }: { href: string; title: string }) {
+  return (
+    <Link
+      href={href}
+      variant="underscored"
+      className={styles.link}
+      color="peach80"
+    >
+      {title}
+      <ArrowRightIcon color="peach80" />
+    </Link>
+  )
+}