@incodetech/web 0.0.0-dev-20260317-6ffceac → 0.0.0-dev-20260317-737b25e

package/dist/{addressAutocomplete-3u5x8ZFs.js → addressAutocomplete-DetZGxBZ.js}

@@ -1,11 +1,11 @@
-import { d, y as M, A as H, q as F } from "./vendor-preact-BXf0bkEs.js";
-import { b as K, u as l } from "./button-Ca1tRSTI.js";
+import { d, y as M, A as F, q as K } from "./vendor-preact-BXf0bkEs.js";
+import { b as Q, u as l } from "./button-Ca1tRSTI.js";
 import "./uiConfig-Z6RT23Sl.js";
-import { t as Q } from "./formField-UWsp-7Fj.js";
-import { I as R } from "./inputComposed-BHi-MSpP.js";
+import { t as R } from "./formField-FeX9N4c8.js";
+import { I as q } from "./inputComposed-BHi-MSpP.js";
 import "@incodetech/core";
-import { u as q } from "./useMediaQuery-CiSMgDyi.js";
-function G(c, f) {
+import { u as z } from "./useMediaQuery-CiSMgDyi.js";
+function J(c, f) {
   const [A, h] = d(!1);
   return M(() => {
     const o = c.current;
@@ -16,7 +16,7 @@ function G(c, f) {
     return u.observe(o), () => u.disconnect();
   }, [f, c]), A;
 }
-const J = ({
+const V = ({
   label: c,
   value: f,
   error: A,
@@ -26,9 +26,10 @@ const J = ({
   optional: u,
   onChange: w,
   onSearch: k,
-  onSelect: N
+  onSelect: N,
+  onBlur: D
 }) => {
-  const { t: n } = K(), [x, a] = d(!1), [D, m] = d(!1), [C, S] = d(""), [s, r] = d(-1), v = H(null), p = "ekyc-address-listbox", I = q(), g = n(c), E = u ? `${g} (${n("common.optional")})` : g;
+  const { t: n } = Q(), [x, a] = d(!1), [C, m] = d(!1), [E, S] = d(""), [s, r] = d(-1), v = F(null), p = "ekyc-address-listbox", I = z(), g = n(c), $ = u ? `${g} (${n("common.optional")})` : g;
   M(() => {
     function e(t) {
       v.current && !v.current.contains(t.target) && a(!1);
@@ -37,32 +38,33 @@ const J = ({
   }, []), M(() => {
     r(-1);
   }, [o]);
-  const b = F(
+  const b = K(
     (e) => {
       N(e), a(!1), m(!1), r(-1);
     },
     [N]
-  ), $ = (e) => {
+  ), O = (e) => {
     w(e), e.length >= 3 ? I ? (m(!0), S(e)) : (k(e), a(!0)) : a(!1);
-  }, O = (e) => {
+  }, L = (e) => {
     !x || o.length === 0 || (e.key === "ArrowDown" ? (e.preventDefault(), r((t) => t < o.length - 1 ? t + 1 : 0)) : e.key === "ArrowUp" ? (e.preventDefault(), r((t) => t > 0 ? t - 1 : o.length - 1)) : e.key === "Enter" && s >= 0 ? (e.preventDefault(), b(o[s])) : e.key === "Escape" && (a(!1), r(-1)));
-  }, y = !I && x && o.length > 0, L = y && s >= 0 ? `${p}-option-${s}` : void 0;
+  }, y = !I && x && o.length > 0, H = y && s >= 0 ? `${p}-option-${s}` : void 0;
   return /* @__PURE__ */ l("div", { className: "IncodeAddressAutocomplete", ref: v, children: [
     /* @__PURE__ */ l(
-      R,
+      q,
       {
         id: "ekyc-street",
-        label: E,
+        label: $,
         name: "street",
         value: f,
         readOnly: i,
-        error: Q(n, A, h),
-        onInput: (e) => $(e.target.value),
-        onKeyDown: O,
+        error: R(n, A, h),
+        onInput: (e) => O(e.target.value),
+        onKeyDown: L,
+        onBlur: D,
         role: "combobox",
         "aria-expanded": y,
         "aria-controls": p,
-        "aria-activedescendant": L,
+        "aria-activedescendant": H,
         "aria-autocomplete": "list",
         "data-testid": "ekyc-address-input"
       }
@@ -87,7 +89,7 @@ const J = ({
         ))
       }
     ),
-    I && D && /* @__PURE__ */ l("div", { className: "IncodeAddressAutocompleteModalOverlay", children: /* @__PURE__ */ l("div", { className: "IncodeAddressAutocompleteModal", children: [
+    I && C && /* @__PURE__ */ l("div", { className: "IncodeAddressAutocompleteModalOverlay", children: /* @__PURE__ */ l("div", { className: "IncodeAddressAutocompleteModal", children: [
       /* @__PURE__ */ l("div", { className: "IncodeAddressAutocompleteModalHeader", children: [
         /* @__PURE__ */ l("h3", { children: n("verification.addressSearch") }),
         /* @__PURE__ */ l(
@@ -106,7 +108,7 @@ const J = ({
           {
             className: "IncodeAddressAutocompleteModalInput",
             type: "text",
-            value: C,
+            value: E,
             placeholder: n("verification.addressPlaceholder"),
             onInput: (e) => {
               const t = e.target.value;
@@ -146,6 +148,6 @@ const J = ({
   ] });
 };
 export {
-  J as A,
-  G as u
+  V as A,
+  J as u
 };

package/dist/ekyb/styles.css

@@ -33,6 +33,10 @@
   margin-inline: auto;
 }
 
+.IncodeEkybFooter {
+  margin-top: var(--spacing-24, var(--spacing-24, 24px));
+}
+
 @media (min-width: 768px) {
   .IncodePageContainer.IncodeEkybPage {
     margin-top: var(--spacing-0, var(--spacing-none, 0px));
@@ -55,7 +59,6 @@
   .IncodeEkybPage .IncodeEkybForm {
     min-height: var(--spacing-0, var(--spacing-none, 0px));
     padding-bottom: var(--spacing-8, var(--spacing-8, 8px));
-    flex: 1;
     overflow-y: auto;
   }
 

package/dist/ekybModule-FeVB4y3_.js

@@ -0,0 +1,348 @@
+import { b as v, u as o, I as X, a as J, B as Q } from "./button-Ca1tRSTI.js";
+import { SUPPORTED_COUNTRIES as M, DEV_ONLY_COUNTRIES as Z, computeEkybDisplayErrors as x, createEkybManager as ee } from "@incodetech/core/ekyb";
+import { T as q, y as V, A as P, d as te, q as S, k as oe } from "./vendor-preact-BXf0bkEs.js";
+import "./uiConfig-Z6RT23Sl.js";
+import "@incodetech/core";
+import { u as re, A as se } from "./addressAutocomplete-DetZGxBZ.js";
+import { P as ne } from "./page-BVHG3h0V.js";
+import { t as K, F as ae, V as A } from "./formField-FeX9N4c8.js";
+import { r as ue } from "./incodeModule-aE-LkKwM.js";
+import { D as G } from "./dropdownComposed-B5ZuQS8C.js";
+import { I as _ } from "./inputComposed-BHi-MSpP.js";
+function ce(t) {
+  return [...t.toUpperCase()].map((r) => String.fromCodePoint(127462 + r.charCodeAt(0) - 65)).join("");
+}
+const le = {
+  BR: "Brazil",
+  CM: "Cameroon",
+  CN: "China",
+  FR: "France",
+  DE: "Germany",
+  IL: "Israel",
+  IT: "Italy",
+  KE: "Kenya",
+  MX: "Mexico",
+  NG: "Nigeria",
+  ES: "Spain",
+  GB: "United Kingdom",
+  US: "USA"
+};
+function ie(t) {
+  const r = le[t] ?? t;
+  return { value: t, label: `${ce(t)} ${r}` };
+}
+function me() {
+  if (typeof window > "u") return !1;
+  const { hostname: t } = window.location;
+  return t === "localhost" || t.includes("stage") || t.includes("demo");
+}
+const de = ({
+  value: t,
+  onChange: r
+}) => {
+  const { t: u } = v(), s = q(() => (me() ? [...M, ...Z] : [...M]).map(ie).sort((c, d) => c.label.localeCompare(d.label)), []);
+  return /* @__PURE__ */ o("div", { className: "IncodeEkybCountrySelector", children: /* @__PURE__ */ o(
+    G,
+    {
+      id: "ekyb-country",
+      label: u("ekyb.country"),
+      value: t,
+      options: s,
+      onChange: r,
+      "data-testid": "ekyb-country-selector"
+    }
+  ) });
+}, B = ({
+  field: t,
+  value: r,
+  error: u,
+  errorParams: s,
+  country: i,
+  onChange: c,
+  onBlur: d
+}) => {
+  const { t: b } = v(), l = !t.required, h = b(t.label);
+  if (t.type === "dropdown") {
+    const m = l ? `${h} (${b("common.optional")})` : h, n = t.name === "state" ? b("ekyb.selectState") : void 0;
+    return /* @__PURE__ */ o(
+      G,
+      {
+        id: `ekyb-${t.name}`,
+        label: m,
+        placeholder: n,
+        value: r,
+        options: (t.options ?? []).map((p) => ({
+          ...p,
+          label: b(p.label)
+        })),
+        error: K(b, u, s),
+        searchable: !0,
+        onChange: (p) => c(t.name, p),
+        onBlur: d ? () => d(t.name) : void 0,
+        "data-testid": `ekyb-field-${t.name}`
+      }
+    );
+  }
+  return /* @__PURE__ */ o(
+    ae,
+    {
+      name: t.name,
+      label: t.label,
+      value: r,
+      error: u,
+      errorParams: s,
+      required: t.required,
+      optional: l,
+      onChange: c,
+      onBlur: d
+    }
+  );
+}, be = ({
+  ubos: t,
+  errors: r,
+  errorParams: u,
+  canAddUbo: s,
+  onSetField: i,
+  onBlur: c,
+  onAdd: d,
+  onRemove: b
+}) => {
+  const { t: l } = v(), h = (m) => K(l, r[m], u[m]);
+  return t.length === 0 ? null : /* @__PURE__ */ o("div", { className: "IncodeEkybUbos", children: [
+    t.map((m, n) => {
+      const p = n === 0 ? l("ekyb.uboName") : l("ekyb.uboNameWithNumber", { number: n + 1 }), f = n === 0 ? l("ekyb.uboSurname") : l("ekyb.uboSurnameWithNumber", { number: n + 1 }), N = n === 0;
+      return /* @__PURE__ */ o("div", { className: "IncodeEkybUboEntry", children: [
+        /* @__PURE__ */ o(
+          _,
+          {
+            id: `ubo-${n}-name`,
+            label: p,
+            name: `ubo-${n}-name`,
+            value: m.name,
+            error: h(`ubo-${n}-name`),
+            onInput: (I) => i(n, "name", I.target.value),
+            onBlur: c ? () => c(`ubo-${n}-name`) : void 0,
+            "data-testid": `ekyb-ubo-${n}-name`
+          }
+        ),
+        /* @__PURE__ */ o(
+          _,
+          {
+            id: `ubo-${n}-surname`,
+            label: f,
+            name: `ubo-${n}-surname`,
+            value: m.surname,
+            error: h(`ubo-${n}-surname`),
+            onInput: (I) => i(
+              n,
+              "surname",
+              I.target.value
+            ),
+            onBlur: c ? () => c(`ubo-${n}-surname`) : void 0,
+            "data-testid": `ekyb-ubo-${n}-surname`
+          }
+        ),
+        !N && /* @__PURE__ */ o(
+          "button",
+          {
+            className: "IncodeEkybRemoveUbo",
+            onClick: () => b(n),
+            type: "button",
+            children: l("common.remove")
+          }
+        )
+      ] }, m.id);
+    }),
+    s && /* @__PURE__ */ o(
+      "button",
+      {
+        className: "IncodeEkybAddUbo",
+        onClick: d,
+        type: "button",
+        "data-testid": "ekyb-add-ubo",
+        children: l("ekyb.addAnotherUbo")
+      }
+    )
+  ] });
+}, pe = ({ config: t, onFinish: r }) => {
+  const { t: u } = v(), [s, i] = J(() => ee({ config: t }));
+  return V(() => {
+    (s.status === "finished" || s.status === "closed") && r?.();
+  }, [s.status, r]), s.status === "finished" || s.status === "closed" ? null : s.status === "loading" ? /* @__PURE__ */ o(
+    A,
+    {
+      status: "submitting",
+      submittingTitle: u("common.loading")
+    }
+  ) : s.status === "submitting" ? /* @__PURE__ */ o(A, { status: "submitting" }) : s.status === "success" ? /* @__PURE__ */ o(A, { status: "success" }) : s.status === "error" ? /* @__PURE__ */ o(A, { status: "failure", onRetry: () => i.retry() }) : s.status === "form" ? /* @__PURE__ */ o(he, { state: s, manager: i }) : null;
+}, O = /* @__PURE__ */ new Set([
+  "street",
+  "houseNo",
+  "addressLine2",
+  "city",
+  "state",
+  "postalCode"
+]), ye = ["street", "city", "state", "postalCode", "houseNo"], he = ({ state: t, manager: r }) => {
+  const {
+    country: u,
+    fields: s,
+    values: i,
+    errors: c,
+    isValid: d,
+    ubos: b,
+    canAddUbo: l,
+    addressSuggestions: h,
+    submitAttempted: m
+  } = t, { t: n } = v(), p = P(null), f = P(null), N = P(void 0), I = re(p, s.length), [w, T] = te({}), y = S((e) => {
+    T((a) => a[e] ? a : { ...a, [e]: !0 });
+  }, []), { displayErrors: E, errorParams: F } = q(
+    () => x(
+      c,
+      w,
+      m,
+      u,
+      s
+    ),
+    [c, w, m, u, s]
+  ), $ = S(
+    (e) => y(e),
+    [y]
+  ), U = S(
+    (e, a) => {
+      y(e), r.setField(e, a);
+    },
+    [r, y]
+  ), Y = S(
+    (e, a, k) => {
+      y(`ubo-${e}-${a}`), r.setUboField(e, a, k);
+    },
+    [r, y]
+  ), j = S(
+    (e) => {
+      for (const a of ye) y(a);
+      r.selectAddress(e);
+    },
+    [r, y]
+  ), W = S(
+    (e) => {
+      r.removeUbo(e), T((a) => {
+        const k = {};
+        for (const [C, R] of Object.entries(a)) {
+          const D = C.match(/^ubo-(\d+)-(name|surname)$/);
+          if (!D) {
+            k[C] = R;
+            continue;
+          }
+          const g = Number(D[1]);
+          if (g === e) continue;
+          const H = g > e ? g - 1 : g;
+          k[`ubo-${H}-${D[2]}`] = R;
+        }
+        return k;
+      });
+    },
+    [r]
+  );
+  V(() => {
+    const e = E.postalCode, a = N.current;
+    if (N.current = e, !e || a === e)
+      return;
+    const k = requestAnimationFrame(() => {
+      const C = f.current;
+      if (!C) return;
+      (C.querySelector("#postalCode-error") ?? C).scrollIntoView({
+        behavior: "smooth",
+        block: "nearest"
+      });
+    });
+    return () => cancelAnimationFrame(k);
+  }, [E.postalCode]);
+  const z = s.filter((e) => !O.has(e.name)), L = s.filter((e) => O.has(e.name));
+  return /* @__PURE__ */ o(ne, { className: `IncodeEkybPage${I ? " IncodeEkybPageScrollable" : ""}`, title: n("ekyb.title"), children: [
+    /* @__PURE__ */ o("div", { ref: p, className: "IncodeEkybForm", children: [
+      /* @__PURE__ */ o(
+        de,
+        {
+          value: u,
+          onChange: (e) => r.setCountry(e)
+        }
+      ),
+      z.map((e) => /* @__PURE__ */ o(
+        B,
+        {
+          field: e,
+          value: i[e.name] ?? "",
+          error: E[e.name],
+          errorParams: F[e.name],
+          country: u,
+          onChange: U,
+          onBlur: $
+        },
+        e.name
+      )),
+      /* @__PURE__ */ o(
+        be,
+        {
+          ubos: b,
+          errors: E,
+          errorParams: F,
+          canAddUbo: l,
+          onSetField: Y,
+          onBlur: $,
+          onAdd: () => r.addUbo(),
+          onRemove: W
+        }
+      ),
+      L.length > 0 && /* @__PURE__ */ o(oe, { children: [
+        /* @__PURE__ */ o("h3", { className: "IncodeEkybSectionHeader", children: n("ekyb.addressDetails") }),
+        L.map((e) => e.name === "street" ? /* @__PURE__ */ o(
+          se,
+          {
+            label: e.label,
+            value: i.street ?? "",
+            error: E.street,
+            errorParams: F.street,
+            suggestions: h,
+            optional: !e.required,
+            onChange: (a) => U("street", a),
+            onSearch: (a) => r.searchAddress(a),
+            onSelect: j,
+            onBlur: () => $("street")
+          },
+          e.name
+        ) : /* @__PURE__ */ o(
+          "div",
+          {
+            ref: e.name === "postalCode" ? f : void 0,
+            children: /* @__PURE__ */ o(
+              B,
+              {
+                field: e,
+                value: i[e.name] ?? "",
+                error: E[e.name],
+                errorParams: F[e.name],
+                country: u,
+                onChange: U,
+                onBlur: $
+              }
+            )
+          },
+          e.name
+        ))
+      ] })
+    ] }),
+    /* @__PURE__ */ o("div", { className: "IncodeEkybFooter", children: /* @__PURE__ */ o(
+      Q,
+      {
+        onClick: () => r.submit(),
+        disabled: !d,
+        "data-testid": "ekyb-submit",
+        children: n("ekyb.continue")
+      }
+    ) })
+  ] });
+}, ke = ({ config: t, onFinish: r }) => /* @__PURE__ */ o(X, { children: t ? /* @__PURE__ */ o(pe, { config: t, onFinish: r }) : null });
+ue(ke, "incode-ekyb");
+export {
+  ke as EkybModule
+};

package/dist/ekyc/styles.css

@@ -22,7 +22,7 @@
   display: flex;
 }
 
-.IncodeEkycForm .IncodeInputComposed, .IncodeEkycForm .IncodeDropdownComposed, .IncodeEkycForm .IncodeDateInputComposed, .IncodeEkycForm .IncodeAddressAutocomplete {
+.IncodeEkycForm .IncodeInputComposed, .IncodeEkycForm .IncodeDropdownComposed, .IncodeEkycForm .IncodeDateInputComposed, .IncodeEkycForm .IncodePhoneInputComposed, .IncodeEkycForm .IncodeAddressAutocomplete {
   margin-inline: auto;
 }
 
@@ -30,6 +30,14 @@
   margin-bottom: var(--spacing-0, var(--spacing-none, 0px));
 }
 
+.IncodeEkycFooter {
+  margin-top: var(--spacing-24, var(--spacing-24, 24px));
+  align-items: center;
+  gap: var(--spacing-12, var(--spacing-12, 12px));
+  flex-direction: column;
+  display: flex;
+}
+
 @media (min-width: 768px) {
   .IncodePageContainer.IncodeEkycPage {
     height: 100dvh;
@@ -52,7 +60,6 @@
   .IncodeEkycPage .IncodeEkycForm {
     min-height: var(--spacing-0, var(--spacing-none, 0px));
     padding-bottom: var(--spacing-8, var(--spacing-8, 8px));
-    flex: 1;
     overflow-y: auto;
   }