Hyperpay

import React, { useState, useEffect, useRef } from 'react'
import { View, StyleSheet, ScrollView, KeyboardAvoidingView, Platform, NativeModules, DeviceEventEmitter } from 'react-native'
import { useDispatch } from 'react-redux'
import { Formik } from 'formik'
import * as yup from 'yup'

import Input from '../../components/common/Input'
import AppButton from '../../components/common/AppButton'
import { colors, fonts, dimensions } from '../../constants/constants'
import { fetchCheckoutId, fetchPaymentStatus } from '../../redux/actions/paymentActions'
import { Button } from 'react-native-elements'
var valid = require("card-validator");
import Checkbox from '../../components/common/Checkbox'
import { translate } from '../../components/common/translate'

const cardBrand: any = {
    Mastercard: 'MASTER',
    Visa: 'VISA',
    Amex: 'AMEX'
}

const NewCard = (props: any) => {

    const [checkoutId, setCheckoutId] = useState<string>('')
    const isDefault = useRef<boolean>(false)
    const reference = useRef(false)
    const dispatch = useDispatch()

    useEffect(() => {
        if(!checkoutId) generateId()
        const listener = DeviceEventEmitter.addListener('transactionStatus', onSessionConnect)
        return listener.remove.bind(listener)
    }, [])

    const generateId = async () => {
        const id = await fetchCheckoutId()
        setCheckoutId(id)
    }

    const onSessionConnect = (e: any) => {
        if(!reference.current){
            fetchPaymentStatus(e.checkoutID, dispatch, isDefault.current)
            setCheckoutId('')
            props.navigation.goBack()
        }
        reference.current = true
    }

    const initialValues = {
        brand: '',
        fullName: '',
        cardNumber: '',
        expiryDate: '',
        cvv: '',
        default: false
    }

    const schema = yup.object().shape({
        fullName: yup.string().required(translate('required')),

        expiryDate: yup.string().test('Expiry Date Test',
        translate('invalidExp'),
        value => valid.expirationDate(value).isValid)
        .required(translate('required')),

        cvv: yup.string().test('Cvv Test',
        translate('invalidCvv'),
        value => valid.cvv(value).isValid)
        .required(translate('required')),

        cardNumber: yup.string().test('Card Test',
        translate('invalidCard'),
        value => valid.number(value).isValid)
        .required(translate('required'))
    })

    const dateHandler = (val: any, setFieldValue: Function) => {
        if(val.length === 2){
            setFieldValue('expiryDate', `${val}/`)
        } else {
            setFieldValue('expiryDate', val)
        }
    }

    const saveAddresshandler = async (val: any) => {
        if(!val.brand){
            return
        }
        isDefault.current = val.default
        const [month, year] = val.expiryDate?.split('/')

        const paymentParams = {
            checkoutID: checkoutId,
            paymentBrand: cardBrand[val.brand],
            cardNumber: val.cardNumber,
            holderName: val.fullName,
            expiryMonth: month,
            expiryYear: `20${year}`,
            cvv: val.cvv
        }
        if(Platform.OS !== 'ios'){
            NativeModules?.Hyperpay?.transactionPayment(paymentParams, false)
        } else {
            try {
                const status = await NativeModules?.Hyperpay?.transactionPayment(paymentParams)
                if(status?.checkoutId){
                    onSessionConnect({ checkoutID: status.checkoutId })
                }
            } catch(err) {
                console.log(err)
            }
        }
    }

    const onNumberChange = (num: string, fn: Function) => {
        const card = valid.number(`${num}`)
        if(card?.card?.niceType) fn('brand', card.card.niceType)
    }

    return (
        <KeyboardAvoidingView style={{ flex: 1}} behavior={(Platform.OS === 'ios') ? 'position' : 'height'}>
            <ScrollView>
                <View style={styles.backgroundStyle}>

                    <View style={styles.formContainer}>
                        <Formik
                            initialValues={initialValues}
                            validationSchema={schema}
                            onSubmit={(value: any) => {
                                saveAddresshandler(value)
                            }}
                            enableReinitialize={true}
                        >
                            {({ values, handleChange, handleBlur, handleSubmit, errors, touched, setFieldValue }) => (
                                <>
                                    <View style={styles.inputContainer}>
                                        <Input
                                            value={values.fullName}
                                            placeholder={translate("Full Name*")}
                                            onChange={handleChange('fullName')}
                                            autoCorrect={false}
                                            autoCapitalize="none"
                                            onBlur={handleBlur('fullName')}
                                            errorText={errors.fullName}
                                            touched={touched.fullName}
                                        />
                                    </View>

                                    <View style={styles.inputContainer}>

                                        <Input
                                            placeholder={translate("Add Card Number*")}
                                            keyboardType='number-pad'
                                            value={values.cardNumber}
                                            onChange={(num: string) => {
                                                setFieldValue('cardNumber', num)
                                                onNumberChange(num, setFieldValue)
                                            }}
                                            autoCorrect={false}
                                            autoCapitalize="none"
                                            onBlur={handleBlur('cardNumber')}
                                            errorText={errors.cardNumber}
                                            touched={touched.cardNumber}
                                        />
                                    </View>

                                <View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
                                <View style={styles.cvvContainer}>

                                    <Input
                                        placeholder="MM/YY*"
                                        keyboardType="number-pad"
                                        value={values.expiryDate}
                                        onChange={(val: any) => dateHandler(val, setFieldValue)}
                                        autoCorrect={false}
                                        autoCapitalize="none"
                                        onBlur={handleBlur('expiryDate')}
                                        errorText={errors.expiryDate}
                                        touched={touched.expiryDate}
                                    />
                                    </View>

                                    <View style={styles.dateContainer}>

                                    <Input
                                        placeholder={translate("CVV*")}
                                        value={values.cvv}
                                        onChange={handleChange('cvv')}
                                        autoCorrect={false}
                                        keyboardType='number-pad'
                                        autoCapitalize="none"
                                        onBlur={handleBlur('cvv')}
                                        errorText={errors.cvv}
                                        touched={touched.cvv}
                                        secureEntry
                                    />
                                    </View>
                                </View>
                                <View style={styles.checkboxContainer}>
                                <Checkbox
                                    checked={values.default}
                                    onChange={(val: boolean) => setFieldValue('default', val)}
                                    label={translate("Set As Default")}
                                />
                                </View>
                                    <View style={{marginTop: '10%'}}>
                                        <AppButton
                                            title={translate("Save")}
                                            onPress={handleSubmit}
                                        />
                                        <View style={{marginVertical: '5%'}}>
                                        <Button
                                            title={translate("Cancel")}
                                            titleStyle={{
                                                fontSize: 20,
                                                color: colors.redButton
                                            }}
                                            buttonStyle={{
                                                paddingVertical: 10,
                                                backgroundColor: '#fff',
                                                borderRadius: 10,
                                                borderWidth: 2,
                                                borderColor: colors.redButton
                                            }}
                                            onPress={() => {
                                                setCheckoutId('')
                                                props.navigation.goBack()
                                            }}
                                            />
                                        </View>

                                    </View>
                                </>
                            )}
                        </Formik>


                    </View>
                </View>
            </ScrollView>
        </KeyboardAvoidingView>
    )
}

