Merged in feature/SW-3595-sas-info-boxes (pull request #3177)

Feature/SW-3595 Add info boxes to SAS start page & Eurobonus alert to select-hotel page on SAS

* wip

* feat(SW-3595): Add info boxes to SAS start page

* Add InfoBox to design-system
* Add background gradient to SAS start page

* update variable naming and conditionalize the eurobonus message on select-hotel

* SAS startpage update default message

* make select-hotel a bit more generic with slot={} instead of alert={}


Approved-by: Anton Gunnarsson

apps/partner-sas/app/[lang]/page.tsx

@@ -1,10 +1,14 @@
 import { FloatingBookingWidget } from "@scandic-hotels/booking-flow/BookingWidget/FloatingBookingWidget"
 import { parseBookingWidgetSearchParams } from "@scandic-hotels/booking-flow/utils/url"
+import { IconName } from "@scandic-hotels/design-system/Icons/iconName"
 import Image from "@scandic-hotels/design-system/Image"
+import { InfoBox } from "@scandic-hotels/design-system/InfoBox"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 import { TrackingSDK } from "@scandic-hotels/tracking/TrackingSDK"
 
 import { bookingFlowConfig } from "@/constants/bookingFlowConfig"
 
+import { getIntl } from "@/i18n"
 import { getLang } from "@/i18n/serverContext"
 import LandingPageHeroImage from "@/public/_static/img/landing-page-hero.png"
 
@@ -18,6 +22,7 @@ export default async function Home(props: PageArgs<LangParams>) {
   const booking = parseBookingWidgetSearchParams(searchParams)
 
   const lang = await getLang()
+  const intl = await getIntl()
 
   const trackingData = {
     pageName: "startpage",
@@ -31,12 +36,52 @@ export default async function Home(props: PageArgs<LangParams>) {
   return (
     <>
       <section className={styles.mainContent}>
-        <div className={styles.bookingWidgetWrapper}>
-          <FloatingBookingWidget
-            booking={booking}
-            lang={lang}
-            config={bookingFlowConfig}
-          />
+        <div className={styles.contentContainer}>
+          <section className={styles.bookingWidgetWrapper}>
+            <Typography variant={"Title/lg"}>
+              <h1 className={styles.heading}>
+                {intl.formatMessage({
+                  id: "partnerSas.startPage.heading",
+                  defaultMessage: "Book a hotel at the best price",
+                })}
+              </h1>
+            </Typography>
+            <FloatingBookingWidget
+              booking={booking}
+              lang={lang}
+              config={bookingFlowConfig}
+            />
+          </section>
+          {bookingFlowConfig.redemptionEnabled && (
+            <section className={styles.infoBoxes}>
+              <InfoBox
+                heading={intl.formatMessage({
+                  id: "partnerSas.startPage.infoBox1.heading",
+                  defaultMessage: "Earn points",
+                })}
+                text={intl.formatMessage({
+                  id: "partnerSas.startPage.infoBox1.text",
+                  defaultMessage:
+                    "Collect new SAS EuroBonus points with your bookings.",
+                })}
+                theme={"SAS-Blue"}
+                icon={IconName.Diamond}
+              />
+              <InfoBox
+                heading={intl.formatMessage({
+                  id: "partnerSas.startPage.infoBox2.heading",
+                  defaultMessage: "Pay with points",
+                })}
+                text={intl.formatMessage({
+                  id: "partnerSas.startPage.infoBox2.text",
+                  defaultMessage:
+                    "Then use your points to pay for your next Scandic stay!",
+                })}
+                theme={"SAS-Blue"}
+                icon={IconName.CreditCard}
+              />
+            </section>
+          )}
         </div>
         <Image
           alt="Hero Image"