omnipay-savings-sdk
Version:
Omnipay Savings SDK
148 lines (147 loc) • 10.8 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 Text_1 = require("../components/Text");
const poweredBy_1 = require("../components/Common/poweredBy");
const checkBox_1 = __importDefault(require("../components/RadioButton/checkBox"));
const Button_1 = require("../components/Button");
const react_query_1 = require("@tanstack/react-query");
const SDKConfigContext_1 = require("../contexts/SDKConfigContext");
const actions_1 = require("../services/actions");
const ToastProvider_1 = require("../contexts/ToastProvider");
const SavingsPreviewCard = ({ label, value }) => {
return ((0, jsx_runtime_1.jsxs)(react_native_1.View, Object.assign({ style: [utils_1.globalStyles.colStart, { width: '47.5%', rowGap: (0, utils_1.ms)(12.5) }] }, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { fontSize: (0, utils_1.fontSz)(12), fontFamily: "Gordita-Medium", fontWeight: "500", text: label, color: utils_1.Colors.inputBackgroundLight }), (0, jsx_runtime_1.jsx)(Text_1.Text, { fontSize: (0, utils_1.fontSz)(16), fontFamily: "Gordita-Medium", fontWeight: "600", text: `${value}`, color: utils_1.Colors.inputBackgroundLight })] })));
};
const SavingsPreview = ({ params, replace, goBack }) => {
const { planPayload: { planId, accountName, savingTarget, periodicSavingsAmount, frequency, savingsCategoryId, deductionType, percentageDeduction, flatRateDeduction, deductionFrequency, deductionMethod, narration, startDate, // ISO string format
endDate, // ISO string format
autoSave, isInterestDisabled, savingsPlanColor, }, interestForecast: { principalAmount, totalInterestEarned, finalAmount, periodInDays, interestRate, }, lockDurationDays, } = params;
const [authorize, setAuthorize] = (0, react_1.useState)(false);
const [acknowledge, setAcknowledge] = (0, react_1.useState)(false);
const queryClient = (0, react_query_1.useQueryClient)();
const { showToast } = (0, ToastProvider_1.useToast)();
const { apiKey } = (0, SDKConfigContext_1.useSDKConfig)();
const { mutate: savingsMutate, isPending: isLoading, data, } = (0, react_query_1.useMutation)({
mutationFn: (variables) => {
return (0, actions_1.createSavingsAccount)(apiKey, variables);
},
onSuccess: res => {
var _a;
if (res.error) {
showToast({
type: 'error',
message: (_a = res === null || res === void 0 ? void 0 : res.error) !== null && _a !== void 0 ? _a : `An error occurred while ${'creating'} your savings account. Please try again.`,
duration: 3000,
});
return;
}
if (res === null || res === void 0 ? void 0 : res.success) {
// Invalidate relevant queries to fetch latest data
queryClient.invalidateQueries({
queryKey: ['savingsListByCustomerId', apiKey],
});
queryClient.invalidateQueries({
queryKey: ['totalAccountTransactionsByCustomerId', apiKey],
});
queryClient.invalidateQueries({
queryKey: ['customerAccountSummary', apiKey],
});
queryClient.invalidateQueries({
queryKey: ['allSavingsCategories', apiKey],
});
// Close the confirmation modal and clear payload
replace('plan', {
planId: res === null || res === void 0 ? void 0 : res.responseData.savingsId,
planName: res === null || res === void 0 ? void 0 : res.responseData.accountName,
});
}
},
onError: err => {
console.error('Mutation failed:', err);
},
});
const handleConfirmSubmission = async () => {
const payload = {
planId: planId,
accountName: accountName,
savingTarget: savingTarget,
savingsCategoryId: savingsCategoryId,
narration: narration,
autoSave: autoSave,
isInterestDisabled: isInterestDisabled,
savingsPlanColor: savingsPlanColor,
startDate: startDate,
endDate: endDate,
};
if (payload) {
savingsMutate(payload);
}
};
function updateAuthorize() {
setAuthorize(!authorize);
}
function updateAcknowledge() {
setAcknowledge(!acknowledge);
}
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: 'Lock savings preview', 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: 'Interest at Maturity', color: utils_1.Colors.headerText, style: {
paddingBottom: (0, utils_1.ms)(20),
} }), (0, jsx_runtime_1.jsx)(react_native_1.View, Object.assign({ style: [
utils_1.globalStyles.colBetween,
{
backgroundColor: utils_1.Colors.selectBankCardActiveBg,
paddingHorizontal: (0, utils_1.ms)(10),
paddingVertical: (0, utils_1.ms)(10),
borderRadius: (0, utils_1.ms)(4),
borderWidth: (0, utils_1.ms)(0.25),
borderColor: utils_1.Colors.posDeliveredText,
rowGap: (0, utils_1.ms)(15),
},
] }, { children: (0, jsx_runtime_1.jsxs)(react_native_1.View, Object.assign({ style: [
utils_1.globalStyles.rowBetween,
{ width: '100%', flexWrap: 'wrap', rowGap: (0, utils_1.ms)(15) },
] }, { children: [(0, jsx_runtime_1.jsx)(SavingsPreviewCard, { label: 'Amount to Lock', value: `${utils_1.naira}${(0, utils_1.formatAmount)(principalAmount, 0)}` }), !isInterestDisabled && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SavingsPreviewCard, { label: 'Interest Earned', value: `${interestRate}%` }), (0, jsx_runtime_1.jsx)(SavingsPreviewCard, { label: 'Interest at Maturity', value: `${utils_1.naira}${(0, utils_1.formatAmount)(totalInterestEarned, 0)}` })] })), (0, jsx_runtime_1.jsx)(SavingsPreviewCard, { label: 'Withdrawal Date', value: `${(0, utils_1.formatDate)(endDate, 'DD MMM. YYYY')}` }), (0, jsx_runtime_1.jsx)(SavingsPreviewCard, { label: 'Lock Duration', value: `${periodInDays} Day${periodInDays > 1 ? 's' : ''}` }), (0, jsx_runtime_1.jsx)(SavingsPreviewCard, { label: 'Withdrawal Location', value: 'Main Account' })] })) })), (0, jsx_runtime_1.jsx)(checkBox_1.default, { containerStyle: {
marginTop: (0, utils_1.ms)(15),
}, label: `I authorize that OmniPay Lock ${utils_1.naira}${(0, utils_1.formatAmount)(principalAmount, 0)} immediately and return in full on ${(0, utils_1.formatDate)(endDate, 'DD MMMM, YYYY')}. I confirm and approve transaction`, selected: authorize, onPress: () => updateAuthorize(), labelStyle: { flex: 1, maxWidth: '90%' } }), (0, jsx_runtime_1.jsx)(checkBox_1.default, { containerStyle: { marginBottom: (0, utils_1.ms)(20), marginTop: (0, utils_1.ms)(15) }, label: `I acknowledge that the CAPITAL ${!isInterestDisabled ? 'and INTEREST ' : ''}from this Lock Savings will only be paid at Maturity. I understand that this savings cannot be broken for at least 30 days after it has been created.`, selected: acknowledge, onPress: () => updateAcknowledge(), labelStyle: { flex: 1, maxWidth: '90%' } }), (0, jsx_runtime_1.jsx)(Button_1.Button, { title: 'Create Lock Savings', onPress: () => handleConfirmSubmission(), style: [styles.primaryButton, {}], isLoading: isLoading, disabled: !(authorize && acknowledge) }), (0, jsx_runtime_1.jsx)(react_native_1.View, Object.assign({ style: {
position: 'absolute',
alignSelf: 'center',
bottom: (0, utils_1.ms)(-50),
} }, { children: (0, jsx_runtime_1.jsx)(poweredBy_1.PoweredBy, {}) }))] })) }))] }))] }));
};
exports.default = SavingsPreview;
const styles = react_native_1.StyleSheet.create({
content: {
paddingVertical: (0, utils_1.ms)(20),
paddingBottom: (0, utils_1.ms)(100),
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',
},
primaryButton: {
borderRadius: (0, utils_1.ms)(12),
paddingVertical: (0, utils_1.ms)(16),
elevation: 2,
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.1,
shadowRadius: 4,
},
});