Components / DropdownAddMetodePembayaran.js

import React, { useEffect, useState, useRef } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import {
    Dimensions,
    Image,
    ScrollView,
    StyleSheet,
    TouchableOpacity,
    View
} from 'react-native';
import PropType from 'prop-types';
import ButtonSticky from './ButtonSticky';
import TextfieldLine from './TextfieldLine';
import TextNunito from './internal/TextNunito';
import BottomSheet, { BottomSheetBody, BottomSheetHeader } from './internal/BottomSheet';
import { colors, images } from '../resources';
import stylesheet from '../resources/Stylesheet';
import {
    getGroupText,
    getOnlyNumber,
    sprintf
} from '../utils/Functions';
import { postValidasiMetodePembayaran } from '../actions/metodePembayaran';
import lang from '../lang';

const styles = StyleSheet.create({
    sheetContainer: {
        height: Dimensions.get('window').height * (14 / 15),
        width: Dimensions.get('window').width,
        backgroundColor: colors.WHITE,
        borderTopRightRadius: 12,
        borderTopLeftRadius: 12,
        position: 'absolute',
        bottom: 0
    },
    title: {
        flexDirection: 'row',
        padding: 16,
        justifyContent: 'space-between',
        borderBottomWidth: 1,
        borderBottomColor: colors.BLACK20
    },
    shadow: {
        backgroundColor: colors.WHITE,
        borderBottomWidth: 1,
        borderBottomColor: colors.BLACK20
    },
    container: {
        flexDirection: 'row',
        borderRadius: 6,
        alignItems: 'center'
    },
    icon: {
        height: 36,
        width: 60,
        resizeMode: 'cover',
        marginRight: 12
    },
    text: {
        fontSize: 16,
        flex: 1
    }
});

const DropdownAddMetodePembayaran = ({
    isVisible,
    onPress,
    onAdd,
    data,
    indexStep,
    optionMetodeBayarIndex
}) => {
    const dispatch = useDispatch();
    const bp = useRef();
    const userInfo = useSelector((state) => state.userInfo);
    const [submitted, setSubmitted] = useState(false);
    const [handphone, setHandphone] = useState(userInfo?.noTelepon);
    const [errHandphone, setErrHandphone] = useState('');

    useEffect(() => {
        if (isVisible) bp.current.toggleVisible();
    }, [isVisible]);

    const submit = () => {
        if (submitted) return;

        const params = {
            handphone
        };

        dispatch(postValidasiMetodePembayaran(params)).then(() => {
            setSubmitted(false);
        }).catch((error) => {
            const handphone = error.data.filter((val) => (val.field === 'handphone'));
            setErrHandphone(handphone.length !== 0 ? handphone[0].message : '');
        });
    };

    const closeBottomSheet = () => {
        onPress();
        bp.current.toggleVisible();
    };

    const getTitleMetodePembayaran = () => {
        if (data.length > 0 && data[optionMetodeBayarIndex]) return data[optionMetodeBayarIndex].name;
        return '';
    };

    const renderContentHubungkanForm = () => (
        <View style={stylesheet.MT24}>
            <View style={stylesheet.MB24}>
                <TextfieldLine
                    title={lang.nomorHandphone}
                    errorMessage={errHandphone}
                    value={getGroupText(handphone)}
                    onChangeText={(value) => setHandphone(getOnlyNumber(value))}
                    keyboardType="phone-pad"
                />
                <TextNunito fontSize={12} color={colors.BLACK60} style={stylesheet.MT8}>
                    {sprintf(
                        lang.nomorYangTerdaftarPadaAkunX,
                        getTitleMetodePembayaran()
                    )}
                </TextNunito>
            </View>
        </View>
    );

    const renderContentHubungkanIntro = () => (
        <ScrollView>
            <View style={[stylesheet.F1, stylesheet.P16]}>
                <View style={stylesheet.FDRow}>
                    <Image
                        source={images.notFound}
                        style={stylesheet.F1AR21}
                        resizeMode="contain"
                    />
                </View>
                <TextNunito
                    type="bold"
                    style={[stylesheet.CBLACK80FS20LH30, stylesheet.MT16]}
                >
                    {lang.konfirmasiNomorHandphone}
                </TextNunito>
                <TextNunito style={[stylesheet.CBLACK60FS16LH24, stylesheet.MT8]}>
                    {sprintf(
                        lang.otpAkanDikirimUntukMelakukanVerifikasiPadaAkunX,
                        getTitleMetodePembayaran()
                    )}
                </TextNunito>
                {renderContentHubungkanForm()}
            </View>
        </ScrollView>
    );

    const renderContentHubungkan = () => (
        <View style={stylesheet.F1}>
            {renderContentHubungkanIntro()}
            <ButtonSticky
                buttonText={sprintf(
                    lang.hubungkanX,
                    getTitleMetodePembayaran()
                )}
                onPressed={() => submit()}
            />
        </View>
    );

    const renderPilihMetodePembayaran = () => data.map((account, index) => (
        <TouchableOpacity
            activeOpacity={0.8}
            key={account.id}
            onPress={() => (!account.selected ? onAdd(index) : null)}
        >
            <View
                style={[
                    stylesheet.MH16,
                    stylesheet.P12,
                    styles.container,
                    styles.shadow
                ]}
            >
                <Image source={account.icon} style={styles.icon} />
                <TextNunito style={styles.text}>
                    {account.name}
                </TextNunito>
                {account.selected && (
                <Image
                    source={images.greenCheck}
                    style={stylesheet.H24W24RMCONTAIN}
                />
                )}
            </View>
        </TouchableOpacity>
    ));

    const renderContent = () => {
        if (indexStep === 0) return renderPilihMetodePembayaran();
        return renderContentHubungkan();
    };

    const renderTitle = () => {
        if (indexStep === 0) return lang.pilihMetodeBayar;
        return sprintf(lang.hubungkanX, getTitleMetodePembayaran());
    };

    return (
        <BottomSheet
            ref={(ref) => { bp.current = ref; }}
            type="fluid"
        >
            <View style={stylesheet.containerBottomSheet}>
                <BottomSheetHeader onPress={closeBottomSheet}>
                    {renderTitle()}
                </BottomSheetHeader>
                <BottomSheetBody>
                    {renderContent()}
                </BottomSheetBody>
            </View>
        </BottomSheet>
    );
};

DropdownAddMetodePembayaran.propTypes = {
    isVisible: PropType.bool.isRequired,
    onPress: PropType.func.isRequired,
    onAdd: PropType.func.isRequired,
    data: PropType.array.isRequired,
    indexStep: PropType.number.isRequired,
    optionMetodeBayarIndex: PropType.number.isRequired
};

export default DropdownAddMetodePembayaran;