@integry/sdk 4.5.2 → 4.5.4

package/src/features/common/FunctionForm/index.ts

@@ -0,0 +1,862 @@
+/* eslint-disable no-nested-ternary */
+import { html, Component } from 'htm/preact';
+import { connect } from 'unistore/preact';
+import { useContext } from 'preact/hooks';
+// import DOMPurify from 'dompurify';
+import { ListBox } from '@/components/MultipurposeField/Dropdown';
+import AppPageLoader from '@/features/containers/AppFlowContainer/AppFlowWrap/app-page-loader';
+import { actionFunctions } from '@/store';
+import MappingUI from '@/features/common/MappingUI';
+import { Button } from '@/components/Button';
+import { StoreType } from '@/types/store';
+import { DateInput, Input, PasswordInput } from '@/components/Input';
+import HTMLContent from '@/components/HTMLContent';
+import TextContent from '@/components/TextContent';
+import { MultipurposeField } from '@/components/MultipurposeField';
+import DynamicTypedField from '@/features/common/DynamicTypedField';
+import SectionField from '@/features/common/SectionField';
+import { TimeInput } from '@/components/TimeInput';
+import NewMappingUI from '@/features/common/NewMappingUI';
+import { areParentValuesValid, getFieldLabelTags } from '@/utils/stepUtils';
+import ConfigureFieldWrapper from '@/components/ConfigureFieldWrapper';
+import { TextArea } from '@/components/TextArea';
+import { CheckboxGroup } from '@/components/CheckboxGroup';
+import AppContext from '@/contexts/AppContext';
+import { ObjectField } from '@/components/form';
+import {
+  JSONToActivityOutputData,
+  JSONToDynamicFieldData,
+  arrayToNestedJSONWithFirstValue,
+} from '@/utils/ActivityOutputUtils';
+
+import styles from './styles.module.scss';
+
+interface FunctionFormPropsType extends StoreType {
+  functionName: string;
+  connectedAccountId: string;
+  functionArguments: any;
+  variables: any;
+  autoMapVars: boolean;
+  onClose: (response: any) => void;
+  apiHandler: any;
+}
+
+interface ActionFormStateType {
+  loading: boolean;
+  dynamicFieldDataState: any;
+  isSubmitting: boolean;
+  functionDetails: any;
+  invalidFields: any;
+  parentFields: any;
+  parentFieldsChanged: boolean;
+}
+
+interface StepDataMapping {
+  [key: string]: any;
+}
+
+type Option = {
+  id: any;
+  value: string;
+};
+
+class FunctionForm extends Component<
+  FunctionFormPropsType,
+  ActionFormStateType
+> {
+  constructor(props: FunctionFormPropsType) {
+    super(props);
+    this.state = {
+      loading: false,
+      dynamicFieldDataState: {},
+      isSubmitting: false,
+      functionDetails: {},
+      invalidFields: [],
+      parentFields: [],
+      parentFieldsChanged: false,
+    };
+  }
+
+  getMethod = () => 'POST';
+
+  getBaseUrl = () => 'https://api.integry.io/functions';
+
+  getHeaders = () => ({
+    'Content-Type': 'application/json',
+  });
+
+  componentDidMount() {
+    this.setState({ loading: true });
+    this.props.apiHandler
+      .getFunctionDetails(
+        this.props.functionName,
+        this.props.autoMapVars ? this.props.variables : {},
+      )
+      .then((response: any) => {
+        this.setState({ functionDetails: response });
+
+        const { functionArguments } = this.props;
+        const predictedArguments = this.props.autoMapVars
+          ? response.arguments
+          : {};
+        const argumentsData = response.parameters.properties;
+        const args: { [key: string]: any } = {};
+
+        Object.keys(argumentsData).forEach((key: string) => {
+          args[key] =
+            predictedArguments[key] ||
+            functionArguments[key] ||
+            argumentsData[key].meta.ui.default_value ||
+            '';
+
+          if (argumentsData[key].meta.is_required && !args[key]) {
+            this.setState((prevState) => ({
+              invalidFields: prevState.invalidFields.includes(key)
+                ? prevState.invalidFields
+                : [...prevState.invalidFields, key],
+            }));
+          }
+          if (argumentsData[key].meta.ui.ui_field?.data_source?.body) {
+            // Extract all the keys in the body
+            const bodyKeys = Object.keys(
+              argumentsData[key].meta.ui.ui_field.data_source.body,
+            );
+
+            // Iterate through the keys and check if the value matches the format {parameters.<parent-field-name>}
+            bodyKeys.forEach((bodyKey) => {
+              const value =
+                argumentsData[key].meta.ui.ui_field.data_source.body[bodyKey];
+
+              // Check if the value matches the format {parameters.<parent-field-name>}
+              const match = value && value.match(/{parameters\.(.*?)}/);
+
+              if (match && match[1]) {
+                const parentField = match[1]; // Extract the parent field name
+
+                // Add the parent field to the parentFields array
+                this.setState((prevState) => ({
+                  parentFields: [...prevState.parentFields, parentField],
+                }));
+              }
+            });
+          }
+        });
+        this.setState({
+          dynamicFieldDataState: args,
+        });
+
+        this.setState({ loading: false });
+      });
+  }
+
+  private removeLastIfEmpty = (arr: any) => {
+    if (
+      arr.length > 0 &&
+      (arr[arr.length - 1] === '' || arr[arr.length - 1] == null)
+    ) {
+      arr.pop(); // Remove the last item if it is empty or null
+    }
+    return arr;
+  };
+
+  private onSubmit = () => {
+    this.setState({ isSubmitting: true });
+    const { functionName } = this.props;
+    const { functionDetails } = this.state;
+    const args: { [key: string]: any } = {};
+    const { dynamicFieldDataState } = this.state;
+
+    Object.keys(dynamicFieldDataState).forEach((key: string) => {
+      const fieldDetails = functionDetails.parameters.properties[key];
+      let value = dynamicFieldDataState[key] || '';
+
+      // Check for field type and cast value
+      if (fieldDetails) {
+        switch (fieldDetails.type) {
+          case 'boolean':
+            value =
+              value === 'true' ||
+              value === true ||
+              value === '1' ||
+              value === 1;
+            break;
+          case 'number':
+            value = Number(value);
+            break;
+          case 'string':
+            value = String(value);
+            break;
+          case 'array':
+            value = this.removeLastIfEmpty(value);
+            value = value === '' || value === '[]' ? [] : value;
+            if (fieldDetails.items && fieldDetails.items.type === 'number') {
+              value = value.map((item: string) => Number(item));
+            }
+
+            break;
+          case 'object':
+            if (typeof value === 'object' && value !== null) {
+              // If it's already an object, do nothing
+              break;
+            } else {
+              // If it's a string that can be parsed into an object
+              try {
+                value = JSON.parse(value);
+                // Ensure the parsed value is an object
+              } catch (e) {
+                value = {};
+              }
+            }
+            break;
+          default:
+            value = String(value);
+            break;
+        }
+      }
+
+      // Assign the correctly cast value to args
+      args[key] = value;
+    });
+
+    this.props.onClose(args);
+  };
+
+  parseJsonArray = (input: string): any[] => {
+    // First, try to parse the input as a JSON array
+    try {
+      const parsed = JSON.parse(input);
+      if (Array.isArray(parsed)) {
+        return parsed; // Return the valid array
+      }
+    } catch (error) {
+      // If parsing fails, continue to the next check
+    }
+
+    // If the input is a comma-separated string (e.g., "1,2,3")
+    let trimmedInput = '';
+    try {
+      trimmedInput = input.trim();
+    } catch (error) {
+      // If the input is not a string, return an empty array
+      trimmedInput = '';
+    }
+    if (trimmedInput.includes(',')) {
+      // Split by commas and return the values as an array
+      return trimmedInput.split(',').map((item) => item.trim());
+    }
+
+    // If the input is a single value (e.g., "yasir@integry.io" or "1")
+    return [trimmedInput];
+  };
+
+  onFieldChange = (
+    fieldId: string,
+    value: any,
+    dataType: string,
+    isRequired?: boolean,
+    parentFieldId?: string | null,
+    index = -1,
+    stopChangePropagation = false,
+  ) => {
+    this.setState((prevState) => {
+      const newState = { ...prevState.dynamicFieldDataState };
+
+      if (parentFieldId) {
+        // If parentFieldId is not empty, ensure the parent field exists
+        if (!newState[parentFieldId]) {
+          if (index !== -1) {
+            newState[parentFieldId] = [];
+            newState[parentFieldId][index] = {};
+          } else {
+            newState[parentFieldId] = {}; // Create an object if it doesn't exist
+          }
+        }
+        // Add the fieldId and value inside the parentFieldId
+        if (index !== -1) {
+          newState[parentFieldId] = value;
+        } else {
+          newState[parentFieldId][fieldId] = value;
+        }
+      } else {
+        // If parentFieldId is empty, add the fieldId and value directly
+        newState[fieldId] = value;
+      }
+
+      return {
+        dynamicFieldDataState: newState,
+      };
+    });
+
+    let isValid = false;
+    if (dataType === 'number') {
+      isValid = !Number.isNaN(Number(value));
+    } else if (dataType === 'boolean') {
+      isValid =
+        value === 'true' ||
+        value === 'false' ||
+        value === '1' ||
+        value === '0' ||
+        value === true ||
+        value === false ||
+        value === 1 ||
+        value === 0;
+    } else if (dataType === 'string') {
+      isValid = true;
+    } else {
+      isValid = true;
+    }
+    if (value && isValid) {
+      this.setState({
+        invalidFields: this.state.invalidFields.filter(
+          (field: string) => field !== fieldId,
+        ),
+      });
+    } else if (isRequired) {
+      this.setState((prevState) => ({
+        invalidFields: prevState.invalidFields.includes(fieldId)
+          ? prevState.invalidFields
+          : [...prevState.invalidFields, fieldId],
+      }));
+    }
+
+    // Check if the field is a parent field
+    if (this.state.parentFields.includes(fieldId)) {
+      this.setState({ parentFieldsChanged: !this.state.parentFieldsChanged });
+    }
+  };
+
+  replacePlaceholders = (
+    templateObj: { [key: string]: any },
+    dictionary: { [key: string]: any },
+  ): { [key: string]: any } => {
+    const updatedObj: { [key: string]: any } = {};
+
+    // Use Object.entries to iterate over keys and values
+    Object.entries(templateObj).forEach(([key, value]) => {
+      // If the value is a string and contains a placeholder, replace it
+      if (typeof value === 'string' && value.includes('{parameters.')) {
+        // Extract the placeholder key between `{parameters.}` and use it to replace with the dictionary value
+        const placeholderKey = value.match(/{parameters\.(.*?)}/);
+
+        if (placeholderKey && placeholderKey[1]) {
+          const keyToReplace = placeholderKey[1]; // Extract key name from the placeholder
+
+          // Replace the placeholder with the corresponding value from the dictionary
+          if (dictionary[keyToReplace] !== undefined) {
+            updatedObj[key] = value.replace(
+              placeholderKey[0],
+              dictionary[keyToReplace],
+            );
+          }
+        }
+      } else if (typeof value === 'string' && value) {
+        updatedObj[key] = value;
+      }
+    });
+
+    // Return the updated object containing only keys with replaced values
+    return updatedObj;
+  };
+
+  getRegex: any = (field: any) => {
+    if (field.type === 'boolean') {
+      return '^(true|false)$'; // Matches "true" or "false" as strings
+    }
+    if (field.type === 'number') {
+      return '^\\d+$'; // Matches numeric values only
+    }
+    if (
+      field.type === 'array' &&
+      field.items &&
+      field.items.type === 'number'
+    ) {
+      return '^\\d+$'; // Matches numeric values only
+    }
+
+    return ''; // Default to empty string
+  };
+
+  getRegexErrorMessage: any = (field: any) => {
+    if (field.type === 'boolean') {
+      return 'Please enter "true" or "false".'; // Error message for boolean fields
+    }
+    if (field.type === 'number') {
+      return 'Please enter a valid number.'; // Error message for number fields
+    }
+    if (
+      field.type === 'array' &&
+      field.items &&
+      field.items.type === 'number'
+    ) {
+      return 'Please enter a valid number.'; // Error message for number fields
+    }
+
+    return 'Invalid input.'; // Default error message
+  };
+
+  fetchDynamicData = (field: any) => {
+    const { functionDetails } = this.state;
+    const { connectedAccountId } = this.props;
+    const { properties } = functionDetails.parameters;
+    const { depends_on } = properties[field.id].meta.ui || [];
+
+    const data: { [key: string]: any } = {};
+
+    // Iterate through the dependsOn array and add the corresponding values to the data object
+    depends_on.forEach((fieldId: string) => {
+      data[fieldId] = this.state.dynamicFieldDataState[fieldId];
+    });
+    return data;
+  };
+
+  renderFields = (
+    properties: any,
+    functionArguments: any,
+    connectedAccount: string,
+    appName: string,
+    parentFieldId?: string,
+  ): any => {
+    const fields = Object.entries(properties).map(
+      ([fieldName, fieldDetails]: [string, any], index) => ({
+        id: fieldName, // assign unique id for each field
+        title: fieldDetails.meta.title,
+        type: fieldDetails.meta.ui.ui_field?.type || 'TEXTFIELD',
+        endpointURL:
+          fieldDetails.meta.ui.ui_field?.type === 'DYNAMIC_DROPDOWN' ||
+          fieldDetails.meta.ui.ui_field?.type === 'CUSTOM_FIELDS'
+            ? fieldDetails.meta.ui.ui_field.data_source?.url || ''
+            : undefined, // Set endpoint URL for DYNAMIC_DROPDOWN
+        optionKeyPath:
+          fieldDetails.meta.ui.ui_field?.type === 'DYNAMIC_DROPDOWN'
+            ? fieldDetails.meta.ui.ui_field.option_key_path || ''
+            : undefined,
+        valueKeyPath:
+          fieldDetails.meta.ui.ui_field?.type === 'DYNAMIC_DROPDOWN'
+            ? fieldDetails.meta.ui.ui_field.value_key_path || ''
+            : undefined,
+        isMultiSelect:
+          fieldDetails.meta.ui.ui_field?.type === 'DYNAMIC_DROPDOWN'
+            ? fieldDetails.meta.ui.ui_field.is_multiselect || false
+            : false,
+        idKeyPath:
+          fieldDetails.meta.ui.ui_field?.type === 'CUSTOM_FIELDS'
+            ? fieldDetails.meta.ui.ui_field.id_key_path || ''
+            : undefined,
+        typeKeyPath:
+          fieldDetails.meta.ui.ui_field?.type === 'CUSTOM_FIELDS'
+            ? fieldDetails.meta.ui.ui_field.type_key_path || ''
+            : undefined,
+        titleKeyPath:
+          fieldDetails.meta.ui.ui_field?.type === 'CUSTOM_FIELDS'
+            ? fieldDetails.meta.ui.ui_field.title_key_path || ''
+            : undefined,
+        dataSourceBody:
+          fieldDetails.meta.ui.ui_field?.type === 'DYNAMIC_DROPDOWN' ||
+          fieldDetails.meta.ui.ui_field?.type === 'CUSTOM_FIELDS'
+            ? fieldDetails.meta.ui.ui_field.data_source?.body || {}
+            : {}, // Set endpoint URL for DYNAMIC_DROPDOWN
+        defaultValue: functionArguments[fieldName] || '',
+        description:
+          fieldDetails.meta.description_for_users ||
+          fieldDetails.description ||
+          '',
+        is_required: fieldDetails.meta.is_required || false,
+        is_editable: true,
+        is_mappable: true,
+        regex: fieldDetails.meta.ui.regex || this.getRegex(fieldDetails),
+        regexErrorMessage:
+          fieldDetails.meta.ui.regex_error_message ||
+          this.getRegexErrorMessage(fieldDetails),
+        placeholder:
+          fieldDetails.meta.ui.placeholder ||
+          (['DYNAMIC_DROPDOWN', 'STATIC_DROPDOWN'].includes(
+            fieldDetails.meta.ui.ui_field?.type,
+          )
+            ? `Select or enter a value here...`
+            : `Enter value here...`),
+        dataType: fieldDetails.type,
+        options: fieldDetails.meta.ui.ui_field.options || [],
+        properties:
+          fieldDetails.type === 'array' && fieldDetails.items.type === 'object'
+            ? fieldDetails.items.properties || {}
+            : fieldDetails.properties || {},
+        dependsOn: fieldDetails.meta.ui?.depends_on || [],
+      }),
+    );
+
+    // Render fields
+    return fields.map((field) => {
+      let fieldElement;
+      let isDynamic = false;
+      let fieldType = field.type;
+      if (field.type === 'DYNAMIC_DROPDOWN') {
+        fieldType = 'SELECT';
+      }
+      const options: Option[] = field.options.map((option: any) => ({
+        id: field.type === 'CHECKBOX' ? (option.id ? '1' : '0') : option.id, // Assign '1'/'0' only if field.type is 'CHECKBOX'
+        value: option.value,
+      }));
+
+      switch (field.type) {
+        case 'TEXTFIELD':
+          fieldElement = html`
+            <div class="${styles.functionFieldWrap} integry-action-field-wrap">
+              <${ConfigureFieldWrapper} field=${field}>
+                <${MultipurposeField}
+                  id="${field.id}"
+                  title="${field.title}"
+                  activityOutputData=${arrayToNestedJSONWithFirstValue(
+                    JSONToActivityOutputData(this.props.variables || {}),
+                    JSONToDynamicFieldData(this.props.variables || {}),
+                  )}
+                  activityOutputDataRaw=${JSONToActivityOutputData(
+                    this.props.variables || {},
+                  )}
+                  description="${field.description}"
+                  value=${this.state.dynamicFieldDataState[field.id]}
+                  placeholder="${field.placeholder}"
+                  regex=${field.regex}
+                  regexErrorMessage=${field.regexErrorMessage}
+                  isRequired="${field.is_required}"
+                  onChange=${(val: any) => {
+                    this.onFieldChange(
+                      field.id,
+                      val,
+                      field.dataType,
+                      field.is_required,
+                      parentFieldId,
+                    );
+                  }}
+                  type=${fieldType}
+                  isMappable=${this.props.variables &&
+                  Object.entries(this.props.variables).length > 0 &&
+                  field.dataType !== 'array'}
+                  isEditable=${true}
+                  allowTagsInText=${this.props.variables}
+                  fieldId=${field.id}
+                  isArray=${field.dataType === 'array'}
+                ><//>
+              <//>
+            </div>
+          `;
+          break;
+        case 'TEXTAREA':
+          fieldElement = html`
+            <div class="${styles.functionFieldWrap} integry-action-field-wrap">
+              <${ConfigureFieldWrapper} field=${field}>
+                <${MultipurposeField}
+                  id="${field.id}"
+                  title="${field.title}"
+                  activityOutputData=${arrayToNestedJSONWithFirstValue(
+                    JSONToActivityOutputData(this.props.variables || {}),
+                    JSONToDynamicFieldData(this.props.variables || {}),
+                  )}
+                  activityOutputDataRaw=${JSONToActivityOutputData(
+                    this.props.variables || {},
+                  )}
+                  description="${field.description}"
+                  value=${this.state.dynamicFieldDataState[field.id]}
+                  placeholder="${field.placeholder}"
+                  isRequired=${field.is_required}
+                  isEditable="${field.is_editable}"
+                  fieldId=${field.id}
+                  onChange=${(val: any) => {
+                    this.onFieldChange(
+                      field.id,
+                      val,
+                      field.dataType,
+                      field.is_required,
+                      parentFieldId,
+                    );
+                  }}
+                  regex=${field.regex}
+                  regexErrorMessage=${field.regexErrorMessage}
+                  type=${fieldType}
+                  isMappable=${this.props.variables &&
+                  Object.entries(this.props.variables).length > 0}
+                  allowTagsInText=${this.props.variables}
+                ><//>
+              <//>
+            </div>
+          `;
+          break;
+        case 'DYNAMIC_DROPDOWN':
+        case 'STATIC_DROPDOWN':
+          isDynamic = field.type === 'DYNAMIC_DROPDOWN';
+          fieldElement = html`
+            <div class="${styles.functionFieldWrap} integry-action-field-wrap">
+              <${ConfigureFieldWrapper} field=${field}>
+                <${ListBox}
+                  key=${field.id}
+                  fieldId=${field.id}
+                  apiHandler=${this.props.apiHandler}
+                  title=${field.title}
+                  description=${field.description}
+                  placeholder=${field.placeholder}
+                  isRequired=${field.is_required}
+                  value=${this.state.dynamicFieldDataState[field.id]}
+                  endpointUrl=${isDynamic
+                    ? field.endpointURL
+                    : JSON.stringify(options)}
+                  isDynamic=${isDynamic}
+                  optionKeyPath=${field.valueKeyPath}
+                  valueKeyPath=${field.optionKeyPath}
+                  endpointData=${field.dependsOn.length > 0
+                    ? JSON.stringify({
+                        authorization_id: `${connectedAccount}`,
+                        ...this.fetchDynamicData(field),
+                      })
+                    : null}
+                  type=${`${fieldType}`}
+                  isEditable=${field.type === 'DYNAMIC_DROPDOWN'}
+                  isSearchable=${true}
+                  appName=${`${appName}`}
+                  isMultiSelect=${field.isMultiSelect}
+                  onChange=${(val: any, stopChangePropagation = false) => {
+                    this.onFieldChange(
+                      field.id,
+                      val,
+                      field.dataType,
+                      field.is_required,
+                      parentFieldId,
+                      -1,
+                      stopChangePropagation,
+                    );
+                  }}
+                  dataSourceBody=${this.replacePlaceholders(
+                    field.dataSourceBody,
+                    this.state.dynamicFieldDataState,
+                  )}
+                  selectedAuthId=${`${connectedAccount}`}
+                ><//>
+              <//>
+            </div>
+          `;
+          break;
+        case 'CHECKBOX':
+          fieldElement = html`
+            <div class="${styles.functionFieldWrap} integry-action-field-wrap">
+              <${ConfigureFieldWrapper} field=${field}>
+                <${CheckboxGroup}
+                  fieldId=${field.id}
+                  title=${field.title}
+                  description=${field.description}
+                  placeholder=${field.placeholder}
+                  value=${this.state.dynamicFieldDataState[field.id]}
+                  isRequired=${field.is_required}
+                  dataSrcEndpoint=${null}
+                  isDynamic=${false}
+                  initialOptions=${options.filter(
+                    (option: Option) => option.id === '1',
+                  )}
+                  onChange=${(val: any) => {
+                    this.onFieldChange(
+                      field.id,
+                      val,
+                      field.dataType,
+                      false,
+                      parentFieldId,
+                    );
+                  }}
+                >
+                <//>
+              <//>
+            </div>
+          `;
+
+          break;
+        case 'CUSTOM_FIELDS':
+          if (!field.endpointURL) {
+            break;
+          }
+          fieldElement = html`
+            <div
+              key=${field.id}
+              class=${`${styles.actionStepFieldWrap} integry-action-field-wrap`}
+            >
+              <${DynamicTypedField}
+                dynamicField=${field}
+                endpointData=${JSON.stringify({
+                  authorization_id: `${connectedAccount}`,
+                })}
+                placeHolder=${field.placeholder}
+                appName=${`${appName}`}
+                selectedAuthId=${`${connectedAccount}`}
+                sourceFlowIntegrataionInvocationUrl=${field.endpointURL}
+                isMappable=${Object.entries(this.props.variables || {}).length >
+                0}
+                isEditable=${false}
+                allowTagsInText=${true}
+                apiHandler=${this.props.apiHandler}
+                idKeyPath=${field.idKeyPath}
+                typeKeyPath=${field.typeKeyPath}
+                titleKeyPath=${field.titleKeyPath}
+                onChange=${(val: any) => {
+                  this.onFieldChange(field.id, val, field.dataType, false);
+                }}
+                dataSourceBody=${this.replacePlaceholders(
+                  field.dataSourceBody,
+                  this.state.dynamicFieldDataState,
+                )}
+                parentFieldsChanged=${this.state.parentFieldsChanged}
+                activityOutputData=${arrayToNestedJSONWithFirstValue(
+                  JSONToActivityOutputData(this.props.variables || {}),
+                  JSONToDynamicFieldData(this.props.variables || {}),
+                )}
+                activityOutputDataRaw=${JSONToActivityOutputData(
+                  this.props.variables || {},
+                )}
+                value=${this.state.dynamicFieldDataState[field.id] || {}}
+              />
+            </div>
+          `;
+
+          break;
+        case 'STANDARD_FIELDS':
+          // Recursively render fields for object type
+          if (field.properties) {
+            fieldElement = html`
+              <div
+                class="${styles.functionFieldWrap} integry-action-field-wrap"
+              >
+                <${ObjectField}
+                  field=${field}
+                  functionArguments=${functionArguments}
+                  connectedAccount=${connectedAccount}
+                  appName=${appName}
+                  onChange=${this.onFieldChange}
+                  apiHandler=${this.props.apiHandler}
+                  isArray=${field.dataType === 'array'}
+                  activityOutputData=${arrayToNestedJSONWithFirstValue(
+                    JSONToActivityOutputData(this.props.variables || {}),
+                    JSONToDynamicFieldData(this.props.variables || {}),
+                  )}
+                  activityOutputDataRaw=${JSONToActivityOutputData(
+                    this.props.variables || {},
+                  )}
+                />
+              </div>
+            `;
+          }
+          break;
+
+        // You can add cases for other field types here
+        default:
+          fieldElement = html``;
+      }
+
+      return html`
+        <div class="${styles.functionFieldWrap} integry-action-field-wrap">
+          <${ConfigureFieldWrapper} field=${field}> ${fieldElement} <//>
+        </div>
+      `;
+    });
+  };
+
+  renderFunctionDetails = (
+    functionName: string,
+    functionDetails: any,
+    functionArguments: any,
+  ) => {
+    const context = useContext(AppContext);
+    if (!functionDetails || !functionDetails.parameters) return null;
+
+    const connectedAccount =
+      this.props.connectedAccountId ||
+      functionDetails.meta.app.connected_accounts.length > 0
+        ? functionDetails.meta.app.connected_accounts[0].id
+        : null;
+    return this.renderFields(
+      functionDetails.parameters.properties,
+      functionArguments,
+      connectedAccount,
+      functionDetails.meta.app.name,
+    );
+  };
+
+  render() {
+    const {
+      functionArguments,
+      functionName,
+      connectedAccountId,
+      onClose,
+    } = this.props;
+    const { functionDetails } = this.state;
+
+    return html`
+      ${this.state.loading
+        ? html`<div>
+            <${AppPageLoader} renderMode=${`MODAL`} />
+          </div>`
+        : functionDetails &&
+          functionDetails.meta &&
+          html`
+            <div class="${styles.functionFormWrap}">
+              <div class="${styles.functionHeader}">
+                <div class="${styles.name}">
+                  <div class="${styles.functionIcon}">
+                    <img
+                      src=${functionDetails.meta.app.icon_url}
+                      alt=${functionDetails.meta.app.name}
+                    />
+                  </div>
+                  <div class="${styles.text}">
+                    ${functionDetails.meta.ui.title}
+                  </div>
+                </div>
+              </div>
+              <div class="${styles.functionFormContainer}">
+                ${functionDetails.meta.app.connected_accounts.length > 0
+                  ? this.renderFunctionDetails(
+                      functionName,
+                      functionDetails,
+                      functionArguments,
+                    )
+                  : html`<div class="${styles.errorMessage}">
+                      Error: User authorization is missing.
+                    </div>`}
+              </div>
+
+              <div class="${styles.btnSubmit}">
+                <${Button}
+                  label="${functionDetails.meta.app.connected_accounts.length >
+                  0
+                    ? 'Submit'
+                    : 'Close'}"
+                  position="top-right"
+                  onClick=${this.onSubmit}
+                  isLoading=${this.state.isSubmitting}
+                  disabled=${this.state.invalidFields.length > 0}
+                  tooltip=${this.state.invalidFields.length > 0
+                    ? 'Please complete all required fields with valid data.'
+                    : ''}
+                />
+              </div>
+            </div>
+          `}
+    `;
+  }
+}
+
+export default connect<
+  FunctionFormPropsType,
+  ActionFormStateType,
+  StoreType,
+  unknown
+>(
+  [
+    'stepState',
+    'stepMapping',
+    'stepDataMapping',
+    'parentChildMapping',
+    'fieldListMapping',
+    'conditionalFieldMapping',
+    'embedConfig',
+    'activityOutputData',
+    'genericData',
+    'userConfig',
+    'authMapping',
+    'showSetupModal',
+  ],
+  actionFunctions,
+)(FunctionForm);