packaging fix v3

Author: sundi133

app/css/globals.css

@@ -206,3 +206,27 @@
   background-color: #dcdcdc; /* Disabled state background */
   cursor: not-allowed; /* Change cursor to indicate disabled state */
 }
+
+@keyframes blink {
+  0%,
+  100% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+
+.dot {
+  animation: blink 1.4s infinite both;
+}
+
+.dot:nth-child(1) {
+  animation-delay: 0s;
+}
+.dot:nth-child(2) {
+  animation-delay: 0.2s;
+}
+.dot:nth-child(3) {
+  animation-delay: 0.4s;
+}

components/campaign-form.tsx

@@ -74,7 +74,6 @@ function CampaignForm() {
   }, [searchTerm, contacts]);
 
   const handleSubmit = async (e: any) => {
-    console.log('selectedContacts', selectedContacts);
     e.preventDefault();
     setIsLoading(true);
 
@@ -238,7 +237,6 @@ function CampaignForm() {
         )}
 
         {errorMessage && <div className="text-red-500">{errorMessage}</div>}
-
         {successMessage ? (
           <div className="w-full max-w-8xl mx-auto">
             {campaignId >= 0 && <EmailEventsDisplay campaignId={campaignId} />}

components/campaign-list.tsx

@@ -115,7 +115,10 @@ function ContactList({ searchTerm }: { searchTerm: string }) {
                 Created At
               </th>
               <th className="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">
-                Template ID
+                Template
+              </th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">
+                View
               </th>
             </tr>
           </thead>
@@ -136,7 +139,17 @@ function ContactList({ searchTerm }: { searchTerm: string }) {
                     {new Date(campaign.createdAt).toLocaleTimeString()}
                   </td>
                   <td className="px-6 py-4 whitespace-no-wrap text-sm leading-5 text-gray-700">
-                    {campaign.templateId}
+                    {campaign.template.name}
+                  </td>
+                  <td className="px-6 py-4 whitespace-no-wrap text-sm leading-5 text-gray-700">
+                    <a
+                      href={`/campaign/${campaign.id}`}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="text-blue-500 hover:text-blue-800"
+                    >
+                      link
+                    </a>
                   </td>
                 </tr>
               </React.Fragment>

components/contact-list.tsx

@@ -159,10 +159,32 @@ function ContactList({ searchTerm }: { searchTerm: string }) {
                     {contact.jobTitle ? contact.jobTitle : 'N/A'}
                   </td>
                   <td className="px-6 py-4 whitespace-no-wrap text-sm leading-5 text-gray-700">
-                    {contact.companyWebsite ? contact.companyWebsite : 'N/A'}
+                    {contact.companyWebsite ? (
+                      <a
+                        href={contact.companyWebsite}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="text-blue-500 hover:text-blue-800"
+                      >
+                        {contact.companyWebsite}
+                      </a>
+                    ) : (
+                      'N/A'
+                    )}
                   </td>
                   <td className="px-6 py-4 whitespace-no-wrap text-sm leading-5 text-gray-700">
-                    {contact.linkedIn ? contact.linkedIn : 'N/A'}
+                    {contact.linkedIn ? (
+                      <a
+                        href={contact.linkedIn}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="text-blue-500 hover:text-blue-800"
+                      >
+                        link
+                      </a>
+                    ) : (
+                      'N/A'
+                    )}
                   </td>
                 </tr>
               </React.Fragment>

components/dot.js

@@ -0,0 +1,23 @@
+import React, { useState, useEffect } from 'react';
+
+const Dot = ({ delay }) => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      setIsVisible((prev) => !prev);
+    }, delay);
+
+    return () => clearInterval(intervalId);
+  }, [delay]);
+
+  return (
+    <span
+      className={`h-3 w-3 bg-blue-500 rounded-full mr-1 transition-opacity duration-500 ${
+        isVisible ? 'opacity-100' : 'opacity-0'
+      }`}
+    ></span>
+  );
+};
+
+export default Dot;

components/email-event-display.tsx

@@ -1,4 +1,6 @@
 import React, { useState, useEffect } from 'react';
