coinforbarter-react-native/dist/coinforbarter-button.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, { useState, useEffect, useCallback } from 'react';
import { Image, Modal, Text, TouchableOpacity, View } from 'react-native';
import { CoinForBarterStatus, MethodTypes, } from './types';
import { coinForBarterStyle } from './style';
import { coinForBarterRequest } from './server';
import { ErrorProvider, ModalProvider, NotificationProvider, PaymentProvider, PreloaderProvider, } from './store';
import { useErrorBoundary, usePayment, usePreloader } from './hooks';
import { Payment } from './components';
export const CoinForBarterButton = ({ config, text, component, }) => {
    const [isPaying, setIsPaying] = useState(false);
    const pay = () => {
        setIsPaying(true);
    };
    return (<>
      {isPaying && (<Modal animationType="slide" visible={true} onRequestClose={() => {
        setIsPaying(false);
    }}>
          <ModalProvider closeModal={() => {
        setIsPaying(false);
    }}>
            <PreloaderProvider>
              <NotificationProvider>
                <ErrorProvider>
                  <PaymentProvider config={Object.assign({}, config)}>
                    <CoinForBarterCheckout config={Object.assign({}, config)}/>
                  </PaymentProvider>
                </ErrorProvider>
              </NotificationProvider>
            </PreloaderProvider>
          </ModalProvider>
        </Modal>)}
      <TouchableOpacity onPress={pay}>
        {component && component()}
        {!component && (<View style={coinForBarterStyle.Button}>
            {!text && (<Image source={require('./logo.png')} style={coinForBarterStyle.Image}/>)}
            <Text style={coinForBarterStyle.ButtonText}>
              {text ? text : 'Pay with CoinForBarter'}
            </Text>
          </View>)}
      </TouchableOpacity>
    </>);
};
const CoinForBarterCheckout = ({ config }) => {
    const { findPayment } = usePayment();
    const { setIsLoading } = usePreloader();
    const { setError } = useErrorBoundary();
    const startPayment = useCallback((body) => __awaiter(void 0, void 0, void 0, function* () {
        setIsLoading(true);
        const { data, status, message, statusCode } = yield coinForBarterRequest.call('/payments/checkout', MethodTypes.Post, body);
        if (status !== CoinForBarterStatus.Success) {
            setError({
                message,
                data,
                statusCode,
            });
        }
        else {
            findPayment(data.payment.id, config.publicKey);
        }
        setIsLoading(false);
    }), [setIsLoading, findPayment, config.publicKey, setError]);
    const initializePayment = useCallback(() => {
        const { publicKey, txRef, amount, currency, customer, customerPhoneNumber, customerFullName, customizations, } = config;
        const body = {
            publicKey,
            txRef,
            amount,
            currency,
            customer,
            customerPhoneNumber,
            customerFullName,
            customizations,
        };
        startPayment(body);
    }, [config, startPayment]);
    useEffect(() => {
        initializePayment();
    }, [initializePayment]);
    return <Payment />;
};