From 304fc7f1c9d0f5bb173aeccad03fe2af5d5d8d64 Mon Sep 17 00:00:00 2001
From: Hrishikesh Vaipurkar <hrishikesh.vaipurkar@scandichotels.com>
Date: Mon, 3 Feb 2025 23:34:04 +0100
Subject: [PATCH] feat:SW-1422 Updated Tablet mode

---
 .../BookingCode/TabletCodeInput/index.tsx     |  25 +++
 .../BookingCode/booking-code.module.css       |  36 +++-
 .../FormContent/BookingCode/index.tsx         | 169 +++++++++---------
 .../FormContent/Voucher/index.tsx             |  16 +-
 .../FormContent/Voucher/voucher.module.css    |  26 +--
 .../FormContent/formContent.module.css        |  17 +-
 .../Forms/BookingWidget/FormContent/index.tsx |  21 ++-
 7 files changed, 185 insertions(+), 125 deletions(-)
 create mode 100644 components/Forms/BookingWidget/FormContent/BookingCode/TabletCodeInput/index.tsx

diff --git a/components/Forms/BookingWidget/FormContent/BookingCode/TabletCodeInput/index.tsx b/components/Forms/BookingWidget/FormContent/BookingCode/TabletCodeInput/index.tsx
new file mode 100644
index 000000000..25410023c
--- /dev/null
+++ 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),
+      })}
+    />
+  )
+}
diff --git a/components/Forms/BookingWidget/FormContent/BookingCode/booking-code.module.css b/components/Forms/BookingWidget/FormContent/BookingCode/booking-code.module.css
index 169f0b512..212b7ad7a 100644
--- 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;
   }
 }
diff --git a/components/Forms/BookingWidget/FormContent/BookingCode/index.tsx b/components/Forms/BookingWidget/FormContent/BookingCode/index.tsx
index 118e1f9a8..33140f23d 100644
--- 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}
+    </>
+  )
+}
diff --git a/components/Forms/BookingWidget/FormContent/Voucher/index.tsx b/components/Forms/BookingWidget/FormContent/Voucher/index.tsx
index dd934e027..fbbe95833 100644
--- 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>
diff --git a/components/Forms/BookingWidget/FormContent/Voucher/voucher.module.css b/components/Forms/BookingWidget/FormContent/Voucher/voucher.module.css
index bce6ad882..bb8a80ac1 100644
--- 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;
-  }
 }
diff --git a/components/Forms/BookingWidget/FormContent/formContent.module.css b/components/Forms/BookingWidget/FormContent/formContent.module.css
index a63d7304e..e743a80bc 100644
--- 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;
   }
 }
diff --git a/components/Forms/BookingWidget/FormContent/index.tsx b/components/Forms/BookingWidget/FormContent/index.tsx
index 904503ead..6a793a513 100644
--- 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>
     </>
   )
 }