@integry/sdk 4.7.39 → 4.7.41

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

@@ -1,504 +0,0 @@
-'use client';
-
-import { html } from 'htm/preact';
-import { connect } from 'unistore/preact';
-import { useContext, useEffect, useState, useRef } from 'preact/hooks';
-import type { DynamicField, NestedObject } from '@/interfaces';
-import AppContext from '@/contexts/AppContext';
-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';
-import styles from './styles.module.scss';
-
-export type DynamicFieldsProps = {
-  stepId: number;
-  dynamicField: DynamicField;
-  endpointData: string;
-  activityOutputData?: any;
-  activityOutputDataRaw?: [];
-  appName?: string;
-  sourceFunctionData?: NestedObject;
-  sourceFlowIntegrataionInvocationUrl?: string;
-  selectedAuthId?: string;
-  isMappable?: boolean;
-  isEditable?: boolean;
-  allowTagsInText?: boolean;
-  placeHolder?: string;
-  refreshRootStepData?: (callback?: any) => void;
-  apiHandler: IntegryAPI;
-  idKeyPath?: string;
-  titleKeyPath?: string;
-  typeKeyPath?: string;
-  isRequiredKeyPath?: string;
-  onChange?: (val: any) => void;
-  dataSourceBody?: any;
-  parentFieldsChanged?: boolean;
-  value?: any;
-  isDisabled?: boolean;
-  onChangeCallback?: (val: any) => void;
-  dependsOn?: string[];
-  isArray?: boolean;
-  allowWorkspaceConnectedAccounts?: boolean;
-  tagsTree?: any;
-  showMenuOnLeft?: boolean;
-} & StoreType;
-
-interface DynamicDataItem {
-  id: string;
-  title: string;
-  output?: any;
-  next_page?: string;
-  type?: string;
-  is_required?: boolean;
-}
-
-interface ApiResponse {
-  network_code: string;
-  output: DynamicDataItem[];
-  next_page: string;
-}
-
-const DynamicTypedFields = (props: DynamicFieldsProps) => {
-  const {
-    stepId,
-    dynamicField,
-    sourceFlowIntegrataionInvocationUrl = '',
-    selectedAuthId = '',
-    dataSourceBody,
-    parentFieldsChanged,
-    activityOutputData,
-    activityOutputDataRaw,
-    value,
-    onChange,
-    isDisabled = false,
-    onChangeCallback = () => null,
-    dependsOn = [],
-    isArray = false,
-    allowWorkspaceConnectedAccounts = false,
-    tagsTree = null,
-    showMenuOnLeft = false,
-    appName = '',
-    placeHolder = '',
-  } = props;
-
-  const [dynamicItems, setDynamicItems] = useState<DynamicDataItem[]>([]);
-  const [loading, setLoading] = useState<boolean>(true);
-
-  // 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 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)) {
-      return path.replace(/{([^}]+)}/g, (_, placeholder) => {
-        const keys = placeholder.split('.');
-        return keys.reduce((acc: any, key: any) => acc && acc[key], item) || '';
-      });
-    }
-
-    // Otherwise, treat it as a plain property path
-    const keys = path.split('.');
-    return keys.reduce((acc: any, key) => acc && acc[key], item);
-  };
-
-  const fetchDynamicFields = async () => {
-    if (sourceFlowIntegrataionInvocationUrl && selectedAuthId) {
-      setLoading(true);
-      setIsErrorOnLoadingCustomFields(false);
-      const requestParams: any = {
-        authorization_id: selectedAuthId,
-        connected_account_id: selectedAuthId,
-        ...(allowWorkspaceConnectedAccounts && {
-          allow_workspace_connected_accounts: true,
-        }),
-      };
-      apiHandlerRef
-        .callSourceFlowIntegrationInvocationUrl<
-          DynamicDataItem[] | ApiResponse
-        >(
-          new URL(sourceFlowIntegrataionInvocationUrl),
-          requestParams,
-          dataSourceBody,
-        )
-        .then((res) => {
-          if (res) {
-            let transformedItems: DynamicDataItem[] = [];
-
-            // Check if res is an array, if so, set it directly
-            if (Array.isArray(res)) {
-              transformedItems = res;
-            } else if (res.output && Array.isArray(res.output)) {
-              const {
-                idKeyPath,
-                titleKeyPath,
-                typeKeyPath,
-                isRequiredKeyPath,
-              } = props;
-
-              if (idKeyPath && titleKeyPath) {
-                transformedItems = res.output.map((item: any) => ({
-                  id: resolveValue(idKeyPath, item),
-                  title: resolveValue(titleKeyPath, item),
-                  type: 'TEXTFIELD',
-                  ...(isRequiredKeyPath
-                    ? { is_required: resolveValue(isRequiredKeyPath, item) }
-                    : {}),
-                }));
-              } else {
-                setDynamicItems([]);
-                setIsErrorOnLoadingCustomFields(true);
-                throw new Error('Nothing returned from dynamic data endpoint');
-              }
-            }
-
-            // Update dynamicItems state with transformed items
-            setDynamicItems(transformedItems);
-          } else {
-            setDynamicItems([]);
-            setIsErrorOnLoadingCustomFields(true);
-            throw new Error('Nothing returned from dynamic data endpoint');
-          }
-          setLoading(false);
-        })
-        .catch((err) => console.error(err))
-        .finally(() => setLoading(false));
-    }
-  };
-
-  // Effect for fetching fields
-  useEffect(() => {
-    if (dependsOn.length > 0 && !parentFieldsChanged) {
-      setLoading(false);
-      setIsErrorOnLoadingCustomFields(false);
-      return;
-    }
-    if (!fieldsHaveBeenFetched.current || parentFieldsChanged) {
-      fetchDynamicFields();
-      fieldsHaveBeenFetched.current = true;
-    }
-  }, [parentFieldsChanged]);
-
-  // 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]),
-        );
-      } else {
-        props.setStepMappingData({
-          stepId,
-          fieldId: dynamicField.id,
-          id: fieldId,
-          value: val,
-        });
-      }
-
-      return newFieldSets;
-    });
-  };
-
-  // For backward compatibility, maintain the original onFieldChange function
-  const onFieldChange = (id: string, val: string, type: string) => {
-    onFieldSetChange(0, id, val, type);
-  };
-
-  const getPlaceholder = () => {
-    let placeHolderValue = 'Enter text or map to fields...';
-    if (placeHolder) {
-      placeHolderValue = placeHolder;
-    } else if (appName) {
-      placeHolderValue = `Enter text or map to ${appName} fields...`;
-    }
-    return placeHolderValue;
-  };
-
-  return html`
-    <div>
-      ${loading
-        ? html`<div className=${styles.loadingText}>
-            <div class=${styles.actionFormLoader}>
-              <${Loader} />
-            </div>
-            Loading custom fields...
-          </div> `
-        : html`
-            ${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=${getPlaceholder()}
-                                isRequired="${el.is_required !== undefined
-                                  ? el.is_required
-                                  : 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}
-                                tagsTree=${tagsTree}
-                                showMenuOnLeft=${showMenuOnLeft}
-                              ><//>
-                            </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=${getPlaceholder()}
-                          isRequired="${el.is_required !== undefined
-                            ? el.is_required
-                            : 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}
-                          tagsTree=${tagsTree}
-                          showMenuOnLeft=${showMenuOnLeft}
-                        ><//>
-                      </div>
-                    `,
-                  )}
-                `}
-          `}
-      ${!isErrorOnLoadingCustomFields
-        ? ''
-        : html`<span className=${styles.noOptions}
-            >Could not load custom fields.
-            ${false
-              ? html``
-              : html` <a
-                  className=${styles.optionsRefresh}
-                  href="#"
-                  onclick=${() => {
-                    setLoading(true);
-                    setIsErrorOnLoadingCustomFields(false);
-                    fetchDynamicFields();
-                  }}
-                  >${' '}Try again?</a
-                >`}
-          </span>`}
-    </div>
-  `;
-};
-
-export default connect<DynamicFieldsProps, unknown, StoreType, unknown>(
-  [
-    'stepState',
-    'genericData',
-    'embedConfig',
-    'stepMapping',
-    'dynamicFieldData',
-    'stepDataMapping',
-    'parentChildMapping',
-  ],
-  actionFunctions,
-)(DynamicTypedFields);

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

