omnipay-savings-sdk
Version:
Omnipay Savings SDK
225 lines (224 loc) • 15.4 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.SwitchFormInput = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const react_native_1 = require("react-native");
const useHandleChangeNotrim_1 = __importDefault(require("../../hooks/useHandleChangeNotrim"));
const utils_1 = require("../../utils");
const Button_1 = require("../Button");
const Header_1 = __importDefault(require("../Header"));
const Input_1 = __importDefault(require("../Input"));
const currency_1 = __importDefault(require("../Input/currency"));
const RadioButton_1 = __importDefault(require("../RadioButton"));
const Text_1 = require("../Text");
const interestBreakdown_1 = __importDefault(require("../Modals/interestBreakdown"));
const react_query_1 = require("@tanstack/react-query");
const actions_1 = require("../../services/actions");
const SDKConfigContext_1 = require("../../contexts/SDKConfigContext");
const typesOfDeduction = [
{
name: 'Percentage',
id: '0',
},
{
name: 'Flat rate',
id: '1',
},
];
const frequencies = [
{
name: 'One-time',
id: '0',
},
{
name: 'Reoccurring',
id: '1',
},
];
const SwitchFormInput = (props) => {
const { title, check, containerStyle, onPress, onValueChange } = props;
return ((0, jsx_runtime_1.jsxs)(Button_1.CustomPressable, Object.assign({ activeOpacity: 0.85, onPress: onPress, style: [
utils_1.globalStyles.rowBetween,
{
paddingVertical: (0, utils_1.ms)(15),
paddingHorizontal: (0, utils_1.ms)(10),
backgroundColor: '#F4F4F4',
borderRadius: (0, utils_1.ms)(8),
},
containerStyle,
] }, { 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: 'left', text: `${title}`, color: utils_1.Colors.headerText }), (0, jsx_runtime_1.jsx)(react_native_1.Switch, { value: check, onValueChange: onValueChange, trackColor: {
false: 'rgba(236, 236, 236, 1)',
true: 'rgba(237, 230, 255, 1)',
}, thumbColor: check ? 'rgba(166, 130, 255, 1)' : '#979797', ios_backgroundColor: check ? 'rgba(166, 130, 255, 1)' : 'rgba(236, 236, 236, 1)', style: [
{
marginLeft: (0, utils_1.ms)(-7.5),
},
{
transform: [
{ scaleX: react_native_1.Platform.OS === 'android' ? 0.9 : 0.6 },
{ scaleY: react_native_1.Platform.OS === 'android' ? 0.9 : 0.6 },
],
},
] })] })));
};
exports.SwitchFormInput = SwitchFormInput;
const SaveAsYouCollectForm = (props) => {
const { title, goBack, navigate, savingsOption, suggestedPlan } = props;
const [autoSave, setAutoSave] = (0, react_1.useState)(true);
const [lockSavings, setLockSavings] = (0, react_1.useState)(false);
const [switchInterest, setSwitchInterest] = (0, react_1.useState)(false);
const [viewInterest, setViewInterest] = (0, react_1.useState)(false);
const [selectedTypeOfDeduction, setSelectedTypeOfDeduction] = (0, react_1.useState)('Percentage');
const [selectedFrequency, setSelectedFrequency] = (0, react_1.useState)('Reoccurring');
const { apiKey, primaryColor } = (0, SDKConfigContext_1.useSDKConfig)();
const queryClient = (0, react_query_1.useQueryClient)();
const [errors, setErrors] = (0, useHandleChangeNotrim_1.default)({
name: '',
amount: '',
narration: '',
});
const [details, setDetails] = (0, useHandleChangeNotrim_1.default)({
name: '',
amount: '',
narration: '',
});
const { name, amount, narration } = details;
function updateName(value) {
setDetails('name', value);
setErrors('name', '');
}
function updateNarration(value) {
setDetails('narration', value);
setErrors('narration', '');
}
function updateAmount(value) {
setDetails('amount', value);
setErrors('amount', '');
}
const handleTypeOfDeductionSelect = (option) => {
setSelectedTypeOfDeduction(option);
};
const handleFrequencySelect = (option) => {
setSelectedFrequency(option);
};
const { mutate: createSavingsMutate, isPending: isLoading, isError, isSuccess, data, error, } = (0, react_query_1.useMutation)({
mutationFn: (variables) => (0, actions_1.createSavingsAccount)(apiKey, variables),
onSuccess: res => {
console.log('Posted successfully:', res);
// 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],
});
navigate('existingSavings', {
savingsOption: savingsOption,
suggestedPlan: suggestedPlan,
});
},
onError: err => console.error('Post failed:', err),
});
const handleSubmit = async () => {
var _a;
const payload = {
planId: (_a = suggestedPlan === null || suggestedPlan === void 0 ? void 0 : suggestedPlan.id) !== null && _a !== void 0 ? _a : 0,
accountName: name,
savingTarget: (0, utils_1.correctFloatPoint)(Number(amount) * 100),
periodicSavingsAmount: autoSave ? Number(amount) : 0,
savingsCategoryId: savingsOption.id,
deductionType: (0, utils_1.getDeductionTypeEnum)(selectedTypeOfDeduction),
percentageDeduction: 0,
flatRateDeduction: 1,
deductionFrequency: (0, utils_1.getDeductionFrequencyEnum)(selectedFrequency),
deductionMethod: 1,
narration: narration,
autoSave: autoSave,
isInterestDisabled: switchInterest,
isLocked: lockSavings,
};
await createSavingsMutate(payload);
};
console.log('Result:', data);
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(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: title, textStyle: { textTransform: 'capitalize' }, 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.KeyboardAvoidingView, Object.assign({ behavior: react_native_1.Platform.OS === 'ios' ? 'padding' : 'height', enabled: true, style: { flex: 1, paddingHorizontal: (0, utils_1.wp)(10), 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({ showsVerticalScrollIndicator: false, keyboardShouldPersistTaps: "handled", contentContainerStyle: [{ rowGap: (0, utils_1.ms)(20) }] }, { children: [(0, jsx_runtime_1.jsx)(Input_1.default, { value: name, label: 'Name', showAsterisk: true, placeholder: 'Enter name', keyboardType: "default", autoCompleteType: "off", returnKeyType: "done", onChange: (value) => {
updateName(String(value));
}, errorMsg: errors.name || '', onEndEditing: () => { }, onFocus: () => { } }), (0, jsx_runtime_1.jsx)(currency_1.default, { value: amount, onChangeValue: (value) => {
updateAmount(value);
}, ignoreNegative: false, delimiter: ",", separator: ".", precision: 2, containerStyle: { marginBottom: (0, utils_1.ms)(10) }, returnKeyType: "done", topComponent: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), walletAmount: 0, paymentAmount: Number(amount), onPressUseAllBalance: () => { }, onEndEditing: () => { }, onFocus: () => { }, label: 'Savings Target', showAsterisk: true, placeholder: '', balance: 0 || 0, errorMsg: (0, jsx_runtime_1.jsx)(Button_1.CustomPressable, Object.assign({ activeOpacity: 0.85, onPress: () => setViewInterest(true), style: [
utils_1.globalStyles.rowEnd,
{
position: 'absolute',
bottom: (0, utils_1.ms)(-12.0),
left: 0,
right: 0,
},
] }, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { fontSize: (0, utils_1.fontSz)(12), fontFamily: "Gordita-Medium", fontWeight: "500", text: 'View Interest', color: utils_1.Colors.purple50, textDecorationLine: 'underline' }) })), showUseAllBalance: false, hideBalance: true }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { children: [(0, jsx_runtime_1.jsx)(react_native_1.View, Object.assign({ style: [
utils_1.globalStyles.rowStart,
{
marginBottom: (0, utils_1.ms)(5),
},
] }, { children: (0, jsx_runtime_1.jsxs)(react_native_1.Text, Object.assign({ style: {
fontSize: (0, utils_1.fontSz)(14),
fontFamily: 'Gordita-Regular',
fontWeight: '400',
color: utils_1.Colors.inputBackgroundLight,
} }, { children: ["Type of Deduction", (0, jsx_runtime_1.jsx)(Text_1.Text, { fontSize: (0, utils_1.fontSz)(14), fontFamily: "Gordita-Regular", fontWeight: "400", text: '*', color: utils_1.Colors.debitRed })] })) })), (0, jsx_runtime_1.jsx)(react_native_1.View, Object.assign({ style: [utils_1.globalStyles.rowStart, {}] }, { children: typesOfDeduction.map((option) => {
return ((0, jsx_runtime_1.jsx)(RadioButton_1.default, { label: option === null || option === void 0 ? void 0 : option.name, selected: selectedTypeOfDeduction === (option === null || option === void 0 ? void 0 : option.name), onPress: () => handleTypeOfDeductionSelect(option === null || option === void 0 ? void 0 : option.name), containerStyle: {
marginRight: (0, utils_1.ms)(40),
} }, option === null || option === void 0 ? void 0 : option.id));
}) }))] }), (0, jsx_runtime_1.jsx)(currency_1.default, { value: amount, onChangeValue: (value) => {
const numericValue = Number(value);
updateAmount(value);
}, ignoreNegative: false, delimiter: ",", separator: ".", precision: 2, containerStyle: {}, returnKeyType: "done", topComponent: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), walletAmount: 0, paymentAmount: Number(amount), onPressUseAllBalance: () => { }, onEndEditing: () => { }, onFocus: () => { }, label: 'Amount/Percentage', showAsterisk: true, placeholder: '', balance: 0 || 0, errorMsg: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), showUseAllBalance: false }), (0, jsx_runtime_1.jsx)(Input_1.default, { value: narration, label: "Narration", placeholder: 'Describe', keyboardType: "default", autoCompleteType: "off", returnKeyType: "done", onChange: (value) => {
updateNarration(String(value));
}, errorMsg: errors.narration || '', onEndEditing: () => { }, onFocus: () => { } }), (0, jsx_runtime_1.jsx)(exports.SwitchFormInput, { title: 'Auto-Save', onPress: () => {
setAutoSave(!autoSave);
}, onValueChange: () => {
setAutoSave(!autoSave);
}, check: autoSave, setCheck: setAutoSave }), (0, jsx_runtime_1.jsx)(exports.SwitchFormInput, { title: 'Lock Savings', onPress: () => {
setLockSavings(!lockSavings);
}, onValueChange: () => {
setLockSavings(!lockSavings);
}, check: lockSavings, setCheck: setLockSavings }), (0, jsx_runtime_1.jsx)(exports.SwitchFormInput, { title: 'Switch off Interest', onPress: () => {
setSwitchInterest(!switchInterest);
}, onValueChange: () => {
setSwitchInterest(!switchInterest);
}, check: switchInterest, setCheck: setSwitchInterest })] })) })) })), (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: 'Create', onPress: () => {
handleSubmit();
}, style: {} }) }))] })), (0, jsx_runtime_1.jsx)(interestBreakdown_1.default, { visible: viewInterest, onClose: () => setViewInterest(false), savingsId: "" })] }));
};
exports.default = SaveAsYouCollectForm;
const styles = react_native_1.StyleSheet.create({
content: {
paddingVertical: (0, utils_1.ms)(20),
// paddingBottom: 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,
rowGap: (0, utils_1.ms)(15),
},
});