@asteby/storefront-react 0.21.0 → 0.23.0

package/dist/fiscal.js

@@ -1,11 +1,12 @@
-import { validateFiscalValues, regimesFor, usesFor, normalizeTaxId, entryLabel, summarizeExtraction, toInvoiceRequest, maskTaxId } from './chunk-Q7UTJIKY.js';
-export { entryLabel, maskTaxId, normalizeTaxId, personTypeByLength, postalCodeProblem, regimesFor, summarizeExtraction, taxIdProblem, toInvoiceRequest, usesFor, validateFiscalValues } from './chunk-Q7UTJIKY.js';
-import { fiscalMessages, fill } from './chunk-PPQEUTXJ.js';
-export { fiscalMessages } from './chunk-PPQEUTXJ.js';
+import { personTypeResolver, validateFiscalValues, regimesFor, usesFor, normalizeTaxId, entryLabel, suggestInvoiceUse, summarizeExtraction, toInvoiceRequest, maskTaxId } from './chunk-D5L7UZIA.js';
+export { entryLabel, maskTaxId, normalizeTaxId, personTypeByLength, personTypeFromPatterns, personTypeResolver, postalCodeProblem, regimesFor, suggestInvoiceUse, summarizeExtraction, taxIdProblem, toInvoiceRequest, usesFor, validateFiscalValues } from './chunk-D5L7UZIA.js';
+import { useModalDialog } from './chunk-ZBH7JYU4.js';
+import { fiscalMessages, fill } from './chunk-VE7WQPMY.js';
+export { fiscalMessages } from './chunk-VE7WQPMY.js';
 import { CheckoutField, ErrorSummary } from './chunk-DFGLCIEG.js';
 import { useResolvedLocale } from './chunk-T52H5HL3.js';
 import './chunk-DQBL2DFJ.js';
