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

Chore/move enter details

Approved-by: Anton Gunnarsson

packages/booking-flow/lib/components/EnterDetails/Payment/TermsAndConditions/index.tsx

@@ -0,0 +1,103 @@
+import { useIntl } from "react-intl"
+
+import { bookingTermsAndConditionsRoutes } from "@scandic-hotels/common/constants/routes/bookingTermsAndConditionsRoutes"
+import { privacyPolicyRoutes } from "@scandic-hotels/common/constants/routes/privacyPolicyRoutes"
+import Caption from "@scandic-hotels/design-system/Caption"
+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 useLang from "../../../../hooks/useLang"
+
+import styles from "../payment.module.css"
+
+type TermsAndConditionsProps = {
+  isFlexBookingTerms: boolean
+}
+export default function TermsAndConditions({
+  isFlexBookingTerms,
+}: TermsAndConditionsProps) {
+  const intl = useIntl()
+  const lang = useLang()
+
+  return (
+    <>
+      <Caption>
+        {isFlexBookingTerms
+          ? intl.formatMessage(
+              {
+                defaultMessage:
+                  "I accept the terms for this booking and the general <termsAndConditionsLink>Terms & Conditions</termsAndConditionsLink>, and understand that Scandic will process my personal data for this booking in accordance with <privacyPolicyLink>Scandic's Privacy policy</privacyPolicyLink>.",
+              },
+              {
+                termsAndConditionsLink: (str) => (
+                  <Link
+                    className={styles.link}
+                    textDecoration="underline"
+                    href={bookingTermsAndConditionsRoutes[lang]}
+                    target="_blank"
+                    weight="bold"
+                    size="small"
+                  >
+                    {str}
+                  </Link>
+                ),
+                privacyPolicyLink: (str) => (
+                  <Link
+                    className={styles.link}
+                    textDecoration="underline"
+                    href={privacyPolicyRoutes[lang]}
+                    target="_blank"
+                    weight="bold"
+                    size="small"
+                  >
+                    {str}
+                  </Link>
+                ),
+              }
+            )
+          : intl.formatMessage(
+              {
+                defaultMessage:
+                  "By paying with any of the payment methods available, I accept the terms for this booking and the general <termsAndConditionsLink>Terms & Conditions</termsAndConditionsLink>, and understand that Scandic will process my personal data for this booking in accordance with <privacyPolicyLink>Scandic's Privacy policy</privacyPolicyLink>. I also accept that Scandic requires a valid payment card during my visit in case anything is left unpaid.",
+              },
+              {
+                termsAndConditionsLink: (str) => (
+                  <Link
+                    className={styles.link}
+                    textDecoration="underline"
+                    href={bookingTermsAndConditionsRoutes[lang]}
+                    target="_blank"
+                    weight="bold"
+                    size="small"
+                  >
+                    {str}
+                  </Link>
+                ),
+                privacyPolicyLink: (str) => (
+                  <Link
+                    className={styles.link}
+                    textDecoration="underline"
+                    href={privacyPolicyRoutes[lang]}
+                    target="_blank"
+                    weight="bold"
+                    size="small"
+                  >
+                    {str}
+                  </Link>
+                ),
+              }
+            )}
+      </Caption>
+      <Checkbox name="termsAndConditions">
+        <Typography variant="Body/Paragraph/mdBold">
+          <span>
+            {intl.formatMessage({
+              defaultMessage: "I accept the terms and conditions",
+            })}
+          </span>
+        </Typography>
+      </Checkbox>
+    </>
+  )
+}