page.tsx

Go to the documentation of this file.

'use client';
 
import React, { useState, useEffect } from 'react';
import { Icon } from '@/contexts/IconContext';
 
interface ScannerSettings {
  barcodeAutoUSB: boolean;
  scannerUSBAlways: boolean;
  barcodeAutoSerial: boolean;
  barcodePosBeep: boolean;
  devScanEAN13L0: boolean;
  bar02P5: boolean;
  barcodeToPid: boolean;
  barcodeFlybuyScanEnabled: boolean;
  barcodeAIMCode: boolean;
  barcodeSinglePid: boolean;
  barcodeWebsitePid: string;
  barcodeQRM9: boolean;
}
 
export default function BarcodeScannersPage() {
  const [settings, setSettings] = useState<ScannerSettings>({
    barcodeAutoUSB: false,
    scannerUSBAlways: false,
    barcodeAutoSerial: false,
    barcodePosBeep: false,
    devScanEAN13L0: false,
    bar02P5: false,
    barcodeToPid: false,
    barcodeFlybuyScanEnabled: false,
    barcodeAIMCode: false,
    barcodeSinglePid: false,
    barcodeWebsitePid: '',
    barcodeQRM9: false,
  });
 
  const [qrUrl, setQrUrl] = useState('HTTP://FIELDPINE.COM');
 
  useEffect(() => {
    loadData();
  }, []);
 
  useEffect(() => {
    updateQrPreview(settings.barcodeWebsitePid);
  }, [settings.barcodeWebsitePid]);
 
  const loadData = async () => {
    try {
      // Load settings from API
      console.log('Loading barcode scanner settings...');
      // Mock data would go here
    } catch (error) {
      console.error('Error loading scanner settings:', error);
    }
  };
 
  const saveSetting = (settingName: string, value: boolean | string) => {
    console.log('Saving setting:', settingName, '=', value);
    
    // API call to save setting
    // DATI XML format:
    // <DATI>
    //   <f8_s>retailmax.elink.config.basesetting.edit</f8_s>
    //   <f11_B>E</f11_B>
    //   <f100_s>{settingName}</f100_s>
    //   <f101_E or f101_s>{value}</f101_E or f101_s>
    //   <f112_E>1</f112_E>
    // </DATI>
  };
 
  const handleToggle = (field: keyof ScannerSettings, settingName: string) => {
    const newValue = !settings[field];
    setSettings(prev => ({ ...prev, [field]: newValue }));
    saveSetting(settingName, newValue);
  };
 
  const handleTextChange = (field: keyof ScannerSettings, value: string) => {
    setSettings(prev => ({ ...prev, [field]: value }));
  };
 
  const handleTextBlur = (settingName: string, value: string) => {
    saveSetting(settingName, value);
  };
 
  const updateQrPreview = (url: string) => {
    let previewUrl = url;
    if (previewUrl.length <= 3) {
      previewUrl = "HTTP://FIELDPINE.COM";
    } else {
      previewUrl = previewUrl.replace(/%pid%/g, "1234").replace(/%PID%/g, "1234");
    }
    setQrUrl(previewUrl);
  };
 
  const ToggleSwitch = ({ checked, onChange }: { checked: boolean; onChange: () => void }) => (
    <label className="relative inline-flex items-center cursor-pointer">
      <input
        type="checkbox"
        className="sr-only peer"
        checked={checked}
        onChange={onChange}
      />
      <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>
  );
 
  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="qr_code_scanner" size={32} />
          Barcode Scanners
        </h1>
        <p className="text-muted">
          Configure barcode scanner settings and behavior
        </p>
      </div>
 
      <div className="max-w-[1400px] mx-auto">
        <div className="bg-surface rounded-lg shadow-md p-6 mb-6">
          <div className="space-y-8">
            {/* Auto Detect USB Scanners */}
            <div className="flex gap-4 items-start">
              <div className="pt-1">
                <ToggleSwitch
                  checked={settings.barcodeAutoUSB}
                  onChange={() => handleToggle('barcodeAutoUSB', 'BarcodeAutoUSB')}
                />
              </div>
              <div className="flex-1">
                <h3 className="text-lg font-semibold text-brand mb-2">
                  Auto Detect Barcode Scanners
                  <span className="text-xs text-muted ml-3 font-normal">P2040</span>
                </h3>
                <p className="text-sm text-text mb-2">
                  Some USB scanners can be automatically detected when used on certain platforms, but detection isn't reliable on every platform. 
                  Enabling this option can sometimes save effort when new scanners are plugged in.
                </p>
                <p className="text-sm text-muted">
                  This is likely to work for the following brands: Honeywell/Metrologic, Symbol, Zebex.
                </p>
              </div>
            </div>
 
            {/* Scanners Always Active */}
            <div className="flex gap-4 items-start">
              <div className="pt-1">
                <ToggleSwitch
                  checked={settings.scannerUSBAlways}
                  onChange={() => handleToggle('scannerUSBAlways', 'ScannerUSBAlways')}
                />
              </div>
              <div className="flex-1">
                <h3 className="text-lg font-semibold text-brand mb-2">
                  Scanners are always active
                  <span className="text-xs text-muted ml-3 font-normal">P2263</span>
                </h3>
                <p className="text-sm text-text">
                  Should USB scanners that are auto detected always be active or only when the POS is active? Turning this on means that all barcode scans 
                  should be trapped and actioned even if the POS is not the active program. Turning this off means the POS will ignore scans if another 
                  program is currently active in Windows.
                </p>
              </div>
            </div>
 
            {/* Auto Detect Serial Scanners */}
            <div className="flex gap-4 items-start">
              <div className="pt-1">
                <ToggleSwitch
                  checked={settings.barcodeAutoSerial}
                  onChange={() => handleToggle('barcodeAutoSerial', 'BarcodeAutoSerial')}
                />
              </div>
              <div className="flex-1">
                <h3 className="text-lg font-semibold text-brand mb-2">
                  Auto Detect Serial Scanners
                  <span className="text-xs text-muted ml-3 font-normal">P2134</span>
                </h3>
                <p className="text-sm text-text mb-2">
                  Automatically detect Serial scanners. This only applies to scanners that are USB scanners using CDC emulation mode.
                </p>
                <p className="text-sm text-muted">
                  This is likely to work for the following scanners: Zebra DS2208. See{' '}
                  <a href="https://fieldpine.com/docs/cfg/BarcodeScanners.htm" target="_blank" className="text-brand hover:underline">
                    https://fieldpine.com/docs/cfg/BarcodeScanners.htm
                  </a>{' '}
                  for more details
                </p>
              </div>
            </div>
 
            {/* Pos Beeps on Scan */}
            <div className="flex gap-4 items-start">
              <div className="pt-1">
                <ToggleSwitch
                  checked={settings.barcodePosBeep}
                  onChange={() => handleToggle('barcodePosBeep', 'BarcodePosBeep')}
                />
              </div>
              <div className="flex-1">
                <h3 className="text-lg font-semibold text-brand mb-2">
                  Pos beeps on good scan
                  <span className="text-xs text-muted ml-3 font-normal">P2134</span>
                </h3>
                <p className="text-sm text-text">
                  Should the Pos beep on receipt of a good barcode scan? This requires the scanner to be programmed not to beep and the scanner is not 
                  using USB HID mode, which is the most commonly used mode.
                </p>
              </div>
            </div>
          </div>
        </div>
 
        {/* Barcode Handling Behaviour */}
        <div className="bg-surface rounded-lg shadow-md p-6 mb-6">
          <h2 className="text-2xl font-bold text-text mb-6 pb-3 border-b-2 border-dotted border-brand">
            Barcode Handling Behaviour
          </h2>
 
          <div className="space-y-8">
            {/* Convert 12 to 13 digit */}
            <div className="flex gap-4 items-start">
              <div className="pt-1">
                <ToggleSwitch
                  checked={settings.devScanEAN13L0}
                  onChange={() => handleToggle('devScanEAN13L0', 'DevScanEAN13L0')}
                />
              </div>
              <div className="flex-1">
                <h3 className="text-lg font-semibold text-brand mb-2">
                  Convert 12 digit barcodes to 13
                  <span className="text-xs text-muted ml-3 font-normal">P2040</span>
                </h3>
                <p className="text-sm text-text">
                  If the POS receives a 12 digit barcode that starts with a "2", it can be automatically converted to have a leading "0" and become 
                  an EAN "02" weighed item barcode. You would only need to disable this if your store DOES have true 12 digit barcodes that start 
                  with a "2", which is rare.
                </p>
              </div>
            </div>
 
            {/* 02 Barcodes 5 digits */}
            <div className="flex gap-4 items-start">
              <div className="pt-1">
                <ToggleSwitch
                  checked={settings.bar02P5}
                  onChange={() => handleToggle('bar02P5', 'Bar02P5')}
                />
              </div>
              <div className="flex-1">
                <h3 className="text-lg font-semibold text-brand mb-2">
                  02 Barcodes use 5 Pricing Digits
                  <span className="text-xs text-muted ml-3 font-normal">P2040</span>
                </h3>
                <p className="text-sm text-text">
                  If this is enabled, then when extracting the price from a 02 barcode we use 5 digits from the barcode. If it is disabled we use 4 digits. 
                  The original standard was for 4 digits but many instore printing scales support 5 digit pricing. If you do not use 02 barcodes, and most 
                  retailers do not, you can ignore this setting.
                </p>
              </div>
            </div>
 
            {/* Convert to PIDs */}
            <div className="flex gap-4 items-start">
              <div className="pt-1">
                <ToggleSwitch
                  checked={settings.barcodeToPid}
                  onChange={() => handleToggle('barcodeToPid', 'BarcodeToPid')}
                />
              </div>
              <div className="flex-1">
                <h3 className="text-lg font-semibold text-brand mb-2">
                  Convert Barcodes to Pids
                  <span className="text-xs text-muted ml-3 font-normal">P2040</span>
                </h3>
                <p className="text-sm text-text">
                  If an unknown barcode is scanned, should the POS assume it is a Product Id? (PID) This option should only be enabled for sites that 
                  print their own barcodes and the barcode numbers are identical to the PID values.
                </p>
              </div>
            </div>
 
            {/* FlyBuy Card Scanning */}
            <div className="flex gap-4 items-start">
              <div className="pt-1">
                <ToggleSwitch
                  checked={settings.barcodeFlybuyScanEnabled}
                  onChange={() => handleToggle('barcodeFlybuyScanEnabled', 'BarcodeFlybuyScanEnabled')}
                />
              </div>
              <div className="flex-1">
                <h3 className="text-lg font-semibold text-brand mb-2">
                  Enable FlyBuy Card Scanning
                  <span className="text-xs text-muted ml-3 font-normal">P2040</span>
                </h3>
                <p className="text-sm text-text">
                  Allow a Flybuy card to be scanned and recorded against the sale
                </p>
              </div>
            </div>
 
            {/* Decode AIM codes */}
            <div className="flex gap-4 items-start">
              <div className="pt-1">
                <ToggleSwitch
                  checked={settings.barcodeAIMCode}
                  onChange={() => handleToggle('barcodeAIMCode', 'BarcodeAIMCode')}
                />
              </div>
              <div className="flex-1">
                <h3 className="text-lg font-semibold text-brand mb-2">
                  Decode AIM codes if scanners send them
                  <span className="text-xs text-muted ml-3 font-normal">P2050</span>
                </h3>
                <p className="text-sm text-text">
                  Barcode scanners can be configured to send AIM Code identifiers before the actual barcode which is useful for getting full details about 
                  the barcode. You should leave this setting on unless you have a specific reason not too.
                </p>
              </div>
            </div>
 
            {/* Single PID per barcode */}
            <div className="flex gap-4 items-start">
              <div className="pt-1">
                <ToggleSwitch
                  checked={settings.barcodeSinglePid}
                  onChange={() => handleToggle('barcodeSinglePid', 'BarcodeSinglePid')}
                />
              </div>
              <div className="flex-1">
                <h3 className="text-lg font-semibold text-brand mb-2">
                  Barcodes can only point to one product
                  <span className="text-xs text-muted ml-3 font-normal">Feb 2020</span>
                </h3>
                <p className="text-sm text-text mb-2">
                  Should barcodes only point to one product, or can a barcode be shared betweeen multiple products. Technically speaking barcodes are not 
                  product specific over time, so the same barcode can potentially be seen on different products. In reality though it is extremly rare so 
                  many retailers prefer to only allow a single product per barcode.
                </p>
                <p className="text-sm text-muted">
                  When enabled, this controls newly added barcodes only and removes the barcode from any other products using it. Existing products with 
                  multiple barcodes already defined are not rechecked and may continue to have multiple products per barcode.
                </p>
              </div>
            </div>
          </div>
        </div>
 
        {/* QR Style Barcodes */}
        <div className="bg-surface rounded-lg shadow-md p-6">
          <h2 className="text-2xl font-bold text-text mb-4">QR Style Barcodes</h2>
          
          <p className="text-text mb-6">
            If you place QR codes on your products, the POS is able to use these QR codes as normal barcodes in some cases. This means the QR code can 
            be a URL which customers can scan and go to your product specific webpage, while the POS treats it as a normal 1D barcode and sells the item.
          </p>
 
          <div className="mb-6">
            <h3 className="text-lg font-semibold text-brand mb-2">Your website Product Specific URL</h3>
            <input
              type="text"
              size={50}
              value={settings.barcodeWebsitePid}
              onChange={(e) => {
                handleTextChange('barcodeWebsitePid', e.target.value);
                updateQrPreview(e.target.value);
              }}
              onBlur={(e) => handleTextBlur('BarcodeWebsitePid', e.target.value)}
              placeholder="https://mywebsite.com/product/%pid%"
              className="w-full max-w-3xl border border-border rounded px-3 py-2 focus:ring-2 focus:ring-brand focus:border-transparent"
            />
            <p className="text-sm text-text mt-2">
              Enter the URL using the string "%pid%" where the Product id is located. To use this functionality a common URL must exist with PID as some constant.
              <br />
              Often these URLs use a 302 Redirect to the true product information page. Your web developer will understand this. Tip: Use UPPERCASE as this creates smaller QR codes
            </p>
          </div>
 
          <p className="text-sm font-semibold text-text mb-4">
            Example output with increasing levels of error correction or "ECC". The codes towards the left are less resilent to errors or barcode damage.
          </p>
 
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
            {['L', 'M', 'Q', 'H'].map((ecc, index) => (
              <div key={ecc} className="flex flex-col items-center p-4 border border-border rounded">
                <div className="w-48 h-48 mb-2 bg-surface border-2 border-border flex items-center justify-center">
                  <img 
                    src={`https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(qrUrl)}&ecc=${ecc}`}
                    alt={`QR Code ECC ${ecc}`}
                    className="w-full h-full object-contain"
                  />
                </div>
                <div className="text-xs text-muted break-all text-center mb-1">{qrUrl}</div>
                <div className="text-sm font-medium text-text">ECC "{ecc}"</div>
              </div>
            ))}
          </div>
 
          {/* URL Shortening */}
          <div className="flex gap-4 items-start border-t pt-6">
            <div className="pt-1">
              <ToggleSwitch
                checked={settings.barcodeQRM9}
                onChange={() => handleToggle('barcodeQRM9', 'BarcodeQRM9')}
              />
            </div>
            <div className="flex-1">
              <h3 className="text-lg font-semibold text-brand mb-2">
                Use URL shortening service
                <span className="text-xs text-muted ml-3 font-normal">P2230</span>
              </h3>
              <p className="text-sm text-text mb-4">
                Shorter URLs create QR codes that can be smaller and scan more easily, making them more reliable. When this setting is enabled, the Pos 
                will generate short URLs that generate a 302 redirect to your Product Specific URL(s)
              </p>
 
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mt-4">
                {['L', 'M', 'Q', 'H'].map((ecc, index) => (
                  <div key={ecc} className="flex flex-col items-center p-4 border border-border rounded bg-surface-2">
                    <div className="w-32 h-32 mb-2 bg-surface border-2 border-border flex items-center justify-center">
                      <img 
                        src={`https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${encodeURIComponent('HTTP://M9.NZ/11111123401234')}&ecc=${ecc}`}
                        alt={`Short QR Code ECC ${ecc}`}
                        className="w-full h-full object-contain"
                      />
                    </div>
                    <div className="text-sm font-medium text-text">ECC "{ecc}"</div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}