boxpay-checkout-reactnative-sdk
Version:
Boxpay Payment Gateway
253 lines (250 loc) • 7.47 kB
JavaScript
"use strict";
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.js";
import callUIAnalytics from "../postRequest/callUIAnalytics.js";
import { AnalyticsEvents } from "../interface.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const PaymentSuccess = ({
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 = {
'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 /*#__PURE__*/_jsx(View, {
children: /*#__PURE__*/_jsx(Modal, {
isVisible: true,
style: styles.modal,
children: /*#__PURE__*/_jsxs(View, {
style: styles.sheet,
children: [/*#__PURE__*/_jsx(LottieView, {
source: require('../../assets/animations/payment_successful.json'),
autoPlay: true,
loop: false,
speed: 0.6,
style: {
width: 90,
height: 90,
alignSelf: 'center'
}
}), /*#__PURE__*/_jsx(Text, {
style: styles.successfulHeading,
children: "Payment Successful!"
}), /*#__PURE__*/_jsxs(View, {
style: {
flexDirection: 'row',
justifyContent: 'space-between',
paddingTop: 24
},
children: [/*#__PURE__*/_jsx(Text, {
style: {
fontSize: 14,
color: '#000000',
fontFamily: 'Poppins-Regular'
},
children: "Transaction ID"
}), /*#__PURE__*/_jsx(Text, {
style: {
fontSize: 14,
color: '#000000',
fontFamily: 'Poppins-SemiBold'
},
children: transactionId
})]
}), /*#__PURE__*/_jsxs(View, {
style: {
flexDirection: 'row',
justifyContent: 'space-between',
paddingTop: 14
},
children: [/*#__PURE__*/_jsx(Text, {
style: {
fontSize: 14,
color: '#000000',
fontFamily: 'Poppins-Regular'
},
children: "Date"
}), /*#__PURE__*/_jsx(Text, {
style: {
fontSize: 14,
color: '#000000',
fontFamily: 'Poppins-SemiBold'
},
children: date
})]
}), /*#__PURE__*/_jsxs(View, {
style: {
flexDirection: 'row',
justifyContent: 'space-between',
paddingTop: 14
},
children: [/*#__PURE__*/_jsx(Text, {
style: {
fontSize: 14,
color: '#000000',
fontFamily: 'Poppins-Regular'
},
children: "Time"
}), /*#__PURE__*/_jsx(Text, {
style: {
fontSize: 14,
color: '#000000',
fontFamily: 'Poppins-SemiBold'
},
children: time
})]
}), /*#__PURE__*/_jsx(View, {
style: styles.dashedLine
}), /*#__PURE__*/_jsxs(View, {
style: {
flexDirection: 'row',
justifyContent: 'space-between',
paddingTop: 10
},
children: [/*#__PURE__*/_jsx(Text, {
style: {
fontSize: 14,
color: '#000000',
fontFamily: 'Poppins-SemiBold'
},
children: "Total Amount"
}), /*#__PURE__*/_jsxs(Text, {
style: {
fontSize: 18,
color: '#000000',
fontFamily: 'Poppins-SemiBold'
},
children: [/*#__PURE__*/_jsx(Text, {
style: {
fontSize: 16,
color: '#000000',
fontFamily: 'Inter-SemiBold'
},
children: checkoutDetails.currencySymbol
}), checkoutDetails.amount]
})]
}), /*#__PURE__*/_jsx(View, {
style: styles.dashedLine
}), /*#__PURE__*/_jsx(Pressable, {
style: [styles.buttonContainer, {
backgroundColor: checkoutDetails.brandColor
}],
onPress: () => {
callUIAnalytics(AnalyticsEvents.PAYMENT_RESULT_SCREEN_DISPLAYED, "Success Screen button clicked", "");
onClick();
},
children: /*#__PURE__*/_jsx(Text, {
style: styles.buttonText,
children: "Done"
})
})]
})
})
});
};
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
}
});
//# sourceMappingURL=paymentSuccess.js.map