@ozura/elements 1.3.1-next.73 → 1.3.1-next.75

package/dist/react/index.esm.js

@@ -1065,6 +1065,8 @@ class OzVault {
         this.bankTokenizeResolvers = new Map();
         // Track completion state per element for auto-advance (only fire on transition)
         this.completionState = new Map();
+        // Latest per-field state for getFieldStates(), keyed by frameId.
+        this.fieldStates = new Map();
         this.tokenizerFrame = null;
         this.tokenizerWindow = null;
         this.tokenizerReady = false;
@@ -1262,13 +1264,41 @@ class OzVault {
      * });
      */
     get isComplete() {
-        if (this.elements.size === 0)
+        return this.allComplete([...this.elementsByType.values()]);
+    }
+    /**
+     * Like {@link isComplete}, but for bank-account elements created via
+     * {@link createBankElement}. Card and bank fields are tracked separately so a
+     * card-only checkout is never gated on bank fields (and vice versa), matching
+     * the `createToken()` / `createBankToken()` split. A vault with both card and
+     * bank elements exposes each completion state independently.
+     */
+    get isBankComplete() {
+        return this.allComplete([...this.bankElementsByType.values()]);
+    }
+    /** True iff the set is non-empty and every element has reported complete-and-valid. */
+    allComplete(els) {
+        if (els.length === 0)
             return false;
-        for (const frameId of this.elements.keys()) {
-            if (this.completionState.get(frameId) !== true)
-                return false;
+        return els.every(el => this.completionState.get(el.frameId) === true);
+    }
+    /**
+     * Snapshot of every created field's latest state, keyed by element type.
+     * Card and bank fields are combined (their type keys never collide). Useful for
+     * gating UI, rendering per-field errors, or showing the card brand without
+     * wiring an onChange listener per element. Returns shallow copies so callers
+     * cannot mutate the vault's internal state.
+     */
+    getFieldStates() {
+        var _a, _b;
+        const snapshot = {};
+        for (const [type, el] of this.elementsByType) {
+            snapshot[type] = Object.assign({}, ((_a = this.fieldStates.get(el.frameId)) !== null && _a !== void 0 ? _a : { empty: true, complete: false, valid: false }));
         }
-        return true;
+        for (const [type, el] of this.bankElementsByType) {
+            snapshot[type] = Object.assign({}, ((_b = this.fieldStates.get(el.frameId)) !== null && _b !== void 0 ? _b : { empty: true, complete: false, valid: false }));
+        }
+        return snapshot;
     }
     /**
      * `true` while a `createToken()` or `createBankToken()` call is in progress
@@ -1322,6 +1352,7 @@ class OzVault {
         if (existing) {
             this.elements.delete(existing.frameId);
             this.completionState.delete(existing.frameId);
+            this.fieldStates.delete(existing.frameId);
             existing.destroy();
         }
         const el = new OzElement(type, options, this.vaultId, this.frameBaseUrl, this.fonts, this.resolvedAppearance, () => {
@@ -1329,9 +1360,11 @@ class OzVault {
             // don't grow unboundedly in SPA scenarios with repeated mount/unmount cycles.
             this.elements.delete(el.frameId);
             this.completionState.delete(el.frameId);
+            this.fieldStates.delete(el.frameId);
         }, this._debug);
         this.elements.set(el.frameId, el);
         typeMap.set(type, el);
+        this.fieldStates.set(el.frameId, { empty: true, complete: false, valid: false });
         return el;
     }
     /**
@@ -1631,6 +1664,10 @@ class OzVault {
         for (const frameId of this.completionState.keys()) {
             this.completionState.set(frameId, false);
         }
+        // Mirror for field states: every created field returns to its default.
+        for (const frameId of this.fieldStates.keys()) {
+            this.fieldStates.set(frameId, { empty: true, complete: false, valid: false });
+        }
         // NOTE: _tokenizeSuccessCount is intentionally NOT reset.
         // It reflects real server-side wax key budget consumption. Zeroing it
         // would desync the proactive refresh logic from the vault's state and
@@ -1678,6 +1715,7 @@ class OzVault {
         this.elementsByType.clear();
         this.bankElementsByType.clear();
         this.completionState.clear();
+        this.fieldStates.clear();
         this._tokenizeSuccessCount = 0;
         (_a = this.tokenizerFrame) === null || _a === void 0 ? void 0 : _a.remove();
         this.tokenizerFrame = null;
@@ -1882,6 +1920,8 @@ class OzVault {
         const valid = msg.valid;
         const wasComplete = (_a = this.completionState.get(el.frameId)) !== null && _a !== void 0 ? _a : false;
         this.completionState.set(el.frameId, complete && valid);
+        this.fieldStates.set(el.frameId, Object.assign(Object.assign({ empty: msg.empty, complete,
+            valid }, (typeof msg.error === 'string' ? { error: msg.error } : {})), (typeof msg.cardBrand === 'string' ? { cardBrand: msg.cardBrand } : {})));
         // Require valid too — avoids advancing at 13 digits for unknown-brand cards
         // where isComplete() fires before the user has finished typing.
         const justCompleted = complete && valid && !wasComplete;
@@ -2422,7 +2462,7 @@ function OzElements({ sessionUrl, getSessionKey, fetchWaxKey, pubKey, frameBaseU
  * an `<OzElements>` provider tree.
  */
 function useOzElements() {
-    var _a, _b;
+    var _a, _b, _c;
     const { vault, initError, mountedCount, readyCount, notifyTokenize, notifyChange, tokenizeCount } = useContext(OzContext);
     const createToken = useCallback(async (options) => {
         if (!vault) {
@@ -2460,11 +2500,30 @@ function useOzElements() {
     }, [vault, notifyTokenize, notifyChange]);
     const reset = useCallback(() => {
         vault === null || vault === void 0 ? void 0 : vault.reset();
-    }, [vault]);
+        // reset() clears completion state and cancels any in-flight tokenization, so
+        // re-render to refresh the derived isComplete / isTokenizing getters below.
+        notifyChange();
+    }, [vault, notifyChange]);
     const ready = vault !== null && vault.isReady && mountedCount > 0 && readyCount >= mountedCount;
     const isComplete = (_a = vault === null || vault === void 0 ? void 0 : vault.isComplete) !== null && _a !== void 0 ? _a : false;
-    const isTokenizing = (_b = vault === null || vault === void 0 ? void 0 : vault.isTokenizing) !== null && _b !== void 0 ? _b : false;
-    return { createToken, createBankToken, reset, ready, initError, tokenizeCount, isComplete, isTokenizing };
+    const isBankComplete = (_b = vault === null || vault === void 0 ? void 0 : vault.isBankComplete) !== null && _b !== void 0 ? _b : false;
+    const isTokenizing = (_c = vault === null || vault === void 0 ? void 0 : vault.isTokenizing) !== null && _c !== void 0 ? _c : false;
+    return { createToken, createBankToken, reset, ready, initError, tokenizeCount, isComplete, isBankComplete, isTokenizing };
+}
+/**
+ * Reactive snapshot of every created field's state, keyed by element type
+ * (e.g. `cardNumber`, `cvv`, `accountNumber`). Each entry is
+ * `{ empty, complete, valid, error?, cardBrand? }`. Recomputes whenever any
+ * field fires a change event. Must be called inside an `<OzElements>` provider;
+ * returns `{}` otherwise.
+ *
+ * @example
+ * const states = useFieldStates();
+ * if (states.cvv?.error) showCvvError(states.cvv.error);
+ */
+function useFieldStates() {
+    const { vault, changeTick } = useContext(OzContext);
+    return useMemo(() => { var _a; return (_a = vault === null || vault === void 0 ? void 0 : vault.getFieldStates()) !== null && _a !== void 0 ? _a : {}; }, [vault, changeTick]);
 }
 const SKELETON_STYLE = {
     height: 46,
@@ -2763,5 +2822,5 @@ function OzBankCard({ style, styles, classNames, labels, labelStyle, labelClassN
     return (jsxs("div", { className: className, style: { width: '100%', display: 'flex', flexDirection: 'column', gap: gapStr }, children: [jsxs("div", { children: [renderLabel(labels === null || labels === void 0 ? void 0 : labels.accountNumber), jsx(OzBankAccountNumber, { style: mergeStyles(style, styles === null || styles === void 0 ? void 0 : styles.accountNumber), className: classNames === null || classNames === void 0 ? void 0 : classNames.accountNumber, placeholder: (_a = placeholders === null || placeholders === void 0 ? void 0 : placeholders.accountNumber) !== null && _a !== void 0 ? _a : 'Account number', disabled: disabled, onChange: (e) => { fieldState.current.accountNumber = e; emitChange(); }, onFocus: () => { var _a; return (_a = onFocusRef.current) === null || _a === void 0 ? void 0 : _a.call(onFocusRef, 'accountNumber'); }, onBlur: () => { var _a; return (_a = onBlurRef.current) === null || _a === void 0 ? void 0 : _a.call(onBlurRef, 'accountNumber'); }, onReady: readyHandlers['accountNumber'] })] }), jsxs("div", { children: [renderLabel(labels === null || labels === void 0 ? void 0 : labels.routingNumber), jsx(OzBankRoutingNumber, { style: mergeStyles(style, styles === null || styles === void 0 ? void 0 : styles.routingNumber), className: classNames === null || classNames === void 0 ? void 0 : classNames.routingNumber, placeholder: (_b = placeholders === null || placeholders === void 0 ? void 0 : placeholders.routingNumber) !== null && _b !== void 0 ? _b : 'Routing number', disabled: disabled, onChange: (e) => { fieldState.current.routingNumber = e; emitChange(); }, onFocus: () => { var _a; return (_a = onFocusRef.current) === null || _a === void 0 ? void 0 : _a.call(onFocusRef, 'routingNumber'); }, onBlur: () => { var _a; return (_a = onBlurRef.current) === null || _a === void 0 ? void 0 : _a.call(onBlurRef, 'routingNumber'); }, onReady: readyHandlers['routingNumber'] })] }), errorNode] }));
 }
 
-export { OzBankAccountNumber, OzBankCard, OzBankRoutingNumber, OzCard, OzCardNumber, OzCvv, OzElements, OzExpiry, createSessionFetcher as createFetchWaxKey, createSessionFetcher, useOzElements };
+export { OzBankAccountNumber, OzBankCard, OzBankRoutingNumber, OzCard, OzCardNumber, OzCvv, OzElements, OzExpiry, createSessionFetcher as createFetchWaxKey, createSessionFetcher, useFieldStates, useOzElements };
 //# sourceMappingURL=index.esm.js.map