@fadyshawky/react-native-magic 2.0.4 → 2.0.5

package/template/src/screens/SingleService/Components/FawryInputs.tsx

@@ -0,0 +1,446 @@
+import React, {Dispatch, SetStateAction, useEffect, useState} from 'react';
+import {Image, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
+import {LoadState} from '../../../../types';
+import {FlatListWrapper} from '../../../common/components/FlatListWrapper';
+import {PrimaryTextInput} from '../../../common/components/PrimaryTextInput';
+import {RTLAwareText} from '../../../common/components/RTLAwareText';
+import {RTLAwareView} from '../../../common/components/RTLAwareView';
+import {ImageResources} from '../../../common/ImageResources.g';
+import {useTranslation} from '../../../common/localization/LocalizationProvider';
+import {initFees} from '../../../common/utils/FeesCaalculation';
+import {useInputError} from '../../../common/validations/hooks/useInputError';
+import {useAppSelector} from '../../../core/store/reduxHelpers';
+import {RootState} from '../../../core/store/rootReducer';
+import {
+  BillTypeRefKeyEntity1,
+  PaymentRanges,
+} from '../../../core/store/Services/servicesState';
+import {CommonSizes} from '../../../core/theme/commonSizes';
+import {scaleHeight, scaleWidth} from '../../../core/theme/scaling';
+import {useTheme} from '../../../core/theme/ThemeProvider';
+import {useFeesCalculation} from '../../../utils/feesCalculator';
+
+interface AmountInputProps {
+  currencyCode: string;
+  value: string;
+  setVatValue: Dispatch<SetStateAction<string>>;
+  vatValue: string;
+  setAmount: Dispatch<SetStateAction<string>>;
+  vat_value: number | null;
+  low: string;
+  high: string;
+}
+
+interface PaymentRangeButtonProps {
+  amount: string;
+  isSelected: boolean;
+  onPress: () => void;
+  disabled?: boolean;
+}
+
+interface FawryInputsProps {
+  setFawryInputParameters: Dispatch<SetStateAction<any>>;
+  fawryInputParameters: any;
+  selectedPaymentRange: string;
+  setSelectedPaymentRange: Dispatch<SetStateAction<string>>;
+  quantity: string;
+  setQuantity: Dispatch<SetStateAction<string>>;
+  vatValue: string;
+  setVatValue: Dispatch<SetStateAction<string>>;
+  fees: number;
+}
+
+const AmountInput: React.FC<AmountInputProps> = ({
+  currencyCode,
+  value,
+  setVatValue,
+  vatValue,
+  setAmount,
+  vat_value,
+  low,
+  high,
+}) => {
+  const {theme} = useTheme();
+  const t = useTranslation();
+
+  const {calculateFromAmount, calculateFromVat} = useFeesCalculation(
+    value,
+    vat_value || 0,
+    currencyCode,
+    vatValue,
+    setVatValue,
+    setAmount,
+  );
+
+  const handleAmountChange = (text: string) => {
+    const sanitizedText = text.replace(/[^0-9.]/g, '');
+    setAmount(sanitizedText);
+    calculateFromAmount(sanitizedText);
+  };
+
+  const handleVatValueChange = (text: string) => {
+    const sanitizedText = text.replace(/[^0-9.]/g, '');
+    setVatValue(sanitizedText);
+    calculateFromVat(sanitizedText);
+  };
+
+  return (
+    <RTLAwareView style={styles.amountInputWrapper}>
+      <RTLAwareView
+        style={[
+          styles.amountInputContainer,
+          vat_value ? styles.amountInputContainer : styles.fullWidthInput,
+        ]}>
+        <PrimaryTextInput
+          onChangeText={vat_value ? handleVatValueChange : handleAmountChange}
+          width={vat_value ? '45%' : '100%'}
+          placeholder={t('voucher', 'common')}
+          keyboardType={'numeric'}
+          value={vat_value ? vatValue : value}
+        />
+        {vat_value && (
+          <>
+            <Image source={ImageResources.arrows} style={styles.arrowsImage} />
+            <PrimaryTextInput
+              onChangeText={handleAmountChange}
+              width={vat_value ? '45%' : '100%'}
+              placeholder={t('amountToPay', 'common')}
+              keyboardType={'numeric'}
+              value={value}
+            />
+          </>
+        )}
+      </RTLAwareView>
+      <RTLAwareText style={theme.text.body2}>
+        {`${low} ${currencyCode} - ${high} ${currencyCode}`}
+      </RTLAwareText>
+    </RTLAwareView>
+  );
+};
+
+const PaymentRangeButton: React.FC<PaymentRangeButtonProps> = ({
+  amount,
+  isSelected,
+  onPress,
+  disabled,
+}) => {
+  const {theme} = useTheme();
+  return (
+    <TouchableOpacity
+      disabled={disabled}
+      style={[
+        styles.paymentRangeButton,
+        isSelected && styles.selectedPaymentRangeButton,
+        {borderColor: theme.colors.indigoBlue},
+      ]}
+      onPress={onPress}>
+      <Text style={theme.text.header2}>{amount}</Text>
+    </TouchableOpacity>
+  );
+};
+
+export function FawryInputs({
+  setFawryInputParameters,
+  fawryInputParameters,
+  selectedPaymentRange,
+  setVatValue,
+  vatValue,
+  setSelectedPaymentRange,
+  quantity,
+  setQuantity,
+  fees,
+}: FawryInputsProps): JSX.Element {
+  const [selectedEnum, setEnum] = useState<number | null>(null);
+  const {theme} = useTheme();
+  const t = useTranslation();
+  const {service} = useAppSelector((state: RootState) => state.services);
+
+  const paymentRanges = service?.PaymentRanges as PaymentRanges | null;
+  const hasEnums = service?.BillTypeExtraRefKeys?.BillTypeRefKey?.some(
+    k => k.EnumValues,
+  );
+  const amountInput =
+    !hasEnums &&
+    paymentRanges?.PaymentRangeType?.find(
+      item => item?.Lower?.Amt !== item?.Upper?.Amt,
+    );
+
+  const {calculateFromAmount} = useFeesCalculation(
+    selectedPaymentRange,
+    service?.vat_value || 0,
+    amountInput?.Lower?.CurCode || '',
+    vatValue,
+    setVatValue,
+    setSelectedPaymentRange,
+  );
+
+  useEffect(() => {
+    if (paymentRanges?.PaymentRangeType?.length === 1) {
+      setSelectedPaymentRange(
+        paymentRanges?.PaymentRangeType?.[0]?.Lower?.Amt?.toString() || '',
+      );
+    }
+  }, []);
+
+  const handlePaymentRangeSelect = (amount: string) => {
+    setSelectedPaymentRange(amount);
+    calculateFromAmount(amount);
+  };
+
+  const {error: acctError} = useInputError(
+    fawryInputParameters?.BillingAcct as string,
+    () => '',
+  );
+
+  return (
+    <>
+      {service?.AcctInputMethod !== 'SC' &&
+        service?.AcctInputMethod !== 'PSAG' &&
+        service?.AcctInputMethod !== 'GASSC' &&
+        service?.PmtType !== 'VOCH' && (
+          <PrimaryTextInput
+            regex={
+              service?.BillingActRegEX
+                ? new RegExp(service.BillingActRegEX)
+                : undefined
+            }
+            regexErrorMessage={t('invalidAccountNumber', 'common')}
+            placeholder={service?.BillTypeAcctLabel || ''}
+            value={(fawryInputParameters?.BillingAcct as string) || ''}
+            keyboardType={
+              service?.AcctInputMethod === 'KB' ? 'default' : 'numeric'
+            }
+            onChangeText={text => {
+              setFawryInputParameters({
+                ...fawryInputParameters,
+                BillingAcct: text,
+              });
+            }}
+          />
+        )}
+
+      {amountInput && (
+        <>
+          <AmountInput
+            vat_value={!!service?.vat_value ? service.vat_value : 0}
+            setVatValue={setVatValue}
+            vatValue={vatValue}
+            currencyCode={amountInput?.Lower?.CurCode || ''}
+            value={selectedPaymentRange}
+            setAmount={setSelectedPaymentRange}
+            low={amountInput?.Lower?.Amt?.toString() || ''}
+            high={amountInput?.Upper?.Amt?.toString() || ''}
+          />
+        </>
+      )}
+
+      {service?.PmtType !== 'POST' && fees > 0 && (
+        <RTLAwareText style={[theme.text.body2, styles.serviceCost]}>
+          {`${t('serviceCost', 'pos')}: EGP ${fees}`}
+        </RTLAwareText>
+      )}
+      {service?.BillTypeExtraRefKeys?.BillTypeRefKey?.filter(
+        k => k.InputMethod === 'KP' || k.InputMethod === 'KB',
+      ).map((item, index) => {
+        return item?.EnumValues ? (
+          <FlatListWrapper
+            scrollEnabled={false}
+            numColumns={3}
+            keyExtractor={(_, index) => index.toString()}
+            loadState={LoadState.needLoad}
+            contentContainerStyle={styles.flatListContainer}
+            ItemSeparatorComponent={() => <View style={styles.separator} />}
+            data={item?.EnumValues?.EnumValue}
+            renderItem={({item: ser, index: ind}) => (
+              <TouchableOpacity
+                disabled={selectedEnum !== null && selectedEnum !== ind}
+                style={[
+                  styles.enumButton,
+                  ind === selectedEnum && styles.selectedEnumButton,
+                  {
+                    borderColor: theme.colors.indigoBlue,
+                    marginHorizontal: ind % 2 !== 0 ? scaleWidth(16) : 0,
+                  },
+                ]}
+                onPress={() => {
+                  if (selectedEnum === ind) {
+                    setEnum(null);
+                    if (ser?.Amount) {
+                      handlePaymentRangeSelect(null);
+                    }
+                    setFawryInputParameters({
+                      ...fawryInputParameters,
+                      ExtraBillingAcctKey:
+                        fawryInputParameters.ExtraBillingAcctKey.map(
+                          (k: any) => {
+                            if (k.Key === item.Key) {
+                              return {...k, Value: undefined};
+                            }
+                            return k;
+                          },
+                        ),
+                    });
+                  } else {
+                    setEnum(ind);
+                    if (ser?.Amount) {
+                      handlePaymentRangeSelect(ser.Amount);
+                    }
+                    setFawryInputParameters({
+                      ...fawryInputParameters,
+                      ExtraBillingAcctKey:
+                        fawryInputParameters.ExtraBillingAcctKey.map(
+                          (k: any) => {
+                            if (k.Key === item.Key) {
+                              return {...k, Value: ser?.Value};
+                            }
+                            return k;
+                          },
+                        ),
+                    });
+                  }
+                }}>
+                <Text style={[theme.text.body2, styles.enumButtonText]}>
+                  {ser?.Alias}
+                </Text>
+              </TouchableOpacity>
+            )}
+          />
+        ) : (
+          <PrimaryTextInput
+            regex={
+              (item as BillTypeRefKeyEntity1)?.RegEX
+                ? new RegExp((item as BillTypeRefKeyEntity1).RegEX || '')
+                : undefined
+            }
+            regexErrorMessage={t('invalid_format', 'common')}
+            keyboardType={item?.InputMethod === 'KB' ? 'default' : 'numeric'}
+            placeholder={`${item?.Label} ${
+              item?.Required ? '' : t('optional', 'common')
+            }`}
+            value={
+              fawryInputParameters.ExtraBillingAcctKey?.[index]?.Value as string
+            }
+            onChangeText={text => {
+              const tmp = [...fawryInputParameters.ExtraBillingAcctKey];
+              tmp[index].Value = text;
+              setFawryInputParameters({
+                ...fawryInputParameters,
+                ExtraBillingAcctKey: tmp,
+              });
+            }}
+          />
+        );
+      })}
+
+      {paymentRanges?.PaymentRangeType && (
+        <FlatListWrapper
+          scrollEnabled={false}
+          numColumns={3}
+          keyExtractor={(_, index) => index.toString()}
+          loadState={LoadState.needLoad}
+          contentContainerStyle={styles.flatListContainer}
+          ItemSeparatorComponent={() => <View style={styles.separator} />}
+          data={paymentRanges.PaymentRangeType.filter(
+            item => item?.Lower?.Amt === item?.Upper?.Amt,
+          )}
+          renderItem={({item, index}) => (
+            <PaymentRangeButton
+              amount={item?.Lower?.Amt?.toString() || ''}
+              isSelected={selectedPaymentRange === item?.Lower?.Amt?.toString()}
+              onPress={() => {
+                if (selectedPaymentRange !== item?.Lower?.Amt?.toString()) {
+                  handlePaymentRangeSelect(item?.Lower?.Amt?.toString() || '');
+                } else {
+                  setSelectedPaymentRange('');
+                  setVatValue('');
+                }
+              }}
+              disabled={
+                (amountInput &&
+                  !!selectedPaymentRange &&
+                  selectedPaymentRange !== item?.Lower?.Amt?.toString()) ||
+                (!!selectedPaymentRange &&
+                  selectedPaymentRange !== item?.Lower?.Amt?.toString())
+              }
+            />
+          )}
+        />
+      )}
+      {service?.PmtType === 'VOCH' && (
+        <>
+          <PrimaryTextInput
+            placeholder={t('quantity', 'common')}
+            value={quantity}
+            onChangeText={text => {
+              const maxQuantity = 5; // Default max quantity
+              if (Number(text) <= maxQuantity) {
+                setQuantity(text);
+              }
+            }}
+          />
+          <RTLAwareText style={theme.text.body1}>
+            {`${t('quantity', 'common')}: 1-5`}
+          </RTLAwareText>
+        </>
+      )}
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  amountInputWrapper: {
+    alignItems: 'center',
+    gap: scaleHeight(16),
+  },
+  amountInputContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    width: '100%',
+  },
+  fullWidthInput: {
+    justifyContent: 'center',
+  },
+  arrowsImage: {
+    width: 24,
+    height: 24,
+    resizeMode: 'contain',
+  },
+  serviceCost: {
+    alignSelf: 'center',
+  },
+  flatListContainer: {
+    paddingHorizontal: 0,
+  },
+  separator: {
+    height: scaleHeight(16),
+  },
+  enumButton: {
+    width: scaleWidth(177),
+    height: scaleHeight(180),
+    backgroundColor: 'transparent',
+    borderRadius: CommonSizes.borderRadius.huge,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 0,
+  },
+  selectedEnumButton: {
+    borderWidth: 1,
+  },
+  enumButtonText: {
+    textAlign: 'center',
+  },
+  paymentRangeButton: {
+    width: scaleWidth(177),
+    height: scaleHeight(126),
+    backgroundColor: 'transparent',
+    borderRadius: CommonSizes.borderRadius.huge,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginLeft: scaleWidth(16),
+    borderWidth: 0,
+  },
+  selectedPaymentRangeButton: {
+    borderWidth: 1,
+  },
+});

