@integry/sdk 4.5.2 → 4.5.4

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

@@ -0,0 +1,515 @@
+/* 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

@@ -0,0 +1,113 @@
+.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

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