-import { useId, useState, useRef, useEffect, useMemo, useCallback } from 'react';
+import { useId, useState, useMemo, useRef, useEffect, useCallback } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 var FIELDS = ["tax_id", "legal_name", "postal_code", "tax_regime", "use"];
@@ -35,7 +36,8 @@ function FiscalIdentityFields({
   errors = {},
   namePrefix = "invoice",
   idPrefix,
-  personTypeOf,
+  personTypeOf: personTypeOverride,
+  suggestedUse,
   disabled,
   locale: localeProp,
   messages,
@@ -50,6 +52,8 @@ function FiscalIdentityFields({
   const base = idPrefix ?? `sf-fiscal-${reactId.replace(/:/g, "")}`;
   const [v, setV] = useState({ ...EMPTY, ...values });
   const [shown, setShown] = useState(/* @__PURE__ */ new Set());
+  const [autoUse, setAutoUse] = useState(null);
+  const personTypeOf = useMemo(() => personTypeResolver(region.fiscal_id, personTypeOverride), [region.fiscal_id, personTypeOverride]);
   const root = useRef(null);
   const valuesKey = JSON.stringify(values ?? null);
   const first = useRef(true);
@@ -64,10 +68,17 @@ function FiscalIdentityFields({
   const set = (patch) => {
     const next = { ...v, ...patch };
     if (patch.tax_regime !== void 0 && next.use && !usesFor(fid, next.tax_regime).some((u) => u.code === next.use)) next.use = "";
+    if (patch.tax_regime !== void 0 && !next.use) {
+      const suggestion = suggestInvoiceUse(fid, next.tax_regime);
+      if (suggestion) {
+        next.use = suggestion;
+        setAutoUse(suggestion);
+      } else setAutoUse(null);
+    } else if (patch.use !== void 0) setAutoUse(null);
     setV(next);
     onChange?.(next);
   };
-  const person = personTypeOf?.(v.tax_id) ?? null;
+  const person = personTypeOf(v.tax_id);
   const taxIdOk = !validateFiscalValues(region, { tax_id: v.tax_id }, personTypeOf).tax_id;
   const problems = useMemo(() => validateFiscalValues(region, v, personTypeOf), [region, v, personTypeOf]);
   const candidates = regimeCandidates?.length ? regimeCandidates : null;
@@ -235,7 +246,12 @@ function FiscalIdentityFields({
         name: name("use"),
         id: `${base}-use`,
         label: m.use,
-        hint: m.useHint,
+        hint: v.use && (v.use === autoUse || v.use === suggestedUse) ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { className: cx.mark, "data-sf-suggested": true, children: m.suggested }),
+          " ",
+          "\xB7 ",
+          m.useHint
+        ] }) : m.useHint,
         value: v.use,
         onChange: (e) => set({ use: e.target.value }),
         onBlur: () => touch("use"),
@@ -254,10 +270,93 @@ function FiscalIdentityFields({
     )
   ] });
 }
+function cameraSupported() {
+  return typeof navigator !== "undefined" && typeof navigator.mediaDevices?.getUserMedia === "function";
+}
+function useCameraQr({ active, onCode, intervalMs = 250 }) {
+  const videoRef = useRef(null);
+  const [status, setStatus] = useState("idle");
+  const streamRef = useRef(null);
+  const onCodeRef = useRef(onCode);
+  onCodeRef.current = onCode;
+  const stop = useCallback(() => {
+    for (const track of streamRef.current?.getTracks() ?? []) track.stop();
+    streamRef.current = null;
+    const v = videoRef.current;
+    if (v) v.srcObject = null;
+    setStatus((s) => s === "denied" || s === "unsupported" ? s : "idle");
+  }, []);
+  useEffect(() => {
+    if (!active) return;
+    if (!cameraSupported()) {
+      setStatus("unsupported");
+      return;
+    }
+    let cancelled = false;
+    let timer;
+    let busy = false;
+    setStatus("starting");
+    const onHidden = () => {
+      if (document.visibilityState === "hidden") stop();
+    };
+    document.addEventListener("visibilitychange", onHidden);
+    (async () => {
+      let stream;
+      try {
+        stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: { ideal: "environment" } }, audio: false });
+      } catch {
+        if (!cancelled) setStatus("denied");
+        return;
+      }
+      if (cancelled) {
+        for (const t of stream.getTracks()) t.stop();
+        return;
+      }
+      streamRef.current = stream;
+      const video = videoRef.current;
+      if (!video) {
+        for (const t of stream.getTracks()) t.stop();
+        streamRef.current = null;
+        return;
+      }
+      video.srcObject = stream;
+      video.muted = true;
+      void video.play?.().catch(() => void 0);
+      setStatus("scanning");
+      const eng = await import('@asteby/storefront/fiscal-document');
+      timer = setInterval(async () => {
+        if (busy || cancelled || !videoRef.current || videoRef.current.readyState < 2) return;
+        busy = true;
+        try {
+          const text = await eng.decodeImageQr(videoRef.current);
+          if (text && !cancelled) {
+            cancelled = true;
+            clearInterval(timer);
+            stop();
+            onCodeRef.current(text);
+          }
+        } catch {
+        } finally {
+          busy = false;
+        }
+      }, intervalMs);
+    })();
+    return () => {
+      cancelled = true;
+      if (timer) clearInterval(timer);
+      document.removeEventListener("visibilitychange", onHidden);
+      for (const t of streamRef.current?.getTracks() ?? []) t.stop();
+      streamRef.current = null;
+      if (videoRef.current) videoRef.current.srcObject = null;
+    };
+  }, [active, intervalMs, stop]);
+  return { videoRef, status, stop };
+}
 var isPdf = (f, accept) => {
   const okType = f.type ? accept.some((a) => a === f.type) || f.type === "application/pdf" : false;
   return okType || /\.pdf$/i.test(f.name);
 };
