@integry/sdk 4.7.39 → 4.7.40

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

@@ -1,816 +0,0 @@
-import { html } from 'htm/preact';
-import { useState, useRef, useEffect } from 'preact/hooks';
-import { ListBox } from '@/components/MultipurposeField/Dropdown';
-import FunctionForm from '@/features/common/FunctionForm';
-import AuthSelectorV2 from '@/features/common/AuthSelectorV2';
-import { LargeLoader } from '@/components/LargeLoader';
-import { Hint } from '@/components/Tooltip';
-import styles from './styles.module.scss';
-
-// Types for our component
-type Authorization = {
-  id: number;
-  display_name: string;
-};
-
-type FunctionFieldProps = {
-  onChange: (value: any) => void;
-  value?: any;
-  label?: string;
-  name: string;
-  description?: string;
-  field: Record<string, any>;
-  apiHandler?: any;
-  isArray?: boolean; // New prop for array support
-  tagsTree?: any;
-  isReadOnly?: boolean;
-};
-
-const FunctionField = (props: FunctionFieldProps) => {
-  const {
-    value,
-    label,
-    description,
-    field,
-    isArray = false,
-    tagsTree,
-    isReadOnly,
-  } = 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);
-  const [loadingFunctionDetails, setLoadingFunctionDetails] = useState<boolean>(
-    false,
-  );
-  const [connectedAccountId, setConnectedAccountId] = useState<number | null>(
-    null,
-  );
-  const [connectedAccounts, setConnectedAccounts] = useState<any>([]);
-  const [visibleFields, setVisibleFields] = useState<any>([]);
-
-  // Track AI-assisted fields
-  const [aiAssistedFields, setAIAssistedFields] = useState<string[]>([]);
-
-  // 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>({});
-
-  const modalRef = useRef<HTMLDivElement | null>(null);
-  const FUNCTIONS_LIST_URL = `https://api.integry.io/functions/list/`;
-
-  // Reset state when opening modal for a new action
-  const resetModalState = () => {
-    setSelectedFunction('');
-    setActiveTab('authorization');
-    setFunctionDetails(null);
-    setConnectedAccountId(null);
-    setUserFilledData({});
-    setFormHasInvalidFields(false);
-    setAIAssistedFields([]); // Reset AI-assisted fields
-  };
-
-  // Handle clicking outside the modal to close it
-  useEffect(() => {
-    function handleClickOutside(event: MouseEvent) {
-      if (
-        modalRef.current &&
-        !modalRef.current.contains(event.target as Node)
-      ) {
-        setIsOpen(false);
-      }
-    }
-
-    if (isOpen) {
-      document.addEventListener('mousedown', handleClickOutside);
-    }
-
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, [isOpen]);
-
-  // Open modal for adding a new action
-  const handleOpenModal = () => {
-    resetModalState();
-    setEditingIndex(null);
-    setIsOpen(true);
-  };
-
-  const getVisibleFields = (properties: any[]) => {
-    const response: any[] = [];
-
-    Object.entries(properties).forEach(([key, property]) => {
-      response.push({ key, ...property });
-    });
-
-    return response;
-  };
-
-  const getInvalidFields = (properties: any[]) => {
-    const response: any[] = [];
-
-    Object.entries(properties).forEach(([key, property]) => {
-      if (
-        property.meta?.ui?.is_visible &&
-        property.meta?.is_required &&
-        !userFilledData[key] &&
-        !aiAssistedFields.includes(key) // Don't mark AI-assisted fields as invalid
-      ) {
-        response.push({ key, ...property });
-      }
-    });
-
-    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 AI-assisted fields from meta if available
-    if (actionToEdit?.meta?.ai_assisted_fields) {
-      setAIAssistedFields(actionToEdit.meta.ai_assisted_fields);
-    } else {
-      setAIAssistedFields([]);
-    }
-
-    // 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');
-    setLoadingFunctionDetails(true);
-    props.apiHandler.getFunctionDetails(val, {}).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,
-      );
-      if (response && response.meta?.app?.connected_accounts?.length > 0) {
-        setConnectedAccountId(response.meta.app.connected_accounts[0].id);
-      } else {
-        setConnectedAccountId(null);
-      }
-    });
-  };
-
-  const removeMeta = (obj: any): any => {
-    if (Array.isArray(obj)) {
-      return obj.map(removeMeta);
-    }
-    if (typeof obj === 'object' && obj !== null) {
-      const newObj: any = {};
-      Object.keys(obj).forEach((key) => {
-        if (key !== 'meta') {
-          newObj[key] = removeMeta(obj[key]);
-        }
-      });
-      return newObj;
-    }
-    return obj;
-  };
-
-  // Handle AI assist toggle changes
-  const handleAIAssistToggle = (
-    fieldId: string,
-    enabled: boolean,
-    allAIAssistedFields: string[],
-  ) => {
-    setAIAssistedFields(allAIAssistedFields);
-
-    // Update form validation since AI-assisted fields should not be marked as invalid
-    if (
-      functionDetails &&
-      functionDetails.parameters &&
-      functionDetails.parameters.properties
-    ) {
-      const invalidFields = getInvalidFields(
-        functionDetails.parameters.properties,
-      );
-      setFormHasInvalidFields(invalidFields.length > 0);
-    }
-  };
-
-  // Modified to handle array of values and include AI-assisted fields in meta
-  const handleSave = () => {
-    if (selectedFunction && functionDetails) {
-      const schema = {
-        json_schema: {
-          type: 'function',
-          function: removeMeta(functionDetails),
-        },
-        meta: {
-          id: functionDetails.meta.id,
-          version: functionDetails.meta.version,
-          connected_account_id: connectedAccountId,
-          form_page_machine_name: null,
-          name: functionDetails.name,
-          title: functionDetails.meta.ui.title,
-          app_name: functionDetails.meta.app.title,
-          app_icon_url: functionDetails.meta.app.icon_url,
-          ai_assisted_fields: aiAssistedFields, // Store AI-assisted fields in meta
-        },
-        default_arguments: userFilledData,
-        parameters_visible_to_user: {},
-      };
-
-      // 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(isArray ? updatedValues : updatedValues[0]);
-      }
-
-      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(
-      (account: Authorization) => account.id === auth.id,
-    );
-    if (!existingAuth) {
-      setConnectedAccounts((prev: Authorization[]) => [...prev, auth]);
-      setConnectedAccountId(auth.id);
-    }
-  };
-
-  const handleAuthDeleted = (authId: number) => {
-    setConnectedAccounts((prev: Authorization[]) =>
-      prev.filter((account: Authorization) => account.id !== authId),
-    );
-    setConnectedAccountId(null);
-  };
-
-  const handleCustomaSave = (customSaveResponse: any) => {
-    setFormHasInvalidFields(customSaveResponse.hasInvalidFields);
-    setUserFilledData(customSaveResponse.data);
-  };
-
-  const handleNextTab = () => {
-    setActiveTab('input');
-  };
-
-  // Get default AI-assisted fields based on the current function
-  const getDefaultAIAssistedFields = () => {
-    // If editing an existing function, use the stored AI-assisted fields
-    if (
-      editingIndex !== null &&
-      functionValues[editingIndex]?.meta?.ai_assisted_fields
-    ) {
-      return functionValues[editingIndex].meta.ai_assisted_fields;
-    }
-
-    return [];
-  };
-
-  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}
-          isReadOnly=${isReadOnly}
-        />
-      `;
-    }
-
-    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>
-                  `
-                : 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"
-                          disabled=${isReadOnly}
-                          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"
-                              strokeWidth="2"
-                              strokeLinecap="round"
-                              strokeLinejoin="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"
-                              strokeWidth="2"
-                              strokeLinecap="round"
-                              strokeLinejoin="round"
-                            />
-                          </svg>
-                        </button>
-                        <button
-                          type="button"
-                          class=${styles.functionFieldEditBtn ||
-                          'function-field-edit-btn'}
-                          onClick=${() => handleEditAction(index)}
-                        >
-                          ${isReadOnly ? 'View' : 'Edit'}
-                        </button>
-                      </div>
-                    </div>
-                  </div>
-                `,
-              )}
-            </div>
-          `
-        : null}
-      ${!isArray && functionValues.length > 0
-        ? html`
-            <div
-              class=${styles.functionFieldSummary || 'function-field-summary'}
-            >
-              <div
-                class=${styles.functionFieldSelected ||
-                'function-field-selected'}
-              >
-                <div class=${styles.functionFieldInfo || 'function-field-info'}>
-                  <img
-                    src=${functionValues[0]?.meta?.app_icon_url}
-                    alt=${functionValues[0].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'}
-                    >
-                      ${functionValues[0].meta?.title || 'Function'}
-                    </span>
-                    <span
-                      class=${styles.functionFieldAppName ||
-                      'function-field-app-name'}
-                    >
-                      ${functionValues[0].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(0);
-                    }}
-                    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"
-                        strokeWidth="2"
-                        strokeLinecap="round"
-                        strokeLinejoin="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"
-                        strokeWidth="2"
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                      />
-                    </svg>
-                  </button>
-                  <button
-                    type="button"
-                    class=${styles.functionFieldEditBtn ||
-                    'function-field-edit-btn'}
-                    onClick=${() => handleEditAction(0)}
-                  >
-                    Edit
-                  </button>
-                </div>
-              </div>
-            </div>
-          `
-        : null}
-      ${isArray || functionValues.length === 0
-        ? html`
-            <div
-              class=${styles.functionFieldActions || 'function-field-actions'}
-              style="margin-top: ${functionValues.length > 0 ? '8px' : '0'}"
-            >
-              <button
-                type="button"
-                disabled=${isReadOnly}
-                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.functionFieldOverlay || 'function-field-overlay'}
-            >
-              <div
-                class=${styles.functionFieldModal || 'function-field-modal'}
-                ref=${modalRef}
-              >
-                <div
-                  class=${styles.functionFieldModalHeader ||
-                  'function-field-modal-header'}
-                >
-                  <h3
-                    class=${styles.functionFieldModalTitle ||
-                    'function-field-modal-title'}
-                  >
-                    ${editingIndex !== null
-                      ? `${isReadOnly ? 'View' : '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>
-
-                <div
-                  class=${styles.functionFieldModalBody ||
-                  'function-field-modal-body'}
-                >
-                  <div
-                    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", "include_private": true, "page_size": 20}`}
-                      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=${`${
-                        styles.functionFieldTab || 'function-field-tab'
-                      } ${
-                        activeTab === 'authorization'
-                          ? styles.functionFieldTabActive ||
-                            'function-field-tab-active'
-                          : ''
-                      }`}
-                      onClick=${() => setActiveTab('authorization')}
-                    >
-                      Authorization
-                    </button>
-                    <${Hint} dismissOnClick=${false} position="top" deltaY=${0}>
-                      <button
-                        data-hint=${
-                          connectedAccountId
-                            ? ''
-                            : `Please connect your account to proceed.`
-                        }
-                        type="button"
-                        class=${`${
-                          styles.functionFieldTab || 'function-field-tab'
-                        } ${
-                          activeTab === 'input'
-                            ? styles.functionFieldTabActive ||
-                              'function-field-tab-active'
-                            : ''
-                        } ${connectedAccountId ? '' : styles.disabled}`}
-                        onClick=${() => {
-                          if (connectedAccountId) {
-                            setActiveTab('input');
-                          }
-                        }}
-                      >
-                        Input
-                        ${
-                          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'}
-                            >
-                              ${html`${loadAuthorizationTabContent()}`}
-                            </div>
-                          `
-                        : html`
-                            <div
-                              class=${styles.functionFieldInputContent ||
-                              'function-field-input-content'}
-                            >
-                              <${FunctionForm}
-                                functionName=${selectedFunction}
-                                apiHandler=${props.apiHandler}
-                                functionArguments=${userFilledData}
-                                connectedAccountId=${connectedAccountId}
-                                customSaveCallback=${handleCustomaSave}
-                                variables=${tagsTree}
-                                showMappingMenu=${true}
-                                forceShowAllFields=${true}
-                                enableAIAssist=${true}
-                                defaultAIAssistedFields=${getDefaultAIAssistedFields()}
-                                onAIAssistToggle=${handleAIAssistToggle}
-                              />
-                            </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 ||
-                          isReadOnly}
-                        >
-                          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>
-  `;
-};
-
-export { FunctionField, FunctionFieldProps };