omnipay-savings-sdk
Version:
Omnipay Savings SDK
122 lines (121 loc) • 8.25 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 Text_1 = require("./Text");
const Button_1 = require("./Button");
const interestBreakdown_1 = __importDefault(require("./Modals/interestBreakdown"));
const PlanCard = (props) => {
var _a, _b;
const { progress, backgroundColor, data, onPress, isLockedSavings, startDate, endDate } = props;
const [showInterestBreakdown, setShowInterestBreakdown] = (0, react_1.useState)(false);
// Calculate days remaining 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 (!isLockedSavings) {
return progress;
}
// If we don't have start/end dates, show amount-based progress for now
// This should be updated when the API includes these fields
if (!endDate || !startDate) {
return progress; // Fallback to amount-based 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)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Button_1.CustomPressable, Object.assign({ onPress: onPress, style: [
utils_1.globalStyles.colBetween,
{
rowGap: (0, utils_1.ms)(15),
backgroundColor: backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : utils_1.Colors.cardBg,
paddingHorizontal: (0, utils_1.ms)(10),
paddingVertical: (0, utils_1.ms)(20),
borderRadius: (0, utils_1.ms)(8),
},
] }, { 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: "700", fontFamily: 'Gordita-Regular', textAlign: 'center', fontSize: (0, utils_1.fontSz)(14), text: data.accountName }), (0, jsx_runtime_1.jsxs)(Button_1.CustomPressable, Object.assign({ activeOpacity: Number(data.interestEarned) > 0 ? 0.9 : 1, onPress: Number(data.interestEarned) > 0
? () => setShowInterestBreakdown(true)
: undefined, style: [
utils_1.globalStyles.colStart,
styles.walletCardBg,
{ alignItems: 'flex-end' },
] }, { 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' }), (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.interestEarned)) !== null && _a !== void 0 ? _a : 0)}` })] }))] })), (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 ? `${Number(displayProgress).toFixed(0)}% elapsed` : `${Number(displayProgress).toFixed(0)}% 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.neutral90, 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)((_b = Number(data === null || data === void 0 ? void 0 : data.savingTarget)) !== null && _b !== void 0 ? _b : 0)}` })] })) }))] })), (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,
backgroundColor: utils_1.Colors.darkCornFlowerBlue90,
},
] }) }))] })), (0, jsx_runtime_1.jsx)(interestBreakdown_1.default, { visible: showInterestBreakdown, onClose: () => setShowInterestBreakdown(false), savingsId: data.savingsId })] }));
};
const styles = react_native_1.StyleSheet.create({
progressBarBackground: {
height: 10,
backgroundColor: '#eee',
borderRadius: 5,
overflow: 'hidden',
},
progressBarFill: {
height: '100%',
backgroundColor: '#4caf50',
borderRadius: 5,
},
walletCardBg: {
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)(5),
},
});
exports.default = PlanCard;