+var isImage = (f) => f.type.startsWith("image/") || /\.(jpe?g|png|webp|heic|heif)$/i.test(f.name);
 var mib = (bytes) => `${Math.round(bytes / (1024 * 1024) * 10) / 10} MB`;
 function IdentityDocumentReader(props) {
   const { region, workerSrc, onConfirm, onManual, initialValues, data, canSave, serverUpload, personTypeOf, now, namePrefix = "invoice", messages, classNames: cx = {}, confirmLabel } = props;
@@ -289,14 +388,29 @@ function IdentityDocumentReader(props) {
   useEffect(() => () => abort.current?.abort(), []);
   useEffect(() => {
     if (!fromServer) return;
-    setValues((cur) => ({ ...cur, ...fromServer.values }));
+    setValues((cur) => {
+      const next = { ...cur, ...fromServer.values };
+      const suggestion = next.tax_regime && !next.use ? suggestInvoiceUse(region.fiscal_id, next.tax_regime) : null;
+      if (suggestion) {
+        next.use = suggestion;
+        setSuggestedUse(suggestion);
+      }
+      return next;
+    });
     setPhase({ kind: "review", extraction: fromServer, revision: 1 });
   }, [fromServer]);
   useEffect(() => {
     if (phase.kind === "error") errorRef.current?.focus();
     if (phase.kind === "review" && phase.revision > 0) reviewRef.current?.focus();
   }, [phase]);
-  const accept = useMemo(() => spec?.accept?.length ? spec.accept.join(",") : "application/pdf", [spec]);
+  const accept = useMemo(() => {
+    const files = (spec?.accept ?? []).filter((a) => !a.startsWith("image/"));
+    return files.length ? files.join(",") : "application/pdf";
+  }, [spec]);
+  const imageMode = spec?.image_mode && spec.image_mode !== "none" ? spec.image_mode : null;
+  const photoInput = useRef(null);
+  const [suggestedUse, setSuggestedUse] = useState(null);
+  const cameraActive = phase.kind === "camera";
   const fieldErrors = useMemo(() => {
     const out = {};
     for (const [k, v] of Object.entries(data?.fieldErrors ?? {})) out[k] = all.server.errors[v] ?? v;
@@ -313,9 +427,70 @@ function IdentityDocumentReader(props) {
     setPhase({ kind: "review", extraction: null, revision: 1 });
     setLive("");
   }, [onManual]);
+  const showExtraction = useCallback(
+    (sum) => {
+      const base = { tax_id: "", legal_name: "", postal_code: "", tax_regime: "", use: "", ...sum.values };
+      const suggestion = base.tax_regime ? suggestInvoiceUse(region.fiscal_id, base.tax_regime) : null;
+      if (suggestion && !base.use) base.use = suggestion;
+      setSuggestedUse(suggestion && base.use === suggestion ? suggestion : null);
+      setValues(base);
+      setSummary(null);
+      setPhase({ kind: "review", extraction: sum, revision: 1 });
+      setLive(m.done);
+    },
+    [region.fiscal_id, m.done]
+  );
+  const readQr = useCallback(
+    async (text) => {
+      if (!spec) return;
+      if (!text) return setPhase({ kind: "error", code: "no_qr" });
+      const eng = await import('@asteby/storefront/fiscal-document');
+      const x = eng.extractIdentityDocument("", spec, {
+        catalogs: region.fiscal_id ? eng.catalogsFromRegion(region.fiscal_id) : {},
+        qr: text,
+        ...now ? { now: now() } : {}
+      });
+      if (!x.fields.tax_id) return setPhase({ kind: "error", code: "no_qr" });
+      const evidence = eng.buildDocumentEvidence(x, { sha256: null, source: "qr" });
+      showExtraction(summarizeExtraction(x, evidence, region.fiscal_id?.regimes.map((r) => r.code)));
+    },
+    [spec, region, now, showExtraction]
+  );
+  const readImage = useCallback(
+    async (file) => {
+      if (!spec) return;
+      if (file.size > spec.max_bytes) return setPhase({ kind: "error", code: "too_large", sizeLimit: spec.max_bytes });
+      const ctl = new AbortController();
+      abort.current = ctl;
+      setPhase({ kind: "reading", fileName: file.name });
+      setLive(fill(m.reading, { document: documentName }));
+      try {
+        const eng = await import('@asteby/storefront/fiscal-document');
+        const text = await eng.decodeImageQr(file, { maxBytes: spec.max_bytes, signal: ctl.signal });
+        if (ctl.signal.aborted) return;
+        await readQr(text);
+      } catch (err) {
+        if (ctl.signal.aborted) return;
+        const code = err?.code;
+        setLive("");
+        setPhase({ kind: "error", code: code === "too_large" ? "too_large" : code === "not_image" ? "not_image" : "unreadable", sizeLimit: spec.max_bytes });
+      } finally {
+        if (abort.current === ctl) abort.current = null;
+        if (photoInput.current) photoInput.current.value = "";
+      }
+    },
+    [spec, documentName, m.reading, readQr]
+  );
+  const camera = useCameraQr({
+    active: cameraActive,
+    onCode: (text) => {
+      void readQr(text).then(() => setLive(`${m.scan.cameraRead}. ${m.done}`)).catch(() => setPhase({ kind: "error", code: "unreadable" }));
+    }
+  });
   const read = useCallback(
     async (file) => {
       if (!spec) return;
+      if (imageMode && isImage(file)) return readImage(file);
       if (!isPdf(file, spec.accept ?? [])) return setPhase({ kind: "error", code: "not_pdf" });
       if (file.size > spec.max_bytes) return setPhase({ kind: "error", code: "too_large", sizeLimit: spec.max_bytes });
       const ctl = new AbortController();
@@ -340,10 +515,7 @@ function IdentityDocumentReader(props) {
         });
         const evidence = eng.buildDocumentEvidence(x, { sha256, source: "pdf_client" });
         const sum = summarizeExtraction(x, evidence, region.fiscal_id?.regimes.map((r) => r.code));
-        setValues({ tax_id: "", legal_name: "", postal_code: "", tax_regime: "", use: "", ...sum.values });
-        setSummary(null);
-        setPhase({ kind: "review", extraction: sum, revision: 1 });
-        setLive(m.done);
+        showExtraction(sum);
       } catch (err) {
         if (ctl.signal.aborted) return;
         const code = err?.code;
@@ -358,7 +530,7 @@ function IdentityDocumentReader(props) {
         if (fileInput.current) fileInput.current.value = "";
       }
     },
-    [spec, workerSrc, region, now, documentName, m.reading, m.done]
+    [spec, workerSrc, region, now, documentName, m.reading, imageMode, readImage, showExtraction]
   );
   if (!spec) return null;
   const onDrop = (e) => {
@@ -368,7 +540,7 @@ function IdentityDocumentReader(props) {
     if (f) void read(f);
   };
   const confirm = () => {
-    const problems = validateFiscalValues(region, values, personTypeOf);
+    const problems = validateFiscalValues(region, values, personTypeResolver(region.fiscal_id, personTypeOf));
     const keys = Object.keys(problems);
     if (keys.length) {
       const labels = {
@@ -433,6 +605,27 @@ function IdentityDocumentReader(props) {
         ]
       }
     ),
+    imageMode ? /* @__PURE__ */ jsxs("div", { className: cx.actions, "data-sf-reader-scan": true, children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: photoInput,
+          type: "file",
+          accept: "image/*",
+          capture: "environment",
+          hidden: true,
+          tabIndex: -1,
+          "aria-label": m.scan.photo,
+          "data-sf-reader-photo-input": true,
+          onChange: (e) => {
+            const f = e.target.files?.[0];
+            if (f) void readImage(f);
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx("button", { type: "button", className: cx.secondary, onClick: () => photoInput.current?.click(), "data-sf-reader-photo": true, children: m.scan.photo }),
+      hydrated && cameraSupported() ? /* @__PURE__ */ jsx("button", { type: "button", className: cx.secondary, onClick: () => setPhase({ kind: "camera" }), "data-sf-reader-camera": true, children: m.scan.camera }) : null
+    ] }) : null,
     /* @__PURE__ */ jsx("p", { id: helpId, className: cx.privacy, "data-sf-reader-privacy": true, children: privacy }),
     serverUpload ? /* @__PURE__ */ jsx("noscript", { children: /* @__PURE__ */ jsx("button", { type: "submit", name: "intent", value: "extract-document", formEncType: "multipart/form-data", formMethod: "post", formNoValidate: true, className: cx.secondary, "data-sf-reader-upload": true, children: m.uploadServer }) }) : null,
     /* @__PURE__ */ jsxs("p", { "data-sf-reader-links": true, children: [
@@ -449,6 +642,48 @@ function IdentityDocumentReader(props) {
     ] }),
     /* @__PURE__ */ jsx("button", { type: "button", className: cx.secondary, onClick: cancel, "data-sf-reader-cancel": true, children: m.cancel })
   ] });
+  const cameraView = phase.kind === "camera" && /* @__PURE__ */ jsxs("div", { className: cx.root, "data-sf-reader": true, "data-state": "camera", children: [
+    /* @__PURE__ */ jsx("h3", { "data-sf-reader-title": true, children: m.scan.cameraTitle }),
+    /* @__PURE__ */ jsxs("div", { "data-sf-reader-viewfinder": true, children: [
+      /* @__PURE__ */ jsx("video", { ref: camera.videoRef, playsInline: true, muted: true, "aria-label": m.scan.cameraGuide, "data-sf-reader-video": true }),
+      /* @__PURE__ */ jsx("span", { "aria-hidden": "true", "data-sf-reader-frame": true })
+    ] }),
+    /* @__PURE__ */ jsx("p", { className: cx.status, "data-sf-reader-camera-status": camera.status, children: camera.status === "denied" ? m.scan.cameraDenied : camera.status === "unsupported" ? m.scan.cameraUnavailable : camera.status === "starting" ? m.scan.cameraStarting : m.scan.cameraGuide }),
+    /* @__PURE__ */ jsx("p", { className: cx.privacy, "data-sf-reader-privacy": true, children: privacy }),
+    /* @__PURE__ */ jsxs("div", { className: cx.actions, "data-sf-reader-actions": true, children: [
+      /* @__PURE__ */ jsx("button", { type: "button", className: cx.secondary, onClick: () => photoInput.current?.click(), "data-sf-reader-photo": true, children: m.scan.choosePhoto }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: cx.primary,
+          onClick: () => {
+            camera.stop();
+            setPhase({ kind: "idle" });
+          },
+          "data-sf-reader-camera-close": true,
+          children: m.scan.closeCamera
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: photoInput,
+        type: "file",
+        accept: "image/*",
+        capture: "environment",
+        hidden: true,
+        tabIndex: -1,
+        "aria-label": m.scan.choosePhoto,
+        "data-sf-reader-photo-input": true,
+        onChange: (e) => {
+          const f = e.target.files?.[0];
+          if (f) void readImage(f);
+        }
+      }
+    )
+  ] });
   const errored = phase.kind === "error" && /* @__PURE__ */ jsxs("div", { className: cx.root, "data-sf-reader": true, "data-state": "error", children: [
     /* @__PURE__ */ jsx("div", { ref: errorRef, role: "alert", tabIndex: -1, className: cx.error, "data-sf-reader-error": phase.code, children: fill(m.errors[phase.code], { size: mib(phase.sizeLimit ?? spec.max_bytes) }) }),
     /* @__PURE__ */ jsxs("div", { className: cx.actions, "data-sf-reader-actions": true, children: [
@@ -481,6 +716,7 @@ function IdentityDocumentReader(props) {
         fromDocument: phase.extraction?.from_document ?? [],
         documentName,
         regimeCandidates: phase.extraction && phase.extraction.regime_candidates.length > 1 ? phase.extraction.regime_candidates : void 0,
+        suggestedUse,
         ...personTypeOf ? { personTypeOf } : {},
         locale,
         ...messages ? { messages } : {},
@@ -508,6 +744,7 @@ function IdentityDocumentReader(props) {
     /* @__PURE__ */ jsx("div", { role: "status", "aria-live": "polite", className: cx.status, "data-sf-reader-live": true, style: visuallyHidden, children: live }),
     phase.kind === "idle" ? idle : null,
     reading || null,
+    cameraView || null,
     errored || null,
     review || null
   ] });
@@ -517,7 +754,8 @@ function Warnings({ x, m, cx }) {
   const items = [];
   if (x.qr_match === false) items.push(m.warnings.qrMismatch);
   if (x.stale === true && x.age_days !== null) items.push(fill(m.warnings.stale, { days: x.age_days }));
-  if (x.regime_candidates.length === 0 && !x.values.tax_regime) items.push(m.warnings.regimeMissing);
+  if (x.evidence.source === "qr") items.push(m.warnings.qrPartial);
+  else if (x.regime_candidates.length === 0 && !x.values.tax_regime) items.push(m.warnings.regimeMissing);
   else if (x.missing.some((k) => k !== "tax_regime" && k !== "document_id" && k !== "issued_on")) items.push(m.warnings.fieldsMissing);
   if (!items.length) return null;
   return /* @__PURE__ */ jsx("ul", { className: cx.warning, "data-sf-reader-warnings": true, children: items.map((t) => /* @__PURE__ */ jsxs("li", { "data-sf-reader-warning": true, children: [
@@ -525,6 +763,46 @@ function Warnings({ x, m, cx }) {
     t
   ] }, t)) });
 }
+function ScanTaxDocument(props) {
+  const { onConfirm, onManual, classNames: cx = {}, messages, confirmLabel, ...reader } = props;
+  const locale = useResolvedLocale(props.locale);
+  const m = fiscalMessages(locale, messages).reader;
+  const spec = props.document ?? props.region.fiscal_id?.documents?.[0];
+  const [open, setOpen] = useState(false);
+  const titleId = useId();
+  const { ref, onBackdropClick } = useModalDialog({ open, onClose: () => setOpen(false) });
+  const opener = useRef(null);
+  if (!spec) return null;
+  const name = props.documentName ?? spec.label.toLowerCase();
+  return /* @__PURE__ */ jsxs("div", { className: cx.actions, "data-sf-scan": true, children: [
+    /* @__PURE__ */ jsx("button", { ref: opener, type: "button", className: cx.trigger ?? cx.primary, onClick: () => setOpen(true), "aria-haspopup": "dialog", "data-sf-scan-open": true, children: fill(m.scan.open, { document: spec.label }) }),
+    /* @__PURE__ */ jsx("button", { type: "button", className: cx.manual ?? cx.secondary, onClick: onManual, "data-sf-scan-manual": true, children: m.scan.manual }),
+    open ? /* @__PURE__ */ jsx("dialog", { ref, role: "dialog", "aria-modal": "true", "aria-labelledby": titleId, onClick: onBackdropClick, onClose: () => setOpen(false), className: cx.sheet, "data-sf-scan-sheet": true, children: /* @__PURE__ */ jsxs("div", { className: cx.sheetPanel, "data-sf-scan-panel": true, children: [
+      /* @__PURE__ */ jsxs("div", { className: cx.sheetHeader, "data-sf-scan-header": true, children: [
+        /* @__PURE__ */ jsx("h2", { id: titleId, className: cx.sheetTitle, "data-sf-scan-title": true, children: fill(m.scan.title, { document: name }) }),
+        /* @__PURE__ */ jsx("button", { type: "button", className: cx.sheetClose, onClick: () => setOpen(false), "aria-label": m.scan.close, "data-sf-scan-close": true, "data-sf-autofocus": true, children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u2715" }) })
+      ] }),
+      /* @__PURE__ */ jsx(
+        IdentityDocumentReader,
+        {
+          ...reader,
+          locale,
+          ...messages ? { messages } : {},
+          ...confirmLabel ? { confirmLabel } : {},
+          classNames: cx,
+          onConfirm: (result) => {
+            setOpen(false);
+            onConfirm(result);
+          },
+          onManual: () => {
+            setOpen(false);
+            onManual();
+          }
+        }
+      )
+    ] }) }) : null
+  ] });
+}
 var profileValues = (p) => ({
   tax_id: p.tax_id,
   legal_name: p.legal_name,
@@ -847,6 +1125,6 @@ var ICON = {
   cancelled: "\xD7"
 };
 
-export { FiscalIdentityFields, IdentityDocumentReader, InvoiceStatusCard, InvoiceToggle, invoiceCardState };
+export { FiscalIdentityFields, IdentityDocumentReader, InvoiceStatusCard, InvoiceToggle, ScanTaxDocument, cameraSupported, invoiceCardState, useCameraQr };
 //# sourceMappingURL=fiscal.js.map
 //# sourceMappingURL=fiscal.js.map