Merged in chore/move-enter-details (pull request #2778)

Chore/move enter details

Approved-by: Anton Gunnarsson

packages/booking-flow/lib/components/EnterDetails/Details/Multiroom/JoinScandicFriendsCard/index.tsx

@@ -0,0 +1,106 @@
+"use client"
+
+import { useIntl } from "react-intl"
+
+import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
+import { membershipTermsAndConditions } from "@scandic-hotels/common/constants/routes/membershipTermsAndConditions"
+import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
+import Footnote from "@scandic-hotels/design-system/Footnote"
+import Checkbox from "@scandic-hotels/design-system/Form/Checkbox"
+import Link from "@scandic-hotels/design-system/Link"
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import { useRoomContext } from "../../../../../contexts/EnterDetails/RoomContext"
+import useLang from "../../../../../hooks/useLang"
+
+import styles from "./joinScandicFriendsCard.module.css"
+
+export type JoinScandicFriendsCardProps = {
+  name?: string
+}
+export default function JoinScandicFriendsCard({
+  name = "join",
+}: JoinScandicFriendsCardProps) {
+  const lang = useLang()
+  const intl = useIntl()
+  const {
+    room,
+    roomNr,
+    actions: { updateJoin },
+  } = useRoomContext()
+
+  function onChange(event: { target: { value: boolean } }) {
+    updateJoin(event.target.value)
+  }
+
+  if (!("member" in room.roomRate) || !room.roomRate.member) {
+    return null
+  }
+
+  return (
+    <div className={styles.cardContainer}>
+      <Typography variant="Title/Subtitle/md">
+        <h2 className={styles.priceContainer}>
+          <span>
+            {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+            {`${intl.formatMessage({
+              defaultMessage: "Get the member room price",
+            })}: `}
+          </span>
+          <span className={styles.price}>
+            {intl.formatMessage(
+              {
+                defaultMessage: "{amount} for room {roomNr}",
+              },
+              {
+                amount: formatPrice(
+                  intl,
+                  room.roomRate.member.localPrice.pricePerStay ?? 0,
+                  room.roomRate.member.localPrice.currency ??
+                    CurrencyEnum.Unknown
+                ),
+                roomNr,
+              }
+            )}
+          </span>
+        </h2>
+      </Typography>
+      <Checkbox
+        name={name}
+        className={styles.checkBox}
+        registerOptions={{ onChange, value: room.guest.join }}
+      >
+        <Typography variant="Body/Paragraph/mdRegular">
+          <div>
+            {intl.formatMessage({
+              defaultMessage: "Join Scandic Friends before check-in",
+            })}
+          </div>
+        </Typography>
+      </Checkbox>
+
+      <div className={styles.terms}>
+        <Footnote color="uiTextPlaceholder">
+          {intl.formatMessage(
+            {
+              defaultMessage:
+                "By joining you accept the <termsAndConditionsLink>Terms and Conditions</termsAndConditionsLink>. The Scandic Friends Membership is valid until further notice, but can at any time be terminated by contacting Scandic Customer Service.",
+            },
+            {
+              termsAndConditionsLink: (str) => (
+                <Link
+                  textDecoration="underline"
+                  size="tiny"
+                  target="_blank"
+                  href={membershipTermsAndConditions[lang]}
+                >
+                  {str}
+                </Link>
+              ),
+            }
+          )}
+        </Footnote>
+      </div>
+    </div>
+  )
+}

packages/booking-flow/lib/components/EnterDetails/Details/Multiroom/JoinScandicFriendsCard/joinScandicFriendsCard.module.css

@@ -0,0 +1,48 @@
+.cardContainer {
+  align-self: flex-start;
+  background-color: var(--Surface-Primary-Hover-Accent);
+  border-radius: var(--Corner-radius-lg);
+  display: grid;
+  gap: var(--Space-x2);
+  padding: var(--Space-x2);
+  grid-template-areas:
+    "price"
+    "checkbox"
+    "terms";
+  width: min(100%, 696px);
+}
+
+.priceContainer {
+  grid-area: price;
+  margin-bottom: var(--Space-x1);
+}
+
+.price {
+  color: var(--Text-Accent-Primary);
+}
+
+.checkBox {
+  align-self: center;
+  grid-area: checkbox;
+}
+
+.terms {
+  grid-area: terms;
+}
+
+@media screen and (min-width: 768px) {
+  .cardContainer {
+    grid-template-columns: 1fr auto;
+    grid-template-rows: auto auto;
+    gap: var(--Space-x3);
+    grid-template-areas:
+      "price checkbox"
+      "terms terms";
+  }
+
+  .priceContainer {
+    margin-bottom: 0;
+    display: flex;
+    flex-direction: column;
+  }
+}