@react-native-ohos/react-native-credit-card-input 1.0.1-rc.1

package/src/LiteCreditCardInput.tsx

@@ -0,0 +1,226 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import {
+  Image,
+  LayoutAnimation,
+  StyleSheet,
+  TextInput,
+  TouchableOpacity,
+  View,
+  type TextStyle,
+  type ViewStyle,
+} from 'react-native';
+import Icons from './Icons';
+import {
+  useCreditCardForm,
+  type CreditCardFormData,
+  type CreditCardFormField,
+} from './useCreditCardForm';
+
+interface Props {
+  autoFocus?: boolean;
+  style?: ViewStyle;
+  inputStyle?: TextStyle;
+  placeholderColor?: string;
+  placeholders?: {
+    number: string;
+    expiry: string;
+    cvc: string;
+  };
+  onChange?: (formData: CreditCardFormData) => void;
+  onFocusField?: (field: CreditCardFormField) => void;
+  testID?: string;
+}
+
+const s = StyleSheet.create({
+  container: {
+    paddingVertical: 10,
+    paddingHorizontal: 15,
+    flexDirection: 'row',
+    alignItems: 'center',
+    overflow: 'hidden',
+  },
+  icon: {
+    width: 48,
+    height: 40,
+    resizeMode: 'contain',
+  },
+  expanded: {
+    flex: 1,
+  },
+  hidden: {
+    width: 0,
+  },
+  leftPart: {
+    overflow: 'hidden',
+  },
+  rightPart: {
+    overflow: 'hidden',
+    flexDirection: 'row',
+  },
+  last4: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  numberInput: {
+    width: 1000,
+  },
+  expiryInput: {
+    width: 80,
+  },
+  cvcInput: {
+    width: 80,
+  },
+  last4Input: {
+    width: 60,
+    marginLeft: 20,
+  },
+  input: {
+    height: 40,
+    fontSize: 16,
+    // // @ts-expect-error outlineWidth is used to hide the text-input outline on react-native-web
+    outlineWidth: 0,
+  },
+});
+
+const LiteCreditCardInput = (props: Props) => {
+  const {
+    autoFocus = false,
+    style,
+    inputStyle,
+    placeholderColor = 'darkgray',
+    placeholders = {
+      number: '1234 5678 1234 5678',
+      expiry: 'MM/YY',
+      cvc: 'CVC',
+    },
+    onChange = () => {},
+    onFocusField = () => {},
+    testID,
+  } = props;
+
+  const _onChange = (formData: CreditCardFormData): void => {
+    // Focus next field when number/expiry field become valid
+    if (status.number !== 'valid' && formData.status.number === 'valid') {
+      toggleFormState();
+      expiryInput.current?.focus();
+    }
+
+    if (status.expiry !== 'valid' && formData.status.expiry === 'valid') {
+      cvcInput.current?.focus();
+    }
+
+    onChange(formData);
+  };
+
+  const { values, status, onChangeValue } = useCreditCardForm(_onChange);
+
+  const [showRightPart, setShowRightPart] = useState(false);
+
+  const toggleFormState = useCallback(() => {
+    LayoutAnimation.easeInEaseOut();
+    setShowRightPart((v) => !v);
+  }, []);
+
+  const numberInput = useRef<TextInput>(null);
+  const expiryInput = useRef<TextInput>(null);
+  const cvcInput = useRef<TextInput>(null);
+
+  useEffect(() => {
+    if (autoFocus) numberInput.current?.focus();
+  }, [autoFocus]);
+
+  const cardIcon = useMemo(() => {
+    if (values.type && Icons[values.type]) return Icons[values.type];
+    return Icons.placeholder;
+  }, [values.type]);
+
+  return (
+    <View
+      style={[s.container, style]}
+      testID={testID}
+    >
+      <View style={[s.leftPart, showRightPart ? s.hidden : s.expanded]}>
+        <View style={[s.numberInput]}>
+          <TextInput
+            ref={numberInput}
+            keyboardType="default"
+            style={[s.input, inputStyle]}
+            placeholderTextColor={placeholderColor}
+            placeholder={placeholders.number}
+            value={values.number}
+            onChangeText={(v) => onChangeValue('number', v)}
+            onFocus={() => onFocusField('number')}
+            autoCorrect={false}
+            underlineColorAndroid={'transparent'}
+            testID="CC_NUMBER"
+          />
+        </View>
+      </View>
+
+      <TouchableOpacity
+        activeOpacity={0.8}
+        onPress={toggleFormState}
+      >
+        <Image
+          style={s.icon}
+          source={{ uri: cardIcon }}
+        />
+      </TouchableOpacity>
+
+      <View style={[s.rightPart, showRightPart ? s.expanded : s.hidden]}>
+        <TouchableOpacity
+          activeOpacity={0.8}
+          onPress={toggleFormState}
+          style={s.last4}
+        >
+          <View pointerEvents={'none'}>
+            <TextInput
+              keyboardType="default"
+              value={
+                status.number === 'valid'
+                  ? values.number.slice(values.number.length - 4)
+                  : ''
+              }
+              style={[s.input, s.last4Input]}
+              readOnly
+            />
+          </View>
+        </TouchableOpacity>
+
+        <View style={s.expiryInput}>
+          <TextInput
+            ref={expiryInput}
+            keyboardType="default"
+            style={[s.input, inputStyle]}
+            placeholderTextColor={placeholderColor}
+            placeholder={placeholders.expiry}
+            value={values.expiry}
+            onChangeText={(v) => onChangeValue('expiry', v)}
+            onFocus={() => onFocusField('expiry')}
+            autoCorrect={false}
+            underlineColorAndroid={'transparent'}
+            testID="CC_EXPIRY"
+          />
+        </View>
+
+        <View style={s.cvcInput}>
+          <TextInput
+            ref={cvcInput}
+            keyboardType="default"
+            style={[s.input, inputStyle]}
+            placeholderTextColor={placeholderColor}
+            placeholder={placeholders.cvc}
+            value={values.cvc}
+            onChangeText={(v) => onChangeValue('cvc', v)}
+            onFocus={() => onFocusField('cvc')}
+            autoCorrect={false}
+            underlineColorAndroid={'transparent'}
+            testID="CC_CVC"
+          />
+        </View>
+      </View>
+    </View>
+  );
+};
+
+export default LiteCreditCardInput;

