Merged in feat/SW-1149-handle-status-polling (pull request #1562)

Feat/SW-1149 handle status polling

* feat(SW-1149): move terms and conditions sections to separate component and added copy

* feat(SW-1149): Added client component to handle success callback for payment flow

* fix: check for bookingCompleted status as well

* feat(SW-1587): use alert instead of toast for showing payment errors

* fix: added enum for payment callback status

* fix: proper way of checking for multiple statuses

* fix: update schema type

* fix: use localised link to customer service

* fix: update to use enum for status strings


Approved-by: Arvid Norlin

apps/scandic-web/components/HotelReservation/EnterDetails/Confirm/confirm.module.css

@@ -29,7 +29,6 @@
   display: flex;
   flex-direction: column;
   gap: var(--Spacing-x2);
-  padding: 0 var(--Spacing-x2);
   width: min(800px, 100%);
 }
 

apps/scandic-web/components/HotelReservation/EnterDetails/Confirm/index.tsx

@@ -8,20 +8,15 @@ import { Button } from "@scandic-hotels/design-system/Button"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { PaymentMethodEnum } from "@/constants/booking"
-import {
-  bookingTermsAndConditions,
-  privacyPolicy,
-} from "@/constants/currentWebHrefs"
 
 import { InfoCircleIcon } from "@/components/Icons"
 import Modal from "@/components/Modal"
 import Divider from "@/components/TempDesignSystem/Divider"
 import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
-import Link from "@/components/TempDesignSystem/Link"
-import useLang from "@/hooks/useLang"
 
 import MySavedCards from "../Payment/MySavedCards"
 import PaymentOption from "../Payment/PaymentOption"
+import TermsAndConditions from "../Payment/TermsAndConditions"
 
 import styles from "./confirm.module.css"
 
@@ -35,7 +30,6 @@ export default function ConfirmBooking({
   savedCreditCards,
 }: ConfirmBookingProps) {
   const intl = useIntl()
-  const lang = useLang()
   const [isModalOpen, setModalOpen] = useState(false)
 
   const { watch } = useFormContext()
@@ -130,50 +124,7 @@ export default function ConfirmBooking({
         )}
       </div>
       <div className={styles.checkboxContainer}>
-        <Checkbox name="smsConfirmation">
-          <Typography variant="Body/Supporting text (caption)/smRegular">
-            <p>
-              {intl.formatMessage({
-                id: "I would like to get my booking confirmation via sms",
-              })}
-            </p>
-          </Typography>
-        </Checkbox>
-        <div className={styles.checkbox}>
-          <Checkbox name="termsAndConditions" topAlign>
-            <Typography variant="Body/Supporting text (caption)/smRegular">
-              <p>
-                {intl.formatMessage(
-                  {
-                    id: "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 require a valid credit card during my visit in case anything is left unpaid.",
-                  },
-                  {
-                    termsAndConditionsLink: (str) => (
-                      <Link
-                        className={styles.link}
-                        variant="underscored"
-                        href={bookingTermsAndConditions[lang]}
-                        target="_blank"
-                      >
-                        {str}
-                      </Link>
-                    ),
-                    privacyPolicyLink: (str) => (
-                      <Link
-                        className={styles.link}
-                        variant="underscored"
-                        href={privacyPolicy[lang]}
-                        target="_blank"
-                      >
-                        {str}
-                      </Link>
-                    ),
-                  }
-                )}
-              </p>
-            </Typography>
-          </Checkbox>
-        </div>
+        <TermsAndConditions />
       </div>
     </div>
   )