From 4bb45bfde1fda3ce44b3afd3e311c092ee8c28f5 Mon Sep 17 00:00:00 2001
From: Harry Chung <144231383+chungchihhan@users.noreply.github.com>
Date: Sat, 10 Aug 2024 02:50:39 +0800
Subject: [PATCH] v0.6.1

# Release Notes - TPET v0.6.1

## New Features

- User can hover to see the tips of each input

## Fix

- User can unselect the files
---
 src/app/ui/attach-dropdown.tsx | 19 ++++++++-
 src/app/ui/help-tip.tsx        | 26 ++++++++++++
 src/app/ui/select-dropdown.tsx | 25 ++++++++++--
 src/app/ui/send-email-form.tsx | 72 ++++++++++++++++++++++++++--------
 4 files changed, 121 insertions(+), 21 deletions(-)
 create mode 100644 src/app/ui/help-tip.tsx

diff --git a/src/app/ui/attach-dropdown.tsx b/src/app/ui/attach-dropdown.tsx
index e4bb239..8087f31 100644
--- a/src/app/ui/attach-dropdown.tsx
+++ b/src/app/ui/attach-dropdown.tsx
@@ -105,7 +105,13 @@ export default function AttachDropdown({ onSelect }: AttachDropdownProps) {
     setIsOpen(!isOpen);
   };
 
