Merged in fix/no-my-stay-for-external-bookings (pull request #2126)

fix: Only link web and app bookings to my stay

Approved-by: Joakim Jäderberg

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

@@ -18,13 +18,37 @@ import styles from "./stay.module.css"
 import type { StayCardProps } from "@/types/components/myPages/stays/stayCard"
 
 export default function StayCard({ stay }: StayCardProps) {
-  const lang = useLang()
-
   // TODO: Temporary loading. Remove when current web is deleted.
   const [loading, setLoading] = useState(false)
 
-  const { checkinDate, checkoutDate, hotelInformation, bookingUrl } =
+  const { bookingUrl, isWebAppOrigin } = stay.attributes
-    stay.attributes
+
+  const shouldLinkToMyStay = isWebAppOrigin
+
+  if (!shouldLinkToMyStay) {
+    return <CardContent stay={stay} />
+  }
+
+  return (
+    <Link
+      href={bookingUrl}
+      className={styles.link}
+      onClick={() => setLoading(true)}
+    >
+      <CardContent stay={stay} />
+      {loading && (
+        <div className={styles.loadingcontainer}>
+          <LoadingSpinner />
+        </div>
+      )}
+    </Link>
+  )
+}
+
+function CardContent({ stay }: StayCardProps) {
+  const lang = useLang()
+
+  const { checkinDate, checkoutDate, hotelInformation } = stay.attributes
 
   const arrival = dt(checkinDate).locale(lang)
   const arrivalDate = arrival.format("DD MMM")
@@ -34,44 +58,33 @@ export default function StayCard({ stay }: StayCardProps) {
   const departDateTime = depart.format("YYYY-MM-DD")
 
   return (
-    <Link
+    <article className={styles.stay}>
-      href={bookingUrl}
+      <Image
-      className={styles.link}
+        className={styles.image}
-      onClick={() => setLoading(true)}
+        alt={hotelInformation.hotelContent.images.metaData.altText}
-    >
+        src={hotelInformation.hotelContent.images.imageSizes.small}
-      <article className={styles.stay}>
+        width={420}
-        <Image
+        height={240}
-          className={styles.image}
+      />
-          alt={hotelInformation.hotelContent.images.metaData.altText}
+      <footer className={styles.footer}>
-          src={hotelInformation.hotelContent.images.imageSizes.small}
+        <Title as="h4" className={styles.hotel} level="h3">
-          width={420}
+          {hotelInformation.hotelName}
-          height={240}
+        </Title>
-        />
+        <div className={styles.date}>
-        <footer className={styles.footer}>
+          <MaterialIcon
-          <Title as="h4" className={styles.hotel} level="h3">
+            icon="calendar_month"
-            {hotelInformation.hotelName}
+            color="Icon/Interactive/Default"
-          </Title>
+          />
-          <div className={styles.date}>
+          <Caption asChild>
-            <MaterialIcon
+            <time dateTime={arrivalDateTime}>{arrivalDate}</time>
-              icon="calendar_month"
+          </Caption>
-              color="Icon/Interactive/Default"
+          {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
-            />
+          {" - "}
-            <Caption asChild>
+          <Caption asChild>
-              <time dateTime={arrivalDateTime}>{arrivalDate}</time>
+            <time dateTime={departDateTime}>{departDate}</time>
-            </Caption>
+          </Caption>
-            {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
-            {" - "}
-            <Caption asChild>
-              <time dateTime={departDateTime}>{departDate}</time>
-            </Caption>
-          </div>
-        </footer>
-      </article>
-      {loading && (
-        <div className={styles.loadingcontainer}>
-          <LoadingSpinner />
         </div>
-      )}
+      </footer>
-    </Link>
+    </article>
   )
 }