feat: change GLA to be more clear to the user

apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentClient.tsx

@@ -26,8 +26,8 @@ import { trpc } from "@/lib/trpc/client"
 import { useEnterDetailsStore } from "@/stores/enter-details"
 
 import PaymentOption from "@/components/HotelReservation/PaymentOption"
+import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
 import Body from "@/components/TempDesignSystem/Text/Body"
-import Title from "@/components/TempDesignSystem/Text/Title"
 import { useAvailablePaymentOptions } from "@/hooks/booking/useAvailablePaymentOptions"
 import { useHandleBookingStatus } from "@/hooks/booking/useHandleBookingStatus"
 import useLang from "@/hooks/useLang"
@@ -482,14 +482,9 @@ export default function PaymentClient({
     ]
   )
 
-  const paymentGuarantee = intl.formatMessage({
-    defaultMessage: "Payment Guarantee",
-  })
-  const payment = intl.formatMessage({
-    defaultMessage: "Payment",
-  })
-  const confirm = intl.formatMessage({
-    defaultMessage: "Confirm booking",
+  const finalStep = intl.formatMessage({ defaultMessage: "Final step" })
+  const selectPayment = intl.formatMessage({
+    defaultMessage: "Select payment method",
   })
 
   return (
@@ -499,13 +494,9 @@ export default function PaymentClient({
       })}
     >
       <header>
-        <Title level="h2" as="h4">
-          {hasOnlyFlexRates && bookingMustBeGuaranteed
-            ? paymentGuarantee
-            : hasOnlyFlexRates
-              ? confirm
-              : payment}
-        </Title>
+        <Typography variant="Title/Subtitle/md">
+          <span>{hasOnlyFlexRates ? finalStep : selectPayment}</span>
+        </Typography>
         <BookingAlert isVisible={showBookingAlert} />
       </header>
       <FormProvider {...methods}>
@@ -611,6 +602,19 @@ export default function PaymentClient({
                 ) : null}
               </section>
 
+              <div className={styles.checkboxContainer}>
+                <Checkbox name="smsConfirmation">
+                  <Typography variant="Body/Supporting text (caption)/smRegular">
+                    <span>
+                      {intl.formatMessage({
+                        defaultMessage:
+                          "I would like to get my booking confirmation via sms",
+                      })}
+                    </span>
+                  </Typography>
+                </Checkbox>
+              </div>
+
               <section className={styles.section}>
                 <TermsAndConditions isFlexBookingTerms={hasOnlyFlexRates} />
               </section>

apps/scandic-web/components/HotelReservation/EnterDetails/Payment/TermsAndConditions/index.tsx

@@ -1,5 +1,7 @@
 import { useIntl } from "react-intl"
 
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
 import { bookingTermsAndConditions, privacyPolicy } from "@/constants/webHrefs"
 
 import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
@@ -87,19 +89,13 @@ export default function TermsAndConditions({
             )}
       </Caption>
       <Checkbox name="termsAndConditions">
-        <Caption>
-          {intl.formatMessage({
-            defaultMessage: "I accept the terms and conditions",
-          })}
-        </Caption>
-      </Checkbox>
-      <Checkbox name="smsConfirmation">
-        <Caption>
-          {intl.formatMessage({
-            defaultMessage:
-              "I would like to get my booking confirmation via sms",
-          })}
-        </Caption>
+        <Typography variant="Body/Paragraph/mdBold">
+          <span>
+            {intl.formatMessage({
+              defaultMessage: "I accept the terms and conditions",
+            })}
+          </span>
+        </Typography>
       </Checkbox>
     </>
   )

apps/scandic-web/components/HotelReservation/EnterDetails/Payment/payment.module.css

@@ -43,6 +43,12 @@
   gap: var(--Spacing-x-one-and-half);
 }
 
+.checkboxContainer {
+  background-color: var(--Surface-Secondary-Default);
+  border-radius: var(--Corner-radius-Large);
+  padding: var(--Spacing-x2);
+}
+
 @media screen and (min-width: 1367px) {
   .submitButton {
     display: flex;