@integry/sdk 4.7.39 → 4.7.41

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

@@ -1,515 +0,0 @@
-/* eslint-disable no-nested-ternary */
-import { html } from 'htm/preact';
-import { connect } from 'unistore/preact';
-import { useContext, useEffect, useRef, useState } from 'preact/hooks';
-import { ActivityCustomField, 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 { Tag } from '@/components/Tag';
-import { Select } from '@/components/BasicSelect';
-
-import styles from './styles.module.scss';
-
-export type MappingUiProps = {
-  stepId: number;
-  templateFields: TemplateField[];
-  showStepValidation?: boolean;
-} & StoreType;
-
-interface DynamicDataItem {
-  fieldId: number;
-  id: string | null;
-  title: string | null;
-  type: string;
-  isDynamic?: boolean;
-  isVisible: boolean;
-}
-
-interface FieldMappingEndpointData {
-  [key: string]: DynamicDataItem[];
-}
-
-const NewMappingUI = (props: MappingUiProps) => {
-  const [loading, setLoading] = useState<boolean>(true);
-  const [fieldsLoading, setFieldsLoading] = useState<boolean>(true);
-
-  const [fieldsRef, setFieldsRef] = useState<number[]>([]);
-  const [dynamicItems, setDynamicItems] = useState<DynamicDataItem[]>([]);
-  const [dynamicListId, setDynamicListId] = useState('');
-  const [
-    savedMappingField,
-    setSavedMappingField,
-  ] = useState<TemplateField | null>(null);
-
-  const [error, setError] = useState('');
-  const [standardFields, setStandardFields] = useState<
-    {
-      fieldId: number;
-      id: string | null;
-      title: string | null;
-      type: string;
-      isDynamic: boolean;
-      isVisible: boolean;
-    }[]
-  >([]);
-
-  const [
-    fieldMappingData,
-    setFieldMappingData,
-  ] = useState<FieldMappingEndpointData>({});
-
-  const [fieldListData, setFieldListData] = useState<ActivityCustomField[]>([]);
-
-  const context = useContext(AppContext);
-  const isReadOnly = context?.isReadOnly;
-
-  const dynamicFieldIdRef = useRef('');
-
-  // This takes care of updating the mapped fields count on the bottom
-  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.isDynamic && ele.value) {
-          const parsedValue = ele.value;
-          if (parsedValue) setFieldsRef((prev) => [...prev, index]);
-        } else if (ele.isDynamic && ele.objectValue && el.id) {
-          const parsedValues = ele.objectValue || {};
-          if (parsedValues[el.id]) {
-            setFieldsRef((prev) => [...prev, index]);
-          }
-        }
-      });
-    }
-  }, [dynamicItems]);
-
-  useEffect(() => {
-    if (fieldListData.length) {
-      setFieldsLoading(false);
-    }
-  }, [fieldListData]);
-
-  useEffect(() => {
-    const mappingField = props.templateFields.filter(
-      (el) => el.activity_field && el.activity_field.type === 'FIELD_MAPPING',
-    )[0];
-
-    if (mappingField) {
-      setSavedMappingField(mappingField);
-    }
-
-    if (
-      // fieldListData.length &&
-      fieldMappingData !== null &&
-      fieldMappingData !== undefined &&
-      Object.keys(fieldMappingData).length > 0
-    ) {
-      // both field list and mapping data has been fetched
-      setLoading(false);
-      const fieldMappingResponseKey = Object.keys(fieldMappingData)[0];
-      props.setStoreState({
-        mappingInfo: {
-          ...props.mappingInfo,
-          isNewMapping: true,
-          customFieldsKey: fieldMappingResponseKey,
-        },
-      });
-
-      if (
-        fieldMappingResponseKey &&
-        Array.isArray(fieldMappingData[fieldMappingResponseKey])
-      ) {
-        setDynamicItems([
-          ...standardFields,
-          ...fieldMappingData[fieldMappingResponseKey].map((el) => ({
-            ...el,
-            isDynamic: true,
-            isVisible: mappingField.is_visible,
-            fieldId: mappingField.id,
-          })),
-        ]);
-      } else {
-        setError(
-          `fieldMappingResponseKey '${fieldMappingResponseKey}' not found, custom fields are not in a nested array under a single key`,
-        );
-      }
-    }
-  }, [fieldMappingData]);
-
-  useEffect(() => {
-    // fetch the mapping field
-    const mappingField = props.templateFields.filter(
-      (el) => el.activity_field && el.activity_field.type === 'FIELD_MAPPING',
-    )[0];
-
-    if (mappingField) {
-      // set our dynamic list ID
-      setDynamicListId(`${mappingField.id}`);
-    } else {
-      return;
-    }
-
-    // get a list of standard (TEXT) fields that will be part of the mapping
-    const standardFieldsToRender = props.templateFields
-      .filter(
-        (el) =>
-          el.activity_field &&
-          el.activity_field.type === 'TEXTFIELD' &&
-          el.is_visible && // only show visible standard fields
-          el.added_in_mapping,
-      )
-      .map((el) => ({
-        fieldId: el.id,
-        id: el.activity_field && el.activity_field.machine_name,
-        title: el.activity_field && el.activity_field.title,
-        type: 'text',
-        isDynamic: false,
-        isVisible: el.is_visible,
-      }));
-
-    setStandardFields(standardFieldsToRender);
-
-    // grab activity output data since that is used in both cases
-    if (!fieldListData.length) {
-      if (
-        mappingField.field_mapping_source &&
-        props.fieldListMapping[mappingField.field_mapping_source]
-      ) {
-        setLoading(true);
-        // eslint-disable-next-line no-use-before-define
-        fetchFieldsListData(mappingField);
-      } else {
-        console.error(
-          `Field mapping source not found, expected: ${mappingField.field_mapping_source}`,
-        );
-      }
-    }
-
-    // if dynamic field exists, fetch the fields and show those
-    if (mappingField && mappingField.activity_field) {
-      const originalMappingField =
-        props.parentChildMapping[props.stepId][
-          mappingField.activity_field.machine_name
-        ];
-
-      let valuesMapField = '';
-      if (originalMappingField) {
-        const valuesMap = originalMappingField.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) {
-        setLoading(true);
-
-        // eslint-disable-next-line no-use-before-define
-        fetchAndSaveFieldMappingData(mappingField)
-          ?.then(() => {
-            setFieldsRef([]);
-            setLoading(false);
-            dynamicFieldIdRef.current = valuesMapField;
-          })
-          .catch((err) => console.error(err));
-      }
-    }
-  }, [props.stepDataMapping[props.stepId]]);
-
-  const getStepVisibleFieldsData = (
-    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 fetchFieldsListData = (field: TemplateField) => {
-    const { stepMapping, fieldListMapping } = props;
-
-    const fieldListActivityField =
-      fieldListMapping[field.field_mapping_source || ''];
-
-    const fieldsListStepObject =
-      stepMapping && stepMapping[fieldListActivityField.stepId];
-
-    if (fieldListActivityField) {
-      const payload = {
-        authorizationId: Number(fieldsListStepObject.selectedAuthId),
-        activityFieldId: Number(fieldListActivityField.activity_field?.id),
-        endpointData:
-          getStepVisibleFieldsData(fieldListActivityField.stepId) || {},
-      };
-      return context?.apiHandler
-        .getCustomFields(payload)
-        .then((data) => {
-          if (data)
-            setFieldListData(
-              data.map((el) => ({
-                ...el,
-                // sample_data: JSON.stringify(['1', '2']), // test sample data
-              })),
-            );
-        })
-        .catch((err) => {
-          console.error(err);
-          setFieldsLoading(false);
-        });
-    }
-    return null;
-  };
-
-  const fetchAndSaveFieldMappingData = (templateField: TemplateField) => {
-    const { stepId, stepMapping } = props;
-    const dynamicEndpoint = `${templateField.activity_field?.dynamic_field_src}`;
-    return context?.apiHandler
-      .callDynamicDataEndpoint<FieldMappingEndpointData>(
-        new URL(dynamicEndpoint),
-        {
-          authorization_id: `${stepMapping[stepId].selectedAuthId}`,
-          ...getStepVisibleFieldsData(stepId),
-        },
-      )
-      .then((data) => {
-        if (data) setFieldMappingData(data);
-        return data;
-      });
-  };
-
-  const onMappingValueSelected = (
-    index: number,
-    item: DynamicDataItem,
-    isRequired: boolean,
-    rowIndex: number,
-  ) => {
-    const fieldListObject = fieldListData[index];
-    const arrayIndex = fieldsRef.findIndex((el) => el === rowIndex);
-    if (index < 0) {
-      // unset
-      setFieldsRef((prev) => prev.filter((el) => el !== rowIndex));
-      if (!item.isDynamic) {
-        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 (fieldListObject) {
-      // value is set
-      if (arrayIndex < 0) {
-        //
-        setFieldsRef((prev) => [...prev, rowIndex]);
-      }
-      if (!item.isDynamic) {
-        props.setStepFieldData({
-          stepId: `${props.stepId}`,
-          fieldId: `${item.fieldId}`,
-          value: fieldListObject.tag,
-          isRequired,
-        });
-      } else if (dynamicListId) {
-        props.setStepMappingData({
-          stepId: props.stepId,
-          fieldId: Number(dynamicListId),
-          id: `${item.id}`,
-          value: fieldListObject.tag,
-        });
-      }
-    }
-    props.verifyStepValidity(props.stepId);
-  };
-
-  return html`
-    <div>
-      <${Label}
-        title=${savedMappingField?.title ||
-        savedMappingField?.activity_field?.title}
-        description=${savedMappingField?.description ||
-        savedMappingField?.activity_field?.description}
-      />
-      <div>
-        ${loading
-          ? html`<div class=${styles.loader}><${LargeLoader} /></div>`
-          : error
-          ? html` <div>${error}</div> `
-          : html`
-              <div class=${styles.mappingWrap}>
-                <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>
-                  <div class=${styles.sampleData}>Sample Data</div>
-                  <div class=${styles.mappingHeaderItem}>
-                    <img src=${props.genericData.brandingApp?.icon_url} />
-                    <div>${props.genericData.brandingApp?.name} Field</div>
-                  </div>
-                  ${isReadOnly && 
-                  html`<div class=${styles.tagColumn}>
-                  </div>`}
-                </div>
-                ${dynamicItems.map((el, itemIndex) => {
-                  // console.log(itemIndex);
-                  // console.log({ el });
-
-                  if (!el.isVisible) return html``;
-
-                  const slug = el.id || '';
-                  const ele = props.stepDataMapping[props.stepId][el.fieldId];
-                  // console.log({ ele });
-                  let selectVal = '';
-                  let parsedVal: string | Record<string, string | number>;
-                  if (el.isDynamic) {
-                    parsedVal = ele.objectValue as Record<
-                      string,
-                      string | number
-                    >;
-                  } else {
-                    parsedVal = `${ele.value}`;
-                  }
-
-                  // console.log({ parsedVal });
-                  if (
-                    el.id &&
-                    el.isDynamic &&
-                    ele.objectValue &&
-                    (parsedVal as Record<string, string | number>)[slug]
-                  ) {
-                    selectVal = `${
-                      (parsedVal as Record<string, string | number>)[slug]
-                    }`;
-                  } else if (!el.isDynamic) {
-                    selectVal = parsedVal as string;
-                  }
-
-                  let sampleData = '';
-                  const rawData =
-                    fieldListData.filter((field) => field.tag === selectVal)[0]
-                      ?.sample_data ?? '';
-                  try {
-                    sampleData = JSON.parse(rawData);
-                  } catch (err) {
-                    sampleData = rawData;
-                  }
-
-                  return html`
-                    <div class=${styles.mappingRow}>
-                      <div class=${styles.title}>
-                        ${el.title}${ele?.isRequired && html`<span>*</span>`}
-                      </div>
-                      <div class=${styles.sampleData}>
-                        ${sampleData
-                          ? Array.isArray(sampleData)
-                            ? sampleData.map(
-                                (sample: string | Record<string, string>) =>
-                                  sample ? html`<pre>${sample}</pre>` : html``,
-                              )
-                            : html`<pre>${sampleData}</pre>`
-                          : html``}
-                      </div>
-                      <div class=${styles.selectBox}>
-                        <${Select}
-                          ariaLabel="Map a value"
-                          placeholder="Please map a value"
-                          options=${fieldListData.map((item) => ({
-                            key: item.tag,
-                            label: item.text,
-                          }))}
-                          value=${selectVal}
-                          isRequired=${ele?.isRequired}
-                          showStepValidation=${props.showStepValidation}
-                          showUnselectedValue=${true}
-                          unselectedText="Skip"
-                          loading=${fieldsLoading}
-                          onChange=${(index: number) =>
-                            onMappingValueSelected(
-                              index,
-                              el,
-                              ele?.isRequired ?? false,
-                              itemIndex,
-                            )}
-                          isReadOnly=${isReadOnly}
-                        ><//>
-                      </div>
-                      ${isReadOnly && 
-                      html`<div class=${styles.tagColumn}>
-                      ${ele.isChanged && 
-                      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',
-    'fieldListMapping',
-    'stepDataMapping',
-    'parentChildMapping',
-  ],
-  actionFunctions,
-)(NewMappingUI);

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

@@ -1,113 +0,0 @@
-.mappingWrap {
-  .mappingInfo {
-    margin-top: 20px;
-    display: flex;
-    justify-content: flex-end;
-    font-size: 10px;
-    line-height: 12px;
-    display: flex;
-    align-items: center;
-    letter-spacing: 0.1px;
-    color: #999999;
-    & > :not(:last-child) {
-      margin-right: 20px;
-    }
-    & > div {
-      margin-right: 7px;
-      & > span:first-child {
-        color: #333333;
-        margin: 0;
-        margin-right: 3px;
-      }
-    }
-  }
-  & .mappingRow:first-child {
-    padding-top: 0;
-    padding-bottom: 5px;
-    height: 60px;
-    font-style: normal;
-    font-weight: normal;
-    font-size: 14px;
-    letter-spacing: 0.1px;
-    color: #333333;
-  }
-}
-
-.loader {
-  margin-top: 35px;
-  margin-bottom: -60px;
-  display: flex;
-  justify-content: center;
-}
-
-.mappingRow {
-  display: flex;
-  box-sizing: content-box;
-  align-items: center;
-  justify-content: space-between;
-  background-color: #fff;
-  padding-left: 10px;
-  padding-right: 10px;
-  height: 90px;
-  .title {
-    width: 40%;
-    padding-right: 4px;
-    font-weight: 500;
-    font-size: 14px;
-    color: #333333;
-    padding-right: 10px;
-    line-height: 18px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    span {
-      color: red;
-      font-size: 16px;
-      margin-left: 2px;
-    }
-  }
-  .sampleData {
-    display: flex;
-    flex-direction: column;
-    width: 40%;
-    overflow: hidden;
-    word-break: break-word;
-    padding-right: 20px;
-  }
-  .selectBox {
-    width: 40%;
-    font-size: 14px;
-  }
-  &:nth-child(even) {
-    background: #f8f8f880;
-  }
-  &:first-child {
-    color: #333333;
-  }
-  .mappingHeaderItem {
-    display: flex;
-    align-items: center;
-    width: 40%;
-    &:first-child {
-      padding-right: 4px;
-    }
-    img {
-      height: 25px;
-      width: 25px;
-      padding: 2px;
-      object-fit: contain;
-      border-radius: 9999px;
-      margin-right: 5px;
-    }
-  }
-  pre {
-    margin: 0;
-    padding: 0;
-    color: #7d7d7d;
-    height: 20px;
-    font-size: 14px;
-    line-height: 20px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-}

package/src/features/common/RequestAppWidget/RequestAppModal/index.ts

@@ -1,67 +0,0 @@
-import { html } from 'htm/preact';
-import { connect } from 'unistore/preact';
-import { useState } from 'preact/hooks';
-import { actionFunctions } from '@/store';
-import { StoreType } from '@/types/store';
-import { Modal } from '@/components/Modal';
-import { SuccessPopUp } from '@/components/PopUp/SuccessPopUp';
-import RequestAppForm from '../request-app-form';
-import styles from './styles.module.scss';
-
-type RequestAppModalProps = StoreType
-
-const RequestAppModal = (props: RequestAppModalProps) => {
-    const [showSuccessPopUp, setShowSuccessPopUp] = useState(false);
-
-    const handleCloseRequestAppModal = () => {
-        props.setStoreState({
-            showRequestAppModal: false,
-            requestAppFormData: {},
-        });
-    }
-
-    const handleSuccess = () => {
-        props.setStoreState({
-            showRequestAppModal: false,
-            requestAppFormData: {},
-        });
-        setShowSuccessPopUp(true);
-    }
-
-    const handleClosePopUp = () => {
-        setShowSuccessPopUp(false);
-    }
-
-    return html`
-        <${Modal}
-            isOpen=${props.showRequestAppModal}
-            onClose=${handleCloseRequestAppModal}
-            className="request-app-modal"
-        >
-            <div class="${styles.modalSetup} ${'integry-container__request-app-modal'}">
-            <div class=${styles.modalHeader}>
-                <div class="${styles.modalTitle}">${'Tell us more'}</div>
-            </div>
-            <div class="${styles.modalContentWrap}">
-                <${RequestAppForm} onSuccess=${handleSuccess} />
-            </div>
-            </div>
-        <//>
-        ${showSuccessPopUp && html`
-            <${SuccessPopUp}
-            isOpen=${showSuccessPopUp}
-            title="Request Sent"
-            description="We will work hard to make this app available in our marketplace. Thanks for your suggestion!"
-            buttonLabel="OK"
-            handleButtonClick=${handleClosePopUp}
-            />
-            `
-        }`;
-};
-
-export default connect<RequestAppModalProps, unknown, StoreType, unknown>(
-  [
-    'showRequestAppModal',
-  ],
-  actionFunctions,
-)(RequestAppModal);