page.tsx

Go to the documentation of this file.

'use client';
 
import React, { useState, useEffect } from 'react';
import { Icon } from '@/contexts/IconContext';
 
interface ProfileUsage {
  id: number;
  name: string;
  used: number;
}
 
interface ToggleSwitchProps {
  checked: boolean;
  onChange: (checked: boolean) => void;
  disabled?: boolean;
}
 
const ToggleSwitch: React.FC<ToggleSwitchProps> = ({ checked, onChange, disabled = false }) => {
  return (
    <label className="relative inline-block w-12 h-6">
      <input
        type="checkbox"
        checked={checked}
        onChange={(e) => onChange(e.target.checked)}
        disabled={disabled}
        className="sr-only peer"
      />
      <span className={`absolute inset-0 rounded-full transition-colors duration-300 cursor-pointer
        ${checked ? 'bg-brand' : 'bg-danger'}
        ${disabled ? 'opacity-30 cursor-not-allowed' : ''}
        peer-focus:ring-2 peer-focus:ring-brand`}>
        <span className={`absolute left-1 top-1 w-4 h-4 bg-surface rounded-full transition-transform duration-300
          ${checked ? 'translate-x-6' : 'translate-x-0'}`} />
      </span>
    </label>
  );
};
 
export default function EftposSettingsPage() {
  const [profiles, setProfiles] = useState<ProfileUsage[]>([
    { id: 0, name: 'No Profile', used: 0 },
    { id: 1, name: 'Profile 1', used: 0 },
    { id: 2, name: 'Profile 2', used: 0 },
    { id: 3, name: 'Profile 3', used: 0 },
    { id: 4, name: 'Profile 4', used: 0 },
    { id: 5, name: 'Profile 5', used: 0 },
    { id: 6, name: 'Profile 6', used: 0 },
    { id: 7, name: 'Profile 7', used: 0 },
    { id: 8, name: 'Profile 8', used: 0 },
  ]);
 
  // Settings state
  const [productData, setProductData] = useState<Record<number, boolean>>({});
  const [lowValueWarning, setLowValueWarning] = useState<Record<number, boolean>>({});
  const [cashWarning, setCashWarning] = useState<Record<number, string>>({});
  const [cashOutCopies, setCashOutCopies] = useState<Record<number, string>>({});
  const [extendedSlip, setExtendedSlip] = useState<Record<number, boolean>>({});
  const [versionWarning, setVersionWarning] = useState<Record<number, boolean>>({});
  const [eftRefund, setEftRefund] = useState<Record<number, boolean>>({});
  const [receiptInstant, setReceiptInstant] = useState<Record<number, string>>({});
  const [receiptInline, setReceiptInline] = useState<Record<number, string>>({});
 
  // Provider settings
  const [linklyUsername, setLinklyUsername] = useState('');
  const [linklyPassword, setLinklyPassword] = useState('');
 
  useEffect(() => {
    loadProfileUsage();
    loadSettings();
  }, []);
 
  const loadProfileUsage = () => {
    // API call: /BUCK?3=retailmax.elink.lane.summary&100=profileuse
    console.log('Loading profile usage...');
    // Mock data - would update profiles state with actual lane counts
  };
 
  const loadSettings = () => {
    // Load all settings for all profiles
    console.log('Loading EFTPOS settings...');
    // Would make multiple API calls to load each setting
  };
 
  const saveSetting = (settingName: string, profile: number, value: string | boolean) => {
    const suffix = profile === -1 ? '' : `@p${profile}`;
    const fullSettingName = `${settingName}${suffix}`;
    
    // API call: /DATI with XML payload
    const xml = `<DATI>
      <f8_s>retailmax.elink.config.basesetting.edit</f8_s>
      <f11_B>E</f11_B>
      <f100_s>${fullSettingName}</f100_s>
      <f101_s>${value}</f101_s>
      <f112_E>1</f112_E>
    </DATI>`;
    
    console.log(`Saving ${fullSettingName} = ${value}`);
    console.log('XML:', xml);
  };
 
  const ProfileCell: React.FC<{ profile: number }> = ({ profile }) => {
    if (profile === -1) {
      return <div className="text-xs text-muted">Default</div>;
    }
    const p = profiles.find(pr => pr.id === profile);
    return (
      <div className="text-center">
        <div className="text-xs font-medium text-text">{p?.name}</div>
        <div className="text-xs text-muted">{p?.used} lanes</div>
      </div>
    );
  };
 
  return (
    <div className="p-6 min-h-screen bg-bg">
      {/* Header */}
      <div className="mb-6">
        <h1 className="text-3xl font-bold text-text mb-2 flex items-center gap-2">
          <Icon name="credit_card" size={32} />
          EFTPOS Terminals
        </h1>
        <p className="text-muted">
          Configure EFTPOS pinpads and payment terminal operation
        </p>
      </div>
 
      <div className="max-w-[1600px] mx-auto">
        {/* Title */}
        <div className="mb-6">
          <h1 className="text-2xl font-bold text-text mb-2">EFTPOS Pinpads and Operation</h1>
          <p className="text-sm text-muted">
            Configure how EFTPOS terminals operate across different lane profiles
          </p>
        </div>
 
        {/* Profile 0 Notice */}
        {profiles[0].used > 0 && (
          <div className="bg-info/10 border border-info/30 rounded-lg p-4 mb-6">
            <p className="text-sm text-text">
              There are {profiles[0].used} lanes not assigned to a profile. They are not affected by these settings.
            </p>
          </div>
        )}
 
        {/* Settings Table */}
        <div className="bg-surface rounded-lg shadow overflow-x-auto">
          <table className="w-full">
            <thead>
              <tr className="border-b border-border bg-surface-2">
                <th className="text-left p-4 font-semibold text-text min-w-[200px]">Setting</th>
                <th className="text-center p-4 font-medium text-muted min-w-[100px]">
                  <ProfileCell profile={-1} />
                </th>
                {[1, 2, 3, 4, 5, 6, 7, 8].map(p => (
                  <th key={p} className="text-center p-4 font-medium text-muted min-w-[100px]">
                    <ProfileCell profile={p} />
                  </th>
                ))}
                <th className="text-center p-4 font-medium text-muted min-w-[80px]">Version</th>
              </tr>
            </thead>
            <tbody>
              {/* Send ProductData */}
              <tr className="border-b border-border">
                <td className="p-4 font-medium text-text">Send ProductData</td>
                {[-1, 1, 2, 3, 4, 5, 6, 7, 8].map(p => (
                  <td key={p} className="p-4 text-center">
                    <div className="flex justify-center">
                      <ToggleSwitch
                        checked={productData[p] || false}
                        onChange={(checked) => {
                          setProductData({ ...productData, [p]: checked });
                          saveSetting('EFTProductDataAuto', p, checked);
                        }}
                      />
                    </div>
                  </td>
                ))}
                <td className="p-4 text-center text-xs text-muted">Forever</td>
              </tr>
              <tr className="border-b border-border">
                <td colSpan={11} className="p-4 text-sm text-muted bg-surface-2">
                  Should the POS send ProductData information to the Pinpad. This is <u>only enabled in rare circumstances</u> where 
                  transactions are being acquired and is not available on all Eft providers.
                </td>
              </tr>
 
              {/* Verify low value payments */}
              <tr className="border-b border-border bg-surface">
                <td className="p-4 font-medium text-text">Verify Low Value Payments</td>
                {[-1, 1, 2, 3, 4, 5, 6, 7, 8].map(p => (
                  <td key={p} className="p-4 text-center">
                    <div className="flex justify-center">
                      <ToggleSwitch
                        checked={lowValueWarning[p] || false}
                        onChange={(checked) => {
                          setLowValueWarning({ ...lowValueWarning, [p]: checked });
                          saveSetting('EftLowValueWarning', p, checked);
                        }}
                      />
                    </div>
                  </td>
                ))}
                <td className="p-4 text-center text-xs text-muted">P2255</td>
              </tr>
              <tr className="border-b border-border">
                <td colSpan={11} className="p-4 text-sm text-muted bg-surface-2">
                  Allow the POS to prompt for verification of low value eftpos payments before sending them to the pinpad. 
                  This is intended to catch simple mistakes such as charging 5 cents on eftpos.
                </td>
              </tr>
 
              {/* Cash Out Warning Level */}
              <tr className="border-b border-gray-100 bg-surface">
                <td className="p-4 font-medium text-text">Cash Out Warning Level</td>
                {[-1, 1, 2, 3, 4, 5, 6, 7, 8].map(p => (
                  <td key={p} className="p-4 text-center">
                    <input
                      type="text"
                      value={cashWarning[p] || ''}
                      onChange={(e) => setCashWarning({ ...cashWarning, [p]: e.target.value })}
                      onBlur={(e) => saveSetting('EftCashWarning', p, e.target.value)}
                      placeholder="500.00"
                      className="w-20 px-2 py-1 border border-border rounded text-center text-sm focus:ring-2 focus:ring-[#00946b] focus:border-transparent"
                    />
                  </td>
                ))}
                <td className="p-4 text-center text-xs text-muted">P1902</td>
              </tr>
              <tr className="border-b border-border">
                <td colSpan={11} className="p-4 text-sm text-muted bg-surface-2">
                  If the cash out amount is above this amount, the POS will prompt the teller to double confirm the amount is correct.
                </td>
              </tr>
 
              {/* Cash Out Extra Copies */}
              <tr className="border-b border-gray-100 bg-surface">
                <td className="p-4 font-medium text-text">Cash Out Extra Copies</td>
                {[-1, 1, 2, 3, 4, 5, 6, 7, 8].map(p => (
                  <td key={p} className="p-4 text-center">
                    <input
                      type="text"
                      value={cashOutCopies[p] || ''}
                      onChange={(e) => setCashOutCopies({ ...cashOutCopies, [p]: e.target.value })}
                      onBlur={(e) => saveSetting('CashOutCopies', p, e.target.value)}
                      placeholder="0"
                      className="w-20 px-2 py-1 border border-border rounded text-center text-sm focus:ring-2 focus:ring-[#00946b] focus:border-transparent"
                    />
                  </td>
                ))}
                <td className="p-4 text-center text-xs text-muted">Forever</td>
              </tr>
              <tr className="border-b border-border">
                <td colSpan={11} className="p-4 text-sm text-muted bg-surface-2">
                  How many <em>additional</em> copies of the Eft acquirers receipt should be printed.
                </td>
              </tr>
 
              {/* Print Extended CashOut Slip */}
              <tr className="border-b border-gray-100 bg-surface">
                <td className="p-4 font-medium text-text">Print Extended CashOut Slip</td>
                {[-1, 1, 2, 3, 4, 5, 6, 7, 8].map(p => (
                  <td key={p} className="p-4 text-center">
                    <div className="flex justify-center">
                      <ToggleSwitch
                        checked={extendedSlip[p] || false}
                        onChange={(checked) => {
                          setExtendedSlip({ ...extendedSlip, [p]: checked });
                          saveSetting('CashOutExtendedSlip', p, checked);
                        }}
                      />
                    </div>
                  </td>
                ))}
                <td className="p-4 text-center text-xs text-muted">Forever</td>
              </tr>
              <tr className="border-b border-border">
                <td colSpan={11} className="p-4 text-sm text-muted bg-surface-2">
                  Print an extended and highlighted POS generated Cash Out slip for the customer to sign acknowledging receipt of the cash.
                </td>
              </tr>
 
              {/* Check Vendor Versions */}
              <tr className="border-b border-gray-100 bg-surface">
                <td className="p-4 font-medium text-text">Check Vendor Versions</td>
                {[-1, 1, 2, 3, 4, 5, 6, 7, 8].map(p => (
                  <td key={p} className="p-4 text-center">
                    <div className="flex justify-center">
                      <ToggleSwitch
                        checked={versionWarning[p] || false}
                        onChange={(checked) => {
                          setVersionWarning({ ...versionWarning, [p]: checked });
                          saveSetting('EftposVersionWarning', p, checked);
                        }}
                      />
                    </div>
                  </td>
                ))}
                <td className="p-4 text-center text-xs text-muted">Forever</td>
              </tr>
              <tr className="border-b border-border">
                <td colSpan={11} className="p-4 text-sm text-muted bg-surface-2">
                  The POS should check the Eftpos provider&apos;s code versions for minimum levels supported by Fieldpine and warn teller if 
                  below the minimum. This is intended to capture computers that may have failed to receive required updates. The message is 
                  only a warning and the POS will continue to use older versions. Fieldpine support will only provide cursory support for 
                  eftpos related issues if unsupported Eft code is used.
                </td>
              </tr>
 
              {/* Permit EFT Refunds */}
              <tr className="border-b border-gray-100 bg-surface">
                <td className="p-4 font-medium text-text">Permit EFT Refunds</td>
                {[-1, 1, 2, 3, 4, 5, 6, 7, 8].map(p => (
                  <td key={p} className="p-4 text-center">
                    <div className="flex justify-center">
                      <ToggleSwitch
                        checked={eftRefund[p] || false}
                        onChange={(checked) => {
                          setEftRefund({ ...eftRefund, [p]: checked });
                          saveSetting('EFTEnRefund', p, checked);
                        }}
                      />
                    </div>
                  </td>
                ))}
                <td className="p-4 text-center text-xs text-muted">Forever</td>
              </tr>
              <tr className="border-b border-border">
                <td colSpan={11} className="p-4 text-sm text-muted bg-surface-2">
                  Can the POS attempt refund transactions to the pinpad? Refund support often requires additional merchant handling such as 
                  merchant refund cards from the acquirer and is not possible on all terminals.
                </td>
              </tr>
 
              {/* Print Eftpos Receipts */}
              <tr className="border-b border-gray-100 bg-surface">
                <td className="p-4 font-medium text-text">Print Eftpos Receipts</td>
                {[-1, 1, 2, 3, 4, 5, 6, 7, 8].map(p => (
                  <td key={p} className="p-4 text-center">
                    <select
                      value={receiptInstant[p] || 'always'}
                      onChange={(e) => {
                        setReceiptInstant({ ...receiptInstant, [p]: e.target.value });
                        saveSetting('EftposReceiptInstant', p, e.target.value);
                      }}
                      className="px-2 py-1 border border-border rounded text-sm focus:ring-2 focus:ring-[#00946b] focus:border-transparent"
                    >
                      <option value="always">Always</option>
                      <option value="prompt">Prompt</option>
                      <option value="no">None</option>
                    </select>
                  </td>
                ))}
                <td className="p-4 text-center text-xs text-muted">Forever</td>
              </tr>
              <tr className="border-b border-border">
                <td colSpan={11} className="p-4 text-sm text-muted bg-surface-2">
                  Should Eftpos receipts be printed? By default eftpos pinpads print a customer receipt for all transactions however most 
                  customers do not want these slips, so they are simply discarded.
                  <p className="mt-2">Only some Eftpos providers are able to support this option, such as PC-Eftpos from Eftpos New Zealand.</p>
                </td>
              </tr>
 
              {/* Print Eftpos Receipts Inline */}
              <tr className="border-b border-gray-100 bg-surface">
                <td className="p-4 font-medium text-text">Print Eftpos Receipts Inline</td>
                {[-1, 1, 2, 3, 4, 5, 6, 7, 8].map(p => (
                  <td key={p} className="p-4 text-center">
                    <select
                      value={receiptInline[p] || '0'}
                      onChange={(e) => {
                        setReceiptInline({ ...receiptInline, [p]: e.target.value });
                        saveSetting('PrintEftposInline', p, e.target.value);
                      }}
                      className="px-2 py-1 border border-border rounded text-sm focus:ring-2 focus:ring-[#00946b] focus:border-transparent"
                    >
                      <option value="0">POS chooses</option>
                      <option value="1">Yes</option>
                      <option value="2">No</option>
                    </select>
                  </td>
                ))}
                <td className="p-4 text-center text-xs text-muted">P2153</td>
              </tr>
              <tr className="border-b border-border">
                <td colSpan={11} className="p-4 text-sm text-muted bg-surface-2">
                  When the POS is printing the initial receipt, should the Eftpos receipt slips be included as well? This is typically set No, 
                  if the eftpos provider has already printed the receipt. When &quot;POS chooses&quot; it attempts to decide based on which eftpos 
                  provider is in use, but it can get it wrong depending on how the external eftpos system is configured, so you may need to 
                  manually select yes/no.
                </td>
              </tr>
            </tbody>
          </table>
        </div>
 
        {/* Eftpos Provider Settings */}
        <div className="mt-8 bg-surface rounded-lg shadow p-6">
          <h2 className="text-xl font-bold text-text mb-6 pb-3 border-b border-border">
            Eftpos Provider Settings
          </h2>
 
          <div className="mb-6">
            <h3 className="text-lg font-semibold text-[#00946b] mb-4">
              <a href="https://www.linkly.com.au" target="_blank" rel="noopener noreferrer" className="hover:underline">
                Linkly Australia
              </a>
            </h3>
            <div className="space-y-4 max-w-md">
              <div>
                <label className="block text-sm font-medium text-text mb-2">Username</label>
                <input
                  type="text"
                  value={linklyUsername}
                  onChange={(e) => setLinklyUsername(e.target.value)}
                  onBlur={(e) => saveSetting('EftProvider.Linkly.Username', -1, e.target.value)}
                  className="w-full px-3 py-2 border border-border rounded-lg focus:ring-2 focus:ring-[#00946b] focus:border-transparent"
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-text mb-2">Password</label>
                <input
                  type="password"
                  value={linklyPassword}
                  onChange={(e) => setLinklyPassword(e.target.value)}
                  onBlur={(e) => saveSetting('EftProvider.Linkly.Password', -1, e.target.value)}
                  className="w-full px-3 py-2 border border-border rounded-lg focus:ring-2 focus:ring-[#00946b] focus:border-transparent"
                />
              </div>
            </div>
          </div>
        </div>
 
        {/* Info Box */}
        <div className="mt-6 bg-info/10 border border-info/30 rounded-lg p-4">
          <h3 className="text-sm font-semibold text-info mb-2">About EFTPOS Settings</h3>
          <ul className="text-sm text-info space-y-1">
            <li>• Settings are applied per profile, allowing different configurations for different lane groups</li>
            <li>• Changes take effect immediately but may require POS restart on some lanes</li>
            <li>• Provider-specific features may not be available on all EFTPOS terminals</li>
            <li>• Consult with your EFTPOS provider before enabling advanced features like ProductData or Refunds</li>
          </ul>
        </div>
      </div>
    </div>
  );
}