@open-tender/utils/dist/esm/hooks/useCreditCard.js

A library of utils for use with Open Tender applications that utilize our cloud-based Order API.

import { useRef, useState } from 'react';
import { formatCardField, formatCard, getCardType, isEmpty, validateCreditCard } from '../index';
const getDefaultCard = (includeAddress, requireCardholderName) => {
    const defaultCardData = {
        acct: '',
        exp: '',
        cvv: '',
        zip: '',
        is_default: false
    };
    if (includeAddress)
        defaultCardData.addr = '';
    if (requireCardholderName)
        defaultCardData.cardholder_name = '';
    return defaultCardData;
};
export const useCreditCard = (initState, cardErrors = {}, disabled = false, includeAddress = false, requireCardholderName = false) => {
    const [initCard, initCardType] = formatCard(initState);
    const submitRef = useRef(null);
    const defaultCard = getDefaultCard(includeAddress, requireCardholderName);
    const [data, setData] = useState(initCard || defaultCard);
    const [cardType, setCardType] = useState(initCardType || 'OTHER');
    const [errors, setErrors] = useState(cardErrors);
    const { acct, addr, exp, cvv, zip, cardholder_name } = data;
    const addrComplete = includeAddress ? addr : true;
    const cardholderNameComplete = requireCardholderName ? cardholder_name : true;
    const isComplete = !!(acct &&
        exp &&
        cvv &&
        zip &&
        addrComplete &&
        cardholderNameComplete &&
        isEmpty(errors));
    const handleChange = (name, value) => {
        if (name === 'acct') {
            const currentType = getCardType(value.replace(/\s/g, ''));
            setCardType(currentType);
        }
        if (name !== 'is_default') {
            value = formatCardField(name, value);
        }
        setData(Object.assign(Object.assign({}, data), { [name]: value }));
    };
    const handleBlur = (name) => {
        const { errors: validationErrors } = validateCreditCard(data, cardType, requireCardholderName);
        if (validationErrors) {
            const error = validationErrors[name];
            setErrors(Object.assign(Object.assign({}, errors), { [name]: error }));
        }
        else {
            setErrors({});
        }
    };
    return {
        submitRef,
        data,
        cardType,
        errors,
        disabled,
        setErrors,
        handleChange,
        handleBlur,
        isComplete
    };
};