@evervault/evervault-react-native 0.2.3 → 0.4.2

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@evervault/evervault-react-native",
-  "version": "0.2.3",
+  "version": "0.4.2",
   "description": "Evervault react native sdk",
-  "main": "lib/commonjs/index",
-  "module": "lib/module/index",
-  "types": "lib/typescript/src/index.d.ts",
+  "main": "dist/commonjs/index",
+  "module": "dist/module/index",
+  "types": "dist/typescript/src/index.d.ts",
   "react-native": "src/index",
   "source": "src/index",
   "files": [
     "src",
-    "lib",
+    "dist",
     "android",
     "ios",
     "cpp",
@@ -25,14 +25,6 @@
     "!**/__mocks__",
     "!**/.*"
   ],
-  "scripts": {
-    "example": "yarn workspace react-native-evervault-sdk-example",
-    "test": "jest",
-    "typecheck": "tsc --noEmit",
-    "clean": "del-cli android/build example/android/build example/android/app/build example/ios/build lib",
-    "prepare": "bob build",
-    "release": "release-it"
-  },
   "keywords": [
     "react-native",
     "ios",
@@ -40,14 +32,14 @@
   ],
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/evervault/evervault-react-native-sdk.git"
+    "url": "git+https://github.com/evervault/evervault-js.git"
   },
-  "author": "Eoin Boylan <eoin@evervault.com> (https://evervault.com)",
+  "author": "Engineering <engineering@evervault.com> (https://evervault.com)",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/evervault/evervault-react-native-sdk/issues"
+    "url": "https://github.com/evervault/evervault-js/issues"
   },
-  "homepage": "https://github.com/evervault/evervault-react-native-sdk",
+  "homepage": "https://github.com/evervault/evervault-js",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public"
@@ -57,8 +49,7 @@
     "@react-native/eslint-config": "^0.72.2",
     "@release-it/conventional-changelog": "^5.0.0",
     "@types/jest": "^28.1.2",
-    "@types/react": "~17.0.21",
-    "@types/react-native": "0.70.0",
+    "@types/react": "~18.2.45",
     "commitlint": "^17.0.2",
     "del-cli": "^5.0.0",
     "eslint": "^8.4.1",
@@ -68,31 +59,25 @@
     "pod-install": "^0.1.0",
     "prettier": "^2.0.5",
     "react": "18.2.0",
-    "react-native": "0.73.3",
+    "react-native": "0.74.1",
     "react-native-builder-bob": "^0.23.2",
+    "react-native-mask-input": "^1.2.3",
     "release-it": "^16.1.3",
     "turbo": "^1.10.7",
-    "typescript": "^5.0.2"
-  },
-  "resolutions": {
-    "@types/react": "17.0.21"
+    "typescript": "^5.3.3",
+    "@evervault/card-validator": "1.0.3"
   },
   "peerDependencies": {
     "react": "*",
     "react-native": "*"
   },
-  "workspaces": [
-    "example"
-  ],
-  "packageManager": "yarn@3.6.1",
   "engines": {
     "node": ">= 18.0.0"
   },
   "jest": {
     "preset": "react-native",
     "modulePathIgnorePatterns": [
-      "<rootDir>/example/node_modules",
-      "<rootDir>/lib/"
+      "<rootDir>/dist/"
     ]
   },
   "commitlint": {
@@ -124,6 +109,7 @@
       "prettier"
     ],
     "rules": {
+      "react/react-in-jsx-scope": "off",
       "prettier/prettier": [
         "error",
         {
@@ -138,7 +124,7 @@
   },
   "eslintIgnore": [
     "node_modules/",
-    "lib/"
+    "dist/"
   ],
   "prettier": {
     "quoteProps": "consistent",
@@ -149,7 +135,12 @@
   },
   "react-native-builder-bob": {
     "source": "src",
-    "output": "lib",
+    "output": "dist",
+    "typescript": [
+      {
+        "project": "tsconfig.build.json"
+      }
+    ],
     "targets": [
       "commonjs",
       "module",
@@ -160,5 +151,14 @@
         }
       ]
     ]
+  },
+  "dependencies": {
+    "react-native-masked-text": "^1.13.0"
+  },
+  "scripts": {
+    "build": "bob build",
+    "typecheck": "tsc --noEmit",
+    "clean": "del-cli android/build dist",
+    "release": "release-it"
   }
