omnipay-savings-sdk
Version:
Omnipay Savings SDK
320 lines (319 loc) • 20.9 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_native_1 = require("react-native");
const Text_1 = require("../Text");
const Button_1 = require("../Button");
const utils_1 = require("../../utils");
const modal_1 = require("../Common/modal");
const ComparisonRow = ({ label, oldValue, newValue, isChanged }) => {
// Helper function to render color swatch
const renderColorValue = (colorValue, isOld = false) => {
if (label === 'Color' && typeof colorValue === 'string' && colorValue !== 'Not set') {
return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
styles.colorSwatch,
{ backgroundColor: colorValue },
] }));
}
// Default text rendering for non-color values
return ((0, jsx_runtime_1.jsx)(Text_1.Text, { fontSize: (0, utils_1.fontSz)(16), fontFamily: isOld ? 'Gordita-Regular' : 'Gordita-Medium', fontWeight: isOld ? '400' : '600', text: `${colorValue}`, color: utils_1.Colors.baseBlueText, style: [
isOld && isChanged && styles.strikeThrough,
] }));
};
return ((0, jsx_runtime_1.jsxs)(react_native_1.View, Object.assign({ style: styles.comparisonRow }, { 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, style: styles.labelText }), (0, jsx_runtime_1.jsx)(react_native_1.View, Object.assign({ style: styles.valueContainer }, { children: oldValue !== undefined ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_native_1.View, Object.assign({ style: styles.oldValueContainer }, { children: renderColorValue(oldValue, true) })), isChanged && ((0, jsx_runtime_1.jsx)(react_native_1.View, Object.assign({ style: styles.arrowContainer }, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { fontSize: (0, utils_1.fontSz)(16), fontFamily: "Gordita-Medium", fontWeight: "600", text: "\u2192", color: utils_1.Colors.inputBackgroundLight }) }))), (0, jsx_runtime_1.jsx)(react_native_1.View, Object.assign({ style: styles.newValueContainer }, { children: renderColorValue(newValue, false) }))] })) : ((0, jsx_runtime_1.jsx)(react_native_1.View, Object.assign({ style: styles.singleValueContainer }, { children: renderColorValue(newValue, false) }))) }))] })));
};
const SavingsConfirmation = (props) => {
const { visible, editMode, newData, existingData, onConfirm, onCancel, isLoading, savingsCategoryName, isLockedCategory } = props;
// Helper function to format currency values
const formatCurrencyValue = (value) => {
return (0, utils_1.formatAsCurrency)(value / 100); // Convert from kobo to naira
};
// Helper function to format dates
const formatDate = (dateString) => {
const date = new Date(dateString);
return date.toLocaleDateString('en-US', {
year: 'numeric',
month: 'short',
day: 'numeric',
});
};
// Helper function to format frequency
const getFrequencyText = (frequency) => {
switch (frequency) {
case 0: return 'None';
case 1: return 'Daily';
case 2: return 'Weekly';
case 3: return 'Monthly';
case 4: return 'Save as you collect';
default: return 'Not set';
}
};
// Helper function to get frequency-specific amount label
const getPeriodicAmountLabel = (frequency) => {
switch (frequency) {
case 1: return 'Daily Savings Amount';
case 2: return 'Weekly Savings Amount';
case 3: return 'Monthly Savings Amount';
default: return 'Periodic Amount';
}
};
// Helper function to calculate lock duration in months
const calculateLockDuration = (startDate, endDate) => {
if (!startDate || !endDate) {
return 'Not set';
}
const start = new Date(startDate);
const end = new Date(endDate);
const months = ((end.getFullYear() - start.getFullYear()) * 12) +
(end.getMonth() - start.getMonth());
return `${months} ${months === 1 ? 'month' : 'months'}`;
};
// Helper function to check if values are different
const hasChanged = (oldVal, newVal) => {
// Handle date comparisons by comparing formatted strings
if (oldVal && newVal && typeof oldVal === 'string' && typeof newVal === 'string') {
// If both look like dates, compare their formatted versions
const oldDate = new Date(oldVal);
const newDate = new Date(newVal);
if (!isNaN(oldDate.getTime()) && !isNaN(newDate.getTime())) {
return formatDate(oldVal) !== formatDate(newVal);
}
}
return oldVal !== newVal;
};
const renderNewAccountSummary = () => ((0, jsx_runtime_1.jsx)(react_native_1.ScrollView, Object.assign({ showsVerticalScrollIndicator: false, contentContainerStyle: { paddingTop: 0 } }, { children: (0, jsx_runtime_1.jsxs)(react_native_1.View, Object.assign({ style: [styles.summaryContainer, { marginTop: 0 }] }, { children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, Object.assign({ style: styles.sectionContainer }, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { fontSize: (0, utils_1.fontSz)(14), fontFamily: "Gordita-Bold", fontWeight: "700", text: "ACCOUNT DETAILS", color: utils_1.Colors.purple60, style: styles.sectionTitle }), (0, jsx_runtime_1.jsx)(ComparisonRow, { label: "Account Name", newValue: newData.accountName }), (0, jsx_runtime_1.jsx)(ComparisonRow, { label: isLockedCategory ? 'Lock Amount' : 'Savings Target', newValue: formatCurrencyValue(newData.savingTarget) }), (0, jsx_runtime_1.jsx)(ComparisonRow, { label: "Category", newValue: savingsCategoryName }), isLockedCategory && newData.startDate && newData.endDate && ((0, jsx_runtime_1.jsx)(ComparisonRow, { label: "Lock Duration", newValue: calculateLockDuration(newData.startDate, newData.endDate) }))] })), !isLockedCategory && ((0, jsx_runtime_1.jsxs)(react_native_1.View, Object.assign({ style: styles.sectionContainer }, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { fontSize: (0, utils_1.fontSz)(14), fontFamily: "Gordita-Bold", fontWeight: "700", text: "SAVINGS PLAN", color: utils_1.Colors.purple60, style: styles.sectionTitle }), (0, jsx_runtime_1.jsx)(ComparisonRow, { label: "Auto-Save", newValue: newData.autoSave ? 'Enabled' : 'Disabled' }), newData.autoSave && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ComparisonRow, { label: "Frequency", newValue: getFrequencyText(newData.frequency) }), newData.frequency !== 4 && newData.periodicSavingsAmount && ((0, jsx_runtime_1.jsx)(ComparisonRow, { label: getPeriodicAmountLabel(newData.frequency), newValue: formatCurrencyValue(newData.periodicSavingsAmount) })), newData.startDate && ((0, jsx_runtime_1.jsx)(ComparisonRow, { label: "Start Date", newValue: formatDate(newData.startDate) })), newData.endDate && ((0, jsx_runtime_1.jsx)(ComparisonRow, { label: "End Date", newValue: formatDate(newData.endDate) }))] }))] }))), (0, jsx_runtime_1.jsxs)(react_native_1.View, Object.assign({ style: styles.sectionContainer }, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { fontSize: (0, utils_1.fontSz)(14), fontFamily: "Gordita-Bold", fontWeight: "700", text: "OTHER OPTIONS", color: utils_1.Colors.purple60, style: styles.sectionTitle }), (0, jsx_runtime_1.jsx)(ComparisonRow, { label: "Interest", newValue: newData.isInterestDisabled ? 'Disabled' : 'Enabled' }), newData.narration && ((0, jsx_runtime_1.jsx)(ComparisonRow, { label: "Narration", newValue: newData.narration }))] }))] })) })));
console.log(existingData, 'existingData');
const renderEditComparison = () => {
var _a, _b;
if (!existingData) {
return null;
}
// Group changes by section
const basicChanges = [
{
label: 'Account Name',
oldValue: existingData.accountName,
newValue: newData.accountName,
isChanged: hasChanged(existingData.accountName, newData.accountName),
},
{
label: isLockedCategory ? 'Lock Amount' : 'Savings Target',
oldValue: formatCurrencyValue(existingData.savingTarget * 100),
newValue: formatCurrencyValue(newData.savingTarget),
isChanged: hasChanged(existingData.savingTarget * 100, newData.savingTarget), // Compare in Kobo
},
{
label: 'Category',
oldValue: existingData.categoryName,
newValue: savingsCategoryName,
isChanged: hasChanged(existingData.categoryName, savingsCategoryName),
},
{
label: 'Color',
oldValue: existingData.savingsPlanColor || 'Not set',
newValue: newData.savingsPlanColor || 'Not set',
isChanged: hasChanged((_a = existingData.savingsPlanColor) === null || _a === void 0 ? void 0 : _a.toLowerCase(), (_b = newData.savingsPlanColor) === null || _b === void 0 ? void 0 : _b.toLowerCase()),
},
];
// Add Lock Duration for locked savings
if (isLockedCategory && newData.startDate && newData.endDate) {
basicChanges.push({
label: 'Lock Duration',
oldValue: existingData.startDate && existingData.endDate
? calculateLockDuration(existingData.startDate, existingData.endDate)
: 'Not set',
newValue: calculateLockDuration(newData.startDate, newData.endDate),
isChanged: hasChanged(existingData.startDate && existingData.endDate
? calculateLockDuration(existingData.startDate, existingData.endDate)
: 'Not set', calculateLockDuration(newData.startDate, newData.endDate)),
});
}
const configChanges = [];
// Only include Auto-Save for flexible savings (not locked)
if (!isLockedCategory) {
configChanges.push({
label: 'Auto-Save',
oldValue: existingData.autoSave ? 'Enabled' : 'Disabled',
newValue: newData.autoSave ? 'Enabled' : 'Disabled',
isChanged: hasChanged(existingData.autoSave, newData.autoSave),
});
}
// Only show auto-save related fields for flexible savings
if (!isLockedCategory && newData.autoSave) {
configChanges.push({
label: 'Frequency',
oldValue: existingData.savingsFrequency === '0' ? 'Not set' : existingData.savingsFrequency,
newValue: getFrequencyText(newData.frequency),
isChanged: hasChanged(existingData.savingsFrequencyId, newData.frequency),
});
if (newData.frequency !== 4 && newData.periodicSavingsAmount) {
configChanges.push({
label: getPeriodicAmountLabel(newData.frequency),
oldValue: formatCurrencyValue(existingData.periodicSavingsAmount * 100),
newValue: formatCurrencyValue(newData.periodicSavingsAmount),
isChanged: hasChanged(existingData.periodicSavingsAmount * 100, newData.periodicSavingsAmount), // Compare in Kobo
});
}
if (newData.startDate) {
configChanges.push({
label: 'Start Date',
oldValue: existingData.startDate ? formatDate(existingData.startDate) : 'Not set',
newValue: formatDate(newData.startDate),
isChanged: hasChanged(existingData.startDate, newData.startDate),
});
}
if (newData.endDate) {
configChanges.push({
label: 'End Date',
oldValue: existingData.endDate ? formatDate(existingData.endDate) : 'Not set',
newValue: formatDate(newData.endDate),
isChanged: hasChanged(existingData.endDate, newData.endDate),
});
}
}
const additionalChanges = [
{
label: 'Interest',
oldValue: existingData.isInterestDisabled ? 'Disabled' : 'Enabled',
newValue: newData.isInterestDisabled ? 'Disabled' : 'Enabled',
isChanged: hasChanged(existingData.isInterestDisabled, newData.isInterestDisabled),
},
{
label: 'Narration',
oldValue: existingData.narration || 'None',
newValue: newData.narration || 'None',
isChanged: hasChanged(existingData.narration || '', newData.narration || ''),
},
];
const hasAnyChanges = [...basicChanges, ...configChanges, ...additionalChanges].some(item => item.isChanged);
return ((0, jsx_runtime_1.jsx)(react_native_1.ScrollView, Object.assign({ showsVerticalScrollIndicator: false, contentContainerStyle: { paddingTop: 0 } }, { children: (0, jsx_runtime_1.jsxs)(react_native_1.View, Object.assign({ style: [styles.summaryContainer, { marginTop: 0 }] }, { children: [!hasAnyChanges && ((0, jsx_runtime_1.jsxs)(react_native_1.View, Object.assign({ style: [styles.sectionContainer, { alignItems: 'center' }] }, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { fontSize: (0, utils_1.fontSz)(16), fontFamily: "Gordita-Medium", fontWeight: "500", text: "No changes detected", color: utils_1.Colors.inputBackgroundLight }), (0, jsx_runtime_1.jsx)(Text_1.Text, { fontSize: (0, utils_1.fontSz)(14), fontFamily: "Gordita-Regular", fontWeight: "400", text: "All fields have the same values as before", color: utils_1.Colors.inputBackgroundLight, style: { marginTop: (0, utils_1.ms)(4), textAlign: 'center' } })] }))), basicChanges.some(item => item.isChanged) && ((0, jsx_runtime_1.jsxs)(react_native_1.View, Object.assign({ style: styles.sectionContainer }, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { fontSize: (0, utils_1.fontSz)(14), fontFamily: "Gordita-Bold", fontWeight: "700", text: "ACCOUNT CHANGES", color: utils_1.Colors.purple60, style: styles.sectionTitle }), basicChanges.map((item, index) => item.isChanged && ((0, jsx_runtime_1.jsx)(ComparisonRow, { label: item.label, oldValue: item.oldValue, newValue: item.newValue, isChanged: item.isChanged }, index)))] }))), configChanges.some(item => item.isChanged) && ((0, jsx_runtime_1.jsxs)(react_native_1.View, Object.assign({ style: styles.sectionContainer }, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { fontSize: (0, utils_1.fontSz)(14), fontFamily: "Gordita-Bold", fontWeight: "700", text: "SAVINGS PLAN CHANGES", color: utils_1.Colors.purple60, style: styles.sectionTitle }), configChanges.map((item, index) => item.isChanged && ((0, jsx_runtime_1.jsx)(ComparisonRow, { label: item.label, oldValue: item.oldValue, newValue: item.newValue, isChanged: item.isChanged }, index)))] }))), additionalChanges.some(item => item.isChanged) && ((0, jsx_runtime_1.jsxs)(react_native_1.View, Object.assign({ style: styles.sectionContainer }, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { fontSize: (0, utils_1.fontSz)(14), fontFamily: "Gordita-Bold", fontWeight: "700", text: "OTHER CHANGES", color: utils_1.Colors.purple60, style: styles.sectionTitle }), additionalChanges.map((item, index) => item.isChanged && ((0, jsx_runtime_1.jsx)(ComparisonRow, { label: item.label, oldValue: item.oldValue, newValue: item.newValue, isChanged: item.isChanged }, index)))] }))), hasAnyChanges && ((0, jsx_runtime_1.jsxs)(react_native_1.View, Object.assign({ style: [styles.sectionContainer, { opacity: 0.7 }] }, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { fontSize: (0, utils_1.fontSz)(14), fontFamily: "Gordita-Bold", fontWeight: "700", text: "NO CHANGES", color: utils_1.Colors.inputBackgroundLight, style: styles.sectionTitle }), [...basicChanges, ...configChanges, ...additionalChanges]
.filter(item => !item.isChanged)
.map((item, index) => ((0, jsx_runtime_1.jsx)(ComparisonRow, { label: item.label, oldValue: item.oldValue, newValue: item.newValue, isChanged: false }, index)))] })))] })) })));
};
const renderFooter = () => ((0, jsx_runtime_1.jsxs)(react_native_1.View, Object.assign({ style: styles.buttonRow }, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { title: "Cancel", onPress: onCancel, style: [styles.secondaryButton, { flex: 1, marginRight: (0, utils_1.ms)(8) }], textStyle: { color: utils_1.Colors.purple60 } }), (0, jsx_runtime_1.jsx)(Button_1.Button, { title: editMode ? 'Confirm Update' : 'Create Account', onPress: onConfirm, isLoading: isLoading, style: [styles.primaryButton, { flex: 1, marginLeft: (0, utils_1.ms)(8) }] })] })));
return ((0, jsx_runtime_1.jsx)(modal_1.Modal, Object.assign({ visible: visible, title: "Account Summary", onClose: onCancel, contentStyle: { paddingTop: 0, paddingBottom: (0, utils_1.ms)(16) }, footer: renderFooter() }, { children: editMode ? renderEditComparison() : renderNewAccountSummary() })));
};
exports.default = SavingsConfirmation;
const styles = react_native_1.StyleSheet.create({
comparisonRow: {
backgroundColor: utils_1.Colors.white,
borderRadius: (0, utils_1.ms)(12),
padding: (0, utils_1.ms)(16),
marginBottom: (0, utils_1.ms)(12),
borderWidth: 1,
borderColor: '#F0F0F0',
position: 'relative',
},
labelText: {
marginBottom: (0, utils_1.ms)(8),
textTransform: 'uppercase',
letterSpacing: 0.5,
},
valueContainer: {
flexDirection: 'row',
alignItems: 'center',
minHeight: (0, utils_1.ms)(24),
},
oldValueContainer: {
flex: 1,
},
oldValue: {
opacity: 0.7,
},
strikeThrough: {
textDecorationLine: 'line-through',
},
arrowContainer: {
paddingHorizontal: (0, utils_1.ms)(12),
alignItems: 'center',
},
newValueContainer: {
flex: 1,
},
singleValueContainer: {
flex: 1,
},
changeIndicator: {
position: 'absolute',
top: (0, utils_1.ms)(8),
right: (0, utils_1.ms)(8),
},
changeDot: {
width: (0, utils_1.ms)(8),
height: (0, utils_1.ms)(8),
borderRadius: (0, utils_1.ms)(4),
backgroundColor: utils_1.Colors.purple60,
},
summaryContainer: {
// backgroundColor: '#F8F9FE',
borderBottomLeftRadius: (0, utils_1.ms)(16),
borderBottomRightRadius: (0, utils_1.ms)(16),
paddingHorizontal: (0, utils_1.ms)(20),
paddingTop: (0, utils_1.ms)(20),
paddingBottom: (0, utils_1.ms)(20),
marginBottom: (0, utils_1.ms)(20),
marginTop: 0,
},
summaryHeader: {
marginBottom: (0, utils_1.ms)(20),
textAlign: 'center',
},
sectionContainer: {
backgroundColor: utils_1.Colors.white,
borderRadius: (0, utils_1.ms)(12),
padding: (0, utils_1.ms)(16),
marginBottom: (0, utils_1.ms)(16),
borderWidth: 1,
borderColor: '#F0F0F0',
},
sectionTitle: {
marginBottom: (0, utils_1.ms)(12),
paddingBottom: (0, utils_1.ms)(8),
borderBottomWidth: 1,
borderBottomColor: '#F0F0F0',
},
buttonContainer: {
paddingTop: (0, utils_1.ms)(20),
rowGap: (0, utils_1.ms)(12),
},
fixedButtonContainer: {
backgroundColor: utils_1.Colors.white,
paddingHorizontal: (0, utils_1.ms)(20),
paddingVertical: (0, utils_1.ms)(16),
borderTopWidth: 1,
borderTopColor: '#F0F0F0',
elevation: 4,
shadowOffset: { width: 0, height: -2 },
shadowOpacity: 0.1,
shadowRadius: 4,
},
buttonRow: {
flexDirection: 'row',
alignItems: 'center',
},
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,
},
secondaryButton: {
backgroundColor: utils_1.Colors.white,
borderWidth: 1,
borderColor: utils_1.Colors.purple60,
borderRadius: (0, utils_1.ms)(12),
paddingVertical: (0, utils_1.ms)(16),
},
colorValueContainer: {
flexDirection: 'row',
alignItems: 'center',
},
colorSwatch: {
width: (0, utils_1.ms)(20),
height: (0, utils_1.ms)(20),
borderRadius: (0, utils_1.ms)(4),
marginRight: (0, utils_1.ms)(8),
},
});