Merged in feat/LOY-422-new-upcoming-stays (pull request #3121)

feat(LOY-422): Upcoming Stays Redesign

* feat(LOY-422): Upcoming Stays Redesign

* feat(LOY-422): Carousel next/previous arrows

* chore(LOY-422): add new material icon

* refactor(LOY-422): restructure new and old upcoming stays

* fix(LOY-422): handle less than 1 case

* chore(LOY-422): remove uneeded id

* chore(LOY-422): remove intl label for date edge case


Approved-by: Matilda Landström

apps/scandic-web/components/Blocks/DynamicContent/Stays/UpcomingStays/CarouselCard/index.tsx

@@ -0,0 +1,114 @@
+"use client"
+
+import { useIntl } from "react-intl"
+
+import { dt } from "@scandic-hotels/common/dt"
+import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
+import { Divider } from "@scandic-hotels/design-system/Divider"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import Image from "@scandic-hotels/design-system/Image"
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import useLang from "@/hooks/useLang"
+
+import { getDaysUntilText } from "../../utils/getDaysUntilText"
+
+import styles from "./carouselCard.module.css"
+
+import type { Stay } from "@scandic-hotels/trpc/routers/user/output"
+
+interface CarouselCardProps {
+  stay: Stay
+}
+
+export default function CarouselCard({ stay }: CarouselCardProps) {
+  const intl = useIntl()
+  const lang = useLang()
+
+  const { attributes } = stay
+  const {
+    checkinDate,
+    checkoutDate,
+    hotelInformation,
+    isWebAppOrigin,
+    bookingUrl,
+  } = attributes
+
+  const daysUntilText = getDaysUntilText(checkinDate, lang, intl)
+
+  return (
+    <article className={styles.card}>
+      <div className={styles.imageContainer}>
+        <Image
+          className={styles.image}
+          alt={
+            hotelInformation.hotelContent.images.altText ||
+            hotelInformation.hotelContent.images.altText_En ||
+            hotelInformation.hotelName
+          }
+          src={hotelInformation.hotelContent.images.src}
+          width={400}
+          height={300}
+          priority
+        />
+        <div className={styles.imageOverlay}>
+          <Typography variant="Title/Overline/sm">
+            <span>{daysUntilText}</span>
+          </Typography>
+          <Typography variant="Title/md">
+            <span>{hotelInformation.hotelName}</span>
+          </Typography>
+          {hotelInformation.cityName && (
+            <Typography variant="Title/Overline/sm">
+              <span>{hotelInformation.cityName}</span>
+            </Typography>
+          )}
+        </div>
+      </div>
+
+      <div className={styles.content}>
+        <div className={styles.infoRow}>
+          <Typography variant="Body/Paragraph/mdRegular">
+            <span className={styles.infoItem}>
+              <MaterialIcon icon="calendar_month" color="Icon/Default" />
+              {intl.formatMessage({
+                id: "common.dates",
+                defaultMessage: "Dates",
+              })}
+            </span>
+          </Typography>
+          <Typography variant="Body/Paragraph/mdRegular">
+            <span className={styles.dateRange}>
+              <time>{dt(checkinDate).locale(lang).format("D MMM")}</time>
+              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+              {" → "}
+              <time>{dt(checkoutDate).locale(lang).format("D MMM, YYYY")}</time>
+            </span>
+          </Typography>
+        </div>
+
+        {isWebAppOrigin && (
+          <>
+            <Divider variant="horizontal" color="Border/Divider/Default" />
+            <ButtonLink
+              variant="Text"
+              color="Primary"
+              size="Small"
+              href={bookingUrl}
+            >
+              {intl.formatMessage({
+                id: "nextStay.seeDetailsAndExtras",
+                defaultMessage: "See details & extras",
+              })}
+              <MaterialIcon
+                icon="keyboard_arrow_right"
+                color="CurrentColor"
+                size={20}
+              />
+            </ButtonLink>
+          </>
+        )}
+      </div>
+    </article>
+  )
+}