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>