omnipay-savings-sdk
Version:
Omnipay Savings SDK
116 lines (115 loc) • 8.33 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 Text_1 = require("../components/Text");
const Button_1 = require("../components/Button");
const Header_1 = __importDefault(require("../components/Header"));
const SDKConfigContext_1 = require("../contexts/SDKConfigContext");
const actions_1 = require("../services/actions");
const addPlan_1 = __importDefault(require("../components/Modals/addPlan"));
const SuggestedPlans = ({ params, navigate, goBack, isInitialScreen }) => {
const [selected, setSelected] = (0, react_1.useState)(null);
const [isModalVisible, setIsModalVisible] = (0, react_1.useState)(false);
const { apiKey, primaryColor } = (0, SDKConfigContext_1.useSDKConfig)();
const queryClient = (0, react_query_1.useQueryClient)();
// Use React Query directly
const { data, isLoading, isError, refetch } = (0, react_query_1.useQuery)({
queryKey: ['allPlans', apiKey],
queryFn: () => (0, actions_1.getAllPlans)(apiKey),
staleTime: 5 * 60 * 1000,
retry: 2,
});
// Mutation for creating plans
const createPlanMutation = (0, react_query_1.useMutation)({
mutationFn: (planName) => (0, actions_1.createPlan)(apiKey, planName),
onSuccess: (response) => {
if ((response === null || response === void 0 ? void 0 : response.success) || (response === null || response === void 0 ? void 0 : response.statusCode) === 201) {
// Invalidate and refetch plans
queryClient.invalidateQueries({ queryKey: ['allPlans', apiKey] });
}
else {
throw new Error((response === null || response === void 0 ? void 0 : response.message) || 'Failed to create plan');
}
},
onError: (error) => {
console.error('Failed to create plan:', error);
throw error;
},
});
const handleCreatePlan = async (planName) => {
await createPlanMutation.mutateAsync(planName);
};
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 } }) }), (0, jsx_runtime_1.jsx)(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.jsx)(Text_1.Text, { fontSize: (0, utils_1.fontSz)(16), lineHeight: (0, utils_1.fontSz)(20), fontFamily: "Gordita-Medium", fontWeight: "500", textAlign: 'left', text: 'Suggested Plans', color: utils_1.Colors.headerText, style: {
paddingBottom: (0, utils_1.ms)(20),
} }), isLoading && ((0, jsx_runtime_1.jsx)(react_native_1.View, Object.assign({ style: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
minHeight: (0, utils_1.ms)(100),
paddingTop: (0, utils_1.ms)(20),
} }, { children: (0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { size: "small", color: primaryColor }) }))), (0, jsx_runtime_1.jsx)(react_native_1.View, Object.assign({ style: { rowGap: 20 } }, { children: !isLoading &&
Array.isArray(data) &&
data.map((option, index) => {
const { name, id } = option;
return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsx)(Button_1.CustomPressable, Object.assign({ onPress: () => {
navigate('savingsForm', {
savingsOption: params.savingsOption,
suggestedPlan: option,
});
}, style: {
paddingVertical: (0, utils_1.ms)(22.5),
paddingHorizontal: (0, utils_1.ms)(20),
backgroundColor: utils_1.suggestedPlanColors[index % utils_1.suggestedPlanColors.length],
borderRadius: (0, utils_1.ms)(4),
borderWidth: (0, utils_1.ms)(1),
borderColor: id === (selected === null || selected === void 0 ? void 0 : selected.id)
? primaryColor
: utils_1.suggestedPlanColors[index % utils_1.suggestedPlanColors.length],
} }, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { fontSize: (0, utils_1.fontSz)(16), lineHeight: (0, utils_1.fontSz)(20), fontFamily: "Gordita-Medium", fontWeight: "500", textAlign: 'left', text: name, color: utils_1.Colors.headerText }) })) }, index));
}) }))] })) })), (0, jsx_runtime_1.jsx)(react_native_1.View, Object.assign({ style: {
alignItems: 'flex-end',
position: 'absolute',
bottom: (0, utils_1.ms)(50),
right: (0, utils_1.wp)(20),
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: () => setIsModalVisible(true) }) })), (0, jsx_runtime_1.jsx)(addPlan_1.default, { visible: isModalVisible, onClose: () => setIsModalVisible(false), onCreatePlan: handleCreatePlan, isLoading: createPlanMutation.isPending })] }))] }));
};
exports.default = SuggestedPlans;
const styles = react_native_1.StyleSheet.create({
content: {
paddingVertical: (0, utils_1.ms)(20),
paddingBottom: (0, utils_1.ms)(75),
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,
position: 'relative',
},
});