page.tsx

Go to the documentation of this file.

'use client';
 
import React, { useState, useEffect } from 'react';
import { Icon } from '@/contexts/IconContext';
 
export default function CustomerDisplaysPage() {
  const [idleUrl, setIdleUrl] = useState('');
  const [previewUrl, setPreviewUrl] = useState('');
 
  useEffect(() => {
    loadSettings();
  }, []);
 
  const loadSettings = () => {
    // API call: /BUCK?3=retailmax.elink.config.basesetting&112=1&112=999&9=f100,0,CustomerDisplay1.IdleURL
    console.log('Loading customer display settings...');
    // Mock data - would load actual idle URL
  };
 
  const saveSetting = (value: string) => {
    // 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>CustomerDisplay1.IdleURL</f100_s>
      <f101_s>${value}</f101_s>
      <f112_E>1</f112_E>
    </DATI>`;
    
    console.log('Saving CustomerDisplay1.IdleURL =', value);
    console.log('XML:', xml);
  };
 
  const handleUrlChange = (value: string) => {
    setIdleUrl(value);
    // Update preview if URL is substantial
    if (value.length > 10) {
      setPreviewUrl(value);
    }
  };
 
  const handleUrlBlur = () => {
    if (idleUrl) {
      saveSetting(idleUrl);
    }
  };
 
  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="monitor" size={32} />
          Customer Displays
        </h1>
        <p className="text-muted">
          Configure pole displays and customer-facing screens
        </p>
      </div>
 
      <div className="max-w-7xl mx-auto">
        {/* Title */}
        <div className="mb-6">
          <h1 className="text-2xl font-bold text-text mb-2">Customer Display Setup</h1>
          <p className="text-sm text-muted">
            Configure what customers see on pole displays and customer-facing screens
          </p>
        </div>
 
        {/* Main Content */}
        <div className="grid lg:grid-cols-3 gap-6">
          {/* Settings Panel */}
          <div className="lg:col-span-2 space-y-6">
            {/* Idle Screen URL */}
            <div className="bg-surface rounded-lg shadow p-6">
              <h2 className="text-lg font-semibold text-text mb-4">Idle Screen Configuration</h2>
              
              <div className="space-y-4">
                <div>
                  <label className="block text-sm font-medium text-text mb-2">
                    Idle Screen URL
                  </label>
                  <input
                    type="url"
                    value={idleUrl}
                    onChange={(e) => handleUrlChange(e.target.value)}
                    onBlur={handleUrlBlur}
                    placeholder="https://example.com/customer-display"
                    className="w-full px-4 py-2 border border-border rounded-lg focus:ring-2 focus:ring-brand focus:border-transparent"
                  />
                  <p className="mt-2 text-sm text-muted">
                    This URL is displayed when PosGreen is idle. The content will be displayed in an iframe on the customer display.
                  </p>
                </div>
 
                <div className="bg-info/10 border border-info/30 rounded-lg p-4">
                  <h3 className="text-sm font-semibold text-text mb-2">URL Requirements</h3>
                  <ul className="text-sm text-text space-y-1">
                    <li>• Must be a valid HTTPS URL for security</li>
                    <li>• Page should be optimized for customer display dimensions</li>
                    <li>• Content should auto-refresh or be dynamic</li>
                    <li>• Avoid pages that require user interaction</li>
                  </ul>
                </div>
              </div>
            </div>
 
            {/* Information */}
            <div className="bg-surface rounded-lg shadow p-6">
              <h2 className="text-lg font-semibold text-text mb-4">About Customer Displays</h2>
              
              <div className="space-y-4 text-sm text-text">
                <div>
                  <h3 className="font-semibold text-text mb-2">Display Types</h3>
                  <ul className="space-y-1 ml-4">
                    <li>• <strong>Pole Displays:</strong> Small LED/LCD displays showing price and product info</li>
                    <li>• <strong>Secondary Monitors:</strong> Full screens showing promotional content</li>
                    <li>• <strong>Tablet Displays:</strong> Interactive displays for customer engagement</li>
                  </ul>
                </div>
 
                <div>
                  <h3 className="font-semibold text-text mb-2">Idle Screen Usage</h3>
                  <p className="mb-2">
                    When no transaction is active, the customer display shows the idle screen content. Common uses include:
                  </p>
                  <ul className="space-y-1 ml-4">
                    <li>• Store promotions and special offers</li>
                    <li>• Brand messaging and advertising</li>
                    <li>• Social media feeds or news</li>
                    <li>• Product catalogs and featured items</li>
                    <li>• Store information (hours, services, etc.)</li>
                  </ul>
                </div>
 
                <div>
                  <h3 className="font-semibold text-text mb-2">During Transactions</h3>
                  <p>
                    When a sale is active, the customer display automatically switches to show transaction details 
                    (items being scanned, prices, totals). The idle screen resumes when the transaction completes.
                  </p>
                </div>
              </div>
            </div>
 
            {/* Lane Reporting Link */}
            <div className="bg-success/10 border border-success/30 rounded-lg p-4">
              <h3 className="text-sm font-semibold text-text mb-2">View Active Displays</h3>
              <p className="text-sm text-text mb-3">
                Links to currently active customer displays are available in Lane Reporting. 
                You can view what customers see on each lane in real-time.
              </p>
              <a 
                href="/pages/settings/lanes" 
                className="inline-flex items-center text-sm font-medium text-brand hover:text-brand/80"
              >
                Go to Lane Reporting
                <svg className="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                </svg>
              </a>
            </div>
          </div>
 
          {/* Preview Panel */}
          <div className="lg:col-span-1">
            <div className="bg-surface rounded-lg shadow p-6 sticky top-24">
              <h2 className="text-lg font-semibold text-text mb-4">Preview</h2>
              
              <div className="border-2 border-text rounded-lg overflow-hidden bg-surface-2">
                {previewUrl ? (
                  <iframe
                    src={previewUrl}
                    className="w-full h-64"
                    title="Customer Display Preview"
                    sandbox="allow-scripts allow-same-origin"
                    scrolling="no"
                  />
                ) : (
                  <div className="w-full h-64 flex items-center justify-center text-muted">
                    <div className="text-center">
                      <svg className="mx-auto h-12 w-12 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                      </svg>
                      <p className="text-sm">Enter a URL to preview</p>
                    </div>
                  </div>
                )}
              </div>
              
              <p className="mt-3 text-xs text-muted">
                Preview shows how the idle screen will appear on customer displays. 
                Actual display may vary based on screen size and orientation.
              </p>
            </div>
          </div>
        </div>
 
        {/* Best Practices */}
        <div className="mt-6 bg-surface rounded-lg shadow p-6">
          <h2 className="text-lg font-semibold text-text mb-4">Best Practices</h2>
          
          <div className="grid md:grid-cols-2 gap-6 text-sm text-text">
            <div>
              <h3 className="font-semibold text-text mb-2">Content Guidelines</h3>
              <ul className="space-y-1 ml-4">
                <li>• Keep content simple and easy to read from a distance</li>
                <li>• Use high contrast colors for better visibility</li>
                <li>• Rotate content every 10-15 seconds to maintain interest</li>
                <li>• Avoid small text that customers cannot read</li>
                <li>• Test content at actual display size before deploying</li>
              </ul>
            </div>
 
            <div>
              <h3 className="font-semibold text-text mb-2">Technical Considerations</h3>
              <ul className="space-y-1 ml-4">
                <li>• Ensure reliable internet connection for hosted content</li>
                <li>• Use caching to minimize loading times</li>
                <li>• Monitor display uptime and connectivity</li>
                <li>• Have a fallback image for connection failures</li>
                <li>• Update content regularly to keep it fresh</li>
              </ul>
            </div>
          </div>
        </div>
 
        {/* Example URLs */}
        <div className="mt-6 bg-warn/10 border border-warn/30 rounded-lg p-4">
          <h3 className="text-sm font-semibold text-text mb-2">Example URLs</h3>
          <div className="text-sm text-text space-y-1">
            <p><strong>Digital signage:</strong> https://yourstore.com/displays/lane1</p>
            <p><strong>Promotional content:</strong> https://yourstore.com/promos/weekly-specials</p>
            <p><strong>Product showcase:</strong> https://yourstore.com/featured-products</p>
          </div>
        </div>
      </div>
    </div>
  );
}