coinforbarter-react-native/dist/components/payment/index.js

CoinForBarter ReactNative Library - Integrate cryptocurrency payments for goods and services in your Mobile App

var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
import React, { useEffect, useCallback, useState } from 'react';
import { PaymentBody } from '../../containers';
import { PaymentStatus } from '../../store/payment/types';
import ProcessingStatus from './payment-status';
import PaymentCurrency from './payment-currency';
import ProcessingPayment from './payment-processing';
import { PaymentErrors } from '../../containers/payment-body/payment-error';
import { useNotification, usePayment, usePreloader } from '../../hooks';
import { coinForBarterRequest } from '../../server';
import { CoinForBarterStatus, MethodTypes } from '../../types';
import { Button } from '../button';
import { Text, View } from 'react-native';
import tw from 'tailwind-react-native-classnames';
const defaultCurrency = {
    currency: '',
    symbol: '',
    abbreviation: '',
    isAvailable: false,
    code: 0,
    networks: [],
    type: '',
};
export const Payment = () => {
    var _a, _b, _c, _d, _e, _f, _g;
    const { state: { payment }, cancelPayment, config, } = usePayment();
    const { setIsLoading } = usePreloader();
    const [currencies, setCurrencies] = useState([]);
    const [currency, setCurrency] = useState(defaultCurrency);
    const [errors, setErrors] = useState({});
    const notification = useNotification();
    const getCurrencies = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
        setIsLoading(true);
        const { status, data } = yield coinForBarterRequest.call('/currencies', MethodTypes.Get);
        if (status === CoinForBarterStatus.Success) {
            setCurrencies(data);
        }
        setIsLoading(false);
    }), [setCurrencies, setIsLoading]);
    useEffect(() => {
        if (payment.baseCurrency) {
            getCurrencies();
        }
    }, [payment, getCurrencies]);
    useEffect(() => {
        setCurrency(currencies.find(item => item.abbreviation === (payment.currency || payment.baseCurrency)) || defaultCurrency);
    }, [currencies, payment]);
    const handleError = (data, statusCode, message) => {
        notification.error(message);
        if (statusCode === 400) {
            setErrors(data.errors);
        }
    };
    const cancel = () => {
        cancelPayment(payment.id, handleError, (config === null || config === void 0 ? void 0 : config.publicKey) || '');
    };
    return (<PaymentBody companyTitle={((_a = payment.branding) === null || _a === void 0 ? void 0 : _a.businessName) || ((_b = payment.branding) === null || _b === void 0 ? void 0 : _b.name)} companyDescription={(_c = payment.branding) === null || _c === void 0 ? void 0 : _c.description} companyLogo={(_e = (_d = payment.branding) === null || _d === void 0 ? void 0 : _d.logo) === null || _e === void 0 ? void 0 : _e.replace('/\\/g', '/')} paymentAmount={!(payment.status === PaymentStatus.Success ||
        payment.status === PaymentStatus.Error ||
        payment.status === PaymentStatus.Cancelled)
        ? payment.amount || payment.baseAmount
        : 0} paymentTitle={''} PaymentDescription={''} currency={currency} supportEmail={(_f = payment.branding) === null || _f === void 0 ? void 0 : _f.supportEmail} supportPhoneNumber={(_g = payment.branding) === null || _g === void 0 ? void 0 : _g.supportPhoneNumber}>
      <>
        {Object.values(errors).length > 0 && <PaymentErrors errors={errors}/>}
        {!(payment.status === PaymentStatus.Success ||
        payment.status === PaymentStatus.Error ||
        payment.status === PaymentStatus.Cancelled) && (<>
            {!payment.isCurrencyLocked && (<PaymentCurrency setErrors={setErrors} handleError={handleError} currencies={currencies}/>)}
            {payment.isCurrencyLocked && (<ProcessingPayment currency={currency}/>)}

            <View style={tw `flex justify-center pt-8`}>
              <Button isRed={true} onClick={() => {
        cancel();
    }}>
                <Text> Cancel Payment </Text>
              </Button>
            </View>
          </>)}

        {(payment.status === PaymentStatus.Success ||
        payment.status === PaymentStatus.Error ||
        payment.status === PaymentStatus.Cancelled) && (<ProcessingStatus status={payment.status} currency={currency} id={payment._id} txRef={payment.sourceDetails.txRef}/>)}
      </>
    </PaymentBody>);
};
export default Payment;