fix(SW-2073): Links for terms & conditions and privacy policy are moved out of the label for ancillaries and gla

Approved-by: Matilda Landström

apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/ConfirmationStep/confirmationStep.module.css

@@ -5,6 +5,7 @@
 }
 
 .termsAndConditions {
-  display: flex;
+  display: grid;
-  gap: var(--Space-x1);
+  gap: var(--Space-x2);
+  color: var(--Text-Secondary);
 }

apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/ConfirmationStep/index.tsx

@@ -97,43 +97,48 @@ export default function ConfirmationStep({
         </>
       )}
       <div className={styles.termsAndConditions}>
+        <Typography variant="Body/Supporting text (caption)/smRegular">
+          <p>
+            {intl.formatMessage(
+              {
+                id: "Yes, I accept the general <termsAndConditionsLink>Terms & Conditions</termsAndConditionsLink>, and understand that Scandic will process my personal data in accordance with <privacyPolicyLink>Scandic's Privacy policy</privacyPolicyLink>. There you can learn more about what data we process, your rights and where to turn if you have questions.",
+              },
+              {
+                termsAndConditionsLink: (str) => (
+                  <Link
+                    variant="underscored"
+                    color="peach80"
+                    target="_blank"
+                    href={bookingTermsAndConditions[lang]}
+                  >
+                    {str}
+                  </Link>
+                ),
+                privacyPolicyLink: (str) => (
+                  <Link
+                    variant="underscored"
+                    color="peach80"
+                    target="_blank"
+                    href={privacyPolicy[lang]}
+                  >
+                    {str}
+                  </Link>
+                ),
+              }
+            )}
+          </p>
+        </Typography>
         <Checkbox
+          className={styles.checkbox}
           name="termsAndConditions"
           registerOptions={{ required: true }}
-          topAlign
         >
           <Typography variant="Body/Supporting text (caption)/smRegular">
-            <p>
+            <span>
-              {intl.formatMessage(
+              {intl.formatMessage({
-                {
+                id: "I accept the terms and conditions",
-                  id: "Yes, I accept the general <termsAndConditionsLink>Terms & Conditions</termsAndConditionsLink>, and understand that Scandic will process my personal data in accordance with <privacyPolicyLink>Scandic's Privacy policy</privacyPolicyLink>. There you can learn more about what data we process, your rights and where to turn if you have questions.",
+              })}
-                },
+            </span>
-                {
-                  termsAndConditionsLink: (str) => (
-                    <Typography variant="Link/sm">
-                      <Link
-                        variant="underscored"
-                        href={bookingTermsAndConditions[lang]}
-                        target="_blank"
-                      >
-                        {str}
-                      </Link>
-                    </Typography>
-                  ),
-                  privacyPolicyLink: (str) => (
-                    <Typography variant="Link/sm">
-                      <Link
-                        variant="underscored"
-                        href={privacyPolicy[lang]}
-                        target="_blank"
-                      >
-                        {str}
-                      </Link>
-                    </Typography>
-                  ),
-                }
-              )}
-            </p>
           </Typography>
         </Checkbox>
       </div>

apps/scandic-web/components/HotelReservation/MyStay/GuaranteeLateArrival/guaranteeLateArrival.module.css

@@ -30,8 +30,9 @@
 }
 
 .termsAndConditions {
-  display: flex;
+  display: grid;
   gap: var(--Spacing-x2);
+  color: var(--Text-Secondary);
 }
 
 .section {

apps/scandic-web/components/HotelReservation/MyStay/GuaranteeLateArrival/index.tsx

@@ -5,6 +5,8 @@ import { useRouter } from "next/navigation"
 import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"
 
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
 import { PaymentMethodEnum } from "@/constants/booking"
 import {
   bookingTermsAndConditions,
@@ -142,8 +144,8 @@ export default function GuaranteeLateArrival({
               label={intl.formatMessage({ id: "Credit card" })}
             />
             <div className={styles.termsAndConditions}>
-              <Checkbox topAlign name={"termsAndConditions"}>
+              <Typography variant="Body/Supporting text (caption)/smRegular">
-                <Caption>
+                <p>
                   {intl.formatMessage(
                     {
                       id: "By guaranteeing with any of the payment methods available, I accept the terms for this stay and the general <termsAndConditionsLink>Terms & Conditions</termsAndConditionsLink>, and understand Scandic will process my personal data for this stay in accordance with <privacyPolicyLink>Scandic’s Privacy Policy</privacyPolicyLink>. I accept Scandic requiring a valid credit card during my visit in case anything is left unpaid.",
@@ -152,8 +154,9 @@ export default function GuaranteeLateArrival({
                       termsAndConditionsLink: (str) => (
                         <Link
                           variant="underscored"
-                          href={bookingTermsAndConditions[lang]}
+                          color="peach80"
                           target="_blank"
+                          href={bookingTermsAndConditions[lang]}
                         >
                           {str}
                         </Link>
@@ -161,15 +164,25 @@ export default function GuaranteeLateArrival({
                       privacyPolicyLink: (str) => (
                         <Link
                           variant="underscored"
-                          href={privacyPolicy[lang]}
+                          color="peach80"
                           target="_blank"
+                          href={privacyPolicy[lang]}
                         >
                           {str}
                         </Link>
                       ),
                     }
                   )}
-                </Caption>
+                </p>
+              </Typography>
+              <Checkbox name="termsAndConditions">
+                <Typography variant="Body/Supporting text (caption)/smRegular">
+                  <span>
+                    {intl.formatMessage({
+                      id: "I accept the terms and conditions",
+                    })}
+                  </span>
+                </Typography>
               </Checkbox>
             </div>
             <div className={styles.guaranteeCost}>