page.tsx

Go to the documentation of this file.

'use client';
 
import React, { useState, useEffect } from 'react';
import { Icon } from '@/contexts/IconContext';
 
interface PaymentType {
  Code: number;
  CustSpell: string;
  OnlineFlags: number;
  GlobalCode?: number;
  RateBuy?: string;
  ForeignChangeDt?: string;
  Deleted?: number;
  PrintOnReceipts?: number;
  OpenCashDrawer?: number;
  AffectsCash?: number;
  IssuesChange?: number;
  ObeysRounding?: number;
  AccountDebit?: number;
  AccountCredit?: number;
  RewardLinked?: number;
  SVC?: number;
  NoLoyalty?: number;
  ItemiseEOD?: number;
  NegativeEffect?: number;
  Invisible?: number;
}
 
interface Membership {
  MembershipKey: string;
  Name: string;
  AmOwner: boolean;
}
 
interface PaymentSetting {
  KeyName: string;
  Value: string;
  MembershipKey: string;
}
 
interface PredefinedPaymentType {
  id: number;
  name: string;
  description?: string;
  link?: string;
  warning?: string;
}
 
export default function PaymentTypesPage() {
  const [paymentTypes, setPaymentTypes] = useState<PaymentType[]>([]);
  const [memberships, setMemberships] = useState<Membership[]>([]);
  const [paymentSettings, setPaymentSettings] = useState<PaymentSetting[]>([]);
  const [foreignEnabled, setForeignEnabled] = useState(false);
  const [editingPaymentType, setEditingPaymentType] = useState<PaymentType | null>(null);
  const [showEditModal, setShowEditModal] = useState(false);
  const [showAddModal, setShowAddModal] = useState(false);
  const [addingPaymentType, setAddingPaymentType] = useState<PredefinedPaymentType | null>(null);
  const [laybuyMerchRef, setLaybuyMerchRef] = useState('');
  const [laybuyApiKey, setLaybuyApiKey] = useState('');
 
  useEffect(() => {
    loadData();
  }, []);
 
  const loadData = async () => {
    try {
      // Load payment types
      // const response = await fetch('/api/payment-types');
      // const data = await response.json();
      // setPaymentTypes(data);
 
      // Mock data for demonstration
      const mockPaymentTypes: PaymentType[] = [
        { Code: 1, CustSpell: 'Cash', OnlineFlags: 0, GlobalCode: 1, PrintOnReceipts: 1, OpenCashDrawer: 1, AffectsCash: 1, IssuesChange: 1, ObeysRounding: 1 },
        { Code: 2, CustSpell: 'Cheque', OnlineFlags: 0, GlobalCode: 2, PrintOnReceipts: 1, ItemiseEOD: 1 },
        { Code: 3, CustSpell: 'EFTPOS', OnlineFlags: 0, GlobalCode: 3, PrintOnReceipts: 1, ItemiseEOD: 1 },
        { Code: 4, CustSpell: 'Verified Cheque', OnlineFlags: 0, GlobalCode: 4, PrintOnReceipts: 1 },
        { Code: 5, CustSpell: 'EFTPOS failure', OnlineFlags: 0, GlobalCode: 5 },
        { Code: 6, CustSpell: 'Change', OnlineFlags: 0, GlobalCode: 6 },
        { Code: 7, CustSpell: 'Rounding', OnlineFlags: 0, GlobalCode: 7 },
        { Code: 8, CustSpell: 'Return Refund', OnlineFlags: 0, GlobalCode: 8 },
        { Code: 9, CustSpell: 'Credit Card', OnlineFlags: 0, GlobalCode: 9, PrintOnReceipts: 1, ItemiseEOD: 1 },
        { Code: 10, CustSpell: 'Credit Card failure', OnlineFlags: 0, GlobalCode: 10 },
        { Code: 11, CustSpell: 'Sale discount', OnlineFlags: 0, GlobalCode: 11 },
        { Code: 20, CustSpell: 'Account', OnlineFlags: 0, GlobalCode: 200, PrintOnReceipts: 1, AccountDebit: 1 },
        { Code: 21, CustSpell: 'Voucher', OnlineFlags: 0 },
        { Code: 22, CustSpell: 'Direct Debit', OnlineFlags: 0 },
      ];
      setPaymentTypes(mockPaymentTypes);
 
      // Load memberships
      const mockMemberships: Membership[] = [
        { MembershipKey: 'membership1', Name: 'Agency', AmOwner: true }
      ];
      setMemberships(mockMemberships);
 
      // Load payment settings
      setPaymentSettings([]);
 
      // Load foreign currency setting
      setForeignEnabled(false);
 
    } catch (error) {
      console.error('Error loading payment types:', error);
    }
  };
 
  const canEnableOnline = (paymentType: PaymentType): boolean => {
    const disabledCodes = [5, 6, 7, 8, 10, 11];
    const disabledGlobalCodes = [164001];
    
    if (disabledCodes.includes(paymentType.Code)) return false;
    if (paymentType.GlobalCode && disabledGlobalCodes.includes(paymentType.GlobalCode)) return false;
    
    return true;
  };
 
  const handleToggleOnline = (index: number) => {
    const paymentType = paymentTypes[index];
    const newValue = paymentType.OnlineFlags ? 0 : 1;
    
    console.log('Toggle online for payment type:', paymentType.Code, 'to', newValue);
    
    // Update local state
    const updated = [...paymentTypes];
    updated[index] = { ...updated[index], OnlineFlags: newValue };
    setPaymentTypes(updated);
 
    // Save to API
    // API call would go here
  };
 
  const handleSaveRate = (paymentTypeId: number, index: number, value: string) => {
    const paymentType = paymentTypes[index];
    if (paymentType.RateBuy === value) return;
 
    console.log('Save rate for payment type:', paymentTypeId, 'value:', value);
    
    // Update local state
    const updated = [...paymentTypes];
    updated[index] = { ...updated[index], RateBuy: value };
    setPaymentTypes(updated);
 
    // Save to API
  };
 
  const handleEditSettings = (index: number) => {
    setEditingPaymentType(paymentTypes[index]);
    setShowEditModal(true);
  };
 
  const handleSaveSettings = () => {
    if (!editingPaymentType) return;
 
    console.log('Saving payment type settings:', editingPaymentType);
 
    // Update in list
    const index = paymentTypes.findIndex(pt => pt.Code === editingPaymentType.Code);
    if (index >= 0) {
      const updated = [...paymentTypes];
      updated[index] = editingPaymentType;
      setPaymentTypes(updated);
    }
 
    // Save to API
    setShowEditModal(false);
    setEditingPaymentType(null);
  };
 
  const handleToggleMembership = (globalCode: number, membershipIndex: number, checked: boolean) => {
    console.log('Toggle membership:', globalCode, membershipIndex, checked);
    // Save to API
  };
 
  const handleAddPaymentType = (paymentType: PredefinedPaymentType) => {
    if (paymentType.id === 164001) {
      // Special handling for Laybuy
      const existing = paymentTypes.find(pt => pt.GlobalCode === 164001);
      if (existing) {
        setLaybuyMerchRef(existing.Code.toString()); // This would be Interface1
        setLaybuyApiKey(''); // This would be Interface2
      }
      setAddingPaymentType(paymentType);
      setShowAddModal(true);
    } else {
      // Check if foreign currency and not enabled
      if (!foreignEnabled && paymentType.id >= 300000 && paymentType.id <= 399999) {
        alert('Please enable foreign currency handling before attempting to add foreign currency payment types');
        return;
      }
      
      setAddingPaymentType(paymentType);
      setShowAddModal(true);
    }
  };
 
  const confirmAddPaymentType = () => {
    if (!addingPaymentType) return;
 
    console.log('Adding payment type:', addingPaymentType);
    
    // Add to API
    setShowAddModal(false);
    setAddingPaymentType(null);
    
    // Reload data
    loadData();
  };
 
  const handleSaveLaybuy = () => {
    if (laybuyMerchRef.length < 4) {
      alert('A merchant reference is required');
      return;
    }
    if (laybuyApiKey.length < 4) {
      alert('An API Key is required');
      return;
    }
 
    console.log('Saving Laybuy settings:', { laybuyMerchRef, laybuyApiKey });
    
    // Save to API
    setShowAddModal(false);
    setLaybuyMerchRef('');
    setLaybuyApiKey('');
    
    // Reload data
    loadData();
  };
 
  const predefinedPaymentTypes: PredefinedPaymentType[] = [
    { id: 161001, name: 'ZipPay' },
    { id: 164001, name: 'Laybuy.com', link: 'https://laybuy.com' },
    { id: 164002, name: 'Farmlands Card' },
    { id: 164003, name: 'Ruralco Card' },
    { id: 164004, name: 'MTA Voucher' },
    { id: 164005, name: 'C.R.T.' },
    { id: 164006, name: 'TradeMe Ping' },
    { id: 564000, name: 'Web Sale', description: 'Externally paid web sale' },
    { id: 164007, name: 'Bartercard (NZ)' },
    { id: 164008, name: 'Genoapay (NZ)' },
    { id: 164009, name: 'Gem Finance (NZ)' },
    { id: 200100, name: 'Direct Bank Transfer' },
    { id: 200101, name: 'Manual Eftpos' },
    { id: 200102, name: 'AMEX' },
    { id: 200103, name: 'Diners' },
    { id: 200104, name: 'Union Pay' },
    { id: 200105, name: 'Agency Payment' },
    { id: 200106, name: 'WeChat Pay' },
    { id: 200107, name: 'Alipay' },
    { id: 200108, name: 'PxPay' },
    { id: 200114, name: 'PxFusion' },
    { id: 200115, name: 'Store Discount Voucher', warning: 'This payment type has side effects with sales handling. Check documentation' },
    { id: 200109, name: 'Windcave', description: 'Manual Entry' },
    { id: 200111, name: 'Manual Customer Credit' },
    { id: 200112, name: 'Shopify' },
    { id: 200113, name: 'EAN-99 Coupon', description: 'Reserved for manufacturer cash off coupons' },
    { id: 200120, name: 'Wise.com NZ$', link: 'https://wise.com' },
    { id: 200121, name: 'Wise.com AU$', link: 'https://wise.com' },
    { id: 200122, name: 'Wise.com UK£', link: 'https://wise.com' },
    { id: 200123, name: 'Wise.com CAD$', link: 'https://wise.com' },
    { id: 200124, name: 'Wise.com Euro €', link: 'https://wise.com' },
    { id: 200125, name: 'Wise.com US$', link: 'https://wise.com' },
    { id: 200130, name: 'PayPal' },
  ];
 
  const foreignCurrencyTypes: PredefinedPaymentType[] = [
    { id: 300062, name: 'Australian Dollar' },
    { id: 309001, name: 'Canadian Dollar' },
    { id: 309997, name: 'Euro' },
    { id: 300081, name: 'Japanese Yen' },
    { id: 300044, name: 'UK Pound' },
    { id: 300001, name: 'US Dollars' },
  ];
 
  const isPaymentTypeAdded = (id: number): boolean => {
    return paymentTypes.some(pt => pt.GlobalCode === id || pt.Code === id);
  };
 
  const formatDateTime = (dateStr?: string) => {
    if (!dateStr) return '';
    const date = new Date(dateStr);
    return date.toLocaleDateString() + ' ' + date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
  };
 
  return (
    <div className="min-h-screen bg-bg">
      {/* Header */}
      <div className="bg-brand text-surface px-6 py-4 shadow-lg">
        <div className="flex items-center gap-4">
          <div className="text-sm">
            <a href="/pages/settings" className="hover:underline">Settings</a>
            <span className="mx-2">›</span>
            <span>Payment Types</span>
          </div>
        </div>
      </div>
 
      <div className="max-w-[1600px] mx-auto p-6">
        {/* Page Title */}
        <div className="mb-6">
          <h1 className="text-3xl font-bold text-text mb-2 flex items-center gap-3">
            <Icon name="payments" size={32} className="text-brand" />
            Configure Payment Types
          </h1>
          <div className="text-sm text-muted">
            <a href="https://fieldpine.com/docs/database/db_r_paymenttypes.htm" target="_blank" className="text-brand hover:underline">
              Database structure (technical)
            </a>
          </div>
        </div>
 
        {/* Current Payment Types */}
        <div className="bg-surface rounded-lg shadow-md p-6 mb-8">
          <h2 className="text-xl font-bold text-text mb-4">Current Payment Types</h2>
          
          <div className="overflow-x-auto">
            <table className="min-w-full border-collapse">
              <thead>
                <tr className="bg-surface-2 border-b-2 border-border">
                  <th className="px-4 py-3 text-left text-sm font-semibold text-text">ID</th>
                  <th className="px-4 py-3 text-left text-sm font-semibold text-text">Description</th>
                  <th className="px-4 py-3 text-left text-sm font-semibold text-text">Fieldpine Online Enabled</th>
                  {foreignEnabled && <th className="px-4 py-3 text-left text-sm font-semibold text-text">Rate Buy</th>}
                  <th className="px-4 py-3 text-left text-sm font-semibold text-text">Options</th>
                  <th className="px-4 py-3 text-left text-sm font-semibold text-text">Notes</th>
                  <th className="px-4 py-3 text-left text-sm font-semibold text-text">GlobalCode</th>
                  {memberships.map((membership, idx) => (
                    <th key={idx} className="px-4 py-3 text-left text-sm font-semibold text-text">
                      Publish to<br />Membership:<br />{membership.Name}
                    </th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {paymentTypes.map((paymentType, index) => {
                  const canEnable = canEnableOnline(paymentType);
                  const notes: string[] = [];
                  if (paymentType.GlobalCode === 164001) notes.push('Not supported by Fieldpine Online');
                  if (paymentType.Deleted) notes.push('Deleted');
                  
                  return (
                    <tr key={paymentType.Code} className="border-b border-border hover:bg-surface-2">
                      <td className="px-4 py-3 text-sm text-muted">{paymentType.Code}</td>
                      <td className="px-4 py-3 text-sm font-medium text-text">{paymentType.CustSpell}</td>
                      <td className="px-4 py-3">
                        {canEnable ? (
                          <label className="relative inline-flex items-center cursor-pointer">
                            <input
                              type="checkbox"
                              className="sr-only peer"
                              checked={paymentType.OnlineFlags === 1}
                              onChange={() => handleToggleOnline(index)}
                            />
                            <div className="w-11 h-6 bg-surface-2 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brand/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-surface after:border-border after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-brand"></div>
                          </label>
                        ) : null}
                      </td>
                      {foreignEnabled && (
                        <td className="px-4 py-3">
                          {paymentType.Code >= 300000 && paymentType.Code <= 399999 ? (
                            <div>
                              <input
                                type="text"
                                size={8}
                                value={paymentType.RateBuy || ''}
                                onChange={(e) => {
                                  const updated = [...paymentTypes];
                                  updated[index] = { ...updated[index], RateBuy: e.target.value };
                                  setPaymentTypes(updated);
                                }}
                                onBlur={(e) => handleSaveRate(paymentType.Code, index, e.target.value)}
                                className="border border-border rounded px-2 py-1 text-sm"
                              />
                              <div className="text-xs text-muted mt-1">
                                {formatDateTime(paymentType.ForeignChangeDt)}
                              </div>
                            </div>
                          ) : null}
                        </td>
                      )}
                      <td className="px-4 py-3">
                        <button
                          onClick={() => handleEditSettings(index)}
                          className="px-3 py-1 bg-brand text-surface rounded hover:bg-brand2 text-sm"
                        >
                          Settings
                        </button>
                      </td>
                      <td className="px-4 py-3 text-sm text-muted">{notes.join('; ')}</td>
                      <td className="px-4 py-3 text-sm text-muted">{paymentType.GlobalCode || ''}</td>
                      {memberships.map((membership, mIdx) => (
                        <td key={mIdx} className="px-4 py-3">
                          {paymentType.GlobalCode ? (
                            <label className="flex items-center">
                              <input
                                type="checkbox"
                                onChange={(e) => handleToggleMembership(paymentType.GlobalCode!, mIdx, e.target.checked)}
                                className="w-4 h-4 text-brand border-border rounded focus:ring-brand"
                              />
                              <span className="ml-2 text-sm">Publish</span>
                            </label>
                          ) : null}
                        </td>
                      ))}
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        </div>
 
        {/* Add New Payment Types */}
        <div className="bg-surface rounded-lg shadow-md p-6 mb-8">
          <h2 className="text-xl font-bold text-text mb-4">Enable New Payment Types</h2>
          
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
            {predefinedPaymentTypes.filter(pt => !isPaymentTypeAdded(pt.id)).map(paymentType => (
              <div key={paymentType.id} className="border border-border rounded-lg p-4 hover:shadow-md transition-shadow cursor-pointer">
                <button
                  onClick={() => handleAddPaymentType(paymentType)}
                  className="text-[#00946b] hover:text-[#00543b] font-medium text-left w-full cursor-pointer"
                >
                  {paymentType.name}
                  {paymentType.description && <div className="text-sm text-muted mt-1">{paymentType.description}</div>}
                </button>
                {paymentType.link && (
                  <div className="mt-2">
                    <a href={paymentType.link} target="_blank" className="text-xs text-[#00946b] hover:underline">
                      Visit {paymentType.name}
                    </a>
                  </div>
                )}
                <div className="text-xs text-muted mt-2">(#{paymentType.id})</div>
              </div>
            ))}
          </div>
          
          <p className="text-sm text-muted mt-6">
            Need a new payment type added? Payment types are allocated by Fieldpine to ensure reports can properly classify them. 
            If you need a new payment type, please contact your Fieldpine agent to request it be added.
          </p>
        </div>
 
        {/* Foreign Currency */}
        <div className="bg-surface rounded-lg shadow-md p-6">
          <h3 className="text-lg font-bold text-text mb-4">Foreign Currency</h3>
          
          <p className="text-sm text-muted mb-4">
            Enable foreign currency only when you accept these as <u>cash</u> and they are <em>not</em> the normal currency in your country
          </p>
          
          <div className="flex items-start gap-4 mb-6">
            <label className="relative inline-flex items-center cursor-pointer">
              <input
                type="checkbox"
                className="sr-only peer"
                checked={foreignEnabled}
                onChange={(e) => setForeignEnabled(e.target.checked)}
              />
              <div className="w-11 h-6 bg-surface-2 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brand/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-surface after:border-border after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-brand"></div>
            </label>
            <div>
              <div className="font-medium text-text">Enable Foreign Currency Handling</div>
              <div className="text-sm text-muted">You may need to manually maintain exchange rates for the POS to use.</div>
            </div>
          </div>
 
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
            {foreignCurrencyTypes.filter(pt => !isPaymentTypeAdded(pt.id)).map(paymentType => (
              <div key={paymentType.id} className="border border-border rounded-lg p-4 hover:shadow-md transition-shadow cursor-pointer">
                <button
                  onClick={() => handleAddPaymentType(paymentType)}
                  className="text-[#00946b] hover:text-[#00543b] font-medium text-left w-full cursor-pointer"
                  disabled={!foreignEnabled}
                >
                  {paymentType.name}
                </button>
                <div className="text-xs text-muted mt-2">(#{paymentType.id})</div>
              </div>
            ))}
          </div>
        </div>
      </div>
 
      {/* Edit Settings Modal */}
      {showEditModal && editingPaymentType && (
        <div className="fixed inset-0 bg-black/30 backdrop-blur-sm flex items-center justify-center z-50 p-4">
          <div className="bg-surface/95 rounded-lg shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
            <div className="sticky top-0 bg-brand text-surface px-6 py-4 flex items-center justify-between rounded-t-lg">
              <h2 className="text-xl font-bold">{editingPaymentType.CustSpell}</h2>
              <button onClick={() => setShowEditModal(false)} className="text-surface hover:text-muted/70">
                <Icon name="close" size={24} />
              </button>
            </div>
            
            <div className="p-6">
              <table className="w-full">
                <tbody>
                  {[
                    { key: 'PrintOnReceipts', label: 'Printed on receipts' },
                    { key: 'OpenCashDrawer', label: 'Open Cash drawer' },
                    { key: 'AffectsCash', label: 'Affects Cash' },
                    { key: 'IssuesChange', label: 'Issues Change' },
                    { key: 'ObeysRounding', label: 'Obeys rounding rules' },
                    { key: 'AccountDebit', label: 'Account debit' },
                    { key: 'AccountCredit', label: 'Account credit' },
                    { key: 'RewardLinked', label: 'Reward linked' },
                    { key: 'SVC', label: 'Prepay' },
                    { key: 'NoLoyalty', label: 'No loyalty' },
                    { key: 'ItemiseEOD', label: 'Itemise on end of day' },
                    { key: 'NegativeEffect', label: 'Negative sale effect' },
                    { key: 'Invisible', label: 'Hidden/Invisible' },
                    { key: 'Deleted', label: 'Deleted' },
                  ].map(field => (
                    <tr key={field.key}>
                      <td className="py-2 pr-4 text-text">{field.label}</td>
                      <td className="py-2">
                        <input
                          type="checkbox"
                          checked={(editingPaymentType as any)[field.key] === 1}
                          onChange={(e) => {
                            setEditingPaymentType({
                              ...editingPaymentType,
                              [field.key]: e.target.checked ? 1 : 0
                            });
                          }}
                          className="w-4 h-4 text-[#00946b] border-border rounded focus:ring-[#00946b]"
                        />
                      </td>
                    </tr>
                  ))}
                  <tr>
                    <td className="py-2 pr-4 text-text">Global Code</td>
                    <td className="py-2">
                      <input
                        type="text"
                        size={8}
                        value={editingPaymentType.GlobalCode || ''}
                        onChange={(e) => setEditingPaymentType({ ...editingPaymentType, GlobalCode: Number(e.target.value) || undefined })}
                        className="border border-border rounded px-2 py-1 text-sm"
                      />
                    </td>
                  </tr>
                </tbody>
              </table>
              
              <div className="mt-6 flex gap-3">
                <button
                  onClick={handleSaveSettings}
                  className="px-6 py-2 bg-brand text-surface rounded hover:bg-brand2 font-medium flex items-center gap-2"
                >
                  <Icon name="save" size={18} />
                  Save Changes
                </button>
                <button
                  onClick={() => setShowEditModal(false)}
                  className="px-6 py-2 bg-surface-2 text-text rounded hover:bg-surface-2/80 font-medium"
                >
                  Cancel
                </button>
              </div>
            </div>
          </div>
        </div>
      )}
 
      {/* Add Payment Type Modal */}
      {showAddModal && addingPaymentType && (
        <div className="fixed inset-0 bg-black/30 backdrop-blur-sm flex items-center justify-center z-50 p-4">
          <div className="bg-surface/95 rounded-lg shadow-2xl max-w-2xl w-full">
            <div className="sticky top-0 bg-brand text-surface px-6 py-4 flex items-center justify-between rounded-t-lg">
              <h2 className="text-xl font-bold">{addingPaymentType.name}</h2>
              <button onClick={() => setShowAddModal(false)} className="text-surface hover:text-muted/70">
                <Icon name="close" size={24} />
              </button>
            </div>
            
            <div className="p-6">
              {addingPaymentType.id === 164001 ? (
                // Laybuy special form
                <>
                  <p className="mb-4 text-text">
                    Laybuy.com allows customers to purchase using a hire purchase like system. 
                    You need to register with Laybuy.com and enter your details below.
                  </p>
                  <table className="w-full mb-4">
                    <tbody>
                      <tr>
                        <td className="py-2 pr-4 text-text">Merchant Reference</td>
                        <td className="py-2">
                          <input
                            type="text"
                            size={12}
                            value={laybuyMerchRef}
                            onChange={(e) => setLaybuyMerchRef(e.target.value)}
                            className="border border-border rounded px-3 py-1"
                          />
                        </td>
                      </tr>
                      <tr>
                        <td className="py-2 pr-4 text-text">API Key</td>
                        <td className="py-2">
                          <input
                            type="text"
                            size={70}
                            value={laybuyApiKey}
                            onChange={(e) => setLaybuyApiKey(e.target.value)}
                            className="border border-border rounded px-3 py-1 w-full"
                          />
                        </td>
                      </tr>
                    </tbody>
                  </table>
                  <div className="flex gap-3">
                    <button
                      onClick={handleSaveLaybuy}
                      className="px-6 py-2 bg-brand text-surface rounded hover:bg-brand2 font-medium flex items-center gap-2"
                    >
                      <Icon name="save" size={18} />
                      Save
                    </button>
                    <button
                      onClick={() => setShowAddModal(false)}
                      className="px-6 py-2 bg-surface-2 text-text rounded hover:bg-surface-2/80 font-medium"
                    >
                      Cancel
                    </button>
                  </div>
                </>
              ) : (
                // Standard add confirmation
                <>
                  <p className="mb-4 text-text">
                    Confirm to add payment type #{addingPaymentType.id} of "{addingPaymentType.name}"
                  </p>
                  {addingPaymentType.warning && (
                    <p className="mb-4 text-red-600 font-bold">{addingPaymentType.warning}</p>
                  )}
                  {addingPaymentType.id >= 300000 && addingPaymentType.id <= 399999 && (
                    <p className="mb-4 text-text">
                      This payment type is a foreign currency type.<br />
                      It should only be added when this is <em>not</em> the primary currency in your country.
                    </p>
                  )}
                  <div className="flex gap-3">
                    <button
                      onClick={confirmAddPaymentType}
                      className="px-6 py-2 bg-brand text-surface rounded hover:bg-brand2 font-medium flex items-center gap-2"
                    >
                      <Icon name="check" size={18} />
                      Yes. Add this payment type
                    </button>
                    <button
                      onClick={() => setShowAddModal(false)}
                      className="px-6 py-2 bg-surface-2 text-text rounded hover:bg-surface-2/80 font-medium"
                    >
                      Cancel
                    </button>
                  </div>
                </>
              )}
            </div>
          </div>
        </div>
      )}
    </div>
  );
}