@lmnto/h-mall-shared 1.0.1

package/shared/components/SelectCities.tsx

@@ -0,0 +1,133 @@
+import { Typography } from "@material-tailwind/react";
+import React, { useMemo } from "react";
+import {
+  HTMLInputTypeAttribute,
+  useCallback,
+  useEffect,
+  useState,
+} from "react";
+import { UseFormReturn } from "react-hook-form";
+
+import { countriesStore } from "../stores/countriesStore";
+import { useFormStore } from "../stores/formStore";
+import { renderTitleWithRedAsterisk } from "../utils/app.util";
+import { SelectWithSearch } from "./SelectComponent";
+
+export interface InputFieldProps {
+  title: string;
+  placeholder?: string;
+  type?: HTMLInputTypeAttribute;
+  name?: string;
+  formId: string;
+  forShipping?: boolean;
+  onChange?: (e: React.FormEvent<HTMLInputElement>) => void;
+}
+
+export function SelectCities({
+  className,
+  title,
+  placeholder,
+  name,
+  formId,
+  forShipping = false,
+}) {
+  const { cities, shippingCities } = countriesStore();
+
+  const filteredCities = useMemo(() => {
+    return forShipping ? shippingCities : cities;
+  }, [cities, shippingCities, forShipping]);
+
+  const { reactHookUseForm } = useFormStore();
+  const { register, formState, setValue, watch } =
+    (reactHookUseForm as { [key: string]: UseFormReturn<any> })?.[formId] ?? {};
+  const { errors } = formState ?? {};
+  const [error, setError] = useState<any>(null);
+  const fieldKey = name ?? title?.toLowerCase();
+
+  const watchField = watch?.(`${fieldKey}`);
+
+  const checkError = useCallback(() => {
+    if (errors?.[fieldKey]) {
+      setError(errors[fieldKey]);
+    } else {
+      setError(null);
+    }
+  }, [errors, fieldKey]);
+
+  useEffect(() => {
+    setTimeout(() => {
+      checkError();
+    }, 100);
+  }, [watchField, checkError]);
+
+  const handleOnChange = (value: any) => {
+    setValue(`${fieldKey}`, +value.id, {
+      shouldValidate: true,
+    });
+  };
+
+  if (!reactHookUseForm || !register) return <></>;
+
+  return (
+    <>
+      <Typography
+        variant="lead"
+        className="text-xs font-medium text-black-400 mb-1"
+      >
+        {renderTitleWithRedAsterisk(title)}
+      </Typography>
+
+      <SelectWithSearch
+        maxHeightOpened={235}
+        className={`p-3
+                    w-full min-w-full h-10 text-sm font-normal
+                    bg-white rounded-md	
+                    text-gray-900 
+                    shadow-gray-200/5 
+                    ring-4 ring-transparent 
+                    placeholder:text-gray-300 placeholder:opacity-100 
+                    !border !border-slate-100 !border-t-slate-100  
+                    ${error ? "!border-red-500 !border-t-red-500 ring-red-50 bg-red-100/10" : "!border-t-slate-100"} 
+                    focus:!border-slate-300                  
+                    focus:ring-gray-300/10 
+                    focus:bg-offWhite
+                    shadow-none ${className}
+                    `}
+        items={filteredCities}
+        searchKey="name"
+        placeholder={placeholder}
+        renderOption={(_item, city) => {
+          if (city)
+            return (
+              <div
+                key={city.id}
+                className={
+                  city.id === watchField
+                    ? "flex items-center gap-2 pointer-events-none text-xs font-normal"
+                    : "flex items-center gap-2 text-xs font-normal"
+                }
+              >
+                {city.name}
+              </div>
+            );
+        }}
+        value={
+          filteredCities?.find((item) => item.id === watchField) ||
+          filteredCities?.find((item) => item.name === watchField) ||
+          null
+        }
+        setValue={(value) => {
+          handleOnChange(value);
+        }}
+      />
+      {error && (
+        <Typography
+          variant="lead"
+          className="text-red-500 font-normal text-xs  px-1 block md:absolute -bottom-[1.1rem] left-0"
+        >
+          {error?.message}
+        </Typography>
+      )}
+    </>
+  );
+}