-  const handleSelect = (file: fileDataType) => {
+  const handleSelect = (file: fileDataType | null) => {
+    if (!file) {
+      setSelectedFiles([]);
+      onSelect([]);
+      setIsOpen(false);
+      return;
+    }
     const alreadySelected = selectedFiles.some(
       (selectedFile) => selectedFile.file_id === file.file_id
     );
@@ -215,6 +221,17 @@ export default function AttachDropdown({ onSelect }: AttachDropdownProps) {
                   </tr>
                 </thead>
                 <tbody>
+                  <tr
+                    className="hover:bg-gray-200 cursor-pointer active:bg-gray-300"
+                    onClick={() => handleSelect(null)}
+                  >
+                    <td
+                      className="py-2 px-4 border-b border-gray-200 text-start"
+                      colSpan={3}
+                    >
+                      No Selection
+                    </td>
+                  </tr>
                   {filteredOptions.map((option) => (
                     <tr
                       key={option.file_id}
diff --git a/src/app/ui/help-tip.tsx b/src/app/ui/help-tip.tsx
new file mode 100644
index 0000000..8a0da27
--- /dev/null
+++ b/src/app/ui/help-tip.tsx
@@ -0,0 +1,26 @@
+"use client";
+import { ReactNode, useState } from "react";
+
+interface TooltipProps {
+  message: string;
+  children: ReactNode;
+}
+
+export default function Helptip({ message, children }: TooltipProps) {
+  const [isVisible, setIsVisible] = useState(false);
+
+  return (
+    <div
+      className="relative flex items-center hover:cursor-help"
+      onMouseEnter={() => setIsVisible(true)}
+      onMouseLeave={() => setIsVisible(false)}
+    >
+      {children}
+      {isVisible && (
+        <div className="absolute bottom-full transform bg-slate-200 text-slate-500 text-sm rounded-md shadow-xl p-2 whitespace-normal break-words z-50">
+          <p className="text-wrap min-w-64">{message}</p>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/app/ui/select-dropdown.tsx b/src/app/ui/select-dropdown.tsx
index a1c3a8d..293b777 100644
--- a/src/app/ui/select-dropdown.tsx
+++ b/src/app/ui/select-dropdown.tsx
@@ -120,12 +120,18 @@ export default function SelectDropdown({
   };
 
   const handleSelect = (
-    file_id: string,
-    file_url: string,
-    file_name: string
+    file_id: string | null,
+    file_url: string | null,
+    file_name: string | null
   ) => {
+    if (!file_id || !file_url || !file_name) {
+      onSelect("", "");
+      setSelectedFileName(`Select a ${fileExtension} file`);
+      setIsOpen(false);
+      return;
+    }
     onSelect(file_id, file_url);
-    console.log("Selected file:", file_id);
+    // console.log("Selected file:", file_id);
     setSelectedFileName(file_name);
     setIsOpen(false);
   };
@@ -217,6 +223,17 @@ export default function SelectDropdown({
                   </tr>
                 </thead>
                 <tbody>
+                  <tr
+                    className="hover:bg-gray-200 cursor-pointer active:bg-gray-300"
+                    onClick={() => handleSelect(null, null, null)}
+                  >
+                    <td
+                      className="py-2 px-4 border-b border-gray-200 text-start"
+                      colSpan={3}
+                    >
+                      No Selection
+                    </td>
+                  </tr>
                   {filteredOptions.map((option) => (
                     <tr
                       key={option.file_id}
diff --git a/src/app/ui/send-email-form.tsx b/src/app/ui/send-email-form.tsx
index 7b57073..c2a6d70 100644
--- a/src/app/ui/send-email-form.tsx
+++ b/src/app/ui/send-email-form.tsx
@@ -1,6 +1,7 @@
 "use client";
 import React, { useRef, useState, FormEvent } from "react";
 import { submitForm } from "@/lib/actions";
+import HelpTip from "@/app/ui/help-tip";
 import SelectDropdown from "@/app/ui/select-dropdown";
 import AttachDropdown from "./attach-dropdown";
 import FileUpload from "@/app/ui/file-upload";
@@ -8,7 +9,7 @@ import IframePreview from "@/app/ui/iframe-preview";
 import EmailInput from "@/app/ui/email-input";
 import { useEffect } from "react";
 import { useRouter } from "next/navigation";
-import { ChevronDown } from "lucide-react";
+import { Info } from "lucide-react";
 
 interface SubmitResponse {
   status: string;
@@ -22,10 +23,10 @@ interface SubmitResponse {
 export default function SendEmailForm() {
   const ref = useRef<HTMLFormElement>(null);
   const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
-  const [selectedHtmlFile, setSelectedHtmlFile] = useState("");
-  const [selectedXlsxFile, setSelectedXlsxFile] = useState("");
-  const [htmlPreviewLink, setHtmlPreviewLink] = useState<string>("");
-  const [xlsxPreviewLink, setXlsxPreviewLink] = useState<string>("");
+  const [selectedHtmlFile, setSelectedHtmlFile] = useState<string | null>("");
+  const [selectedXlsxFile, setSelectedXlsxFile] = useState<string | null>("");
+  const [htmlPreviewLink, setHtmlPreviewLink] = useState<string | null>("");
+  const [xlsxPreviewLink, setXlsxPreviewLink] = useState<string | null>("");
   const [errors, setErrors] = useState<{ [key: string]: string }>({});
   const [showHtmlUpload, setShowHtmlUpload] = useState<boolean>(false);
   const [showXlsxUpload, setShowXlsxUpload] = useState<boolean>(false);
@@ -105,7 +106,10 @@ export default function SendEmailForm() {
     setIsSubmitting(false);
   };
 
-  const handleHtmlSelect = (file_id: string, file_url: string) => {
+  const handleHtmlSelect = (
+    file_id: string | null,
+    file_url: string | null
+  ) => {
     setSelectedHtmlFile(file_id);
     setHtmlPreviewLink(file_url);
   };
@@ -188,8 +192,11 @@ export default function SendEmailForm() {
         <p className="text-2xl font-bold py-2">Required</p>
         <div className="rounded-md bg-neutral-100 p-4">
           <div className="m-3">
-            <label className="mb-2 block text-sm font-medium">
+            <label className="mb-2 flex text-sm font-medium gap-2">
               Subject of the email:
+              <HelpTip message="Enter the email subject that recipients will see.">
+                <Info size={16} color="gray" />
+              </HelpTip>
             </label>
             <input
               id="subject"
@@ -206,8 +213,11 @@ export default function SendEmailForm() {
             )}
           </div>
           <div className="m-3">
-            <label className="mb-2 block text-sm font-medium">
+            <label className="mb-2 flex text-sm font-medium gap-2">
               Name of the sender:
+              <HelpTip message="Enter the sender's name as it will appear to recipients.">
+                <Info size={16} color="gray" />
+              </HelpTip>
             </label>
             <input
               id="display_name"
@@ -224,8 +234,11 @@ export default function SendEmailForm() {
             )}
           </div>
           <div className="m-3">
-            <label className="mb-2 block text-sm font-medium">
+            <label className="mb-2 flex text-sm font-medium gap-2">
               Select your template file:
+              <HelpTip message="Choose or upload a .html file that contains the email content.">
+                <Info size={16} color="gray" />
+              </HelpTip>
             </label>
             <div className="flex items-center gap-2">
               <SelectDropdown
@@ -312,8 +325,11 @@ export default function SendEmailForm() {
             )}
           </div>
           <div className="m-3">
-            <label className="mb-2 block text-sm font-medium">
+            <label className="mb-2 flex text-sm font-medium gap-2">
               Select your sheet file:
+              <HelpTip message="Choose or upload a .xlsx file containing the list of recipients.">
+                <Info size={16} color="gray" />
+              </HelpTip>
             </label>
             <div className="flex items-center gap-2">
               <SelectDropdown
@@ -409,8 +425,11 @@ export default function SendEmailForm() {
         <div className="rounded-md bg-neutral-100 p-4">
           {/* Sender Local Part */}
           <div className="m-3">
-            <label className="mb-2 block text-sm font-medium">
+            <label className="mb-2 flex text-sm font-medium gap-2">
               Sender Local Part:
+              <HelpTip message="Enter the prefix for your email address (e.g., if you enter john.doe, the email will be john.doe@aws-educate.tw). This setting will affect the forwarding rules.">
+                <Info size={16} color="gray" />
+              </HelpTip>
             </label>
             <div className="flex items-center bg-neutral-300 rounded-md">
               <input
@@ -432,7 +451,12 @@ export default function SendEmailForm() {
           </div>
           {/* Reply To */}
           <div className="m-3">
-            <label className="mb-2 block text-sm font-medium">Reply To:</label>
+            <label className="mb-2 flex text-sm font-medium gap-2">
+              Reply To:
+              <HelpTip message="The email address where replies from recipients will be sent. You can set this to match the Sender Local Part or customize it.">
+                <Info size={16} color="gray" />
+              </HelpTip>
+            </label>
             <EmailInput
               allowMultiple={false}
               onEmailsChange={handleReplyToEmailChange}
@@ -440,7 +464,12 @@ export default function SendEmailForm() {
           </div>
           {/* BCC */}
           <div className="m-3">
-            <label className="mb-2 block text-sm font-medium">BCC:</label>
+            <label className="mb-2 flex text-sm font-medium gap-2">
+              BCC:
+              <HelpTip message="Add email addresses to send blind carbon copies.">
+                <Info size={16} color="gray" />
+              </HelpTip>
+            </label>
             <EmailInput
               allowMultiple={true}
               onEmailsChange={handleBccEmailsChange}
@@ -448,7 +477,12 @@ export default function SendEmailForm() {
           </div>
           {/* CC */}
           <div className="m-3">
-            <label className="mb-2 block text-sm font-medium">CC:</label>
+            <label className="mb-2 flex text-sm font-medium gap-2">
+              CC:
+              <HelpTip message="Add email addresses to send carbon copies. Recipients will see these addresses.">
+                <Info size={16} color="gray" />
+              </HelpTip>
+            </label>
             <EmailInput
               allowMultiple={true}
               onEmailsChange={handleCcEmailsChange}
@@ -456,8 +490,11 @@ export default function SendEmailForm() {
           </div>
           {/* Attach files */}
           <div className="m-3">
-            <label className="mb-2 block text-sm font-medium">
+            <label className="mb-2 flex text-sm font-medium gap-2">
               Attach files:
+              <HelpTip message="Attach any files you want to include with the email. Note: It is recommended that the total size of attachments does not exceed 5MB.">
+                <Info size={16} color="gray" />
+              </HelpTip>
             </label>
             <div className="flex items-center gap-2">
               <AttachDropdown onSelect={handleAttachSelect} />
@@ -495,8 +532,11 @@ export default function SendEmailForm() {
           </div>
           {/* Generate certificate */}
           <div className="my-5 mx-3">
-            <label className="mb-2 block text-sm font-medium">
+            <label className="mb-2 flex text-sm font-medium gap-2">
               Provide a certification of participation?
+              <HelpTip message="Select Yes or No if you want to provide a certification. Note: If you select Yes, the Excel file must include two columns: Name and Certificate Text.">
+                <Info size={16} color="gray" />
+              </HelpTip>
             </label>
             <div className="flex">
               <div className="flex items-center me-4">