boxpay-checkout-reactnative-sdk 1.0.0-beta03

package/src/components/paymentFailed.tsx

@@ -0,0 +1,97 @@
+import { View, Text, StyleSheet, Pressable } from 'react-native';
+import React from 'react';
+import Modal from 'react-native-modal';
+import LottieView from 'lottie-react-native';
+import { checkoutDetailsHandler } from '../sharedContext/checkoutDetailsHandler';
+import callUIAnalytics from '../postRequest/callUIAnalytics';
+import { AnalyticsEvents } from '../interface';
+
+interface PaymentFailedProps {
+  onClick: () => void;
+  errorMessage: string;
+}
+const PaymentFailed: React.FC<PaymentFailedProps> = ({
+  onClick,
+  errorMessage,
+}) => {
+  const { checkoutDetails } = checkoutDetailsHandler;
+  return (
+    <View>
+      <Modal isVisible={true} style={styles.modal}>
+        <View style={styles.sheet}>
+          <LottieView
+            source={require('../../assets/animations/payment_failed.json')}
+            autoPlay
+            loop={false}
+            style={{ width: 90, height: 90, alignSelf: 'center' }}
+          />
+          <Text style={styles.successfulHeading}>Payment Failed</Text>
+          <Text
+            style={{
+              fontSize: 14,
+              fontFamily: 'Poppins-Regular',
+              color: '#000000D9',
+              textAlign: 'center',
+              alignSelf: 'center',
+              paddingTop: 8,
+              paddingBottom: 16,
+              lineHeight: 20,
+            }}
+          >
+            {errorMessage}
+          </Text>
+          <Pressable
+            style={[
+              styles.buttonContainer,
+              { backgroundColor: checkoutDetails.brandColor },
+            ]}
+            onPress={()=> {
+              callUIAnalytics(AnalyticsEvents.PAYMENT_RESULT_SCREEN_DISPLAYED, "Payment Failed Screen button clicked", errorMessage)
+              onClick()
+            }}
+          >
+            <Text style={styles.buttonText}>Retry Payment</Text>
+          </Pressable>
+          {/* <Pressable style={[styles.buttonContainer, {backgroundColor:'white', borderColor:'#1CA672', borderWidth:1}]} onPress={onClick}>
+                        <Text style={[styles.buttonText, {color:'#1CA672'}]}>Return to Payment Options</Text>
+                    </Pressable> */}
+        </View>
+      </Modal>
+    </View>
+  );
+};
+
+export default PaymentFailed;
+
+const styles = StyleSheet.create({
+  modal: {
+    justifyContent: 'flex-end',
+    margin: 0,
+  },
+  sheet: {
+    backgroundColor: 'white',
+    padding: 20,
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+  },
+  successfulHeading: {
+    color: '#E84142',
+    fontSize: 20,
+    alignSelf: 'center',
+    paddingTop: 8,
+    fontFamily: 'Poppins-SemiBold',
+  },
+  buttonContainer: {
+    flexDirection: 'row',
+    borderRadius: 8,
+    justifyContent: 'center',
+    marginTop: 12,
+    backgroundColor: '#1CA672',
+  },
+  buttonText: {
+    color: 'white',
+    fontSize: 16,
+    paddingVertical: 12,
+    fontFamily: 'Poppins-SemiBold',
+  },
+});

package/src/components/paymentSelector.tsx

