page.tsx

Go to the documentation of this file.

"use client";
 
import React, { useState, useEffect } from "react";
import Link from "next/link";
 
interface Customer {
  f100: number; // Customer ID
  f101: string; // Name
  f112?: string; // Phone
  f113?: string; // Mobile
  f1126?: string; // SMS Number (sending to)
  f210?: number; // Marketing preference (6=opt-out, 1=opt-in)
  f213?: number; // External flags
  f501?: number; // Set ID
  fSend?: boolean; // Should send to this customer
  fPhoneBad?: boolean; // Phone validation failed
}
 
type WizardStep = 1 | 2 | 3 | 4;
 
export default function BulkSmsPage() {
  const [currentStep, setCurrentStep] = useState<WizardStep>(1);
  const [smsMessage, setSmsMessage] = useState("");
  const [testPhone, setTestPhone] = useState("");
  const [testStatus, setTestStatus] = useState("");
  
  // Message stats
  const [messageLength, setMessageLength] = useState(0);
  const [smsCount, setSmsCount] = useState(0);
  
  // Customer selection
  const [selectedCustomers, setSelectedCustomers] = useState<Customer[]>([]);
  const [allCustomers, setAllCustomers] = useState(false);
  const [selectedSet, setSelectedSet] = useState(0);
  const [removeDuplicates, setRemoveDuplicates] = useState(true);
  const [removeOptOut, setRemoveOptOut] = useState(true);
  
  // Validation and status
  const [loading, setLoading] = useState(false);
  const [phoneCount, setPhoneCount] = useState(0);
  const [validationStatus, setValidationStatus] = useState("");
  const [acknowledged, setAcknowledged] = useState(false);
  const [sendStatus, setSendStatus] = useState("");
  const [previewText, setPreviewText] = useState("");
 
  // Calculate SMS count based on message length
  useEffect(() => {
    const len = smsMessage.length;
    setMessageLength(len);
    
    if (len === 0) {
      setSmsCount(0);
    } else if (len <= 160) {
      setSmsCount(1);
    } else if (len === 612) {
      setSmsCount(4);
    } else {
      setSmsCount(1 + Math.floor(len / 153));
    }
  }, [smsMessage]);
 
  useEffect(() => {
    if (allCustomers || selectedSet > 0) {
      loadCustomers();
    }
  }, [allCustomers, selectedSet]);
 
  useEffect(() => {
    calculatePhoneCount();
  }, [selectedCustomers, removeDuplicates, removeOptOut]);
 
  const loadCustomers = async () => {
    try {
      setLoading(true);
      setValidationStatus("Loading customers...");
      
      let url = "/api/v1/customers?fields=f1126,f100,f101,f112,f113,f210,f213";
      if (selectedSet > 0) {
        url += `&set=${selectedSet}`;
      }
      
      const response = await fetch(url);
      
      if (!response.ok || !response.headers.get("content-type")?.includes("application/json")) {
        setValidationStatus("⚠️ Customer API not yet implemented - UI demonstration mode");
        setSelectedCustomers([]);
        return;
      }
      
      const data = await response.json();
      
      if (data.success && data.data?.DATS) {
        const customers = Array.isArray(data.data.DATS) ? data.data.DATS : [data.data.DATS];
        
        const processedCustomers = customers.map((c: Customer) => ({
          ...c,
          fSend: true,
          fPhoneBad: !c.f1126 || c.f1126.length < 10,
        }));
        
        setSelectedCustomers(processedCustomers);
        setValidationStatus("");
      }
    } catch (error) {
      console.error("Error loading customers:", error);
      setValidationStatus("⚠️ Customer API not available - UI demonstration mode");
      setSelectedCustomers([]);
    } finally {
      setLoading(false);
    }
  };
 
  const calculatePhoneCount = () => {
    const seen = new Set<string>();
    let count = 0;
 
    for (const customer of selectedCustomers) {
      if (!customer.fSend) continue;
      
      const phone = customer.f1126?.toLowerCase();
      if (!phone) continue;
      
      if (removeDuplicates && seen.has(phone)) continue;
      if (removeOptOut && customer.f210 === 6) continue;
      
      seen.add(phone);
      count++;
    }
    
    setPhoneCount(count);
  };
 
  const generatePreview = async () => {
    try {
      const response = await fetch("/api/v1/sms/preview", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ body: smsMessage }),
      });
      
      if (!response.ok || !response.headers.get("content-type")?.includes("application/json")) {
        setPreviewText(smsMessage);
        return;
      }
      
      const data = await response.json();
      if (data.success) {
        setPreviewText(data.preview);
      }
    } catch (error) {
      console.error("Preview error:", error);
      setPreviewText(smsMessage);
    }
  };
 
  const sendTestSms = async () => {
    if (!testPhone || testPhone.length < 10) {
      alert("Please enter a valid phone number");
      return;
    }
    
    try {
      setLoading(true);
      setTestStatus("⏳ Sending test SMS...");
      
      const response = await fetch("/api/v1/sms/send-test", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          to: testPhone,
          message: smsMessage,
        }),
      });
      
      if (!response.ok || !response.headers.get("content-type")?.includes("application/json")) {
        setTestStatus(`⚠️ SMS API not yet implemented - UI demonstration mode (would send to: ${testPhone})`);
        return;
      }
      
      const data = await response.json();
      if (data.success) {
        setTestStatus(`✅ Test SMS queued to ${testPhone}`);
      } else {
        setTestStatus("❌ Failed to send test");
      }
    } catch (error) {
      console.error("Test SMS error:", error);
      setTestStatus("⚠️ SMS API not available");
    } finally {
      setLoading(false);
    }
  };
 
  const sendBulkSms = async () => {
    if (!acknowledged) {
      alert("Please acknowledge the legal requirements");
      return;
    }
    
    try {
      setLoading(true);
      setSendStatus("⏳ Sending SMS messages...");
      
      const seen = new Set<string>();
      const recipients: string[] = [];
      
      for (const customer of selectedCustomers) {
        if (!customer.fSend) continue;
        
        const phone = customer.f1126?.toLowerCase();
        if (!phone) continue;
        
        if (removeDuplicates && seen.has(phone)) continue;
        if (removeOptOut && customer.f210 === 6) continue;
        
        recipients.push(customer.f1126!);
        seen.add(phone);
      }
      
      const response = await fetch("/api/v1/sms/send-bulk", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          message: smsMessage,
          recipients,
        }),
      });
      
      if (!response.ok || !response.headers.get("content-type")?.includes("application/json")) {
        setSendStatus("⚠️ Bulk SMS API not yet implemented - UI demonstration mode");
        return;
      }
      
      const data = await response.json();
      if (data.success) {
        setSendStatus(`✅ Successfully queued ${recipients.length} SMS messages!`);
      } else {
        setSendStatus("❌ Failed to queue messages");
      }
    } catch (error) {
      console.error("Bulk send error:", error);
      setSendStatus("⚠️ SMS API not available");
    } finally {
      setLoading(false);
    }
  };
 
  const insertField = (field: string) => {
    setSmsMessage(prev => prev + field);
  };
 
  return (
    <div className="min-h-screen bg-gray-50">
      <div className="max-w-7xl mx-auto p-6">
        {/* Header */}
        <div className="mb-8">
          <div className="flex items-center gap-3 mb-2">
            <Link href="/marketing" className="text-gray-600 hover:text-gray-800">Marketing</Link>
            <span className="text-gray-400">/</span>
            <Link href="/marketing/messaging" className="text-gray-600 hover:text-gray-800">Email & Interfaces</Link>
            <span className="text-gray-400">/</span>
            <span className="text-gray-900 font-semibold">Send Bulk SMS</span>
          </div>
          <h1 className="text-3xl font-bold text-gray-900 mb-2">Send Bulk SMS</h1>
          <p className="text-gray-600 text-sm">
            Create and send an SMS/Text message to multiple customers
          </p>
        </div>
 
        {/* Warning Box */}
        <div className="mb-6 bg-yellow-50 border-l-4 border-yellow-400 p-4">
          <div className="flex items-start">
            <span className="text-2xl mr-3">⚠️</span>
            <div className="text-sm text-yellow-800">
              <p className="font-semibold mb-1">Extended Functionality</p>
              <p>Bulk SMS sending is covered by law in many countries. Ensure compliance before sending.</p>
            </div>
          </div>
        </div>
 
        {/* Step Navigation */}
        <div className="bg-white rounded-lg shadow-md mb-6 overflow-hidden">
          <div className="flex">
            {[1, 2, 3, 4].map((step) => (
              <button
                key={step}
                onClick={() => setCurrentStep(step as WizardStep)}
                className={`flex-1 px-6 py-5 text-center font-semibold transition-all relative ${
                  currentStep === step
                    ? "bg-[#00946b] text-white shadow-lg z-10"
                    : currentStep > step
                    ? "bg-green-50 text-green-700 hover:bg-green-100"
                    : "bg-gray-100 text-gray-500 hover:bg-gray-200"
                }`}
              >
                <div className="flex flex-col items-center gap-2">
                  <div className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold ${
                    currentStep === step
                      ? "bg-white text-[#00946b]"
                      : currentStep > step
                      ? "bg-green-600 text-white"
                      : "bg-gray-300 text-gray-600"
                  }`}>
                    {currentStep > step ? "✓" : step}
                  </div>
                  <div className="text-sm">
                    {step === 1 ? "Create Message" :
                     step === 2 ? "Test Message" :
                     step === 3 ? "Select Recipients" :
                     "Finish & Send"}
                  </div>
                </div>
              </button>
            ))}
          </div>
 
          <div className="p-6">
            {/* Step 1: Create Message */}
            {currentStep === 1 && (
              <div className="space-y-6">
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">Message</label>
                  <textarea
                    value={smsMessage}
                    onChange={(e) => {
                      if (e.target.value.length <= 612) {
                        setSmsMessage(e.target.value);
                      }
                    }}
                    rows={5}
                    className="w-full px-3 py-2 border border-gray-300 rounded focus:ring-2 focus:ring-[#00946b]"
                    placeholder="Enter your SMS message here"
                  />
                  <div className="mt-2 text-sm text-gray-600">
                    Length: {messageLength} / 612 characters, SMS Charge: ×{smsCount}
                    {messageLength > 612 && <span className="text-red-600 ml-2">Message is too long. 612 is max</span>}
                  </div>
                </div>
 
                <div className="flex gap-4 flex-wrap">
                  <div>
                    <p className="text-sm font-medium text-gray-700 mb-2">Insert Customer</p>
                    <div className="flex gap-2">
                      <button
                        type="button"
                        onClick={() => insertField('%customer.name%')}
                        className="px-3 py-1.5 text-sm bg-white border border-gray-300 rounded hover:bg-gray-50"
                      >
                        Name
                      </button>
                      <button
                        type="button"
                        onClick={() => insertField('%customer.cid%')}
                        className="px-3 py-1.5 text-sm bg-white border border-gray-300 rounded hover:bg-gray-50"
                      >
                        Id#
                      </button>
                    </div>
                  </div>
 
                  <div>
                    <p className="text-sm font-medium text-gray-700 mb-2">Insert Account <span className="text-xs text-gray-500">(where applicable)</span></p>
                    <div className="flex gap-2">
                      <button
                        type="button"
                        onClick={() => insertField('%customer.account.name%')}
                        className="px-3 py-1.5 text-sm bg-white border border-gray-300 rounded hover:bg-gray-50"
                      >
                        Name
                      </button>
                      <button
                        type="button"
                        onClick={() => insertField('%customer.account.balance%')}
                        className="px-3 py-1.5 text-sm bg-white border border-gray-300 rounded hover:bg-gray-50"
                      >
                        Balance
                      </button>
                    </div>
                  </div>
                </div>
 
                <div className="border border-gray-300 rounded p-4">
                  <h3 className="text-lg font-semibold mb-2">Preview</h3>
                  <div className="text-sm text-gray-700 whitespace-pre-wrap">
                    {smsMessage || <span className="text-gray-400 italic">Your message preview will appear here</span>}
                  </div>
                </div>
 
                <div className="flex justify-end">
                  <button
                    onClick={() => setCurrentStep(2)}
                    className="px-6 py-2 bg-[#00946b] text-white rounded hover:bg-[#007a59]"
                  >
                    Next: Test Message
                  </button>
                </div>
              </div>
            )}
 
            {/* Step 2: Test Message */}
            {currentStep === 2 && (
              <div className="space-y-6">
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">
                    What phone number should receive this test message?
                  </label>
                  <input
                    type="tel"
                    value={testPhone}
                    onChange={(e) => setTestPhone(e.target.value)}
                    className="w-full max-w-md px-3 py-2 border border-gray-300 rounded focus:ring-2 focus:ring-[#00946b]"
                    placeholder="Enter phone number"
                  />
                </div>
 
                <button
                  onClick={sendTestSms}
                  disabled={loading || !testPhone}
                  className="px-6 py-2 bg-[#00946b] text-white rounded hover:bg-[#007a59] disabled:opacity-50 disabled:cursor-not-allowed"
                >
                  Send Test Now
                </button>
 
                {testStatus && (
                  <div className="p-4 bg-blue-50 border border-blue-200 rounded">
                    {testStatus}
                  </div>
                )}
 
                <div className="flex justify-between">
                  <button
                    onClick={() => setCurrentStep(1)}
                    className="px-6 py-2 bg-gray-200 text-gray-700 rounded hover:bg-gray-300"
                  >
                    Back
                  </button>
                  <button
                    onClick={() => setCurrentStep(3)}
                    className="px-6 py-2 bg-[#00946b] text-white rounded hover:bg-[#007a59]"
                  >
                    Next: Select Recipients
                  </button>
                </div>
              </div>
            )}
 
            {/* Step 3: Select Recipients */}
            {currentStep === 3 && (
              <div className="space-y-6">
                <div>
                  <p className="text-sm font-medium text-gray-700 mb-3">I am sending to:</p>
                  <label className="flex items-center gap-2">
                    <input
                      type="checkbox"
                      checked={allCustomers}
                      onChange={(e) => setAllCustomers(e.target.checked)}
                      className="rounded"
                    />
                    <span>All Customers</span>
                  </label>
                </div>
 
                <div className="p-4 bg-gray-50 rounded border border-gray-200">
                  <p className="text-sm font-medium text-gray-700">
                    Probable number of recipients: <span className="text-2xl font-bold text-[#00946b]">{phoneCount}</span>
                  </p>
                </div>
 
                <div>
                  <label className="flex items-center gap-2">
                    <input
                      type="checkbox"
                      checked={removeDuplicates}
                      onChange={(e) => setRemoveDuplicates(e.target.checked)}
                      className="rounded"
                    />
                    <span className="text-sm">Remove Duplicate Numbers</span>
                  </label>
                  <p className="text-xs text-gray-500 ml-6">
                    If the same phone number appears on multiple records, send only one message per number
                  </p>
                </div>
 
                {validationStatus && (
                  <div className="p-4 bg-yellow-50 border border-yellow-200 rounded text-sm">
                    {validationStatus}
                  </div>
                )}
 
                <div className="flex justify-between">
                  <button
                    onClick={() => setCurrentStep(2)}
                    className="px-6 py-2 bg-gray-200 text-gray-700 rounded hover:bg-gray-300"
                  >
                    Back
                  </button>
                  <button
                    onClick={() => setCurrentStep(4)}
                    className="px-6 py-2 bg-[#00946b] text-white rounded hover:bg-[#007a59]"
                  >
                    Next: Finish & Send
                  </button>
                </div>
              </div>
            )}
 
            {/* Step 4: Finish and Send */}
            {currentStep === 4 && (
              <div className="space-y-6">
                <div className="p-4 bg-blue-50 border border-blue-200 rounded">
                  <p className="text-sm text-blue-900">
                    The messages will be generated and sent individually to each user. If you are sending a large number
                    of messages, your service provider may apply rate limits or impose other conditions.
                  </p>
                </div>
 
                <div>
                  <label className="flex items-start gap-3">
                    <input
                      type="checkbox"
                      checked={acknowledged}
                      onChange={(e) => setAcknowledged(e.target.checked)}
                      className="mt-1 rounded"
                    />
                    <span className="text-sm">
                      I am aware that bulk sending of text messages and/or contents is covered by law in many countries
                      and I have verified this message is permitted.
                    </span>
                  </label>
                </div>
 
                <button
                  onClick={sendBulkSms}
                  disabled={!acknowledged || loading}
                  className="w-full py-3 text-lg font-semibold bg-[#00946b] text-white rounded hover:bg-[#007a59] disabled:opacity-50 disabled:cursor-not-allowed"
                >
                  Start Sending Now
                </button>
 
                {sendStatus && (
                  <div className="p-4 bg-green-50 border border-green-200 rounded">
                    {sendStatus}
                  </div>
                )}
 
                <div className="border border-gray-300 rounded p-4">
                  <h3 className="text-lg font-semibold mb-2">Message Template:</h3>
                  <div className="text-sm text-gray-700 whitespace-pre-wrap bg-gray-50 p-3 rounded">
                    {smsMessage}
                  </div>
                </div>
 
                <div className="flex justify-between">
                  <button
                    onClick={() => setCurrentStep(3)}
                    className="px-6 py-2 bg-gray-200 text-gray-700 rounded hover:bg-gray-300"
                  >
                    Back
                  </button>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}