import { jsx as i, jsxs as F } from "react/jsx-runtime";
import { a as G } from "./index.CfQlFjZU.js";
import { c as L } from "./index.CfM2L_w0.js";
import { a as M, g as N, d as D } from "./GridRow._ehOXG8R.js";
import { G as U } from "./GridLayouts.DSIvKCIo.js";
import { P as H } from "./Page.DxkgZw21.js";
import { P as Y } from "./PageHeader.BwFpx_pz.js";
import { B as $ } from "./ButtonGroup.GFy-lPs3.js";
import { M as J, S as R } from "./shared.EdGf6tcG.js";
import g from "react";
import { l as _ } from "./lodash.xuulwbEa.js";
import { P as K } from "./PageSection.DaF45FbK.js";
import { a as X } from "./message.CHKnnsjy.js";
import { a as Z } from "./TextInput.63vMRxAK.js";
import { a as z } from "./ComboInput.C7taEbNO.js";
import { c as k } from "./Dropdown.CMeTYQwB.js";
import "./ProgressActivity.DYLCzf8q.js";
import "./index.B0wX8xO7.js";
import "./formInputIcon.module.CU3tuFAI.js";
import { u as Q } from "./useIsMobile.56gy4Bq-.js";
import "./isEqual.Bk3xqtBB.js";
var ee = (e) => e.type === "checkbox", re = (e) => e instanceof Date, T = (e) => e == null;
const te = (e) => typeof e == "object";
var C = (e) => !T(e) && !Array.isArray(e) && te(e) && !re(e), se = (e) => C(e) && e.target ? ee(e.target) ? e.target.checked : e.target.value : e, ae = (e) => e.substring(0, e.search(/\.\d+(\.|$)/)) || e, ne = (e, s) => e.has(ae(s)), oe = (e) => {
  const s = e.constructor && e.constructor.prototype;
  return C(s) && s.hasOwnProperty("isPrototypeOf");
}, ie = typeof window < "u" && typeof window.HTMLElement < "u" && typeof document < "u";
function x(e) {
  let s;
  const r = Array.isArray(e);
  if (e instanceof Date)
    s = new Date(e);
  else if (e instanceof Set)
    s = new Set(e);
  else if (!(ie && (e instanceof Blob || e instanceof FileList)) && (r || C(e)))
    if (s = r ? [] : {}, !r && !oe(e))
      s = e;
    else
      for (const n in e)
        e.hasOwnProperty(n) && (s[n] = x(e[n]));
  else
    return e;
  return s;
}
var W = (e) => Array.isArray(e) ? e.filter(Boolean) : [], V = (e) => e === void 0, b = (e, s, r) => {
  if (!s || !C(e))
    return r;
  const n = W(s.split(/[,[\].]+?/)).reduce((a, u) => T(a) ? a : a[u], e);
  return V(n) || n === e ? V(e[s]) ? r : e[s] : n;
}, O = (e) => typeof e == "boolean";
const w = {
  BLUR: "blur",
  CHANGE: "change"
}, B = {
  all: "all"
}, le = g.createContext(null), A = () => g.useContext(le);
var ue = (e, s, r, n = !0) => {
  const a = {
    defaultValues: s._defaultValues
  };
  for (const u in e)
    Object.defineProperty(a, u, {
      get: () => {
        const f = u;
        return s._proxyFormState[f] !== B.all && (s._proxyFormState[f] = !n || B.all), r && (r[f] = !0), e[f];
      }
    });
  return a;
}, ce = (e) => C(e) && !Object.keys(e).length, de = (e, s, r, n) => {
  r(e);
  const { name: a, ...u } = e;
  return ce(u) || Object.keys(u).length >= Object.keys(s).length || Object.keys(u).find((f) => s[f] === !0);
}, me = (e) => Array.isArray(e) ? e : [e], j = (e, s, r) => !e || !s || e === s || me(e).some((n) => n && (r ? n === s : n.startsWith(s) || s.startsWith(n)));
function q(e) {
  const s = g.useRef(e);
  s.current = e, g.useEffect(() => {
    const r = !e.disabled && s.current.subject && s.current.subject.subscribe({
      next: s.current.next
    });
    return () => {
      r && r.unsubscribe();
    };
  }, [e.disabled]);
}
function fe(e) {
  const s = A(), { control: r = s.control, disabled: n, name: a, exact: u } = e || {}, [f, l] = g.useState(r._formState), d = g.useRef(!0), p = g.useRef({
    isDirty: !1,
    isLoading: !1,
    dirtyFields: !1,
    touchedFields: !1,
    isValidating: !1,
    isValid: !1,
    errors: !1
  }), c = g.useRef(a);
  return c.current = a, q({
    disabled: n,
    next: (m) => d.current && j(c.current, m.name, u) && de(m, p.current, r._updateFormState) && l({
      ...r._formState,
      ...m
    }),
    subject: r._subjects.state
  }), g.useEffect(() => (d.current = !0, p.current.isValid && r._updateValid(!0), () => {
    d.current = !1;
  }), [r]), ue(f, r, p.current, !1);
}
var pe = (e) => typeof e == "string", ge = (e, s, r, n, a) => pe(e) ? b(r, e, a) : Array.isArray(e) ? e.map((u) => b(r, u)) : r;
function ye(e) {
  const s = A(), { control: r = s.control, name: n, defaultValue: a, disabled: u, exact: f } = e || {}, l = g.useRef(n);
  l.current = n, q({
    disabled: u,
    subject: r._subjects.values,
    next: (c) => {
      j(l.current, c.name, f) && p(x(ge(l.current, r._names, c.values || r._formValues, !1, a)));
    }
  });
  const [d, p] = g.useState(r._getWatch(n, a));
  return g.useEffect(() => r._removeUnmounted()), d;
}
var be = (e) => /^\w*$/.test(e), he = (e) => W(e.replace(/["|']|\]/g, "").split(/\.|\[/));
function I(e, s, r) {
  let n = -1;
  const a = be(s) ? [s] : he(s), u = a.length, f = u - 1;
  for (; ++n < u; ) {
    const l = a[n];
    let d = r;
    if (n !== f) {
      const p = e[l];
      d = C(p) || Array.isArray(p) ? p : isNaN(+a[n + 1]) ? {} : [];
    }
    e[l] = d, e = e[l];
  }
  return e;
}
function ve(e) {
  const s = A(), { name: r, disabled: n, control: a = s.control, shouldUnregister: u } = e, f = ne(a._names.array, r), l = ye({
    control: a,
    name: r,
    defaultValue: b(a._formValues, r, b(a._defaultValues, r, e.defaultValue)),
    exact: !0
  }), d = fe({
    control: a,
    name: r
  }), p = g.useRef(a.register(r, {
    ...e.rules,
    value: l
  }));
  return p.current = a.register(r, e.rules), g.useEffect(() => {
    const c = a._options.shouldUnregister || u, m = (t, o) => {
      const y = b(a._fields, t);
      y && (y._f.mount = o);
    };
    if (m(r, !0), c) {
      const t = x(b(a._options.defaultValues, r));
      I(a._defaultValues, r, t), V(b(a._formValues, r)) && I(a._formValues, r, t);
    }
    return () => {
      (f ? c && !a._state.action : c) ? a.unregister(r) : m(r, !1);
    };
  }, [r, a, f, u]), g.useEffect(() => {
    b(a._fields, r) && a._updateDisabledField({
      disabled: n,
      fields: a._fields,
      name: r,
      value: b(a._fields, r)._f.value
    });
  }, [n, r, a]), {
    field: {
      name: r,
      value: l,
      ...O(n) || O(d.disabled) ? { disabled: d.disabled || n } : {},
      onChange: g.useCallback((c) => p.current.onChange({
        target: {
          value: se(c),
          name: r
        },
        type: w.CHANGE
      }), [r]),
      onBlur: g.useCallback(() => p.current.onBlur({
        target: {
          value: b(a._formValues, r),
          name: r
        },
        type: w.BLUR
      }), [r, a]),
      ref: (c) => {
        const m = b(a._fields, r);
        m && c && (m._f.ref = {
          focus: () => c.focus(),
          select: () => c.select(),
          setCustomValidity: (t) => c.setCustomValidity(t),
          reportValidity: () => c.reportValidity()
        });
      }
    },
    formState: d,
    fieldState: Object.defineProperties({}, {
      invalid: {
        enumerable: !0,
        get: () => !!b(d.errors, r)
      },
      isDirty: {
        enumerable: !0,
        get: () => !!b(d.dirtyFields, r)
      },
      isTouched: {
        enumerable: !0,
        get: () => !!b(d.touchedFields, r)
      },
      error: {
        enumerable: !0,
        get: () => b(d.errors, r)
      }
    })
  };
}
const h = (e) => e.render(ve(e)), S = (e) => _.isString(e[0]) ? e : e[0].value, _e = "creator_registrationForm_7x9By", Ce = "creator_title_DyJOa", Ee = "creator_basicDetails_KTkJm", Fe = "creator_addressDetails_VI5Ym", E = { registrationForm: _e, title: Ce, basicDetails: Ee, addressDetails: Fe }, Pe = (e) => ({ ...e }), Se = ({
  control: e,
  countryCodeOptions: s,
  volumeOptions: r,
  countriesOptions: n,
  emailRegExp: a,
  websiteRegExp: u,
  phoneRegExp: f
}) => {
  const l = (t, o, y) => /* @__PURE__ */ i(
    Z,
    {
      label: t,
      ...o,
      isError: !!y.error?.message,
      helper: y.error?.message
    }
  ), d = (t) => {
    const { number: o, countryCode: y } = t;
    return !y || !o.trim() ? "Enter country code and phone number" : f.test(o) ? !0 : "Enter a valid phone number";
  }, p = (t) => u.test(t.trim()) || "Enter valid website", c = (t) => a.test(t.trim()) || "Enter valid email", m = (t, o) => t.trim() ? !0 : o;
  return /* @__PURE__ */ i(K, { children: /* @__PURE__ */ F("div", { className: E.registrationForm, children: [
    /* @__PURE__ */ i("span", { className: E.title, children: "Business details" }),
    /* @__PURE__ */ i(
      X,
      {
        semantic: J.INFO,
        text: "Make sure to fill your business details, not your personal details."
      }
    ),
    /* @__PURE__ */ F("div", { className: E.basicDetails, children: [
      /* @__PURE__ */ i(
        h,
        {
          control: e,
          name: "businessName",
          rules: {
            required: "Enter business name",
            validate: (t) => m(t, "Enter business name")
          },
          render: ({ field: t, fieldState: o }) => l("Business Name", t, o)
        }
      ),
      /* @__PURE__ */ i(
        h,
        {
          control: e,
          name: "website",
          render: ({ field: t, fieldState: o }) => l("Website", t, o),
          rules: {
            required: "Enter website",
            validate: p
          }
        }
      ),
      /* @__PURE__ */ i(
        h,
        {
          control: e,
          name: "firstName",
          rules: {
            required: "Enter first name",
            validate: (t) => m(t, "Enter first name")
          },
          render: ({ field: t, fieldState: o }) => l("First name", t, o)
        }
      ),
      /* @__PURE__ */ i(
        h,
        {
          control: e,
          name: "lastName",
          rules: {
            required: "Enter last name",
            validate: (t) => m(t, "Enter last name")
          },
          render: ({ field: t, fieldState: o }) => l("Last name", t, o)
        }
      ),
      /* @__PURE__ */ i(
        h,
        {
          control: e,
          name: "email",
          render: ({ field: t, fieldState: o }) => l("Email", t, o),
          rules: {
            required: "Enter email",
            validate: c
          }
        }
      ),
      /* @__PURE__ */ i(
        h,
        {
          control: e,
          name: "phoneNumber",
          rules: {
            validate: d
          },
          render: ({ field: t, fieldState: o }) => /* @__PURE__ */ i(
            z,
            {
              label: "Phone number",
              hasError: !!o.error?.message,
              helper: o.error?.message,
              dropdownProps: {
                placeholder: "Select",
                noLabel: !0,
                noHelper: !0,
                items: s,
                value: t.value && t.value.countryCode,
                removeItemOnReselect: !1,
                onClick: _.noop,
                onChange: _.noop,
                onSelect: (y) => {
                  const P = S(y);
                  t.onChange({
                    ...t.value,
                    countryCode: P
                  });
                }
              },
              textInputProps: {
                value: t.value && t.value.number,
                onChange: (y) => {
                  const { value: P } = y.target;
                  t.onChange({
                    ...t.value,
                    number: P
                  });
                }
              }
            }
          )
        }
      ),
      /* @__PURE__ */ i(
        h,
        {
          control: e,
          name: "expectedMonthlyVolume",
          rules: {
            required: "Select expected monthly volume",
            validate: (t) => m(t, "Select expected monthly volume")
          },
          render: ({ field: t, fieldState: o }) => /* @__PURE__ */ i(
            k,
            {
              label: "Expected monthly volume",
              placeholder: "Select an option",
              items: r,
              helper: o.error?.message,
              value: t.value,
              hasError: !!o.error?.message,
              multiple: !1,
              removeItemOnReselect: !1,
              onClick: _.noop,
              onChange: _.noop,
              onSelect: (y) => {
                t.onChange(S(y));
              }
            }
          )
        }
      )
    ] }),
    /* @__PURE__ */ F("div", { className: E.addressDetails, children: [
      /* @__PURE__ */ i("span", { className: E.title, children: "Address" }),
      /* @__PURE__ */ i(
        h,
        {
          name: "addressLine1",
          control: e,
          rules: {
            required: "Enter address",
            validate: (t) => m(t, "Enter address")
          },
          render: ({ field: t, fieldState: o }) => l("Address line 1", t, o)
        }
      ),
      /* @__PURE__ */ i(
        h,
        {
          name: "addressLine2",
          control: e,
          render: ({ field: t, fieldState: o }) => l(
            "Address line 2 (optional)",
            t,
            o
          )
        }
      ),
      /* @__PURE__ */ i(
        h,
        {
          control: e,
          name: "city",
          rules: {
            required: "Enter city",
            validate: (t) => m(t, "Enter city")
          },
          render: ({ field: t, fieldState: o }) => l("City", t, o)
        }
      ),
      /* @__PURE__ */ i(
        h,
        {
          control: e,
          name: "stateProvince",
          rules: {
            required: "Enter state / province",
            validate: (t) => m(t, "Enter state / province")
          },
          render: ({ field: t, fieldState: o }) => l(
            "State / province",
            t,
            o
          )
        }
      ),
      /* @__PURE__ */ i(
        h,
        {
          control: e,
          name: "zipPostalCode",
          rules: {
            required: "Enter ZIP / Postal code",
            validate: (t) => m(t, "Enter ZIP / Postal code")
          },
          render: ({ field: t, fieldState: o }) => l(
            "ZIP / Postal code",
            t,
            o
          )
        }
      ),
      /* @__PURE__ */ i(
        h,
        {
          control: e,
          name: "country",
          rules: { required: "Select a country" },
          render: ({ field: t, fieldState: o }) => /* @__PURE__ */ i(
            k,
            {
              label: "Country",
              placeholder: "Select a country",
              items: n,
              helper: o.error?.message,
              value: t.value,
              hasError: !!o.error?.message,
              multiple: !1,
              removeItemOnReselect: !1,
              onChange: _.noop,
              onClick: _.noop,
              onSelect: (y) => {
                t.onChange(S(y));
              }
            }
          )
        }
      )
    ] })
  ] }) });
}, Ve = G(
  Se,
  Pe
), xe = "creator_tollFreeWrapper_YmV-i", Ae = "creator_tollFreeGrid_NGKlV", Ne = "creator_gridContainer_ShYCf", De = "creator_pageHeader_MXXxE", Re = "creator_formCol_3xXfG", ke = "creator_form_m5umY", Oe = "creator_title_hUwEJ", we = "creator_basicDetails_92Qot", Be = "creator_addressDetails_lEfHf", Ie = "creator_footerWrapper_CwfUq", Ge = "creator_footerButtons_msory", v = { tollFreeWrapper: xe, tollFreeGrid: Ae, gridContainer: Ne, pageHeader: De, formCol: Re, form: ke, title: Oe, basicDetails: we, addressDetails: Be, footerWrapper: Ie, footerButtons: Ge }, Te = ({
  isSubmitLoading: e = !1,
  ...s
}) => {
  const r = [
    {
      semantic: R.SECONDARY,
      label: "Cancel",
      onClick: s.onCancelClick,
      disabled: e
      //Block cancel button if submission is in progress
    },
    {
      semantic: R.PRIMARY,
      label: "Save",
      onClick: s.handleSubmit(s.onSaveClick),
      loading: e
    }
  ], n = Q() ? "vertical" : "horizontal";
  return {
    ...s,
    footerButtons: r,
    buttonsOrientation: n
  };
}, We = ({
  isPageLoading: e = !1,
  previousPageURL: s,
  countryCodeOptions: r,
  volumeOptions: n,
  control: a,
  countriesOptions: u,
  footerButtons: f,
  buttonsOrientation: l,
  emailRegExp: d,
  websiteRegExp: p,
  phoneRegExp: c,
  handleSubmit: m
}) => /* @__PURE__ */ i(H, { isLoading: e, className: v.tollFreeWrapper, children: /* @__PURE__ */ F("div", { className: v.tollFreeGrid, children: [
  /* @__PURE__ */ F(M, { className: v.gridContainer, children: [
    /* @__PURE__ */ i(N, { children: /* @__PURE__ */ i(D, { className: v.pageHeader, children: /* @__PURE__ */ i(
      Y,
      {
        title: "Register toll-free number",
        previousPageUrl: s
      }
    ) }) }),
    /* @__PURE__ */ i(N, { children: /* @__PURE__ */ i(
      D,
      {
        className: L(v.formCol, U.colCentre),
        children: /* @__PURE__ */ i(
          Ve,
          {
            countryCodeOptions: r,
            volumeOptions: n,
            countriesOptions: u,
            handleSubmit: m,
            control: a,
            emailRegExp: d,
            websiteRegExp: p,
            phoneRegExp: c
          }
        )
      }
    ) })
  ] }),
  /* @__PURE__ */ i("div", { className: v.footerWrapper, children: /* @__PURE__ */ i(
    $,
    {
      className: v.footerButtons,
      buttons: f,
      orientation: l
    }
  ) })
] }) }), ir = G(
  We,
  Te
);
export {
  ir as T,
  We as a,
  Te as u
};