-}
+}

package/src/components/Card/Card.tsx

@@ -0,0 +1,155 @@
+import {
+  validateNumber,
+  validateCVC,
+  validateExpiry,
+} from '@evervault/card-validator';
+import { ReactNode, useEffect, useState } from 'react';
+import { useForm } from '../useForm';
+import { changePayload, isAcceptedBrand, isComplete } from './utilities';
+import type { CardForm, CardConfig, CardField, CardPayload } from './types';
+import { CardNumber } from './CardNumber';
+import { CardContext } from './context';
+import { encrypt } from '../../sdk';
+import { CardCVC } from './CardCVC';
+import { CardHolder } from './CardHolder';
+import { CardExpiry } from './CardExpiry';
+import { StyleProp, TextStyle, View } from 'react-native';
+
+export interface BaseProps {
+  disabled?: boolean;
+  placeholder?: string;
+  readOnly?: boolean;
+  style?: StyleProp<TextStyle>;
+}
+
+export interface CardProps {
+  initialValue?: CardForm;
+  config?: CardConfig;
+  children: ReactNode;
+  onChange?: (payload: CardPayload) => void;
+  onComplete?: (payload: CardPayload) => void;
+  style?: StyleProp<TextStyle>;
+}
+
+function Card({
+  initialValue,
+  config,
+  children,
+  onChange,
+  onComplete,
+  style,
+}: CardProps) {
+  const [registeredFields, setRegisteredFields] = useState<Set<CardField>>(
+    new Set()
+  );
+
+  const form = useForm<CardForm>({
+    initialValues: initialValue ?? {
+      cvc: '',
+      expiry: '',
+      number: '',
+      name: '',
+    },
+    validate: {
+      name: (values) => {
+        if (!registeredFields.has('name')) {
+          return undefined;
+        }
+
+        if (values.name.length === 0) {
+          return 'invalid';
+        }
+
+        return undefined;
+      },
+      number: (values) => {
+        if (!registeredFields.has('number')) {
+          return undefined;
+        }
+        const cardValidation = validateNumber(values.number);
+        if (!cardValidation.isValid) {
+          return 'invalid';
+        }
+
+        if (!isAcceptedBrand(config?.acceptedBrands, cardValidation)) {
+          return 'unsupportedBrand';
+        }
+
+        return undefined;
+      },
+      expiry: (values) => {
+        if (!registeredFields.has('expiry')) {
+          return undefined;
+        }
+        const expiryValidation = validateExpiry(values.expiry);
+        if (!expiryValidation.isValid) {
+          return 'invalid';
+        }
+
+        return undefined;
+      },
+      cvc: (values) => {
+        if (!registeredFields.has('cvc')) {
+          return undefined;
+        }
+        const cvcValidation = validateCVC(values.cvc, values.number);
+        if (!cvcValidation.isValid) {
+          return 'invalid';
+        }
+
+        return undefined;
+      },
+    },
+    onChange: (formState) => {
+      const triggerChange = async () => {
+        const cardData = await changePayload(
+          encrypt,
+          formState,
+          Array.from(registeredFields)
+        );
+        if (onChange) {
+          onChange(cardData);
+        }
+      };
+
+      triggerChange();
+    },
+  });
+
+  useEffect(() => {
+    const getCardData = async () => {
+      const cardData = await changePayload(
+        encrypt,
+        form,
+        Array.from(registeredFields)
+      );
+      if (onComplete) {
+        onComplete(cardData);
+      }
+    };
+    if (isComplete(form, Array.from(registeredFields))) {
+      getCardData();
+    }
+  }, [form, onComplete, registeredFields]);
+
+  return (
+    <CardContext.Provider
+      value={{
+        values: form.values,
+        register: form.register,
+        setRegisteredFields,
+      }}
+    >
+      <View style={style}>{children}</View>
+    </CardContext.Provider>
+  );
+}
+
+const CardNamespace = Object.assign(Card, {
+  Number: CardNumber,
+  CVC: CardCVC,
+  Holder: CardHolder,
+  Expiry: CardExpiry,
+});
+
+export { CardNamespace as Card };