+import '../app/css/globals.css';
+import Dot from './dot';
 
 interface Contact {
   email: string;
@@ -22,6 +24,10 @@ interface EmailEventsDisplayProps {
   campaignId: number;
 }
 
+interface CopiedStatuses {
+  [key: number]: boolean;
+}
+
 const EmailEventCard: React.FC<EmailEventCardProps> = ({
   event,
   onSend,
@@ -51,7 +57,7 @@ const EmailEventCard: React.FC<EmailEventCardProps> = ({
       </div>
       <div className="text-right">
         <button
-          onClick={handleCopy}
+          onClick={() => navigator.clipboard.writeText(event.eventContent)}
           className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-4 rounded mr-2"
         >
           Copy
@@ -75,40 +81,39 @@ const EmailEventsDisplay: React.FC<EmailEventsDisplayProps> = ({
   const [campaign, setCampaign] = useState<any>({});
   const [stopFetch, setStopFetch] = useState(false);
   useEffect(() => {
-    
     const fetchCampaign = async () => {
-        setIsLoading(true);
-        try {
-          const response = await fetch(
-            `/api/campaigns?campaignId=${campaignId}`
-          );
-          if (!response.ok) throw new Error('Failed to fetch email events.');
-          const data = await response.json();
-          if(data.length > 0) {
-            setCampaign(data[0]);
-          }
-        } catch (error) {
-          console.error('Error fetching email events:', error);
-        } finally {
-          setIsLoading(false);
+      setIsLoading(true);
+      try {
+        const response = await fetch(`/api/campaigns?campaignId=${campaignId}`);
+        if (!response.ok) throw new Error('Failed to fetch email events.');
+        const data = await response.json();
+        if (data.length > 0) {
+          setCampaign(data[0]);
         }
-      };
+      } catch (error) {
+        console.error('Error fetching email events:', error);
+      } finally {
+        setIsLoading(false);
+      }
+    };
 
     const fetchEmailEvents = async () => {
+      if (stopFetch) {
+        return;
+      }
       setIsLoading(true);
       try {
-        if(stopFetch) {
-          return;
-        }
         const response = await fetch(
           `/api/email-events?campaignId=${campaignId}`
         );
         if (!response.ok) throw new Error('Failed to fetch email events.');
         const data = await response.json();
         setEmailEvents(data);
-        if(campaign.numUsers === emailEvents.length) {
+        if (campaign.numUsers === emailEvents.length) {
           setStopFetch(true);
         }
+        console.log('emailEvents.length:', emailEvents.length);
+        console.log('campaign.numUsers:', campaign.numUsers);
       } catch (error) {
         console.error('Error fetching email events:', error);
       } finally {
@@ -125,11 +130,38 @@ const EmailEventsDisplay: React.FC<EmailEventsDisplayProps> = ({
 
   const handleSendEmail = (event: EmailEvent) => {
     console.log('Sending email:', event);
-    // Implement sending email logic here
   };
 
-  const handleCopyEmailContent = (event: EmailEvent) => {
-    console.log('Email content copied:', event);
+  const [copiedStatuses, setCopiedStatuses] = useState<CopiedStatuses>({});
+
+  //   const handleCopy = (event: EmailEvent) => {
+  //     navigator.clipboard.writeText(event.eventContent)
+  //       .then(() => {
+  //         setCopied(true); // Set copied to true when the text is successfully copied
+  //         setTimeout(() => setCopied(false), 2000); // Reset copied status after 2 seconds
+  //       })
+  //       .catch(error => console.error('Copy failed', error));
+  //   };
+
+  const handleCopy = (eventId: number, event: EmailEvent) => {
+    navigator.clipboard
+      .writeText(event.eventContent)
+      .then(() => {
+        // Set the copied status for the specific event ID to true
+        setCopiedStatuses((prevStatuses) => ({
+          ...prevStatuses,
+          [eventId]: true
+        }));
+
+        // Optional: Reset copied status for this event ID after 2 seconds
+        setTimeout(() => {
+          setCopiedStatuses((prevStatuses) => ({
+            ...prevStatuses,
+            [eventId]: false
+          }));
+        }, 2000);
+      })
+      .catch((error) => console.error('Copy failed', error));
   };
 
   if (isLoading)
@@ -141,29 +173,56 @@ const EmailEventsDisplay: React.FC<EmailEventsDisplayProps> = ({
   if (!emailEvents.length) {
     return (
       <div className="text-xl flex justify-center items-center font-semibold text-blue-500 mb-2 mt-2">
-        <div className="animate-spin rounded-full h-12 w-12 border-t-4 border-b-4 border-blue-500"></div>
-        Generating Emails...
+        <div className="text-xl flex justify-center items-center font-semibold text-blue-500 mb-2 mt-2">
+          Generating Emails
+          <div className="flex ml-2">
+            <Dot delay={300} />
+            <Dot delay={600} />
+            <Dot delay={900} />
+          </div>
+        </div>
       </div>
     );
   }
   return (
     <div className="max-w-4xl mx-auto mt-2">
-      <div className="text-xl flex justify-center items-center font-semibold text-blue-500 mb-2">
-        <div className="animate-spin rounded-full h-12 w-12 border-t-4 border-b-4 border-blue-500"></div>
-        Generated Emails
-        <div className="mt-2 grid grid-cols-4 text-sm">
-          <div className="flex justify-start items-justify-start">
-            <div className="loader"></div>
+      {emailEvents.map((event) => (
+        <div className="bg-white p-4 shadow rounded-lg mb-4">
+          <div className="mb-2 text-gray-900">
+            <strong>To:</strong> {event.contact.email}
+          </div>
+          <div className="mb-2 text-gray-600">
+            <strong>Subject:</strong> {event.eventType}
+          </div>
+          <div className="mb-4 text-gray-700">
+            <strong>Message:</strong>
+            <div
+              dangerouslySetInnerHTML={{
+                __html: event.eventContent.replace(/\n\n/g, '<br /><br />')
+              }}
+            ></div>
+          </div>
+          <div className="text-right">
+            <button
+              type="button"
+              onClick={() => handleCopy(event.id, event)}
+              className={`bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-4 rounded mr-2 ${
+                copiedStatuses[event.id]
+                  ? 'bg-green-500 hover:bg-green-600'
+                  : ''
+              }`}
+            >
+              {copiedStatuses[event.id] ? 'Copied' : 'Copy'}
+            </button>
+            <button
+              type="button"
+              onClick={() => handleSendEmail(event)}
+              className="bg-green-500 hover:bg-green-700 text-white font-bold py-1 px-4 rounded"
+            >
+              Send
+            </button>
           </div>
         </div>
-      </div>
-      {emailEvents.map((event) => (
-        <EmailEventCard
-          key={event.id}
-          event={event}
-          onSend={handleSendEmail}
-          onCopy={handleCopyEmailContent}
-        />
       ))}
     </div>
   );

components/template-form.tsx

@@ -99,6 +99,8 @@ function TemplateForm() {
   const [selectedTemplate, setSelectedTemplate] = useState(
     'The Direct Approach'
   );
+  const [minimumWords, setMinimumWords] = useState(100);
+  const [maximumWords, setMaximumWords] = useState(200);
 
   // Update email content when the selected template changes
   const handleTemplateChange = (e: any) => {
@@ -159,7 +161,9 @@ function TemplateForm() {
           name,
           campaignType,
           content: emailContent,
-          tone
+          tone,
+          minWords: minimumWords,
+          maxWords: maximumWords
         })
       });
       if (!response.ok) throw new Error('Network response was not ok.');
@@ -244,6 +248,32 @@ function TemplateForm() {
               <option value="informative">Informative</option>
             </select>
           </div>
+
+          <div className="w-full px-2 mb-4">
+            <label className="block text-gray-700 font-bold mb-1 mt-1">
+              Minimum Words
+            </label>
+            <input
+              type="number"
+              value={minimumWords}
+              onChange={(e) => setMinimumWords(parseInt(e.target.value))}
+              className="w-full border rounded-lg p-3 text-gray-700"
+              required
+            />
+          </div>
+
+          <div className="w-full px-2 mb-4">
+            <label className="block text-gray-700 font-bold mb-1 mt-1">
+              Maximum Words
+            </label>
+            <input
+              type="number"
+              value={maximumWords}
+              onChange={(e) => setMaximumWords(parseInt(e.target.value))}
+              className="w-full border rounded-lg p-3 text-gray-700"
+              required
+            />
+          </div>
         </div>
 
         {campaignType === 'email' && (

migrations/20240204051120_add_new_fields/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Template" ADD COLUMN     "minWords" INTEGER;