feat(SW-2270): Added hotel listing block to campaign overview page

Approved-by: Matilda Landström

apps/scandic-web/components/Blocks/CampaignHotelListing/Client.tsx

@@ -20,6 +20,7 @@ import type { HotelDataWithUrl } from "@scandic-hotels/trpc/types/hotel"
 
 interface CampaignHotelListingClientProps {
   heading: string
+  preamble?: string | null
   hotels: HotelDataWithUrl[]
   visibleCountMobile?: 3 | 6
   visibleCountDesktop?: 3 | 6
@@ -27,6 +28,7 @@ interface CampaignHotelListingClientProps {
 
 export default function CampaignHotelListingClient({
   heading,
+  preamble,
   hotels,
   visibleCountMobile = 3,
   visibleCountDesktop = 6,
@@ -46,7 +48,7 @@ export default function CampaignHotelListingClient({
   )
 
   // Only show the show more/less button if the length of hotels exceeds the threshold count
-  const showButton = hotels.length >= thresholdCount
+  const showButton = hotels.length > thresholdCount
 
   // Determine if we are at the stage where the user can click to show all hotels
   const canShowAll =
@@ -93,6 +95,11 @@ export default function CampaignHotelListingClient({
         <Typography variant="Title/Subtitle/lg">
           <h3>{heading}</h3>
         </Typography>
+        {preamble ? (
+          <Typography variant="Body/Paragraph/mdRegular">
+            <p>{preamble}</p>
+          </Typography>
+        ) : null}
       </header>
       <ul className={styles.list}>
         {hotels.map(({ hotel, url }, index) => (

apps/scandic-web/components/Blocks/CampaignHotelListing/campaignHotelListing.module.css

@@ -8,6 +8,11 @@
   scroll-margin-top: var(--scroll-margin-top);
 }
 
+.header {
+  display: grid;
+  gap: var(--Space-x15);
+}
+
 .list {
   list-style: none;
   display: grid;

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

@@ -4,6 +4,7 @@ import CampaignHotelListingClient from "./Client"
 
 interface CampaignHotelListingProps {
   heading: string
+  preamble?: string | null
   hotelIds: string[]
   visibleCountMobile?: 3 | 6
   visibleCountDesktop?: 3 | 6
@@ -11,6 +12,7 @@ interface CampaignHotelListingProps {
 
 export default async function CampaignHotelListing({
   heading,
+  preamble,
   hotelIds,
   visibleCountMobile,
   visibleCountDesktop,
@@ -24,6 +26,7 @@ export default async function CampaignHotelListing({
   return (
     <CampaignHotelListingClient
       heading={heading}
+      preamble={preamble}
       hotels={hotels}
       visibleCountMobile={visibleCountMobile}
       visibleCountDesktop={visibleCountDesktop}

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

@@ -1,5 +1,6 @@
 import { BlocksEnums } from "@scandic-hotels/trpc/types/blocks"
 
+import CampaignHotelListing from "@/components/Blocks/CampaignHotelListing"
 import CarouselCards from "@/components/Blocks/CarouselCards"
 
 import type { BlocksProps } from "@/types/components/blocks"
@@ -14,6 +15,17 @@ export default function Blocks({ blocks }: BlocksProps) {
             key={block.carousel_cards.heading}
           />
         )
+      case BlocksEnums.block.CampaignOverviewPageHotelListing:
+        return (
+          <CampaignHotelListing
+            key={block.hotel_listing.heading}
+            heading={block.hotel_listing.heading}
+            preamble={block.hotel_listing.preamble}
+            hotelIds={block.hotel_listing.hotelIds}
+            visibleCountMobile={3}
+            visibleCountDesktop={3}
+          />
+        )
       default:
         return null
     }