@integry/sdk 4.7.39 → 4.7.41

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

@@ -1,649 +0,0 @@
-import { html } from 'htm/preact';
-import { connect } from 'unistore/preact';
-import { useContext, useEffect, useMemo, useRef, useState } from 'preact/hooks';
-import { IncomingWebhookObject, TemplateField } from '@/interfaces';
-import AppContext from '@/contexts/AppContext';
-import { StoreType } from '@/types/store';
-import { LargeLoader } from '@/components/LargeLoader';
-import { actionFunctions } from '@/store';
-import { Label } from '@/components/Label';
-import { ListBox } from '@/components/Listbox';
-import { Tag } from '@/components/Tag';
-import { Select } from '@/components/BasicSelect';
-import { MultipurposeField } from '@/components/MultipurposeField';
-import {
-  JSONToActivityOutputData,
-  JSONToDynamicFieldData,
-} from '@/utils/ActivityOutputUtils';
-import { areParentValuesValid } from '@/utils/stepUtils';
-
-import styles from './styles.module.scss';
-
-export type MappingUiProps = {
-  stepId: number;
-  templateFields: TemplateField[];
-  showStepValidation?: boolean;
-  endpointData: {
-    authId: number;
-    fieldsData: Record<string, string | number>;
-  };
-} & StoreType;
-
-interface DynamicDataItem {
-  fieldId: number;
-  id: string | null;
-  title: string | null;
-  type: string;
-  isNotDynamic?: boolean;
-}
-
-const MappingUI = (props: MappingUiProps) => {
-  const [loading, setLoading] = useState<boolean>(true);
-  const [rootDataLoading, setRootDataLoading] = useState<boolean>(false);
-  const [dynamicDataLoading, setDynamicDataLoading] = useState<boolean>(false);
-  const [fieldsRef, setFieldsRef] = useState<number[]>([]);
-  const [dynamicItems, setDynamicItems] = useState<DynamicDataItem[]>([]);
-  const [dynamicListId, setDynamicListId] = useState('');
-  const [incommingWebhookApp, setIncommingWebhookApp] = useState<{
-    id: number;
-    name: string;
-    icon_url: string;
-  } | null>(null);
-  // const [additionalData, setAdditionalData] = useState({});
-
-  const context = useContext(AppContext);
-  const isReadOnly = context?.isReadOnly;
-
-  const dynamicFieldIdRef = useRef('');
-
-  const shouldShowField = (field: any) => {
-    const { stepId, conditionalFieldMapping } = props;
-    const fieldConditions = conditionalFieldMapping[stepId][
-      field.id
-    ];
-    let isConditionValid = true;
-
-    if (fieldConditions) {
-      isConditionValid = areParentValuesValid(
-        stepId,
-        fieldConditions,
-        props.stepDataMapping,
-      );
-    }
-    return isConditionValid;
-  };
-
-  useEffect(() => {
-    if (dynamicItems.length > 0) {
-      // eslint-disable-next-line array-callback-return
-      dynamicItems.map((el, index) => {
-        const ele = props.stepDataMapping[props.stepId][el.fieldId];
-        if (ele && !ele.isDynamic && ele.value) {
-          const parsedValue = ele.value.slice(1, -1);
-          if (parsedValue) setFieldsRef((prev) => [...prev, index]);
-        } else if (ele && ele.isDynamic && ele.objectValue && el.id) {
-          const parsedValues = ele.objectValue || {};
-          if (parsedValues[el.id]) {
-            setFieldsRef((prev) => [...prev, index]);
-          }
-        }
-      });
-    }
-  }, [dynamicItems]);
-
-  useEffect(() => {
-    const triggerStep = props.genericData.stepWithActivityOutput;
-    if (triggerStep) {
-      const { id: triggerStepId } = triggerStep;
-      // eslint-disable-next-line no-use-before-define
-      const data = getVisibleFieldsDataOnRootStep(triggerStepId);
-      // eslint-disable-next-line no-use-before-define
-      setRootStepData(data);
-    }
-  }, []);
-
-  useEffect(() => {
-    // fetch the dynamic field in case it exists
-    const dynamicFieldToRender = props.templateFields.filter(
-      (el) => el.activity_field && el.activity_field.type === 'DYNAMIC',
-    )[0];
-
-    if (dynamicFieldToRender) {
-      // set our dynamic list ID
-      setDynamicListId(`${dynamicFieldToRender.id}`);
-    }
-
-    // get a list of text fields that will be part of the mapping
-    const textFieldsToRender = props.templateFields
-      .filter(
-        (el) =>
-          el.activity_field &&
-          el.activity_field.type === 'TEXTFIELD' &&
-          el.is_visible,
-      )
-      .map((el) => ({
-        fieldId: el.id,
-        id: el.activity_field && el.activity_field.machine_name,
-        title: el.activity_field && el.activity_field.title,
-        type: 'text',
-        isNotDynamic: true,
-      }));
-
-      const filteredTextFieldsToRender: any = [];
-
-      textFieldsToRender.forEach(fieldToRender => {
-        if(shouldShowField(fieldToRender)) {
-          filteredTextFieldsToRender.push(fieldToRender);
-        }
-      });
-    // grab activity output data since that is used in both cases
-    // if (!props.activityOutputData) {
-    //   console.log('props.activity output data is null');
-    //   // eslint-disable-next-line no-use-before-define
-    //   setRootStepData();
-    // }
-
-    // if dynamic field exists, fetch the fields and show those
-    if (
-      dynamicFieldToRender &&
-      dynamicFieldToRender.activity_field // &&
-      // dynamicFieldToRender.id !== Number(dynamicListId)
-    ) {
-      const mappingField =
-        props.parentChildMapping[props.stepId][
-          dynamicFieldToRender.activity_field.machine_name
-        ];
-
-      let valuesMapField = '';
-      if (mappingField) {
-        const valuesMap = mappingField.parentFields?.reduce((prev, next) => {
-          const parentFieldId =
-            props.parentChildMapping[props.stepId][next].fieldId;
-          return {
-            ...prev,
-            [parentFieldId]:
-              props.stepDataMapping[props.stepId][parentFieldId].value,
-          };
-        }, {});
-        valuesMapField = JSON.stringify(valuesMap);
-      }
-
-      // in case the parent field value changes, refetch the custom fields
-      if (
-        valuesMapField !== dynamicFieldIdRef.current ||
-        dynamicFieldToRender.id !== Number(dynamicListId)
-      ) {
-        setLoading(true);
-
-        // eslint-disable-next-line no-use-before-define
-        fetchDynamicFieldData(dynamicFieldToRender)
-          ?.then((res) => {
-            setLoading(false);
-            // props.resetCustomMappingData(props.stepId);
-            setFieldsRef([]);
-            dynamicFieldIdRef.current = valuesMapField;
-            if (Array.isArray(res)) {
-              setDynamicItems([
-                ...filteredTextFieldsToRender,
-                ...res.map((el) => ({
-                  ...el,
-                  fieldId: dynamicFieldToRender.id,
-                  fetchedFromAOU: true,
-                })),
-              ]);
-            } else {
-              setDynamicItems(filteredTextFieldsToRender);
-            }
-          })
-          .catch((err) => {
-            console.error(err)
-            setDynamicItems([...filteredTextFieldsToRender]);
-            setLoading(false);
-          });
-      }
-    } else if (!dynamicItems.length) {
-      // we dont have any dynamic fields so,
-      // just set the text fields as items to render
-      setDynamicItems([...filteredTextFieldsToRender]);
-      setLoading(false);
-    } else if (dynamicItems.length > 0) {
-      const tempFields: any = [];
-      const cleanedDynamicFields: any = [];
-      // remove all items from dynamicItems which has fetchedFromAOU = false
-      dynamicItems.forEach((item: any) => {
-        if (item.fetchedFromAOU) {
-          cleanedDynamicFields.push(item);
-        }
-      });
-  
-      filteredTextFieldsToRender.forEach((item: any) => {
-        let fieldExist = false;
-        cleanedDynamicFields.forEach((dynamicItem: any) => {
-          if(dynamicItem.fieldId === item.fieldId || dynamicItem.fetchedFromAOU) {
-            fieldExist = true;
-          }
-        });
-        if (!fieldExist) {
-          tempFields.push(item);
-        }
-      });
-      setDynamicItems([...filteredTextFieldsToRender, ...cleanedDynamicFields]);
-      setLoading(false);
-    }
-  }, [props.stepDataMapping[props.stepId]]);
-
-  const getVisibleFieldsDataOnRootStep = (
-    stepId: number,
-  ): {
-    [machineName: string]: string;
-  } => {
-    const fields = props.stepDataMapping[stepId];
-    const requiredFieldsWithValues = Object.keys(fields)
-      .filter((el) => fields[Number(el)].value)
-      .reduce((prev, curr) => {
-        const currentItem = fields[Number(curr)];
-        return {
-          ...prev,
-          [currentItem.machineName]: currentItem.value,
-        };
-      }, {});
-
-    return requiredFieldsWithValues;
-  };
-
-  const setRootStepData = async (
-    additionalData: Record<string, string> | undefined,
-  ) => {
-    const triggerStep = props.genericData.stepWithActivityOutput;
-    const integryObject = triggerStep?.template_fields.find(
-      (el) => el.activity_field?.machine_name === 'integry_webhook_object',
-    )?.default_value;
-
-    if (triggerStep) {
-      const { id: triggerStepId } = triggerStep;
-
-      if (triggerStep.activity.activity_output_url) {
-        setRootDataLoading(true);
-        context?.apiHandler
-          .callDynamicDataEndpoint<
-            {
-              text: string;
-              value: string;
-            }[]
-          >(new URL(triggerStep.activity.activity_output_url), {
-            authorization_id: `${props.stepMapping[triggerStepId].selectedAuthId}`,
-            ...additionalData,
-          })
-          .then((res) => {
-            setRootDataLoading(false);
-            if (res)
-              props.setActivityOutputData({
-                activityOutputData: res,
-              });
-          });
-      } else {
-        setRootDataLoading(false);
-      }
-
-      if (integryObject) {
-        try {
-          const parsedIntegryObject = JSON.parse(
-            integryObject,
-          ) as IncomingWebhookObject;
-          let objectPaylaod = {};
-          if (props.userConfig?.objects?.[parsedIntegryObject.name]) {
-            objectPaylaod =
-              props.userConfig?.objects?.[parsedIntegryObject.name];
-          } else {
-            objectPaylaod = JSON.parse(parsedIntegryObject.payload);
-          }
-          const activityOutputData = JSONToActivityOutputData(objectPaylaod);
-          const dynamicFieldData = JSONToDynamicFieldData(objectPaylaod);
-          props.setIncomingWebhookPayload({
-            incomingWebhookPayload: objectPaylaod,
-          });
-          props.setActivityOutputData({
-            activityOutputData: activityOutputData || [],
-          });
-          props.setDynamicFieldData({
-            dynamicFieldData: dynamicFieldData || {},
-          });
-        } catch (e) {
-          console.error(e);
-        }
-        try {
-          const incommingWebhookAppTemp = triggerStep?.template_fields.find(
-            (el) => el.activity_field?.machine_name === 'app',
-          )?.default_value;
-          setIncommingWebhookApp(JSON.parse(incommingWebhookAppTemp || '{}'));
-        } catch (e) {
-          console.error('Failed to get incoming webhook app', e);
-        }
-      }
-
-      if (triggerStep.activity.dynamic_field_data_endpoint) {
-        setDynamicDataLoading(true);
-        context?.apiHandler
-          .callDynamicDataEndpoint<{
-            [fieldId: string]: (string | Record<string, string>)[];
-          }>(new URL(triggerStep.activity.dynamic_field_data_endpoint), {
-            authorization_id: `${props.stepMapping[triggerStepId].selectedAuthId}`,
-            ...additionalData,
-          })
-          .then((res) => {
-            setDynamicDataLoading(false);
-            if (res)
-              props.setDynamicFieldData({
-                dynamicFieldData: res,
-              });
-          });
-      } else {
-        setDynamicDataLoading(false);
-      }
-    }
-  };
-
-  const fetchDynamicFieldData = (templateField: TemplateField) => {
-    const dynamicEndpoint = `${templateField.activity_field?.dynamic_field_src}`;
-    return context?.apiHandler.callDynamicDataEndpoint<DynamicDataItem[]>(
-      new URL(dynamicEndpoint),
-      {
-        authorization_id: `${props.endpointData.authId}`,
-        ...props.endpointData.fieldsData,
-      },
-    );
-  };
-
-  const onMappingValueSelected = (
-    index: number,
-    item: DynamicDataItem,
-    isRequired: boolean,
-    rowIndex: number,
-  ) => {
-    const activityOutputObject = props.activityOutputData?.[index];
-    const arrayIndex = fieldsRef.findIndex((el) => el === rowIndex);
-    if (index < 0) {
-      setFieldsRef((prev) => prev.filter((el) => el !== rowIndex));
-      if (item.isNotDynamic) {
-        props.setStepFieldData({
-          stepId: `${props.stepId}`,
-          fieldId: `${item.fieldId}`,
-          value: '',
-          isRequired,
-        });
-      } else if (dynamicListId) {
-        props.setStepMappingData({
-          stepId: props.stepId,
-          fieldId: Number(dynamicListId),
-          id: `${item.id}`,
-          value: null,
-        });
-      }
-    } else if (activityOutputObject) {
-      if (arrayIndex < 0) {
-        setFieldsRef((prev) => [...prev, rowIndex]);
-      }
-      if (item.isNotDynamic) {
-        props.setStepFieldData({
-          stepId: `${props.stepId}`,
-          fieldId: `${item.fieldId}`,
-          value: `{${activityOutputObject.value}}`,
-          isRequired,
-        });
-      } else if (dynamicListId) {
-        props.setStepMappingData({
-          stepId: props.stepId,
-          fieldId: Number(dynamicListId),
-          id: `${item.id}`,
-          value: `{${activityOutputObject.value}}`,
-        });
-      }
-    }
-    props.verifyStepValidity(props.stepId);
-  };
-
-  const triggerApp = useMemo(
-    () =>
-      Object.keys(props.stepMapping)
-        ?.map((stepId) => props.stepMapping[stepId])
-        ?.filter(
-          (el) =>
-            el.step.activity.type === 'TRIGGER' ||
-            el.step.activity.type === 'QUERY',
-        )[0],
-    [],
-  );
-  const triggerAppInfo = {
-    icon_url:
-      incommingWebhookApp?.icon_url ||
-      triggerApp?.step.activity.app.icon_url ||
-      props.genericData.brandingApp?.icon_url,
-    name:
-      incommingWebhookApp?.name ||
-      triggerApp?.step.activity.app.name ||
-      props.genericData.brandingApp?.name,
-  };
-
-  const removeCurlyBraces = (value: string): string => value.replace(/^{(.*)}$/, '$1')
-
-  const arrayToNestedJSONWithFirstValue = (array: any, valueObj: any) => {
-    let tempValueObj: any = {};
-    Object.keys(valueObj).forEach(i => {
-      const key = removeCurlyBraces(i);
-      tempValueObj = {
-        ...tempValueObj,
-        [key]: valueObj[i] || '',
-      };
-    });
-
-    const result = {};
-    array.forEach((item: any) => {
-      const keys = item.value.split('.');
-      let currentLevel: any = result;
-  
-      keys.forEach((key: any, index: any) => {
-        if (!currentLevel[key]) {
-          if (index === keys.length - 1) {
-            // eslint-disable-next-line prefer-destructuring
-            currentLevel[key] = tempValueObj[item.value][0];
-          } else {
-            currentLevel[key] = {};
-          }
-        }
-        currentLevel = currentLevel[key];
-      });
-    });
-    return result;
-  }
-
-  if ((dynamicItems || []).length === 0) {
-    return html``;
-  }
-  return html`
-    <div>
-      <${Label}
-        title="Map data"
-        description="Please map fields you want to use from both apps"
-      />
-      <div>
-        ${loading || rootDataLoading || dynamicDataLoading
-          ? html`<div class=${styles.loader}><${LargeLoader} /></div>`
-          : html`
-              <div class=${styles.mappingWrap}>
-                ${html`
-                <div class=${styles.mappingRow}>
-                  <div class=${styles.mappingHeaderItem}>
-                    <img
-                      src=${props.stepMapping[props.stepId].step.activity.app
-                        .icon_url}
-                    />
-                    <div>
-                      ${`${
-                        props.stepMapping[props.stepId].step.activity.app.name
-                      } Field`}
-                    </div>
-                  </div>
-                  ${html`<div class=${styles.sampleData}>Sample Data</div>`}
-                  <div class=${styles.mappingHeaderItem}>
-                    <img src=${triggerAppInfo?.icon_url} />
-                    <div>${`${triggerAppInfo.name} Field`}</div>
-                  </div>
-                  ${isReadOnly && html`<div class=${styles.tagColumn}></div>`}
-                </div>`}
-                ${dynamicItems.map((el, itemIndex) => {
-                  const slug = el.id || '';
-                  const ele = props.stepDataMapping[props.stepId][el.fieldId];
-                  let isFieldValueChanged = false;
-                  let selectVal;
-                  let parsedVal: string | Record<string, string | number>;
-                  if (ele) {
-                    if (ele.isDynamic) {
-                      parsedVal = ele.objectValue as Record<
-                        string,
-                        string | number
-                      >;
-                      if (ele.changedDynamicFields) {
-                        isFieldValueChanged = ele.changedDynamicFields.includes(
-                          slug,
-                        );
-                      }
-                    } else {
-                      parsedVal = ele.value?.slice(1, -1) as string;
-                    }
-                    if (!ele.isDynamic && parsedVal) {
-                      selectVal = parsedVal;
-                      isFieldValueChanged = ele.isChanged;
-                    } else if (
-                      el.id &&
-                      ele.isDynamic &&
-                      ele.objectValue &&
-                      (parsedVal as Record<string, string | number>)[slug]
-                    ) {
-                      selectVal = `${
-                        (parsedVal as Record<string, string | number>)[slug]
-                      }`.slice(1, -1);
-                    }
-                  }
-                  return html`
-                    <div class=${styles.mappingRow}>
-                      <div class=${styles.title}>
-                        ${el.title}${ele?.isRequired && html`<span>*</span>`}
-                      </div>
-                      ${html`
-                      <div class=${styles.sampleData}>
-                        ${props.dynamicFieldData &&
-                        selectVal &&
-                        (props.dynamicFieldData || {})[
-                          `{${selectVal}}`
-                        ]?.map((sample: string | Record<string, string>) =>
-                          sample ? html`<pre>${sample}</pre>` : html``,
-                        )}
-                      </div>
-                      `}
-                      <div class=${styles.selectBox}>
-                      ${html`
-                      <${Select}
-                      ariaLabel="Map a value"
-                      placeholder="Please map a value"
-                      options=${Array.isArray(props.activityOutputData)
-                        ? props.activityOutputData?.map((item) => ({
-                            key: item.value,
-                            label: item.text,
-                          }))
-                        : []}
-                      value=${selectVal}
-                      isRequired=${ele?.isRequired}
-                      showStepValidation=${props.showStepValidation}
-                      showUnselectedValue=${true}
-                      unselectedText="Skip"
-                      onChange=${(index: number) =>
-                        onMappingValueSelected(
-                          index,
-                          el,
-                          ele?.isRequired ?? false,
-                          itemIndex,
-                        )}
-                      isReadOnly=${isReadOnly}
-                    ><//>
-                    `}
-                      ${false && html`
-                      <${MultipurposeField}
-                        activityOutputData=${arrayToNestedJSONWithFirstValue(props.activityOutputData, props.dynamicFieldData)}
-                        placeholder=${'Please map a value'}
-                        value=${selectVal}
-                        type=${`TEXT`}
-                        isMappable=${true}
-                        allowTagsInText=${true}
-                      />
-                      `}
-                      ${false && html`<${ListBox}
-                      ariaLabel="Map a value"
-                      placeholder="Please map a value"
-                      showStepValidation=${props.showStepValidation}
-                      isReadOnly=${isReadOnly}
-                      value=${selectVal}
-                      onChange=${(selectedValue: string) => {
-                        const index = (props.activityOutputData || []).findIndex(obj => obj.value === selectedValue);
-                        onMappingValueSelected(
-                          index,
-                          el,
-                          ele?.isRequired ?? false,
-                          itemIndex,
-                        );
-                      }}
-                      items=${Array.isArray(props.activityOutputData)
-                        ? props.activityOutputData?.map((item) => ({
-                            id: item.value,
-                            value: item.text,
-                          }))
-                        : []}
-                      ><//>`}
-                      </div>
-                      ${isReadOnly &&
-                      html`<div class=${styles.tagColumn}>
-                        ${isFieldValueChanged &&
-                        html`<${Tag} label="Changed" />`}
-                      </div>`}
-                    </div>
-                  `;
-                })}
-                <div class=${styles.mappingInfo}>
-                  <div>
-                    <span>Mapped</span>
-                    <span
-                      >${fieldsRef.length}${' '}
-                      field${fieldsRef.length !== 1 ? 's' : ''}</span
-                    >
-                  </div>
-                  <div>
-                    <span>Ignored</span>
-                    <span
-                      >${dynamicItems.length - fieldsRef.length}${' '}
-                      field${dynamicItems.length - fieldsRef.length !== 1
-                        ? 's'
-                        : ''}</span
-                    >
-                  </div>
-                </div>
-              </div>
-            `}
-      </div>
-    </div>
-  `;
-};
-
-export default connect<MappingUiProps, unknown, StoreType, unknown>(
-  [
-    'stepState',
-    'genericData',
-    'stepMapping',
-    'stepDataMapping',
-    'activityOutputData',
-    'dynamicFieldData',
-    'stepDataMapping',
-    'parentChildMapping',
-    'userConfig',
-    'conditionalFieldMapping',
-  ],
-  actionFunctions,
-)(MappingUI);