page.tsx

Go to the documentation of this file.

"use client";
 
import React, { useEffect, useState } from "react";
import { apiClient } from "@/lib/client/apiClient";
 
interface LoyaltyCampaign {
  f100: number;  // ID
  f101: string;  // Name
  f102?: string; // Start Date
  f103?: string; // Earn End Date
  f114?: string; // Redeem End Date
  f104?: number; // Reward Level
  f105?: number; // Money Reward Level
  f106?: number; // Gain (multiplier)
  f107?: number; // Input Pid
  f108?: number; // Output Pid
  f109?: number; // Membership Type
  f113?: number; // Active Days
}
 
export default function LoyaltyCampaignsPage() {
  const [campaigns, setCampaigns] = useState<LoyaltyCampaign[]>([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string>("");
  const [showNewCampaignModal, setShowNewCampaignModal] = useState(false);
  const [saving, setSaving] = useState(false);
  const [searchTerm, setSearchTerm] = useState("");
 
  const [newCampaign, setNewCampaign] = useState({
    name: "",
    startDate: "",
    earnEndDate: "",
    redeemEndDate: "",
    rewardLevel: "",
    moneyRewardLevel: "",
    gain: "1",
    inputPid: "",
    outputPid: "",
    membershipType: "1", // All Customers by default
    activeDays: ""
  });
 
  useEffect(() => {
    loadCampaigns();
  }, []);
 
  const loadCampaigns = async () => {
    setLoading(true);
    setError("");
    try {
      const response = await apiClient.getBuckData({ table: 'retailmax.elink.loyalty.campaign', want: 'all' });
      
      if (response.success && response.data) {
        const appData = response.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: Number(item.f107) || 0,
          f108: Number(item.f108) || 0,
          f109: Number(item.f109) || 0,
          f113: Number(item.f113) || 0
        }));
        setCampaigns(mapped);
      } else if (response.success) {
        // API succeeded but no data - this is OK, just means no campaigns exist
        setCampaigns([]);
      } else {
        // API call failed
        setError("Error loading campaigns. Please try again.");
      }
    } catch (err) {
      console.error("Failed to load loyalty campaigns", err);
      setError("Error loading campaigns. Please try again.");
    } finally {
      setLoading(false);
    }
  };
 
  const handleCreateCampaign = async () => {
    if (!newCampaign.name.trim()) {
      alert("Please enter a campaign name");
      return;
    }
 
    setSaving(true);
    try {
      // Create campaign using DATI API
      const xml = [
        '<DATI>',
        '<f8_s>retailmax.elink.loyalty.campaign</f8_s>',
        '<f11_B>I</f11_B>',
        `<f101_s>${newCampaign.name.replace(/&/g, '&amp;').replace(/</g, '&lt;')}</f101_s>`,
        newCampaign.startDate ? `<f102_s>${newCampaign.startDate}</f102_s>` : '',
        newCampaign.earnEndDate ? `<f103_s>${newCampaign.earnEndDate}</f103_s>` : '',
        newCampaign.redeemEndDate ? `<f114_s>${newCampaign.redeemEndDate}</f114_s>` : '',
        newCampaign.rewardLevel ? `<f104_E>${newCampaign.rewardLevel}</f104_E>` : '',
        newCampaign.moneyRewardLevel ? `<f105_E>${newCampaign.moneyRewardLevel}</f105_E>` : '',
        `<f106_E>${newCampaign.gain || 1}</f106_E>`,
        newCampaign.inputPid ? `<f107_E>${newCampaign.inputPid}</f107_E>` : '',
        newCampaign.outputPid ? `<f108_E>${newCampaign.outputPid}</f108_E>` : '',
        `<f109_E>${newCampaign.membershipType}</f109_E>`,
        newCampaign.activeDays ? `<f113_E>${newCampaign.activeDays}</f113_E>` : '',
        '</DATI>'
      ].join('');
 
      const response = await fetch('/dati', {
        method: 'POST',
        headers: { 'Content-Type': 'application/xml', 'Accept': 'application/json' },
        credentials: 'include',
        body: xml
      });
 
      if (response.ok) {
        alert("Campaign created successfully!");
        setShowNewCampaignModal(false);
        setNewCampaign({
          name: "",
          startDate: "",
          earnEndDate: "",
          redeemEndDate: "",
          rewardLevel: "",
          moneyRewardLevel: "",
          gain: "1",
          inputPid: "",
          outputPid: "",
          membershipType: "1",
          activeDays: ""
        });
        loadCampaigns();
      }
    } catch (err) {
      console.error("Failed to create campaign", err);
      alert("Failed to create campaign. Please try again.");
    } finally {
      setSaving(false);
    }
  };
 
  const filteredCampaigns = campaigns.filter(c => 
    !searchTerm || 
    c.f101.toLowerCase().includes(searchTerm.toLowerCase()) ||
    String(c.f100).includes(searchTerm)
  );
 
  const formatDate = (dateStr?: string) => {
    if (!dateStr) return "-";
    try {
      const date = new Date(dateStr);
      if (isNaN(date.getTime())) return dateStr;
      return date.toLocaleDateString("en-NZ", {
        day: "2-digit",
        month: "short",
        year: "numeric"
      });
    } catch {
      return dateStr;
    }
  };
 
  return (
    <div className="p-6">
      {/* Header */}
      <div className="mb-6">
        <h1 className="text-3xl font-bold mb-2">Loyalty Campaigns 🎁</h1>
        <p className="text-muted">Manage customer loyalty and rewards programs</p>
      </div>
 
      {/* Action Bar */}
      <div className="bg-surface rounded-lg shadow p-4 mb-6">
        <div className="flex flex-wrap gap-4 items-center justify-between">
          <div className="flex gap-3">
            <button
              onClick={() => setShowNewCampaignModal(true)}
              className="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 font-medium"
            >
              New Campaign
            </button>
            <button
              onClick={loadCampaigns}
              disabled={loading}
              className="px-4 py-2 border border-border rounded-lg hover:bg-surface-2 disabled:opacity-50"
            >
              {loading ? "Loading..." : "Refresh"}
            </button>
          </div>
          
          <div className="flex gap-2 items-center">
            <input
              type="text"
              placeholder="Search campaigns..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="px-3 py-2 border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-green-600"
            />
            <span className="text-sm text-muted">
              Displaying {filteredCampaigns.length}
            </span>
          </div>
        </div>
      </div>
 
      {/* Error Message */}
      {error && (
        <div className="mb-4 p-4 bg-red-50 border-l-4 border-red-500 text-red-700">
          {error}
        </div>
      )}
 
      {/* Campaigns Table */}
      <div className="bg-surface rounded-lg shadow overflow-hidden">
        {loading ? (
          <div className="p-8 text-center">
            <div className="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-green-600"></div>
            <p className="mt-2 text-muted">Loading campaigns...</p>
          </div>
        ) : (
          <div className="overflow-x-auto">
            <table className="w-full text-sm">
              <thead className="bg-surface-2 sticky top-0">
                <tr>
                  <th className="px-4 py-3 text-left font-semibold">ID</th>
                  <th className="px-4 py-3 text-left font-semibold">Name</th>
                  <th className="px-4 py-3 text-left font-semibold">Start Date</th>
                  <th className="px-4 py-3 text-left font-semibold">Earn End</th>
                  <th className="px-4 py-3 text-left font-semibold">Redeem End</th>
                  <th className="px-4 py-3 text-right font-semibold">Reward Level</th>
                  <th className="px-4 py-3 text-right font-semibold">$ Reward</th>
                  <th className="px-4 py-3 text-right font-semibold">Gain</th>
                  <th className="px-4 py-3 text-center font-semibold">Options</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-gray-200">
                {filteredCampaigns.length === 0 ? (
                  <tr>
                    <td colSpan={9} className="px-4 py-12 text-center">
                      <div className="flex flex-col items-center justify-center">
                        <div className="text-6xl mb-4">🎁</div>
                        <h3 className="text-lg font-semibold text-text mb-2">
                          {searchTerm ? "No campaigns match your search" : "No loyalty campaigns yet"}
                        </h3>
                        {!searchTerm && (
                          <>
                            <p className="text-muted mb-4">
                              Create your first loyalty campaign to reward your customers
                            </p>
                            <button
                              onClick={() => setShowNewCampaignModal(true)}
                              className="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 font-medium"
                            >
                              Create Campaign
                            </button>
                          </>
                        )}
                      </div>
                    </td>
                  </tr>
                ) : (
                  filteredCampaigns.map((campaign) => (
                    <tr key={campaign.f100} className="hover:bg-surface-2">
                      <td className="px-4 py-3 font-mono text-sm text-green-600">
                        {campaign.f100}
                      </td>
                      <td className="px-4 py-3 font-medium">
                        {campaign.f101}
                      </td>
                      <td className="px-4 py-3 text-muted">
                        {formatDate(campaign.f102)}
                      </td>
                      <td className="px-4 py-3 text-muted">
                        {formatDate(campaign.f103)}
                      </td>
                      <td className="px-4 py-3 text-muted">
                        {formatDate(campaign.f114)}
                      </td>
                      <td className="px-4 py-3 text-right">
                        {campaign.f104 || "-"}
                      </td>
                      <td className="px-4 py-3 text-right">
                        {campaign.f105 ? `$${campaign.f105.toFixed(2)}` : "-"}
                      </td>
                      <td className="px-4 py-3 text-right">
                        {campaign.f106 ? `${campaign.f106}x` : "1x"}
                      </td>
                      <td className="px-4 py-3 text-center">
                        <div className="flex gap-2 justify-center">
                          <button className="px-3 py-1 bg-brand text-white rounded hover:bg-brand/90 text-sm font-medium">
                            Edit
                          </button>
                          <button className="px-3 py-1 bg-surface-2 text-text rounded hover:bg-surface-2 text-sm font-medium">
                            View
                          </button>
                        </div>
                      </td>
                    </tr>
                  ))
                )}
              </tbody>
            </table>
          </div>
        )}
      </div>
 
      {/* New Campaign Modal */}
      {showNewCampaignModal && (
        <div 
          className="fixed inset-0 bg-black/30 z-50 flex items-start justify-center p-4 overflow-y-auto"
          onClick={() => setShowNewCampaignModal(false)}
        >
          <div 
            className="bg-surface rounded-lg shadow-xl max-w-2xl w-full my-8"
            onClick={(e) => e.stopPropagation()}
          >
            <div className="border-b border-border p-4 flex items-center justify-between">
              <h2 className="text-xl font-bold text-green-600">Create New Loyalty Campaign</h2>
              <button
                onClick={() => setShowNewCampaignModal(false)}
                className="px-3 py-1 text-sm border border-border rounded hover:bg-surface-2"
              >
                Close
              </button>
            </div>
 
            <div className="p-6 space-y-4">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="md:col-span-2">
                  <label className="block text-sm font-medium text-text mb-1">
                    Name of Campaign *
                  </label>
                  <input
                    type="text"
                    value={newCampaign.name}
                    onChange={(e) => setNewCampaign({...newCampaign, name: e.target.value})}
                    className="w-full px-3 py-2 border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-green-600"
                    placeholder="e.g., Summer Rewards 2025"
                  />
                  <p className="text-xs text-muted mt-1">Used to name the campaign on your reports</p>
                </div>
 
                <div>
                  <label className="block text-sm font-medium text-text mb-1">
                    Start Date
                  </label>
                  <input
                    type="date"
                    value={newCampaign.startDate}
                    onChange={(e) => setNewCampaign({...newCampaign, startDate: e.target.value})}
                    className="w-full px-3 py-2 border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-green-600"
                  />
                </div>
 
                <div>
                  <label className="block text-sm font-medium text-text mb-1">
                    Earn End Date
                  </label>
                  <input
                    type="date"
                    value={newCampaign.earnEndDate}
                    onChange={(e) => setNewCampaign({...newCampaign, earnEndDate: e.target.value})}
                    className="w-full px-3 py-2 border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-green-600"
                  />
                </div>
 
                <div>
                  <label className="block text-sm font-medium text-text mb-1">
                    Redeem End Date
                  </label>
                  <input
                    type="date"
                    value={newCampaign.redeemEndDate}
                    onChange={(e) => setNewCampaign({...newCampaign, redeemEndDate: e.target.value})}
                    className="w-full px-3 py-2 border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-green-600"
                  />
                </div>
 
                <div>
                  <label className="block text-sm font-medium text-text mb-1">
                    Reward Level
                  </label>
                  <input
                    type="number"
                    value={newCampaign.rewardLevel}
                    onChange={(e) => setNewCampaign({...newCampaign, rewardLevel: e.target.value})}
                    className="w-full px-3 py-2 border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-green-600"
                    placeholder="e.g., 100"
                  />
                </div>
 
                <div>
                  <label className="block text-sm font-medium text-text mb-1">
                    Money Reward Level
                  </label>
                  <input
                    type="number"
                    step="0.01"
                    value={newCampaign.moneyRewardLevel}
                    onChange={(e) => setNewCampaign({...newCampaign, moneyRewardLevel: e.target.value})}
                    className="w-full px-3 py-2 border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-green-600"
                    placeholder="e.g., 10.00"
                  />
                </div>
 
                <div>
                  <label className="block text-sm font-medium text-text mb-1">
                    Gain (Multiplier)
                  </label>
                  <input
                    type="number"
                    step="0.1"
                    value={newCampaign.gain}
                    onChange={(e) => setNewCampaign({...newCampaign, gain: e.target.value})}
                    className="w-full px-3 py-2 border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-green-600"
                  />
                  <p className="text-xs text-muted mt-1">Points multiplier (e.g., 2 = double rewards)</p>
                </div>
 
                <div>
                  <label className="block text-sm font-medium text-text mb-1">
                    Membership Type
                  </label>
                  <select
                    value={newCampaign.membershipType}
                    onChange={(e) => setNewCampaign({...newCampaign, membershipType: e.target.value})}
                    className="w-full px-3 py-2 border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-green-600"
                  >
                    <option value="0">Individually add Customers</option>
                    <option value="1">All Customers Included</option>
                  </select>
                </div>
 
                <div>
                  <label className="block text-sm font-medium text-text mb-1">
                    Input Pid
                  </label>
                  <input
                    type="number"
                    value={newCampaign.inputPid}
                    onChange={(e) => setNewCampaign({...newCampaign, inputPid: e.target.value})}
                    className="w-full px-3 py-2 border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-green-600"
                  />
                </div>
 
                <div>
                  <label className="block text-sm font-medium text-text mb-1">
                    Output Pid
                  </label>
                  <input
                    type="number"
                    value={newCampaign.outputPid}
                    onChange={(e) => setNewCampaign({...newCampaign, outputPid: e.target.value})}
                    className="w-full px-3 py-2 border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-green-600"
                  />
                </div>
 
                <div>
                  <label className="block text-sm font-medium text-text mb-1">
                    Active Days
                  </label>
                  <input
                    type="number"
                    value={newCampaign.activeDays}
                    onChange={(e) => setNewCampaign({...newCampaign, activeDays: e.target.value})}
                    className="w-full px-3 py-2 border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-green-600"
                    placeholder="e.g., 365"
                  />
                  <p className="text-xs text-muted mt-1">Days of inactivity before customer considered inactive</p>
                </div>
              </div>
 
              <div className="pt-4 border-t border-border flex justify-end gap-3">
                <button
                  onClick={() => setShowNewCampaignModal(false)}
                  className="px-4 py-2 border border-border rounded-lg hover:bg-surface-2"
                  disabled={saving}
                >
                  Cancel
                </button>
                <button
                  onClick={handleCreateCampaign}
                  disabled={saving || !newCampaign.name.trim()}
                  className="px-6 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed font-medium"
                >
                  {saving ? "Saving..." : "Save Campaign"}
                </button>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}