@os1-platform/dispatch-mobile 2.1.21 → 2.1.23

package/src/components/executiontasks/collectPayment/components/PaymentContactDetails.tsx

@@ -0,0 +1,790 @@
+import React, { useEffect, useState, useLayoutEffect, useContext } from 'react';
+import { BackHandler, FlatList, Platform, StyleSheet, Text, View } from 'react-native';
+import {
+  // PAYMENT_SHARED_PREF_KEY,
+  getPaymentDataMO,
+  getPaymentType,
+  removeSharedPrefPaymentData,
+} from '../PaymentUtils';
+import {
+  getBaseETResponse,
+  maskContact,
+} from '../../../../utils/ExecTaskUtils';
+import {
+  EntityCode,
+  ExecutionTaskID,
+} from '../../../../models/execTasks/ETConfig';
+import { getEventCodeByET } from '../../../../manager/dispatchCodes/EventCodeContainer';
+import {
+  CommonStyles,
+  Fonts,
+} from '../../../../styles/executionTasks/CommonStyles';
+import { Button, Provider, RadioButton, TextInput } from 'react-native-paper';
+import Icon from 'react-native-vector-icons/MaterialIcons';
+import {
+  EMAIL_REGEX,
+  PAYMENT_NOTIFICATION,
+} from '../../../../constants/constants';
+import EventListener from '../../../../events';
+import {
+  CollectPaymentInput,
+  PAYMENT_SCREEN,
+  PaymentStatusResponse,
+  ProcessPaymentInput,
+  STATUS,
+  SUB_STATUS,
+  TRANSACTION_TYPE,
+  notificationPaymentStatus,
+  sharedPrefPaymentDataInterface,
+} from '../CollectPaymentSchema';
+import { useFocusEffect } from '@react-navigation/native';
+import { RouteParams } from '../../../../ui/uiConfig/RouteParams';
+import { DispatchExecutor as dispatchExecutor } from '@os1-platform/platform-coreos-execution-engine-sdk';
+import callbackHandler from '../../../../manager/sdk/callbacksHandler';
+import ModalWidget from '../../../../components/widgets/ModalWidget';
+import Storage from '../../../../utils/storage';
+import { PaymentContext } from '../../../../utils/context/paymentContext';
+import { ENDPOINTS } from '../../../../constants/apiConstants';
+import { PROGRESS_GROUP } from '../../../../utils/Constants';
+import Logger, { LOG_TYPE } from '../../../../utils/Logger';
+
+interface manualContacts {
+  title: string;
+  type: 'EMAIL' | 'PHONE';
+}
+
+let storage = Storage.getInstance();
+
+const PaymentContactDetails = (
+  props: CollectPaymentInput & ProcessPaymentInput
+) => {
+  const paymentConfigContext = useContext(PaymentContext);
+  const [selectedContact, setSelectedContact] = useState<string>('');
+  const [displayContactModal, setDisplayContactModal] =
+    useState<boolean>(false);
+  const [manualContactDetails, setManualContactDetails] =
+    useState<manualContacts>();
+  const [displayError, setErrorDisplay] = useState(false);
+  const [manualContact, setManualContact] = useState('');
+  const [contactList, setContactList] = useState<string[]>([]);
+
+  const paymentRefId =
+    props.route.params[RouteParams.ROOT_META_DATA].paymentConfig?.paymentRefId;
+
+  useEffect(() => {
+    (async () => {
+      if (props.route.params[RouteParams.ROOT_META_DATA]) {
+        //Call objectiveDetails fn and fetch sds ids
+        let progressGroup = null;
+        try {
+          progressGroup = await Storage.getInstance().getSharedItem(
+            PROGRESS_GROUP,
+            false
+          );
+        } catch (error: any) {
+          Logger.getInstance().logEvent('~ getPaymentStatus triggered ', JSON.stringify(error?.response?.data || error), LOG_TYPE.SDK_ERROR);
+          progressGroup = null;
+        }
+        const { contact } = await dispatchExecutor.getObjectiveTaskDetails(
+          props.mergedObjectiveId[0],
+          progressGroup,
+          props.route.params[RouteParams.ROOT_META_DATA].statusFilter
+        );
+
+        // run callback to get corresponding phone numbers
+        const phoneNumbers = await callbackHandler.getPhoneNumbers(contact);
+
+        if (phoneNumbers && phoneNumbers.value?.length) {
+          setContactList(phoneNumbers.value);
+        }
+      }
+    })();
+
+    EventListener.on(
+      PAYMENT_NOTIFICATION,
+      async (data: notificationPaymentStatus) => {
+        console.log("PaymentCollectDetail:",JSON.stringify(data));
+
+        let sharedPrefPaymentData: sharedPrefPaymentDataInterface | null = null;
+        if (
+          data &&
+          (data.status === STATUS.SUCCESS || data.status === STATUS.FAILED)
+        ) {
+          sharedPrefPaymentData = await getPaymentDataMO(
+            props.mergedObjectiveId,
+            data.refId,
+            storage
+          );
+        }
+        if (sharedPrefPaymentData && data && data.status === STATUS.SUCCESS) {
+          props.next({
+            paymentMode:
+              sharedPrefPaymentData?.paymentMode || props.paymentMode,
+            collectedAmount: {
+              value:
+                sharedPrefPaymentData?.amount.value || props.expectedAmount,
+              currencyCode:
+                sharedPrefPaymentData?.amount.currencyCode ||
+                paymentConfigContext?.sdkConfig?.etConfig?.currencyCode ||
+                '',
+            },
+            refId: data.refId,
+            screen: PAYMENT_SCREEN.COMPLETE,
+            sourceScreen: PAYMENT_SCREEN.CONTACTS,
+            ...(await getBaseETResponse(
+              EntityCode.COLLECT_PAYMENT_ET,
+              true,
+              getEventCodeByET(
+                ExecutionTaskID.COLLECT_PAYMENT_ET,
+                true,
+                props.applicableReasons?.success
+              ),
+              '',
+              props.mergedObjectiveId,
+              ExecutionTaskID.COLLECT_PAYMENT_ET
+            )),
+          });
+        } else if (
+          sharedPrefPaymentData &&
+          data &&
+          data.status === STATUS.FAILED
+        ) {
+          /* const _sharedPrefPaymentData = JSON.parse(
+            JSON.stringify(sharedPrefPaymentData)
+          ); */
+          /* await storage.removeSharedItems(
+            props.mergedObjectiveId.map((_id) => PAYMENT_SHARED_PREF_KEY + _id)
+          ); */
+          await removeSharedPrefPaymentData(data.refId, storage);
+        }
+      }
+    );
+
+    return () => EventListener.remove(PAYMENT_NOTIFICATION);
+  }, []);
+
+  const handleOnCancelClick = async () => {
+    props.onSubmitET({
+      paymentMode: props.paymentMode,
+      refId: paymentRefId,
+      ...(await getBaseETResponse(
+        EntityCode.COLLECT_PAYMENT_ET,
+        false,
+        getEventCodeByET(
+          ExecutionTaskID.COLLECT_PAYMENT_ET,
+          false,
+          props.applicableReasons?.failure
+        ),
+        '',
+        props.mergedObjectiveId,
+        ExecutionTaskID.COLLECT_PAYMENT_ET
+      )),
+      collectedAmount: {
+        value: props.expectedAmount,
+        currencyCode:
+          paymentConfigContext?.sdkConfig?.etConfig?.currencyCode || '',
+      },
+    });
+  };
+
+  const getPaymentStatus = async (isProceed: boolean | null) => {
+    try {
+      let sharedPrefPaymentData: sharedPrefPaymentDataInterface | null = null;
+      const paymentResp =
+        await paymentConfigContext?.networkInstance.requestGet(
+          ENDPOINTS.PAYMENT_STATUS + paymentRefId,
+          {
+            requestId: 'payment:' + paymentRefId,
+          },
+          {
+            appAbbr: paymentConfigContext.sdkConfig.etConfig.appAbbr,
+            latest: true,
+          }
+        );
+      // const paymentResp = {
+      //   data: {
+      //     data: {
+      //       meta: { totalCount: 1 },
+      //       transactions: [
+      //         {
+      //           refId: paymentRefId,
+      //           status: STATUS.FAILED,
+      //           subStatus: SUB_STATUS.completed,
+      //           money: {
+      //             amount: 1000,
+      //             currency: 'INR',
+      //           },
+      //           txnId: '123',
+      //           txnType: TRANSACTION_TYPE.LINK,
+      //           appAbbr: 'testApp31',
+      //         },
+      //       ],
+      //     },
+      //   },
+      // };
+      const _ps: PaymentStatusResponse = paymentResp?.data;
+      console.log('Contact getPaymentStatus _ps: ', JSON.stringify(_ps));
+
+      sharedPrefPaymentData = await getPaymentDataMO(
+        props.mergedObjectiveId,
+        paymentRefId,
+        storage
+      );
+      if (
+        _ps?.data.transactions?.length &&
+        (sharedPrefPaymentData ||
+          getPaymentType(_ps?.data.transactions[0].txnType)) &&
+        _ps.data.meta?.totalCount &&
+        _ps?.data.transactions[0].status === STATUS.SUCCESS
+      ) {
+        props.next({
+          paymentMode:
+            sharedPrefPaymentData?.paymentMode ||
+            getPaymentType(_ps?.data.transactions[0].txnType) ||
+            props.paymentMode,
+          collectedAmount: {
+            value:
+              sharedPrefPaymentData?.amount.value ||
+              _ps?.data.transactions[0].money.amount ||
+              props.expectedAmount,
+            currencyCode:
+              sharedPrefPaymentData?.amount.currencyCode ||
+              _ps?.data.transactions[0].money.currency ||
+              paymentConfigContext?.sdkConfig?.etConfig?.currencyCode ||
+              '',
+          },
+          refId: _ps.data.transactions[0].refId,
+          screen: PAYMENT_SCREEN.COMPLETE,
+          sourceScreen: PAYMENT_SCREEN.CONTACTS,
+          ...(await getBaseETResponse(
+            EntityCode.COLLECT_PAYMENT_ET,
+            true,
+            getEventCodeByET(
+              ExecutionTaskID.COLLECT_PAYMENT_ET,
+              true,
+              props.applicableReasons?.success
+            ),
+            '',
+            props.mergedObjectiveId,
+            ExecutionTaskID.COLLECT_PAYMENT_ET
+          )),
+        });
+        return;
+      } else if (
+        sharedPrefPaymentData &&
+        _ps.data.meta?.totalCount &&
+        _ps?.data.transactions?.length &&
+        _ps?.data.transactions[0].status === STATUS.FAILED
+      ) {
+        await removeSharedPrefPaymentData(paymentRefId, storage);
+      }
+
+      if (isProceed) await sendPaymentLink(selectedContact);
+      else if (isProceed === false) await handleOnCancelClick();
+    } catch (err: any) {
+      Logger.getInstance().logEvent('~ getPaymentStatus triggered ', JSON.stringify(err?.response?.data || err), LOG_TYPE.SDK_ERROR);
+      console.error('STATUS: ', err?.response?.data || err.message);
+    }
+  };
+
+  // Handle back-button click
+  useFocusEffect(
+    React.useCallback(() => {
+      const onBackPress = () => {
+        (async () =>
+          props.next({
+            paymentMode: props.paymentMode,
+            refId: paymentRefId,
+            ...(await getBaseETResponse(
+              EntityCode.COLLECT_PAYMENT_ET,
+              true,
+              getEventCodeByET(
+                ExecutionTaskID.COLLECT_PAYMENT_ET,
+                true,
+                props.applicableReasons?.success
+              ),
+              '',
+              props.mergedObjectiveId,
+              ExecutionTaskID.COLLECT_PAYMENT_ET
+            )),
+            screen: PAYMENT_SCREEN.INIT,
+            sourceScreen: PAYMENT_SCREEN.CONTACTS,
+            collectedAmount: {
+              value: props.expectedAmount,
+              currencyCode:
+                paymentConfigContext?.sdkConfig?.etConfig?.currencyCode || '',
+            },
+          }))();
+        return true;
+      };
+      BackHandler.addEventListener('hardwareBackPress', onBackPress);
+      return () =>
+        BackHandler.removeEventListener('hardwareBackPress', onBackPress);
+    }, [])
+  );
+
+  useLayoutEffect(() => {
+    props.navigation.setOptions({
+      headerShown: true,
+      title: 'Payment Link',
+      headerLeft: () => {
+        return (
+          <Icon
+            onPress={async () => {
+              props.next({
+                paymentMode: props.paymentMode,
+                refId: paymentRefId,
+                ...(await getBaseETResponse(
+                  EntityCode.COLLECT_PAYMENT_ET,
+                  true,
+                  getEventCodeByET(
+                    ExecutionTaskID.COLLECT_PAYMENT_ET,
+                    true,
+                    props.applicableReasons?.success
+                  ),
+                  '',
+                  props.mergedObjectiveId,
+                  ExecutionTaskID.COLLECT_PAYMENT_ET
+                )),
+                screen: PAYMENT_SCREEN.INIT,
+                sourceScreen: PAYMENT_SCREEN.CONTACTS,
+                collectedAmount: {
+                  value: props.expectedAmount,
+                  currencyCode:
+                    paymentConfigContext?.sdkConfig?.etConfig?.currencyCode ||
+                    '',
+                },
+              });
+            }}
+            name="arrow-back"
+            color={'black'}
+            size={25}
+            style={{
+              paddingRight: 15,
+              paddingTop: 5,
+            }}
+          />
+        );
+      },
+    });
+  }, [props.navigation, props.title]);
+
+  const renderItem = ({ item }: { item: string }) => {
+    return (
+      <View style={styles.reasonItemStyle}>
+        <RadioButton
+          color={'#5B80F7'}
+          value={item}
+          status={selectedContact === item ? 'checked' : 'unchecked'}
+          onPress={() => {
+            setSelectedContact(item);
+          }}
+        />
+        <Text
+          style={[styles.reasonTextStyle, { fontWeight: 'bold' }]}
+          onPress={() => {
+            setSelectedContact(item);
+          }}
+        >
+          {maskContact(item)}
+        </Text>
+      </View>
+    );
+  };
+
+  const inputValidation = (data: string, _regex: string) => {
+    if (_regex) {
+      const regex = new RegExp(_regex);
+      return regex.test(data);
+    }
+    return false;
+  };
+
+  const sendPaymentLink = async (contactDetails: string) => {
+    props.next({
+      paymentMode: props.paymentMode,
+      refId: paymentRefId,
+      ...(await getBaseETResponse(
+        EntityCode.COLLECT_PAYMENT_ET,
+        true,
+        getEventCodeByET(
+          ExecutionTaskID.COLLECT_PAYMENT_ET,
+          true,
+          props.applicableReasons?.success
+        ),
+        '',
+        props.mergedObjectiveId,
+        ExecutionTaskID.COLLECT_PAYMENT_ET
+      )),
+      screen: PAYMENT_SCREEN.PROCESS,
+      sourceScreen: PAYMENT_SCREEN.CONTACTS,
+      collectedAmount: {
+        value: props.expectedAmount,
+        currencyCode:
+          paymentConfigContext?.sdkConfig?.etConfig?.currencyCode || '',
+      },
+      contactDetails,
+    });
+  };
+
+  const onModalSubmit = () => {
+    const regex =
+      manualContactDetails?.type === 'PHONE'
+        ? paymentConfigContext?.sdkConfig?.etConfig?.mobilePhoneRegex || ''
+        : EMAIL_REGEX;
+
+    if (inputValidation(manualContact, regex)) {
+      setErrorDisplay(false);
+      (async () => {
+        const contact =
+          manualContactDetails?.type === 'PHONE'
+            ? paymentConfigContext?.sdkConfig?.etConfig?.phoneCode +
+              manualContact
+            : manualContact;
+
+        await sendPaymentLink(contact);
+      })();
+    } else {
+      setErrorDisplay(true);
+    }
+  };
+
+  const renderManualContactsModal = () => {
+    return (
+      <ModalWidget
+        title={{ label: manualContactDetails?.title || '' }}
+        contentContainerStyle={{ marginBottom: 120 }}
+        showModal={displayContactModal}
+        renderChildren={() =>
+          manualContactDetails?.type === 'PHONE' ? (
+            <View style={{ marginVertical: 10 }}>
+              <View>
+                <Text style={[styles.inputLabel, { marginBottom: 8 }]}>
+                  Phone Number
+                </Text>
+              </View>
+              <View
+                style={[
+                  {
+                    justifyContent: 'flex-start',
+                    display: 'flex',
+                    flexDirection: 'row',
+                  },
+                ]}
+              >
+                {paymentConfigContext?.sdkConfig?.etConfig?.phoneCode ? (
+                  <TextInput
+                    style={[
+                      styles.input,
+                      { borderTopEndRadius: 0, borderBottomEndRadius: 0 },
+                      displayError
+                        ? {
+                            borderColor: 'red',
+                          }
+                        : {},
+                    ]}
+                    disabled={true}
+                    value={
+                      '(' +
+                      paymentConfigContext?.sdkConfig?.etConfig?.phoneCode +
+                      ')'
+                    }
+                  />
+                ) : null}
+                <TextInput
+                  style={[
+                    styles.input,
+                    {
+                      flexGrow: 1,
+                      flex: 1,
+                    },
+                    paymentConfigContext?.sdkConfig?.etConfig?.phoneCode
+                      ? {
+                          borderLeftWidth: 0,
+                          borderTopStartRadius: 0,
+                          borderBottomStartRadius: 0,
+                        }
+                      : {},
+                    displayError
+                      ? {
+                          borderColor: 'red',
+                        }
+                      : {},
+                  ]}
+                  autoFocus={true}
+                  placeholder="Add Phone Number"
+                  onChangeText={setManualContact}
+                  activeUnderlineColor="transparent"
+                />
+              </View>
+              {displayError ? (
+                <Text style={{ color: 'red' }}>Enter valid phone number.</Text>
+              ) : null}
+            </View>
+          ) : (
+            <View style={{ marginVertical: 10 }}>
+              <View>
+                <Text style={[styles.inputLabel, { marginBottom: 8 }]}>
+                  Email Address
+                </Text>
+              </View>
+              <View>
+                <TextInput
+                  style={[
+                    styles.input,
+                    displayError
+                      ? {
+                          borderColor: 'red',
+                        }
+                      : {},
+                  ]}
+                  autoFocus={true}
+                  placeholder="Add Email Address"
+                  onChangeText={setManualContact}
+                  activeUnderlineColor={'transparent'}
+                />
+              </View>
+              {displayError ? (
+                <Text style={{ color: 'red' }}>Enter valid email address.</Text>
+              ) : null}
+            </View>
+          )
+        }
+        primaryButton={{
+          label: 'Send Payment Link',
+          onPress: () => {
+            onModalSubmit();
+          },
+          labelStyles: {
+            ...CommonStyles.nextButtonLabel,
+          },
+          styles: {
+            ...CommonStyles.nextButton,
+            padding: 8,
+            borderRadius: 5,
+            marginVertical: 10,
+            marginTop: 15,
+          },
+        }}
+        secondaryButton={{
+          label: 'Cancel',
+          onPress: () => {
+            setErrorDisplay(false);
+            setDisplayContactModal(false);
+          },
+          labelStyles: {
+            ...CommonStyles.cancelButtonLabel,
+          },
+          styles: {
+            ...CommonStyles.cancelButton,
+            padding: 8,
+            borderRadius: 5,
+          },
+        }}
+      />
+    );
+  };
+
+  return (
+    <Provider>
+      {renderManualContactsModal()}
+      <View style={CommonStyles.mainContainer}>
+        <Text style={[styles.title, { paddingBottom: 0 }]}>
+          Select or add contact details to send the payment link
+        </Text>
+        {contactList.length ? (
+          <View style={{ marginBottom: 16, maxHeight: 500 }}>
+            <FlatList
+              data={contactList}
+              renderItem={renderItem}
+              keyExtractor={(item) => item}
+            />
+          </View>
+        ) : null}
+        {props.onsiteLinkSharing?.length ? (
+          <View
+            style={[
+              {
+                backgroundColor: 'white',
+                padding: 16,
+                flexDirection: 'row',
+                justifyContent: 'space-evenly',
+              },
+              props.onsiteLinkSharing.includes('Email') &&
+              props.onsiteLinkSharing.includes('Phone Number')
+                ? {}
+                : { justifyContent: 'flex-start', paddingStart: 55 },
+            ]}
+          >
+            {props.onsiteLinkSharing.includes('Email') ? (
+              <View>
+                <Text
+                  style={[styles.link]}
+                  onPress={() => {
+                    setDisplayContactModal(true);
+                    setManualContactDetails({
+                      title: 'Add Email Address',
+                      type: 'EMAIL',
+                    });
+                  }}
+                >
+                  Add Email Address
+                </Text>
+              </View>
+            ) : null}
+            {props.onsiteLinkSharing.includes('Email') &&
+            props.onsiteLinkSharing.includes('Phone Number') ? (
+              <View style={{ borderLeftWidth: 1, borderColor: '#cccccc' }} />
+            ) : null}
+            {props.onsiteLinkSharing.includes('Phone Number') ? (
+              <View>
+                <Text
+                  style={[styles.link]}
+                  onPress={() => {
+                    setDisplayContactModal(true);
+                    setManualContactDetails({
+                      title: 'Add Phone Number',
+                      type: 'PHONE',
+                    });
+                  }}
+                >
+                  Add Phone Number
+                </Text>
+              </View>
+            ) : null}
+          </View>
+        ) : null}
+        <View style={styles.btnContainer}>
+          <View style={styles.buttonParentContainer}>
+            <Button
+              style={[
+                CommonStyles.cancelButton,
+                {
+                  marginEnd: 5,
+                  flex: 1,
+                },
+              ]}
+              labelStyle={{
+                ...CommonStyles.cancelButtonLabel,
+                color: '#5B80F7',
+                textTransform: 'capitalize',
+              }}
+              mode={'outlined'}
+              onPress={async () => {
+                await getPaymentStatus(false);
+              }}
+            >
+              Cancel
+            </Button>
+            <Button
+              style={[
+                CommonStyles.nextButton,
+                {
+                  flex: 1,
+                  marginStart: 5,
+                },
+                !selectedContact
+                  ? {
+                      backgroundColor: '#E0E3EB',
+                    }
+                  : {},
+              ]}
+              labelStyle={[
+                CommonStyles.nextButtonLabel,
+                { textTransform: 'capitalize' },
+                !selectedContact ? { color: '#A3AAC2' } : {},
+              ]}
+              disabled={!selectedContact}
+              mode={'contained'}
+              onPress={async () => {
+                await getPaymentStatus(true);
+              }}
+            >
+              Send Payment Link
+            </Button>
+          </View>
+        </View>
+      </View>
+    </Provider>
+  );
+};
+
+export default PaymentContactDetails;
+
+const styles = StyleSheet.create({
+  title: {
+    fontFamily: Platform.OS === 'android'
+    ? Fonts.IBMPlexSans_400Regular
+    : 'IBMPlexSans-Regular',
+    fontWeight: '400',
+    fontSize: 16,
+    lineHeight: 24,
+    color: '#3D445C',
+    margin: 20,
+  },
+  reasonItemStyle: {
+    flexDirection: 'row',
+    paddingVertical: 5,
+    paddingStart: 20,
+    paddingEnd: 20,
+    backgroundColor: 'white',
+    marginBottom: 5,
+  },
+  reasonTextStyle: {
+    flex: 1,
+    flexWrap: 'wrap',
+    fontFamily: Platform.OS === 'android'
+    ? Fonts.IBMPlexSans_400Regular
+    : 'IBMPlexSans-Regular',
+    fontStyle: 'normal',
+    fontSize: 14,
+    lineHeight: 21,
+    letterSpacing: 0.25,
+    textAlign: 'justify',
+    color: '#111111',
+    paddingTop: 5,
+  },
+  link: {
+    color: '#5B80F7',
+    fontSize: 14,
+    fontWeight: '500',
+    lineHeight: 20,
+  },
+  inputLabel: {
+    fontSize: 14,
+    lineHeight: 20,
+    fontWeight: '500',
+    fontFamily: Platform.OS === 'android'
+    ? Fonts.IBMPlexSans_500Medium
+    : 'IBMPlexSans-Medium',
+    color: '#3D445C',
+  },
+  input: {
+    // flex: 1,
+    fontSize: 14,
+    lineHeight: 24,
+    fontFamily: Platform.OS === 'android'
+    ? Fonts.IBMPlexSans_400Regular
+    : 'IBMPlexSans-Regular',
+    borderColor: '#E0E3EB',
+    borderWidth: 1,
+    height: 22,
+    borderRadius: 6,
+    paddingHorizontal: 13,
+    paddingVertical: 9,
+    backgroundColor: '#ffffff',
+  },
+  buttonParentContainer: {
+    flexDirection: 'row',
+    padding: 10,
+    paddingTop: 16,
+    backgroundColor: 'white',
+    borderTopWidth: 1,
+    borderTopColor: '#eeeeee',
+  },
+  btnContainer: {
+    justifyContent: 'flex-end',
+    marginBottom: 10,
+    flexGrow: 1,
+  },
+});