feat:SW-1422 Updated Tablet mode

2025-02-03 23:34:04 +01:00
parent 63f456da5a
commit 304fc7f1c9
7 changed files with 185 additions and 125 deletions
--- a/components/Forms/BookingWidget/FormContent/BookingCode/TabletCodeInput/index.tsx
+++ b/components/Forms/BookingWidget/FormContent/BookingCode/TabletCodeInput/index.tsx
@@ -0,0 +1,25 @@
+import { useFormContext } from "react-hook-form"
+import { useIntl } from "react-intl"
+
+import Input from "@/components/TempDesignSystem/Form/Input"
+
+import type { BookingWidgetSchema } from "@/types/components/bookingWidget"
+
+export default function TabletCodeInput({
+  updateValue,
+  defaultValue,
+}: {
+  updateValue: (val: string) => void
+  defaultValue?: string
+}) {
+  const intl = useIntl()
+  const { register } = useFormContext<BookingWidgetSchema>()
+  return (
+    <Input
+      label={intl.formatMessage({ id: "Add code" })}
+      {...register("bookingCode.value", {
+        onChange: (e) => updateValue(e.target.value),
+      })}
+    />
+  )
+}
--- a/components/Forms/BookingWidget/FormContent/BookingCode/booking-code.module.css
+++ b/components/Forms/BookingWidget/FormContent/BookingCode/booking-code.module.css
@@ -31,20 +31,46 @@
  width: 100%;
 }

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

+@media screen and (min-width: 768px) {
+  .bookingCodeRememberVisible {
+    align-items: center;
+    background: var(--Base-Surface-Primary-light-Normal);
+    justify-content: space-between;
+    border-radius: var(--Spacing-x-one-and-half);
+  }
+}
+
+@media screen and (min-width: 768px) and (max-width: 1367px) {
+  .container {
+    display: flex;
+    gap: var(--Spacing-x1);
+  }
+  .codePopover {
+    background: var(--Base-Surface-Primary-light-Normal);
+    border-radius: var(--Spacing-x-one-and-half);
+    box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.05);
+    padding: var(--Spacing-x2);
+    width: 320px;
+  }
+  .popover {
+    display: grid;
+    gap: var(--Spacing-x2);
+  }
+  .bookingCodeRememberVisible {
+    position: static;
+  }
+}
+
@media screen and (min-width: 1367px) {
  .bookingCodeRememberVisible {
    padding: var(--Spacing-x2);
-    border-radius: var(--Spacing-x-one-and-half);
    width: 320px;
-    background: white;
    top: calc(100% + 24px);
-    justify-content: space-between;
-    align-items: center;
  }
 }
--- a/components/Forms/BookingWidget/FormContent/BookingCode/index.tsx
+++ b/components/Forms/BookingWidget/FormContent/BookingCode/index.tsx
@@ -13,6 +13,7 @@ import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"

 import Input from "../Input"
+import TabletCodeInput from "./TabletCodeInput"

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

@@ -33,6 +34,7 @@ export default function BookingCode() {
    setValue,
    formState: { errors },
    getValues,
+    register,
  } = useFormContext<BookingWidgetSchema>()

  const bookingCode: BookingCodeSchema = getValues("bookingCode")
