feat: SW-1422 Updated UX for booking code desktop and mobile

components/Forms/BookingWidget/FormContent/BookingCode/index.tsx

@@ -1,10 +1,14 @@
+import { useCallback, useEffect, useRef, useState } from "react"
+import { Dialog, DialogTrigger, Popover } from "react-aria-components"
 import { useFormContext } from "react-hook-form"
 import { useIntl } from "react-intl"
+import { useMediaQuery } from "usehooks-ts"
 
 import { ErrorCircleIcon, InfoCircleIcon } from "@/components/Icons"
 import Modal from "@/components/Modal"
 import Button from "@/components/TempDesignSystem/Button"
 import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
+import Switch from "@/components/TempDesignSystem/Form/Switch"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 
@@ -19,72 +23,228 @@ import type {
 
 export default function BookingCode() {
   const intl = useIntl()
+  const checkIsTablet = useMediaQuery(
+    "(min-width: 768px) and (max-width: 1367px)"
+  )
+  const checkIsDesktop = useMediaQuery("(min-width: 1367px)")
+  const [isTablet, setIsTablet] = useState(false)
+  const [isDesktop, setIsDesktop] = useState(false)
   const {
     setValue,
     formState: { errors },
     getValues,
   } = useFormContext<BookingWidgetSchema>()
-  const codeError = errors["bookingCode"]?.value
 
+  const bookingCode: BookingCodeSchema = getValues("bookingCode")
+  const [isOpen, setIsOpen] = useState(!!bookingCode?.value)
+  const [showRemember, setShowRemember] = useState(false)
+  const [showRememberMobile, setShowRememberMobile] = useState(false)
+  const codeError = errors["bookingCode"]?.value
   const codeVoucher = intl.formatMessage({ id: "Code / Voucher" })
   const addCode = intl.formatMessage({ id: "Add code" })
   const bookingCodeTooltipText = intl.formatMessage({
-    id: "booking.codes.information",
+    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 bookingCode: BookingCodeSchema = getValues("bookingCode")
+  const ref = useRef<HTMLDivElement | null>(null)
 
   function updateBookingCodeFormValue(value: string) {
     setValue("bookingCode.value", value, { shouldValidate: true })
   }
 
-  return (
+  function toggleModal(isOpen: boolean) {
+    if (!isOpen && codeError) {
+      // console.log("Cannot be closed!!")
+      // setValue("bookingCode.flag", false)
+    } else if (!isOpen && !bookingCode?.value) {
+      setValue("bookingCode.flag", false)
+      setIsOpen(isOpen)
+    } else {
+      setIsOpen(isOpen)
+      if (isOpen || bookingCode?.value) {
+        setValue("bookingCode.flag", true)
+      }
+    }
+  }
+  const closeIfOutside = useCallback(
+    (target: HTMLElement) => {
+      if (ref.current && target && !ref.current.contains(target)) {
+        setShowRemember(false)
+      }
+    },
+    [setShowRemember, ref]
+  )
+
+  function showRememberCheck() {
+    setShowRemember(true)
+  }
+
+  useEffect(() => {
+    setIsTablet(checkIsTablet)
+  }, [checkIsTablet])
+
+  useEffect(() => {
+    setIsDesktop(checkIsDesktop)
+  }, [checkIsDesktop])
+
+  const isRememberMobileVisible =
+    !isDesktop && (showRemember || !!bookingCode?.remember)
+  useEffect(() => {
+    setShowRememberMobile(isRememberMobileVisible)
+  }, [isRememberMobileVisible])
+
+  useEffect(() => {
+    function handleClickOutside(evt: Event) {
+      if (showRemember) {
+        const target = evt.target as HTMLElement
+        closeIfOutside(target)
+      }
+    }
+    document.body.addEventListener("click", handleClickOutside)
+    return () => {
+      document.body.removeEventListener("click", handleClickOutside)
+    }
+  }, [closeIfOutside, showRemember])
+
+  return isTablet ? (
     <>
-      <label htmlFor="booking-code">
-        <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}
+      <DialogTrigger isOpen={isOpen} onOpenChange={toggleModal}>
+        <Button type="button" intent="text">
+          <Checkbox name="bookingCode.flag" checked={!!bookingCode?.value}>
+            <Caption color="uiTextMediumContrast" type="bold" asChild>
+              <span>{codeVoucher}</span>
+            </Caption>
+          </Checkbox>
+        </Button>
+        <Popover
+          className="guests_picker_popover"
+          placement="bottom start"
+          offset={36}
+        >
+          <Dialog className={styles.pickerContainerDesktop}>
+            {({ close }) => (
+              <div className={styles.popover}>
+                <Input
+                  type="text"
+                  placeholder={addCode}
+                  name="bookingCode"
+                  id="booking-code"
+                  onChange={(event) =>
+                    updateBookingCodeFormValue(event.target.value)
+                  }
+                  defaultValue={bookingCode?.value}
                 />
-              </Button>
-            }
-            title={codeVoucher}
-          >
-            <Body color="uiTextHighContrast">{bookingCodeTooltipText}</Body>
-          </Modal>
-        </div>
-        <Input
-          type="text"
-          placeholder={addCode}
-          name="bookingCode"
-          id="booking-code"
-          onChange={(event) => updateBookingCodeFormValue(event.target.value)}
-          defaultValue={bookingCode?.value}
-        />
-      </label>
-      {codeError && codeError.message ? (
+                {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>
+              </div>
+            )}
+          </Dialog>
+        </Popover>
+      </DialogTrigger>
+    </>
+  ) : (
+    <div
+      className={styles.container}
+      ref={ref}
+      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>
+      </div>
+      <Input
+        type="text"
+        placeholder={addCode}
+        name="bookingCode"
+        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}>
           <ErrorCircleIcon color="red" className={styles.errorIcon} />
           {intl.formatMessage({ id: codeError.message })}
         </Caption>
       ) : null}
-      {/* ToDo: Update styles once designs are ready */}
-      <div className={styles.bookingCodeRemember}>
-        <Checkbox name="bookingCode.remember">
-          <Caption asChild>
-            <span>{intl.formatMessage({ id: "Remember code" })}</span>
-          </Caption>
-        </Checkbox>
-        <Button size="small" intent="primary" type="button">
-          {intl.formatMessage({ id: "Apply" })}
-        </Button>
-      </div>
-    </>
+      {isDesktop ? (
+        <div
+          className={
+            showRemember
+              ? styles.bookingCodeRememberVisible
+              : 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}
+        </div>
+      ) : null}
+      {!isDesktop ? (
+        <div
+          className={
+            showRememberMobile
+              ? styles.bookingCodeRememberVisible
+              : styles.bookingCodeRemember
+          }
+        >
+          <Switch name="bookingCode.remember" className="mobile-switch">
+            <Caption asChild>
+              <span>{intl.formatMessage({ id: "Remember code" })}</span>
+            </Caption>
+          </Switch>
+        </div>
+      ) : null}
+    </div>
   )
 }