@@ -1,135 +0,0 @@
-.actionFormWrap {
-  width: 100%;
-  .noStepFields {
-    font-family: 'Inter';
-    font-weight: 400;
-    font-size: 14px;
-    line-height: 24px;
-    color: #999999;
-  }
-}
-
-.actionStepFieldWrap {
-  margin-bottom: 16px;
-}
-
-.unsupported {
-  font-size: 12px;
-  color: #ca8c1b;
-}
-.actionFormLoader {
-  width: 15px;
-  margin: 0 auto;
-}
-
-.noOptions {
-  font-weight: 400;
-  font-size: 12px;
-  line-height: 15px;
-  margin-bottom: 12px;
-  display: block;
-  color: #999;
-  span.noOptionsRetry {
-    [class^='styles-module_loader_'] {
-      position: relative;
-      top: 5px;
-    }
-  }
-}
-.loadingText {
-  font-weight: 400;
-  font-size: 12px;
-  line-height: 15px;
-  margin-bottom: 12px;
-  color: #999;
-  display: flex;
-  .actionFormLoader {
-    margin: 0 7px 0 0;
-  }
-}
-a.optionsRefreshProminent {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 8px;
-  font-size: 12px;
-  line-height: 15px;
-  color: #4250f0;
-  cursor: pointer;
-  text-decoration: none;
-}
-a.optionsRefresh {
-  font-size: 12px;
-  line-height: 15px;
-  color: #4250f0;
-  cursor: pointer;
-  text-decoration: none;
-}
-.dynamicTypedFieldWrapper {
-  [class^='styles-module_readonlyHint'] {
-    top: 24px;
-    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;
-    }
-  }
-}