Merged in fix/SW-2626-error-message-multiroom-reward (pull request #2299)

fix(SW-2626): add multiroom reward error message for mobile * fix(SW-2626): add multiroom reward error message for mobile * fix(SW-2626): error message to red color * fix(SW-2626): fix errorContainer * fix(SW-2626): fix button fullwidth * fix(SW-2626): fix button fullwidth * fix(SW-2626): add design * fix(SW-2626): add new colors for checkbox * fix(SW-2626): new color for input * fix(SW-2626): fix pr comment * fix(SW-2626): final ui for desktop and mobile Approved-by: Hrishikesh Vaipurkar
2025-06-12 12:51:37 +00:00
parent 2dd07eb6b8
commit 5b90e15746
15 changed files with 213 additions and 114 deletions
--- a/apps/scandic-web/components/Forms/BookingWidget/FormContent/BookingCode/booking-code.module.css
+++ b/apps/scandic-web/components/Forms/BookingWidget/FormContent/BookingCode/booking-code.module.css
@@ -16,20 +16,20 @@
  align-items: center;
  gap: var(--Spacing-x-half);
  position: relative;
+  color: var(--Text-Accent-Primary);
 }

 .errorContainer {
  display: flex;
  flex-direction: column;
-  gap: var(--Spacing-x1);
-}
-.error {
-  display: flex;
-  gap: var(--Spacing-x-half);
+  gap: var(--Space-x2);
 }

-.errorIcon {
-  min-width: 20px;
+.error {
+  display: flex;
+  gap: var(--Space-x1);
+  white-space: break-spaces;
+  color: var(--UI-Text-Error);
 }

 .bookingCodeRemember,
@@ -52,10 +52,17 @@
  align-items: center;
 }

+.removeButton {
+  width: 100%;
+}
+
@media screen and (max-width: 767px) {
  .hideOnMobile {
    display: none;
  }
+  .removeButton {
+    display: none;
+  }
 }

@media screen and (min-width: 768px) {
@@ -69,6 +76,9 @@
    justify-content: space-between;
    border-radius: var(--Spacing-x-one-and-half);
  }
+  .error {
+    color: var(--Text-Default);
+  }
 }

