fix(SW-1886): Removed "firstItem" props from blocks as it generates multiple h1 tags on those pages

* feat(SW-1886): Removed "firstItem" props from blocks as it generates multiple h1 tags on those pages


Approved-by: Fredrik Thorsson
Approved-by: Simon.Emanuelsson

apps/scandic-web/components/Blocks/CardsGrid.tsx

@@ -10,10 +10,7 @@ import type { CardsGridProps } from "@/types/components/blocks/cardsGrid"
 import { CardsGridEnum, CardsGridLayoutEnum } from "@/types/enums/cardsGrid"
 import type { StackableGridProps } from "../TempDesignSystem/Grids/Stackable/stackable"
 
-export default function CardsGrid({
+export default function CardsGrid({ cards_grid }: CardsGridProps) {
-  cards_grid,
-  firstItem = false,
-}: CardsGridProps) {
   let columns: StackableGridProps["columns"]
 
   switch (cards_grid.layout) {
@@ -35,8 +32,8 @@ export default function CardsGrid({
       <SectionHeader
         title={cards_grid.title}
         preamble={cards_grid.preamble}
-        headingAs={firstItem ? "h3" : "h4"}
+        headingAs="h3"
-        headingLevel={firstItem ? "h1" : "h2"}
+        headingLevel="h2"
       />
       <Grids.Stackable columns={columns}>
         {cards_grid.cards.map((card, index) => {
@@ -45,7 +42,7 @@ export default function CardsGrid({
               return (
                 <Card
                   theme={
-                    card.backgroundImage ? "image" : cards_grid.theme ?? "one"
+                    card.backgroundImage ? "image" : (cards_grid.theme ?? "one")
                   }
                   key={card.system.uid}
                   scriptedTopTitle={card.scripted_top_title}

apps/scandic-web/components/Blocks/DynamicContent/HowItWorks/index.tsx

@@ -7,13 +7,10 @@ import styles from "./howItWorks.module.css"
 
 import type { HowItWorksProps } from "@/types/components/blocks/dynamicContent"
 
-export default async function HowItWorks({
+export default async function HowItWorks({ dynamic_content }: HowItWorksProps) {
-  dynamic_content,
-  firstItem,
-}: HowItWorksProps) {
   const intl = await getIntl()
   return (
-    <SectionWrapper dynamic_content={dynamic_content} firstItem={firstItem}>
+    <SectionWrapper dynamic_content={dynamic_content}>
       <section className={styles.container}>
         <Title level="h3">{intl.formatMessage({ id: "How it works" })}</Title>
       </section>

apps/scandic-web/components/Blocks/DynamicContent/LoyaltyLevels/index.tsx

@@ -18,14 +18,13 @@ import type { LevelCardProps } from "@/types/components/overviewTable"
 
 export default async function LoyaltyLevels({
   dynamic_content,
-  firstItem,
 }: LoyaltyLevelsProps) {
   const uniqueLevels = await serverClient().contentstack.rewards.all({
     unique: true,
   })
 
   return (
-    <SectionWrapper dynamic_content={dynamic_content} firstItem={firstItem}>
+    <SectionWrapper dynamic_content={dynamic_content}>
       <section className={styles.cardContainer}>
         {uniqueLevels.map((level) => (
           <LevelCard key={level.level_id} level={level} />

apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/index.tsx

@@ -8,7 +8,6 @@ import type { OverviewTableProps } from "@/types/components/blocks/dynamicConten
 
 export default async function OverviewTable({
   dynamic_content,
-  firstItem,
 }: OverviewTableProps) {
   const [levels, membershipLevel] = await Promise.all([
     serverClient().contentstack.rewards.all(),
@@ -16,7 +15,7 @@ export default async function OverviewTable({
   ])
 
   return (
-    <SectionWrapper dynamic_content={dynamic_content} firstItem={firstItem}>
+    <SectionWrapper dynamic_content={dynamic_content}>
       <OverviewTableClient
         levels={levels}
         activeMembership={membershipLevel?.membershipLevel ?? null}

apps/scandic-web/components/Blocks/DynamicContent/SectionWrapper/index.tsx

@@ -7,7 +7,6 @@ import type { DynamicContentProps } from "@/types/components/blocks/dynamicConte
 export default function SectionWrapper({
   children,
   dynamic_content,
-  firstItem,
 }: React.PropsWithChildren<DynamicContentProps>) {
   const displayHeader = !!(
     dynamic_content.link ||
@@ -21,8 +20,8 @@ export default function SectionWrapper({
           link={dynamic_content.link}
           preamble={dynamic_content.subtitle}
           title={dynamic_content.title}
-          headingAs={firstItem ? "h3" : "h4"}
+          headingAs="h3"
-          headingLevel={firstItem ? "h1" : "h2"}
+          headingLevel="h2"
         />
       ) : null}
       {children}

apps/scandic-web/components/Blocks/DynamicContent/index.tsx

@@ -33,7 +33,7 @@ export default function DynamicContent(props: DynamicContentProps) {
 }
 
 function DynamicContentBlocks(props: DynamicContentProps) {
-  const { dynamic_content, firstItem } = props
+  const { dynamic_content } = props
   switch (dynamic_content.component) {
     case DynamicContentEnum.Blocks.components.current_benefits:
       return <CurrentRewardsBlock {...dynamic_content} />
@@ -44,29 +44,17 @@ function DynamicContentBlocks(props: DynamicContentProps) {
         <ExpiringPoints {...dynamic_content} />
       )
     case DynamicContentEnum.Blocks.components.how_it_works:
-      return (
+      return <HowItWorks dynamic_content={dynamic_content} />
-        <HowItWorks dynamic_content={dynamic_content} firstItem={firstItem} />
-      )
     case DynamicContentEnum.Blocks.components.jobylon_feed:
       return <JobylonFeed {...dynamic_content} />
     case DynamicContentEnum.Blocks.components.loyalty_levels:
-      return (
+      return <LoyaltyLevels dynamic_content={dynamic_content} />
-        <LoyaltyLevels
-          dynamic_content={dynamic_content}
-          firstItem={firstItem}
-        />
-      )
     case DynamicContentEnum.Blocks.components.membership_overview:
       return <Overview {...dynamic_content} />
     case DynamicContentEnum.Blocks.components.next_benefits:
       return <NextLevelRewardsBlock {...dynamic_content} />
     case DynamicContentEnum.Blocks.components.overview_table:
-      return (
+      return <OverviewTable dynamic_content={dynamic_content} />
-        <OverviewTable
-          dynamic_content={dynamic_content}
-          firstItem={firstItem}
-        />
-      )
     case DynamicContentEnum.Blocks.components.points_overview:
       return <PointsOverview {...dynamic_content} />
     case DynamicContentEnum.Blocks.components.previous_stays:

apps/scandic-web/components/Blocks/ShortcutsList/index.tsx

@@ -8,7 +8,6 @@ import styles from "./shortcutsList.module.css"
 import type { ShortcutsListProps } from "@/types/components/blocks/shortcuts"
 
 export default function ShortcutsList({
-  firstItem = false,
   shortcuts,
   subtitle,
   title,
@@ -39,8 +38,8 @@ export default function ShortcutsList({
       <SectionHeader
         preamble={subtitle}
         title={title}
-        headingAs={firstItem ? "h3" : "h4"}
+        headingAs="h3"
-        headingLevel={firstItem ? "h1" : "h2"}
+        headingLevel="h2"
       />
       <section className={styles.section}>
         {columns.map(({ id, column }) => (

apps/scandic-web/components/Blocks/index.tsx

@@ -20,7 +20,6 @@ import { BlocksEnums } from "@/types/enums/blocks"
 
 export default function Blocks({ blocks }: BlocksProps) {
   return blocks.map(async (block, idx) => {
-    const firstItem = idx === 0
     switch (block.typename) {
       case BlocksEnums.block.Accordion:
         return (
@@ -35,7 +34,6 @@ export default function Blocks({ blocks }: BlocksProps) {
           <CardsGrid
             cards_grid={block.cards_grid}
             key={`${block.cards_grid.title}-${idx}`}
-            firstItem={firstItem}
           />
         )
       case BlocksEnums.block.Content:
@@ -51,7 +49,6 @@ export default function Blocks({ blocks }: BlocksProps) {
         return (
           <DynamicContent
             dynamic_content={block.dynamic_content}
-            firstItem={firstItem}
             key={`${block.dynamic_content.title}-${idx}`}
           />
         )
@@ -87,7 +84,6 @@ export default function Blocks({ blocks }: BlocksProps) {
       case BlocksEnums.block.Shortcuts:
         return (
           <ShortcutsList
-            firstItem={firstItem}
             key={`${block.shortcuts.title}-${idx}`}
             shortcuts={block.shortcuts.shortcuts}
             subtitle={block.shortcuts.subtitle}

apps/scandic-web/components/Webviews/LoyaltyPage/Blocks.tsx

@@ -10,7 +10,6 @@ import { BlocksEnums } from "@/types/enums/blocks"
 
 export default function Blocks({ blocks }: BlocksProps) {
   return blocks.map((block, idx) => {
-    const firstItem = idx === 0
     switch (block.typename) {
       case BlocksEnums.block.CardsGrid:
         return (
@@ -45,7 +44,6 @@ export default function Blocks({ blocks }: BlocksProps) {
         return (
           <DynamicContent
             dynamic_content={dynamicContent}
-            firstItem={firstItem}
             key={`${block.dynamic_content.title}-${idx}`}
           />
         )
@@ -57,7 +55,6 @@ export default function Blocks({ blocks }: BlocksProps) {
         return (
           <ShortcutsList
             key={`${block.shortcuts.title}-${idx}`}
-            firstItem={firstItem}
             shortcuts={shortcuts}
             subtitle={block.shortcuts.subtitle}
             title={block.shortcuts.title}

apps/scandic-web/types/components/blocks/cardsGrid.ts

@@ -1,5 +1,3 @@
 import type { CardsGrid } from "@/types/trpc/routers/contentstack/blocks"
 
-export interface CardsGridProps extends Pick<CardsGrid, "cards_grid"> {
+export interface CardsGridProps extends Pick<CardsGrid, "cards_grid"> {}
-  firstItem?: boolean
-}

apps/scandic-web/types/components/blocks/dynamicContent.ts

@@ -3,20 +3,8 @@ import type { DynamicContent } from "@/types/trpc/routers/contentstack/blocks"
 interface PartialDynamicContent
   extends Pick<DynamicContent, "dynamic_content"> {}
 
-export interface DynamicContentProps extends PartialDynamicContent {
+export interface DynamicContentProps extends PartialDynamicContent {}
-  firstItem: boolean
+export interface HowItWorksProps extends PartialDynamicContent {}
-}
+export interface LoyaltyLevelsProps extends PartialDynamicContent {}
-
+export interface OverviewTableProps extends PartialDynamicContent {}
-export interface HowItWorksProps extends PartialDynamicContent {
-  firstItem: boolean
-}
-
-export interface LoyaltyLevelsProps extends PartialDynamicContent {
-  firstItem: boolean
-}
-
-export interface OverviewTableProps extends PartialDynamicContent {
-  firstItem: boolean
-}
-
 export interface SignupFormWrapperProps extends PartialDynamicContent {}

apps/scandic-web/types/components/blocks/shortcuts.ts

@@ -1,8 +1,6 @@
 import type { Shortcut } from "@/types/trpc/routers/contentstack/blocks"
 
-export interface ShortcutsListProps extends Shortcut {
+export interface ShortcutsListProps extends Shortcut {}
-  firstItem?: boolean
-}
 
 export type ShortcutsListItemsProps = {
   className?: string