@@ -42,9 +44,6 @@ export default function BookingCode() {
  const codeError = errors["bookingCode"]?.value
  const codeVoucher = intl.formatMessage({ id: "Code / Voucher" })
  const addCode = intl.formatMessage({ id: "Add code" })
-  const bookingCodeTooltipText = intl.formatMessage({
-    id: "If you're booking a promotional offer or a Corporate negotiated rate you'll need a special booking code. Don't use any special characters such as (.) (,) (-) (:). If you would like to make a booking with code VOF, please call us +46 8 517 517 20.Save your booking code for the next time you visit the page by ticking the box “Remember”. Don't tick the box if you're using a public computer to avoid unauthorized access to your booking code.",
-  })
  const ref = useRef<HTMLDivElement | null>(null)

  function updateBookingCodeFormValue(value: string) {
@@ -52,13 +51,10 @@ export default function BookingCode() {
  }

  function toggleModal(isOpen: boolean) {
-    if (!isOpen && codeError) {
-      // console.log("Cannot be closed!!")
-      // setValue("bookingCode.flag", false)
-    } else if (!isOpen && !bookingCode?.value) {
+    if (!isOpen && !bookingCode?.value) {
      setValue("bookingCode.flag", false)
      setIsOpen(isOpen)
-    } else {
+    } else if (!codeError || isOpen) {
      setIsOpen(isOpen)
      if (isOpen || bookingCode?.value) {
        setValue("bookingCode.flag", true)
@@ -106,97 +102,70 @@ export default function BookingCode() {
  }, [closeIfOutside, showRemember])

  return isTablet ? (
-    <>
+    <div className={styles.container}>
      <DialogTrigger isOpen={isOpen} onOpenChange={toggleModal}>
        <Button type="button" intent="text">
-          <Checkbox name="bookingCode.flag" checked={!!bookingCode?.value}>
+          <Checkbox
+            checked={!!bookingCode?.value}
+            {...register("bookingCode.flag", {
+              onChange: function (e) {
+                if (bookingCode?.value || isOpen) {
+                  setValue("bookingCode.flag", true)
+                }
+              },
+            })}
+          >
            <Caption color="uiTextMediumContrast" type="bold" asChild>
              <span>{codeVoucher}</span>
            </Caption>
          </Checkbox>
        </Button>
        <Popover
-          className="guests_picker_popover"
+          className={styles.codePopover}
          placement="bottom start"
          offset={36}
        >
-          <Dialog className={styles.pickerContainerDesktop}>
+          <Dialog>
            {({ close }) => (
              <div className={styles.popover}>
-                <Input
-                  type="text"
-                  placeholder={addCode}
-                  name="bookingCode"
-                  id="booking-code"
-                  onChange={(event) =>
-                    updateBookingCodeFormValue(event.target.value)
-                  }
+                <TabletCodeInput
+                  updateValue={updateBookingCodeFormValue}
                  defaultValue={bookingCode?.value}
                />
-                {codeError?.message ? (
-                  <Caption color="red" className={styles.error}>
-                    <ErrorCircleIcon color="red" className={styles.errorIcon} />
-                    {intl.formatMessage({ id: codeError.message })}
-                  </Caption>
-                ) : null}
-                <div className={styles.bookingCode}>
-                  <Checkbox name="bookingCode.remember">
-                    <Caption asChild>
-                      <span>{intl.formatMessage({ id: "Remember code" })}</span>
-                    </Caption>
-                  </Checkbox>
-                  <Button
-                    size="small"
-                    intent="primary"
-                    type="button"
-                    onClick={close}
-                    disabled={codeError ? true : undefined}
-                  >
-                    {intl.formatMessage({ id: "Apply" })}
-                  </Button>
+                <div className={styles.bookingCodeRememberVisible}>
+                  <CodeRemember
+                    bookingCodeValue={bookingCode?.value}
+                    onApplyClick={close}
+                  />
                </div>
              </div>
            )}
          </Dialog>
        </Popover>
      </DialogTrigger>
-    </>
+      <CodeRulesModal />
+    </div>
  ) : (
    <div
      className={styles.container}
      ref={ref}
+      onFocus={showRememberCheck}
      onBlur={(e) => closeIfOutside(e.nativeEvent.relatedTarget as HTMLElement)}
    >
      <div className={styles.bookingCodeLabel}>
        <Caption color="uiTextMediumContrast" type="bold" asChild>
          <span>{codeVoucher}</span>
        </Caption>
-        <Modal
-          trigger={
-            <Button intent="text">
-              <InfoCircleIcon
-                color="uiTextPlaceholder"
-                height={20}
-                width={20}
-              />
-            </Button>
-          }
-          title={codeVoucher}
-        >
-          <Body color="uiTextHighContrast">{bookingCodeTooltipText}</Body>
-        </Modal>
+        <CodeRulesModal />
      </div>
      <Input
-        type="text"
+        className="input"
+        type="search"
        placeholder={addCode}
-        name="bookingCode"
+        name="bookingCode.value"
        id="booking-code"
        onChange={(event) => updateBookingCodeFormValue(event.target.value)}
        defaultValue={bookingCode?.value}
-        onFocus={showRememberCheck}
-        onBlur={(e) =>
-          closeIfOutside(e.nativeEvent.relatedTarget as HTMLElement)
-        }
      />
      {codeError?.message ? (
        <Caption color="red" className={styles.error}>
@@ -212,25 +181,12 @@ export default function BookingCode() {
              : styles.bookingCodeRemember
          }
        >
-          <Checkbox name="bookingCode.remember">
-            <Caption asChild>
-              <span>{intl.formatMessage({ id: "Remember code" })}</span>
-            </Caption>
-          </Checkbox>
-          {bookingCode?.value ? (
-            <Button
-              size="small"
-              className={styles.hideOnMobile}
-              intent="secondary"
-              type="button"
-              onClick={() => setShowRemember(false)}
-            >
-              {intl.formatMessage({ id: "Apply" })}
-            </Button>
-          ) : null}
+          <CodeRemember
+            bookingCodeValue={bookingCode?.value}
+            onApplyClick={() => setShowRemember(false)}
+          />
        </div>
-      ) : null}
-      {!isDesktop ? (
+      ) : (
        <div
          className={
            showRememberMobile
@@ -244,7 +200,58 @@ export default function BookingCode() {
            </Caption>
          </Switch>
        </div>
-      ) : null}
+      )}
    </div>
  )
 }
+
+type CodeRememberProps = {
+  bookingCodeValue: string | undefined
+  onApplyClick: () => void
+}
+
+function CodeRulesModal() {
+  const intl = useIntl()
+  const codeVoucher = intl.formatMessage({ id: "Code / Voucher" })
+  const bookingCodeTooltipText = intl.formatMessage({
+    id: "If you're booking a promotional offer or a Corporate negotiated rate you'll need a special booking code. Don't use any special characters such as (.) (,) (-) (:). If you would like to make a booking with code VOF, please call us +46 8 517 517 20.Save your booking code for the next time you visit the page by ticking the box “Remember”. Don't tick the box if you're using a public computer to avoid unauthorized access to your booking code.",
+  })
+
+  return (
+    <Modal
+      trigger={
+        <Button intent="text">
+          <InfoCircleIcon color="uiTextPlaceholder" height={20} width={20} />
+        </Button>
+      }
+      title={codeVoucher}
+    >
+      <Body color="uiTextHighContrast">{bookingCodeTooltipText}</Body>
+    </Modal>
+  )
+}
+
+function CodeRemember({ bookingCodeValue, onApplyClick }: CodeRememberProps) {
+  const intl = useIntl()
+
+  return (
+    <>
+      <Checkbox name="bookingCode.remember">
+        <Caption asChild>
+          <span>{intl.formatMessage({ id: "Remember code" })}</span>
+        </Caption>
+      </Checkbox>
+      {bookingCodeValue ? (
+        <Button
+          size="small"
+          className={styles.hideOnMobile}
+          intent="secondary"
+          type="button"
+          onClick={onApplyClick}
+        >
+          {intl.formatMessage({ id: "Apply" })}
+        </Button>
+      ) : null}
+    </>
+  )
+}
--- a/components/Forms/BookingWidget/FormContent/Voucher/index.tsx
+++ b/components/Forms/BookingWidget/FormContent/Voucher/index.tsx
@@ -14,7 +14,6 @@ import styles from "./voucher.module.css"
 export default function Voucher() {
  const intl = useIntl()

-  const useVouchers = intl.formatMessage({ id: "Use code/voucher" })
  const bonus = intl.formatMessage({ id: "Use bonus cheque" })
  const reward = intl.formatMessage({ id: "Book reward night" })

@@ -32,14 +31,6 @@ export default function Voucher() {
        <BookingCode />
      </div>
      <div className={styles.options}>
-        <div className={`${styles.option} ${styles.checkboxVoucher}`}>
-          <Checkbox name="useVouchers" registerOptions={{ disabled: true }}>
-            <Caption color="disabled" asChild>
-              <span>{useVouchers}</span>
-            </Caption>
-          </Checkbox>
-          {/* <InfoCircleIcon color="white" className={styles.infoIcon} /> Out of scope for this release */}
-        </div>
        <div className={styles.option}>
          <Tooltip
            heading={disabledBookingOptionsHeader}
@@ -91,17 +82,16 @@ export function VoucherSkeleton() {
      <div className={styles.optionsContainer}>
        <div className={styles.vouchers}>
          <label>
-            <Caption color="disabled" type="bold" asChild>
+            <Caption type="bold" asChild>
              <span>{vouchers}</span>
            </Caption>
-            {/* <InfoCircleIcon color="white" className={styles.infoIcon} /> Out of scope for this release */}
          </label>
          <Input type="text" placeholder={addVouchers} disabled />
        </div>
        <div className={styles.options}>
          <div className={`${styles.option} ${styles.checkboxVoucher}`}>
-            <Checkbox name="useVouchers" registerOptions={{ disabled: true }}>
-              <Caption color="disabled" asChild>
+            <Checkbox name="useVouchers">
+              <Caption asChild>
                <span>{useVouchers}</span>
              </Caption>
            </Checkbox>
--- a/components/Forms/BookingWidget/FormContent/Voucher/voucher.module.css
+++ b/components/Forms/BookingWidget/FormContent/Voucher/voucher.module.css
@@ -28,10 +28,6 @@
  height: 24px;
 }

-.checkboxVoucher {
-  display: none;
-}
-
@media screen and (max-width: 767px) {
  .vouchers {
    margin-bottom: var(--Spacing-x5);
@@ -39,9 +35,6 @@
 }

@media screen and (min-width: 768px) {
-  .vouchers {
-    display: none;
-  }
  .options {
    flex-direction: row;
    gap: var(--Spacing-x4);
@@ -50,8 +43,15 @@
    margin-top: 0;
    gap: var(--Spacing-x-one-and-half);
  }
-  .checkboxVoucher {
-    display: flex;
+  .optionsContainer {
+    display: grid;
+    grid-template-columns: auto auto;
+    column-gap: var(--Spacing-x2);
+  }
+  .vouchers:hover,
+  .vouchers:focus-within,
+  .vouchers:has([data-focused="true"], [data-pressed="true"]) {
+    background-color: var(--Base-Surface-Primary-light-Hover-alt);
  }
 }

@@ -72,15 +72,7 @@
    max-width: 190px;
    gap: var(--Spacing-x-half);
  }
-  .vouchers:hover,
  .option:hover {
    cursor: not-allowed;
  }
-  .optionsContainer {
-    flex-direction: row;
-    align-items: center;
-  }
-  .checkboxVoucher {
-    display: none;
-  }
 }
--- a/components/Forms/BookingWidget/FormContent/formContent.module.css
+++ b/components/Forms/BookingWidget/FormContent/formContent.module.css
@@ -7,8 +7,7 @@
  width: 24px;
  height: 24px;
 }
-.icon,
-.voucherRow {
+.icon {
  display: none;
 }

@@ -17,6 +16,10 @@
  position: relative;
 }

+.showOnTablet {
+  display: none;
+}
+
@media screen and (max-width: 767px) {
  .voucherContainer {
    padding: var(--Spacing-x2) 0 var(--Spacing-x4);
@@ -103,9 +106,13 @@
 }

@media screen and (min-width: 768px) and (max-width: 1366px) {
+  .input {
+    flex-wrap: wrap;
+  }
  .inputContainer {
    padding: var(--Spacing-x2) var(--Spacing-x2) var(--Spacing-x2)
      var(--Layout-Tablet-Margin-Margin-min);
+    flex-basis: 80%;
  }
  .buttonContainer {
    padding-right: var(--Layout-Tablet-Margin-Margin-min);
@@ -128,7 +135,11 @@
    border-bottom: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
    padding: var(--Spacing-x2) var(--Layout-Tablet-Margin-Margin-min);
  }
-  .voucherContainer {
+
+  .showOnTablet {
+    display: flex;
+  }
+  .hideOnTablet {
    display: none;
  }
 }
--- a/components/Forms/BookingWidget/FormContent/index.tsx
+++ b/components/Forms/BookingWidget/FormContent/index.tsx
@@ -61,10 +61,23 @@ export default function FormContent({
            <GuestsRoomsPickerForm />
          </div>
        </div>
-        <div className={styles.voucherContainer}>
+        <div className={`${styles.buttonContainer} ${styles.showOnTablet}`}>
+          <Button
+            className={styles.button}
+            form={formId}
+            intent="primary"
+            theme="base"
+            type="submit"
+          >
+            <span className={styles.icon}>
+              <SearchIcon color="white" width={28} height={28} />
+            </span>
+          </Button>
+        </div>
+        <div className={`${styles.voucherContainer} ${styles.voucherRow}`}>
          <Voucher />
        </div>
-        <div className={styles.buttonContainer}>
+        <div className={`${styles.buttonContainer} ${styles.hideOnTablet}`}>
          <Button
            className={styles.button}
            form={formId}
@@ -86,10 +99,6 @@ export default function FormContent({
          </Button>
        </div>
      </div>
-      {/* ToDo: Remove below additional voucher element which is only used in tablet mode better to have submit button twice instead */}
-      <div className={styles.voucherRow}>
-        <Voucher />
-      </div>
    </>
  )
 }