Merged in feat/BOOK-529-update-GLA-design-mystay (pull request #3230)

Feat/BOOK-529 update GLA design mystay * feat(BOOK-529): update gla design on my stay * feat(BOOK-529): open gla modal if error * feat(BOOK-529): add inline accordion to storybook * feat(529): move errormessage below message * feat(529): update infomodal * feat(BOOK-529): update infomodal * feat(BOOK-529): hide guarantee info for adding ancillaries if prepaid * feat(BOOK-529): update width on info dialog * feat(BOOK-529): fix alignment * feat(BOOK-529): check if member price * feat(BOOK-529): refactor msg * feat(BOOK-529): refactor terms and conditions to own component * feat(BOOK-529): clean up confirmation step Approved-by: Christel Westerberg
2025-11-28 14:27:25 +00:00
parent 22dd2f60fe
commit 46fa42750f
39 changed files with 681 additions and 485 deletions
--- a/apps/scandic-web/components/HotelReservation/MyStay/TermsAndConditions/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/MyStay/TermsAndConditions/index.tsx
@@ -0,0 +1,84 @@
+import { useFormContext } from "react-hook-form"
+import { useIntl } from "react-intl"
+
+import { bookingTermsAndConditionsRoutes } from "@scandic-hotels/common/constants/routes/bookingTermsAndConditionsRoutes"
+import { privacyPolicyRoutes } from "@scandic-hotels/common/constants/routes/privacyPolicyRoutes"
+import Checkbox from "@scandic-hotels/design-system/Form/Checkbox"
+import { ErrorMessage } from "@scandic-hotels/design-system/Form/ErrorMessage"
+import { TextLink } from "@scandic-hotels/design-system/TextLink"
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import useLang from "@/hooks/useLang"
+import { getErrorMessage } from "@/utils/getErrorMessage"
+
+import styles from "./termsAndConditions.module.css"
+
+export default function TermsAndConditions() {
+  const intl = useIntl()
+  const lang = useLang()
+  const {
+    formState: { errors },
+  } = useFormContext()
+  const termsAndConditionsMsg = intl.formatMessage(
+    {
+      id: "myStay.guarantee.termsAndConditions",
+      defaultMessage:
+        "Please accept the general <termsAndConditionsLink>Booking & Cancellation Terms </termsAndConditionsLink> and acknowledge that your data will be processed in accordance with <privacyPolicyLink> Scandic's Privacy policy </privacyPolicyLink>.",
+    },
+    {
+      termsAndConditionsLink: (str) => (
+        <TextLink
+          href={bookingTermsAndConditionsRoutes[lang]}
+          theme="InteractiveDefault"
+          typography="Link/sm"
+          target="_blank"
+          isInline
+        >
+          {str}
+        </TextLink>
+      ),
+      privacyPolicyLink: (str) => (
+        <TextLink
+          href={privacyPolicyRoutes[lang]}
+          theme="InteractiveDefault"
+          typography="Link/sm"
+          target="_blank"
+          isInline
+        >
+          {str}
+        </TextLink>
+      ),
+    }
+  )
+  return (
+    <div className={styles.termsAndConditions}>
+      <Checkbox
+        name="termsAndConditions"
+        registerOptions={{ required: true }}
+        hideError
+      >
+        <Typography variant="Body/Supporting text (caption)/smRegular">
+          <span>
+            {intl.formatMessage({
+              id: "booking.acceptBookingTerms",
+              defaultMessage: "I accept the booking and cancellation terms",
+            })}
+          </span>
+        </Typography>
+      </Checkbox>
+      <span>
+        <Typography variant="Body/Supporting text (caption)/smRegular">
+          <p>{termsAndConditionsMsg}</p>
+        </Typography>
+        <ErrorMessage
+          name="termsAndConditions"
+          errors={errors}
+          messageLabel={getErrorMessage(
+            intl,
+            errors["termsAndConditions"]?.message?.toString()
+          )}
+        />
+      </span>
+    </div>
+  )
+}