@evervault/evervault-react-native 0.2.2 → 0.3.0

package/src/components/Card/CardHolder.tsx

@@ -0,0 +1,39 @@
+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,
+}: CardHolderProps) {
+  const context = useCardContext();
+
+  const { onBlur, onChange } = context.register('name');
+
+  useEffect(() => {
+    context.setRegisteredFields((prev) => new Set(prev).add('name'));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <TextInput
+      id="name"
+      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,64 @@
+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'));
+    // 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,26 @@
+import { UseFormReturn } from 'shared';
+import { Dispatch, SetStateAction, createContext, useContext } from 'react';
+import { CardForm } from './types';
+import { 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,2 @@
+export { Card, type CardProps } from './Card';
+export { CardPayload } from 'types';

package/src/components/Card/types.ts

@@ -0,0 +1,15 @@
+import type { CardBrandName } from 'types';
+
+export interface CardConfig {
+  autoFocus?: boolean;
+  acceptedBrands?: CardBrandName[];
+}
+
+export interface CardForm {
+  name: string;
+  number: string;
+  cvc: string;
+  expiry: string;
+}
+
+export { CardBrandName };

package/src/components/Card/utilities.ts

@@ -0,0 +1,105 @@
+import {
+  validateNumber,
+  validateExpiry,
+  validateCVC,
+  CardNumberValidationResult,
+} from '@evervault/card-validator';
+import type { CardForm } from './types';
+import type { CardBrandName, CardField, CardPayload } from 'types';
+import { UseFormReturn } from 'shared';
+
+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.replace(" / ", ""));
+    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.replace(" / ", ""));
+
+  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);
+}

package/src/components/index.ts

@@ -0,0 +1 @@
+// export * from './Card';

package/src/index.tsx

@@ -1,26 +1,3 @@
-import { NativeModules, Platform } from 'react-native';
-
-const LINKING_ERROR =
-  `The package '@evervault/evervault-react-native' doesn't seem to be linked. Make sure: \n\n` +
-  Platform.select({ ios: "- You have run 'pod install'\n", default: '' }) +
-  '- You rebuilt the app after installing the package\n' +
-  '- You are not using Expo Go\n';
-
-const EvervaultSdk = NativeModules.EvervaultSdk
-  ? NativeModules.EvervaultSdk
-  : new Proxy(
-      {},
-      {
-        get() {
-          throw new Error(LINKING_ERROR);
-        },
-      }
-    );
-
-export async function init(teamUuid: string, appUuid: string): Promise<void> {
-  return EvervaultSdk.initialize(teamUuid, appUuid);
-}
-
-export async function encrypt(data: any): Promise<string> {
-  return EvervaultSdk.encrypt(data);
-}
+export { type CardProps, Card } from './components/Card/Card';
+export { init, encrypt } from './sdk';
+export type { CardPayload, CardExpiry } from 'types';

package/src/native.ts

@@ -0,0 +1,18 @@
+import { NativeModules, Platform } from 'react-native';
+
+const LINKING_ERROR =
+  `The package '@evervault/evervault-react-native' doesn't seem to be linked. Make sure: \n\n` +
+  Platform.select({ ios: "- You have run 'pod install'\n", default: '' }) +
+  '- You rebuilt the app after installing the package\n' +
+  '- You are not using Expo Go\n';
+
+export const EvervaultSdk = NativeModules.EvervaultSdk
+  ? NativeModules.EvervaultSdk
+  : new Proxy(
+    {},
+    {
+      get() {
+        throw new Error(LINKING_ERROR);
+      },
+    }
+  );

package/src/sdk.ts

@@ -0,0 +1,17 @@
+import { Platform } from "react-native";
+import { EvervaultSdk } from "./native";
+
+export async function init(teamUuid: string, appUuid: string): Promise<void> {
+  return EvervaultSdk.initialize(teamUuid, appUuid);
+}
+
+export async function encrypt(data: any): Promise<string> {
+  if (Platform.OS === "android" && typeof data !== "string") {
+    throw new Error(`The Evervault SDK does not currently support encrypting non-string data on Android.
+      If this is required for your use case, please get in touch with us at support@evervault.com. Please do not
+      serialize other data types to strings and pass them to this method as this will result in the data
+      type being returned in it's stringified form when decryption occurs.`);
+  }
+
+  return EvervaultSdk.encrypt(data.toString());
+}