page.tsx

Go to the documentation of this file.

'use client';
 
import React, { useState, useEffect } from 'react';
import { Icon } from '@/contexts/IconContext';
 
interface BusinessDetails {
  companyName: string;
  taxId: string;
  companyPhone: string;
  companyEmail: string;
  companyAddress0: string;
  companyAddress1: string;
  companyAddress2: string;
  catchAllReceiptMessage: string;
  catchAllReceiptMessageAccount: string;
  companyWeb: string;
  internalGdsWeb: string;
  logo: string;
  countryCode: string;
  locationDefaultRegion: string;
}
 
export default function YourDetailsPage() {
  const [details, setDetails] = useState<BusinessDetails>({
    companyName: '',
    taxId: '',
    companyPhone: '',
    companyEmail: '',
    companyAddress0: '',
    companyAddress1: '',
    companyAddress2: '',
    catchAllReceiptMessage: '',
    catchAllReceiptMessageAccount: '',
    companyWeb: '',
    internalGdsWeb: '',
    logo: '',
    countryCode: '',
    locationDefaultRegion: '',
  });
 
  const [showCountryNotes, setShowCountryNotes] = useState(false);
  const [showRegionCanada, setShowRegionCanada] = useState(false);
 
  useEffect(() => {
    loadData();
  }, []);
 
  const loadData = async () => {
    try {
      // Load business details from API
      // Mock data for demonstration
      console.log('Loading business details...');
    } catch (error) {
      console.error('Error loading business details:', error);
    }
  };
 
  const saveSetting = (settingName: string, value: 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_s>{value}</f101_s>
    //   <f112_E>1</f112_E>
    // </DATI>
  };
 
  const handleChange = (field: keyof BusinessDetails, value: string) => {
    setDetails(prev => ({ ...prev, [field]: value }));
  };
 
  const handleBlur = (settingName: string, value: string) => {
    saveSetting(settingName, value);
  };
 
  const handleCountryChange = (value: string) => {
    setDetails(prev => ({ ...prev, countryCode: value }));
    
    // Show notes for Canada
    if (value === '9001') {
      setShowCountryNotes(true);
      setShowRegionCanada(true);
    } else {
      setShowCountryNotes(false);
      setShowRegionCanada(false);
    }
    
    saveSetting('CountryCode', value);
  };
 
  return (
    <div className="min-h-screen bg-bg">
      {/* Header */}
      <div className="bg-brand text-white 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>Your Business Details</span>
          </div>
        </div>
      </div>
 
      <div className="max-w-[1400px] 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="business" size={32} />
            Your Business Details
          </h1>
        </div>
 
        {/* Main Content */}
        <div className="bg-surface rounded-lg shadow-md p-6">
          <h2 className="text-xl font-bold text-text mb-4">Common Information</h2>
          
          <p className="text-text mb-4">
            Supply the broad details about your business. This information is used in a number of customer facing areas, 
            so only enter information that is intended to be publically visible. For example, many of the details below 
            may be printed on your receipts.
          </p>
 
          <p className="text-sm text-muted mb-6 italic">
            Information entered below applies to ALL stores, unless specifically overridden by a store.
          </p>
 
          <div className="space-y-8">
            {/* Business Name */}
            <div>
              <label className="block text-sm font-semibold text-text mb-2">
                Business Name
              </label>
              <input
                type="text"
                size={40}
                value={details.companyName}
                onChange={(e) => handleChange('companyName', e.target.value)}
                onBlur={(e) => handleBlur('StoreSetup.CompanyName', e.target.value)}
                className="w-full max-w-2xl border border-border rounded px-3 py-2 focus:ring-2 focus:ring-brand focus:border-transparent"
              />
            </div>
 
            {/* Tax Number */}
            <div>
              <label className="block text-sm font-semibold text-text mb-2">
                Tax Number (GST, MwST, VAT etc)
              </label>
              <input
                type="text"
                size={40}
                value={details.taxId}
                onChange={(e) => handleChange('taxId', e.target.value)}
                onBlur={(e) => handleBlur('StoreSetup.TaxId.0', e.target.value)}
                className="w-full max-w-2xl border border-border rounded px-3 py-2 focus:ring-2 focus:ring-brand focus:border-transparent"
              />
            </div>
 
            {/* Company Phone */}
            <div>
              <label className="block text-sm font-semibold text-text mb-2">
                Company Phone No.
              </label>
              <input
                type="text"
                size={40}
                value={details.companyPhone}
                onChange={(e) => handleChange('companyPhone', e.target.value)}
                onBlur={(e) => handleBlur('StoreSetup.CompanyPhone', e.target.value)}
                className="w-full max-w-2xl border border-border rounded px-3 py-2 focus:ring-2 focus:ring-brand focus:border-transparent"
              />
            </div>
 
            {/* Company Email */}
            <div>
              <label className="block text-sm font-semibold text-text mb-2">
                Company Email
              </label>
              <input
                type="email"
                size={40}
                value={details.companyEmail}
                onChange={(e) => handleChange('companyEmail', e.target.value)}
                onBlur={(e) => handleBlur('StoreSetup.CompanyEmail', e.target.value)}
                className="w-full max-w-2xl border border-border rounded px-3 py-2 focus:ring-2 focus:ring-brand focus:border-transparent"
              />
            </div>
 
            {/* Company Address */}
            <div>
              <label className="block text-sm font-semibold text-text mb-2">
                Company Address
              </label>
              <div className="space-y-2">
                <input
                  type="text"
                  size={40}
                  value={details.companyAddress0}
                  onChange={(e) => handleChange('companyAddress0', e.target.value)}
                  onBlur={(e) => handleBlur('StoreSetup.CompanyAddress0', e.target.value)}
                  className="w-full max-w-2xl border border-border rounded px-3 py-2 focus:ring-2 focus:ring-brand focus:border-transparent"
                  placeholder="Address Line 1"
                />
                <input
                  type="text"
                  size={40}
                  value={details.companyAddress1}
                  onChange={(e) => handleChange('companyAddress1', e.target.value)}
                  onBlur={(e) => handleBlur('StoreSetup.CompanyAddress1', e.target.value)}
                  className="w-full max-w-2xl border border-border rounded px-3 py-2 focus:ring-2 focus:ring-brand focus:border-transparent"
                  placeholder="Address Line 2"
                />
                <input
                  type="text"
                  size={40}
                  value={details.companyAddress2}
                  onChange={(e) => handleChange('companyAddress2', e.target.value)}
                  onBlur={(e) => handleBlur('StoreSetup.CompanyAddress2', e.target.value)}
                  className="w-full max-w-2xl border border-border rounded px-3 py-2 focus:ring-2 focus:ring-brand focus:border-transparent"
                  placeholder="Address Line 3"
                />
              </div>
            </div>
 
            {/* Invoice/Receipt Message */}
            <div>
              <label className="block text-sm font-semibold text-text mb-2">
                Invoice/Receipt Message
              </label>
              <p className="text-xs text-muted mb-2">For all sales, unless specifically overridden for individual customer/account.</p>
              <textarea
                cols={40}
                rows={4}
                value={details.catchAllReceiptMessage}
                onChange={(e) => handleChange('catchAllReceiptMessage', e.target.value)}
                onBlur={(e) => handleBlur('CatchAllReceiptMessage', e.target.value)}
                className="w-full max-w-2xl border border-border rounded px-3 py-2 focus:ring-2 focus:ring-brand focus:border-transparent"
              />
            </div>
 
            {/* Account Invoice/Receipt Message */}
            <div>
              <label className="block text-sm font-semibold text-text mb-2">
                Account Invoice/Receipt Message
              </label>
              <p className="text-xs text-muted mb-2">For all sales that have an account</p>
              <textarea
                cols={40}
                rows={4}
                value={details.catchAllReceiptMessageAccount}
                onChange={(e) => handleChange('catchAllReceiptMessageAccount', e.target.value)}
                onBlur={(e) => handleBlur('CatchAllReceiptMessageAccount', e.target.value)}
                className="w-full max-w-2xl border border-border rounded px-3 py-2 focus:ring-2 focus:ring-brand focus:border-transparent"
              />
            </div>
 
            {/* Company Website */}
            <div>
              <label className="block text-sm font-semibold text-text mb-2">
                Company Website
              </label>
              <p className="text-xs text-muted mb-2">Potentially given to customers</p>
              <input
                type="text"
                size={40}
                value={details.companyWeb}
                onChange={(e) => handleChange('companyWeb', e.target.value)}
                onBlur={(e) => handleBlur('StoreSetup.CompanyWeb', e.target.value)}
                className="w-full max-w-2xl border border-border rounded px-3 py-2 focus:ring-2 focus:ring-brand focus:border-transparent"
                placeholder="https://www.example.com"
              />
            </div>
 
            {/* Internal Website */}
            <div>
              <label className="block text-sm font-semibold text-text mb-2">
                Internal Website
              </label>
              <p className="text-xs text-muted mb-2">For internal use - what is the NAME this Fieldpine System can be reached on</p>
              <input
                type="text"
                size={40}
                value={details.internalGdsWeb}
                onChange={(e) => handleChange('internalGdsWeb', e.target.value)}
                onBlur={(e) => handleBlur('StoreSetup.InternalGdsWeb', e.target.value)}
                className="w-full max-w-2xl border border-border rounded px-3 py-2 focus:ring-2 focus:ring-brand focus:border-transparent"
              />
            </div>
 
            {/* Company Logo */}
            <div>
              <label className="block text-sm font-semibold text-text mb-2">
                Company Logo
              </label>
              <div className="flex gap-4 items-start">
                <div className="flex-1 max-w-2xl">
                  <input
                    type="text"
                    size={40}
                    value={details.logo}
                    onChange={(e) => handleChange('logo', e.target.value)}
                    onBlur={(e) => handleBlur('StoreSetup.Logo', e.target.value)}
                    className="w-full border border-border rounded px-3 py-2 focus:ring-2 focus:ring-brand focus:border-transparent"
                    placeholder="https://example.com/logo.png"
                  />
                  <p className="text-xs text-muted mt-2">Enter the URL of your logo. This will be used on receipts and similar places.</p>
                </div>
                <div className="border border-dashed border-border rounded p-4 min-w-[200px] min-h-[100px] flex items-center justify-center">
                  {details.logo ? (
                    <img src={details.logo} alt="Company Logo" className="max-w-full max-h-[150px]" onError={(e) => {
                      (e.target as HTMLImageElement).style.display = 'none';
                      (e.target as HTMLImageElement).parentElement!.innerHTML = '<div class="text-sm text-muted">Invalid logo URL</div>';
                    }} />
                  ) : (
                    <div className="text-sm text-muted">Current Logo<br />None</div>
                  )}
                </div>
              </div>
            </div>
 
            {/* Country */}
            <div>
              <label className="block text-sm font-semibold text-text mb-2">
                Country
              </label>
              <select
                value={details.countryCode}
                onChange={(e) => handleCountryChange(e.target.value)}
                className="w-full max-w-2xl border border-border rounded px-3 py-2 focus:ring-2 focus:ring-brand focus:border-transparent"
              >
                <option value="">Based on Windows Regional settings</option>
                <option value="61">Australia</option>
                <option value="9001">Canada</option>
                <option value="972">Israel</option>
                <option value="64">New Zealand</option>
                <option value="27">South Africa</option>
                <option value="44">United Kingdom</option>
                <option value="263">Zimbabwe</option>
              </select>
              
              {showCountryNotes && (
                <div className="mt-3 p-4 border-2 border-danger rounded bg-danger/10 text-danger">
                  Canada has regional taxes. You need to edit each store and select the region it belongs too for these regional taxes to apply. 
                  You can also specify a default region below if you only operate in one region.
                </div>
              )}
              
              <p className="text-xs text-muted mt-2">
                What country are you operating in? If left blank the Pos will detect and use whatever is configured on the PC. 
                However, we recommend explicitly setting this value as it is quite common for computers to be configured under 
                Windows Regional settings for the wrong country.
              </p>
            </div>
 
            {/* Default Region (Canada) */}
            {showRegionCanada && (
              <div>
                <label className="block text-sm font-semibold text-text mb-2">
                  Default Region
                </label>
                <select
                  value={details.locationDefaultRegion}
                  onChange={(e) => {
                    handleChange('locationDefaultRegion', e.target.value);
                    saveSetting('LocationDefaultRegion', e.target.value);
                  }}
                  className="w-full max-w-2xl border border-border rounded px-3 py-2 focus:ring-2 focus:ring-brand focus:border-transparent"
                >
                  <option value="">Unknown</option>
                  <option value="90010001">Ontario</option>
                  <option value="90010002">British Columbia</option>
                  <option value="90010003">Nova Scotia</option>
                  <option value="90010004">Brunswick</option>
                  <option value="90010005">Newfoundland</option>
                  <option value="90010006">Quebec</option>
                </select>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}