omnipay-savings-sdk
Version:
Omnipay Savings SDK
96 lines (95 loc) • 4.86 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 Text_1 = require("../Text");
const Button_1 = require("../Button");
const Input_1 = __importDefault(require("../Input"));
const utils_1 = require("../../utils");
const SDKConfigContext_1 = require("../../contexts/SDKConfigContext");
const AddPlanModal = ({ visible, onClose, onCreatePlan, isLoading = false, }) => {
const [planName, setPlanName] = (0, react_1.useState)('');
const [error, setError] = (0, react_1.useState)('');
const { primaryColor } = (0, SDKConfigContext_1.useSDKConfig)();
const handleCreate = async () => {
setError('');
if (!planName.trim()) {
setError('Plan name is required');
return;
}
if (planName.trim().length < 2) {
setError('Plan name must be at least 2 characters');
return;
}
try {
await onCreatePlan(planName.trim());
setPlanName('');
setError('');
onClose();
}
catch (err) {
setError(err.message || 'Failed to create plan');
}
};
const handleClose = () => {
setPlanName('');
setError('');
onClose();
};
return ((0, jsx_runtime_1.jsx)(react_native_1.Modal, Object.assign({ visible: visible, transparent: true, animationType: "none", onRequestClose: handleClose }, { children: (0, jsx_runtime_1.jsx)(react_native_1.TouchableWithoutFeedback, Object.assign({ onPress: handleClose }, { children: (0, jsx_runtime_1.jsx)(react_native_1.View, Object.assign({ style: styles.overlay }, { children: (0, jsx_runtime_1.jsx)(react_native_1.TouchableWithoutFeedback, Object.assign({ onPress: () => { } }, { children: (0, jsx_runtime_1.jsxs)(react_native_1.View, Object.assign({ style: styles.modalContainer }, { children: [(0, jsx_runtime_1.jsx)(react_native_1.View, Object.assign({ style: styles.header }, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { fontSize: (0, utils_1.fontSz)(18), fontFamily: "Gordita-Medium", fontWeight: "500", text: "Create Custom Plan", color: utils_1.Colors.headerText }) })), (0, jsx_runtime_1.jsx)(react_native_1.View, Object.assign({ style: styles.content }, { children: (0, jsx_runtime_1.jsx)(Input_1.default, { label: "", placeholder: "Enter plan name", value: planName, onChange: setPlanName, onFocus: () => { }, onEndEditing: () => { }, errorMsg: error, editable: !isLoading }) })), (0, jsx_runtime_1.jsxs)(react_native_1.View, Object.assign({ style: styles.footer }, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { title: "Cancel", onPress: handleClose, outlined: true, style: [styles.cancelButton, { marginRight: (0, utils_1.ms)(10) }], textStyle: { color: utils_1.Colors.headerText }, disabled: isLoading }), (0, jsx_runtime_1.jsx)(Button_1.Button, { title: "Create", onPress: handleCreate, style: [styles.button, { backgroundColor: primaryColor }], disabled: isLoading || !planName.trim(), isLoading: isLoading })] }))] })) })) })) })) })));
};
const styles = react_native_1.StyleSheet.create({
overlay: {
flex: 1,
backgroundColor: 'rgba(0, 0, 0, 0.5)',
justifyContent: 'flex-end',
},
modalContainer: {
backgroundColor: utils_1.Colors.white,
borderTopLeftRadius: (0, utils_1.ms)(20),
borderTopRightRadius: (0, utils_1.ms)(20),
width: '100%',
paddingBottom: (0, utils_1.ms)(20),
shadowColor: utils_1.Colors.shadowColor,
shadowOffset: { width: 0, height: -4 },
shadowOpacity: 0.25,
shadowRadius: 8,
elevation: 8,
},
header: {
paddingHorizontal: (0, utils_1.ms)(20),
paddingTop: (0, utils_1.ms)(20),
paddingBottom: (0, utils_1.ms)(16),
borderBottomWidth: 1,
borderBottomColor: utils_1.Colors.gray200,
},
content: {
paddingHorizontal: (0, utils_1.ms)(20),
paddingVertical: (0, utils_1.ms)(20),
},
footer: {
flexDirection: 'row',
justifyContent: 'flex-end',
paddingHorizontal: (0, utils_1.ms)(20),
paddingBottom: (0, utils_1.ms)(20),
paddingTop: (0, utils_1.ms)(16),
borderTopWidth: 1,
borderTopColor: utils_1.Colors.gray200,
},
button: {
flex: 1,
minHeight: (0, utils_1.ms)(44),
},
cancelButton: {
flex: 1,
minHeight: (0, utils_1.ms)(44),
backgroundColor: utils_1.Colors.white,
borderWidth: 1,
borderColor: utils_1.Colors.gray200,
},
});
exports.default = AddPlanModal;