omnipay-savings-sdk
Version:
Omnipay Savings SDK
144 lines (143 loc) • 8.47 kB
JavaScript
;
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 SmartImage_1 = require("../Images/SmartImage");
const utils_1 = require("../../utils");
const currency_1 = __importDefault(require("../Input/currency"));
const Button_1 = require("../Button");
const useHandleChangeNotrim_1 = __importDefault(require("../../hooks/useHandleChangeNotrim"));
const SDKConfigContext_1 = require("../../contexts/SDKConfigContext");
const react_query_1 = require("@tanstack/react-query");
const actions_1 = require("../../services/actions");
const Notification_1 = __importDefault(require("../Feedback/Notification"));
const modal_1 = require("../Common/modal");
const Save = (props) => {
var _a, _b;
const { visible, closeModal, savingsAccountName, savingsId } = props;
const [amount, setAmount] = (0, react_1.useState)('');
const { apiKey } = (0, SDKConfigContext_1.useSDKConfig)();
const queryClient = (0, react_query_1.useQueryClient)();
const [showSuccessNotification, setShowSuccessNotification] = (0, react_1.useState)(false);
// Query for wallet balance
const { data: walletBalanceData, isLoading: isLoadingBalance } = (0, react_query_1.useQuery)({
queryKey: ['walletBalance', apiKey],
queryFn: () => (0, actions_1.getWalletBalance)(apiKey),
retry: 2,
enabled: !!apiKey,
});
// Mutation for funding savings account
const { mutate: fundSavings, isPending: isFundingPending, } = (0, react_query_1.useMutation)({
mutationFn: (params) => (0, actions_1.fundSavingsAccount)(apiKey, params),
onSuccess: (response) => {
if (response === null || response === void 0 ? void 0 : response.success) {
queryClient.invalidateQueries({
queryKey: ['savingsDetails', savingsId, apiKey],
});
queryClient.invalidateQueries({
queryKey: ['walletBalance', apiKey],
});
queryClient.invalidateQueries({
queryKey: ['savingsListByCustomerId', apiKey],
});
queryClient.invalidateQueries({
queryKey: ['totalAccountTransactionsByCustomerId', apiKey],
});
setShowSuccessNotification(true);
}
},
onError: (error) => {
console.error('Fund savings account error:', error);
},
});
const [errors, setErrors] = (0, useHandleChangeNotrim_1.default)({
code: '',
amount: '',
});
const useableWalletBalance = Number((_b = (_a = walletBalanceData === null || walletBalanceData === void 0 ? void 0 : walletBalanceData.data) === null || _a === void 0 ? void 0 : _a.availableBalance) !== null && _b !== void 0 ? _b : 0);
const walletAmountPayable = Number(amount);
const handleSave = () => {
if (!amount || Number(amount) <= 0) {
return;
}
// Convert amount to kobo (multiply by 100)
const amountInKobo = Math.round(Number(amount) * 100);
fundSavings({
savingsId,
amount: amountInKobo,
});
};
const handleSuccessNotificationClose = () => {
setShowSuccessNotification(false);
closeModal && closeModal({});
};
const renderSaveModalContent = () => ((0, jsx_runtime_1.jsxs)(react_native_1.View, Object.assign({ style: {
paddingHorizontal: (0, utils_1.wp)(15),
paddingBottom: (0, utils_1.ms)(20),
// alignItems: 'center',
} }, { children: [(0, jsx_runtime_1.jsx)(SmartImage_1.SmartImage, { source: utils_1.Images.completeTransaction, style: {
width: (0, utils_1.ms)(48),
height: (0, utils_1.ms)(48),
alignSelf: 'center',
} }), (0, jsx_runtime_1.jsx)(react_native_1.View, Object.assign({ style: {
paddingTop: (0, utils_1.ms)(30),
paddingBottom: (0, utils_1.ms)(20),
alignItems: 'center',
} }, { children: (0, jsx_runtime_1.jsxs)(react_native_1.Text, Object.assign({ style: {
fontSize: (0, utils_1.fontSz)(14),
lineHeight: (0, utils_1.fontSz)(15.11),
fontWeight: '400',
color: utils_1.Colors.completeTransactionTitle,
textAlign: 'center',
} }, { children: ["You are about to top up your", ' ', (0, jsx_runtime_1.jsx)(react_native_1.Text, Object.assign({ style: {
fontSize: (0, utils_1.fontSz)(14),
lineHeight: (0, utils_1.fontSz)(15.11),
fontWeight: '500',
fontFamily: 'Gordita-Medium',
color: utils_1.Colors.completeTransactionTitle,
} }, { children: savingsAccountName })), ' ', "Savings Account."] })) })), (0, jsx_runtime_1.jsx)(react_native_1.View, Object.assign({ style: {
borderRadius: (0, utils_1.ms)(8),
borderWidth: (0, utils_1.ms)(1),
borderColor: utils_1.Colors.paymentMethodBorderColor,
paddingTop: (0, utils_1.ms)(10),
paddingBottom: (0, utils_1.ms)(10),
paddingHorizontal: (0, utils_1.ms)(15),
} }, { children: (0, jsx_runtime_1.jsx)(currency_1.default, { value: amount, onChangeValue: (value) => {
setAmount(value);
if (Number(value) > useableWalletBalance) {
setErrors('amount', `Your balance is ${(0, utils_1.formatAsCurrency)(useableWalletBalance)}`);
}
else {
setErrors('amount', '');
}
}, ignoreNegative: false, delimiter: ",", separator: ".", precision: 2, containerStyle: {
marginBottom: (0, utils_1.ms)(25),
}, returnKeyType: "done", topComponent: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), walletAmount: useableWalletBalance, paymentAmount: walletAmountPayable, onPressUseAllBalance: () => {
setAmount(String(useableWalletBalance));
setErrors('amount', '');
}, onEndEditing: () => { }, onFocus: () => { }, label: 'Amount', placeholder: '', balance: useableWalletBalance, errorMsg: errors.amount || '', showUseAllBalance: useableWalletBalance > 0 && !isLoadingBalance, showCurrency: true }, useableWalletBalance.toString()) })), (0, jsx_runtime_1.jsx)(Button_1.Button, { title: !amount || Number(amount) <= 0
? 'Save'
: `Save ${(0, utils_1.formatAsCurrency)(Number(amount))}`, onPress: handleSave, disabled: !amount || Number(amount) <= 0 || errors.amount.length > 0, isLoading: isFundingPending, style: {
marginTop: (0, utils_1.ms)(25),
marginBottom: (0, utils_1.ms)(30),
} })] })));
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(modal_1.Modal, Object.assign({ visible: visible && !showSuccessNotification, title: "Save", onClose: () => closeModal && closeModal({}) }, { children: renderSaveModalContent() })), showSuccessNotification && ((0, jsx_runtime_1.jsx)(Notification_1.default, { title: 'Savings Account Funded Successfully', description: `You have funded your ${savingsAccountName} savings plan with ${(0, utils_1.formatAsCurrency)(Number(amount))}`, image: utils_1.Images.successIcon, buttonText: "Close", onButtonPress: handleSuccessNotificationClose }))] }));
};
exports.default = Save;
const styles = react_native_1.StyleSheet.create({
textFoot: {
fontFamily: 'Gordita-Regular',
fontSize: (0, utils_1.fontSz)(16),
color: utils_1.Colors.gray500,
fontWeight: '400',
},
resetPin: {
fontFamily: 'Gordita-Medium',
fontSize: (0, utils_1.fontSz)(16),
fontWeight: '500',
},
});