omnipay-savings-sdk
Version:
Omnipay Savings SDK
490 lines (488 loc) • 35.2 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 Button_1 = require("../components/Button");
const modal_1 = require("../components/Common/modal");
const withdraw_1 = __importDefault(require("../components/Modals/withdraw"));
const SmartImage_1 = require("../components/Images/SmartImage");
const interestCalculation_1 = __importDefault(require("../components/Modals/interestCalculation"));
const save_1 = __importDefault(require("../components/Modals/save"));
const interestBreakdown_1 = __importDefault(require("../components/Modals/interestBreakdown"));
const SDKConfigContext_1 = require("../contexts/SDKConfigContext");
const react_query_1 = require("@tanstack/react-query");
const actions_1 = require("../services/actions");
const TransactionsList_1 = __importDefault(require("../components/TransactionsList"));
const Notification_1 = __importDefault(require("../components/Feedback/Notification"));
const PlanDetailsCard = (props) => {
const { autoSave, setAutoSave, endDate, planType, isLockedSavings, onPressToggle, } = props;
// Check if endDate is valid
const hasValidEndDate = endDate &&
endDate !== 'Invalid Date' &&
!isNaN(new Date(endDate).getTime());
return ((0, jsx_runtime_1.jsxs)(react_native_1.View, Object.assign({ style: [
utils_1.globalStyles.colBetween,
{
rowGap: (0, utils_1.ms)(15),
backgroundColor: utils_1.Colors.cardBg,
paddingHorizontal: (0, utils_1.ms)(15),
paddingVertical: (0, utils_1.ms)(17.5),
borderRadius: (0, utils_1.ms)(8),
borderColor: utils_1.Colors.disabledButton,
borderWidth: (0, utils_1.ms)(0.5),
},
] }, { children: [hasValidEndDate && ((0, jsx_runtime_1.jsxs)(react_native_1.View, Object.assign({ style: [utils_1.globalStyles.rowBetween] }, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { fontSize: (0, utils_1.fontSz)(13), fontFamily: "Gordita-Regular", fontWeight: "400", textAlign: 'left', text: isLockedSavings ? 'Maturity Date:' : 'End Date:', color: utils_1.Colors.completeTransactionTitle }), (0, jsx_runtime_1.jsx)(Text_1.Text, { fontSize: (0, utils_1.fontSz)(13), fontFamily: "Gordita-Regular", fontWeight: "500", textAlign: 'right', text: `${(0, utils_1.formatDate)(endDate, 'DD-MMM-YYYY')}`, color: utils_1.Colors.completeTransactionTitle })] }))), (0, jsx_runtime_1.jsxs)(react_native_1.View, Object.assign({ style: [utils_1.globalStyles.rowBetween] }, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { fontSize: (0, utils_1.fontSz)(13), fontFamily: "Gordita-Regular", fontWeight: "400", textAlign: 'left', text: 'Plan:', color: utils_1.Colors.completeTransactionTitle }), (0, jsx_runtime_1.jsx)(Text_1.Text, { fontSize: (0, utils_1.fontSz)(13), fontFamily: "Gordita-Regular", fontWeight: "500", textAlign: 'right', text: planType, color: utils_1.Colors.completeTransactionTitle })] })), !isLockedSavings && ((0, jsx_runtime_1.jsxs)(react_native_1.View, Object.assign({ style: [utils_1.globalStyles.rowBetween] }, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { fontSize: (0, utils_1.fontSz)(13), fontFamily: "Gordita-Regular", fontWeight: "400", textAlign: 'left', text: 'Autosave', color: utils_1.Colors.completeTransactionTitle }), (0, jsx_runtime_1.jsx)(react_native_1.Switch, { value: autoSave, onValueChange: () => {
// setAutoSave(!autoSave);
onPressToggle();
}, trackColor: {
false: 'rgba(236, 236, 236, 1)',
true: 'rgba(237, 230, 255, 1)',
}, thumbColor: autoSave ? 'rgba(166, 130, 255, 1)' : '#979797', ios_backgroundColor: autoSave ? '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 },
],
},
] })] })))] })));
};
const PlanButtons = (props) => {
const { onPressWithdraw, onPressEdit, onPressSave, isEditDisabled, isLockedSavings, isWithdrawDisabled, } = props;
return ((0, jsx_runtime_1.jsxs)(react_native_1.View, Object.assign({ style: [
utils_1.globalStyles.rowBetween,
{ marginBottom: (0, utils_1.ms)(12), marginTop: (0, utils_1.ms)(4) },
] }, { children: [(0, jsx_runtime_1.jsx)(Button_1.CustomPressable, Object.assign({ activeOpacity: 0.85, onPress: onPressWithdraw, style: [
styles.button,
{
borderColor: isWithdrawDisabled ? utils_1.Colors.purple90 : utils_1.Colors.purple60,
borderWidth: (0, utils_1.ms)(1),
},
] }, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { fontSize: (0, utils_1.fontSz)(14), lineHeight: (0, utils_1.fontSz)(16), fontFamily: "Gordita-Regular", fontWeight: "400", textAlign: 'left', text: 'Withdraw', color: isWithdrawDisabled ? utils_1.Colors.purple90 : utils_1.Colors.purple60 }) })), (0, jsx_runtime_1.jsx)(Button_1.CustomPressable, Object.assign({ activeOpacity: 0.85, onPress: isEditDisabled || isLockedSavings ? undefined : onPressEdit, style: [
styles.button,
{
backgroundColor: isEditDisabled || isLockedSavings
? utils_1.Colors.purple90
: utils_1.Colors.purple60,
},
] }, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { fontSize: (0, utils_1.fontSz)(14), lineHeight: (0, utils_1.fontSz)(16), fontFamily: "Gordita-Regular", fontWeight: "400", textAlign: 'left', text: 'Edit', color: utils_1.Colors.white }) })), (0, jsx_runtime_1.jsx)(Button_1.CustomPressable, Object.assign({ activeOpacity: 0.85, onPress: isLockedSavings ? undefined : onPressSave, style: [
styles.button,
{
backgroundColor: isLockedSavings
? utils_1.Colors.purple90
: utils_1.Colors.purple60,
},
] }, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { fontSize: (0, utils_1.fontSz)(14), lineHeight: (0, utils_1.fontSz)(16), fontFamily: "Gordita-Regular", fontWeight: "400", textAlign: 'left', text: 'Save', color: utils_1.Colors.white }) }))] })));
};
const PlanProgress = (props) => {
const { progress, savingTarget, proposedAmount, isLockedSavings, endDate, startDate, } = props;
// Calculate days remaining and time-based progress for locked savings
const getDaysRemaining = () => {
if (!endDate || !isLockedSavings) {
return null;
}
const today = new Date();
const maturityDate = new Date(endDate);
const timeDiff = maturityDate.getTime() - today.getTime();
const daysRemaining = Math.ceil(timeDiff / (1000 * 3600 * 24));
if (daysRemaining <= 0) {
return 'Matured';
}
return `${daysRemaining} day${daysRemaining === 1 ? '' : 's'} left`;
};
// Calculate time-based progress for locked savings
const getTimeBasedProgress = () => {
if (!endDate || !startDate || !isLockedSavings) {
return progress;
}
const today = new Date();
const maturityDate = new Date(endDate);
const lockStartDate = new Date(startDate);
if (today >= maturityDate) {
return 100;
} // Matured
// Calculate total lock duration in milliseconds
const totalLockDuration = maturityDate.getTime() - lockStartDate.getTime();
// Calculate elapsed time since lock started
const elapsedTime = today.getTime() - lockStartDate.getTime();
// Calculate progress as percentage of time elapsed
const timeProgress = Math.max(0, Math.min(100, Math.round((elapsedTime / totalLockDuration) * 100)));
return timeProgress;
};
const displayProgress = isLockedSavings ? getTimeBasedProgress() : progress;
const progressAnim = new react_native_1.Animated.Value(displayProgress);
(0, react_1.useEffect)(() => {
react_native_1.Animated.timing(progressAnim, {
toValue: displayProgress,
duration: 500,
useNativeDriver: false,
}).start();
}, [displayProgress]);
const widthInterpolated = progressAnim.interpolate({
inputRange: [0, 100],
outputRange: ['0%', '100%'],
});
return ((0, jsx_runtime_1.jsxs)(react_native_1.View, Object.assign({ style: {
rowGap: (0, utils_1.ms)(15),
paddingHorizontal: (0, utils_1.ms)(10),
paddingVertical: (0, utils_1.ms)(10),
borderWidth: (0, utils_1.ms)(1),
borderColor: utils_1.Colors.neutral100,
borderRadius: (0, utils_1.ms)(8),
marginVertical: (0, utils_1.ms)(10),
} }, { children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, Object.assign({ style: [utils_1.globalStyles.rowBetween] }, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { color: utils_1.Colors.payLaterHeaderText, fontWeight: "400", fontFamily: 'Gordita-Regular', textAlign: 'center', fontSize: (0, utils_1.fontSz)(12), text: isLockedSavings
? `${displayProgress}% elapsed`
: `${displayProgress}% completed` }), (0, jsx_runtime_1.jsx)(react_native_1.View, Object.assign({ style: [
utils_1.globalStyles.colStart,
{ alignItems: 'flex-end', rowGap: (0, utils_1.ms)(5) },
] }, { children: isLockedSavings ? (
// Show days remaining for locked savings
(0, jsx_runtime_1.jsx)(Text_1.Text, { color: utils_1.Colors.payLaterHeaderText, fontWeight: "600", fontFamily: 'Gordita-Medium', textAlign: 'center', fontSize: (0, utils_1.fontSz)(14), text: getDaysRemaining() || '' })) : (
// Show target for flexible savings
(0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { color: utils_1.Colors.neutral100, fontWeight: "500", fontFamily: 'Gordita-Medium', textAlign: 'center', fontSize: (0, utils_1.fontSz)(10), text: 'Target' }), (0, jsx_runtime_1.jsx)(Text_1.Text, { color: utils_1.Colors.payLaterHeaderText, fontWeight: "600", fontFamily: 'Gordita-Medium', textAlign: 'center', fontSize: (0, utils_1.fontSz)(14), text: `${(0, utils_1.formatAsCurrency)(Number(savingTarget))}` })] })) }))] })), (0, jsx_runtime_1.jsx)(react_native_1.View, Object.assign({ style: [
styles.progressBarBackground,
{ backgroundColor: utils_1.Colors.progressBg },
] }, { children: (0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { style: [
styles.progressBarFill,
{
width: widthInterpolated,
// width: `${progress}%`,
backgroundColor: utils_1.Colors.darkCornFlowerBlue90,
},
] }) }))] })));
};
const Plan = ({ params, navigate, goBack, isInitialScreen }) => {
var _a, _b, _c, _d, _e;
const [autoSave, setAutoSave] = (0, react_1.useState)(false);
const [showWithdraw, setShowWithdraw] = (0, react_1.useState)(false);
const [showSave, setShowSave] = (0, react_1.useState)(false);
const [showInterestCalculation, setShowInterestCalculation] = (0, react_1.useState)(false);
const [showInterestBreakdown, setShowInterestBreakdown] = (0, react_1.useState)(false);
const [showWithdrawalWarning, setShowWithdrawalWarning] = (0, react_1.useState)(false);
const [showEarlyWithdrawalWarning, setShowEarlyWithdrawalWarning] = (0, react_1.useState)(false);
const [screenData, setScreenData] = (0, react_1.useState)({
data: {},
isLoading: false,
isError: false,
});
const listRef = (0, react_1.useRef)(null);
const { apiKey, primaryColor } = (0, SDKConfigContext_1.useSDKConfig)();
// Query for savings details
const { data, isLoading, isError, refetch } = (0, react_query_1.useQuery)({
queryKey: ['savingsDetails', params === null || params === void 0 ? void 0 : params.planId, apiKey],
queryFn: () => (0, actions_1.getSavingsDetailsBySavingsId)(apiKey, (params === null || params === void 0 ? void 0 : params.planId) || ''),
staleTime: 5 * 60 * 1000,
retry: 2,
enabled: !!(params === null || params === void 0 ? void 0 : params.planId), // Only run query if planId exists
});
// Query for savings categories to get withdrawal limits
const { data: categoriesData, isLoading: categoriesLoading, refetch: refetchDisable, } = (0, react_query_1.useQuery)({
queryKey: ['allSavingsCategories', apiKey],
queryFn: () => (0, actions_1.getAllSavingsCategories)(apiKey),
retry: 2,
});
const { mutate: enableAutoSaveMutate, status: enableStatus } = (0, react_query_1.useMutation)({
onMutate: () => {
setAutoSave(true);
},
mutationFn: (variables) => {
return (0, actions_1.enableAutoSave)(apiKey, variables);
},
onSuccess: res => {
if (res.error) {
setAutoSave(false);
return;
}
if (res === null || res === void 0 ? void 0 : res.success) {
refetch();
refetchDisable();
setAutoSave(true);
}
},
onError: err => {
setAutoSave(false);
console.error('Enable Mutation failed:', err);
},
});
const { mutate: disableAutoSaveMutate, status: disableStatus } = (0, react_query_1.useMutation)({
onMutate: () => {
setAutoSave(false);
},
mutationFn: (variables) => {
return (0, actions_1.disableAutoSave)(apiKey, variables);
},
onSuccess: res => {
if (res.error) {
setAutoSave(true);
return;
}
if (res === null || res === void 0 ? void 0 : res.success) {
refetch();
refetchDisable();
setAutoSave(false);
}
},
onError: err => {
setAutoSave(true);
console.error('Mutation failed:', err);
},
});
const handleAutoSaveToggle = async () => {
try {
if (autoSave) {
disableAutoSaveMutate({ savingsId: params === null || params === void 0 ? void 0 : params.planId });
}
else {
enableAutoSaveMutate({ savingsId: params === null || params === void 0 ? void 0 : params.planId });
}
}
catch (error) { }
};
// Get withdrawal limit for the current plan's category
const getWithdrawalLimit = () => {
if (!(data === null || data === void 0 ? void 0 : data.categoryName) || !Array.isArray(categoriesData)) {
return null;
}
const matchingCategory = categoriesData.find((category) => { var _a, _b; return ((_a = category.name) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === ((_b = data === null || data === void 0 ? void 0 : data.categoryName) === null || _b === void 0 ? void 0 : _b.toLowerCase()); });
return (matchingCategory === null || matchingCategory === void 0 ? void 0 : matchingCategory.withdrawalLimit) || null;
};
const withdrawalLimit = getWithdrawalLimit();
const isLoadingData = isLoading || categoriesLoading;
// Check if savings account is locked and has early withdrawal penalties
const getSavingsCategory = () => {
if (!(data === null || data === void 0 ? void 0 : data.categoryName) || !Array.isArray(categoriesData)) {
return null;
}
const matchingCategory = categoriesData.find((category) => { var _a, _b; return ((_a = category.name) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === ((_b = data === null || data === void 0 ? void 0 : data.categoryName) === null || _b === void 0 ? void 0 : _b.toLowerCase()); });
return matchingCategory || null;
};
const savingsCategory = getSavingsCategory();
const isLockedSavings = (data === null || data === void 0 ? void 0 : data.isLocked) || false;
const penaltyFeePercentage = (savingsCategory === null || savingsCategory === void 0 ? void 0 : savingsCategory.lockedPenaltyFeePercentage) || 0;
// Check if withdrawal is before maturity date
const isBeforeMaturity = () => {
if (!(data === null || data === void 0 ? void 0 : data.endDate) || !isLockedSavings) {
return false;
}
const endDate = new Date(data === null || data === void 0 ? void 0 : data.endDate);
const currentDate = new Date();
return currentDate < endDate;
};
// Check if transactions exist (amount saved > 0 means transactions have been made)
const hasTransactions = (data === null || data === void 0 ? void 0 : data.amountSaved) > 0;
// Handle edit navigation
const handleEditPress = () => {
const savingsCategory = getSavingsCategory();
if (savingsCategory) {
navigate('savingsForm', {
savingsOption: savingsCategory,
editMode: true,
existingSavingsData: data,
});
}
};
// Handle withdraw button press with limit check
const handleWithdrawPress = () => {
if (isLockedSavings) {
return;
}
const currentWithdrawals = (data === null || data === void 0 ? void 0 : data.noOfWithdrawals) || 0;
const limit = withdrawalLimit || 3;
// Check for early withdrawal penalty first
if (isLockedSavings && penaltyFeePercentage > 0 && isBeforeMaturity()) {
setShowEarlyWithdrawalWarning(true);
return;
}
// Show warning when user is at withdrawal limit and about to exceed it
if (currentWithdrawals === limit) {
setShowWithdrawalWarning(true);
}
else {
setShowWithdraw(true);
}
};
// Open withdrawal modal after user confirms they want to proceed despite warning
const handleProceedWithWithdrawal = () => {
setShowWithdrawalWarning(false);
setShowWithdraw(true);
};
// Open withdrawal modal after user confirms early withdrawal penalty
const handleProceedWithEarlyWithdrawal = () => {
setShowEarlyWithdrawalWarning(false);
// Still need to check withdrawal limit after penalty confirmation
const currentWithdrawals = (data === null || data === void 0 ? void 0 : data.noOfWithdrawals) || 0;
const limit = withdrawalLimit || 3;
if (currentWithdrawals === limit) {
setShowWithdrawalWarning(true);
}
else {
setShowWithdraw(true);
}
};
(0, react_1.useEffect)(() => {
if (data) {
setAutoSave(data === null || data === void 0 ? void 0 : data.autoSave);
}
}, [data]);
const getWalletBalanceLoader = () => {
var _a;
if (isLoadingData) {
return (0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { size: 'small', color: utils_1.Colors.white });
}
else {
return ((0, jsx_runtime_1.jsx)(react_native_1.View, Object.assign({ style: utils_1.globalStyles.rowCenter }, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { color: utils_1.Colors.payLaterHeaderText, fontWeight: "700", fontFamily: 'Gordita-Medium', textAlign: 'center', fontSize: (0, utils_1.fontSz)(20), text: `${(0, utils_1.formatAsCurrency)((_a = Number(data === null || data === void 0 ? void 0 : data.accountBalance)) !== null && _a !== void 0 ? _a : 0)}` }) })));
}
};
const displayWalletCard = () => {
var _a;
const interestRange = data
? `${(0, utils_1.getInterestRange)(data).min} - ${(0, utils_1.getInterestRange)(data).max}`
: '0 - 0';
return ((0, jsx_runtime_1.jsxs)(react_native_1.View, Object.assign({ style: Object.assign({ width: '100%', alignItems: 'center', position: 'relative', marginBottom: (0, utils_1.ms)(2.5), marginTop: (0, utils_1.ms)(5), borderRadius: (0, utils_1.ms)(10) }, (utils_1.isTablet
? {
minHeight: 220,
backgroundColor: primaryColor,
}
: {})) }, { children: [(0, jsx_runtime_1.jsx)(SmartImage_1.SmartImage, { style: [styles.walletCardImage], source: utils_1.Images.savingsWalletCard }), (0, jsx_runtime_1.jsxs)(react_native_1.View, Object.assign({ style: styles.walletCardOverlay }, { children: [(0, jsx_runtime_1.jsx)(react_native_1.View, Object.assign({ style: [utils_1.globalStyles.rowEnd, {}] }, { children: (0, jsx_runtime_1.jsx)(Button_1.CustomPressable, Object.assign({ onPress: () => { }, style: [
{
flexDirection: 'row',
alignItems: 'center',
backgroundColor: utils_1.Colors.savingsWalletCardBg,
borderRadius: (0, utils_1.ms)(10),
paddingHorizontal: (0, utils_1.wp)(7.5),
paddingVertical: (0, utils_1.wp)(4),
columnGap: (0, utils_1.ms)(4),
},
] }, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { style: {
color: utils_1.Colors.payLaterHeaderText,
}, fontFamily: 'Gordita-Medium', fontWeight: "500", fontSize: (0, utils_1.fontSz)(10), text: `${data === null || data === void 0 ? void 0 : data.interestRate}% per annum` }) })) })), (0, jsx_runtime_1.jsxs)(react_native_1.View, Object.assign({ style: [
utils_1.globalStyles.colCenter,
{
flex: 0.7,
alignSelf: 'center',
justifyContent: 'center',
rowGap: (0, utils_1.ms)(1.5),
},
] }, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { color: utils_1.Colors.payLaterHeaderText, fontWeight: "500", textAlign: 'center', fontSize: (0, utils_1.fontSz)(14), text: `${data === null || data === void 0 ? void 0 : data.accountName}` }), getWalletBalanceLoader()] })), (0, jsx_runtime_1.jsx)(react_native_1.View, Object.assign({ style: [
utils_1.globalStyles.rowBetween,
{
paddingTop: (0, utils_1.hp)(10),
},
] }, { children: (0, jsx_runtime_1.jsxs)(Button_1.CustomPressable, Object.assign({ activeOpacity: Number(data === null || data === void 0 ? void 0 : data.totalInterestAccrued) > 0 ? 0.9 : 1, onPress: Number(data === null || data === void 0 ? void 0 : data.totalInterestAccrued) > 0
? () => setShowInterestBreakdown(true)
: undefined, style: [utils_1.globalStyles.rowStart, styles.walletCardBg, {}] }, { children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, Object.assign({ style: [
utils_1.globalStyles.colStart,
{ justifyContent: 'flex-start', rowGap: (0, utils_1.ms)(5) },
] }, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { color: utils_1.Colors.payLaterHeaderText, fontFamily: 'Gordita-Regular', fontWeight: "500", fontSize: (0, utils_1.fontSz)(8), lineHeight: (0, utils_1.fontSz)(8 * 1.14), text: `Interest Earned (${data === null || data === void 0 ? void 0 : data.totalDaysSaved} day${(data === null || data === void 0 ? void 0 : data.totalDaysSaved) > 1 ? 's' : ''})` }), (0, jsx_runtime_1.jsx)(Text_1.Text, { color: utils_1.Colors.payLaterHeaderText, fontFamily: 'Gordita-Medium', fontWeight: "900", fontSize: (0, utils_1.fontSz)(12), lineHeight: (0, utils_1.fontSz)(12 * 1.14), text: `${(0, utils_1.formatAsCurrency)((_a = Number(data === null || data === void 0 ? void 0 : data.totalInterestAccrued)) !== null && _a !== void 0 ? _a : 0)}` })] })), Number(data === null || data === void 0 ? void 0 : data.totalInterestAccrued) > 0 && ((0, jsx_runtime_1.jsx)(react_native_1.View, Object.assign({ style: [
utils_1.globalStyles.rowCenter,
{
backgroundColor: utils_1.Colors.savingsWalletCardBg,
borderRadius: (0, utils_1.ms)(10),
padding: (0, utils_1.ms)(1.5),
marginLeft: (0, utils_1.ms)(4),
},
] }, { children: (0, jsx_runtime_1.jsx)(SmartImage_1.SmartImage, { source: utils_1.Images.navForward, style: {
width: (0, utils_1.ms)(12),
height: (0, utils_1.ms)(12),
tintColor: utils_1.Colors.white,
paddingRight: (0, utils_1.ms)(1.5),
paddingBottom: (0, utils_1.ms)(1),
} }) })))] })) }))] }))] })));
};
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.jsx)(react_native_1.View, Object.assign({ style: [styles.content] }, { children: isLoadingData ? ((0, jsx_runtime_1.jsx)(react_native_1.View, Object.assign({ style: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
} }, { children: (0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { size: "small", color: primaryColor }) }))) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(react_native_1.ScrollView, Object.assign({ nestedScrollEnabled: true, showsVerticalScrollIndicator: false, keyboardShouldPersistTaps: "handled" }, { children: [displayWalletCard(), (0, jsx_runtime_1.jsx)(PlanProgress, { progress: (_a = (0, utils_1.calculateSavingsProgress)(data === null || data === void 0 ? void 0 : data.savingTarget, data === null || data === void 0 ? void 0 : data.amountSaved)) !== null && _a !== void 0 ? _a : 0, savingTarget: (_b = data === null || data === void 0 ? void 0 : data.savingTarget) !== null && _b !== void 0 ? _b : 0, accountBalance: (_c = data === null || data === void 0 ? void 0 : data.accountBalance) !== null && _c !== void 0 ? _c : 0, amountSaved: (_d = data === null || data === void 0 ? void 0 : data.amountSaved) !== null && _d !== void 0 ? _d : 0, proposedAmount: data === null || data === void 0 ? void 0 : data.proposedAmount, isLockedSavings: isLockedSavings, endDate: data === null || data === void 0 ? void 0 : data.endDate, startDate: data === null || data === void 0 ? void 0 : data.startDate }), (0, jsx_runtime_1.jsx)(PlanButtons, { onPressWithdraw: handleWithdrawPress, onPressEdit: handleEditPress, onPressSave: () => setShowSave(true), isEditDisabled: false, isLockedSavings: isLockedSavings, isWithdrawDisabled: isLockedSavings }), (0, jsx_runtime_1.jsx)(PlanDetailsCard, { planType: data === null || data === void 0 ? void 0 : data.categoryName, endDate: data === null || data === void 0 ? void 0 : data.endDate, autoSave: autoSave, setAutoSave: setAutoSave, isLockedSavings: isLockedSavings, onPressToggle: handleAutoSaveToggle }), hasTransactions && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
utils_1.globalStyles.rowBetween,
{
paddingTop: (0, utils_1.hp)(22),
paddingBottom: (0, utils_1.hp)(8),
},
] }), (0, jsx_runtime_1.jsx)(TransactionsList_1.default, { savingsId: (params === null || params === void 0 ? void 0 : params.planId) || '', recordsPerPage: 3, limit: 3, showScrollIndicator: false, scrollEnabled: false, showTabs: true })] }))] })) })) })) }))] })), (0, jsx_runtime_1.jsx)(withdraw_1.default, { visible: showWithdraw, onClose: () => setShowWithdraw(false), onPressContinue: () => { }, resetPin: () => { }, plan: Object.assign(Object.assign({}, data), { noOfWithdrawals: (_e = data === null || data === void 0 ? void 0 : data.noOfWithdrawals) !== null && _e !== void 0 ? _e : 0 }), withdrawalLimit: withdrawalLimit, isLockedSavings: isLockedSavings, penaltyFeePercentage: penaltyFeePercentage, isBeforeMaturity: isBeforeMaturity() }), (0, jsx_runtime_1.jsx)(modal_1.Modal, Object.assign({ visible: showInterestCalculation, title: "Interest Calculation", onClose: () => setShowInterestCalculation(false) }, { children: (0, jsx_runtime_1.jsx)(interestCalculation_1.default, { closeModal: () => setShowInterestCalculation(false), onPressContinue: () => { } }) })), (0, jsx_runtime_1.jsx)(save_1.default, { visible: showSave, closeModal: () => setShowSave(false), savingsAccountName: data === null || data === void 0 ? void 0 : data.accountName, savingsId: (params === null || params === void 0 ? void 0 : params.planId) || '' }), (0, jsx_runtime_1.jsx)(interestBreakdown_1.default, { visible: showInterestBreakdown, onClose: () => setShowInterestBreakdown(false), savingsId: (params === null || params === void 0 ? void 0 : params.planId) || '' }), showWithdrawalWarning && ((0, jsx_runtime_1.jsx)(Notification_1.default, { title: "Interest Earnings at Risk", description: `You'll forfeit this month's interest earnings if you proceed for the ${(withdrawalLimit || 3) + 1}${(0, utils_1.getOrdinalSuffix)((withdrawalLimit || 3) + 1)} time.
Consider waiting until next month to avoid losing your interest.`, image: utils_1.Images.warning, buttonText: "Proceed", onButtonPress: handleProceedWithWithdrawal, onClose: () => setShowWithdrawalWarning(false), minHeight: (0, utils_1.ms)(420) })), showEarlyWithdrawalWarning && ((0, jsx_runtime_1.jsx)(Notification_1.default, { title: "Withdrawal Before Maturity", description: `You are about to withdraw from your locked savings account before the maturity date and will be charged a fee of ${penaltyFeePercentage}%`, image: utils_1.Images.warning, buttonText: "Proceed", onButtonPress: handleProceedWithEarlyWithdrawal, onClose: () => setShowEarlyWithdrawalWarning(false), minHeight: (0, utils_1.ms)(380) }))] }));
};
exports.default = Plan;
const styles = react_native_1.StyleSheet.create({
content: {
flex: 1,
height: '100%',
paddingVertical: (0, utils_1.ms)(12.5),
paddingBottom: (0, utils_1.ms)(10),
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,
},
walletCardImage: {
width: '100%',
resizeMode: 'cover',
borderRadius: (0, utils_1.ms)(10),
},
walletCardOverlay: {
width: '100%',
height: '100%',
alignSelf: 'flex-start',
justifyContent: 'space-between',
paddingHorizontal: (0, utils_1.ms)(12.5),
paddingTop: (0, utils_1.ms)(12.5),
paddingBottom: (0, utils_1.ms)(12.5),
position: 'absolute',
},
loadingContainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
paddingTop: (0, utils_1.ms)(75),
},
button: {
width: '31%',
alignItems: 'center',
justifyContent: 'center',
paddingVertical: (0, utils_1.ms)(13.5),
borderRadius: (0, utils_1.ms)(8),
},
walletCardBg: {
// width: '40%',
rowGap: (0, utils_1.ms)(5),
borderRadius: (0, utils_1.ms)(4),
backgroundColor: 'rgba(255, 255, 255, 0.4)',
paddingHorizontal: (0, utils_1.ms)(10),
paddingVertical: (0, utils_1.ms)(4),
},
progressBarBackground: {
height: 10,
backgroundColor: '#eee',
borderRadius: 5,
overflow: 'hidden',
},
progressBarFill: {
height: '100%',
backgroundColor: '#4caf50',
borderRadius: 5,
},
});