@integry/sdk 4.5.2 → 4.5.4

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

@@ -0,0 +1,649 @@
+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);