omnipay-savings-sdk
Version:
Omnipay Savings SDK
86 lines (85 loc) • 6.51 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_native_1 = require("react-native");
const Button_1 = require("../Button");
const utils_1 = require("../../utils");
const Text_1 = require("../Text");
const react_native_safe_area_context_1 = require("react-native-safe-area-context");
const info_1 = require("../Common/info");
const modal_1 = require("../Common/modal");
const SDKConfigContext_1 = require("../../contexts/SDKConfigContext");
const actions_1 = require("../../services/actions");
const react_query_1 = require("@tanstack/react-query");
const Breakdown = (props) => {
const { date, interest, balance, header } = props;
return ((0, jsx_runtime_1.jsxs)(Button_1.CustomPressable, Object.assign({ style: [
utils_1.globalStyles.rowBetween,
{
flex: 1,
backgroundColor: utils_1.Colors.tabBg,
paddingHorizontal: (0, utils_1.ms)(10),
paddingVertical: (0, utils_1.ms)(15),
borderRadius: (0, utils_1.ms)(8),
},
] }, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { fontSize: (0, utils_1.fontSz)(14), fontFamily: header ? 'Gordita-Medium' : 'Gordita-Regular', fontWeight: header ? '500' : '400', text: `${date}`, color: utils_1.Colors.dark30, textAlign: 'left', style: { flex: 1, alignSelf: 'center' } }), (0, jsx_runtime_1.jsx)(Text_1.Text, { fontSize: (0, utils_1.fontSz)(14), fontFamily: header ? 'Gordita-Medium' : 'Gordita-Regular', fontWeight: header ? '500' : '400', text: `${interest}`, color: utils_1.Colors.dark30, textAlign: 'left', style: { flex: 1, alignSelf: 'center' } }), (0, jsx_runtime_1.jsx)(Text_1.Text, { fontSize: (0, utils_1.fontSz)(14), fontFamily: header ? 'Gordita-Medium' : 'Gordita-Regular', fontWeight: header ? '500' : '400', text: `${balance}`, color: utils_1.Colors.dark30, textAlign: 'left', style: { flex: 1, alignSelf: 'center' } })] })));
};
const InterestBreakdown = (props) => {
const { visible, onClose, savingsId } = props;
const { bottom } = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
const { apiKey } = (0, SDKConfigContext_1.useSDKConfig)();
const { data: interestData, isLoading, error, refetch, } = (0, react_query_1.useQuery)({
queryKey: ['interestBreakdown', savingsId, apiKey],
queryFn: async () => {
const result = await (0, actions_1.getInterestBreakdownBySavingsId)(savingsId, apiKey);
if (result.error) {
throw new Error(result.message || 'Failed to load interest breakdown');
}
return result.data || [];
},
enabled: visible && !!savingsId && !!apiKey,
staleTime: 5 * 60 * 1000,
gcTime: 10 * 60 * 1000,
retry: 2,
});
const formatDate = (dateString) => {
const date = new Date(dateString);
return date.toLocaleDateString('en-GB', {
day: '2-digit',
month: '2-digit',
year: '2-digit',
});
};
const renderContent = () => ((0, jsx_runtime_1.jsxs)(react_native_1.View, Object.assign({ style: [styles.container, { paddingBottom: (0, utils_1.ms)(bottom) }] }, { children: [(0, jsx_runtime_1.jsx)(info_1.Info, { text: 'Interest will be paid to your savings account at the end of the month', containerStyle: { marginBottom: (0, utils_1.ms)(20) } }), isLoading ? ((0, jsx_runtime_1.jsxs)(react_native_1.View, Object.assign({ style: styles.loadingContainer }, { children: [(0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { size: "large", color: utils_1.Colors.primary }), (0, jsx_runtime_1.jsx)(Text_1.Text, { fontSize: (0, utils_1.fontSz)(14), fontFamily: "Gordita-Regular", text: "Loading interest breakdown...", color: utils_1.Colors.dark30, textAlign: "center", style: { marginTop: (0, utils_1.ms)(10) } })] }))) : error ? ((0, jsx_runtime_1.jsxs)(react_native_1.View, Object.assign({ style: styles.errorContainer }, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { fontSize: (0, utils_1.fontSz)(14), fontFamily: "Gordita-Regular", text: error instanceof Error ? error.message : 'An error occurred while loading interest breakdown', color: utils_1.Colors.error, textAlign: "center" }), (0, jsx_runtime_1.jsx)(Button_1.CustomPressable, Object.assign({ onPress: () => refetch(), style: styles.retryButton }, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { fontSize: (0, utils_1.fontSz)(14), fontFamily: "Gordita-Medium", text: "Retry", color: utils_1.Colors.primary, textAlign: "center" }) }))] }))) : ((0, jsx_runtime_1.jsxs)(react_native_1.View, Object.assign({ style: { rowGap: (0, utils_1.ms)(20) } }, { children: [(0, jsx_runtime_1.jsx)(Breakdown, { date: 'Date', interest: 'Interest', balance: 'Balance', header: true }), interestData && interestData.length > 0 ? (interestData.map((item, index) => ((0, jsx_runtime_1.jsx)(Breakdown, { date: formatDate(item.date), interest: (0, utils_1.formatAsCurrency)(item.interest), balance: (0, utils_1.formatAsCurrency)(item.balance) }, index)))) : ((0, jsx_runtime_1.jsx)(react_native_1.View, Object.assign({ style: styles.emptyContainer }, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { fontSize: (0, utils_1.fontSz)(14), fontFamily: "Gordita-Regular", text: "No pending interest found for this savings account", color: utils_1.Colors.dark30, textAlign: "center" }) })))] })))] })));
return ((0, jsx_runtime_1.jsx)(modal_1.Modal, Object.assign({ visible: visible, title: "Interest Breakdown", onClose: onClose }, { children: renderContent() })));
};
exports.default = InterestBreakdown;
const styles = react_native_1.StyleSheet.create({
container: {
paddingHorizontal: (0, utils_1.ms)(16),
paddingTop: (0, utils_1.ms)(0),
},
loadingContainer: {
alignItems: 'center',
justifyContent: 'center',
paddingVertical: (0, utils_1.ms)(40),
},
errorContainer: {
alignItems: 'center',
justifyContent: 'center',
paddingVertical: (0, utils_1.ms)(40),
},
retryButton: {
marginTop: (0, utils_1.ms)(15),
paddingVertical: (0, utils_1.ms)(10),
paddingHorizontal: (0, utils_1.ms)(20),
borderRadius: (0, utils_1.ms)(8),
borderWidth: 1,
borderColor: utils_1.Colors.primary,
},
emptyContainer: {
alignItems: 'center',
justifyContent: 'center',
paddingVertical: (0, utils_1.ms)(30),
},
});