From 6fc8140ebf9d6a63ef93bd860795fea6fe9bce47 Mon Sep 17 00:00:00 2001
From: Anik Dhabal Babu <adhabal2002@gmail.com>
Date: Fri, 18 Oct 2024 20:10:18 +0000
Subject: [PATCH 1/2] fix: Save button is not working on the app install
 configuration step

---
 .../apps/installation/ConfigureStepCard.tsx   | 23 ++++++++-----------
 1 file changed, 9 insertions(+), 14 deletions(-)

diff --git a/apps/web/components/apps/installation/ConfigureStepCard.tsx b/apps/web/components/apps/installation/ConfigureStepCard.tsx
index fa76db0f777084..b4e8520ed807ca 100644
--- a/apps/web/components/apps/installation/ConfigureStepCard.tsx
+++ b/apps/web/components/apps/installation/ConfigureStepCard.tsx
@@ -126,7 +126,7 @@ const EventTypeGroup = ({
 }: ConfigureStepCardProps & {
   groupIndex: number;
   setUpdatedEventTypesStatus: Dispatch<SetStateAction<TUpdatedEventTypesStatus>>;
-  submitRefs: Array<React.RefObject<HTMLButtonElement>>;
+  submitRefs: React.MutableRefObject<Array<React.RefObject<HTMLButtonElement>>>;
 }) => {
   const { control } = useFormContext<TEventTypesForm>();
   const { fields, update } = useFieldArray({
@@ -174,7 +174,11 @@ const EventTypeGroup = ({
                   return res;
                 });
               }}
-              ref={submitRefs[index]}
+              ref={(el) => {
+                if (el && !submitRefs.current[index]) {
+                  submitRefs.current[index] = el;
+                }
+              }}
               {...props}
             />
           )
@@ -193,17 +197,8 @@ export const ConfigureStepCard: FC<ConfigureStepCardProps> = (props) => {
     keyName: "fieldId",
   });
   const eventTypeGroups = watch("eventTypeGroups");
-  const submitRefs = useRef<Array<Array<React.RefObject<HTMLButtonElement>>>>([]);
+  const submitRefs = useRef<Array<React.RefObject<HTMLButtonElement>>>([]);
 
-  submitRefs.current = eventTypeGroups.reduce(
-    (arr: Array<Array<React.RefObject<HTMLButtonElement>>>, field) => {
-      const res = field.eventTypes
-        .filter((eventType) => eventType.selected)
-        .map((_ref) => React.createRef<HTMLButtonElement>());
-      return [...arr, res];
-    },
-    []
-  );
   const mainForSubmitRef = useRef<HTMLButtonElement>(null);
   const [updatedEventTypesStatus, setUpdatedEventTypesStatus] = useState<TUpdatedEventTypesStatus>(
     eventTypeGroups.reduce((arr: Array<{ id: number; updated: boolean }[]>, field) => {
@@ -245,7 +240,7 @@ export const ConfigureStepCard: FC<ConfigureStepCardProps> = (props) => {
             <EventTypeGroup
               groupIndex={groupIndex}
               setUpdatedEventTypesStatus={setUpdatedEventTypesStatus}
-              submitRefs={submitRefs.current[groupIndex]}
+              submitRefs={submitRefs}
               {...props}
             />
           </div>
@@ -258,7 +253,7 @@ export const ConfigureStepCard: FC<ConfigureStepCardProps> = (props) => {
           type="button"
           data-testid="configure-step-save"
           onClick={() => {
-            submitRefs.current.map((group) => group?.map((ref) => ref.current?.click()));
+            submitRefs.current.forEach((ref) => ref?.click());
             setSubmit(true);
           }}
           loading={loading}>

From ba9e2092a95af2c4185a4ab232692fcb808c9d50 Mon Sep 17 00:00:00 2001
From: Anik Dhabal Babu <adhabal2002@gmail.com>
Date: Fri, 18 Oct 2024 20:29:49 +0000
Subject: [PATCH 2/2] update

---
 .../components/apps/installation/ConfigureStepCard.tsx    | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/apps/web/components/apps/installation/ConfigureStepCard.tsx b/apps/web/components/apps/installation/ConfigureStepCard.tsx
index b4e8520ed807ca..7b413b831a5821 100644
--- a/apps/web/components/apps/installation/ConfigureStepCard.tsx
+++ b/apps/web/components/apps/installation/ConfigureStepCard.tsx
@@ -126,7 +126,7 @@ const EventTypeGroup = ({
 }: ConfigureStepCardProps & {
   groupIndex: number;
   setUpdatedEventTypesStatus: Dispatch<SetStateAction<TUpdatedEventTypesStatus>>;
-  submitRefs: React.MutableRefObject<Array<React.RefObject<HTMLButtonElement>>>;
+  submitRefs: React.MutableRefObject<(HTMLButtonElement | null)[]>;
 }) => {
   const { control } = useFormContext<TEventTypesForm>();
   const { fields, update } = useFieldArray({
@@ -175,9 +175,7 @@ const EventTypeGroup = ({
                 });
               }}
               ref={(el) => {
-                if (el && !submitRefs.current[index]) {
-                  submitRefs.current[index] = el;
-                }
+                submitRefs.current[index] = el;
               }}
               {...props}
             />
@@ -197,7 +195,7 @@ export const ConfigureStepCard: FC<ConfigureStepCardProps> = (props) => {
     keyName: "fieldId",
   });
   const eventTypeGroups = watch("eventTypeGroups");
-  const submitRefs = useRef<Array<React.RefObject<HTMLButtonElement>>>([]);
+  const submitRefs = useRef<(HTMLButtonElement | null)[]>([]);
 
   const mainForSubmitRef = useRef<HTMLButtonElement>(null);
   const [updatedEventTypesStatus, setUpdatedEventTypesStatus] = useState<TUpdatedEventTypesStatus>(