From 9e91e572ba3d52f539c7abd86d1ffbae8088b505 Mon Sep 17 00:00:00 2001
From: Shubham Palriwala <spalriwalau@gmail.com>
Date: Mon, 2 Oct 2023 13:07:33 +0530
Subject: [PATCH] fix: unable to add a new action while editing a survey (#899)

---
 .../[surveyId]/edit/WhenToSendCard.tsx        | 86 ++++++++++---------
 1 file changed, 47 insertions(+), 39 deletions(-)

diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/WhenToSendCard.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/WhenToSendCard.tsx
index b9e9be88ac..6db7a9c3f7 100644
--- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/WhenToSendCard.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/WhenToSendCard.tsx
@@ -104,7 +104,14 @@ export default function WhenToSendCard({
 
   useEffect(() => {
     if (activeIndex !== null) {
-      setTriggerEvent(activeIndex, actionClassArray[actionClassArray.length - 1].id);
+      const newActionClassId = actionClassArray[actionClassArray.length - 1].id;
+      const currentActionClassId = localSurvey.triggers[activeIndex]?.id;
+
+      if (newActionClassId !== currentActionClassId) {
+        setTriggerEvent(activeIndex, newActionClassId);
+      }
+
+      setActiveIndex(null);
     }
   }, [actionClassArray, activeIndex, setTriggerEvent]);
 
@@ -173,45 +180,46 @@ export default function WhenToSendCard({
         </Collapsible.CollapsibleTrigger>
         <Collapsible.CollapsibleContent className="">
           <hr className="py-1 text-slate-600" />
-          {localSurvey.triggers?.map((triggerEventClass, idx) => (
-            <div className="mt-2" key={idx}>
-              <div className="inline-flex items-center">
-                <p className="mr-2 w-14 text-right text-sm">{idx === 0 ? "When" : "or"}</p>
-                <Select
-                  value={triggerEventClass.id}
-                  onValueChange={(actionClassId) => setTriggerEvent(idx, actionClassId)}>
-                  <SelectTrigger className="w-[240px]">
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <button
-                      className="flex w-full items-center space-x-2 rounded-md p-1 text-sm font-semibold text-slate-800 hover:bg-slate-100 hover:text-slate-500"
-                      value="none"
-                      onClick={() => {
-                        setAddEventModalOpen(true);
-                        setActiveIndex(idx);
-                      }}>
-                      <PlusIcon className="mr-1 h-5 w-5" />
-                      Add Action
-                    </button>
-                    <SelectSeparator />
-                    {actionClassArray.map((actionClass) => (
-                      <SelectItem
-                        value={actionClass.id}
-                        key={actionClass.id}
-                        title={actionClass.description ? actionClass.description : ""}>
-                        {actionClass.name}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-                <p className="mx-2 text-sm">action is performed</p>
-                <button onClick={() => removeTriggerEvent(idx)}>
-                  <TrashIcon className="ml-3 h-4 w-4 text-slate-400" />
-                </button>
+          {!isAddEventModalOpen &&
+            localSurvey.triggers?.map((triggerEventClass, idx) => (
+              <div className="mt-2" key={idx}>
+                <div className="inline-flex items-center">
+                  <p className="mr-2 w-14 text-right text-sm">{idx === 0 ? "When" : "or"}</p>
+                  <Select
+                    value={triggerEventClass.id}
+                    onValueChange={(actionClassId) => setTriggerEvent(idx, actionClassId)}>
+                    <SelectTrigger className="w-[240px]">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <button
+                        className="flex w-full items-center space-x-2 rounded-md p-1 text-sm font-semibold text-slate-800 hover:bg-slate-100 hover:text-slate-500"
+                        value="none"
+                        onClick={() => {
+                          setAddEventModalOpen(true);
+                          setActiveIndex(idx);
+                        }}>
+                        <PlusIcon className="mr-1 h-5 w-5" />
+                        Add Action
+                      </button>
+                      <SelectSeparator />
+                      {actionClassArray.map((actionClass) => (
+                        <SelectItem
+                          value={actionClass.id}
+                          key={actionClass.id}
+                          title={actionClass.description ? actionClass.description : ""}>
+                          {actionClass.name}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                  <p className="mx-2 text-sm">action is performed</p>
+                  <button onClick={() => removeTriggerEvent(idx)}>
+                    <TrashIcon className="ml-3 h-4 w-4 text-slate-400" />
+                  </button>
+                </div>
               </div>
-            </div>
-          ))}
+            ))}
           <div className="px-6 py-4">
             <Button
               variant="secondary"