Merged in hotfix/b-code-button (pull request #2083)

hotfix: removed link button and show a normal button instead

* hotfix: removed link button and show a normal button instead


Approved-by: Joakim Jäderberg

apps/scandic-web/components/Forms/BookingWidget/FormContent/BookingCode/booking-code.module.css

@@ -11,6 +11,11 @@
   padding: var(--Spacing-x1) var(--Spacing-x-one-and-half);
 }
 
+.bookingCodeErrorContainer {
+  display: flex;
+  flex-direction: column;
+}
+
 .bookingCodeLabel {
   display: flex;
   align-items: center;
@@ -54,6 +59,7 @@
 
 .bookingCodeError {
   white-space: normal;
+  margin-bottom: 1rem;
 }
 @media screen and (max-width: 767px) {
   .hideOnMobile {

apps/scandic-web/components/Forms/BookingWidget/FormContent/BookingCode/index.tsx

@@ -8,13 +8,13 @@ import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 
 import { REDEMPTION } from "@/constants/booking"
 
+import ButtonLink from "@/components/ButtonLink"
 import Modal from "@/components/Modal"
 import Button from "@/components/TempDesignSystem/Button"
 import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
 import Input from "@/components/TempDesignSystem/Form/Input"
 import { getErrorMessage } from "@/components/TempDesignSystem/Form/Input/errors"
 import Switch from "@/components/TempDesignSystem/Form/Switch"
-import Link from "@/components/TempDesignSystem/Link"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 
@@ -292,26 +292,18 @@ function BookingCodeError({ codeError }: { codeError: FieldError }) {
           className={styles.errorIcon}
         />
         {codeError.message === bookingWidgetErrors.BOOKING_CODE_ONLY_ENGLISH ? (
-          // eslint-disable-next-line formatjs/no-literal-string-in-jsx
+          <div className={styles.bookingCodeErrorContainer}>
             <span className={styles.bookingCodeError}>
               {
                 /* eslint-disable-next-line formatjs/no-literal-string-in-jsx */
-              "Dieser Code ist nur auf unserer "
+                "Dieser Code ist nur auf unserer englischen Website gültig"
-            }
-            <Link
-              color="burgundy"
-              href="https://www.scandichotels.com"
-              size="small"
-              target="_blank"
-            >
-              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
-              {"englischen Website"}
-            </Link>
-            {
-              /* eslint-disable-next-line formatjs/no-literal-string-in-jsx */
-              " gültig"
               }
             </span>
+            <ButtonLink href="https://www.scandichotels.com" variant="Tertiary">
+              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+              {"Englischen Website"}
+            </ButtonLink>
+          </div>
         ) : (
           getErrorMessage(intl, codeError.message)
         )}