omnipay-savings-sdk
Version:
Omnipay Savings SDK
131 lines (130 loc) • 6.33 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 utils_1 = require("../../utils");
const Button_1 = require("../Button");
const Text_1 = require("../Text");
const SDKConfigContext_1 = require("../../contexts/SDKConfigContext");
const frequencyOptions = [
{
id: 0,
name: 'Daily',
description: 'Save a fixed amount every day',
},
{
id: 1,
name: 'Weekly',
description: 'Save a fixed amount every week',
},
{
id: 2,
name: 'Monthly',
description: 'Save a fixed amount every month',
},
{
id: 3,
name: 'Save as you collect',
description: 'Save a part of every inflow into your wallet',
},
];
const FrequencyCards = ({ selectedFrequency, onSelectFrequency, label = 'How often do you want to save?', showAsterisk = true, errorMsg = '', }) => {
const { primaryColor } = (0, SDKConfigContext_1.useSDKConfig)();
const getCardColors = (option, isSelected) => {
switch (option.name) {
case 'Daily':
return {
background: isSelected ? '#E8F5E8' : '#F8FDF8',
border: isSelected ? '#4CAF50' : '#E8F5E8',
text: isSelected ? '#2E7D32' : '#4CAF50',
};
case 'Weekly':
return {
background: isSelected ? '#FFF4E6' : '#FFFBF5',
border: isSelected ? '#FF9800' : '#FFF4E6',
text: isSelected ? '#E65100' : '#FF9800',
};
case 'Monthly':
return {
background: isSelected ? '#E3F2FD' : '#F8FCFF',
border: isSelected ? '#2196F3' : '#E3F2FD',
text: isSelected ? '#1565C0' : '#2196F3',
};
case 'Save as you collect':
return {
background: isSelected ? '#F3E8FF' : '#FDFBFF',
border: isSelected ? '#9C27B0' : '#F3E8FF',
text: isSelected ? '#6A1B9A' : '#9C27B0',
};
default:
return {
background: isSelected ? `${primaryColor}20` : '#F8F9FA',
border: isSelected ? primaryColor : '#E9ECEF',
text: isSelected ? primaryColor : utils_1.Colors.headerText,
};
}
};
// Group options into rows of 2
const rows = [];
for (let i = 0; i < frequencyOptions.length; i += 2) {
rows.push(frequencyOptions.slice(i, i + 2));
}
return ((0, jsx_runtime_1.jsxs)(react_native_1.View, Object.assign({ style: styles.container }, { children: [label && ((0, jsx_runtime_1.jsxs)(react_native_1.View, Object.assign({ style: styles.labelContainer }, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { fontSize: (0, utils_1.fontSz)(14), fontFamily: "Gordita-Regular", fontWeight: "400", text: label, color: utils_1.Colors.inputBackgroundLight }), showAsterisk && ((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: styles.gridContainer }, { children: rows.map((row, rowIndex) => ((0, jsx_runtime_1.jsx)(react_native_1.View, Object.assign({ style: styles.row }, { children: row.map((option) => {
const isSelected = selectedFrequency === option.name;
const colors = getCardColors(option, isSelected);
return ((0, jsx_runtime_1.jsx)(Button_1.CustomPressable, Object.assign({ onPress: () => onSelectFrequency(option.name), style: [
styles.card,
{
backgroundColor: colors.background,
borderColor: colors.border,
borderWidth: 1,
},
] }, { children: (0, jsx_runtime_1.jsxs)(react_native_1.View, Object.assign({ style: styles.cardContent }, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { fontSize: (0, utils_1.fontSz)(14), fontFamily: "Gordita-Medium", fontWeight: "500", text: option.name, color: colors.text, textAlign: "left", numberOfLines: 2 }), (0, jsx_runtime_1.jsx)(Text_1.Text, { fontSize: (0, utils_1.fontSz)(11), fontFamily: "Gordita-Regular", fontWeight: "400", text: option.description, color: utils_1.Colors.inputBackgroundLight, textAlign: "left", style: styles.description, numberOfLines: 3 })] })) }), option.id));
}) }), rowIndex))) })), errorMsg && errorMsg.length > 0 && ((0, jsx_runtime_1.jsx)(Text_1.Text, { fontSize: (0, utils_1.fontSz)(14), fontFamily: "Gordita-Regular", fontWeight: "400", text: errorMsg, color: utils_1.Colors.error, style: styles.errorText }))] })));
};
exports.default = FrequencyCards;
const styles = react_native_1.StyleSheet.create({
container: {
marginVertical: (0, utils_1.ms)(5),
},
labelContainer: {
flexDirection: 'row',
marginBottom: (0, utils_1.ms)(12),
},
gridContainer: {
gap: (0, utils_1.ms)(12),
},
row: {
flexDirection: 'row',
justifyContent: 'space-between',
gap: (0, utils_1.ms)(12),
},
card: {
flex: 1,
height: (0, utils_1.ms)(85),
paddingTop: (0, utils_1.ms)(12),
paddingHorizontal: (0, utils_1.ms)(12),
paddingBottom: (0, utils_1.ms)(8),
borderRadius: (0, utils_1.ms)(12),
shadowColor: utils_1.Colors.shadowColor,
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.08,
shadowRadius: 4,
elevation: 2,
justifyContent: 'flex-start',
alignItems: 'flex-start',
},
cardContent: {
flex: 1,
justifyContent: 'flex-start',
alignItems: 'flex-start',
width: '100%',
},
description: {
marginTop: (0, utils_1.ms)(8),
lineHeight: (0, utils_1.fontSz)(13),
},
errorText: {
marginTop: (0, utils_1.ms)(8),
},
});