omnipay-savings-sdk
Version:
Omnipay Savings SDK
111 lines (110 loc) • 8.34 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 utils_1 = require("../utils");
const Header_1 = __importDefault(require("../components/Header"));
const Button_1 = require("../components/Button");
const Text_1 = require("../components/Text");
const react_query_1 = require("@tanstack/react-query");
const actions_1 = require("../services/actions");
const SDKConfigContext_1 = require("../contexts/SDKConfigContext");
const PlanCard_1 = __importDefault(require("../components/PlanCard"));
const AllPlan = ({ params, navigate, goBack, isInitialScreen }) => {
var _a, _b;
const [screenData, setScreenData] = (0, react_1.useState)({
data: {},
isLoading: false,
isError: false,
});
const listRef = (0, react_1.useRef)(null);
const { apiKey, primaryColor } = (0, SDKConfigContext_1.useSDKConfig)();
// Use React Query directly
const { data, isLoading, isError, refetch } = (0, react_query_1.useQuery)({
queryKey: ['savingsListByCustomerId', apiKey],
queryFn: () => (0, actions_1.getSavingsListByCustomerId)(apiKey),
retry: 2,
});
// Filter data based on category if provided
const filteredData = (0, react_1.useMemo)(() => {
if (!Array.isArray(data) || !(params === null || params === void 0 ? void 0 : params.categoryFilter)) {
return data;
}
return data.filter((item) => { var _a, _b; return ((_a = item.categoryName) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === ((_b = params.categoryFilter.name) === null || _b === void 0 ? void 0 : _b.toLowerCase()); });
}, [data, params === null || params === void 0 ? void 0 : params.categoryFilter]);
console.log('data', data);
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: (_a = params === null || params === void 0 ? void 0 : params.plan) !== null && _a !== void 0 ? _a : 'All plans', 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 } }) }), (0, jsx_runtime_1.jsx)(react_native_1.View, Object.assign({ style: {
flex: 1,
paddingHorizontal: (0, utils_1.wp)(20),
paddingTop: (0, utils_1.ms)(14),
} }, { children: (0, jsx_runtime_1.jsx)(react_native_1.View, Object.assign({ style: styles.content }, { children: (0, jsx_runtime_1.jsxs)(react_native_1.ScrollView, Object.assign({ nestedScrollEnabled: true, contentContainerStyle: { rowGap: (0, utils_1.ms)(15) }, showsVerticalScrollIndicator: false, keyboardShouldPersistTaps: "handled" }, { children: [isLoading && ((0, jsx_runtime_1.jsx)(react_native_1.View, Object.assign({ style: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
paddingTop: (0, utils_1.ms)(20),
} }, { children: (0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { size: "small", color: primaryColor }) }))), !isLoading &&
Array.isArray(filteredData) &&
(filteredData === null || filteredData === void 0 ? void 0 : filteredData.map((option, index) => {
var _a;
const isLockedSavings = (option === null || option === void 0 ? void 0 : option.isLocked) || false;
return ((0, jsx_runtime_1.jsx)(PlanCard_1.default, { data: option, backgroundColor: utils_1.suggestedPlanColors[index], progress: (_a = (0, utils_1.calculateSavingsProgress)(option === null || option === void 0 ? void 0 : option.savingTarget, option === null || option === void 0 ? void 0 : option.amountSaved)) !== null && _a !== void 0 ? _a : 0, onPress: () => {
navigate('plan', {
planId: option.savingsId,
planName: option.accountName,
});
}, isLockedSavings: isLockedSavings, startDate: option === null || option === void 0 ? void 0 : option.startDate, endDate: option === null || option === void 0 ? void 0 : option.endDate }, index));
})), !isLoading && Array.isArray(filteredData) && filteredData.length === 0 && ((0, jsx_runtime_1.jsx)(react_native_1.View, Object.assign({ style: { alignItems: 'center', paddingTop: (0, utils_1.ms)(20) } }, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { color: utils_1.Colors.neutral90, fontWeight: "400", fontFamily: 'Gordita-Regular', fontSize: (0, utils_1.fontSz)(14), text: (params === null || params === void 0 ? void 0 : params.categoryFilter) ?
`No ${(_b = params.categoryFilter.name) === null || _b === void 0 ? void 0 : _b.toLowerCase()} savings accounts found` :
'No savings accounts found' }) })))] })) })) })), (0, jsx_runtime_1.jsx)(react_native_1.View, Object.assign({ style: {
alignItems: 'flex-end',
position: 'absolute',
bottom: (0, utils_1.ms)(80),
right: (0, utils_1.wp)(35),
zIndex: 1000,
} }, { children: (0, jsx_runtime_1.jsx)(Button_1.FloatButton, { title: 'Create', textStyle: {
fontSize: (0, utils_1.fontSz)(15),
fontFamily: 'Gordita-Medium',
fontWeight: '500',
color: utils_1.Colors.white,
}, iconStyle: {
width: (0, utils_1.ms)(24),
height: (0, utils_1.ms)(24),
tintColor: utils_1.Colors.white,
}, onPress: () => {
if (params === null || params === void 0 ? void 0 : params.categoryFilter) {
// Navigate to savings form with preselected category
navigate('savings', { preSelectedCategory: params.categoryFilter });
}
else {
// Navigate to savings form without preselection
navigate('savings');
}
} }) }))] }))] }));
};
exports.default = AllPlan;
const styles = react_native_1.StyleSheet.create({
content: {
flex: 1,
height: '100%',
paddingVertical: (0, utils_1.ms)(20),
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,
},
});