feat:SW-1422 Updated Tablet mode

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),
+      })}
+    />
+  )
+}

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;
   }
 }

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}
+    </>
+  )
+}