@media screen and (min-width: 768px) and (max-width: 1366px) {
--- a/apps/scandic-web/components/Forms/BookingWidget/FormContent/BookingCode/index.tsx
+++ b/apps/scandic-web/components/Forms/BookingWidget/FormContent/BookingCode/index.tsx
@@ -5,6 +5,7 @@ import { useIntl } from "react-intl"
 import { useMediaQuery } from "usehooks-ts"

 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { Typography } from "@scandic-hotels/design-system/Typography"

 import { REDEMPTION } from "@/constants/booking"

@@ -17,8 +18,8 @@ import Switch from "@/components/TempDesignSystem/Form/Switch"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"

-import { bookingWidgetErrors } from "../../schema"
 import { Input as BookingWidgetInput } from "../Input"
+import { isMultiRoomError } from "../utils"

 import styles from "./booking-code.module.css"

@@ -70,6 +71,7 @@ export default function BookingCode() {
      // Add delay to handle table mode rendering
      setTimeout(function () {
        setValue(REDEMPTION, false, {
+          shouldValidate: true,
          shouldDirty: true,
        })
      })
@@ -147,13 +149,9 @@ export default function BookingCode() {
    >
      <div className={styles.bookingCode}>
        <div className={styles.bookingCodeLabel}>
-          <Caption
-            color={showRemember ? "uiTextActive" : "red"}
-            type="bold"
-            asChild
-          >
+          <Typography variant="Body/Supporting text (caption)/smBold">
            <span>{codeVoucher}</span>
-          </Caption>
+          </Typography>
          <CodeRulesModal />
        </div>
        <BookingWidgetInput
@@ -176,7 +174,7 @@ export default function BookingCode() {
          }
        >
          {codeError?.message ? (
-            <BookingCodeError codeError={codeError} />
+            <BookingCodeError codeError={codeError} isDesktop />
          ) : (
            <CodeRemember
              bookingCodeValue={bookingCode?.value}
@@ -266,7 +264,8 @@ function CodeRemember({ bookingCodeValue, onApplyClick }: CodeRememberProps) {
        <Button
          size="small"
          className={styles.hideOnMobile}
-          intent="secondary"
+          intent="tertiary"
+          theme="base"
          type="button"
          onClick={onApplyClick}
        >
@@ -279,29 +278,36 @@ function CodeRemember({ bookingCodeValue, onApplyClick }: CodeRememberProps) {
  )
 }

-function BookingCodeError({ codeError }: { codeError: FieldError }) {
+function BookingCodeError({
+  codeError,
+  isDesktop = false,
+}: {
+  codeError: FieldError
+  isDesktop?: boolean
+}) {
  const intl = useIntl()
-  const isMultiroomErr =
-    codeError.message ===
-      bookingWidgetErrors.MULTIROOM_BOOKING_CODE_UNAVAILABLE ||
-    codeError.message === bookingWidgetErrors.MULTIROOM_REWARD_NIGHT_UNAVAILABLE
-  const isInvalidErr =
-    codeError.message === bookingWidgetErrors.BOOKING_CODE_INVALID
+  const isMultiroomError = isMultiRoomError(codeError.message)

  return (
    <div className={styles.errorContainer}>
-      <Caption className={styles.error}>
-        <MaterialIcon
-          icon="error"
-          color={
-            isInvalidErr ? "Icon/Feedback/Information" : "Icon/Feedback/Error"
-          }
-          className={styles.errorIcon}
-        />
-        {getErrorMessage(intl, codeError.message)}
-      </Caption>
-      {isMultiroomErr ? (
-        <RemoveExtraRooms className={styles.hideOnMobile} />
+      <Typography
+        className={styles.error}
+        variant="Body/Supporting text (caption)/smRegular"
+      >
+        <span>
+          <MaterialIcon
+            size={20}
+            icon="error"
+            color="Icon/Feedback/Error"
+            isFilled={!isDesktop}
+          />
+          {getErrorMessage(intl, codeError.message)}
+        </span>
+      </Typography>
+      {isMultiroomError ? (
+        <div className={styles.removeButton}>
+          <RemoveExtraRooms fullWidth />
+        </div>
      ) : null}
    </div>
  )
@@ -325,7 +331,7 @@ export function RemoveExtraRooms({ ...props }: ButtonProps) {
      type="button"
      onClick={removeExtraRooms}
      size="small"
-      intent="primary"
+      intent="secondary"
      {...props}
    >
      {intl.formatMessage({
--- a/apps/scandic-web/components/Forms/BookingWidget/FormContent/RewardNight/index.tsx
+++ b/apps/scandic-web/components/Forms/BookingWidget/FormContent/RewardNight/index.tsx
@@ -3,6 +3,7 @@
 import { useCallback, useEffect, useRef } from "react"
 import { useFormContext } from "react-hook-form"
 import { useIntl } from "react-intl"
+import { useMediaQuery } from "usehooks-ts"

 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"
@@ -16,6 +17,7 @@ import { getErrorMessage } from "@/components/TempDesignSystem/Form/Input/errors
 import Caption from "@/components/TempDesignSystem/Text/Caption"

 import { RemoveExtraRooms } from "../BookingCode"
+import { isMultiRoomError } from "../utils"

 import styles from "./reward-night.module.css"

@@ -38,7 +40,7 @@ export default function RewardNight() {
      "To book a reward night, make sure you're logged in to your Scandic Friends account.",
  })
  const redemptionErr = errors[REDEMPTION]
-  const isMultiRoomError = redemptionErr?.message?.indexOf("Multi-room") === 0
+  const isDesktop = useMediaQuery("(min-width: 767px)")

  function validateRedemption(value: boolean) {
    // Validate redemption as per the rules defined in the schema
@@ -55,10 +57,10 @@ export default function RewardNight() {
  }

  const resetOnMultiroomError = useCallback(() => {
-    if (isMultiRoomError) {
+    if (isMultiRoomError(redemptionErr?.message) && isDesktop) {
      setValue(REDEMPTION, false, { shouldValidate: true })
    }
-  }, [isMultiRoomError, setValue])
+  }, [redemptionErr?.message, setValue, isDesktop])

  function closeOnBlur(evt: FocusEvent) {
    const target = evt.relatedTarget as HTMLElement
@@ -119,16 +121,26 @@ export default function RewardNight() {
      </Checkbox>
      {redemptionErr && (
        <div className={styles.errorContainer}>
-          <Caption className={styles.error} type="regular" color="blue">
-            <MaterialIcon
-              icon="error"
-              size={24}
-              color="Icon/Feedback/Information"
-              className={styles.errorIcon}
-            />
-            {getErrorMessage(intl, redemptionErr.message)}
-          </Caption>
-          {isMultiRoomError ? <RemoveExtraRooms /> : null}
+          <Typography
+            className={styles.error}
+            variant="Body/Supporting text (caption)/smRegular"
+          >
+            <span>
+              <MaterialIcon
+                icon="error"
+                size={20}
+                color="Icon/Feedback/Error"
+                className={styles.errorIcon}
+                isFilled={!isDesktop}
+              />
+              {getErrorMessage(intl, redemptionErr.message)}
+            </span>
+          </Typography>
+          {isMultiRoomError(redemptionErr.message) ? (
+            <div className={styles.hideOnMobile}>
+              <RemoveExtraRooms fullWidth />
+            </div>
+          ) : null}
        </div>
      )}
    </div>
--- a/apps/scandic-web/components/Forms/BookingWidget/FormContent/RewardNight/reward-night.module.css
+++ b/apps/scandic-web/components/Forms/BookingWidget/FormContent/RewardNight/reward-night.module.css
@@ -1,23 +1,19 @@
 .errorContainer {
-  background: var(--Base-Surface-Primary-light-Normal);
-  border-radius: var(--Spacing-x-one-and-half);
  display: grid;
-  gap: var(--Spacing-x1);
-  padding: var(--Spacing-x2);
-  position: absolute;
-  top: calc(100% + 16px);
-  width: 320px;
+  gap: var(--Space-x2);
+  margin-top: var(--Space-x2);
 }

 .error {
  display: flex;
-  gap: var(--Spacing-x-half);
+  gap: var(--Space-x1);
+  color: var(--UI-Text-Error);
+  white-space: break-spaces;
 }

 .errorIcon {
  min-width: 20px;
 }
-
 .rewardNightLabel {
  align-items: center;
  display: flex;
@@ -28,3 +24,25 @@
  max-width: 560px;
  margin-top: var(--Spacing-x2);
 }
+
+@media screen and (max-width: 767px) {
+  .hideOnMobile {
+    display: none;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .errorContainer {
+    border-radius: var(--Space-x15);
+    padding: var(--Space-x2);
+    background: var(--Base-Surface-Primary-light-Normal);
+    position: absolute;
+    top: calc(100% + 16px);
+    width: 320px;
+    margin-top: 0;
+    box-shadow: var(--popup-box-shadow);
+  }
+  .error {
+    color: var(--Text-Default);
+  }
+}
--- a/apps/scandic-web/components/Forms/BookingWidget/FormContent/index.tsx
+++ b/apps/scandic-web/components/Forms/BookingWidget/FormContent/index.tsx
@@ -7,6 +7,7 @@ import { useIntl } from "react-intl"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"

+import { REDEMPTION } from "@/constants/booking"
 import { hotelreservation } from "@/constants/routes/hotelReservation"
 import { dt } from "@/lib/dt"

@@ -18,6 +19,7 @@ import useLang from "@/hooks/useLang"

 import { RemoveExtraRooms } from "./BookingCode"
 import { Search, SearchSkeleton } from "./Search"
+import { isMultiRoomError } from "./utils"
 import ValidationError from "./ValidationError"
 import Voucher, { VoucherSkeleton } from "./Voucher"

@@ -108,12 +110,11 @@ export default function FormContent({
        <Voucher />
      </div>
      <div className={`${styles.buttonContainer} ${styles.hideOnTablet}`}>
-        {errors.bookingCode?.value?.message?.indexOf("Multi-room") === 0 ? (
-          <RemoveExtraRooms
-            size="medium"
-            fullWidth
-            className={styles.showOnMobile}
-          />
+        {isMultiRoomError(errors.bookingCode?.value?.message) ||
+        isMultiRoomError(errors[REDEMPTION]?.message) ? (
+          <div className={styles.showOnMobile}>
+            <RemoveExtraRooms size="medium" fullWidth />
+          </div>
        ) : null}
        <Button
          className={styles.button}
--- a/apps/scandic-web/components/Forms/BookingWidget/FormContent/utils.ts
+++ b/apps/scandic-web/components/Forms/BookingWidget/FormContent/utils.ts
@@ -0,0 +1,8 @@
+import { bookingWidgetErrors } from "../schema"
+
+export function isMultiRoomError(errorMessage: string | undefined): boolean {
+  return (
+    errorMessage === bookingWidgetErrors.MULTIROOM_BOOKING_CODE_UNAVAILABLE ||
+    errorMessage === bookingWidgetErrors.MULTIROOM_REWARD_NIGHT_UNAVAILABLE
+  )
+}