omnipay-savings-sdk
Version:
Omnipay Savings SDK
235 lines (234 loc) • 14.7 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const react_native_1 = require("react-native");
const react_query_1 = require("@tanstack/react-query");
const utils_1 = require("../utils");
const Header_1 = __importDefault(require("../components/Header"));
const Text_1 = require("../components/Text");
const poweredBy_1 = require("../components/Common/poweredBy");
const SmartImage_1 = require("../components/Images/SmartImage");
const homeNavigationCard_1 = require("../components/Common/homeNavigationCard");
const SDKConfigContext_1 = require("../contexts/SDKConfigContext");
const actions_1 = require("../services/actions");
const SavingsCategory_1 = require("../components/SavingsCategory");
const TransactionsList_1 = __importDefault(require("../components/TransactionsList"));
const ExistingSavings = ({ params, navigate, goBack, isInitialScreen, }) => {
const listRef = (0, react_1.useRef)(null);
const [tabRoute, setTabRoute] = (0, react_1.useState)(0);
const { apiKey, primaryColor } = (0, SDKConfigContext_1.useSDKConfig)();
// Query for savings categories (for navigation cards)
const { data: categoriesData, isLoading: categoriesLoading } = (0, react_query_1.useQuery)({
queryKey: ['allSavingsCategories', apiKey],
queryFn: () => (0, actions_1.getAllSavingsCategories)(apiKey),
retry: 2,
});
// Query for user's savings accounts (for accounts list)
const { data: savingsData, isLoading: savingsLoading } = (0, react_query_1.useQuery)({
queryKey: ['savingsListByCustomerId', apiKey],
queryFn: () => (0, actions_1.getSavingsListByCustomerId)(apiKey),
retry: 2,
});
// Query for total account transactions (for total savings amount)
const { data: totalData, isLoading: totalLoading } = (0, react_query_1.useQuery)({
queryKey: ['totalAccountTransactionsByCustomerId', apiKey],
queryFn: () => (0, actions_1.getTotalAccountTransactionsByCustomerId)(apiKey),
retry: 2,
});
// Combined loading state
const isLoading = categoriesLoading || savingsLoading || totalLoading;
// Filter savings data based on selected tab
const filteredSavingsData = (0, react_1.useMemo)(() => {
if (!Array.isArray(savingsData)) {
return [];
}
switch (tabRoute) {
case 0: // All
return savingsData;
case 1: // Flexible
return savingsData.filter((item) => {
var _a, _b;
return ((_a = item.categoryName) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes('flexible')) ||
((_b = item.categoryName) === null || _b === void 0 ? void 0 : _b.toLowerCase().includes('flexi'));
});
case 2: // Locked
return savingsData.filter((item) => {
var _a, _b;
return ((_a = item.categoryName) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes('locked')) ||
((_b = item.categoryName) === null || _b === void 0 ? void 0 : _b.toLowerCase().includes('lock'));
});
default:
return savingsData;
}
}, [savingsData, tabRoute]);
const getWalletBalanceLoader = () => {
const totalAmount = (totalData === null || totalData === void 0 ? void 0 : totalData.totalAmountInSavingsAccount) || 0;
return ((0, jsx_runtime_1.jsx)(react_native_1.View, Object.assign({ style: utils_1.globalStyles.rowCenter }, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { style: {
color: utils_1.Colors.payLaterHeaderText,
}, fontWeight: "500", fontFamily: 'Gordita-Medium', textAlign: 'center', fontSize: (0, utils_1.fontSz)(25), text: `${(0, utils_1.formatAsCurrency)(Number(totalAmount))}` }) })));
};
const displayWalletCard = () => {
return ((0, jsx_runtime_1.jsxs)(react_native_1.View, Object.assign({ style: Object.assign({ width: '100%', alignItems: 'center', position: 'relative', marginTop: (0, utils_1.ms)(15), marginVertical: (0, utils_1.ms)(10), borderRadius: (0, utils_1.ms)(10) }, (utils_1.isTablet
? {
minHeight: 220,
backgroundColor: primaryColor,
}
: {})) }, { children: [(0, jsx_runtime_1.jsx)(SmartImage_1.SmartImage, { style: [styles.walletCardImage], source: utils_1.Images.walletCard }), (0, jsx_runtime_1.jsxs)(react_native_1.View, Object.assign({ style: styles.walletCardOverlay }, { children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: [utils_1.globalStyles.rowEnd, {}] }), (0, jsx_runtime_1.jsxs)(react_native_1.View, Object.assign({ style: [
utils_1.globalStyles.colCenter,
{
flex: 2,
alignSelf: 'center',
justifyContent: 'center',
rowGap: (0, utils_1.ms)(5),
marginBottom: (0, utils_1.ms)(12.0),
},
] }, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { style: {
color: utils_1.Colors.payLaterHeaderText,
}, fontWeight: "400", textAlign: 'center', fontSize: (0, utils_1.fontSz)(17), text: 'Total Balance' }), getWalletBalanceLoader()] }))] }))] })));
};
const displayCardNavigationRoutes = () => {
return ((0, jsx_runtime_1.jsxs)(react_native_1.View, Object.assign({ style: [
utils_1.globalStyles.rowBetween,
{
flexWrap: 'wrap',
paddingBottom: (0, utils_1.ms)(2),
},
] }, { children: [(0, jsx_runtime_1.jsx)(homeNavigationCard_1.HomeNavigationCard, { icon: (0, jsx_runtime_1.jsx)(SmartImage_1.SmartImage, { source: utils_1.Images.add, style: {
width: (0, utils_1.ms)(35),
height: (0, utils_1.ms)(35),
tintColor: utils_1.Colors.chooseAccountTypeText,
} }), topComponent: (0, jsx_runtime_1.jsx)(react_native_1.View, Object.assign({ style: [
{
paddingHorizontal: (0, utils_1.ms)(5),
backgroundColor: utils_1.Colors.transparent,
borderRadius: (0, utils_1.ms)(12),
},
] }, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { fontSize: (0, utils_1.fontSz)(9), fontFamily: "Gordita-Regular", fontWeight: "500", textAlign: 'left', text: '', color: utils_1.Colors.white }) })), title: 'Create New', backgroundColor: utils_1.suggestedPlanColors[0], onPress: () => {
navigate('savings', {});
} }), !categoriesLoading &&
Array.isArray(categoriesData) &&
(categoriesData === null || categoriesData === void 0 ? void 0 : categoriesData.map((item, index) => {
const { name, id, interestRate, interestRange, isLocked } = item;
const icon = (0, SavingsCategory_1.getCategoryIcon)(name);
// Use interestRange for locked savings, single rate for flexible
const displayText = isLocked && interestRange
? `${interestRange}% per annum`
: `${interestRate}% per annum`;
return ((0, jsx_runtime_1.jsx)(homeNavigationCard_1.HomeNavigationCard, { icon: (0, jsx_runtime_1.jsx)(SmartImage_1.SmartImage, { source: icon, style: {
width: (0, utils_1.ms)(27),
height: (0, utils_1.ms)(27),
tintColor: utils_1.Colors.chooseAccountTypeText,
} }), topComponent: (0, jsx_runtime_1.jsx)(react_native_1.View, Object.assign({ style: [
{
paddingHorizontal: (0, utils_1.ms)(5),
paddingVertical: (0, utils_1.ms)(5),
backgroundColor: utils_1.savingTypeDeepColors[index],
borderRadius: (0, utils_1.ms)(8),
},
] }, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { fontSize: (0, utils_1.fontSz)(8), fontFamily: "Gordita-Regular", fontWeight: "500", textAlign: 'left', text: displayText, color: utils_1.Colors.white }) })), title: `${item === null || item === void 0 ? void 0 : item.name} Plan`, backgroundColor: utils_1.savingTypeColors[index], onPress: () => {
navigate('allPlan', {
plan: `${item === null || item === void 0 ? void 0 : item.name} Plans`,
categoryFilter: item,
});
} }, `${index}-${id}`));
}))] })));
};
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_native_1.StatusBar, { backgroundColor: utils_1.Colors.white, barStyle: 'dark-content', animated: false }), (0, jsx_runtime_1.jsxs)(react_native_1.SafeAreaView, Object.assign({ style: [utils_1.globalStyles.appContainer] }, { children: [(0, jsx_runtime_1.jsx)(Header_1.default, { headerText: 'Savings', containerStyle: {
paddingBottom: (0, utils_1.ms)(10),
paddingTop: (0, utils_1.ms)(4),
borderBottomWidth: (0, utils_1.ms)(1),
borderBottomColor: utils_1.Colors.headerBottomColor,
}, onPressBack: () => goBack(), headerChild: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: { flex: 0.125 } }) }), isLoading ? ((0, jsx_runtime_1.jsx)(react_native_1.View, Object.assign({ style: styles.loadingContainer }, { children: (0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { size: "small", color: primaryColor }) }))) : ((0, jsx_runtime_1.jsxs)(react_native_1.View, Object.assign({ style: {
flex: 1,
paddingHorizontal: (0, utils_1.wp)(10),
paddingTop: (0, utils_1.ms)(14),
} }, { children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, Object.assign({ style: styles.content }, { children: [(0, jsx_runtime_1.jsxs)(react_native_1.ScrollView, Object.assign({ nestedScrollEnabled: true, showsVerticalScrollIndicator: false, keyboardShouldPersistTaps: "handled", style: { flexGrow: 0 } }, { children: [displayWalletCard(), displayCardNavigationRoutes(), (0, jsx_runtime_1.jsx)(react_native_1.View, Object.assign({ style: [
utils_1.globalStyles.rowBetween,
{
paddingVertical: (0, utils_1.hp)(10),
},
] }, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { color: utils_1.Colors.accountTransactions, fontWeight: "500", fontFamily: 'Gordita-Medium', fontSize: (0, utils_1.fontSz)(16), lineHeight: (0, utils_1.fontSz)(16 * 1.5), text: 'Savings History' }) }))] })), (0, jsx_runtime_1.jsx)(TransactionsList_1.default, { useHistoryEndpoint: true, recordsPerPage: 10, showScrollIndicator: false, scrollEnabled: true, showTabs: true })] })), (0, jsx_runtime_1.jsx)(react_native_1.View, Object.assign({ style: {
alignSelf: 'center',
marginTop: (0, utils_1.ms)(10),
} }, { children: (0, jsx_runtime_1.jsx)(poweredBy_1.PoweredBy, {}) }))] })))] }))] }));
};
exports.default = ExistingSavings;
const styles = react_native_1.StyleSheet.create({
content: {
flex: 1,
height: '100%',
paddingVertical: (0, utils_1.ms)(20),
paddingTop: (0, utils_1.ms)(5),
paddingHorizontal: (0, utils_1.ms)(16),
borderRadius: (0, utils_1.ms)(8),
backgroundColor: utils_1.Colors.white,
shadowColor: utils_1.Colors.shadowColor,
shadowOffset: { width: -1, height: 2 },
shadowOpacity: 0.2,
shadowRadius: 3,
elevation: 3,
},
walletCardImage: {
width: '100%',
resizeMode: 'cover',
borderRadius: (0, utils_1.ms)(10),
},
walletCardOverlay: {
width: '100%',
height: '100%',
alignSelf: 'flex-start',
justifyContent: 'space-between',
paddingHorizontal: (0, utils_1.ms)(12.5),
paddingTop: (0, utils_1.ms)(12.5),
paddingBottom: (0, utils_1.ms)(15),
position: 'absolute',
},
loadingContainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
paddingTop: (0, utils_1.ms)(75),
},
statisticsContainer: {},
statisticsGrid: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
marginBottom: (0, utils_1.ms)(16),
columnGap: (0, utils_1.ms)(12),
},
statisticCard: {
flex: 1,
alignItems: 'center',
padding: (0, utils_1.ms)(12),
borderRadius: (0, utils_1.ms)(12),
backgroundColor: utils_1.Colors.white,
borderWidth: 1,
borderColor: utils_1.Colors.neutral10,
},
statisticIconContainer: {
width: (0, utils_1.ms)(40),
height: (0, utils_1.ms)(40),
borderRadius: (0, utils_1.ms)(20),
justifyContent: 'center',
alignItems: 'center',
marginBottom: (0, utils_1.ms)(12),
},
statisticIcon: {
width: (0, utils_1.ms)(24),
height: (0, utils_1.ms)(24),
},
statisticValue: {
color: utils_1.Colors.headerText,
marginBottom: (0, utils_1.ms)(4),
textAlign: 'center',
},
statisticLabel: {
color: utils_1.Colors.neutral90,
textAlign: 'center',
},
});