@storepecker/storefront-core 1.0.0

package/dist/components/index.cjs

@@ -0,0 +1,576 @@
+'use strict';
+
+var chunkQM73PI5L_cjs = require('../chunk-QM73PI5L.cjs');
+require('../chunk-JHGXIIBZ.cjs');
+require('../chunk-4CVKE6CC.cjs');
+require('../chunk-K5B62JZO.cjs');
+require('../chunk-UXLUE3HW.cjs');
+require('../chunk-GQTO5ZE2.cjs');
+require('../chunk-N3CTXRFT.cjs');
+var react = require('react');
+var clsx = require('clsx');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+
+// src/components/search-dropdown/search-dropdown.module.css
+var search_dropdown_default = {};
+function DownChevron({
+  width = 24,
+  height = 24,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      fill: "currentColor",
+      height,
+      width,
+      xmlns: "http://www.w3.org/2000/svg",
+      xmlnsXlink: "http://www.w3.org/1999/xlink",
+      viewBox: "0 0 407.437 407.437",
+      xmlSpace: "preserve",
+      className,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "polygon",
+        {
+          points: "386.258,91.567 203.718,273.512 21.179,91.567 0,112.815 203.718,315.87 407.437,112.815 ",
+          strokeWidth: "2"
+        }
+      )
+    }
+  );
+}
+function SearchIcon({
+  width = 24,
+  height = 24,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      width,
+      height,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M17.5 17.5L22 22",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M20 11C20 6.02944 15.9706 2 11 2C6.02944 2 2 6.02944 2 11C2 15.9706 6.02944 20 11 20C15.9706 20 20 15.9706 20 11Z",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            strokeLinejoin: "round"
+          }
+        )
+      ]
+    }
+  );
+}
+var SearchDropdown = ({
+  options,
+  value,
+  onChange,
+  placeholder = "Select an option",
+  searchPlaceholder = "Search...",
+  className,
+  disabled = false,
+  error,
+  label,
+  name,
+  renderOption,
+  renderSelected,
+  filterFunction,
+  emptyMessage = "No options found",
+  maxHeight = "300px"
+}) => {
+  const [isOpen, setIsOpen] = react.useState(false);
+  const [searchTerm, setSearchTerm] = react.useState("");
+  const [focusedIndex, setFocusedIndex] = react.useState(-1);
+  const dropdownRef = react.useRef(null);
+  const searchInputRef = react.useRef(null);
+  const optionsListRef = react.useRef(null);
+  const selectedOption = react.useMemo(
+    () => options.find((opt) => opt.value === value) || null,
+    [options, value]
+  );
+  const defaultFilter = react.useCallback(
+    (option, term) => {
+      return option.label.toLowerCase().includes(term.toLowerCase());
+    },
+    []
+  );
+  const filter = filterFunction || defaultFilter;
+  const filteredOptions = react.useMemo(() => {
+    if (!searchTerm.trim()) return options;
+    return options.filter((option) => filter(option, searchTerm));
+  }, [options, searchTerm, filter]);
+  react.useEffect(() => {
+    function handleClickOutside(event) {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setIsOpen(false);
+        setSearchTerm("");
+        setFocusedIndex(-1);
+      }
+    }
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+      setTimeout(() => {
+        searchInputRef.current?.focus();
+      }, 0);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isOpen]);
+  const handleSelect = react.useCallback(
+    (option) => {
+      if (option.disabled) return;
+      onChange?.(option.value, option);
+      setIsOpen(false);
+      setSearchTerm("");
+      setFocusedIndex(-1);
+    },
+    [onChange]
+  );
+  react.useEffect(() => {
+    function handleKeyDown(event) {
+      if (!isOpen) return;
+      switch (event.key) {
+        case "ArrowDown":
+          event.preventDefault();
+          setFocusedIndex(
+            (prev) => prev < filteredOptions.length - 1 ? prev + 1 : prev
+          );
+          break;
+        case "ArrowUp":
+          event.preventDefault();
+          setFocusedIndex((prev) => prev > 0 ? prev - 1 : -1);
+          break;
+        case "Enter":
+          event.preventDefault();
+          if (focusedIndex >= 0 && focusedIndex < filteredOptions.length) {
+            handleSelect(filteredOptions[focusedIndex]);
+          }
+          break;
+        case "Escape":
+          event.preventDefault();
+          setIsOpen(false);
+          setSearchTerm("");
+          setFocusedIndex(-1);
+          break;
+      }
+    }
+    if (isOpen) {
+      document.addEventListener("keydown", handleKeyDown);
+    }
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [isOpen, filteredOptions, focusedIndex, handleSelect]);
+  react.useEffect(() => {
+    if (focusedIndex >= 0 && optionsListRef.current) {
+      const focusedElement = optionsListRef.current.children[focusedIndex];
+      if (focusedElement) {
+        focusedElement.scrollIntoView({
+          behavior: "smooth",
+          block: "nearest"
+        });
+      }
+    }
+  }, [focusedIndex]);
+  const handleToggle = () => {
+    if (disabled) return;
+    setIsOpen((prev) => !prev);
+    if (!isOpen) {
+      setSearchTerm("");
+      setFocusedIndex(-1);
+    }
+  };
+  const handleSearchChange = (e) => {
+    setSearchTerm(e.target.value);
+    setFocusedIndex(-1);
+  };
+  const handleOptionMouseEnter = (index) => {
+    setFocusedIndex(index);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: dropdownRef,
+      className: clsx__default.default(search_dropdown_default.searchDropdown, className, {
+        [search_dropdown_default.disabled]: disabled,
+        [search_dropdown_default.error]: error,
+        [search_dropdown_default.open]: isOpen
+      }),
+      children: [
+        label && /* @__PURE__ */ jsxRuntime.jsx("label", { className: search_dropdown_default.label, htmlFor: name, children: label }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: search_dropdown_default.dropdownContainer, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              className: search_dropdown_default.dropdownButton,
+              onClick: handleToggle,
+              disabled,
+              "aria-expanded": isOpen,
+              "aria-haspopup": "listbox",
+              "aria-label": label || placeholder,
+              id: name,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: search_dropdown_default.selectedValue, children: selectedOption ? renderSelected ? renderSelected(selectedOption) : selectedOption.label : placeholder }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  DownChevron,
+                  {
+                    width: 16,
+                    height: 16,
+                    className: clsx__default.default(search_dropdown_default.chevron, {
+                      [search_dropdown_default.chevronOpen]: isOpen
+                    })
+                  }
+                )
+              ]
+            }
+          ),
+          isOpen && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: search_dropdown_default.dropdownMenu, style: { maxHeight }, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: search_dropdown_default.searchContainer, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                SearchIcon,
+                {
+                  width: 16,
+                  height: 16,
+                  className: search_dropdown_default.searchIcon
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  ref: searchInputRef,
+                  type: "text",
+                  className: search_dropdown_default.searchInput,
+                  placeholder: searchPlaceholder,
+                  value: searchTerm,
+                  onChange: handleSearchChange,
+                  onClick: (e) => e.stopPropagation(),
+                  onKeyDown: (e) => {
+                    if (e.key === "Enter" && filteredOptions.length === 1) {
+                      e.preventDefault();
+                      handleSelect(filteredOptions[0]);
+                    }
+                  },
+                  autoComplete: "off"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "ul",
+              {
+                ref: optionsListRef,
+                className: search_dropdown_default.optionsList,
+                role: "listbox",
+                children: filteredOptions.length > 0 ? filteredOptions.map((option, index) => /* @__PURE__ */ jsxRuntime.jsx(
+                  "li",
+                  {
+                    className: clsx__default.default(search_dropdown_default.option, {
+                      [search_dropdown_default.optionSelected]: option.value === value,
+                      [search_dropdown_default.optionFocused]: index === focusedIndex,
+                      [search_dropdown_default.optionDisabled]: option.disabled
+                    }),
+                    onClick: () => handleSelect(option),
+                    onMouseEnter: () => handleOptionMouseEnter(index),
+                    role: "option",
+                    "aria-selected": option.value === value,
+                    children: renderOption ? renderOption(option) : option.label
+                  },
+                  option.value
+                )) : /* @__PURE__ */ jsxRuntime.jsx("li", { className: search_dropdown_default.emptyMessage, children: emptyMessage })
+              }
+            )
+          ] })
+        ] }),
+        error && /* @__PURE__ */ jsxRuntime.jsx("span", { className: search_dropdown_default.errorMessage, children: error })
+      ]
+    }
+  );
+};
+var search_dropdown_default2 = SearchDropdown;
+
+// src/components/address-form/address-form.module.css
+var address_form_default = {};
+var AddressForm = react.forwardRef(
+  ({
+    address,
+    onSuccess,
+    onError,
+    locationCacheKey,
+    defaultCountryId,
+    renderButton,
+    onFormikReady,
+    onCancel,
+    showCancel = true,
+    showDefaultCheckbox = true,
+    className,
+    submitLabel = "Save"
+  }, ref) => {
+    const {
+      formik,
+      states,
+      supportedCountries,
+      selectedCountry,
+      countryCodeOptions,
+      addressMeta,
+      handlePhoneCountryChange,
+      handleCountryCodeChange,
+      handlePhoneChange,
+      isSubmitting,
+      isEditing
+    } = chunkQM73PI5L_cjs.useAddressForm({
+      address,
+      onSuccess,
+      onError,
+      locationCacheKey,
+      defaultCountryId
+    });
+    react.useImperativeHandle(
+      ref,
+      () => ({
+        formik,
+        resetForm: () => formik.resetForm()
+      }),
+      [formik]
+    );
+    react.useEffect(() => {
+      onFormikReady?.(formik);
+    }, [formik, onFormikReady]);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "form",
+      {
+        name: "address-form",
+        className: `${address_form_default.addressForm} ${className || ""}`,
+        onSubmit: formik.handleSubmit,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: address_form_default.formBody, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: address_form_default.formGroup, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("label", { children: "Name *" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  className: address_form_default.formControl,
+                  type: "text",
+                  placeholder: "Name",
+                  "aria-label": "name",
+                  autoFocus: true,
+                  ...formik.getFieldProps("customer_name")
+                }
+              ),
+              formik.touched.customer_name && formik.errors.customer_name && /* @__PURE__ */ jsxRuntime.jsx("span", { className: address_form_default.error, children: formik.errors.customer_name })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: address_form_default.formGroup, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("label", { children: "Email *" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  className: address_form_default.formControl,
+                  type: "email",
+                  placeholder: "Email",
+                  "aria-label": "email",
+                  ...formik.getFieldProps("customer_email")
+                }
+              ),
+              formik.touched.customer_email && formik.errors.customer_email && /* @__PURE__ */ jsxRuntime.jsx("span", { className: address_form_default.error, children: formik.errors.customer_email })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: address_form_default.formGroup, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("label", { children: "Phone *" }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: address_form_default.phoneRow, children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: address_form_default.phoneCodeCol, children: /* @__PURE__ */ jsxRuntime.jsx(
+                  search_dropdown_default2,
+                  {
+                    options: countryCodeOptions,
+                    value: formik.values.customer_country_code,
+                    onChange: handlePhoneCountryChange,
+                    placeholder: "Country",
+                    searchPlaceholder: "Search country...",
+                    maxHeight: "250px"
+                  }
+                ) }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: address_form_default.phoneInputCol, children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "input",
+                  {
+                    className: address_form_default.formControl,
+                    type: "tel",
+                    placeholder: "Phone",
+                    "aria-label": "phone",
+                    name: "customer_phone",
+                    value: formik.values.customer_phone,
+                    onBlur: formik.handleBlur,
+                    onChange: handlePhoneChange
+                  }
+                ) })
+              ] }),
+              formik.touched.customer_phone && formik.errors.customer_phone && /* @__PURE__ */ jsxRuntime.jsx("span", { className: address_form_default.error, children: formik.errors.customer_phone })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("hr", { className: address_form_default.divider }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: address_form_default.formGroup, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("label", { children: "Address (House No, Building, Street, Area) *" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  className: address_form_default.formControl,
+                  type: "text",
+                  placeholder: "E.g. 1st Cross, 2nd Main, 3rd Stage",
+                  "aria-label": "address",
+                  ...formik.getFieldProps("address")
+                }
+              ),
+              formik.touched.address && formik.errors.address && /* @__PURE__ */ jsxRuntime.jsx("span", { className: address_form_default.error, children: formik.errors.address })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: address_form_default.row, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: address_form_default.col, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: address_form_default.formGroup, children: [
+                /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-capitalize", children: "Country *" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  search_dropdown_default2,
+                  {
+                    options: countryCodeOptions,
+                    value: selectedCountry?.tld_code,
+                    onChange: handleCountryCodeChange,
+                    placeholder: "Select country",
+                    searchPlaceholder: "Search country...",
+                    maxHeight: "250px",
+                    name: "country_obj"
+                  }
+                )
+              ] }) }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: address_form_default.col, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: address_form_default.formGroup, children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("label", { style: { textTransform: "capitalize" }, children: [
+                  addressMeta?.regionLabel || "State",
+                  " *"
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: address_form_default.selectWrapper, children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(
+                    "select",
+                    {
+                      className: address_form_default.formControl,
+                      "aria-label": "state",
+                      "data-select": "",
+                      ...formik.getFieldProps("state_obj"),
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsxs("option", { value: "", children: [
+                          "Select ",
+                          addressMeta?.regionLabel || "State"
+                        ] }),
+                        states.map((state) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: state.id, children: state.name }, state.id))
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: address_form_default.selectArrow, children: /* @__PURE__ */ jsxRuntime.jsx(DownChevron, { width: 12, height: 12 }) })
+                ] }),
+                formik.touched.state_obj && formik.errors.state_obj && /* @__PURE__ */ jsxRuntime.jsx("span", { className: address_form_default.error, children: formik.errors.state_obj })
+              ] }) })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: address_form_default.row, children: [
+              addressMeta?.hasPostal && /* @__PURE__ */ jsxRuntime.jsx("div", { className: address_form_default.col, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: address_form_default.formGroup, children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
+                  addressMeta?.postalLabel || "Postal Code",
+                  " *"
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "input",
+                  {
+                    className: address_form_default.formControl,
+                    type: "tel",
+                    placeholder: addressMeta?.postalLabel || "Postal Code",
+                    "aria-label": "pincode",
+                    ...formik.getFieldProps("pincode")
+                  }
+                ),
+                formik.touched.pincode && formik.errors.pincode && /* @__PURE__ */ jsxRuntime.jsx("span", { className: address_form_default.error, children: formik.errors.pincode })
+              ] }) }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: address_form_default.col, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: address_form_default.formGroup, children: [
+                /* @__PURE__ */ jsxRuntime.jsx("label", { children: "City/District *" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "input",
+                  {
+                    className: address_form_default.formControl,
+                    type: "text",
+                    placeholder: "E.g. Kochi, Bangalore",
+                    "aria-label": "city",
+                    ...formik.getFieldProps("city")
+                  }
+                ),
+                formik.touched.city && formik.errors.city && /* @__PURE__ */ jsxRuntime.jsx("span", { className: address_form_default.error, children: formik.errors.city })
+              ] }) })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("hr", { className: address_form_default.divider }),
+            showDefaultCheckbox && /* @__PURE__ */ jsxRuntime.jsx("div", { className: address_form_default.formGroup, children: /* @__PURE__ */ jsxRuntime.jsxs("label", { className: address_form_default.checkboxLabel, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  type: "checkbox",
+                  className: address_form_default.checkboxInput,
+                  checked: formik.values.is_default || false,
+                  onChange: (e) => {
+                    formik.setFieldValue("is_default", e.target.checked);
+                  }
+                }
+              ),
+              "Make this your default address"
+            ] }) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: address_form_default.formFooter, children: [
+            showCancel && onCancel && /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                className: address_form_default.cancelBtn,
+                onClick: onCancel,
+                children: "Cancel"
+              }
+            ),
+            renderButton ? renderButton({
+              type: "submit",
+              disabled: !formik.isValid || isSubmitting,
+              loading: isSubmitting,
+              children: isEditing ? submitLabel : submitLabel
+            }) : /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "submit",
+                disabled: !formik.isValid || isSubmitting,
+                className: address_form_default.formControl,
+                style: {
+                  width: "auto",
+                  cursor: !formik.isValid || isSubmitting ? "not-allowed" : "pointer",
+                  backgroundColor: "var(--primary, #003d29)",
+                  color: "var(--btn-text, #fff)",
+                  border: "none",
+                  padding: "0.5rem 1.5rem",
+                  opacity: !formik.isValid || isSubmitting ? 0.6 : 1
+                },
+                children: isSubmitting ? "Saving..." : submitLabel
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+AddressForm.displayName = "AddressForm";
+var address_form_default2 = AddressForm;
+
+exports.AddressForm = address_form_default2;
+exports.SearchDropdown = search_dropdown_default2;