package/src/index.tsx

@@ -0,0 +1,12 @@
+export { default as CreditCardView } from './CreditCardView';
+export { default as CreditCardInput } from './CreditCardInput';
+export { default as LiteCreditCardInput } from './LiteCreditCardInput';
+
+export {
+  type CreditCardFormField,
+  type CreditCardFormValues,
+  type ValidationState,
+  type CreditCardFormState,
+  type CreditCardFormData,
+  useCreditCardForm,
+} from './useCreditCardForm';

package/src/useCreditCardForm.tsx

@@ -0,0 +1,161 @@
+import { useCallback, useState } from 'react';
+import cardValidator from 'card-validator';
+
+export type CreditCardIssuer =
+  | 'visa'
+  | 'mastercard'
+  | 'american-express'
+  | 'diners-club'
+  | 'discover'
+  | 'jcb';
+
+export type CreditCardFormField = 'number' | 'expiry' | 'cvc';
+
+export type CreditCardFormValues = {
+  number: string;
+  expiry: string;
+  cvc: string;
+  type?: CreditCardIssuer;
+};
+
+export type ValidationState = 'incomplete' | 'invalid' | 'valid';
+
+export type CreditCardFormState = {
+  number: ValidationState;
+  expiry: ValidationState;
+  cvc: ValidationState;
+};
+
+export type CreditCardFormData = {
+  valid: boolean;
+  values: CreditCardFormValues;
+  status: CreditCardFormState;
+};
+
+// --- Utilities
+
+const toStatus = (validation: {
+  isValid: boolean;
+  isPotentiallyValid: boolean;
+}): ValidationState => {
+  return validation.isValid
+    ? 'valid'
+    : validation.isPotentiallyValid
+      ? 'incomplete'
+      : 'invalid';
+};
+
+const removeNonNumber = (string = '') => string.replace(/[^\d]/g, '');
+
+const limitLength = (string = '', maxLength: number) =>
+  string.slice(0, maxLength);
+
+const addGaps = (string = '', gaps: number[]) => {
+  const offsets = [0].concat(gaps).concat([string.length]);
+
+  return offsets
+    .map((end, index) => {
+      if (index === 0) return '';
+      const start = offsets[index - 1] || 0;
+      return string.slice(start, end);
+    })
+    .filter((part) => part !== '')
+    .join(' ');
+};
+
+const formatCardNumber = (
+  number: string,
+  maxLength: number,
+  gaps: number[]
+) => {
+  const numberSanitized = removeNonNumber(number);
+  const lengthSanitized = limitLength(numberSanitized, maxLength);
+  const formatted = addGaps(lengthSanitized, gaps);
+  return formatted;
+};
+
+const formatCardExpiry = (expiry: string) => {
+  const sanitized = limitLength(removeNonNumber(expiry), 4);
+  if (sanitized.match(/^[2-9]$/)) {
+    return `0${sanitized}`;
+  }
+  if (sanitized.length > 2) {
+    return `${sanitized.substr(0, 2)}/${sanitized.substr(2, sanitized.length)}`;
+  }
+  return sanitized;
+};
+
+const formatCardCVC = (cvc: string, cvcMaxLength: number) => {
+  return limitLength(removeNonNumber(cvc), cvcMaxLength);
+};
+
+export const useCreditCardForm = (
+  onChange: (formData: CreditCardFormData) => void
+) => {
+  const [formState, setFormState] = useState<CreditCardFormState>({
+    number: 'incomplete',
+    expiry: 'incomplete',
+    cvc: 'incomplete',
+  });
+
+  const [values, setValues] = useState<CreditCardFormValues>({
+    number: '',
+    expiry: '',
+    cvc: '',
+    type: undefined,
+  });
+
+  const onChangeValue = useCallback(
+    (field: CreditCardFormField, value: string) => {
+      const newValues = {
+        ...values,
+        [field]: value,
+      };
+
+      const numberValidation = cardValidator.number(newValues.number);
+
+      // When card issuer cant be detected, use these default (3 digit CVC, 16 digit card number with spaces every 4 digit)
+      const cvcMaxLength = numberValidation.card?.code.size || 3;
+      const cardNumberGaps = numberValidation.card?.gaps || [4, 8, 12];
+      const cardNumberMaxLength =
+        // Credit card number can vary. Use the longest possible as maximum (otherwise fallback to 16)
+        Math.max(...(numberValidation.card?.lengths || [16]));
+
+      const newFormattedValues = {
+        number: formatCardNumber(
+          newValues.number,
+          cardNumberMaxLength,
+          cardNumberGaps
+        ),
+        expiry: formatCardExpiry(newValues.expiry),
+        cvc: formatCardCVC(newValues.cvc, cvcMaxLength),
+        type: numberValidation.card?.type as CreditCardIssuer,
+      };
+
+      const newFormState = {
+        number: toStatus(cardValidator.number(newFormattedValues.number)),
+        expiry: toStatus(cardValidator.expirationDate(newFormattedValues.expiry)),
+        cvc: toStatus(cardValidator.cvv(newFormattedValues.cvc, cvcMaxLength)),
+      };
+
+      setValues(newFormattedValues);
+      setFormState(newFormState);
+
+      onChange({
+        valid:
+          newFormState.number === 'valid' &&
+          newFormState.expiry === 'valid' &&
+          newFormState.cvc === 'valid',
+        values: newFormattedValues,
+        status: newFormState,
+      });
+    },
+    [values, onChange]
+  );
+
+  return {
+    values,
+    status: formState,
+    onChangeValue,
+  };
+};