@integry/sdk 4.7.39 → 4.7.41

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

@@ -1,235 +0,0 @@
-.authSelectorWrapV2 {
-  .label {
-    font-weight: 800;
-    font-size: 14px;
-    color: #333333;
-    line-height: 20px;
-    margin-bottom: 5px;
-
-    span {
-      color: #ff4d34;
-      margin-left: 2px;
-      font-size: 16px;
-    }
-  }
-
-  .confirmation {
-    display: flex;
-    align-items: center;
-    .confirmationText {
-      font-size: 12px;
-    }
-    // width: 35%;
-    button {
-      cursor: pointer;
-      -webkit-appearance: button;
-      font-weight: 500;
-      font-size: 12px;
-      line-height: 15px;
-      /* identical to box height */
-      padding: 4px 12px;
-
-      text-align: center;
-      border-radius: 12px;
-      border: 0;
-      outline: none;
-
-      color: #7e7a8f;
-      background-color: #f1f1f1;
-
-      &:nth-child(2) {
-        color: #7e7a8f;
-        margin-left: 10px;
-        margin-right: 10px;
-      }
-      &:nth-child(3) {
-        color: #ffffff;
-        background-color: #f05c42;
-      }
-    }
-  }
-  .rows {
-    margin-top: 10px;
-    margin-bottom: 20px;
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-  }
-
-  .error {
-    color: #f05c42;
-    button {
-      color: #f05c42;
-      border-color: #f05c42;
-    }
-  }
-
-  .errorMessage {
-    margin-top: 4px;
-    font-size: 12px;
-    line-height: 15px;
-    letter-spacing: -0.197647px;
-    color: #f05c42;
-  }
-
-  .description {
-    font-size: 14px;
-    line-height: 20px;
-    color: #8c8c8c;
-    margin-bottom: 10px;
-  }
-
-  .checkboxRow {
-    display: flex;
-    align-items: center;
-    color: #333;
-    font-size: 14px;
-    border-radius: 4px;
-    border: 1px solid var(--Gray-5, #e0e0e0);
-    background: #fff;
-    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.08);
-    padding: 0 16px;
-    max-height: 48px;
-    min-height: 48px;
-
-    .radio {
-      // width: 45%;
-      flex: 1;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-
-      .authRadio {
-        margin: 0;
-      }
-
-      &.readonly {
-        // width: 70%;
-      }
-      svg {
-        vertical-align: baseline;
-      }
-    }
-    .deleteIcon {
-      width: 20px;
-      // padding-left: 8px;
-      // padding-right: 8px;
-      display: flex;
-      align-items: center;
-      cursor: pointer;
-      svg {
-        cursor: pointer;
-        visibility: hidden;
-        user-select: none;
-      }
-    }
-    .statusWrap {
-      display: flex;
-      align-items: center;
-      font-size: 12px;
-      width: 20px;
-      &.readonly {
-        // width: 30%;
-        width: 20px;
-      }
-      .status {
-        position: relative;
-        width: 200px;
-        div {
-          display: flex;
-          align-items: center;
-        }
-        svg {
-          margin-left: 8px;
-        }
-        .statusRed,
-        .statusOrange,
-        .statusGreen {
-          width: 5px;
-          height: 5px;
-          border-radius: 9999px;
-          margin: 0 8px;
-        }
-        .statusRed {
-          background: #e26154;
-        }
-        .statusOrange {
-          background: #fcc700;
-        }
-
-        .statusGreen {
-          background: #2ecc71;
-        }
-
-        span {
-          margin-left: 10px;
-        }
-        .resend {
-          cursor: pointer;
-        }
-      }
-    }
-    &:hover {
-      .deleteIcon svg {
-        visibility: visible;
-        user-select: auto;
-      }
-    }
-    .readonlyHint {
-      position: absolute;
-      width: 40%;
-      height: -webkit-fill-available;
-      z-index: 99;
-      margin: 10px 0px;
-    }
-
-    &:hover {
-      border: 1px solid var(--theme-accent-blue-1, #4250f0);
-      box-shadow: 0px 0px 8px 0px rgba(66, 80, 240, 0.16);
-    }
-    [class^='styles-module_text_'] {
-      font-size: 12px;
-    }
-  }
-
-  .isCheckBoxSelected {
-    border: 1px solid var(--theme-accent-blue-1, #4250f0);
-    box-shadow: 0px 0px 8px 0px rgba(66, 80, 240, 0.16);
-  }
-
-  .addAccountCTA {
-    border-radius: 4px;
-    border: 1px solid var(--Gray-5, #e0e0e0);
-    background: #fff;
-    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.08);
-    color: var(--black-and-grey-title-and-desc, #333);
-    font-feature-settings: 'clig' off, 'liga' off;
-    font-family: Inter;
-    font-size: 12px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: normal;
-    padding: 16px;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: flex-start;
-    gap: 8px;
-    cursor: pointer;
-
-    &:hover {
-      border: 1px solid var(--theme-accent-blue-1, #4250f0);
-      box-shadow: 0px 0px 8px 0px rgba(66, 80, 240, 0.16);
-    }
-  }
-  .authSelectorHeader {
-    label {
-      div:first-child {
-        font-size: 13px;
-      }
-      div:nth-child(2) {
-        font-size: 11px;
-      }
-    }
-  }
-}

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

@@ -1,402 +0,0 @@
-'use client';
-
-import { html } from 'htm/preact';
-import { connect } from 'unistore/preact';
-import { useContext, useEffect, useState } from 'preact/hooks';
-import type { TemplateField, NestedObject } from '@/interfaces';
-import AppContext from '@/contexts/AppContext';
-import type { StoreType } from '@/types/store';
-import { Loader } from '@/components/Loader';
-import { MultipurposeField } from '@/components/MultipurposeField';
-import { actionFunctions } from '@/store';
-import styles from './styles.module.scss';
-
-export type DynamicFieldsProps = {
-  stepId: number;
-  dynamicField: TemplateField;
-  endpointData: string;
-  activityOutputData?: any;
-  activityOutputDataRaw?: [];
-  appName?: string;
-  sourceFlowData?: NestedObject;
-  sourceFlowIntegrataionInvocationUrl?: string;
-  selectedAuthId?: string;
-  isMappable?: boolean;
-  isEditable?: boolean;
-  allowTagsInText?: boolean;
-  placeHolder?: string;
-  refreshRootStepData?: (callback?: any) => void;
-  parentFieldChanged?: boolean;
-  onChangeCallback?: (val: any) => void;
-  objectValue?: any;
-  tagsTree?: any;
-  showMenuOnLeft?: boolean;
-  showFieldsLimit?: 'all' | number; // New prop
-} & StoreType;
-
-interface DynamicDataItem {
-  id: string;
-  title: string;
-}
-
-const DynamicFields = (props: DynamicFieldsProps) => {
-  const {
-    stepId,
-    dynamicField,
-    endpointData,
-    genericData,
-    activityOutputData,
-    activityOutputDataRaw,
-    appName,
-    sourceFlowData = {},
-    sourceFlowIntegrataionInvocationUrl = '',
-    selectedAuthId = '',
-    isMappable = true,
-    isEditable = true,
-    allowTagsInText = true,
-    placeHolder = '',
-    refreshRootStepData,
-    parentFieldChanged = false,
-    onChangeCallback = () => null,
-    objectValue = null,
-    tagsTree = null,
-    showMenuOnLeft = false,
-    showFieldsLimit = 'all', // Default to 'all'
-  } = props;
-
-  const [dynamicItems, setDynamicItems] = useState<DynamicDataItem[]>([]);
-  const [loading, setLoading] = useState<boolean>(true);
-  const [customFieldsData, setCustomFieldsData] = useState<any>(
-    objectValue && objectValue !== '' ? JSON.parse(objectValue) : {},
-  );
-  const [
-    isErrorOnLoadingCustomFields,
-    setIsErrorOnLoadingCustomFields,
-  ] = useState<boolean>(false);
-
-  // New state for field limiting functionality
-  const [visibleFieldIds, setVisibleFieldIds] = useState<Set<string>>(
-    new Set(),
-  );
-  const [showFieldSelector, setShowFieldSelector] = useState<boolean>(false);
-  const [searchTerm, setSearchTerm] = useState<string>('');
-
-  const context = useContext(AppContext);
-  const isReadOnly = context?.isReadOnly;
-
-  const fetchDynamicFields = async () => {
-    const { activity_field } = dynamicField;
-
-    if (sourceFlowIntegrataionInvocationUrl && selectedAuthId) {
-      setLoading(true);
-      context?.apiHandler
-        .callSourceFlowIntegrationInvocationUrl<DynamicDataItem[]>(
-          new URL(sourceFlowIntegrataionInvocationUrl),
-          { authorization_id: selectedAuthId },
-          sourceFlowData,
-        )
-        .then((res) => {
-          if (res) {
-            if (res) {
-              setIsErrorOnLoadingCustomFields(false);
-              if (Array.isArray(res)) {
-                setDynamicItems(res);
-              } else {
-                setDynamicItems([]);
-              }
-            } else {
-              setIsErrorOnLoadingCustomFields(true);
-              throw new Error('Nothing returned from dynamic data endpoint');
-            }
-          }
-        })
-        .catch((err) => console.error(err))
-        .finally(() => setLoading(false));
-    } else if (activity_field && activity_field.dynamic_field_src) {
-      let data;
-      setLoading(true);
-      try {
-        data = JSON.parse(endpointData);
-        if (tagsTree) {
-          data.allow_workspace_connected_accounts = true;
-        }
-      } catch (error) {
-        data = '';
-      }
-      context?.apiHandler
-        .callDynamicDataEndpointWithTags<DynamicDataItem[]>(
-          new URL(activity_field.dynamic_field_src),
-          data,
-          activityOutputData,
-        )
-        .then((res) => {
-          if (res) {
-            setIsErrorOnLoadingCustomFields(false);
-            if (Array.isArray(res)) {
-              setDynamicItems(res);
-            } else {
-              setDynamicItems([]);
-            }
-          } else {
-            setIsErrorOnLoadingCustomFields(true);
-          }
-        })
-        .catch((err) => console.error(err))
-        .finally(() => {
-          setLoading(false);
-        });
-    }
-  };
-
-  // Initialize visible fields based on showFieldsLimit and existing data
-  useEffect(() => {
-    if (dynamicItems.length > 0) {
-      const parsedVal = objectValue
-        ? customFieldsData
-        : (props.stepDataMapping[stepId]?.[dynamicField.id]
-            ?.objectValue as Record<string, string | number>) || {};
-
-      // Get fields that have existing values (for edit mode)
-      const fieldsWithValues = dynamicItems
-        .filter(
-          (item) =>
-            parsedVal && parsedVal[item.id] && parsedVal[item.id] !== '',
-        )
-        .map((item) => item.id);
-
-      if (showFieldsLimit === 'all') {
-        // Show all fields
-        setVisibleFieldIds(new Set(dynamicItems.map((item) => item.id)));
-      } else if (typeof showFieldsLimit === 'number') {
-        // Show limited fields + fields with existing values
-        const fieldsToShow = new Set(fieldsWithValues);
-
-        // Add additional fields up to the limit if needed
-        let count = fieldsWithValues.length;
-        dynamicItems.some((item) => {
-          if (count >= showFieldsLimit) return true;
-          if (!fieldsToShow.has(item.id)) {
-            fieldsToShow.add(item.id);
-            count += 1;
-          }
-          return false;
-        });
-
-        setVisibleFieldIds(fieldsToShow);
-      }
-    }
-  }, [dynamicItems, showFieldsLimit, customFieldsData, objectValue]);
-
-  useEffect(() => {
-    fetchDynamicFields();
-  }, [parentFieldChanged]);
-
-  useEffect(() => {
-    if (!onChangeCallback) {
-      fetchDynamicFields();
-    }
-  }, [dynamicField, endpointData, selectedAuthId]);
-
-  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;
-  };
-
-  const onChange = (machineName: string, val: string) => {
-    const results = val.match(/{([^}]+)}/g);
-    let valSubstituded = val;
-    (results || []).forEach((tag: string) => {
-      const tagCheck = tag.replace(/{|}/g, '');
-      (activityOutputDataRaw || []).forEach((arr: any) => {
-        if (arr.text === tagCheck) {
-          valSubstituded = valSubstituded.replace(tag, `{${arr.value}}`);
-        }
-      });
-    });
-
-    if (onChangeCallback && objectValue !== null) {
-      setCustomFieldsData((prevData: any) => {
-        const updatedData = {
-          ...prevData,
-          [machineName]: val,
-        };
-        onChangeCallback(JSON.stringify(updatedData));
-        return updatedData;
-      });
-    } else {
-      props.setStepMappingData({
-        stepId,
-        fieldId: dynamicField.id,
-        id: machineName,
-        value: valSubstituded,
-      });
-    }
-  };
-
-  const handleFieldSelect = (fieldId: string) => {
-    setVisibleFieldIds((prev) => new Set([...prev, fieldId]));
-    setShowFieldSelector(false);
-    setSearchTerm('');
-  };
-
-  const getAvailableFields = () =>
-    dynamicItems.filter(
-      (item) =>
-        !visibleFieldIds.has(item.id) &&
-        item.title.toLowerCase().includes(searchTerm.toLowerCase()),
-    );
-
-  const getVisibleFields = () =>
-    dynamicItems.filter((item) => visibleFieldIds.has(item.id));
-
-  const shouldShowAddButton = () =>
-    showFieldsLimit !== 'all' &&
-    typeof showFieldsLimit === 'number' &&
-    visibleFieldIds.size < dynamicItems.length;
-
-  return html`
-    <div class=${styles.dynamicFieldsWrapper}>
-      ${loading
-        ? html`<div className=${styles.loadingText}>
-            <div class=${styles.actionFormLoader}>
-              <${Loader} />
-            </div>
-            Loading custom fields...
-          </div>`
-        : html`
-            ${getVisibleFields().map((el) => {
-              const ele = props.stepDataMapping[stepId]
-                ? props.stepDataMapping[stepId][dynamicField.id]
-                : ({} as { objectValue: Record<string, string | number> });
-              let fieldVal = '';
-              const parsedVal = objectValue
-                ? customFieldsData
-                : (ele.objectValue as Record<string, string | number>);
-              if (parsedVal && parsedVal[el.id]) {
-                fieldVal = `${parsedVal[el.id]}`;
-              }
-              return html`
-                <div class=${styles.dynamicFieldWrapper}>
-                  <${MultipurposeField}
-                    title=${el.title}
-                    placeholder=${getPlaceholder()}
-                    value=${fieldVal}
-                    onChange=${(val: string) => {
-                      onChange(el.id, val);
-                    }}
-                    isReadOnly=${isReadOnly}
-                    type="TEXTFIELD"
-                    isMappable=${isMappable}
-                    isEditable=${isEditable}
-                    allowTagsInText=${allowTagsInText}
-                    activityOutputData=${activityOutputData}
-                    activityOutputDataRaw=${activityOutputDataRaw}
-                    refreshRootStepData=${refreshRootStepData}
-                    fieldId=${el.id || ''}
-                    tagsTree=${tagsTree}
-                    showMenuOnLeft=${showMenuOnLeft}
-                  />
-                </div>
-              `;
-            })}
-            ${shouldShowAddButton() && !showFieldSelector
-              ? html`
-                  <div class=${styles.addFieldButtonWrapper}>
-                    <button
-                      class=${styles.addFieldButton}
-                      onClick=${() => setShowFieldSelector(true)}
-                      type="button"
-                    >
-                      <span class=${styles.addIcon}>+</span>
-                      Add Field Mapping
-                    </button>
-                  </div>
-                `
-              : ''}
-            ${showFieldSelector
-              ? html`
-                  <div class=${styles.fieldSelectorWrapper}>
-                    <div class=${styles.searchInputWrapper}>
-                      <input
-                        type="text"
-                        class=${styles.searchInput}
-                        placeholder="Search fields to add..."
-                        value=${searchTerm}
-                        onInput=${(e: Event) =>
-                          setSearchTerm((e.target as HTMLInputElement).value)}
-                        autofocus
-                      />
-                      <button
-                        class=${styles.cancelButton}
-                        onClick=${() => {
-                          setShowFieldSelector(false);
-                          setSearchTerm('');
-                        }}
-                        type="button"
-                      >
-                        ×
-                      </button>
-                    </div>
-                    ${getAvailableFields().length > 0
-                      ? html`
-                          <div class=${styles.fieldDropdown}>
-                            ${getAvailableFields().map(
-                              (field) => html`
-                                <div
-                                  class=${styles.fieldOption}
-                                  onClick=${() => handleFieldSelect(field.id)}
-                                >
-                                  ${field.title}
-                                </div>
-                              `,
-                            )}
-                          </div>
-                        `
-                      : html`
-                          <div class=${styles.noFieldsMessage}>
-                            No matching fields found
-                          </div>
-                        `}
-                  </div>
-                `
-              : ''}
-          `}
-      ${!isErrorOnLoadingCustomFields
-        ? ''
-        : html`<span className=${styles.noOptions}>
-            Could not load custom fields.
-            ${false
-              ? html``
-              : html` <a
-                  className=${styles.optionsRefresh}
-                  href="#"
-                  onclick=${(e: Event) => {
-                    e.preventDefault();
-                    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,
-)(DynamicFields);