Merged in SW-3270-move-interactive-map-to-design-system-or-booking-flow (pull request #2681)

SW-3270 move interactive map to design system or booking flow

* wip

* wip

* merge

* wip

* add support for locales in design-system

* add story for HotelCard

* setup alias

* .

* remove tracking from design-system for hotelcard

* pass isUserLoggedIn

* export design-system-new-deprecated.css from design-system

* Add HotelMarkerByType to Storybook

* Add interactive map to Storybook

* fix reactintl in vitest

* rename env variables

* .

* fix background colors

* add storybook stories for <Link />

* merge

* fix tracking for when clicking 'See rooms' in InteractiveMap

* Merge branch 'master' of bitbucket.org:scandic-swap/web into SW-3270-move-interactive-map-to-design-system-or-booking-flow

* remove deprecated comment


Approved-by: Anton Gunnarsson

packages/design-system/lib/components/HotelCard/HotelChequeCard/hotelChequeCard.module.css

@@ -0,0 +1,22 @@
+.chequeCard {
+  padding: var(--Space-x15);
+  background-color: var(--Base-Surface-Secondary-light-Normal);
+  border-radius: var(--Corner-radius-md);
+  margin: 0;
+  width: 100%;
+  display: grid;
+  gap: var(--Space-x1);
+}
+
+.chequeRow,
+.cheque {
+  display: flex;
+  gap: var(--Space-x05);
+  justify-content: space-between;
+  align-items: baseline;
+  color: var(--Text-Default);
+}
+
+.cheque {
+  justify-content: end;
+}

packages/design-system/lib/components/HotelCard/HotelChequeCard/index.tsx

@@ -0,0 +1,64 @@
+import { useIntl } from 'react-intl'
+
+import { CurrencyEnum } from '@scandic-hotels/common/constants/currency'
+import Caption from '@scandic-hotels/design-system/Caption'
+import Subtitle from '@scandic-hotels/design-system/Subtitle'
+
+import styles from './hotelChequeCard.module.css'
+
+import type { ProductTypeCheque } from '@scandic-hotels/trpc/types/availability'
+
+export default function HotelChequeCard({
+  productTypeCheque,
+}: {
+  productTypeCheque: ProductTypeCheque
+}) {
+  const intl = useIntl()
+  return (
+    <div className={styles.chequeCard}>
+      <div className={styles.chequeRow}>
+        <Caption>
+          {intl.formatMessage({
+            defaultMessage: 'From',
+          })}
+        </Caption>
+        <div className={styles.cheque}>
+          <Subtitle type="two" color="uiTextHighContrast">
+            {productTypeCheque.localPrice.numberOfCheques}
+          </Subtitle>
+          <Caption color="uiTextHighContrast">{CurrencyEnum.CC}</Caption>
+          {productTypeCheque.localPrice.additionalPricePerStay > 0 ? (
+            <>
+              {'+'}
+              <Subtitle type="two" color="uiTextHighContrast">
+                {productTypeCheque.localPrice.additionalPricePerStay}
+              </Subtitle>
+              <Caption color="uiTextHighContrast">
+                {productTypeCheque.localPrice.currency}
+              </Caption>
+            </>
+          ) : null}
+        </div>
+      </div>
+      {productTypeCheque.requestedPrice &&
+      productTypeCheque.requestedPrice.additionalPricePerStay > 0 ? (
+        <div className={styles.chequeRow}>
+          <Caption color="uiTextMediumContrast">
+            {intl.formatMessage({
+              defaultMessage: 'Approx.',
+            })}
+          </Caption>
+          <Caption color={'uiTextMediumContrast'}>
+            {productTypeCheque.requestedPrice.numberOfCheques} {CurrencyEnum.CC}
+            {productTypeCheque.requestedPrice.additionalPricePerStay
+              ? // eslint-disable-next-line formatjs/no-literal-string-in-jsx
+                ' + '
+              : ''}
+            {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+            {`${productTypeCheque.requestedPrice.additionalPricePerStay} ${productTypeCheque.requestedPrice.currency}`}
+          </Caption>
+        </div>
+      ) : null}
+    </div>
+  )
+}