package/shared/components/SelectComponent.tsx

@@ -0,0 +1,334 @@
+import React, {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from "react";
+import { IoIosArrowDown } from "react-icons/io";
+
+import { SelectComponentProps } from "../types/SelectComponent.types";
+
+const generateRandomCharacters = (length: number = 8): string => {
+  let randomCharacters = "";
+  const characters =
+    "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+  const charactersLength = characters.length;
+
+  for (let i = 0; i < length; i += 1) {
+    randomCharacters += characters.charAt(
+      Math.floor(Math.random() * charactersLength),
+    );
+  }
+
+  return randomCharacters;
+};
+
+const SelectComponent = (
+  {
+    id,
+    style,
+    className,
+    classNameLabel = ` text-xs mb-[12px] font-semibold block text-[#1a1f28] text-left`,
+    classNameOpened,
+    classNameOption,
+    classNamePlaceholder,
+    classNameSearchInput,
+    label,
+    placeholder,
+    value,
+    setValue,
+    items,
+    labelKey = "label",
+    searchKey = "name",
+    icon = <IoIosArrowDown size={16} />,
+    iconTransitionSpeed,
+    scrollToTopOnClose = true,
+    maxHeightOpened = 150,
+    disabled = false,
+    styleOpened = {
+      overflow: "auto",
+      position: "absolute",
+      opacity: 1,
+      zIndex: 5,
+      transition: "all 0.3s",
+      visibility: "visible",
+    },
+    styleClosed = {
+      overflow: "hidden",
+      position: "absolute",
+      visibility: "hidden",
+      transition: "all 0.2s",
+      zIndex: 3,
+      opacity: 0,
+    },
+    onSelectOpen = () => {},
+    onSelectClose = () => {},
+    onSelectChange = () => {},
+    renderOption = (item) => item,
+    renderPlaceholder = (item) => item,
+  }: SelectComponentProps,
+  ref: any,
+) => {
+  // States
+  const [open, setOpen] = useState(false);
+  const [position, setPosition] = useState("");
+  const [searchQuery, setSearchQuery] = useState("");
+
+  // Const
+  const computedItems = items || [];
+  const isObject = computedItems.some((el) => typeof el === "object");
+  const transitionMatch = styleClosed?.transition?.match(/(\d+(?:\.\d+)?)s/);
+  const seconds = transitionMatch ? parseFloat(transitionMatch[1]) : 0;
+  const computedId: string = id || generateRandomCharacters();
+
+  // Refs
+  const defaultRef = useRef<HTMLDivElement>(null);
+  const selectRef = ref || defaultRef;
+  const childRef = useRef<HTMLDivElement>(null);
+  const selectOpenedRef = useRef<HTMLDivElement>(null);
+  const searchInputRef = useRef<HTMLInputElement>(null);
+
+  // Functions
+  const checkPosition = (
+    refOpened: React.RefObject<HTMLDivElement>,
+    state: boolean,
+  ) => {
+    const selectOpened = refOpened?.current;
+    if (selectOpened) {
+      const selectTop = selectOpened.getBoundingClientRect().top;
+      const windowHeight = window.innerHeight;
+
+      if (!state) {
+        if (windowHeight - selectTop < maxHeightOpened && childRef?.current) {
+          setPosition("top");
+          selectOpened.style.bottom = `${childRef?.current?.clientHeight}px`;
+          selectOpened.style.top = `auto`;
+        }
+        if (windowHeight - selectTop >= maxHeightOpened && childRef?.current) {
+          setPosition("bottom");
+          selectOpened.style.top = `${childRef?.current.clientHeight}px`;
+          selectOpened.style.bottom = "auto";
+        }
+      }
+    }
+  };
+
+  // Function to filter items based on search query
+  const filterItems = (query: string) => {
+    if (searchKey) {
+      return computedItems.filter((item) =>
+        item[searchKey]?.toLowerCase().includes(query?.toLowerCase()),
+      );
+    } else {
+      return computedItems;
+    }
+  };
+
+  const handleSelectClick = () => {
+    if (!disabled) {
+      selectRef?.current?.toggle();
+    }
+  };
+
+  // Methods
+  useImperativeHandle(selectRef, () => ({
+    open: () => {
+      checkPosition(selectOpenedRef, open);
+      setOpen(true);
+      onSelectOpen();
+    },
+    close: () => {
+      if (selectOpenedRef.current) {
+        position === "top"
+          ? (selectOpenedRef.current.style.bottom = "0")
+          : (selectOpenedRef.current.style.top = "0");
+      }
+      checkPosition(selectOpenedRef, open);
+      setOpen(false);
+      onSelectClose();
+    },
+    toggle: () => {
+      checkPosition(selectOpenedRef, open);
+      setOpen((OldState) => {
+        if (OldState) {
+          onSelectClose();
+        } else {
+          onSelectOpen();
+        }
+        return !OldState;
+      });
+    },
+    getValue: () => value,
+    updateValue: (tempValue: any) => {
+      setValue(tempValue);
+      onSelectChange(tempValue);
+    },
+  }));
+
+  // Theme Classes
+  const computedClassName =
+    className ||
+    `p-4 min-w-[150px] rounded-[9px] text-xs bg-[var(--light)] border border-[rgba(230,230,230,0.93)]`;
+
+  const computedClassNameOpened =
+    classNameOpened ||
+    `bg-white text-xs w-[calc(100%)] top-[-10px] left-[-0.95px] rounded-tl-none rounded-tr-none rounded-[8px] shadow-[0_4px_4px_0px_rgba(0,0,0,0.25)]`;
+
+  const computedClassNameOption = classNameOption || `py-5 px-4`;
+
+  const computedClassNamePlaceholder =
+    classNamePlaceholder || `text-[#5c5c5c] opacity-50 text-s font-normal`;
+
+  const computedClassNameSearchInput =
+    classNameSearchInput || `border-0 outline-none`;
+
+  const filteredItems = filterItems(searchQuery);
+
+  useEffect(() => {
+    if (open && searchInputRef.current) {
+      searchInputRef.current.focus();
+    }
+  }, [open]);
+
+  return (
+    <div>
+      {label && (
+        <label className={classNameLabel} htmlFor={computedId}>
+          {label}
+        </label>
+      )}
+      <div ref={selectRef} style={style} id={computedId}>
+        <div
+          ref={childRef}
+          style={{
+            position: "relative",
+            ...(open
+              ? position === "top"
+                ? {
+                    borderTopLeftRadius: 0,
+                    borderTopRightRadius: 0,
+                  }
+                : {
+                    borderBottomLeftRadius: 0,
+                    borderBottomRightRadius: 0,
+                  }
+              : {}),
+            cursor: disabled ? "not-allowed" : "",
+            backgroundColor: disabled ? "##fafafa" : "",
+          }}
+          className={`${computedClassName} outline-none relative justify-between`}
+          onClick={handleSelectClick}
+          onMouseLeave={() => {
+            selectRef?.current.close();
+
+            if (scrollToTopOnClose) {
+              setTimeout(() => {
+                if (selectOpenedRef?.current) {
+                  selectOpenedRef.current.scrollTop = 0;
+                }
+              }, seconds * 1000);
+            }
+          }}
+        >
+          <div
+            className={`selected w-full text-xs flex justify-between relative z-[4]`}
+          >
+            {/* Add search input */}
+            {open && (
+              <input
+                ref={searchInputRef}
+                type="text"
+                placeholder="Search..."
+                value={searchQuery}
+                onChange={(e) => {
+                  selectRef?.current.open();
+                  setSearchQuery(e.target.value);
+                }}
+                className={computedClassNameSearchInput}
+              />
+            )}
+            {!open && (
+              <span className="flex items-center text-xs">
+                {value ? (
+                  isObject ? (
+                    renderOption(value[labelKey], value)
+                  ) : (
+                    renderOption(value, {})
+                  )
+                ) : (
+                  <span className={computedClassNamePlaceholder}>
+                    {renderPlaceholder(placeholder)}
+                  </span>
+                )}
+              </span>
+            )}
+
+            {!disabled && (
+              <span
+                className={open ? `transform rotate-180 mr-0` : `mr-0`}
+                style={{
+                  transition: `all ${iconTransitionSpeed || seconds}s`,
+                }}
+              >
+                {icon}
+              </span>
+            )}
+          </div>
+
+          <div
+            ref={selectOpenedRef}
+            className={computedClassNameOpened}
+            style={
+              open
+                ? position === "top"
+                  ? {
+                      ...styleOpened,
+                      borderBottomLeftRadius: 0,
+                      borderBottomRightRadius: 0,
+                      maxHeight: maxHeightOpened,
+                    }
+                  : {
+                      ...styleOpened,
+                      borderTopLeftRadius: 0,
+                      borderTopRightRadius: 0,
+                      maxHeight: maxHeightOpened,
+                    }
+                : { ...styleClosed, maxHeight: 0 }
+            }
+          >
+            {isObject
+              ? filteredItems
+                  .filter((item) => item.searchable !== false)
+                  .map((option, i) => {
+                    return (
+                      <div
+                        key={i}
+                        className={computedClassNameOption}
+                        onClick={() => {
+                          selectRef?.current.updateValue(option);
+                        }}
+                      >
+                        {renderOption(option[labelKey], option)}
+                      </div>
+                    );
+                  })
+              : filteredItems.map((option, i) => (
+                  <div
+                    key={i}
+                    className={computedClassNameOption}
+                    onClick={() => {
+                      selectRef?.current.updateValue(option);
+                    }}
+                  >
+                    {renderOption(option, {})}
+                  </div>
+                ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export const SelectWithSearch = forwardRef(SelectComponent);

package/shared/components/SelectCountries.tsx

@@ -0,0 +1,179 @@
+import { Typography } from "@material-tailwind/react";
+import React from "react";
+import { HTMLInputTypeAttribute, useEffect, useState } from "react";
+import { UseFormReturn } from "react-hook-form";
+
+import { countriesStore } from "../stores/countriesStore";
+import { useFormStore } from "../stores/formStore";
+import { renderTitleWithRedAsterisk } from "../utils/app.util";
+import CustomNextImage from "./CustomNextImage";
+import { SelectWithSearch } from "./SelectComponent";
+
+export interface InputFieldProps {
+  title: string;
+  className?: string;
+  placeholder?: string;
+  type?: HTMLInputTypeAttribute;
+  name?: string;
+  formId: string;
+  forShipping?: boolean;
+  forPickUp?: boolean;
+  onCountrySelected?: (value: string | number) => void;
+}
+
+export function SelectCountries({
+  className,
+  title,
+  placeholder,
+  name,
+  formId,
+  forShipping = true,
+  forPickUp = false,
+  onCountrySelected,
+}: InputFieldProps) {
+  const {
+    countries,
+    setStates,
+    setShippingStates,
+    setCities,
+    setShippingCities,
+    setStores,
+    loading,
+  } = countriesStore();
+
+  const { reactHookUseForm } = useFormStore();
+
+  const { register, formState, setValue, watch } =
+    (reactHookUseForm as { [key: string]: UseFormReturn<any> })?.[formId] ?? {};
+
+  const { errors } = formState ?? {};
+  const [error, setError] = useState<any>(null);
+  const [search, setSearch] = useState<string>("");
+
+  const countriesType = countries;
+  const filteredCountries = countriesType?.filter((country) =>
+    country.name.toLowerCase().includes(search.toLowerCase()),
+  );
+
+  // Dynamic key for the field
+  const fieldKey = name ?? title?.toLowerCase();
+
+  // Watch field value
+  const watchField = watch?.(`${fieldKey}`);
+
+  // Error handling
+  useEffect(() => {
+    if (errors?.[fieldKey]) {
+      (async () => await setError(errors[fieldKey]))();
+    } else {
+      (async () => await setError(null))();
+    }
+  }, [watchField, errors, fieldKey]);
+
+  // Handle change logic for country selection
+  const handleOnChange = (value: any) => {
+    const countryId = +value.id; // Ensure it's a number
+    const selectedCountry = countries.find((c) => c.id === countryId);
+
+    if (!selectedCountry) return; // Handle invalid selection safely
+
+    // Update form state with selected country details
+    setValue(`${fieldKey}`, countryId, { shouldValidate: true });
+    if (forPickUp) {
+      setValue("store", "");
+      setStores([]);
+    } else {
+      setValue("city", "");
+      setValue("state", "");
+      setValue("zipCodeRegex", selectedCountry.zipCodeRegex);
+      setValue("zipCodeExample", selectedCountry.zipCodeExample);
+      setValue("postalCode", selectedCountry.zipCodeExists ? "" : "00000");
+      setValue("minPhoneLength", selectedCountry.minPhoneLength);
+      setValue("countryCode", selectedCountry.callingCode);
+
+      // Reset related states and
+      if (forShipping) {
+        setShippingCities([]);
+        setShippingStates([]);
+      } else {
+        setStates([]);
+        setCities([]);
+      }
+    }
+
+    // Notify parent via the callback
+    if (onCountrySelected) {
+      onCountrySelected(countryId);
+    }
+
+    // Clear the search input
+    setSearch("");
+  };
+
+  // Render the component only if form hooks are available
+  if (!reactHookUseForm || !register) return null;
+
+  return (
+    <>
+      <Typography
+        variant="lead"
+        className="text-xs font-medium text-black-400 mb-1"
+      >
+        {renderTitleWithRedAsterisk(title)}
+      </Typography>
+      <SelectWithSearch
+        maxHeightOpened={235}
+        disabled={loading}
+        className={`p-3
+                    w-full min-w-full h-10 text-sm
+                    bg-white rounded-md	
+                    text-gray-900 
+                    shadow-gray-200/5 
+                    ring-4 ring-transparent 
+                    placeholder:text-gray-300 placeholder:opacity-100 
+                    !border !border-slate-100 !border-t-slate-100  
+                    ${error ? "!border-red-500 ring-red-50 bg-red-100/10" : "!border-t-slate-100"} 
+                    focus:!border-slate-300                  
+                    focus:ring-gray-300/10 
+                    focus:bg-offWhite
+                    shadow-none ${className}
+                `}
+        items={filteredCountries}
+        searchKey="name"
+        placeholder={placeholder}
+        renderOption={(_item, country) => {
+          if (country)
+            return (
+              <div
+                key={country.id}
+                className={`flex items-center gap-2 text-xs font-normal ${
+                  country.id === watchField ? "pointer-events-none" : ""
+                }`}
+              >
+                <CustomNextImage
+                  src={country.flag}
+                  alt={country.name}
+                  className="h-4 w-6 rounded-sm object-cover"
+                  height={30}
+                  width={30}
+                />
+                {country.name}
+              </div>
+            );
+        }}
+        value={
+          filteredCountries?.find((item) => item.id === watchField) || null
+        }
+        setValue={(value) => handleOnChange(value)}
+      />
+      {error && (
+        <Typography
+          variant="lead"
+          className="text-red-500 font-normal text-[0.6rem] px-1 block md:absolute -bottom-[1.1rem] left-0"
+        >
+          {error?.message}
+        </Typography>
+      )}
+    </>
+  );
+}