omnipay-savings-sdk
Version:
Omnipay Savings SDK
458 lines (457 loc) • 30.9 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 savingsCalculations_1 = require("../../utils/savingsCalculations");
const useHandleChangeNotrim_1 = __importDefault(require("../../hooks/useHandleChangeNotrim"));
const currency_1 = __importDefault(require("../Input/currency"));
const DatePicker_1 = __importDefault(require("../DatePicker"));
const FrequencyCards_1 = __importDefault(require("../FrequencyCards"));
const Text_1 = require("../Text");
const saveAsYouCollectForm_1 = require("./saveAsYouCollectForm");
const SDKConfigContext_1 = require("../../contexts/SDKConfigContext");
const react_query_1 = require("@tanstack/react-query");
const actions_1 = require("../../services/actions");
const ToastProvider_1 = require("../../contexts/ToastProvider");
const RadioButton_1 = __importDefault(require("../RadioButton"));
const Notification_1 = __importDefault(require("../Feedback/Notification"));
const savingsConfirmation_1 = __importDefault(require("../Modals/savingsConfirmation"));
const SavingsFormLayout_1 = __importDefault(require("./shared/SavingsFormLayout"));
const CommonSavingsFields_1 = __importDefault(require("./shared/CommonSavingsFields"));
const Input_1 = __importDefault(require("../Input"));
const savingsFormUtils_1 = require("./shared/savingsFormUtils");
const FlexibleSavingsForm = (props) => {
var _a, _b;
const { title, goBack, navigate, replace, savingsOption, suggestedPlan, editMode, existingSavingsData, } = props;
const [autoSave, setAutoSave] = (0, react_1.useState)(editMode ? (existingSavingsData === null || existingSavingsData === void 0 ? void 0 : existingSavingsData.autoSave) || false : true);
const [switchInterest, setSwitchInterest] = (0, react_1.useState)(editMode ? (existingSavingsData === null || existingSavingsData === void 0 ? void 0 : existingSavingsData.isInterestDisabled) || false : false);
const [startDate, setStartDate] = (0, react_1.useState)(editMode && (existingSavingsData === null || existingSavingsData === void 0 ? void 0 : existingSavingsData.startDate)
? new Date(existingSavingsData.startDate)
: null);
const [endDate, setEndDate] = (0, react_1.useState)(editMode && (existingSavingsData === null || existingSavingsData === void 0 ? void 0 : existingSavingsData.endDate)
? new Date(existingSavingsData.endDate)
: null);
const [showStartDate, setShowStartDate] = (0, react_1.useState)(false);
const [showEndDate, setShowEndDate] = (0, react_1.useState)(false);
const [selectedTypeOfDeduction, setSelectedTypeOfDeduction] = (0, react_1.useState)('Percentage');
const [selectedDeductionFrequency, setSelectedDeductionFrequency] = (0, react_1.useState)('Reoccurring');
const { showToast } = (0, ToastProvider_1.useToast)();
const { apiKey, primaryColor } = (0, SDKConfigContext_1.useSDKConfig)();
const queryClient = (0, react_query_1.useQueryClient)();
const [formStatus, setFormStatus] = (0, react_1.useState)('idle');
const [showConfirmation, setShowConfirmation] = (0, react_1.useState)(false);
const [confirmationPayload, setConfirmationPayload] = (0, react_1.useState)(null);
const [isPeriodicAmountAutoCalculated, setIsPeriodicAmountAutoCalculated] = (0, react_1.useState)(false);
// Ref for scrolling and state for tracking section positions
const scrollViewRef = (0, react_1.useRef)(null);
const [sectionPositions, setSectionPositions] = (0, react_1.useState)({});
const today = new Date();
const tomorrow = new Date(today);
tomorrow.setDate(today.getDate() + 1);
const [errors, setErrors] = (0, useHandleChangeNotrim_1.default)({
name: '',
amountPercentage: '',
periodicSavingsAmount: '',
amount: '',
narration: '',
savingsColor: '',
frequency: '',
startDate: '',
endDate: '',
interestDisplay: '',
});
const [details, setDetails] = (0, useHandleChangeNotrim_1.default)({
name: editMode ? (existingSavingsData === null || existingSavingsData === void 0 ? void 0 : existingSavingsData.accountName) || '' : '',
amount: editMode ? ((_a = existingSavingsData === null || existingSavingsData === void 0 ? void 0 : existingSavingsData.savingTarget) === null || _a === void 0 ? void 0 : _a.toString()) || '' : '',
amountPercentage: '',
periodicSavingsAmount: editMode
? ((_b = existingSavingsData === null || existingSavingsData === void 0 ? void 0 : existingSavingsData.periodicSavingsAmount) === null || _b === void 0 ? void 0 : _b.toString()) || ''
: '',
narration: editMode ? (existingSavingsData === null || existingSavingsData === void 0 ? void 0 : existingSavingsData.narration) || '' : '',
savingsColor: (0, savingsFormUtils_1.getValidSavingsColor)(existingSavingsData === null || existingSavingsData === void 0 ? void 0 : existingSavingsData.savingsPlanColor, editMode),
selectedFrequency: editMode && (existingSavingsData === null || existingSavingsData === void 0 ? void 0 : existingSavingsData.savingsFrequencyId)
? (0, savingsFormUtils_1.getFrequencyTypeFromId)(existingSavingsData.savingsFrequencyId)
: '',
startDate: editMode && (existingSavingsData === null || existingSavingsData === void 0 ? void 0 : existingSavingsData.startDate)
? new Date(existingSavingsData.startDate)
: null,
endDate: editMode && (existingSavingsData === null || existingSavingsData === void 0 ? void 0 : existingSavingsData.endDate)
? new Date(existingSavingsData.endDate)
: null,
});
const { name, amount, amountPercentage, periodicSavingsAmount, narration, savingsColor, selectedFrequency, } = details;
function updateSavingsColor(value) {
setDetails('savingsColor', value);
setErrors('savingsColor', '');
}
function updateName(value) {
setDetails('name', value);
setErrors('name', '');
}
function updateAmount(value) {
setDetails('amount', value);
setErrors('amount', '');
}
function updatePeriodicSavingsAmount(value, isAutoCalculated = false) {
setDetails('periodicSavingsAmount', value);
setErrors('periodicSavingsAmount', '');
setIsPeriodicAmountAutoCalculated(isAutoCalculated);
}
function updateAmountPercentage(value, deductionType) {
setDetails('amountPercentage', value);
const currentDeductionType = deductionType || selectedTypeOfDeduction;
if (value > 100 && currentDeductionType === 'Percentage') {
setErrors('amountPercentage', 'You cannot enter a percentage greater than 100');
}
else {
setErrors('amountPercentage', '');
}
}
function updateFrequency(value) {
setDetails('selectedFrequency', value);
setErrors('frequency', '');
}
function updateStartDate(value) {
setDetails('startDate', value);
setErrors('startDate', '');
}
function updateEndDate(value) {
setDetails('endDate', value);
setErrors('endDate', '');
}
function updateNarration(value) {
setDetails('narration', value);
setErrors('narration', '');
}
// Helper function to capture section positions
const handleSectionLayout = (sectionKey, event) => {
const { y } = event.nativeEvent.layout;
setSectionPositions(prev => (Object.assign(Object.assign({}, prev), { [sectionKey]: y })));
};
// Helper function to calculate required periodic amount with interest
const calculateRequiredPeriodicAmount = () => {
if (!amount || !selectedFrequency || !startDate || !endDate)
return 0;
return (0, savingsCalculations_1.calculateRequiredPeriodicAmountWithInterest)({
savingsTarget: Number(amount),
selectedFrequency,
startDate,
endDate,
annualInterestRate: (savingsOption === null || savingsOption === void 0 ? void 0 : savingsOption.interestRate) || 0,
isInterestDisabled: switchInterest,
currentBalance: 0,
});
};
// Auto-calculate periodic savings amount when dependencies change
(0, react_1.useEffect)(() => {
// Only auto-calculate for non-on-inflow frequencies and when not in edit mode
if (autoSave &&
selectedFrequency &&
(0, utils_1.getFrequencyEnum)(selectedFrequency) !== 4 &&
amount &&
startDate &&
endDate &&
!editMode // Don't auto-calculate in edit mode
) {
// Add a small delay to prevent auto-scrolling after date selection
const timeoutId = setTimeout(() => {
const calculatedAmount = calculateRequiredPeriodicAmount();
if (calculatedAmount > 0 &&
(Number(periodicSavingsAmount) === 0 ||
isPeriodicAmountAutoCalculated)) {
// Auto-populate if field is empty or was previously auto-calculated
updatePeriodicSavingsAmount(calculatedAmount, true);
}
}, 100);
return () => clearTimeout(timeoutId);
}
}, [amount, selectedFrequency, startDate, endDate, autoSave, editMode]);
// Reset auto-calculation flag when user manually edits
const handleManualPeriodicAmountChange = (value) => {
updatePeriodicSavingsAmount(value, false); // Always mark as manually edited
};
// Helper function to scroll to first error
const scrollToError = (errorField) => {
var _a;
const targetPosition = sectionPositions[errorField];
if (targetPosition !== undefined && scrollViewRef.current) {
scrollViewRef.current.scrollTo({
y: Math.max(0, targetPosition - 50),
animated: true,
});
}
else {
// Fallback to approximate positions if layout hasn't been captured yet
const fallbackPositions = {
savingsColor: 0,
name: 150,
amount: 300,
frequency: 500,
periodicSavingsAmount: 700,
amountPercentage: 850,
startDate: 1000,
endDate: 1150,
};
const fallbackPosition = fallbackPositions[errorField] || 0;
(_a = scrollViewRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({
y: fallbackPosition,
animated: true,
});
}
};
// Validation function
const validateForm = () => {
const commonErrors = (0, savingsFormUtils_1.validateCommonFields)(name, amount, savingsColor);
const flexibleErrors = (0, savingsFormUtils_1.validateFlexibleSavings)(autoSave, selectedFrequency, periodicSavingsAmount, amountPercentage, selectedTypeOfDeduction, startDate, endDate);
return [...commonErrors, ...flexibleErrors];
};
const handleTypeOfDeductionSelect = (option) => {
setSelectedTypeOfDeduction(option);
};
const handleFrequencySelect = (option) => {
setSelectedDeductionFrequency(option);
};
const onChangeStartDate = (date) => {
const currentDate = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0));
setShowStartDate(false);
setStartDate(currentDate);
updateStartDate(currentDate);
if (endDate && currentDate > endDate) {
setEndDate(null);
setErrors('endDate', 'End date cannot be earlier than start date.');
}
else {
setErrors('startDate', '');
}
};
const onChangeEndDate = (date) => {
const currentDate = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 23, 59, 59, 999);
setShowEndDate(false);
setEndDate(currentDate);
updateEndDate(currentDate);
};
const { mutate: savingsMutate, isPending: isLoading, data, } = (0, react_query_1.useMutation)({
mutationFn: (variables) => {
if (editMode) {
return (0, actions_1.updateSavingsAccount)(apiKey, variables);
}
else {
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 ${editMode ? 'updating' : '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
setShowConfirmation(false);
setConfirmationPayload(null);
setFormStatus('success');
}
},
onError: err => {
console.error('Mutation failed:', err);
},
});
function onSuccessNotificationClose() {
setFormStatus('idle');
replace('plan', {
planId: data === null || data === void 0 ? void 0 : data.responseData.savingsId,
planName: data === null || data === void 0 ? void 0 : data.responseData.accountName,
});
}
const handleSubmit = async () => {
var _a, _b, _c, _d;
react_native_1.Keyboard.dismiss();
// Validate form and get all errors
const validationErrors = validateForm();
if (validationErrors.length > 0) {
// Set all errors
validationErrors.forEach(({ field, message }) => {
setErrors(field, message);
});
// Scroll to first error after a brief delay to allow error state to update
setTimeout(() => {
scrollToError(validationErrors[0].field);
}, 100);
return;
}
// Form is valid, proceed with submission
let payload;
if (editMode) {
payload = {
savingsId: (existingSavingsData === null || existingSavingsData === void 0 ? void 0 : existingSavingsData.savingsId) || '',
planId: (_a = suggestedPlan === null || suggestedPlan === void 0 ? void 0 : suggestedPlan.id) !== null && _a !== void 0 ? _a : 0,
accountName: name.trim(),
savingTarget: (0, utils_1.correctFloatPoint)(Number(amount) * 100),
savingsCategoryId: savingsOption.id,
narration: narration.trim(),
autoSave: autoSave,
isInterestDisabled: switchInterest,
savingsPlanColor: savingsColor,
};
}
else {
payload = {
planId: (_b = suggestedPlan === null || suggestedPlan === void 0 ? void 0 : suggestedPlan.id) !== null && _b !== void 0 ? _b : 0,
accountName: name.trim(),
savingTarget: (0, utils_1.correctFloatPoint)(Number(amount) * 100),
savingsCategoryId: savingsOption.id,
narration: narration.trim(),
autoSave: autoSave,
isInterestDisabled: switchInterest,
savingsPlanColor: savingsColor,
};
}
// Only add frequency and date fields if auto save is enabled
if (autoSave) {
payload.frequency = (0, utils_1.getFrequencyEnum)(selectedFrequency);
payload.startDate = (_c = (0, utils_1.convertToISODateString)(startDate)) !== null && _c !== void 0 ? _c : '';
payload.endDate = (_d = (0, utils_1.convertToISODateString)(endDate)) !== null && _d !== void 0 ? _d : '';
}
if ((suggestedPlan === null || suggestedPlan === void 0 ? void 0 : suggestedPlan.name) === name) {
payload.planId = suggestedPlan === null || suggestedPlan === void 0 ? void 0 : suggestedPlan.id;
}
if (autoSave && (0, utils_1.getFrequencyEnum)(selectedFrequency) !== 4) {
payload.periodicSavingsAmount = (0, utils_1.correctFloatPoint)(Number(periodicSavingsAmount) * 100);
}
if (autoSave &&
selectedTypeOfDeduction === 'Flat rate' &&
(0, utils_1.getFrequencyEnum)(selectedFrequency) === 4) {
payload.flatRateDeduction = (0, utils_1.correctFloatPoint)(Number(amountPercentage) * 100);
}
if (autoSave &&
selectedTypeOfDeduction === 'Percentage' &&
(0, utils_1.getFrequencyEnum)(selectedFrequency) === 4) {
payload.percentageDeduction = Number(amountPercentage);
}
if (autoSave && (0, utils_1.getFrequencyEnum)(selectedFrequency) === 4) {
payload.deductionType = (0, utils_1.getDeductionTypeEnum)(selectedTypeOfDeduction);
payload.deductionFrequency = (0, utils_1.getDeductionFrequencyEnum)(selectedDeductionFrequency);
payload.deductionMethod = 1;
}
// In edit mode, check if there are any actual changes
if (editMode && existingSavingsData) {
const hasChanges = (0, savingsFormUtils_1.checkForChanges)(payload, existingSavingsData);
if (!hasChanges) {
// No changes detected, show a toast and return
showToast({
type: 'info',
message: 'No changes detected. Your savings account is already up to date.',
duration: 3000,
});
return;
}
}
// Show confirmation modal instead of directly submitting
setConfirmationPayload(payload);
setShowConfirmation(true);
};
const handleConfirmSubmission = async () => {
if (confirmationPayload) {
savingsMutate(confirmationPayload);
}
};
const handleCancelConfirmation = () => {
setShowConfirmation(false);
setConfirmationPayload(null);
};
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(SavingsFormLayout_1.default, Object.assign({ title: title, onBack: goBack, onSubmit: handleSubmit, scrollViewRef: scrollViewRef, suggestedPlanName: suggestedPlan === null || suggestedPlan === void 0 ? void 0 : suggestedPlan.name }, { children: [(0, jsx_runtime_1.jsx)(CommonSavingsFields_1.default, { savingsColor: savingsColor, onColorChange: updateSavingsColor, colorError: errors.savingsColor, primaryColor: primaryColor, name: name, onNameChange: updateName, nameError: errors.name, amount: amount, onAmountChange: updateAmount, amountError: errors.amount, amountLabel: "Savings Target", onColorLayout: event => handleSectionLayout('savingsColor', event), onNameLayout: event => handleSectionLayout('name', event), onAmountLayout: event => handleSectionLayout('amount', event) }), (0, jsx_runtime_1.jsx)(saveAsYouCollectForm_1.SwitchFormInput, { title: "Auto-Save", onPress: () => setAutoSave(!autoSave), onValueChange: () => setAutoSave(!autoSave), check: autoSave, setCheck: setAutoSave }), autoSave && ((0, jsx_runtime_1.jsx)(react_native_1.View, Object.assign({ onLayout: event => handleSectionLayout('frequency', event) }, { children: (0, jsx_runtime_1.jsx)(FrequencyCards_1.default, { selectedFrequency: selectedFrequency, onSelectFrequency: frequency => {
updateFrequency(frequency);
}, label: "How often do you want to save?", showAsterisk: true, errorMsg: errors.frequency }) }))), autoSave && Boolean(selectedFrequency.length > 0) && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_native_1.View, Object.assign({ onLayout: event => handleSectionLayout('startDate', event) }, { children: (0, jsx_runtime_1.jsx)(DatePicker_1.default, { value: startDate, label: "Start Date", errorMsg: errors.startDate || '', placeholder: "Select", containerStyle: { marginTop: (0, utils_1.ms)(0) }, onPress: () => {
setShowStartDate(prev => !prev);
setErrors('startDate', '');
}, onCancel: () => {
setShowStartDate(prev => !prev);
}, show: showStartDate, mode: "date", showAsterisk: true, onChange: onChangeStartDate }) })), (0, jsx_runtime_1.jsx)(react_native_1.View, Object.assign({ onLayout: event => handleSectionLayout('endDate', event) }, { children: (0, jsx_runtime_1.jsx)(DatePicker_1.default, { value: endDate, label: "End Date", errorMsg: errors.endDate || '', placeholder: "Select", containerStyle: { marginTop: (0, utils_1.ms)(0) }, onPress: () => {
setShowEndDate(prev => !prev);
setErrors('endDate', '');
}, onCancel: () => {
setShowEndDate(prev => !prev);
}, show: showEndDate, mode: "date", showAsterisk: true, onChange: onChangeEndDate, minimumDate: startDate !== null && startDate !== void 0 ? startDate : tomorrow }) }))] })), autoSave &&
Boolean(selectedFrequency.length > 0) &&
(0, utils_1.getFrequencyEnum)(selectedFrequency) !== 4 && ((0, jsx_runtime_1.jsx)(react_native_1.View, Object.assign({ onLayout: event => handleSectionLayout('periodicSavingsAmount', event) }, { children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { children: [(0, jsx_runtime_1.jsx)(currency_1.default, { value: periodicSavingsAmount, onChangeValue: (value) => {
const numericValue = Number(value);
handleManualPeriodicAmountChange(numericValue);
}, ignoreNegative: false, delimiter: ",", separator: ".", precision: 2, containerStyle: {}, returnKeyType: "done", topComponent: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), walletAmount: 0, paymentAmount: Number(periodicSavingsAmount), onPressUseAllBalance: () => { }, onEndEditing: () => { }, onFocus: () => { }, label: `How much to save ${selectedFrequency}`, showAsterisk: true, placeholder: "", balance: 0, wrapperStyle: {
borderColor: errors.periodicSavingsAmount.length > 0
? utils_1.Colors.error
: '#F4F4F4',
}, errorMsg: Boolean(errors.periodicSavingsAmount.length > 0) && ((0, jsx_runtime_1.jsx)(Text_1.Text, { style: {
position: 'absolute',
bottom: (0, utils_1.ms)(-10),
left: 0,
}, fontSize: (0, utils_1.fontSz)(14), fontFamily: "Gordita-Regular", fontWeight: "400", text: `${errors.periodicSavingsAmount}`, color: utils_1.Colors.error })), showUseAllBalance: false, showCurrency: true }), isPeriodicAmountAutoCalculated && ((0, jsx_runtime_1.jsx)(react_native_1.View, Object.assign({ style: {
marginTop: (0, utils_1.ms)(8),
paddingHorizontal: (0, utils_1.ms)(12),
paddingVertical: (0, utils_1.ms)(8),
backgroundColor: '#F8F9FA',
borderRadius: (0, utils_1.ms)(8),
borderLeftWidth: (0, utils_1.ms)(3),
borderLeftColor: utils_1.Colors.primary,
} }, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { fontSize: (0, utils_1.fontSz)(12), fontFamily: "Gordita-Regular", fontWeight: "400", text: "\uD83D\uDCA1 We've suggested this amount based on your plan. You can edit if needed.", color: utils_1.Colors.inputBackgroundLight }) })))] }) }))), autoSave &&
Boolean(selectedFrequency.length > 0) &&
(0, utils_1.getFrequencyEnum)(selectedFrequency) === 4 && ((0, jsx_runtime_1.jsxs)(react_native_1.View, Object.assign({ onLayout: event => handleSectionLayout('amountPercentage', event) }, { children: [(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, { marginBottom: (0, utils_1.ms)(14) }] }, { children: savingsFormUtils_1.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);
updateAmountPercentage(0, 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: amountPercentage, onChangeValue: (value) => {
const numericValue = Number(value);
updateAmountPercentage(numericValue);
}, ignoreNegative: false, delimiter: ",", separator: ".", precision: 2, containerStyle: {}, returnKeyType: "done", topComponent: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), walletAmount: 0, paymentAmount: Number(amountPercentage), onPressUseAllBalance: () => { }, onEndEditing: () => { }, onFocus: () => { }, label: selectedTypeOfDeduction === 'Flat rate'
? 'Amount'
: 'Percentage', showAsterisk: true, showCurrency: selectedTypeOfDeduction === 'Flat rate', placeholder: "", balance: 0, wrapperStyle: {
borderColor: errors.amountPercentage.length > 0
? utils_1.Colors.error
: '#F4F4F4',
}, errorMsg: Boolean(errors.amountPercentage.length > 0) && ((0, jsx_runtime_1.jsx)(Text_1.Text, { style: {
position: 'absolute',
bottom: (0, utils_1.ms)(-10),
left: 0,
}, fontSize: (0, utils_1.fontSz)(14), fontFamily: "Gordita-Regular", fontWeight: "400", text: `${errors.amountPercentage}`, color: utils_1.Colors.error })), 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)(saveAsYouCollectForm_1.SwitchFormInput, { title: "Switch off Interest", onPress: () => setSwitchInterest(!switchInterest), onValueChange: () => setSwitchInterest(!switchInterest), check: switchInterest, setCheck: setSwitchInterest })] })), formStatus === 'success' && ((0, jsx_runtime_1.jsx)(Notification_1.default, { title: editMode
? 'Savings Account Updated Successfully'
: 'Savings Account Created Successfully', description: editMode
? 'Your savings account has been updated successfully'
: 'Your savings account has been created successfully', image: utils_1.Images.successIcon, buttonText: "View Details", onButtonPress: onSuccessNotificationClose })), confirmationPayload && ((0, jsx_runtime_1.jsx)(savingsConfirmation_1.default, { visible: showConfirmation, editMode: editMode || false, newData: confirmationPayload, existingData: existingSavingsData, onConfirm: handleConfirmSubmission, onCancel: handleCancelConfirmation, isLoading: isLoading, savingsCategoryName: savingsOption.name, isLockedCategory: false }))] }));
};
exports.default = FlexibleSavingsForm;