const styles = StyleSheet.create({
    backgroundStyle: {
        // flex: 1,
        height: dimensions.screenHeight,
        backgroundColor: colors.white,
    },
    formContainer: {
        width: '100%',
        backgroundColor: colors.white,
        borderTopLeftRadius: 15,
        borderTopRightRadius: 15,
        paddingHorizontal: '5%',
        paddingTop: '8%'
    },
    inputContainer: {
        marginBottom: '5%',
        paddingVertical: '1%'
    },
    cvvContainer: {
        marginBottom: '5%',
        width: '48%',
        paddingRight: '2%',
        paddingVertical: '1%'
    },
    dateContainer: {
        marginBottom: '5%',
        width: '48%',
        paddingVertical: '1%'
    },
    label: {
        color: 'rgb(241, 38, 0)',
        fontSize: 14,
        fontFamily: fonts.OpenSansSemiBold,
        paddingVertical: 5
    },
    locationContainer: {
        margin: '1%',
        marginBottom: 20,
        borderColor: 'rgba(0, 0, 0, 0.11)',
        borderWidth: 1,
        borderRadius: 5
    },
    alternative: {
        fontSize: 12,
        fontFamily: fonts.OpenSansRegular,
        color: 'rgb(241, 38, 0)',

    },
    checkboxContainer: {
        paddingVertical: 19
    }
})

export default NewCard