page.tsx

Go to the documentation of this file.

"use client";
 
import React, { useState, useEffect } from 'react';
import { apiClient } from '@/lib/client/apiClient';
import { Icon } from '@/contexts/IconContext';
 
interface LoyaltyCampaign {
  f100: number; // ID
  f101: string; // Name
  f102: string; // Start Date
  f103: string; // Earn End Date
  f104: number; // Reward Level
  f105: number; // Money Reward Level
  f106: number; // Gain
  f107: string; // Input Pid
  f108: string; // Output Pid
  f109: number; // Membership Type flags
  f113: number; // Active Days
  f114: string; // Redeem End Date
}
 
export default function LoyaltyPage() {
  const [campaigns, setCampaigns] = useState<LoyaltyCampaign[]>([]);
  const [filteredCampaigns, setFilteredCampaigns] = useState<LoyaltyCampaign[]>([]);
  const [loading, setLoading] = useState(false);
  const [searchTerm, setSearchTerm] = useState('');
  const [showModal, setShowModal] = useState(false);
  const [editingCampaign, setEditingCampaign] = useState<LoyaltyCampaign | null>(null);
  const [sortConfig, setSortConfig] = useState<{ key: keyof LoyaltyCampaign; direction: 'asc' | 'desc' } | null>(null);
 
  // Form state
  const [formData, setFormData] = useState({
    name: '',
    startDate: '',
    earnEndDate: '',
    redeemEndDate: '',
    rewardLevel: '',
    moneyRewardLevel: '',
    gain: '',
    inputPid: '',
    outputPid: '',
    membershipType: '1',
    activeDays: ''
  });
 
  useEffect(() => {
    loadCampaigns();
  }, []);
 
  useEffect(() => {
    handleSearch();
  }, [searchTerm, campaigns]);
 
  const loadCampaigns = async () => {
    setLoading(true);
    try {
      const result = await apiClient.getBuckData({ 
        table: 'retailmax.elink.loyalty.campaign', 
        want: 'all' 
      });
 
      if (result.success && result.data) {
        const appData = result.data.APPD || [];
        const mapped: LoyaltyCampaign[] = appData.map((item: any) => ({
          f100: Number(item.f100) || 0,
          f101: item.f101 || "",
          f102: item.f102 || "",
          f103: item.f103 || "",
          f114: item.f114 || "",
          f104: Number(item.f104) || 0,
          f105: Number(item.f105) || 0,
          f106: Number(item.f106) || 1,
          f107: item.f107 || "",
          f108: item.f108 || "",
          f109: Number(item.f109) || 0,
          f113: Number(item.f113) || 0
        }));
        setCampaigns(mapped);
      } else {
        console.error('Failed to load campaigns:', result.error);
        setCampaigns([]);
      }
    } catch (error) {
      console.error('Error loading loyalty campaigns:', error);
      setCampaigns([]);
    } finally {
      setLoading(false);
    }
  };
 
  const handleSearch = () => {
    if (!searchTerm.trim()) {
      setFilteredCampaigns(campaigns);
      return;
    }
 
    const term = searchTerm.toLowerCase();
    const filtered = campaigns.filter(campaign => 
      String(campaign.f100 || '').toLowerCase().includes(term) ||
      String(campaign.f101 || '').toLowerCase().includes(term) ||
      String(campaign.f104 || '').toLowerCase().includes(term) ||
      String(campaign.f105 || '').toLowerCase().includes(term)
    );
    setFilteredCampaigns(filtered);
  };
 
  const formatDate = (dateStr: string) => {
    if (!dateStr) return '';
    try {
      const date = new Date(dateStr);
      return date.toISOString().split('T')[0];
    } catch {
      return dateStr;
    }
  };
 
  const formatCurrency = (value: number) => {
    return new Intl.NumberFormat('en-NZ', {
      style: 'currency',
      currency: 'NZD',
      minimumFractionDigits: 2,
      maximumFractionDigits: 2
    }).format(value);
  };
 
  const openNewCampaignModal = () => {
    setEditingCampaign(null);
    setFormData({
      name: '',
      startDate: '',
      earnEndDate: '',
      redeemEndDate: '',
      rewardLevel: '',
      moneyRewardLevel: '',
      gain: '',
      inputPid: '',
      outputPid: '',
      membershipType: '1',
      activeDays: ''
    });
    setShowModal(true);
  };
 
  const openEditModal = (campaign: LoyaltyCampaign) => {
    setEditingCampaign(campaign);
    const membershipType = ((campaign.f109 || 1) & 1) === 1 ? '1' : '0';
    setFormData({
      name: campaign.f101 || '',
      startDate: formatDate(campaign.f102 || ''),
      earnEndDate: formatDate(campaign.f103 || ''),
      redeemEndDate: formatDate(campaign.f114 || ''),
      rewardLevel: String(campaign.f104 || ''),
      moneyRewardLevel: String(campaign.f105 || ''),
      gain: String(campaign.f106 || ''),
      inputPid: String(campaign.f107 || ''),
      outputPid: String(campaign.f108 || ''),
      membershipType: membershipType,
      activeDays: String(campaign.f113 || '')
    });
    setShowModal(true);
  };
 
  const saveCampaign = async () => {
    const apiKey = sessionStorage.getItem("fieldpine_apikey");
    if (!apiKey) {
      alert("Please log in first");
      return;
    }
 
    // Build XML for DATI update
    let xml = '<DATI><f8_s>retailmax.elink.loyalty.program.edit</f8_s>';
    
    if (editingCampaign) {
      xml += '<f11_B>E</f11_B>';
      xml += `<f100_E>${editingCampaign.f100}</f100_E>`;
    } else {
      xml += '<f11_B>I</f11_B>';
    }
 
    // Add changed fields
    if (!editingCampaign || formData.name !== editingCampaign.f101) {
      xml += `<f101_s>${escapeXml(formData.name)}</f101_s>`;
    }
    if (!editingCampaign || formData.startDate !== formatDate(editingCampaign.f102)) {
      xml += `<f102_s>${escapeXml(formData.startDate)}</f102_s>`;
    }
    if (!editingCampaign || formData.earnEndDate !== formatDate(editingCampaign.f103)) {
      xml += `<f103_s>${escapeXml(formData.earnEndDate)}</f103_s>`;
    }
    if (!editingCampaign || formData.rewardLevel !== String(editingCampaign.f104)) {
      xml += `<f104_E>${escapeXml(formData.rewardLevel)}</f104_E>`;
    }
    if (!editingCampaign || formData.moneyRewardLevel !== String(editingCampaign.f105)) {
      xml += `<f105_s>${escapeXml(formData.moneyRewardLevel)}</f105_s>`;
    }
    if (!editingCampaign || formData.gain !== String(editingCampaign.f106)) {
      xml += `<f106_s>${escapeXml(formData.gain)}</f106_s>`;
    }
    if (!editingCampaign || formData.inputPid !== String(editingCampaign.f107)) {
      xml += `<f107_s>${escapeXml(formData.inputPid)}</f107_s>`;
    }
    if (!editingCampaign || formData.outputPid !== String(editingCampaign.f108)) {
      xml += `<f108_s>${escapeXml(formData.outputPid)}</f108_s>`;
    }
    if (!editingCampaign || formData.membershipType !== String((editingCampaign.f109 || 1) & 1)) {
      xml += `<f109_E>${formData.membershipType}</f109_E>`;
    }
    if (!editingCampaign || formData.activeDays !== String(editingCampaign.f113)) {
      xml += `<f113_E>${escapeXml(formData.activeDays)}</f113_E>`;
    }
    if (!editingCampaign || formData.redeemEndDate !== formatDate(editingCampaign.f114)) {
      xml += `<f114_s>${escapeXml(formData.redeemEndDate)}</f114_s>`;
    }
 
    xml += '</DATI>';
 
    try {
      const response = await fetch('/dati', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/xml',
          'Authorization': `Bearer ${apiKey}`
        },
        body: xml
      });
 
      if (response.ok) {
        setShowModal(false);
        loadCampaigns();
      } else {
        alert('Error saving campaign. Please try again.');
      }
    } catch (error) {
      console.error('Error saving campaign:', error);
      alert('Error saving campaign. Please try again.');
    }
  };
 
  const escapeXml = (str: string) => {
    return String(str)
      .replace(/&/g, '&amp;')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;')
      .replace(/"/g, '&quot;')
      .replace(/'/g, '&apos;');
  };
 
  const handleSort = (key: keyof LoyaltyCampaign) => {
    let direction: 'asc' | 'desc' = 'asc';
    if (sortConfig && sortConfig.key === key && sortConfig.direction === 'asc') {
      direction = 'desc';
    }
    setSortConfig({ key, direction });
  };
 
  const getSortedCampaigns = () => {
    const dataToSort = searchTerm ? filteredCampaigns : campaigns;
    if (!sortConfig) return dataToSort;
 
    return [...dataToSort].sort((a, b) => {
      const aVal = a[sortConfig.key];
      const bVal = b[sortConfig.key];
 
      if (aVal === undefined || aVal === null) return 1;
      if (bVal === undefined || bVal === null) return -1;
 
      if (typeof aVal === 'number' && typeof bVal === 'number') {
        return sortConfig.direction === 'asc' ? aVal - bVal : bVal - aVal;
      }
 
      const aStr = String(aVal).toLowerCase();
      const bStr = String(bVal).toLowerCase();
      
      if (aStr < bStr) return sortConfig.direction === 'asc' ? -1 : 1;
      if (aStr > bStr) return sortConfig.direction === 'asc' ? 1 : -1;
      return 0;
    });
  };
 
  const sortedCampaigns = getSortedCampaigns();
 
  return (
    <div className="p-6">
      <h1 className="text-3xl font-bold mb-6 flex items-center gap-2">
        <Icon name="card_giftcard" size={32} className="text-brand" />
        Loyalty Campaign Management
      </h1>
 
      {/* Action Buttons */}
      <div className="mb-6 flex flex-wrap gap-3">
        <button
          onClick={openNewCampaignModal}
          className="bg-brand hover:bg-brand2 text-surface px-4 py-2 rounded flex items-center gap-2"
        >
          <Icon name="card_giftcard" size={18} />
          New Campaign
        </button>
        <button
          onClick={() => {/* Excel export logic */}}
          className="bg-surface-2 hover:bg-surface text-text px-4 py-2 rounded border border-border flex items-center gap-2"
        >
          <Icon name="file_download" size={18} />
          Export to Excel
        </button>
      </div>
 
      {/* Search */}
      <div className="mb-6 flex gap-2 items-center">
        <input
          type="text"
          placeholder="Search campaigns..."
          value={searchTerm}
          onChange={(e) => setSearchTerm(e.target.value)}
          className="border border-border rounded px-3 py-2 flex-1 max-w-md"
        />
        <button
          onClick={handleSearch}
          className="bg-info text-surface px-4 py-2 rounded hover:bg-info/80 flex items-center gap-2"
        >
          <Icon name="search" size={18} /> Search
        </button>
        <span className="text-sm text-muted">
          Displaying {sortedCampaigns.length} campaign{sortedCampaigns.length !== 1 ? 's' : ''}
        </span>
      </div>
 
      {/* Campaigns Table */}
      {loading ? (
        <div className="text-center py-8">
          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-brand mx-auto"></div>
          <p className="mt-2 text-muted">Loading campaigns...</p>
        </div>
      ) : sortedCampaigns.length > 0 ? (
        <div className="bg-surface rounded-lg shadow overflow-hidden">
          <div className="overflow-x-auto">
            <table className="min-w-full divide-y divide-border">
              <thead className="bg-surface-2">
                <tr>
                  <th 
                    onClick={() => handleSort('f100')}
                    className="px-6 py-3 text-left text-xs font-medium text-muted uppercase tracking-wider cursor-pointer hover:bg-surface"
                  >
                    ID {sortConfig?.key === 'f100' && (sortConfig.direction === 'asc' ? '↑' : '↓')}
                  </th>
                  <th 
                    onClick={() => handleSort('f101')}
                    className="px-6 py-3 text-left text-xs font-medium text-muted uppercase tracking-wider cursor-pointer hover:bg-surface"
                  >
                    Name {sortConfig?.key === 'f101' && (sortConfig.direction === 'asc' ? '↑' : '↓')}
                  </th>
                  <th 
                    onClick={() => handleSort('f104')}
                    className="px-6 py-3 text-right text-xs font-medium text-muted uppercase tracking-wider cursor-pointer hover:bg-surface"
                  >
                    Reward Level {sortConfig?.key === 'f104' && (sortConfig.direction === 'asc' ? '↑' : '↓')}
                  </th>
                  <th 
                    onClick={() => handleSort('f105')}
                    className="px-6 py-3 text-right text-xs font-medium text-muted uppercase tracking-wider cursor-pointer hover:bg-surface"
                  >
                    Reward Level $ {sortConfig?.key === 'f105' && (sortConfig.direction === 'asc' ? '↑' : '↓')}
                  </th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-muted uppercase tracking-wider">
                    Options
                  </th>
                </tr>
              </thead>
              <tbody className="bg-surface divide-y divide-border">
                {sortedCampaigns.map((campaign, idx) => (
                  <tr key={idx} className="hover:bg-surface-2">
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-muted">
                      {campaign.f100}
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-text">
                      {campaign.f101}
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-text text-right">
                      {campaign.f104}
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-text text-right font-mono">
                      {formatCurrency(campaign.f105 || 0)}
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm">
                      <div className="flex gap-2">
                        <button
                          onClick={() => openEditModal(campaign)}
                          className="text-brand hover:text-brand2 font-medium flex items-center gap-1"
                        >
                          <Icon name="edit" size={16} /> Edit Config
                        </button>
                        <a
                          href={`/report/pos/customer/fieldpine/loyalty_single.htm?rpid=${campaign.f100}`}
                          target="_blank"
                          className="text-info hover:text-info/80 font-medium flex items-center gap-1"
                        >
                          <Icon name="visibility" size={16} /> View Full Detail
                        </a>
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      ) : (
        <div className="bg-surface rounded-lg shadow p-8 text-center text-muted">
          No loyalty campaigns found.
        </div>
      )}
 
      {/* Edit/Create Modal */}
      {showModal && (
        <div className="fixed inset-0 modal-backdrop flex items-center justify-center z-50 p-4">
          <div className="bg-surface rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
            <div className="sticky top-0 bg-surface border-b border-border px-6 py-4 flex justify-between items-center">
              <h2 className="text-2xl font-bold">
                {editingCampaign ? 'Edit Loyalty Campaign' : 'Create New Loyalty Campaign'}
              </h2>
              <button
                onClick={() => setShowModal(false)}
                className="text-muted hover:text-text"
              >
                <Icon name="close" size={24} />
              </button>
            </div>
 
            <div className="p-6">
              <table className="w-full">
                <tbody>
                  <tr className="bg-surface">
                    <td className="py-2 pr-4 font-medium">Name of Campaign</td>
                    <td className="py-2">
                      <input
                        type="text"
                        value={formData.name}
                        onChange={(e) => setFormData({...formData, name: e.target.value})}
                        className="border border-border rounded px-3 py-2 w-full"
                      />
                    </td>
                    <td className="py-2 pl-4 text-xs text-muted">
                      Used to name the campaign on your reports
                    </td>
                  </tr>
                  <tr className="bg-surface-2">
                    <td className="py-2 pr-4 font-medium">Start Date</td>
                    <td className="py-2">
                      <input
                        type="date"
                        value={formData.startDate}
                        onChange={(e) => setFormData({...formData, startDate: e.target.value})}
                        className="border border-border rounded px-3 py-2 w-full"
                      />
                    </td>
                    <td className="py-2 pl-4 text-xs text-muted"></td>
                  </tr>
                  <tr className="bg-surface">
                    <td className="py-2 pr-4 font-medium">Earn End Date</td>
                    <td className="py-2">
                      <input
                        type="date"
                        value={formData.earnEndDate}
                        onChange={(e) => setFormData({...formData, earnEndDate: e.target.value})}
                        className="border border-border rounded px-3 py-2 w-full"
                      />
                    </td>
                    <td className="py-2 pl-4 text-xs text-muted"></td>
                  </tr>
                  <tr className="bg-surface-2">
                    <td className="py-2 pr-4 font-medium">Redeem End Date</td>
                    <td className="py-2">
                      <input
                        type="date"
                        value={formData.redeemEndDate}
                        onChange={(e) => setFormData({...formData, redeemEndDate: e.target.value})}
                        className="border border-border rounded px-3 py-2 w-full"
                      />
                    </td>
                    <td className="py-2 pl-4 text-xs text-muted"></td>
                  </tr>
                  <tr className="bg-surface">
                    <td className="py-2 pr-4 font-medium">Reward Level</td>
                    <td className="py-2">
                      <input
                        type="number"
                        value={formData.rewardLevel}
                        onChange={(e) => setFormData({...formData, rewardLevel: e.target.value})}
                        className="border border-border rounded px-3 py-2 w-full"
                      />
                    </td>
                    <td className="py-2 pl-4 text-xs text-muted"></td>
                  </tr>
                  <tr className="bg-surface-2">
                    <td className="py-2 pr-4 font-medium">Money Reward Level</td>
                    <td className="py-2">
                      <input
                        type="number"
                        step="0.01"
                        value={formData.moneyRewardLevel}
                        onChange={(e) => setFormData({...formData, moneyRewardLevel: e.target.value})}
                        className="border border-border rounded px-3 py-2 w-full"
                      />
                    </td>
                    <td className="py-2 pl-4 text-xs text-muted"></td>
                  </tr>
                  <tr className="bg-surface">
                    <td className="py-2 pr-4 font-medium">Gain</td>
                    <td className="py-2">
                      <input
                        type="number"
                        value={formData.gain}
                        onChange={(e) => setFormData({...formData, gain: e.target.value})}
                        className="border border-border rounded px-3 py-2 w-full"
                      />
                    </td>
                    <td className="py-2 pl-4 text-xs text-muted">
                      Points multiplier. If set to 2, customer will get double rewards
                    </td>
                  </tr>
                  <tr className="bg-surface-2">
                    <td className="py-2 pr-4 font-medium">Input Pid</td>
                    <td className="py-2">
                      <input
                        type="text"
                        value={formData.inputPid}
                        onChange={(e) => setFormData({...formData, inputPid: e.target.value})}
                        className="border border-border rounded px-3 py-2 w-full"
                      />
                    </td>
                    <td className="py-2 pl-4 text-xs text-muted"></td>
                  </tr>
                  <tr className="bg-surface">
                    <td className="py-2 pr-4 font-medium">Output Pid</td>
                    <td className="py-2">
                      <input
                        type="text"
                        value={formData.outputPid}
                        onChange={(e) => setFormData({...formData, outputPid: e.target.value})}
                        className="border border-border rounded px-3 py-2 w-full"
                      />
                    </td>
                    <td className="py-2 pl-4 text-xs text-muted"></td>
                  </tr>
                  <tr className="bg-surface-2">
                    <td className="py-2 pr-4 font-medium">Membership Type</td>
                    <td className="py-2">
                      <select
                        value={formData.membershipType}
                        onChange={(e) => setFormData({...formData, membershipType: e.target.value})}
                        className="border border-border rounded px-3 py-2 w-full"
                      >
                        <option value="0">Individually add Customers</option>
                        <option value="1">All Customers Included</option>
                      </select>
                    </td>
                    <td className="py-2 pl-4 text-xs text-muted"></td>
                  </tr>
                  <tr className="bg-surface">
                    <td className="py-2 pr-4 font-medium">Active Days</td>
                    <td className="py-2">
                      <input
                        type="number"
                        value={formData.activeDays}
                        onChange={(e) => setFormData({...formData, activeDays: e.target.value})}
                        className="border border-border rounded px-3 py-2 w-full"
                      />
                    </td>
                    <td className="py-2 pl-4 text-xs text-muted">
                      A customer that does not perform a transaction in the last N days is considered InActive
                    </td>
                  </tr>
                </tbody>
              </table>
 
              <div className="mt-6 flex justify-end gap-3">
                <button
                  onClick={() => setShowModal(false)}
                  className="px-4 py-2 border border-border rounded hover:bg-surface-2"
                >
                  Cancel
                </button>
                <button
                  onClick={saveCampaign}
                  className="px-4 py-2 bg-brand text-surface rounded hover:bg-brand2 flex items-center gap-2"
                >
                  <Icon name="save" size={18} />
                  Save
                </button>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}