omnipay-savings-sdk/lib/app/savings.js

Omnipay Savings SDK

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.saveAsYouCollectBenefits = void 0;
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 Button_1 = require("../components/Button");
const poweredBy_1 = require("../components/Common/poweredBy");
const Header_1 = __importDefault(require("../components/Header"));
const SavingsCategory_1 = __importDefault(require("../components/SavingsCategory"));
const Text_1 = require("../components/Text");
const SDKConfigContext_1 = require("../contexts/SDKConfigContext");
const actions_1 = require("../services/actions");
const utils_1 = require("../utils");
exports.saveAsYouCollectBenefits = [
    'Save a part of every inflow into your wallet',
    'Auto save  on',
    'Halal Compliant',
];
const saveAsYouCollectOption = {
    id: 3,
    name: 'Save as you collect',
    interestRate: 0,
    isLocked: null,
    lockedPenaltyFeePercentage: null,
    minimumLockDuration: null,
    withdrawalLimit: null,
};
const Savings = ({ params, navigate, goBack, isInitialScreen }) => {
    const [selected, setSelected] = (0, react_1.useState)(null);
    const { apiKey, primaryColor } = (0, SDKConfigContext_1.useSDKConfig)();
    // Use React Query directly
    const { data, isLoading, isError, refetch } = (0, react_query_1.useQuery)({
        queryKey: ['allSavingsCategories', apiKey],
        queryFn: () => (0, actions_1.getAllSavingsCategories)(apiKey),
        staleTime: 5 * 60 * 1000,
        retry: 2,
    });
    // Set pre-selected category if provided
    (0, react_1.useEffect)(() => {
        if (params === null || params === void 0 ? void 0 : params.preSelectedCategory) {
            setSelected(params.preSelectedCategory);
        }
    }, [params === null || params === void 0 ? void 0 : params.preSelectedCategory]);
    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.jsxs)(react_native_1.ScrollView, Object.assign({ showsVerticalScrollIndicator: false, keyboardShouldPersistTaps: "handled", contentContainerStyle: {
                            paddingHorizontal: (0, utils_1.wp)(10),
                            paddingTop: (0, utils_1.ms)(14),
                            paddingBottom: (0, utils_1.ms)(25),
                            position: 'relative',
                        } }, { 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: 'center', text: 'We are happy to see you committed to growing your wealth', color: utils_1.Colors.headerText, style: {
                                            paddingBottom: (0, utils_1.ms)(10),
                                        } }), (0, jsx_runtime_1.jsx)(Text_1.Text, { fontSize: (0, utils_1.fontSz)(14), lineHeight: (0, utils_1.fontSz)(20), fontFamily: "Gordita-Medium", fontWeight: "500", textAlign: 'center', text: 'Select one of the plans available', color: utils_1.Colors.chooseAccountTypeText, style: {
                                            paddingBottom: (0, utils_1.ms)(15),
                                        } }), 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: (0, utils_1.ms)(10) } }, { children: !isLoading &&
                                            Array.isArray(data) &&
                                            (data === null || data === void 0 ? void 0 : data.map((option, index) => {
                                                return ((0, jsx_runtime_1.jsx)(SavingsCategory_1.default, { position: index, onPress: data => setSelected(data), option: option, selected: selected }, index));
                                            })) })), !isLoading &&
                                        (!Array.isArray(data) || data.length === 0 || isError) && ((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)(Text_1.Text, { fontSize: (0, utils_1.fontSz)(14), lineHeight: (0, utils_1.fontSz)(20), fontFamily: "Gordita-Medium", fontWeight: "500", textAlign: 'center', text: 'No savings options available at the moment.', color: utils_1.Colors.chooseAccountTypeText, style: {
                                                paddingBottom: (0, utils_1.ms)(10),
                                            } }) })))] })), (0, jsx_runtime_1.jsx)(react_native_1.View, Object.assign({ style: { position: 'absolute', alignSelf: 'center', bottom: (0, utils_1.ms)(0) } }, { children: (0, jsx_runtime_1.jsx)(poweredBy_1.PoweredBy, {}) }))] })), (0, jsx_runtime_1.jsx)(react_native_1.View, Object.assign({ style: {
                            paddingHorizontal: (0, utils_1.wp)(20),
                        } }, { children: (0, jsx_runtime_1.jsx)(Button_1.Button, { title: 'Get Started', onPress: () => {
                                if (selected && (selected.id === 2 || selected.id === 1)) {
                                    navigate('suggestedPlans', { savingsOption: selected });
                                }
                                else if (selected) {
                                    navigate('savingsForm', { savingsOption: selected });
                                }
                            }, style: {}, disabled: selected === null }) }))] }))] }));
};
exports.default = Savings;
const styles = react_native_1.StyleSheet.create({
    content: {
        paddingVertical: (0, utils_1.ms)(20),
        paddingBottom: (0, utils_1.ms)(40),
        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,
    },
});