@integry/sdk 4.6.40 → 4.6.41

package/src/components/form/FunctionField/index.ts

@@ -8,7 +8,6 @@ import { Hint } from '@/components/Tooltip';
 import styles from './styles.module.scss';
 
 // Types for our component
-
 type Authorization = {
   id: number;
   display_name: string;
@@ -22,11 +21,13 @@ type FunctionFieldProps = {
   description?: string;
   field: Record<string, any>;
   apiHandler?: any;
+  isArray?: boolean; // New prop for array support
 };
 
 const FunctionField = (props: FunctionFieldProps) => {
-  const { value, label, description, field } = props;
+  const { value, label, description, field, isArray = false } = props;
   const [isOpen, setIsOpen] = useState(false);
+  const [editingIndex, setEditingIndex] = useState<number | null>(null);
   const [selectedFunction, setSelectedFunction] = useState<string>('');
   const [activeTab, setActiveTab] = useState('authorization');
   const [functionDetails, setFunctionDetails] = useState<any>(null);
@@ -38,27 +39,35 @@ const FunctionField = (props: FunctionFieldProps) => {
   );
   const [connectedAccounts, setConnectedAccounts] = useState<any>([]);
   const [visibleFields, setVisibleFields] = useState<any>([]);
-  const [functionValue, setFunctionValue] = useState<any>(value);
+
+  // Modified to support array of values
+  const [functionValues, setFunctionValues] = useState<any[]>(() => {
+    if (isArray && Array.isArray(value)) {
+      return value;
+    }
+    if (value) {
+      return [value];
+    }
+    return [];
+  });
+
   const [formHasInvalidFields, setFormHasInvalidFields] = useState<boolean>(
     false,
   );
-  const [userFilledData, setUserFilledData] = useState<any>(
-    value?.default_arguments || {},
-  );
+  const [userFilledData, setUserFilledData] = useState<any>({});
 
   const modalRef = useRef<HTMLDivElement | null>(null);
   const FUNCTIONS_LIST_URL = `https://api.integry.io/functions/list/`;
 
-  // Find the selected function from the saved value
-  useEffect(() => {
-    // if (value?.functionId) {
-    //   const func = FUNCTION_OPTIONS.find((f) => f.id === value.functionId);
-    //   if (func) {
-    //     setSelectedFunction(func);
-    //     setConfigValues(value.config || {});
-    //   }
-    // }
-  }, [value]);
+  // Reset state when opening modal for a new action
+  const resetModalState = () => {
+    setSelectedFunction('');
+    setActiveTab('authorization');
+    setFunctionDetails(null);
+    setConnectedAccountId(null);
+    setUserFilledData({});
+    setFormHasInvalidFields(false);
+  };
 
   // Handle clicking outside the modal to close it
   useEffect(() => {
@@ -80,14 +89,13 @@ const FunctionField = (props: FunctionFieldProps) => {
     };
   }, [isOpen]);
 
+  // Open modal for adding a new action
   const handleOpenModal = () => {
+    resetModalState();
+    setEditingIndex(null);
     setIsOpen(true);
   };
 
-  const handleCloseModal = () => {
-    setIsOpen(false);
-  };
-
   const getVisibleFields = (properties: any[]) => {
     const response: any[] = [];
 
@@ -116,6 +124,38 @@ const FunctionField = (props: FunctionFieldProps) => {
     return response;
   };
 
+  // Open modal for editing an existing action
+  const handleEditAction = (index: number) => {
+    const actionToEdit = functionValues[index];
+    setEditingIndex(index);
+    setSelectedFunction(actionToEdit?.json_schema?.function.name || '');
+    setUserFilledData(actionToEdit?.default_arguments || {});
+
+    // Load function details for the selected function
+    setLoadingFunctionDetails(true);
+    props.apiHandler
+      .getFunctionDetails(actionToEdit?.json_schema?.function.name, {})
+      .then((response: any) => {
+        setFunctionDetails(response);
+        setLoadingFunctionDetails(false);
+        setConnectedAccounts(response?.meta?.app?.connected_accounts || []);
+        setVisibleFields(
+          getVisibleFields(response?.parameters?.properties || []),
+        );
+        setFormHasInvalidFields(
+          getInvalidFields(response?.parameters?.properties || []).length > 0,
+        );
+        setConnectedAccountId(actionToEdit?.meta?.connected_account_id || null);
+        setActiveTab('authorization');
+      });
+
+    setIsOpen(true);
+  };
+
+  const handleCloseModal = () => {
+    setIsOpen(false);
+  };
+
   const handleFunctionSelect = (val: any) => {
     setSelectedFunction(val);
     setActiveTab('authorization');
@@ -136,11 +176,6 @@ const FunctionField = (props: FunctionFieldProps) => {
         setConnectedAccountId(null);
       }
     });
-
-    // const functionId = (e.target as HTMLSelectElement).value;
-    // const func = FUNCTION_OPTIONS.find((f) => f.id === functionId);
-    // setSelectedFunction(func || null);
-    // setConfigValues({});
   };
 
   const removeMeta = (obj: any): any => {
@@ -159,6 +194,7 @@ const FunctionField = (props: FunctionFieldProps) => {
     return obj;
   };
 
+  // Modified to handle array of values
   const handleSave = () => {
     if (selectedFunction && functionDetails) {
       const schema = {
@@ -179,19 +215,40 @@ const FunctionField = (props: FunctionFieldProps) => {
         default_arguments: userFilledData,
         parameters_visible_to_user: {},
       };
-      setFunctionValue(schema);
+
+      // Update or add the function value
+      let updatedValues;
+      if (editingIndex !== null) {
+        // Update existing action
+        updatedValues = [...functionValues];
+        updatedValues[editingIndex] = schema;
+      } else {
+        // Add new action
+        updatedValues = [...functionValues, schema];
+      }
+
+      setFunctionValues(updatedValues);
+
+      // Call onChange with the updated values
       if (props.onChange) {
-        props.onChange(schema);
+        props.onChange(isArray ? updatedValues : updatedValues[0]);
       }
-      // onChange({
-      //   functionId: selectedFunction.id,
-      //   functionName: selectedFunction.name,
-      //   config: configValues,
-      // });
+
       setIsOpen(false);
     }
   };
 
+  // Delete a specific action from the array
+  const handleDeleteAction = (index: number) => {
+    const updatedValues = functionValues.filter((_, i) => i !== index);
+    setFunctionValues(updatedValues);
+
+    // Call onChange with the updated values
+    if (props.onChange) {
+      props.onChange(isArray ? updatedValues : updatedValues[0] || null);
+    }
+  };
+
   const handleAuthCreated = (auth: Authorization) => {
     setActiveTab('input');
     const existingAuth = connectedAccounts.find(
@@ -210,34 +267,166 @@ const FunctionField = (props: FunctionFieldProps) => {
     setConnectedAccountId(null);
   };
 
-  const handleFunctionDeleted = () => {
-    setFunctionValue(null);
-    setFunctionDetails(null);
-    setSelectedFunction('');
-    setConnectedAccountId(null);
-  };
-
   const handleCustomaSave = (customSaveResponse: any) => {
     setFormHasInvalidFields(customSaveResponse.hasInvalidFields);
     setUserFilledData(customSaveResponse.data);
   };
 
+  const handleNextTab = () => {
+    setActiveTab('input');
+  };
+
+  const loadAuthorizationTabContent = () => {
+    let content;
+
+    if (loadingFunctionDetails) {
+      content = html`
+        <div class=${styles.loader || 'function-field-loader'}>
+          <${LargeLoader} />
+        </div>
+      `;
+    } else if (functionDetails) {
+      const selectedAuthId =
+        connectedAccountId ||
+        (functionDetails.meta.app.connected_accounts.length > 0
+          ? functionDetails.meta.app.connected_accounts[0]?.id
+          : null);
+
+      content = html`
+        <${AuthSelectorV2}
+          authorizations=${connectedAccounts}
+          appName=${functionDetails.meta.app.title}
+          apiHandler=${props.apiHandler}
+          onAuthSelected=${(authId: number) => {
+            setConnectedAccountId(authId);
+          }}
+          onAuthCreated=${handleAuthCreated}
+          onAuthDeleted=${handleAuthDeleted}
+          selectedAuthId=${selectedAuthId}
+          loginUrl=${functionDetails.meta.app.login_url}
+        />
+      `;
+    }
+
+    return content;
+  };
+
   return html`
     <div class=${styles.functionFieldContainer || 'function-field-container'}>
-      ${label &&
-      html`<label class=${styles.functionFieldLabel || 'function-field-label'}
-        >${label}
-        ${description &&
-        html`
-          <div
-            class=${styles.functionFieldDescription ||
-            'function-field-description'}
-          >
-            ${description}
-          </div>
-        `}
-      </label>`}
-      ${functionValue?.meta?.id
+      ${label
+        ? html`
+            <label class=${styles.functionFieldLabel || 'function-field-label'}>
+              ${label}
+              ${description
+                ? html`
+                    <div
+                      class=${styles.functionFieldDescription ||
+                      'function-field-description'}
+                    >
+                      ${description}
+                    </div>
+                  `
+                : null}
+            </label>
+          `
+        : null}
+      ${isArray && functionValues.length > 0
+        ? html`
+            <div class=${styles.functionFieldArray || 'function-field-array'}>
+              ${functionValues.map(
+                (functionValue, index) => html`
+                  <div
+                    key=${index}
+                    class=${styles.functionFieldSummary ||
+                    'function-field-summary'}
+                    style="margin-bottom: 8px;"
+                  >
+                    <div
+                      class=${styles.functionFieldSelected ||
+                      'function-field-selected'}
+                    >
+                      <div
+                        class=${styles.functionFieldInfo ||
+                        'function-field-info'}
+                      >
+                        <img
+                          src=${functionValue?.meta?.app_icon_url}
+                          alt=${functionValue.meta?.app_name || 'App'}
+                          class=${styles.functionFieldAppIcon ||
+                          'function-field-app-icon'}
+                        />
+                        <div
+                          class=${styles.functionFieldNameContainer ||
+                          'function-field-name-container'}
+                        >
+                          <span
+                            class=${styles.functionFieldName ||
+                            'function-field-name'}
+                          >
+                            ${functionValue.meta?.title || 'Function'}
+                          </span>
+                          <span
+                            class=${styles.functionFieldAppName ||
+                            'function-field-app-name'}
+                          >
+                            ${functionValue.meta?.name || ''}
+                          </span>
+                        </div>
+                      </div>
+                      <div
+                        class=${styles.functionFieldActions ||
+                        'function-field-actions'}
+                      >
+                        <button
+                          type="button"
+                          class=${styles.functionFieldDeleteBtn ||
+                          'function-field-delete-btn'}
+                          onClick=${(e: any) => {
+                            e.stopPropagation();
+                            handleDeleteAction(index);
+                          }}
+                          aria-label="Delete"
+                        >
+                          <svg
+                            width="16"
+                            height="16"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M3 6H5H21"
+                              stroke="currentColor"
+                              stroke-width="2"
+                              stroke-linecap="round"
+                              stroke-linejoin="round"
+                            />
+                            <path
+                              d="M8 6V4C8 3.46957 8.21071 2.96086 8.58579 2.58579C8.96086 2.21071 9.46957 2 10 2H14C14.5304 2 15.0391 2.21071 15.4142 2.58579C15.7893 2.96086 16 3.46957 16 4V6M19 6V20C19 20.5304 18.7893 21.0391 18.4142 21.4142C18.0391 21.7893 17.5304 22 17 22H7C6.46957 22 5.96086 21.7893 5.58579 21.4142C5.21071 21.0391 5 20.5304 5 20V6H19Z"
+                              stroke="currentColor"
+                              stroke-width="2"
+                              stroke-linecap="round"
+                              stroke-linejoin="round"
+                            />
+                          </svg>
+                        </button>
+                        <button
+                          type="button"
+                          class=${styles.functionFieldEditBtn ||
+                          'function-field-edit-btn'}
+                          onClick=${() => handleEditAction(index)}
+                        >
+                          Edit
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                `,
+              )}
+            </div>
+          `
+        : null}
+      ${!isArray && functionValues.length > 0
         ? html`
             <div
               class=${styles.functionFieldSummary || 'function-field-summary'}
@@ -248,8 +437,8 @@ const FunctionField = (props: FunctionFieldProps) => {
               >
                 <div class=${styles.functionFieldInfo || 'function-field-info'}>
                   <img
-                    src=${functionValue?.meta?.app_icon_url}
-                    alt=${functionValue.meta?.app_name || 'App'}
+                    src=${functionValues[0]?.meta?.app_icon_url}
+                    alt=${functionValues[0].meta?.app_name || 'App'}
                     class=${styles.functionFieldAppIcon ||
                     'function-field-app-icon'}
                   />
@@ -260,13 +449,13 @@ const FunctionField = (props: FunctionFieldProps) => {
                     <span
                       class=${styles.functionFieldName || 'function-field-name'}
                     >
-                      ${functionValue.meta?.title || 'Function'}
+                      ${functionValues[0].meta?.title || 'Function'}
                     </span>
                     <span
                       class=${styles.functionFieldAppName ||
                       'function-field-app-name'}
                     >
-                      ${functionValue.meta?.name || ''}
+                      ${functionValues[0].meta?.name || ''}
                     </span>
                   </div>
                 </div>
@@ -280,7 +469,7 @@ const FunctionField = (props: FunctionFieldProps) => {
                     'function-field-delete-btn'}
                     onClick=${(e: any) => {
                       e.stopPropagation();
-                      handleFunctionDeleted();
+                      handleDeleteAction(0);
                     }}
                     aria-label="Delete"
                   >
@@ -311,7 +500,7 @@ const FunctionField = (props: FunctionFieldProps) => {
                     type="button"
                     class=${styles.functionFieldEditBtn ||
                     'function-field-edit-btn'}
-                    onClick=${handleOpenModal}
+                    onClick=${() => handleEditAction(0)}
                   >
                     Edit
                   </button>
@@ -319,91 +508,101 @@ const FunctionField = (props: FunctionFieldProps) => {
               </div>
             </div>
           `
-        : html`
-            <button
-              type="button"
-              class=${styles.functionFieldAddBtn || 'function-field-add-btn'}
-              onClick=${handleOpenModal}
-            >
-              Add action
-            </button>
-          `}
-      ${isOpen &&
-      html`
-        <div class=${styles.functionFieldOverlay || 'function-field-overlay'}>
-          <div
-            class=${styles.functionFieldModal || 'function-field-modal'}
-            ref=${modalRef}
-          >
+        : null}
+      ${isArray || functionValues.length === 0
+        ? html`
             <div
-              class=${styles.functionFieldModalHeader ||
-              'function-field-modal-header'}
+              class=${styles.functionFieldActions || 'function-field-actions'}
+              style="margin-top: ${functionValues.length > 0 ? '8px' : '0'}"
             >
-              <h3
-                class=${styles.functionFieldModalTitle ||
-                'function-field-modal-title'}
-              >
-                Add action
-              </h3>
-              <p
-                class=${styles.functionFieldModalDescription ||
-                'function-field-modal-description'}
-              >
-                The AI will use this action
-              </p>
               <button
                 type="button"
-                class=${styles.functionFieldCloseBtn ||
-                'function-field-close-btn'}
-                onClick=${handleCloseModal}
+                class=${styles.functionFieldAddBtn || 'function-field-add-btn'}
+                onClick=${handleOpenModal}
               >
-                ×
+                ${isArray && functionValues.length > 0
+                  ? 'Add another'
+                  : 'Add action'}
               </button>
             </div>
-
+          `
+        : null}
+      ${isOpen
+        ? html`
             <div
-              class=${styles.functionFieldModalBody ||
-              'function-field-modal-body'}
+              class=${styles.functionFieldOverlay || 'function-field-overlay'}
             >
               <div
-                class=${styles.functionFieldInlineGroup ||
-                'function-field-inline-group'}
+                class=${styles.functionFieldModal || 'function-field-modal'}
+                ref=${modalRef}
               >
-                <${ListBox}
-                  key=${field.activity_field?.id}
-                  fieldId=${field.activity_field?.id ||
-                  field.id ||
-                  field?.activity_field?.machine_name}
-                  title=${`Action`}
-                  placeholder=${`Select an action to use`}
-                  isRequired=${true}
-                  isHidden=${false}
-                  isSearchable=${true}
-                  value=${selectedFunction}
-                  onChange=${(val: string) => {
-                    handleFunctionSelect(val);
-                  }}
-                  isDynamic=${true}
-                  endpointUrl=${FUNCTIONS_LIST_URL}
-                  endpointData=${`{"include": "meta"}`}
-                  apiHandler=${props.apiHandler}
-                  optionKeyPath=${`name`}
-                  valueKeyPath=${`meta.ui.title`}
-                  enableServerSideSearch=${true}
-                  serverSideSearchParamName=${`search`}
-                  iconKeyPath=${`meta.app.icon_url`}
-                  optionDescriptionKeyPath=${`description`}
-                ><//>
-              </div>
+                <div
+                  class=${styles.functionFieldModalHeader ||
+                  'function-field-modal-header'}
+                >
+                  <h3
+                    class=${styles.functionFieldModalTitle ||
+                    'function-field-modal-title'}
+                  >
+                    ${editingIndex !== null ? 'Edit action' : 'Add action'}
+                  </h3>
+                  <p
+                    class=${styles.functionFieldModalDescription ||
+                    'function-field-modal-description'}
+                  >
+                    The AI will use this action
+                  </p>
+                  <button
+                    type="button"
+                    class=${styles.functionFieldCloseBtn ||
+                    'function-field-close-btn'}
+                    onClick=${handleCloseModal}
+                  >
+                    ×
+                  </button>
+                </div>
 
-              ${selectedFunction &&
-              html`
                 <div
-                  class=${styles.functionFieldConfig || 'function-field-config'}
+                  class=${styles.functionFieldModalBody ||
+                  'function-field-modal-body'}
                 >
                   <div
-                    class=${styles.functionFieldTabs || 'function-field-tabs'}
+                    class=${styles.functionFieldInlineGroup ||
+                    'function-field-inline-group'}
                   >
+                    <${ListBox}
+                      key=${field.activity_field?.id}
+                      fieldId=${field.activity_field?.id ||
+                      field.id ||
+                      field?.activity_field?.machine_name}
+                      title=${`Action`}
+                      placeholder=${`Select an action to use`}
+                      isRequired=${true}
+                      isHidden=${false}
+                      isSearchable=${true}
+                      value=${selectedFunction}
+                      onChange=${handleFunctionSelect}
+                      isDynamic=${true}
+                      endpointUrl=${FUNCTIONS_LIST_URL}
+                      endpointData=${`{"include": "meta"}`}
+                      apiHandler=${props.apiHandler}
+                      optionKeyPath=${`name`}
+                      valueKeyPath=${`meta.ui.title`}
+                      enableServerSideSearch=${true}
+                      serverSideSearchParamName=${`search`}
+                      iconKeyPath=${`meta.app.icon_url`}
+                      optionDescriptionKeyPath=${`description`}
+                    />
+                  </div>
+
+                  ${selectedFunction
+                    ? html`
+                <div class=${
+                  styles.functionFieldConfig || 'function-field-config'
+                }>
+                  <div class=${
+                    styles.functionFieldTabs || 'function-field-tabs'
+                  }>
                     <button
                       type="button"
                       class=${`${
@@ -420,9 +619,11 @@ const FunctionField = (props: FunctionFieldProps) => {
                     </button>
                     <${Hint} dismissOnClick=${false} position="top" deltaY=${0}>
                       <button
-                        data-hint=${connectedAccountId
-                          ? ''
-                          : `Please connect your account to proceed.`}
+                        data-hint=${
+                          connectedAccountId
+                            ? ''
+                            : `Please connect your account to proceed.`
+                        }
                         type="button"
                         class=${`${
                           styles.functionFieldTab || 'function-field-tab'
@@ -439,125 +640,108 @@ const FunctionField = (props: FunctionFieldProps) => {
                         }}
                       >
                         Input
-                        ${visibleFields.length > 0
-                          ? ` (${visibleFields.length})`
-                          : ''}
+                        ${
+                          visibleFields.length > 0
+                            ? ` (${visibleFields.length})`
+                            : ''
+                        }
                       </button>
-                    <//>
+                    </${Hint}>
                   </div>
 
-                  <div
-                    class=${styles.functionFieldTabContent ||
-                    'function-field-tab-content'}
-                  >
-                    ${activeTab === 'authorization'
-                      ? html`
-                          <div
-                            class=${styles.functionFieldAuthContent ||
-                            'function-field-auth-content'}
-                          >
-                            ${loadingFunctionDetails
-                              ? html`
-                                  <div
-                                    class=${styles.loader ||
-                                    'function-field-loader'}
-                                  >
-                                    <${LargeLoader} />
-                                  </div>
-                                `
-                              : functionDetails &&
-                                html`<${AuthSelectorV2}
-                                  authorizations=${connectedAccounts}
-                                  appName=${functionDetails.meta.app.title}
-                                  apiHandler=${props.apiHandler}
-                                  onAuthSelected=${(authId: number) => {
-                                    setConnectedAccountId(authId);
-                                  }}
-                                  onAuthCreated=${handleAuthCreated}
-                                  onAuthDeleted=${handleAuthDeleted}
-                                  selectedAuthId=${connectedAccountId ||
-                                  functionDetails.meta.app.connected_accounts
-                                    .length > 0
-                                    ? functionDetails.meta.app
-                                        .connected_accounts[0]?.id
-                                    : null}
-                                  loginUrl=${functionDetails.meta.app.login_url}
-                                ><//>`}
-                          </div>
-                        `
-                      : html`
-                          <div
-                            class=${styles.functionFieldInputContent ||
-                            'function-field-input-content'}
-                          >
-                            <${FunctionForm}
-                              functionName=${selectedFunction}
-                              apiHandler=${props.apiHandler}
-                              functionArguments=${userFilledData}
-                              connectedAccountId=${connectedAccountId}
-                              customSaveCallback=${handleCustomaSave}
-                            ><//>
-                          </div>
-                        `}
+                  <div class=${
+                    styles.functionFieldTabContent ||
+                    'function-field-tab-content'
+                  }>
+                    ${
+                      activeTab === 'authorization'
+                        ? html`
+                            <div
+                              class=${styles.functionFieldAuthContent ||
+                              'function-field-auth-content'}
+                            >
+                              ${html`${loadAuthorizationTabContent()}`}
+                            </div>
+                          `
+                        : html`
+                            <div
+                              class=${styles.functionFieldInputContent ||
+                              'function-field-input-content'}
+                            >
+                              <${FunctionForm}
+                                functionName=${selectedFunction}
+                                apiHandler=${props.apiHandler}
+                                functionArguments=${userFilledData}
+                                connectedAccountId=${connectedAccountId}
+                                customSaveCallback=${handleCustomaSave}
+                              />
+                            </div>
+                          `
+                    }
                   </div>
                 </div>
-              `}
-            </div>
+              `
+                    : null}
+                </div>
 
-            ${activeTab === 'input' &&
-            html`<div
-              class=${styles.functionFieldModalFooter ||
-              'function-field-modal-footer'}
-            >
-              <button
-                type="button"
-                class=${styles.functionFieldCancelBtn ||
-                'function-field-cancel-btn'}
-                onClick=${handleCloseModal}
-              >
-                Cancel
-              </button>
-              <button
-                type="button"
-                class=${styles.functionFieldSaveBtn ||
-                'function-field-save-btn'}
-                onClick=${handleSave}
-                disabled=${!selectedFunction ||
-                formHasInvalidFields ||
-                !connectedAccountId}
-              >
-                Save
-              </button>
-            </div>`}
-            ${activeTab === 'authorization' &&
-            selectedFunction &&
-            html`<div
-              class=${styles.functionFieldModalFooter ||
-              'function-field-modal-footer'}
-            >
-              <button
-                type="button"
-                class=${styles.functionFieldCancelBtn ||
-                'function-field-cancel-btn'}
-                onClick=${handleCloseModal}
-              >
-                Cancel
-              </button>
-              <button
-                type="button"
-                class=${styles.functionFieldSaveBtn ||
-                'function-field-save-btn'}
-                onClick="${(e: any) => {
-                  setActiveTab('input');
-                }}"
-                disabled=${!selectedFunction || !connectedAccountId}
-              >
-                Next
-              </button>
-            </div>`}
-          </div>
-        </div>
-      `}
+                ${activeTab === 'input'
+                  ? html`
+                      <div
+                        class=${styles.functionFieldModalFooter ||
+                        'function-field-modal-footer'}
+                      >
+                        <button
+                          type="button"
+                          class=${styles.functionFieldCancelBtn ||
+                          'function-field-cancel-btn'}
+                          onClick=${handleCloseModal}
+                        >
+                          Cancel
+                        </button>
+                        <button
+                          type="button"
+                          class=${styles.functionFieldSaveBtn ||
+                          'function-field-save-btn'}
+                          onClick=${handleSave}
+                          disabled=${!selectedFunction ||
+                          formHasInvalidFields ||
+                          !connectedAccountId}
+                        >
+                          Save
+                        </button>
+                      </div>
+                    `
+                  : null}
+                ${activeTab === 'authorization' && selectedFunction
+                  ? html`
+                      <div
+                        class=${styles.functionFieldModalFooter ||
+                        'function-field-modal-footer'}
+                      >
+                        <button
+                          type="button"
+                          class=${styles.functionFieldCancelBtn ||
+                          'function-field-cancel-btn'}
+                          onClick=${handleCloseModal}
+                        >
+                          Cancel
+                        </button>
+                        <button
+                          type="button"
+                          class=${styles.functionFieldSaveBtn ||
+                          'function-field-save-btn'}
+                          onClick=${handleNextTab}
+                          disabled=${!selectedFunction || !connectedAccountId}
+                        >
+                          Next
+                        </button>
+                      </div>
+                    `
+                  : null}
+              </div>
+            </div>
+          `
+        : null}
     </div>
   `;
 };