omnipay-savings-sdk
Version:
Omnipay Savings SDK
113 lines (112 loc) • 8.4 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.getCategoryIcon = void 0;
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 Button_1 = require("../Button");
const SmartImage_1 = require("../Images/SmartImage");
const Text_1 = require("../Text");
const savings_1 = require("../../app/savings");
const getCategoryIcon = (name) => {
switch (name) {
case 'flexible':
return utils_1.Images.flexibleSavings;
case 'locked':
return utils_1.Images.lockedSavings;
case 'save as you collect':
return utils_1.Images.saveAsYouCollect;
default:
return utils_1.Images.flexibleSavings;
}
};
exports.getCategoryIcon = getCategoryIcon;
const SavingsCategory = (props) => {
var _a;
const { option, selected, onPress, position, range } = props;
const { name, id, interestRate, isLocked, lockedPenaltyFeePercentage, minimumLockDuration, withdrawalLimit, interestRange: backendInterestRange, } = option;
const benefits = [
// id === 3 && 'Save a part of every inflow into your wallet',
// isLocked
// ? `Locked for a minimum of ${minimumLockDuration} months`
// : 'No lock-in period',
// isLocked
// ? `Penalty fee of ${lockedPenaltyFeePercentage}% on early withdrawal`
// : 'No penalty fee on early withdrawal',
// withdrawalLimit
// ? `Withdrawal limit of ${withdrawalLimit} per month`
// : 'No withdrawal limit',
'Switch on auto-save to stay accountable',
'Halaal Compliant',
];
const flexibleBenefits = ['No interest for more than 3 withdrawal'];
const lockedBenefits = [
`Locked for a longer duration(at least ${minimumLockDuration} month${minimumLockDuration > 1 ? 's' : ''})`,
'Cannot withdraw till maturity',
];
const getBenefits = (id) => {
switch (id) {
case 1:
return [...flexibleBenefits, ...benefits];
case 2:
return [...lockedBenefits, ...benefits];
default:
return [...benefits];
}
};
const interestRange = range !== null && range !== void 0 ? range : `${(0, utils_1.getInterestRange)(option).min} - ${(0, utils_1.getInterestRange)(option).max}`;
const icon = (0, exports.getCategoryIcon)(name);
return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(Button_1.CustomPressable, Object.assign({ onPress: () => onPress(option), style: {
paddingVertical: (0, utils_1.ms)(15),
paddingHorizontal: (0, utils_1.ms)(15),
backgroundColor: utils_1.savingTypeColors[position],
borderRadius: (0, utils_1.ms)(4),
borderColor: (selected === null || selected === void 0 ? void 0 : selected.id) === id
? utils_1.savingTypeDeepColors[position]
: utils_1.savingTypeColors[position],
borderWidth: (0, utils_1.ms)(2),
} }, { children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, Object.assign({ style: [utils_1.globalStyles.rowBetween] }, { children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, Object.assign({ style: [utils_1.globalStyles.rowStart, { flex: 1, columnGap: (0, utils_1.ms)(5) }] }, { children: [(0, jsx_runtime_1.jsx)(SmartImage_1.SmartImage, { source: icon, style: {
width: (0, utils_1.ms)(27),
height: (0, utils_1.ms)(27),
tintColor: utils_1.Colors.chooseAccountTypeText,
} }), (0, jsx_runtime_1.jsxs)(react_native_1.View, Object.assign({ style: { paddingTop: (0, utils_1.ms)(id === 2 ? 10 / 2 : 0) } }, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { fontSize: (0, utils_1.fontSz)(16), lineHeight: (0, utils_1.fontSz)(20), fontFamily: "Gordita-Medium", fontWeight: "500", textAlign: 'left', text: `${name} ${id === 3 ? '' : 'savings'}`, color: utils_1.Colors.headerText, style: { textTransform: 'capitalize' } }), id === 2 && ((0, jsx_runtime_1.jsx)(Text_1.Text, { fontSize: (0, utils_1.fontSz)(10), lineHeight: (0, utils_1.fontSz)(16), fontFamily: "Gordita-Regular", fontWeight: "500", textAlign: 'left', text: '(Higher Returns)', color: utils_1.Colors.headerText, style: { textTransform: 'capitalize' } }))] }))] })), (0, jsx_runtime_1.jsx)(react_native_1.View, Object.assign({ style: [
{
alignSelf: 'flex-start',
paddingHorizontal: (0, utils_1.ms)(7.5),
paddingVertical: (0, utils_1.ms)(5),
backgroundColor: utils_1.savingTypeDeepColors[position],
borderRadius: (0, utils_1.ms)(8),
},
] }, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { fontSize: (0, utils_1.fontSz)(10), fontFamily: "Gordita-Medium", fontWeight: "500", textAlign: 'left', text: isLocked && backendInterestRange
? `${backendInterestRange}% per annum`
: `${interestRate}% per annum`, color: utils_1.Colors.white }) }))] })), (0, jsx_runtime_1.jsxs)(react_native_1.View, Object.assign({ style: { rowGap: (0, utils_1.ms)(10), paddingTop: (0, utils_1.ms)(20) } }, { children: [id !== 3 &&
((_a = getBenefits(id)) === null || _a === void 0 ? void 0 : _a.map((benefit, index) => {
return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(react_native_1.View, Object.assign({ style: [
utils_1.globalStyles.rowStart,
{
alignItems: 'flex-start',
columnGap: (0, utils_1.ms)(15),
},
] }, { children: [(0, jsx_runtime_1.jsx)(SmartImage_1.SmartImage, { source: utils_1.Images.check, style: {
width: (0, utils_1.ms)(15),
height: (0, utils_1.ms)(15),
tintColor: utils_1.Colors.black,
} }), (0, jsx_runtime_1.jsx)(Text_1.Text, { fontSize: (0, utils_1.fontSz)(13), fontFamily: "Gordita-Medium", fontWeight: "500", textAlign: 'left', text: `${benefit}`, color: utils_1.Colors.chooseAccountTypeText, style: { maxWidth: '90%' } })] })) }, index));
})), id === 3 &&
savings_1.saveAsYouCollectBenefits.map((benefit, index) => {
return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(react_native_1.View, Object.assign({ style: [
utils_1.globalStyles.rowStart,
{
alignItems: 'flex-start',
columnGap: (0, utils_1.ms)(10),
},
] }, { children: [(0, jsx_runtime_1.jsx)(SmartImage_1.SmartImage, { source: utils_1.Images.check, style: {
width: (0, utils_1.ms)(15),
height: (0, utils_1.ms)(15),
tintColor: utils_1.Colors.black,
} }), (0, jsx_runtime_1.jsx)(Text_1.Text, { fontSize: (0, utils_1.fontSz)(13), fontFamily: "Gordita-Medium", fontWeight: "500", textAlign: 'left', text: `${benefit}`, color: utils_1.Colors.chooseAccountTypeText })] })) }, index));
})] }))] })) }, position));
};
exports.default = SavingsCategory;
const styles = react_native_1.StyleSheet.create({});