boxpay-checkout-reactnative-sdk/lib/module/components/paymentSelector.js

Boxpay Payment Gateway

"use strict";

import { View, Text, Pressable, StyleSheet, Image } from 'react-native';
import { useState } from 'react';
import { RadioButton } from 'react-native-paper';
import { checkoutDetailsHandler } from "../sharedContext/checkoutDetailsHandler.js";
import { SvgUri } from 'react-native-svg';
import ShimmerPlaceHolder from 'react-native-shimmer-placeholder';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const PaymentSelectorView = ({
  providerList,
  onProceedForward,
  isLastUsed,
  errorImage,
  onClickRadio
}) => {
  const {
    checkoutDetails
  } = checkoutDetailsHandler;
  return /*#__PURE__*/_jsx(View, {
    children: providerList.map((provider, index) => /*#__PURE__*/_jsxs(View, {
      children: [/*#__PURE__*/_jsx(PaymentSelector, {
        id: provider.id,
        title: provider.displayValue,
        image: provider.iconUrl,
        errorImage: errorImage,
        isSelected: provider.isSelected,
        instrumentTypeValue: provider.instrumentTypeValue,
        isLastUsed: isLastUsed && provider.isLastUsed,
        onPress: onClickRadio,
        onProceedForward: (displayValue, instrumentValue) => {
          onProceedForward(displayValue, instrumentValue, provider.type);
        },
        brandColor: checkoutDetails.brandColor || '#1CA672',
        currencySymbol: checkoutDetails.currencySymbol || '₹',
        amount: checkoutDetails.amount
      }), index !== providerList.length - 1 && /*#__PURE__*/_jsx(View, {
        style: {
          flexDirection: 'row',
          height: 1,
          backgroundColor: '#ECECED'
        }
      })]
    }, provider.id))
  });
};
const PaymentSelector = ({
  id,
  title,
  image,
  errorImage,
  isSelected,
  instrumentTypeValue,
  isLastUsed,
  onPress,
  onProceedForward,
  brandColor,
  currencySymbol,
  amount
}) => {
  const [error, setImageError] = useState(false);
  const [load, setLoad] = useState(true);
  return /*#__PURE__*/_jsxs(View, {
    style: {
      paddingVertical: 16,
      paddingHorizontal: 12,
      backgroundColor: isSelected ? '#EDF8F4' : 'white',
      borderRadius: isSelected ? 0 : 12
    },
    children: [/*#__PURE__*/_jsxs(View, {
      style: {
        flexDirection: 'row',
        alignItems: 'center'
      },
      children: [/*#__PURE__*/_jsxs(View, {
        style: {
          width: 32,
          height: 32,
          justifyContent: 'center',
          alignItems: 'center'
        },
        children: [load && !error && /*#__PURE__*/_jsx(ShimmerPlaceHolder, {
          visible: false // Keep shimmer until loading is done
          ,
          style: {
            width: 32,
            height: 32,
            borderRadius: 8
          }
        }), !error ? /*#__PURE__*/_jsx(SvgUri, {
          uri: image,
          width: "100%" // Keep original size
          ,
          height: "100%",
          style: {
            transform: [{
              scale: 1
            }]
          },
          onLoad: () => setLoad(false),
          onError: () => {
            setImageError(true);
            setLoad(false);
          }
        }) : /*#__PURE__*/_jsx(Image, {
          source: errorImage,
          style: {
            transform: [{
              scale: 0.4
            }]
          }
        })]
      }), /*#__PURE__*/_jsxs(View, {
        style: {
          paddingStart: 12,
          flex: 1
        },
        children: [/*#__PURE__*/_jsx(Text, {
          style: {
            fontFamily: 'Poppins-SemiBold',
            fontSize: 14,
            color: '#4F4D55'
          },
          onPress: () => onPress(id),
          numberOfLines: 1,
          ellipsizeMode: "tail",
          children: title
        }), isLastUsed && /*#__PURE__*/_jsx(View, {
          style: styles.tag,
          children: /*#__PURE__*/_jsx(Text, {
            style: styles.tagText,
            children: "Last Used"
          })
        })]
      }), /*#__PURE__*/_jsx(RadioButton, {
        value: id,
        status: isSelected ? 'checked' : 'unchecked',
        onPress: () => onPress(id),
        color: brandColor,
        uncheckedColor: '#01010273'
      })]
    }), isSelected && /*#__PURE__*/_jsx(Pressable, {
      style: [styles.buttonContainer, {
        backgroundColor: brandColor
      }],
      onPress: () => {
        onProceedForward(title, instrumentTypeValue);
      },
      children: /*#__PURE__*/_jsxs(Text, {
        style: styles.buttonText,
        children: ["Proceed to Pay", ' ', /*#__PURE__*/_jsxs(Text, {
          style: {
            fontFamily: 'Inter-SemiBold',
            fontSize: 16,
            color: 'white'
          },
          children: [' ', currencySymbol]
        }), amount]
      })
    })]
  });
};
export default PaymentSelectorView;
const styles = StyleSheet.create({
  buttonContainer: {
    flexDirection: 'row',
    borderRadius: 8,
    justifyContent: 'center',
    marginTop: 10,
    paddingVertical: 12
  },
  buttonText: {
    color: 'white',
    fontSize: 16,
    fontFamily: 'Poppins-SemiBold'
  },
  tag: {
    borderColor: '#1CA672',
    borderRadius: 6,
    backgroundColor: '#1CA67214',
    borderWidth: 0.5,
    paddingHorizontal: 4,
    marginTop: 4,
    alignSelf: 'flex-start'
  },
  tagText: {
    fontSize: 10,
    fontFamily: 'Poppins-Medium',
    color: '#1CA672'
  }
});
//# sourceMappingURL=paymentSelector.js.map