package/src/components/Card/CardCVC.tsx

@@ -0,0 +1,53 @@
+import { validateNumber } from '@evervault/card-validator';
+import React, { useEffect, useMemo } from 'react';
+import { TextInputMask } from 'react-native-masked-text';
+import { useCardContext } from './context';
+import { BaseProps } from './Card';
+
+export interface CVCProps extends BaseProps { }
+
+export const CardCVC = ({
+  style,
+  disabled,
+  placeholder,
+  readOnly,
+}: CVCProps) => {
+  const context = useCardContext();
+  const mask = useMemo(() => {
+    const type = validateNumber(context.values.number).brand;
+    if (type === 'american-express') {
+      return '9999';
+    }
+    return '999';
+  }, [context.values.number]);
+
+  const { onChange, onBlur } = context.register('cvc');
+
+  useEffect(() => {
+    context.setRegisteredFields((prev) => new Set(prev).add('cvc'));
+    return () => context.setRegisteredFields((prev) => {
+      const next = new Set(prev);
+      next.delete('cvc');
+      return next;
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <TextInputMask
+      type="custom"
+      options={{ mask }}
+      style={style}
+      value={context.values.cvc}
+      onChangeText={(t) => onChange(t)}
+      id="cvc"
+      editable={disabled}
+      selectTextOnFocus={disabled}
+      onBlur={onBlur}
+      placeholder={placeholder}
+      inputMode="numeric"
+      autoComplete="cc-csc"
+      readOnly={readOnly}
+    />
+  );
+};

package/src/components/Card/CardExpiry.tsx

@@ -0,0 +1,48 @@
+import { TextInputMask } from 'react-native-masked-text';
+import { useCardContext } from './context';
+import { useEffect } from 'react';
+import { BaseProps } from './Card';
+
+export interface CardExpiryProps extends BaseProps { }
+
+export function CardExpiry({
+  disabled,
+  placeholder,
+  readOnly,
+  style
+}: CardExpiryProps) {
+  const context = useCardContext();
+
+  const { onBlur, onChange } = context.register('expiry');
+
+  useEffect(() => {
+    context.setRegisteredFields((prev) => new Set(prev).add('expiry'));
+    return () => context.setRegisteredFields((prev) => {
+      const next = new Set(prev);
+      next.delete('expiry');
+      return next;
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <TextInputMask
+      style={style}
+      type="datetime"
+      value={context.values.expiry}
+      editable={disabled}
+      selectTextOnFocus={disabled}
+      // store the expiry as MMYY not MM / YY
+      onChangeText={(rawExpiry) => onChange(rawExpiry.replace(' / ', ''))}
+      options={{
+        format: '99 / 99',
+      }}
+      id="expiry"
+      onBlur={onBlur}
+      placeholder={placeholder ?? 'MM / YY'}
+      inputMode="numeric"
+      autoComplete="cc-exp"
+      readOnly={readOnly}
+    />
+  );
+}

package/src/components/Card/CardHolder.tsx

@@ -0,0 +1,46 @@
+import { useEffect } from 'react';
+import { TextInput } from 'react-native';
+import { useCardContext } from './context';
+import { BaseProps } from './Card';
+
+export interface CardHolderProps extends BaseProps {
+  autoFocus?: boolean;
+}
+
+export function CardHolder({
+  autoFocus,
+  disabled,
+  placeholder,
+  readOnly,
+  style
+}: CardHolderProps) {
+  const context = useCardContext();
+
+  const { onBlur, onChange } = context.register('name');
+
+  useEffect(() => {
+    context.setRegisteredFields((prev) => new Set(prev).add('name'));
+    return () => context.setRegisteredFields((prev) => {
+      const next = new Set(prev);
+      next.delete('name');
+      return next;
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <TextInput
+      id="name"
+      style={style}
+      value={context.values.name}
+      readOnly={readOnly}
+      onBlur={onBlur}
+      autoFocus={autoFocus}
+      editable={disabled}
+      selectTextOnFocus={disabled}
+      placeholder={placeholder}
+      autoComplete="cc-name"
+      onChangeText={(v) => onChange(v)}
+    />
+  );
+}

package/src/components/Card/CardNumber.tsx

@@ -0,0 +1,69 @@
+import { validateNumber } from '@evervault/card-validator';
+import { useEffect, useMemo, useRef } from 'react';
+import { TextInputMask } from 'react-native-masked-text';
+import { useCardContext } from './context';
+import { BaseProps } from './Card';
+
+interface CardNumberProps extends BaseProps {
+  autoFocus?: boolean;
+}
+
+export function CardNumber({
+  autoFocus,
+  disabled,
+  placeholder,
+  readOnly,
+  style,
+}: CardNumberProps) {
+  const context = useCardContext();
+  const ref = useRef<TextInputMask>(null);
+
+  const [innerValue, mask] = useMemo(() => {
+    const value = context.values.number;
+
+    const { brand } = validateNumber(value);
+
+    const masks = {
+      'default': '9999 9999 9999 9999',
+      'unionpay': '9999 9999 9999 9999 999',
+      'american-express': '9999 999999 99999',
+    } as Record<string, string>;
+
+    if (brand && !!masks[brand]) {
+      return [value, masks[brand]];
+    }
+    return [value, masks.default];
+  }, [context.values.number]);
+
+  const { onBlur, onChange } = context.register('number');
+
+  useEffect(() => {
+    context.setRegisteredFields((prev) => new Set(prev).add('number'));
+    return () => context.setRegisteredFields((prev) => {
+      const next = new Set(prev);
+      next.delete('name');
+      return next;
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <TextInputMask
+      style={style}
+      ref={ref}
+      type="custom"
+      options={{ mask }}
+      id="number"
+      value={innerValue}
+      onChangeText={onChange}
+      onBlur={onBlur}
+      readOnly={readOnly}
+      inputMode="numeric"
+      autoFocus={autoFocus}
+      placeholder={placeholder}
+      editable={disabled}
+      selectTextOnFocus={disabled}
+      autoComplete="cc-number"
+    />
+  );
+}

package/src/components/Card/context.tsx

@@ -0,0 +1,25 @@
+import { UseFormReturn } from '../useForm';
+import { Dispatch, SetStateAction, createContext, useContext } from 'react';
+import { CardForm, CardField } from './types';
+
+type Context<T> = {
+  values: CardForm;
+  register: UseFormReturn<T>['register'];
+  setRegisteredFields: Dispatch<SetStateAction<Set<CardField>>>;
+};
+
+export const CardContext = createContext<Context<CardForm>>({
+  values: {
+    name: '',
+    number: '',
+    cvc: '',
+    expiry: '',
+  },
+  register: () => ({
+    onChange: () => {},
+      onBlur: () => {},
+      }),
+  setRegisteredFields: () => {},
+  });
+
+export const useCardContext = () => useContext(CardContext);

package/src/components/Card/index.ts

@@ -0,0 +1 @@
+export { Card, type CardProps } from './Card';

package/src/components/Card/types.ts

@@ -0,0 +1,52 @@
+export type CardBrandName =
+  | 'american-express'
+  | 'visa'
+  | 'mastercard'
+  | 'discover'
+  | 'jcb'
+  | 'diners-club'
+  | 'unionpay'
+  | 'maestro'
+  | 'mir'
+  | 'elo'
+  | 'hipercard'
+  | 'hiper'
+  | 'szep';
+
+export interface CardConfig {
+  acceptedBrands?: CardBrandName[];
+}
+
+export interface CardForm {
+  name: string;
+  number: string;
+  cvc: string;
+  expiry: string;
+}
+
+export type CardField = 'name' | 'number' | 'expiry' | 'cvc';
+
+export interface CardExpiry {
+  month: string | null;
+  year: string | null;
+}
+
+export interface CardPayload {
+  card: {
+    name: string | null;
+    brand: string | null;
+    localBrands: string[] | null;
+    number: string | null;
+    lastFour: string | null;
+    bin: string | null;
+    expiry: CardExpiry;
+    cvc: string | null;
+  };
+  isValid: boolean;
+  isComplete: boolean;
+  errors: null | Partial<{
+    number?: string;
+    cvc?: string;
+    expiry?: string;
+  }>;
+}

package/src/components/Card/utilities.ts

@@ -0,0 +1,103 @@
+import {
+  validateNumber,
+  validateExpiry,
+  validateCVC,
+  CardNumberValidationResult,
+} from '@evervault/card-validator';
+import type { CardForm, CardBrandName, CardField, CardPayload } from './types';
+import { UseFormReturn } from '../useForm';
+
+export async function changePayload(
+  encrypt: (value: string) => Promise<string>,
+  form: UseFormReturn<CardForm>,
+  fields: CardField[]
+): Promise<CardPayload> {
+  const { name, number, expiry, cvc } = form.values;
+  const {
+    brand,
+    localBrands,
+    bin,
+    lastFour,
+    isValid: isValidCardNumber,
+  } = validateNumber(number);
+  return {
+    card: {
+      name,
+      brand,
+      localBrands,
+      bin,
+      lastFour,
+      number: isValidCardNumber ? await encryptedNumber(encrypt, number) : null,
+      expiry: formatExpiry(expiry),
+      cvc: await encryptedCVC(encrypt, cvc, number),
+    },
+    isValid: form.isValid,
+    isComplete: isComplete(form, fields),
+    errors: Object.keys(form.errors ?? {}).length > 0 ? form.errors : null,
+  };
+}
+
+export function isComplete(form: UseFormReturn<CardForm>, fields: CardField[]) {
+  if (fields.includes('name')) {
+    if (form.values.name.length === 0) return false;
+  }
+
+  if (fields.includes('number')) {
+    const cardValidation = validateNumber(form.values.number);
+    if (!cardValidation.isValid) return false;
+  }
+
+  if (fields.includes('expiry')) {
+    const expiryValidation = validateExpiry(form.values.expiry);
+    if (!expiryValidation.isValid) return false;
+  }
+
+  if (fields.includes('cvc')) {
+    const cvcValidation = validateCVC(form.values.cvc, form.values.number);
+    if (!cvcValidation.isValid) return false;
+  }
+
+  return true;
+}
+
+export function isAcceptedBrand(
+  acceptedBrands: CardBrandName[] | undefined,
+  cardNumberValidationResult: CardNumberValidationResult
+): boolean {
+  if (!acceptedBrands) return true;
+  const { brand, localBrands } = cardNumberValidationResult;
+
+  const isBrandAccepted = brand !== null && acceptedBrands.includes(brand);
+  const isLocalBrandAccepted = localBrands.some((localBrand) =>
+    acceptedBrands.includes(localBrand)
+  );
+
+  return isBrandAccepted || isLocalBrandAccepted;
+}
+
+function formatExpiry(expiry: string) {
+  const parsedExpiry = validateExpiry(expiry);
+
+  return {
+    month: parsedExpiry.month,
+    year: parsedExpiry.year,
+  };
+}
+
+async function encryptedNumber(
+  encrypt: (value: string) => Promise<string>,
+  number: string
+) {
+  return encrypt(number);
+}
+
+async function encryptedCVC(
+  encrypt: (value: string) => Promise<string>,
+  cvc: string,
+  cardNumber: string
+) {
+  const { isValid } = validateCVC(cvc, cardNumber);
+
+  if (!isValid) return null;
+  return encrypt(cvc);
+}