@@ -0,0 +1,224 @@
+import { View, Text, Pressable, StyleSheet, Image } from 'react-native';
+import type { ImageSourcePropType } from 'react-native';
+import { useState } from 'react';
+import { RadioButton } from 'react-native-paper';
+import { checkoutDetailsHandler } from '../sharedContext/checkoutDetailsHandler';
+import { SvgUri } from 'react-native-svg';
+import ShimmerPlaceHolder from 'react-native-shimmer-placeholder';
+import type { PaymentClass } from '../interface';
+
+interface PaymentSelectorViewProps {
+  providerList: PaymentClass[];
+  onProceedForward: (
+    instrumentType: string,
+    instrumentValue: string,
+    type: string
+  ) => void;
+  isLastUsed?: boolean | null;
+  errorImage: ImageSourcePropType;
+  onClickRadio: (selctedInstrumentValue: string) => void;
+}
+
+const PaymentSelectorView = ({
+  providerList,
+  onProceedForward,
+  isLastUsed,
+  errorImage,
+  onClickRadio,
+}: PaymentSelectorViewProps) => {
+  const { checkoutDetails } = checkoutDetailsHandler;
+
+  return (
+    <View>
+      {providerList.map((provider, index) => (
+        <View key={provider.id}>
+          <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 && (
+            <View
+              style={{
+                flexDirection: 'row',
+                height: 1,
+                backgroundColor: '#ECECED',
+              }}
+            />
+          )}
+        </View>
+      ))}
+    </View>
+  );
+};
+
+interface PaymentSelectorProps {
+  id: string;
+  title: string;
+  image: string;
+  errorImage: ImageSourcePropType;
+  isSelected: boolean | null;
+  instrumentTypeValue: string;
+  isLastUsed?: boolean | null;
+  onPress: (id: string) => void;
+  onProceedForward: (instrumentType: string, instrumentValue: string) => void;
+  brandColor: string;
+  currencySymbol: string;
+  amount: string;
+}
+
+const PaymentSelector = ({
+  id,
+  title,
+  image,
+  errorImage,
+  isSelected,
+  instrumentTypeValue,
+  isLastUsed,
+  onPress,
+  onProceedForward,
+  brandColor,
+  currencySymbol,
+  amount,
+}: PaymentSelectorProps) => {
+  const [error, setImageError] = useState(false);
+  const [load, setLoad] = useState(true);
+  return (
+    <View
+      style={{
+        paddingVertical: 16,
+        paddingHorizontal: 12,
+        backgroundColor: isSelected ? '#EDF8F4' : 'white',
+        borderRadius: isSelected ? 0 : 12,
+      }}
+    >
+      <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+        <View
+          style={{
+            width: 32,
+            height: 32,
+            justifyContent: 'center',
+            alignItems: 'center',
+          }}
+        >
+          {load && !error && (
+            <ShimmerPlaceHolder
+              visible={false} // Keep shimmer until loading is done
+              style={{ width: 32, height: 32, borderRadius: 8 }}
+            />
+          )}
+          {!error ? (
+            <SvgUri
+              uri={image}
+              width="100%" // Keep original size
+              height="100%"
+              style={{ transform: [{ scale: 1 }] }}
+              onLoad={() => setLoad(false)}
+              onError={() => {
+                setImageError(true);
+                setLoad(false);
+              }}
+            />
+          ) : (
+            <Image
+              source={errorImage}
+              style={{ transform: [{ scale: 0.4 }] }}
+            />
+          )}
+        </View>
+
+        <View style={{ paddingStart: 12, flex: 1 }}>
+          <Text
+            style={{
+              fontFamily: 'Poppins-SemiBold',
+              fontSize: 14,
+              color: '#4F4D55',
+            }}
+            onPress={() => onPress(id)}
+            numberOfLines={1}
+            ellipsizeMode="tail"
+          >
+            {title}
+          </Text>
+          {isLastUsed && (
+            <View style={styles.tag}>
+              <Text style={styles.tagText}>Last Used</Text>
+            </View>
+          )}
+        </View>
+        <RadioButton
+          value={id}
+          status={isSelected ? 'checked' : 'unchecked'}
+          onPress={() => onPress(id)}
+          color={brandColor}
+          uncheckedColor={'#01010273'}
+        />
+      </View>
+      {isSelected && (
+        <Pressable
+          style={[styles.buttonContainer, { backgroundColor: brandColor }]}
+          onPress={() => {
+            onProceedForward(title, instrumentTypeValue);
+          }}
+        >
+          <Text style={styles.buttonText}>
+            Proceed to Pay{' '}
+            <Text
+              style={{
+                fontFamily: 'Inter-SemiBold',
+                fontSize: 16,
+                color: 'white',
+              }}
+            >
+              {' '}
+              {currencySymbol}
+            </Text>
+            {amount}
+          </Text>
+        </Pressable>
+      )}
+    </View>
+  );
+};
+
+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',
+  },
+});

package/src/components/paymentSuccess.tsx