package/template/src/screens/SingleService/SingleService.tsx

@@ -0,0 +1,229 @@
+import {
+  RouteProp,
+  useIsFocused,
+  useNavigation,
+  useRoute,
+} from '@react-navigation/native';
+import {NativeStackNavigationProp} from '@react-navigation/native-stack';
+import React, {useEffect, useRef} from 'react';
+import {Image, StyleSheet, Text} from 'react-native';
+import {SkypeIndicator} from 'react-native-indicators';
+import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';
+import {ButtonType} from '../../../types';
+import {Container} from '../../common/components/Container';
+import {PrimaryButton} from '../../common/components/PrimaryButton';
+import {ImageResources} from '../../common/ImageResources.g';
+import {useTranslation} from '../../common/localization/LocalizationProvider';
+import {useAppDispatch, useAppSelector} from '../../core/store/reduxHelpers';
+import {RootState} from '../../core/store/rootReducer';
+import {clearService} from '../../core/store/Services/servicesSlice';
+import {CommonSizes} from '../../core/theme/commonSizes';
+import {scaleHeight, scaleWidth} from '../../core/theme/scaling';
+import {useTheme} from '../../core/theme/ThemeProvider';
+import {HeaderBack} from '../../navigation/HeaderComponents';
+import {RootStackParamList} from '../../navigation/types';
+import {FawryInputs} from './Components/FawryInputs';
+import {useServiceData} from './hooks/useServiceData';
+import SunmiPrepaid from '../../modules/SunmiPrepaid';
+
+export function SingleService(): JSX.Element {
+  const {theme} = useTheme();
+  const scroll = useRef<KeyboardAwareScrollView>(null);
+  const navigation =
+    useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+  const {service} = useAppSelector((state: RootState) => state.services);
+  console.log('service: ', service);
+
+  const t = useTranslation();
+
+  const dispatch = useAppDispatch();
+
+  const params =
+    useRoute<RouteProp<RootStackParamList, 'SingleService'>>()?.params;
+
+  const {
+    fawryInputParameters,
+    setFawryInputParameters,
+    fetchData,
+    isLoading,
+    setSelectedPaymentRange,
+    selectedPaymentRange,
+    quantity,
+    setQuantity,
+    vatValue,
+    setVatValue,
+    selectedProvider,
+    handleEnquireService,
+    fees,
+    setCustomProperties,
+  } = useServiceData(params?.serviceID as string);
+
+  const isFocused = useIsFocused();
+
+  const readCardMetadata = async () => {
+    try {
+      const response = await SunmiPrepaid.readCardMetadata(
+        service?.BillTypeExtraRefKeys?.BillTypeRefKey,
+        service?.AcctInputMethod as string,
+      );
+
+      setFawryInputParameters({
+        ...fawryInputParameters,
+        BillingAcct: response.billingAcct,
+        ExtraBillingAcctKey:
+          service?.AcctInputMethod === 'GASSC'
+            ? []
+            : response.extraBillingAcctKey || [],
+      });
+
+      setCustomProperties(response.customProperties);
+    } catch (error) {
+      console.log('error', error);
+    }
+  };
+
+  useEffect(() => {
+    if (isFocused) {
+      fetchData();
+    }
+
+    return () => {
+      setQuantity('1');
+      setSelectedPaymentRange(null);
+      setVatValue('');
+      setFawryInputParameters({
+        BillingAcct: '',
+        ExtraBillingAcctKey:
+          service?.BillTypeExtraRefKeys?.BillTypeRefKey?.map(i => {
+            return {...i, Value: ''};
+          }) || [],
+      });
+    };
+  }, [isFocused]);
+
+  useEffect(() => {
+    if (
+      service?.AcctInputMethod === 'SC' ||
+      service?.AcctInputMethod === 'WSC' ||
+      service?.AcctInputMethod === 'GASSC'
+    ) {
+      console.log('service?.AcctInputMethod', service?.AcctInputMethod);
+      readCardMetadata();
+    }
+  }, [service]);
+
+  return (
+    <Container
+      ref={scroll}
+      testID={'ServiceScreenID'}
+      contentContainerStyle={styles.contentContainer}
+      style={styles.container}
+      backgroundImage={ImageResources[`${theme.mode}_background_1`]}
+      withoutPadding
+      extendedBackground
+      bounces={true}
+      backgroundColor={theme.colors.background}>
+      {isLoading ? (
+        <SkypeIndicator size={80} color={theme.colors.mutedLavender} />
+      ) : (
+        <>
+          <HeaderBack
+            onPress={() => {
+              navigation.goBack();
+              dispatch(clearService());
+            }}
+          />
+          <Text style={{...theme.text.header1, alignSelf: 'center'}}>
+            {service?.Name}
+          </Text>
+          <Image
+            source={{uri: selectedProvider.img_url as string}}
+            style={styles.sectionImage}
+          />
+          {/* <BeeInputs /> */}
+          <FawryInputs
+            setQuantity={setQuantity}
+            quantity={quantity}
+            setFawryInputParameters={setFawryInputParameters}
+            fawryInputParameters={fawryInputParameters}
+            selectedPaymentRange={selectedPaymentRange}
+            setSelectedPaymentRange={setSelectedPaymentRange}
+            vatValue={vatValue}
+            setVatValue={setVatValue}
+            fees={fees}
+          />
+          <PrimaryButton
+            label={t('submit', 'common')}
+            isLoading={isLoading}
+            disabled={
+              isLoading ||
+              (service?.PmtType !== 'POST' && !selectedPaymentRange)
+            }
+            onPressIn={() => {
+              handleEnquireService();
+            }}
+            style={{alignSelf: 'flex-end'}}
+            type={ButtonType.solid}
+          />
+          <PrimaryButton
+            label={t('backToHome', 'common')}
+            onPress={() => {
+              navigation.reset({
+                index: 0,
+                routes: [{name: 'Main'}],
+              });
+            }}
+            style={{alignSelf: 'flex-end'}}
+            type={ButtonType.outlineNegative}
+          />
+        </>
+      )}
+    </Container>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexGrow: 1,
+    paddingBottom: scaleHeight(130),
+    borderTopRightRadius: CommonSizes.spacing.large,
+    borderTopLeftRadius: CommonSizes.spacing.large,
+    paddingHorizontal: CommonSizes.spacing.large,
+    gap: CommonSizes.spacing.extraLarge,
+    justifyContent: 'flex-start',
+  },
+  contentContainer: {
+    flexGrow: 1,
+  },
+  formContainer: {
+    alignItems: 'center',
+    paddingHorizontal: CommonSizes.spacing.large,
+    gap: CommonSizes.spacing.large,
+  },
+  balanceSection: {
+    alignItems: 'center',
+    justifyContent: 'space-evenly',
+    gap: CommonSizes.spacing.large,
+  },
+  seeMoreSection: {
+    alignItems: 'center',
+    gap: CommonSizes.spacing.large,
+    alignSelf: 'center',
+  },
+  sectionImage: {
+    width: scaleWidth(150),
+    height: scaleHeight(150),
+    alignSelf: 'center',
+    resizeMode: 'contain',
+  },
+  amountText: {
+    textAlign: 'left',
+  },
+  balanceCard: {
+    width: '100%',
+    flexDirection: 'row',
+    justifyContent: 'space-evenly',
+    paddingVertical: CommonSizes.spacing.large,
+    borderRadius: CommonSizes.spacing.huge,
+  },
+});