@evervault/react-native 2.5.1 → 2.6.1

package/README.md

@@ -8,8 +8,6 @@ The [Evervault](https://evervault.com/) React Native SDK is a toolkit for encryp
 
 Before starting with the Evervault React Native SDK, you will need to [create an account](https://app.evervault.com/register) and a team.
 
-For full installation support, [book time here](https://calendly.com/evervault/support).
-
 ## Documentation
 
 See the Evervault [React Native SDK documentation](https://docs.evervault.com/sdks/react-native).

package/build/cjs/Card/Cvc.js

@@ -0,0 +1,29 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var Input = require('../Input.js');
+var evervaultCardValidator_main = require('../packages/card-validator/dist/evervault-card-validator.main.js');
+var index_esm = require('../node_modules/react-hook-form/dist/index.esm.js');
+
+const DEFAULT_CARD_CVC_MASK = Input.mask("[999]");
+const CARD_CVC_MASKS = {
+    "american-express": Input.mask("[9999]"),
+};
+const CardCvc = React.forwardRef(function CardCvc(props, ref) {
+    const methods = index_esm.useFormContext();
+    const number = methods.watch("number");
+    const mask = React.useMemo(() => {
+        if (!number) {
+            return DEFAULT_CARD_CVC_MASK;
+        }
+        const brand = evervaultCardValidator_main.validateNumber(number).brand;
+        if (brand && CARD_CVC_MASKS[brand]) {
+            return CARD_CVC_MASKS[brand];
+        }
+        return DEFAULT_CARD_CVC_MASK;
+    }, [number]);
+    return (jsxRuntime.jsx(Input.EvervaultInput, { placeholder: "CVC", ...props, ref: ref, name: "cvc", mask: mask, inputMode: "numeric", autoComplete: "cc-csc", keyboardType: "number-pad" }));
+});
+
+exports.CardCvc = CardCvc;

package/build/cjs/Card/Expiry.js

@@ -0,0 +1,12 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var Input = require('../Input.js');
+
+const CARD_EXPIRY_MASK = Input.mask("99 / 99");
+const CardExpiry = React.forwardRef(function CardExpiry(props, ref) {
+    return (jsxRuntime.jsx(Input.EvervaultInput, { placeholder: "MM / YY", ...props, ref: ref, name: "expiry", mask: CARD_EXPIRY_MASK, inputMode: "numeric", autoComplete: "cc-exp", keyboardType: "number-pad" }));
+});
+
+exports.CardExpiry = CardExpiry;

package/build/cjs/Card/Holder.js

@@ -0,0 +1,15 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactNative = require('react-native');
+var React = require('react');
+var Input = require('../Input.js');
+
+const CardHolder = React.forwardRef(function CardHolder(props, ref) {
+    return (jsxRuntime.jsx(Input.EvervaultInput, { placeholder: "Johnny Appleseed", ...props, ref: ref, name: "name", inputMode: "text", autoComplete: reactNative.Platform.select({
+            ios: "cc-name",
+            default: "name",
+        }), keyboardType: "default" }));
+});
+
+exports.CardHolder = CardHolder;

package/build/cjs/Card/Number.js

@@ -0,0 +1,27 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var Input = require('../Input.js');
+var evervaultCardValidator_main = require('../packages/card-validator/dist/evervault-card-validator.main.js');
+
+const DEFAULT_CARD_NUMBER_MASK = Input.mask("9999 99[99 9999 9999]");
+const CARD_NUMBER_MASKS = {
+    unionpay: Input.mask("9999 99[99 9999 9999 999]"),
+    "american-express": Input.mask("9999 99[9999 99999]"),
+};
+const CardNumber = React.forwardRef(function CardNumber(props, ref) {
+    const mask = React.useCallback((text) => {
+        if (!text) {
+            return DEFAULT_CARD_NUMBER_MASK;
+        }
+        const brand = evervaultCardValidator_main.validateNumber(text).brand;
+        if (brand && CARD_NUMBER_MASKS[brand]) {
+            return CARD_NUMBER_MASKS[brand];
+        }
+        return DEFAULT_CARD_NUMBER_MASK;
+    }, []);
+    return (jsxRuntime.jsx(Input.EvervaultInput, { placeholder: "1234 1234 1234 1234", ...props, ref: ref, name: "number", mask: mask, inputMode: "numeric", autoComplete: "cc-number", keyboardType: "number-pad" }));
+});
+
+exports.CardNumber = CardNumber;

package/build/cjs/Card/Root.js

@@ -0,0 +1,70 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var index_esm = require('../node_modules/react-hook-form/dist/index.esm.js');
+var schema = require('./schema.js');
+var zod = require('../node_modules/@hookform/resolvers/zod/dist/zod.js');
+var useEvervault = require('../useEvervault.js');
+var utils = require('./utils.js');
+var Input = require('../Input.js');
+
+const DEFAULT_ACCEPTED_BRANDS = [];
+const Card = React.forwardRef(function Card({ children, defaultValues, onChange, onError, acceptedBrands = DEFAULT_ACCEPTED_BRANDS, validationMode = "all", }, ref) {
+    const evervault = useEvervault.useEvervault();
+    const resolver = React.useMemo(() => {
+        const schema$1 = schema.getCardFormSchema(acceptedBrands);
+        return zod.zodResolver(schema$1);
+    }, [acceptedBrands]);
+    const methods = index_esm.useForm({
+        defaultValues,
+        resolver,
+        mode: validationMode,
+        shouldUseNativeValidation: false,
+    });
+    const inputContext = React.useMemo(() => ({
+        validationMode,
+    }), [validationMode]);
+    // Use refs to prevent closures from being captured
+    const onChangeRef = React.useRef(onChange);
+    onChangeRef.current = onChange;
+    const onErrorRef = React.useRef(onError);
+    onErrorRef.current = onError;
+    React.useEffect(() => {
+        if (!onChange)
+            return;
+        let abortController;
+        function handleChange(values) {
+            if (abortController) {
+                abortController.abort();
+            }
+            abortController = new AbortController();
+            const signal = abortController.signal;
+            requestAnimationFrame(async () => {
+                try {
+                    const payload = await utils.formatPayload(values, {
+                        encrypt: evervault.encrypt,
+                        form: methods,
+                    });
+                    if (signal.aborted)
+                        return;
+                    onChangeRef.current?.(payload);
+                }
+                catch (error) {
+                    onErrorRef.current?.(error);
+                }
+            });
+        }
+        handleChange(methods.getValues());
+        const subscription = methods.watch(handleChange);
+        return () => subscription.unsubscribe();
+    }, [evervault.encrypt]);
+    React.useImperativeHandle(ref, React.useCallback(() => ({
+        reset() {
+            methods.reset();
+        },
+    }), []));
+    return (jsxRuntime.jsx(index_esm.FormProvider, { ...methods, children: jsxRuntime.jsx(Input.EvervaultInputContext.Provider, { value: inputContext, children: children }) }));
+});
+
+exports.Card = Card;

package/build/cjs/Card/index.js

@@ -0,0 +1,20 @@
+'use strict';
+
+var Root = require('./Root.js');
+var Holder = require('./Holder.js');
+var Expiry = require('./Expiry.js');
+var Cvc = require('./Cvc.js');
+var Number = require('./Number.js');
+
+const Card = Object.assign(Root.Card, {
+    Holder: Holder.CardHolder,
+    Expiry: Expiry.CardExpiry,
+    Cvc: Cvc.CardCvc,
+    Number: Number.CardNumber,
+});
+
+exports.CardHolder = Holder.CardHolder;
+exports.CardExpiry = Expiry.CardExpiry;
+exports.CardCvc = Cvc.CardCvc;
+exports.CardNumber = Number.CardNumber;
+exports.Card = Card;

package/build/cjs/Card/schema.js

@@ -0,0 +1,32 @@
+'use strict';
+
+var index = require('../node_modules/zod/lib');
+var evervaultCardValidator_main = require('../packages/card-validator/dist/evervault-card-validator.main.js');
+var utils = require('./utils.js');
+
+function getCardFormSchema(acceptedBrands) {
+    return index.default.object({
+        name: index.default.string().min(1, "Missing name"),
+        number: index.default
+            .string()
+            .min(1, "Required")
+            .refine((value) => evervaultCardValidator_main.validateNumber(value).isValid, {
+            message: "Invalid card number",
+        })
+            .refine((value) => utils.isAcceptedBrand(acceptedBrands, evervaultCardValidator_main.validateNumber(value)), { message: "Brand not accepted" }),
+        expiry: index.default
+            .string()
+            .min(1, "Required")
+            .refine((value) => evervaultCardValidator_main.validateExpiry(value).isValid, {
+            message: "Invalid expiry",
+        }),
+        cvc: index.default
+            .string()
+            .min(1, "Required")
+            .refine((value) => evervaultCardValidator_main.validateCVC(value).isValid, {
+            message: "Invalid CVC",
+        }),
+    });
+}
+
+exports.getCardFormSchema = getCardFormSchema;

package/build/cjs/Card/types.js

@@ -0,0 +1,21 @@
+'use strict';
+
+const CARD_BRAND_NAMES = [
+    "american-express",
+    "visa",
+    "mastercard",
+    "discover",
+    "jcb",
+    "diners-club",
+    "unionpay",
+    "maestro",
+    "mir",
+    "elo",
+    "hipercard",
+    "hiper",
+    "szep",
+    "uatp",
+    "rupay",
+];
+
+exports.CARD_BRAND_NAMES = CARD_BRAND_NAMES;

package/build/cjs/Card/utils.js

@@ -0,0 +1,87 @@
+'use strict';
+
+var evervaultCardValidator_main = require('../packages/card-validator/dist/evervault-card-validator.main.js');
+
+async function formatPayload(values, context) {
+    const number = values.number?.replace(/\s/g, "") || "";
+    const { brand, localBrands, bin, lastFour, isValid: isNumberValid, } = evervaultCardValidator_main.validateNumber(number);
+    if (number.length > 0 &&
+        brand !== "american-express" &&
+        values.cvc?.length === 4) {
+        context.form.setValue("cvc", values.cvc?.slice(0, 3));
+    }
+    const { cvc, isValid: isCvcValid } = evervaultCardValidator_main.validateCVC(values.cvc ?? "", number);
+    const formErrors = context.form.formState.errors;
+    const isValid = !Object.keys(formErrors).length;
+    const isComplete = areValuesComplete(values);
+    const errors = {};
+    if (formErrors.name?.message) {
+        errors.name = formErrors.name.message;
+    }
+    if (formErrors.number?.message) {
+        errors.number = formErrors.number.message;
+    }
+    if (formErrors.expiry?.message) {
+        errors.expiry = formErrors.expiry.message;
+    }
+    if (formErrors.cvc?.message) {
+        errors.cvc = formErrors.cvc.message;
+    }
+    return {
+        card: {
+            name: values.name ?? null,
+            brand,
+            localBrands,
+            bin,
+            lastFour,
+            expiry: formatExpiry(values.expiry ?? ""),
+            number: isNumberValid ? await context.encrypt(number) : null,
+            cvc: isCvcValid ? await context.encrypt(cvc ?? "") : null,
+        },
+        isComplete,
+        isValid: isValid && isComplete,
+        errors,
+    };
+}
+function areValuesComplete(values) {
+    if ("name" in values && !values.name?.length) {
+        return false;
+    }
+    if ("number" in values && !evervaultCardValidator_main.validateNumber(values.number ?? "").isValid) {
+        return false;
+    }
+    if ("expiry" in values && !evervaultCardValidator_main.validateExpiry(values.expiry ?? "").isValid) {
+        return false;
+    }
+    if ("cvc" in values &&
+        !evervaultCardValidator_main.validateCVC(values.cvc ?? "", values.number).isValid) {
+        return false;
+    }
+    return true;
+}
+function isAcceptedBrand(acceptedBrands, cardNumberValidationResult) {
+    if (!acceptedBrands?.length)
+        return true;
+    if (!cardNumberValidationResult.isValid)
+        return false;
+    const { brand, localBrands } = cardNumberValidationResult;
+    const acceptedBrandsSet = new Set(acceptedBrands);
+    const isBrandAccepted = brand !== null && acceptedBrandsSet.has(brand);
+    const isLocalBrandAccepted = localBrands.some((localBrand) => acceptedBrandsSet.has(localBrand));
+    return isBrandAccepted || isLocalBrandAccepted;
+}
+function formatExpiry(expiry) {
+    const parsedExpiry = evervaultCardValidator_main.validateExpiry(expiry);
+    if (!parsedExpiry.isValid) {
+        return null;
+    }
+    return {
+        month: parsedExpiry.month,
+        year: parsedExpiry.year,
+    };
+}
+
+exports.areValuesComplete = areValuesComplete;
+exports.formatExpiry = formatExpiry;
+exports.formatPayload = formatPayload;
+exports.isAcceptedBrand = isAcceptedBrand;

package/build/cjs/EvervaultProvider.js

@@ -0,0 +1,17 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var context = require('./context.js');
+var sdk = require('./sdk.js');
+
+function EvervaultProvider({ teamId, appId, children, }) {
+    const instanceId = React.useMemo(() => sdk.sdk.initialize(teamId, appId), [teamId, appId]);
+    const encrypt = React.useCallback(function (data) {
+        return sdk.sdk.encrypt(instanceId, data);
+    }, [instanceId]);
+    const context$1 = React.useMemo(() => ({ teamId, appId, encrypt }), [teamId, appId, encrypt]);
+    return (jsxRuntime.jsx(context.EvervaultContext.Provider, { value: context$1, children: children }));
+}
+
+exports.EvervaultProvider = EvervaultProvider;

package/build/cjs/Input.js

@@ -0,0 +1,107 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var utils = require('./utils.js');
+var index_esm = require('./node_modules/react-hook-form/dist/index.esm.js');
+var MaskInput = require('./node_modules/react-native-mask-input/lib/module/MaskInput.js');
+
+const EvervaultInputContext = React.createContext({
+    validationMode: "all",
+});
+function useForwardedInputRef(ref) {
+    const inputRef = React.useRef(null);
+    React.useImperativeHandle(ref, React.useCallback(() => ({
+        isFocused() {
+            return inputRef.current?.isFocused() ?? false;
+        },
+        focus() {
+            inputRef.current?.focus();
+        },
+        blur() {
+            inputRef.current?.blur();
+        },
+        clear() {
+            inputRef.current?.clear();
+        },
+        measure(callback) {
+            inputRef.current?.measure(callback);
+        },
+        measureInWindow(callback) {
+            inputRef.current?.measureInWindow(callback);
+        },
+        measureLayout(relativeToNativeComponentRef, onSuccess, onFail) {
+            inputRef.current?.measureLayout(relativeToNativeComponentRef, onSuccess, onFail);
+        },
+    }), [inputRef]));
+    return inputRef;
+}
+function mask(format) {
+    const maskArray = [];
+    let isObfuscated = false;
+    format.split("").forEach((char) => {
+        if (char === "[") {
+            isObfuscated = true;
+            return;
+        }
+        else if (char === "]") {
+            isObfuscated = false;
+            return;
+        }
+        let value = char;
+        if (char === "9") {
+            value = isObfuscated ? [/\d/] : /\d/;
+        }
+        maskArray.push(value);
+    });
+    return maskArray;
+}
+const EvervaultInput = React.forwardRef(function EvervaultInput({ name, mask, obfuscateValue, ...props }, ref) {
+    const { validationMode } = React.useContext(EvervaultInputContext);
+    const inputRef = useForwardedInputRef(ref);
+    const methods = index_esm.useFormContext();
+    const { field, fieldState } = index_esm.useController({
+        control: methods.control,
+        name,
+        shouldUnregister: true,
+    });
+    const obfuscationCharacter = React.useMemo(() => {
+        if (typeof obfuscateValue === "string") {
+            return obfuscateValue;
+        }
+        else {
+            return "•";
+        }
+    }, [obfuscateValue]);
+    return (jsxRuntime.jsx(MaskInput.default
+    // Overridable props
+    , { 
+        // Overridable props
+        id: field.name, ...props, 
+        // Strict props
+        ref: utils.mergeRefs(inputRef, field.ref), editable: !field.disabled && (props.editable ?? true), onBlur: (evt) => {
+            const shouldValidate = validationMode === "onBlur" ||
+                validationMode === "onTouched" ||
+                validationMode === "all";
+            methods.setValue(field.name, field.value, {
+                shouldDirty: true,
+                shouldTouch: true,
+                shouldValidate,
+            });
+            props.onBlur?.(evt);
+        }, mask: mask, maskAutoComplete: !!mask, obfuscationCharacter: obfuscationCharacter, showObfuscatedValue: !!obfuscateValue, value: field.value, onChangeText: (masked, unmasked) => {
+            const shouldValidate = (validationMode === "onTouched" && fieldState.isTouched) ||
+                ((validationMode === "onChange" || validationMode === "all") &&
+                    (!!fieldState.error || fieldState.isTouched));
+            methods.setValue(field.name, unmasked, {
+                shouldDirty: true,
+                shouldValidate,
+            });
+        }, 
+        // Remove unwanted props
+        defaultValue: undefined, onChange: undefined }));
+});
+
+exports.EvervaultInput = EvervaultInput;
+exports.EvervaultInputContext = EvervaultInputContext;
+exports.mask = mask;

package/build/cjs/ThreeDSecure/Frame.js

@@ -0,0 +1,37 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var reactNative = require('react-native');
+var useEvervault = require('../useEvervault.js');
+var reactNativeWebview = require('react-native-webview');
+var config = require('./config.js');
+var context = require('./context.js');
+
+function ThreeDSecureFrame({ style }) {
+    const evervault = useEvervault.useEvervault();
+    const context$1 = React.useContext(context.ThreeDSecureContext);
+    if (!context$1) {
+        throw new Error("`ThreeDSecure.Frame` must be used within a `ThreeDSecure` component.");
+    }
+    const uri = React.useMemo(() => {
+        if (!context$1.session)
+            return null;
+        const params = new URLSearchParams();
+        params.set("session", context$1.session.sessionId);
+        params.set("app", evervault.appId);
+        params.set("team", evervault.teamId);
+        return `https://${config.CHALLENGE_DOMAIN_3DS}/?${params.toString()}`;
+    }, [context$1.session, evervault.appId, evervault.teamId]);
+    if (!uri)
+        return null;
+    return (jsxRuntime.jsx(reactNativeWebview.WebView, { containerStyle: [defaultStyles.webView, style], source: { uri }, hideKeyboardAccessoryView: true, overScrollMode: "content" }));
+}
+const defaultStyles = reactNative.StyleSheet.create({
+    webView: {
+        flex: 1,
+        width: "100%",
+    },
+});
+
+exports.ThreeDSecureFrame = ThreeDSecureFrame;

package/build/cjs/ThreeDSecure/Root.js

@@ -0,0 +1,14 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var useEvervault = require('../useEvervault.js');
+var context = require('./context.js');
+
+function ThreeDSecure({ state, children }) {
+    useEvervault.useEvervault();
+    if (!state.session)
+        return null;
+    return (jsxRuntime.jsx(context.ThreeDSecureContext.Provider, { value: state, children: state.isVisible && children }));
+}
+
+exports.ThreeDSecure = ThreeDSecure;

package/build/cjs/ThreeDSecure/config.js

@@ -0,0 +1,7 @@
+'use strict';
+
+const EV_API_DOMAIN = process.env.EV_API_DOMAIN || "api.evervault.com";
+const CHALLENGE_DOMAIN_3DS = process.env.CHALLENGE_DOMAIN_3DS || "3ds.evervault.com";
+
+exports.CHALLENGE_DOMAIN_3DS = CHALLENGE_DOMAIN_3DS;
+exports.EV_API_DOMAIN = EV_API_DOMAIN;

package/build/cjs/ThreeDSecure/context.js

@@ -0,0 +1,7 @@
+'use strict';
+
+var React = require('react');
+
+const ThreeDSecureContext = React.createContext(null);
+
+exports.ThreeDSecureContext = ThreeDSecureContext;

package/build/cjs/ThreeDSecure/event.js

@@ -0,0 +1,20 @@
+'use strict';
+
+class ThreeDSecureEvent {
+    type;
+    session;
+    _defaultPrevented;
+    constructor(type, session, _defaultPrevented = false) {
+        this.type = type;
+        this.session = session;
+        this._defaultPrevented = _defaultPrevented;
+    }
+    preventDefault() {
+        this._defaultPrevented = true;
+    }
+    get defaultPrevented() {
+        return this._defaultPrevented;
+    }
+}
+
+exports.ThreeDSecureEvent = ThreeDSecureEvent;

package/build/cjs/ThreeDSecure/index.js

@@ -0,0 +1,12 @@
+'use strict';
+
+var Root = require('./Root.js');
+var Frame = require('./Frame.js');
+var useThreeDSecure = require('./useThreeDSecure.js');
+
+const ThreeDSecure = Object.assign(Root.ThreeDSecure, {
+    Frame: Frame.ThreeDSecureFrame,
+});
+
+exports.useThreeDSecure = useThreeDSecure.useThreeDSecure;
+exports.ThreeDSecure = ThreeDSecure;