@@ -0,0 +1,280 @@
+import { View, Text, StyleSheet, Pressable } from 'react-native';
+import React, { useEffect, useState } from 'react';
+import Modal from 'react-native-modal';
+import LottieView from 'lottie-react-native';
+import { checkoutDetailsHandler } from '../sharedContext/checkoutDetailsHandler';
+import callUIAnalytics from '../postRequest/callUIAnalytics';
+import { AnalyticsEvents } from '../interface';
+
+interface PaymentSuccessProps {
+  onClick: () => void;
+  transactionId: string;
+  method: string;
+  localDateTime: string;
+}
+
+const PaymentSuccess: React.FC<PaymentSuccessProps> = ({
+  onClick,
+  transactionId,
+  localDateTime,
+}) => {
+  const { checkoutDetails } = checkoutDetailsHandler;
+  const [date, setDate] = useState('');
+  const [time, setTime] = useState('');
+  useEffect(() => {
+    const formatTransactionTimestamp = () => {
+      const parts = localDateTime.split(' ');
+      const localDate = parts[0] || '';
+      const localTime = parts[1] || '';
+
+      const dateParts = localDate.split('/');
+      const day = dateParts[0] || '';
+      const month = dateParts[1] || '';
+      const year = dateParts[2] || '';
+
+      const timeParts = localTime.split(':');
+      const hour = timeParts[0] || '0';
+      const minute = timeParts[1] || '0';
+
+      // Map month number to short month name
+      const monthNames: { [key: string]: string } = {
+        '01': 'Jan',
+        '02': 'Feb',
+        '03': 'Mar',
+        '04': 'Apr',
+        '05': 'May',
+        '06': 'Jun',
+        '07': 'Jul',
+        '08': 'Aug',
+        '09': 'Sep',
+        '10': 'Oct',
+        '11': 'Nov',
+        '12': 'Dec',
+      };
+
+      const formattedDate = `${monthNames[month] || 'Jan'} ${day}, ${year}`; // e.g., "Feb 25, 2025"
+
+      // Convert 24-hour to 12-hour format
+      const hourInt = parseInt(hour, 10);
+      const amPm = hourInt >= 12 ? 'PM' : 'AM';
+      const formattedHour = (hourInt % 12 || 12).toString().padStart(2, '0'); // Convert "13" to "1"
+      const formattedTime = `${formattedHour}:${minute} ${amPm}`;
+
+      setDate(formattedDate);
+      setTime(formattedTime);
+    };
+    
+    if(!checkoutDetails.isSuccessScreenVisible) {
+      callUIAnalytics(AnalyticsEvents.PAYMENT_RESULT_SCREEN_DISPLAYED, "Success Screen skipped because merchant does not require", "")
+      onClick()
+    }
+    formatTransactionTimestamp();
+  });
+  return (
+    <View>
+      <Modal isVisible={true} style={styles.modal}>
+        <View style={styles.sheet}>
+          <LottieView
+            source={require('../../assets/animations/payment_successful.json')}
+            autoPlay
+            loop={false}
+            speed={0.6}
+            style={{ width: 90, height: 90, alignSelf: 'center' }}
+          />
+          <Text style={styles.successfulHeading}>Payment Successful!</Text>
+          <View
+            style={{
+              flexDirection: 'row',
+              justifyContent: 'space-between',
+              paddingTop: 24,
+            }}
+          >
+            <Text
+              style={{
+                fontSize: 14,
+                color: '#000000',
+                fontFamily: 'Poppins-Regular',
+              }}
+            >
+              Transaction ID
+            </Text>
+            <Text
+              style={{
+                fontSize: 14,
+                color: '#000000',
+                fontFamily: 'Poppins-SemiBold',
+              }}
+            >
+              {transactionId}
+            </Text>
+          </View>
+          <View
+            style={{
+              flexDirection: 'row',
+              justifyContent: 'space-between',
+              paddingTop: 14,
+            }}
+          >
+            <Text
+              style={{
+                fontSize: 14,
+                color: '#000000',
+                fontFamily: 'Poppins-Regular',
+              }}
+            >
+              Date
+            </Text>
+            <Text
+              style={{
+                fontSize: 14,
+                color: '#000000',
+                fontFamily: 'Poppins-SemiBold',
+              }}
+            >
+              {date}
+            </Text>
+          </View>
+          <View
+            style={{
+              flexDirection: 'row',
+              justifyContent: 'space-between',
+              paddingTop: 14,
+            }}
+          >
+            <Text
+              style={{
+                fontSize: 14,
+                color: '#000000',
+                fontFamily: 'Poppins-Regular',
+              }}
+            >
+              Time
+            </Text>
+            <Text
+              style={{
+                fontSize: 14,
+                color: '#000000',
+                fontFamily: 'Poppins-SemiBold',
+              }}
+            >
+              {time}
+            </Text>
+          </View>
+          {/* <View style={{ flexDirection: 'row', justifyContent: 'space-between', paddingTop: 14 }}>
+                        <Text style={{ fontSize: 14, color: '#000000', fontFamily: 'Poppins-Regular' }}>Payment Method</Text>
+                        <Text style={{ fontSize: 14, color: '#000000', fontFamily: 'Poppins-SemiBold' }}>{method}</Text>
+                    </View> */}
+          <View style={styles.dashedLine} />
+          <View
+            style={{
+              flexDirection: 'row',
+              justifyContent: 'space-between',
+              paddingTop: 10,
+            }}
+          >
+            <Text
+              style={{
+                fontSize: 14,
+                color: '#000000',
+                fontFamily: 'Poppins-SemiBold',
+              }}
+            >
+              Total Amount
+            </Text>
+            <Text
+              style={{
+                fontSize: 18,
+                color: '#000000',
+                fontFamily: 'Poppins-SemiBold',
+              }}
+            >
+              <Text
+                style={{
+                  fontSize: 16,
+                  color: '#000000',
+                  fontFamily: 'Inter-SemiBold',
+                }}
+              >
+                {checkoutDetails.currencySymbol}
+              </Text>
+              {checkoutDetails.amount}
+            </Text>
+          </View>
+          <View style={styles.dashedLine} />
+          {/* <Text
+                        style={{
+                            fontSize: 12, fontFamily: 'Poppins-Regular',
+                            color: '#4F4D55', alignSelf: 'center', paddingBottom: 16, paddingTop: 12
+                        }}
+                    >You will be redirected to the merchant's page</Text> */}
+          <Pressable
+            style={[
+              styles.buttonContainer,
+              { backgroundColor: checkoutDetails.brandColor },
+            ]}
+            onPress={() => {
+              callUIAnalytics(AnalyticsEvents.PAYMENT_RESULT_SCREEN_DISPLAYED, "Success Screen button clicked", "")
+              onClick()
+            }}
+          >
+            <Text style={styles.buttonText}>Done</Text>
+          </Pressable>
+        </View>
+      </Modal>
+    </View>
+  );
+};
+
+export default PaymentSuccess;
+
+const styles = StyleSheet.create({
+  openButton: {
+    fontSize: 18,
+    color: 'blue',
+    fontFamily: 'Poppins-Bold',
+  },
+  modal: {
+    justifyContent: 'flex-end',
+    margin: 0,
+  },
+  sheet: {
+    backgroundColor: 'white',
+    padding: 20,
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+  },
+  closeButton: {
+    marginTop: 10,
+    fontSize: 16,
+    color: 'red',
+    fontFamily: 'Poppins-Regular',
+  },
+  successfulHeading: {
+    color: '#019939',
+    fontSize: 20,
+    alignSelf: 'center',
+    paddingTop: 8,
+    fontFamily: 'Poppins-SemiBold',
+  },
+  buttonContainer: {
+    flexDirection: 'row',
+    borderRadius: 8,
+    justifyContent: 'center',
+    marginTop: 12,
+    backgroundColor: '#1CA672',
+    paddingVertical: 14,
+  },
+  buttonText: {
+    color: 'white',
+    fontSize: 16,
+    fontFamily: 'Poppins-SemiBold',
+  },
+  dashedLine: {
+    borderBottomWidth: 2, // Thickness of the line
+    borderBottomColor: '#E6E6E6', // Color of the line
+    borderStyle: 'dashed', // Makes it dashed
+    width: '100%', // Full width
+    marginVertical: 10, // Some spacing
+    marginTop: 16,
+  },
+});