@integry/sdk 4.6.92 → 4.6.94

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@integry/sdk",
-  "version": "4.6.92",
+  "version": "4.6.94",
   "description": "Integry SDK",
   "main": "dist/umd/index.umd.js",
   "module": "dist/esm/index.csm.js",

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

@@ -1,11 +1,12 @@
+'use client';
+
 import { html } from 'htm/preact';
 import { connect } from 'unistore/preact';
-import { useContext, useEffect, useState } from 'preact/hooks';
-import { DynamicField, NestedObject } from '@/interfaces';
+import { useContext, useEffect, useState, useRef } from 'preact/hooks';
+import type { DynamicField, NestedObject } from '@/interfaces';
 import AppContext from '@/contexts/AppContext';
-import { StoreType } from '@/types/store';
-import { IntegryAPI } from '@/modules/api';
-import { Input } from '@/components/Input';
+import type { StoreType } from '@/types/store';
+import type { IntegryAPI } from '@/modules/api';
 import { MultipurposeField } from '@/components/MultipurposeField';
 import { Loader } from '@/components/Loader';
 import { actionFunctions } from '@/store';
@@ -36,6 +37,8 @@ export type DynamicFieldsProps = {
   value?: any;
   isDisabled?: boolean;
   onChangeCallback?: (val: any) => void;
+  dependsOn?: string[];
+  isArray?: boolean;
 } & StoreType;
 
 interface DynamicDataItem {
@@ -55,8 +58,6 @@ interface ApiResponse {
 const DynamicTypedFields = (props: DynamicFieldsProps) => {
   const {
     dynamicField,
-    endpointData,
-    sourceFunctionData = {},
     sourceFlowIntegrataionInvocationUrl = '',
     selectedAuthId = '',
     dataSourceBody,
@@ -67,21 +68,57 @@ const DynamicTypedFields = (props: DynamicFieldsProps) => {
     onChange,
     isDisabled = false,
     onChangeCallback = () => null,
+    dependsOn = [],
+    isArray = false,
   } = props;
+
   const [dynamicItems, setDynamicItems] = useState<DynamicDataItem[]>([]);
   const [loading, setLoading] = useState<boolean>(true);
-  const [customFieldsData, setCustomFieldsData] = useState<any>(
-    value && value !== '' && typeof value === 'string' ? JSON.parse(value) : {},
-  );
+
+  // For array mode, we'll track multiple sets of field data
+  const [fieldSets, setFieldSets] = useState<any[]>(() => {
+    if (value) {
+      const parsedValue = typeof value === 'string' ? JSON.parse(value) : value;
+
+      if (isArray) {
+        // If it's already an array, use it
+        if (Array.isArray(parsedValue)) {
+          return parsedValue;
+        }
+        // If it's an object, wrap it in an array
+        return [parsedValue];
+      }
+
+      // For non-array mode, we still initialize with a single object
+      return [parsedValue];
+    }
+    return [{}]; // Start with one empty object
+  });
+
+  // For backward compatibility, maintain customFieldsData for the first set
+  const [customFieldsData, setCustomFieldsData] = useState<any>(() => {
+    if (value) {
+      const parsedValue = typeof value === 'string' ? JSON.parse(value) : value;
+
+      if (isArray && Array.isArray(parsedValue) && parsedValue.length > 0) {
+        return parsedValue[0];
+      }
+
+      return parsedValue;
+    }
+    return {};
+  });
+
   const [
     isErrorOnLoadingCustomFields,
     setIsErrorOnLoadingCustomFields,
   ] = useState<boolean>(false);
 
   const context = useContext(AppContext);
-  const isReadOnly = context?.isReadOnly;
   const apiHandlerRef = context?.apiHandler || props.apiHandler;
 
+  const fieldsHaveBeenFetched = useRef(false);
+
   const resolveValue = (path: string, item: any): any => {
     // If the path contains template tags, process it
     if (/{([^}]+)}/.test(path)) {
@@ -120,13 +157,13 @@ const DynamicTypedFields = (props: DynamicFieldsProps) => {
             if (Array.isArray(res)) {
               transformedItems = res;
             } else if (res.output && Array.isArray(res.output)) {
-              const { idKeyPath, titleKeyPath, typeKeyPath } = props; // Assuming these are passed as part of dynamicField prop
+              const { idKeyPath, titleKeyPath, typeKeyPath } = props;
 
               if (idKeyPath && titleKeyPath) {
                 transformedItems = res.output.map((item: any) => ({
-                  id: resolveValue(idKeyPath, item), // Use idKeyPath to access the ID
-                  title: resolveValue(titleKeyPath, item), // Use titleKeyPath to access the title
-                  type: 'TEXTFIELD', // Use typeKeyPath to access the type
+                  id: resolveValue(idKeyPath, item),
+                  title: resolveValue(titleKeyPath, item),
+                  type: 'TEXTFIELD',
                 }));
               } else {
                 setDynamicItems([]);
@@ -149,25 +186,124 @@ const DynamicTypedFields = (props: DynamicFieldsProps) => {
     }
   };
 
+  // Effect for fetching fields
   useEffect(() => {
-    if (value && Object.keys(value).length > 0) {
-      setCustomFieldsData(value);
+    if (dependsOn.length > 0 && !parentFieldsChanged) {
+      setLoading(false);
+      setIsErrorOnLoadingCustomFields(false);
+      return;
+    }
+    if (!fieldsHaveBeenFetched.current || parentFieldsChanged) {
+      fetchDynamicFields();
+      fieldsHaveBeenFetched.current = true;
     }
-    fetchDynamicFields();
   }, [parentFieldsChanged]);
 
-  const onFieldChange = (id: string, val: string, type: string) => {
-    const data = {
-      ...customFieldsData,
-      [id]: val,
-    };
-    setCustomFieldsData(data);
-    if (onChange) {
-      onChange(data);
-    }
-    if (onChangeCallback) {
-      onChangeCallback(JSON.stringify(data));
+  // Effect for handling external value changes
+  useEffect(() => {
+    if (value && !loading) {
+      const parsedValue = typeof value === 'string' ? JSON.parse(value) : value;
+
+      if (isArray) {
+        // Handle array values
+        const newFieldSets = Array.isArray(parsedValue)
+          ? parsedValue
+          : [parsedValue];
+
+        // Update fieldSets
+        setFieldSets(newFieldSets);
+
+        // Update customFieldsData with the first item for backward compatibility
+        if (newFieldSets.length > 0) {
+          setCustomFieldsData(newFieldSets[0]);
+        }
+      } else {
+        // Handle single object value
+        setCustomFieldsData(parsedValue);
+        setFieldSets([parsedValue]);
+      }
     }
+  }, [value, loading, isArray]);
+
+  // Function to add a new empty set of fields
+  const addNewFieldSet = () => {
+    setFieldSets((prev) => {
+      const newFieldSets = [...prev, {}];
+
+      // Call parent callbacks with the updated array
+      if (onChange) {
+        onChange(newFieldSets);
+      }
+      if (onChangeCallback) {
+        onChangeCallback(JSON.stringify(newFieldSets));
+      }
+
+      return newFieldSets;
+    });
+  };
+
+  // Function to remove a field set
+  const removeFieldSet = (index: number) => {
+    if (fieldSets.length <= 1) return; // Don't remove the last set
+
+    setFieldSets((prev) => {
+      const newFieldSets = prev.filter((_, i) => i !== index);
+
+      // Update customFieldsData if we're removing the first set
+      if (index === 0 && newFieldSets.length > 0) {
+        setCustomFieldsData(newFieldSets[0]);
+      }
+
+      // Call parent callbacks with the updated array
+      if (onChange) {
+        onChange(newFieldSets);
+      }
+      if (onChangeCallback) {
+        onChangeCallback(JSON.stringify(newFieldSets));
+      }
+
+      return newFieldSets;
+    });
+  };
+
+  // Function to update a specific field in a specific set
+  const onFieldSetChange = (
+    setIndex: number,
+    fieldId: string,
+    val: string,
+    type: string,
+  ) => {
+    setFieldSets((prev) => {
+      const newFieldSets = [...prev];
+
+      // Create or update the field in the specified set
+      newFieldSets[setIndex] = {
+        ...newFieldSets[setIndex],
+        [fieldId]: val,
+      };
+
+      // If this is the first set, also update customFieldsData for backward compatibility
+      if (setIndex === 0) {
+        setCustomFieldsData(newFieldSets[0]);
+      }
+
+      // Call parent callbacks with the updated array
+      if (onChange) {
+        onChange(isArray ? newFieldSets : newFieldSets[0]);
+      }
+      if (onChangeCallback) {
+        onChangeCallback(
+          JSON.stringify(isArray ? newFieldSets : newFieldSets[0]),
+        );
+      }
+
+      return newFieldSets;
+    });
+  };
+
+  // For backward compatibility, maintain the original onFieldChange function
+  const onFieldChange = (id: string, val: string, type: string) => {
+    onFieldSetChange(0, id, val, type);
   };
 
   return html`
@@ -180,31 +316,111 @@ const DynamicTypedFields = (props: DynamicFieldsProps) => {
             Loading custom fields...
           </div> `
         : html`
-            ${dynamicItems.map(
-              (el) => html`
-                <div class=${styles.dynamicTypedFieldWrapper}>
-                  <${MultipurposeField}
-                    id="${el.id}"
-                    title="${el.title}"
-                    placeholder="${dynamicField.placeholder}"
-                    isRequired="${dynamicField.is_required}"
-                    isEditable="${dynamicField.is_editable}"
-                    fieldId=${el.id}
-                    onChange=${(val: any) => {
-                      onFieldChange(el.id, val, el.type || 'string');
-                    }}
-                    value=${customFieldsData[el.id] || ''}
-                    activityOutputData=${activityOutputData}
-                    activityOutputDataRaw=${activityOutputDataRaw}
-                    type=${el.type || 'TEXTFIELD'}
-                    isMappable=${Object.entries(activityOutputData || {})
-                      .length > 0}
-                    allowTagsInText=${true}
-                    isDisabled=${isDisabled}
-                  ><//>
-                </div>
-              `,
-            )}
+            ${isArray
+              ? dynamicItems.length > 0 &&
+                html`
+                  ${fieldSets.map(
+                    (fieldSet, setIndex) => html`
+                      <div
+                        class=${styles.dynamicTypedFieldSetContainer}
+                        key=${`fieldset-${setIndex}`}
+                      >
+                        <div class=${styles.fieldSetHeader}>
+                          <h4>${dynamicField.title} ${setIndex + 1}</h4>
+                          ${setIndex > 0 &&
+                          html`
+                            <button
+                              type="button"
+                              class=${styles.removeButton}
+                              onClick=${() => removeFieldSet(setIndex)}
+                              disabled=${isDisabled}
+                            >
+                              Remove
+                            </button>
+                          `}
+                        </div>
+                        ${dynamicItems.map(
+                          (el) => html`
+                            <div
+                              class=${styles.dynamicTypedFieldWrapper}
+                              key=${`${setIndex}-${el.id}`}
+                            >
+                              <${MultipurposeField}
+                                id="${`${setIndex}_${el.id}`}"
+                                title="${el.title}"
+                                placeholder="${dynamicField.placeholder}"
+                                isRequired="${dynamicField.is_required}"
+                                isEditable="${dynamicField.is_editable}"
+                                fieldId=${`${setIndex}_${el.id}`}
+                                onChange=${(val: any) => {
+                                  onFieldSetChange(
+                                    setIndex,
+                                    el.id,
+                                    val,
+                                    el.type || 'string',
+                                  );
+                                }}
+                                value=${fieldSet[el.id] || ''}
+                                activityOutputData=${activityOutputData}
+                                activityOutputDataRaw=${activityOutputDataRaw}
+                                type=${el.type || 'TEXTFIELD'}
+                                isMappable=${Object.entries(
+                                  activityOutputData || {},
+                                ).length > 0}
+                                allowTagsInText=${true}
+                                isDisabled=${isDisabled}
+                              ><//>
+                            </div>
+                          `,
+                        )}
+                        ${setIndex === fieldSets.length - 1 &&
+                        html`
+                          <div class=${styles.addButtonContainer}>
+                            <button
+                              type="button"
+                              class=${styles.addButton}
+                              onClick=${addNewFieldSet}
+                              disabled=${isDisabled}
+                            >
+                              + Add Another ${dynamicField.title}
+                            </button>
+                          </div>
+                        `}
+                      </div>
+                    `,
+                  )}
+                `
+              : dynamicItems.length > 0 &&
+                html`
+                  ${dynamicItems.map(
+                    (el) => html`
+                      <div
+                        class=${styles.dynamicTypedFieldWrapper}
+                        key=${el.id}
+                      >
+                        <${MultipurposeField}
+                          id="${el.id}"
+                          title="${el.title}"
+                          placeholder="${dynamicField.placeholder}"
+                          isRequired="${dynamicField.is_required}"
+                          isEditable="${dynamicField.is_editable}"
+                          fieldId=${el.id}
+                          onChange=${(val: any) => {
+                            onFieldChange(el.id, val, el.type || 'string');
+                          }}
+                          value=${customFieldsData[el.id] || ''}
+                          activityOutputData=${activityOutputData}
+                          activityOutputDataRaw=${activityOutputDataRaw}
+                          type=${el.type || 'TEXTFIELD'}
+                          isMappable=${Object.entries(activityOutputData || {})
+                            .length > 0}
+                          allowTagsInText=${true}
+                          isDisabled=${isDisabled}
+                        ><//>
+                      </div>
+                    `,
+                  )}
+                `}
           `}
       ${!isErrorOnLoadingCustomFields
         ? ''

package/src/features/common/DynamicTypedField/styles.module.scss

@@ -71,3 +71,65 @@ a.optionsRefresh {
     height: 37px;
   }
 }
+
+// New styles for field sets
+.dynamicTypedFieldSetContainer {
+  margin-bottom: 20px;
+  padding: 15px;
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+  background-color: #f9f9f9;
+
+  .fieldSetHeader {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 10px;
+    padding-bottom: 10px;
+    border-bottom: 1px solid #e0e0e0;
+
+    h4 {
+      margin: 0;
+      font-size: 12px;
+      font-weight: 500;
+    }
+  }
+
+  .removeButton {
+    background-color: #f44336;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    padding: 5px 10px;
+    cursor: pointer;
+    font-size: 12px;
+
+    &:hover {
+      background-color: #d32f2f;
+    }
+
+    &:disabled {
+      background-color: #cccccc;
+      cursor: not-allowed;
+    }
+  }
+
+  .addButtonContainer {
+    margin-top: 15px;
+  }
+
+  .addButton {
+    background-color: unset;
+    color: #007bff;
+    border: none;
+    border-radius: 4px;
+    padding: 8px 16px;
+    cursor: pointer;
+    font-size: 12px;
+
+    &:disabled {
+      background-color: #cccccc;
+      cursor: not-allowed;
+    }
+  }
+}

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

@@ -52,6 +52,8 @@ interface ActionFormStateType {
   parentFields: any;
   parentFieldsChanged: boolean;
   aiAssistedFields: string[]; // New state to track fields with AI assist enabled
+  changedParentMachineName?: string; // New prop to track changes in parent machine name
+  parentChangeVersion?: number; // New prop to track changes in parent machine name
 }
 
 interface StepDataMapping {
@@ -78,6 +80,8 @@ class FunctionForm extends Component<
       parentFields: [],
       parentFieldsChanged: false,
       aiAssistedFields: [], // Initialize empty array for AI assisted fields
+      changedParentMachineName: '',
+      parentChangeVersion: 0,
     };
   }
 
@@ -411,7 +415,10 @@ class FunctionForm extends Component<
 
     // Check if the field is a parent field
     if (this.state.parentFields.includes(fieldId)) {
-      this.setState({ parentFieldsChanged: !this.state.parentFieldsChanged });
+      this.setState({
+        changedParentMachineName: fieldId,
+        parentChangeVersion: Date.now(),
+      });
     }
 
     if (this.props.customSaveCallback) {
@@ -894,7 +901,12 @@ class FunctionForm extends Component<
                       field.dataSourceBody,
                       this.state.dynamicFieldDataState,
                     )}
-                    parentFieldsChanged=${this.state.parentFieldsChanged}
+                    parentFieldsChanged=${field.dependsOn.length > 0 &&
+                    field.dependsOn.includes(
+                      this.state.changedParentMachineName,
+                    )
+                      ? this.state.parentChangeVersion
+                      : 0}
                     activityOutputData=${arrayToNestedJSONWithFirstValue(
                       JSONToActivityOutputData(this.props.variables || {}),
                       JSONToDynamicFieldData(this.props.variables || {}),
@@ -904,6 +916,8 @@ class FunctionForm extends Component<
                     )}
                     value=${this.state.dynamicFieldDataState[field.id] || {}}
                     isDisabled=${isAIAssisted}
+                    dependsOn=${field.dependsOn}
+                    isArray=${field.dataType === 'array'}
                   />
                 `,
               )}

package/src/index.ts

@@ -609,7 +609,8 @@ export class IntegryJS {
           if (
             options.connectedAccountId &&
             !response.meta.app.connected_accounts.find(
-              (account: any) => account.id === options.connectedAccountId,
+              (account: any) =>
+                Number(account.id) === Number(options.connectedAccountId),
             )
           ) {
             return reject(new Error('Connected account not found.'));