import { Button } from '@/components/ui/button'; import { Label } from '@/components/ui/label'; import { Textarea } from '@/components/ui/textarea'; import { Input } from '@/components/ui/input'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import { Badge } from '@/components/ui/badge'; import { Save, CreditCard, AlertCircle, Banknote, IndianRupee, Wallet, Coins, Search, X } from 'lucide-react'; import { PAYMENT_METHODS, PAYMENT_METHOD_LABELS, PAYMENT_METHOD_HELP_URLS } from '@/utils/payment'; import { SettingsSection } from '@/components/settings-section'; import { Alert, AlertDescription } from '@/components/ui/alert'; import { useTranslation } from 'react-i18next'; import { useForm } from '@inertiajs/react'; import { toast } from '@/components/custom-toast'; import { useState, useMemo } from 'react'; import { PaymentMethodCard } from '@/components/payment/payment-method-card'; import { PaymentInputField } from '@/components/payment/payment-input-field'; import { PaymentModeSelector } from '@/components/payment/payment-mode-selector'; interface PaymentSettings { currency: string; currency_symbol: string; is_manually_enabled: boolean; is_bank_enabled: boolean; bank_detail: string; is_stripe_enabled: boolean; stripe_key: string; stripe_secret: string; is_paypal_enabled: boolean; paypal_mode: 'sandbox' | 'live'; paypal_client_id: string; paypal_secret_key: string; is_razorpay_enabled: boolean; razorpay_key: string; razorpay_secret: string; is_mercadopago_enabled: boolean; mercadopago_mode: 'sandbox' | 'live'; mercadopago_access_token: string; is_paystack_enabled: boolean; paystack_public_key: string; paystack_secret_key: string; is_flutterwave_enabled: boolean; flutterwave_public_key: string; flutterwave_secret_key: string; is_tap_enabled: boolean; tap_secret_key: string; is_xendit_enabled: boolean; xendit_api_key: string; is_paytr_enabled: boolean; paytr_merchant_id: string; paytr_merchant_key: string; paytr_merchant_salt: string; is_mollie_enabled: boolean; mollie_api_key: string; is_toyyibpay_enabled: boolean; toyyibpay_category_code: string; toyyibpay_secret_key: string; is_paymentwall_enabled: boolean; paymentwall_public_key: string; paymentwall_private_key: string; is_sspay_enabled: boolean; sspay_secret_key: string; sspay_category_code: string; is_benefit_enabled: boolean; benefit_mode: string; benefit_secret_key: string; benefit_public_key: string; is_iyzipay_enabled: boolean; iyzipay_mode: string; iyzipay_secret_key: string; iyzipay_public_key: string; is_aamarpay_enabled: boolean; aamarpay_store_id: string; aamarpay_signature: string; is_midtrans_enabled: boolean; midtrans_mode: string; midtrans_secret_key: string; is_yookassa_enabled: boolean; yookassa_shop_id: string; yookassa_secret_key: string; is_nepalste_enabled: boolean; nepalste_mode: string; nepalste_secret_key: string; nepalste_public_key: string; is_paiement_enabled: boolean; paiement_merchant_id: string; is_cinetpay_enabled: boolean; cinetpay_site_id: string; cinetpay_api_key: string; cinetpay_secret_key: string; is_payhere_enabled: boolean; payhere_mode: string; payhere_merchant_id: string; payhere_merchant_secret: string; payhere_app_id: string; payhere_app_secret: string; is_fedapay_enabled: boolean; fedapay_mode: string; fedapay_secret_key: string; fedapay_public_key: string; is_authorizenet_enabled: boolean; authorizenet_mode: string; authorizenet_merchant_id: string; authorizenet_transaction_key: string; is_khalti_enabled: boolean; khalti_secret_key: string; khalti_public_key: string; is_easebuzz_enabled: boolean; easebuzz_merchant_key: string; easebuzz_salt_key: string; easebuzz_environment: string; is_ozow_enabled: boolean; ozow_mode: string; ozow_site_key: string; ozow_private_key: string; ozow_api_key: string; is_cashfree_enabled: boolean; cashfree_mode: string; cashfree_secret_key: string; cashfree_public_key: string; is_paytabs_enabled: boolean; paytabs_profile_id: string; paytabs_server_key: string; paytabs_region: string; paytabs_mode: 'sandbox' | 'live'; is_skrill_enabled: boolean; skrill_merchant_id: string; skrill_secret_word: string; is_coingate_enabled: boolean; coingate_api_token: string; coingate_mode: 'sandbox' | 'live'; is_payfast_enabled: boolean; payfast_merchant_id: string; payfast_merchant_key: string; payfast_passphrase: string; payfast_mode: 'sandbox' | 'live'; } interface PaymentSettingsProps { settings?: any; } export default function PaymentSettings({ settings = {} }: PaymentSettingsProps) { const { t } = useTranslation(); const [searchTerm, setSearchTerm] = useState(''); const [statusFilter, setStatusFilter] = useState<'all' | 'enabled' | 'disabled'>('all'); // Form state const { data, setData, post, processing, errors } = useForm({ currency: settings.currency || 'USD', currency_symbol: settings.currency_symbol || '$', is_manually_enabled: settings.is_manually_enabled === true || settings.is_manually_enabled === '1', is_bank_enabled: settings.is_bank_enabled === true || settings.is_bank_enabled === '1', bank_detail: settings.bank_detail || '', is_stripe_enabled: settings.is_stripe_enabled === true || settings.is_stripe_enabled === '1', stripe_key: settings.stripe_key || '', stripe_secret: settings.stripe_secret || '', is_paypal_enabled: settings.is_paypal_enabled === true || settings.is_paypal_enabled === '1', paypal_mode: settings.paypal_mode || 'sandbox', paypal_client_id: settings.paypal_client_id || '', paypal_secret_key: settings.paypal_secret_key || '', is_razorpay_enabled: settings.is_razorpay_enabled === true || settings.is_razorpay_enabled === '1', razorpay_key: settings.razorpay_key || '', razorpay_secret: settings.razorpay_secret || '', is_mercadopago_enabled: settings.is_mercadopago_enabled === true || settings.is_mercadopago_enabled === '1', mercadopago_mode: settings.mercadopago_mode || 'sandbox', mercadopago_access_token: settings.mercadopago_access_token || '', is_paystack_enabled: settings.is_paystack_enabled === true || settings.is_paystack_enabled === '1', paystack_public_key: settings.paystack_public_key || '', paystack_secret_key: settings.paystack_secret_key || '', is_flutterwave_enabled: settings.is_flutterwave_enabled === true || settings.is_flutterwave_enabled === '1', flutterwave_public_key: settings.flutterwave_public_key || '', flutterwave_secret_key: settings.flutterwave_secret_key || '', is_tap_enabled: settings.is_tap_enabled === true || settings.is_tap_enabled === '1', tap_secret_key: settings.tap_secret_key || '', is_xendit_enabled: settings.is_xendit_enabled === true || settings.is_xendit_enabled === '1', xendit_api_key: settings.xendit_api_key || '', is_paytr_enabled: settings.is_paytr_enabled === true || settings.is_paytr_enabled === '1', paytr_merchant_id: settings.paytr_merchant_id || '', paytr_merchant_key: settings.paytr_merchant_key || '', paytr_merchant_salt: settings.paytr_merchant_salt || '', is_mollie_enabled: settings.is_mollie_enabled === true || settings.is_mollie_enabled === '1', mollie_api_key: settings.mollie_api_key || '', is_toyyibpay_enabled: settings.is_toyyibpay_enabled === true || settings.is_toyyibpay_enabled === '1', toyyibpay_category_code: settings.toyyibpay_category_code || '', toyyibpay_secret_key: settings.toyyibpay_secret_key || '', is_paymentwall_enabled: settings.is_paymentwall_enabled === true || settings.is_paymentwall_enabled === '1', paymentwall_public_key: settings.paymentwall_public_key || '', paymentwall_private_key: settings.paymentwall_private_key || '', is_sspay_enabled: settings.is_sspay_enabled === true || settings.is_sspay_enabled === '1', sspay_secret_key: settings.sspay_secret_key || '', sspay_category_code: settings.sspay_category_code || '', is_benefit_enabled: settings.is_benefit_enabled === true || settings.is_benefit_enabled === '1', benefit_mode: settings.benefit_mode || 'sandbox', benefit_secret_key: settings.benefit_secret_key || '', benefit_public_key: settings.benefit_public_key || '', is_iyzipay_enabled: settings.is_iyzipay_enabled === true || settings.is_iyzipay_enabled === '1', iyzipay_mode: settings.iyzipay_mode || 'sandbox', iyzipay_secret_key: settings.iyzipay_secret_key || '', iyzipay_public_key: settings.iyzipay_public_key || '', is_aamarpay_enabled: settings.is_aamarpay_enabled === true || settings.is_aamarpay_enabled === '1', aamarpay_store_id: settings.aamarpay_store_id || '', aamarpay_signature: settings.aamarpay_signature || '', is_midtrans_enabled: settings.is_midtrans_enabled === true || settings.is_midtrans_enabled === '1', midtrans_mode: settings.midtrans_mode || 'sandbox', midtrans_secret_key: settings.midtrans_secret_key || '', is_yookassa_enabled: settings.is_yookassa_enabled === true || settings.is_yookassa_enabled === '1', yookassa_shop_id: settings.yookassa_shop_id || '', yookassa_secret_key: settings.yookassa_secret_key || '', is_nepalste_enabled: settings.is_nepalste_enabled === true || settings.is_nepalste_enabled === '1', nepalste_mode: settings.nepalste_mode || 'sandbox', nepalste_secret_key: settings.nepalste_secret_key || '', nepalste_public_key: settings.nepalste_public_key || '', is_paiement_enabled: settings.is_paiement_enabled === true || settings.is_paiement_enabled === '1', paiement_merchant_id: settings.paiement_merchant_id || '', is_cinetpay_enabled: settings.is_cinetpay_enabled === true || settings.is_cinetpay_enabled === '1', cinetpay_site_id: settings.cinetpay_site_id || '', cinetpay_api_key: settings.cinetpay_api_key || '', cinetpay_secret_key: settings.cinetpay_secret_key || '', is_payhere_enabled: settings.is_payhere_enabled === true || settings.is_payhere_enabled === '1', payhere_mode: settings.payhere_mode || 'sandbox', payhere_merchant_id: settings.payhere_merchant_id || '', payhere_merchant_secret: settings.payhere_merchant_secret || '', payhere_app_id: settings.payhere_app_id || '', payhere_app_secret: settings.payhere_app_secret || '', is_fedapay_enabled: settings.is_fedapay_enabled === true || settings.is_fedapay_enabled === '1', fedapay_mode: settings.fedapay_mode || 'sandbox', fedapay_secret_key: settings.fedapay_secret_key || '', fedapay_public_key: settings.fedapay_public_key || '', is_authorizenet_enabled: settings.is_authorizenet_enabled === true || settings.is_authorizenet_enabled === '1', authorizenet_mode: settings.authorizenet_mode || 'sandbox', authorizenet_merchant_id: settings.authorizenet_merchant_id || '', authorizenet_transaction_key: settings.authorizenet_transaction_key || '', is_khalti_enabled: settings.is_khalti_enabled === true || settings.is_khalti_enabled === '1', khalti_secret_key: settings.khalti_secret_key || '', khalti_public_key: settings.khalti_public_key || '', is_easebuzz_enabled: settings.is_easebuzz_enabled === true || settings.is_easebuzz_enabled === '1', easebuzz_merchant_key: settings.easebuzz_merchant_key || '', easebuzz_salt_key: settings.easebuzz_salt_key || '', easebuzz_environment: settings.easebuzz_environment || '', is_ozow_enabled: settings.is_ozow_enabled === true || settings.is_ozow_enabled === '1', ozow_mode: settings.ozow_mode || 'sandbox', ozow_site_key: settings.ozow_site_key || '', ozow_private_key: settings.ozow_private_key || '', ozow_api_key: settings.ozow_api_key || '', is_cashfree_enabled: settings.is_cashfree_enabled === true || settings.is_cashfree_enabled === '1', cashfree_mode: settings.cashfree_mode || 'sandbox', cashfree_secret_key: settings.cashfree_secret_key || '', cashfree_public_key: settings.cashfree_public_key || '', is_paytabs_enabled: settings.is_paytabs_enabled === true || settings.is_paytabs_enabled === '1', paytabs_profile_id: settings.paytabs_profile_id || '', paytabs_server_key: settings.paytabs_server_key || '', paytabs_region: settings.paytabs_region || 'ARE', paytabs_mode: settings.paytabs_mode || 'sandbox', is_skrill_enabled: settings.is_skrill_enabled === true || settings.is_skrill_enabled === '1', skrill_merchant_id: settings.skrill_merchant_id || '', skrill_secret_word: settings.skrill_secret_word || '', is_coingate_enabled: settings.is_coingate_enabled === true || settings.is_coingate_enabled === '1', coingate_api_token: settings.coingate_api_token || '', coingate_mode: settings.coingate_mode || 'sandbox', is_payfast_enabled: settings.is_payfast_enabled === true || settings.is_payfast_enabled === '1', payfast_merchant_id: settings.payfast_merchant_id || '', payfast_merchant_key: settings.payfast_merchant_key || '', payfast_passphrase: settings.payfast_passphrase || '', payfast_mode: settings.payfast_mode || 'sandbox', }); // Payment methods data for search const paymentMethods = useMemo(() => [ { key: 'bank', name: t(PAYMENT_METHOD_LABELS[PAYMENT_METHODS.BANK]) }, { key: 'stripe', name: t(PAYMENT_METHOD_LABELS[PAYMENT_METHODS.STRIPE]) }, { key: 'paypal', name: t(PAYMENT_METHOD_LABELS[PAYMENT_METHODS.PAYPAL]) }, { key: 'razorpay', name: t(PAYMENT_METHOD_LABELS[PAYMENT_METHODS.RAZORPAY]) }, { key: 'mercadopago', name: t(PAYMENT_METHOD_LABELS[PAYMENT_METHODS.MERCADOPAGO]) }, { key: 'paystack', name: t(PAYMENT_METHOD_LABELS[PAYMENT_METHODS.PAYSTACK]) }, { key: 'flutterwave', name: t(PAYMENT_METHOD_LABELS[PAYMENT_METHODS.FLUTTERWAVE]) }, { key: 'paytabs', name: t(PAYMENT_METHOD_LABELS[PAYMENT_METHODS.PAYTABS]) }, { key: 'skrill', name: t(PAYMENT_METHOD_LABELS[PAYMENT_METHODS.SKRILL]) }, { key: 'coingate', name: t(PAYMENT_METHOD_LABELS[PAYMENT_METHODS.COINGATE]) }, { key: 'payfast', name: t(PAYMENT_METHOD_LABELS[PAYMENT_METHODS.PAYFAST]) }, { key: 'tap', name: t(PAYMENT_METHOD_LABELS[PAYMENT_METHODS.TAP]) }, { key: 'xendit', name: t(PAYMENT_METHOD_LABELS[PAYMENT_METHODS.XENDIT]) }, { key: 'paytr', name: t(PAYMENT_METHOD_LABELS[PAYMENT_METHODS.PAYTR]) }, { key: 'mollie', name: t(PAYMENT_METHOD_LABELS[PAYMENT_METHODS.MOLLIE]) }, { key: 'toyyibpay', name: t(PAYMENT_METHOD_LABELS[PAYMENT_METHODS.TOYYIBPAY]) }, { key: 'paymentwall', name: t('PaymentWall') }, { key: 'sspay', name: t('SSPay') }, { key: 'benefit', name: t('Benefit') }, { key: 'iyzipay', name: t('Iyzipay') }, { key: 'aamarpay', name: t('Aamarpay') }, { key: 'midtrans', name: t('Midtrans') }, { key: 'yookassa', name: t('YooKassa') }, { key: 'nepalste', name: t('Nepalste') }, { key: 'paiement', name: t('Paiement Pro') }, { key: 'cinetpay', name: t('CinetPay') }, { key: 'payhere', name: t('PayHere') }, { key: 'fedapay', name: t('FedaPay') }, { key: 'authorizenet', name: t('AuthorizeNet') }, { key: 'khalti', name: t('Khalti') }, { key: 'easebuzz', name: t('Easebuzz') }, { key: 'ozow', name: t('Ozow') }, { key: 'cashfree', name: t('Cashfree') }, ], [t]); // Filter payment methods based on search and status const filteredMethods = useMemo(() => { let filtered = paymentMethods; // Filter by search term if (searchTerm) { filtered = filtered.filter(method => method.name.toLowerCase().includes(searchTerm.toLowerCase()) ); } // Filter by status if (statusFilter !== 'all') { filtered = filtered.filter(method => { const isEnabled = data[`is_${method.key}_enabled` as keyof PaymentSettings] as boolean; return statusFilter === 'enabled' ? isEnabled : !isEnabled; }); } return filtered; }, [paymentMethods, searchTerm, statusFilter, data]); // Check if method should be shown const shouldShowMethod = (methodKey: string) => { return filteredMethods.some(m => m.key === methodKey); }; // Handle form submission const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); post(route('payment.settings'), { onSuccess: (page) => { const successMessage = page.props.flash?.success; const errorMessage = page.props.flash?.error; if (successMessage) { toast.success(successMessage); } else if (errorMessage) { toast.error(errorMessage); } }, onError: (errors) => { toast.error(t('Failed to update payment settings')); } }); }; return ( {processing ? t("Saving...") : t("Save Changes")} } >
{/* Payment Methods */} {t("Payment Methods")} {t("Configure available payment methods for subscription plans")} {/* Search and Filter Controls */}
setSearchTerm(e.target.value)} className="pl-10 pr-10" /> {searchTerm && ( )}
{/* Active Filters */} {(searchTerm || statusFilter !== 'all') && (
{t("Active filters:")} {searchTerm && ( {t("Search:")} "{searchTerm}" )} {statusFilter !== 'all' && ( {t("Status:")} {statusFilter === 'enabled' ? t("Enabled") : t("Disabled")} )}
)} {/* Results Summary & No Results */} {(searchTerm || statusFilter !== 'all') && (
{filteredMethods.length > 0 ? t("Showing {{count}} of {{total}} payment methods", { count: filteredMethods.length, total: paymentMethods.length }) : t("No payment methods found matching your criteria") }
)} {(searchTerm || statusFilter !== 'all') && filteredMethods.length === 0 && (

{t("No results found")}

{t("Try adjusting your search or filter criteria")}

)} {/* Bank Transfer */} {shouldShowMethod('bank') && ( } enabled={data.is_bank_enabled} onToggle={(checked) => setData('is_bank_enabled', checked)} >