mhamdani049

Components / DropdownAddMetodePembayaran.js

Jun 16th, 2021
546
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { useEffect, useState, useRef } from 'react';
  2. import { useSelector, useDispatch } from 'react-redux';
  3. import {
  4.     Dimensions,
  5.     Image,
  6.     ScrollView,
  7.     StyleSheet,
  8.     TouchableOpacity,
  9.     View
  10. } from 'react-native';
  11. import PropType from 'prop-types';
  12. import ButtonSticky from './ButtonSticky';
  13. import TextfieldLine from './TextfieldLine';
  14. import TextNunito from './internal/TextNunito';
  15. import BottomSheet, { BottomSheetBody, BottomSheetHeader } from './internal/BottomSheet';
  16. import { colors, images } from '../resources';
  17. import stylesheet from '../resources/Stylesheet';
  18. import {
  19.     getGroupText,
  20.     getOnlyNumber,
  21.     sprintf
  22. } from '../utils/Functions';
  23. import { postValidasiMetodePembayaran } from '../actions/metodePembayaran';
  24. import lang from '../lang';
  25.  
  26. const styles = StyleSheet.create({
  27.     sheetContainer: {
  28.         height: Dimensions.get('window').height * (14 / 15),
  29.         width: Dimensions.get('window').width,
  30.         backgroundColor: colors.WHITE,
  31.         borderTopRightRadius: 12,
  32.         borderTopLeftRadius: 12,
  33.         position: 'absolute',
  34.         bottom: 0
  35.     },
  36.     title: {
  37.         flexDirection: 'row',
  38.         padding: 16,
  39.         justifyContent: 'space-between',
  40.         borderBottomWidth: 1,
  41.         borderBottomColor: colors.BLACK20
  42.     },
  43.     shadow: {
  44.         backgroundColor: colors.WHITE,
  45.         borderBottomWidth: 1,
  46.         borderBottomColor: colors.BLACK20
  47.     },
  48.     container: {
  49.         flexDirection: 'row',
  50.         borderRadius: 6,
  51.         alignItems: 'center'
  52.     },
  53.     icon: {
  54.         height: 36,
  55.         width: 60,
  56.         resizeMode: 'cover',
  57.         marginRight: 12
  58.     },
  59.     text: {
  60.         fontSize: 16,
  61.         flex: 1
  62.     }
  63. });
  64.  
  65. const DropdownAddMetodePembayaran = ({
  66.     isVisible,
  67.     onPress,
  68.     onAdd,
  69.     data,
  70.     indexStep,
  71.     optionMetodeBayarIndex
  72. }) => {
  73.     const dispatch = useDispatch();
  74.     const bp = useRef();
  75.     const userInfo = useSelector((state) => state.userInfo);
  76.     const [submitted, setSubmitted] = useState(false);
  77.     const [handphone, setHandphone] = useState(userInfo?.noTelepon);
  78.     const [errHandphone, setErrHandphone] = useState('');
  79.  
  80.     useEffect(() => {
  81.         if (isVisible) bp.current.toggleVisible();
  82.     }, [isVisible]);
  83.  
  84.     const submit = () => {
  85.         if (submitted) return;
  86.  
  87.         const params = {
  88.             handphone
  89.         };
  90.  
  91.         dispatch(postValidasiMetodePembayaran(params)).then(() => {
  92.             setSubmitted(false);
  93.         }).catch((error) => {
  94.             const handphone = error.data.filter((val) => (val.field === 'handphone'));
  95.             setErrHandphone(handphone.length !== 0 ? handphone[0].message : '');
  96.         });
  97.     };
  98.  
  99.     const closeBottomSheet = () => {
  100.         onPress();
  101.         bp.current.toggleVisible();
  102.     };
  103.  
  104.     const getTitleMetodePembayaran = () => {
  105.         if (data.length > 0 && data[optionMetodeBayarIndex]) return data[optionMetodeBayarIndex].name;
  106.         return '';
  107.     };
  108.  
  109.     const renderContentHubungkanForm = () => (
  110.         <View style={stylesheet.MT24}>
  111.             <View style={stylesheet.MB24}>
  112.                 <TextfieldLine
  113.                     title={lang.nomorHandphone}
  114.                     errorMessage={errHandphone}
  115.                     value={getGroupText(handphone)}
  116.                     onChangeText={(value) => setHandphone(getOnlyNumber(value))}
  117.                     keyboardType="phone-pad"
  118.                 />
  119.                 <TextNunito fontSize={12} color={colors.BLACK60} style={stylesheet.MT8}>
  120.                     {sprintf(
  121.                         lang.nomorYangTerdaftarPadaAkunX,
  122.                         getTitleMetodePembayaran()
  123.                     )}
  124.                 </TextNunito>
  125.             </View>
  126.         </View>
  127.     );
  128.  
  129.     const renderContentHubungkanIntro = () => (
  130.         <ScrollView>
  131.             <View style={[stylesheet.F1, stylesheet.P16]}>
  132.                 <View style={stylesheet.FDRow}>
  133.                     <Image
  134.                         source={images.notFound}
  135.                         style={stylesheet.F1AR21}
  136.                         resizeMode="contain"
  137.                     />
  138.                 </View>
  139.                 <TextNunito
  140.                     type="bold"
  141.                     style={[stylesheet.CBLACK80FS20LH30, stylesheet.MT16]}
  142.                 >
  143.                     {lang.konfirmasiNomorHandphone}
  144.                 </TextNunito>
  145.                 <TextNunito style={[stylesheet.CBLACK60FS16LH24, stylesheet.MT8]}>
  146.                     {sprintf(
  147.                         lang.otpAkanDikirimUntukMelakukanVerifikasiPadaAkunX,
  148.                         getTitleMetodePembayaran()
  149.                     )}
  150.                 </TextNunito>
  151.                 {renderContentHubungkanForm()}
  152.             </View>
  153.         </ScrollView>
  154.     );
  155.  
  156.     const renderContentHubungkan = () => (
  157.         <View style={stylesheet.F1}>
  158.             {renderContentHubungkanIntro()}
  159.             <ButtonSticky
  160.                 buttonText={sprintf(
  161.                     lang.hubungkanX,
  162.                     getTitleMetodePembayaran()
  163.                 )}
  164.                 onPressed={() => submit()}
  165.             />
  166.         </View>
  167.     );
  168.  
  169.     const renderPilihMetodePembayaran = () => data.map((account, index) => (
  170.         <TouchableOpacity
  171.             activeOpacity={0.8}
  172.             key={account.id}
  173.             onPress={() => (!account.selected ? onAdd(index) : null)}
  174.         >
  175.             <View
  176.                 style={[
  177.                     stylesheet.MH16,
  178.                     stylesheet.P12,
  179.                     styles.container,
  180.                     styles.shadow
  181.                 ]}
  182.             >
  183.                 <Image source={account.icon} style={styles.icon} />
  184.                 <TextNunito style={styles.text}>
  185.                     {account.name}
  186.                 </TextNunito>
  187.                 {account.selected && (
  188.                 <Image
  189.                     source={images.greenCheck}
  190.                     style={stylesheet.H24W24RMCONTAIN}
  191.                 />
  192.                 )}
  193.             </View>
  194.         </TouchableOpacity>
  195.     ));
  196.  
  197.     const renderContent = () => {
  198.         if (indexStep === 0) return renderPilihMetodePembayaran();
  199.         return renderContentHubungkan();
  200.     };
  201.  
  202.     const renderTitle = () => {
  203.         if (indexStep === 0) return lang.pilihMetodeBayar;
  204.         return sprintf(lang.hubungkanX, getTitleMetodePembayaran());
  205.     };
  206.  
  207.     return (
  208.         <BottomSheet
  209.             ref={(ref) => { bp.current = ref; }}
  210.             type="fluid"
  211.         >
  212.             <View style={stylesheet.containerBottomSheet}>
  213.                 <BottomSheetHeader onPress={closeBottomSheet}>
  214.                     {renderTitle()}
  215.                 </BottomSheetHeader>
  216.                 <BottomSheetBody>
  217.                     {renderContent()}
  218.                 </BottomSheetBody>
  219.             </View>
  220.         </BottomSheet>
  221.     );
  222. };
  223.  
  224. DropdownAddMetodePembayaran.propTypes = {
  225.     isVisible: PropType.bool.isRequired,
  226.     onPress: PropType.func.isRequired,
  227.     onAdd: PropType.func.isRequired,
  228.     data: PropType.array.isRequired,
  229.     indexStep: PropType.number.isRequired,
  230.     optionMetodeBayarIndex: PropType.number.isRequired
  231. };
  232.  
  233. export default DropdownAddMetodePembayaran;
  234.  
RAW Paste Data