@integry/sdk 4.5.2 → 4.5.4

package/src/features/common/RequestAppWidget/RequestAppModal/styles.module.scss

@@ -0,0 +1,23 @@
+.modalSetup {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column;
+    position: relative;
+    justify-content: center;
+    height: 100%;
+    margin: 40px;
+    margin-bottom: 10px;
+    .modalHeader {
+      .modalTitle {
+        font-family: inherit;
+        font-style: normal;
+        font-weight: 500;
+        font-size: 24px;
+        line-height: 29px;
+        color: #333333;
+      }
+    }
+    .modalContentWrap {
+      margin-top: 32px;
+    }
+  }

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

@@ -0,0 +1,48 @@
+import { html } from 'htm/preact';
+import { connect } from 'unistore/preact';
+import { actionFunctions } from '@/store';
+import { StoreType } from '@/types/store';
+import { Button } from '@/components/Button';
+import styles from './styles.module.scss';
+
+
+interface RequestAppWidgetProps extends StoreType {
+    className?: string; 
+    onClickTellButton?: () => void;
+    buttonWidth?: string;
+    buttonHeight?: string;
+}
+
+const RequestAppWidget = (props: RequestAppWidgetProps) => {
+    const { className, onClickTellButton, buttonWidth='113px', buttonHeight='36px' } = props;
+
+    const handleClickTellButton = () => {
+        props.setStoreState({
+            showRequestAppModal: true,
+        });
+        if (onClickTellButton) {
+            onClickTellButton();
+        }
+    };
+
+  return html`${props.genericData.marketplaceDetail && props.genericData.marketplaceDetail.accept_app_requests && html`
+    <div class="${styles.requestAppWidget} ${styles[className || '']} integry-container__request-app-widget">
+      <div class="${styles.buttonWrap}">
+        <div class="${styles.left}">
+            Can't find what you're looking for?
+        </div>
+        <div class="${styles.right}">
+            <${Button} label="Tell us more" width=${buttonWidth} height=${buttonHeight}  className="integry-secondary-btn" onClick=${handleClickTellButton} />
+        </div>
+      </div>
+    </div>`
+  }`;
+};
+
+export default connect<RequestAppWidgetProps, unknown, StoreType, unknown>(
+  [
+    'showRequestAppModal',
+    'genericData'
+  ],
+  actionFunctions,
+)(RequestAppWidget);

package/src/features/common/RequestAppWidget/request-app-form.ts

@@ -0,0 +1,89 @@
+import { html } from 'htm/preact';
+import { useContext, useEffect, useState } from 'preact/hooks';
+import AppContext from '@/contexts/AppContext';
+import { connect } from 'unistore/preact';
+import { actionFunctions } from '@/store';
+import { StoreType } from '@/types/store';
+import { Button } from '@/components/Button';
+import { Input } from '@/components/Input';
+import { TextArea } from '@/components/TextArea';
+import styles from './styles.module.scss';
+
+interface RequestAppFormProps extends StoreType {
+  onSuccess?: () => void;
+}
+
+const RequestAppForm = (props: RequestAppFormProps) => {
+    const { onSuccess } = props;
+    const context = useContext(AppContext);
+    const [appField, setAppField] = useState('');
+    const [descriptionField, setDescriptionField] = useState('');
+    const [isSumbiting, setIsSubmiting] = useState(false);
+    const isValid = appField && descriptionField;
+
+  useEffect(() => {
+    if (props.requestAppFormData && props.requestAppFormData?.appField) {
+      setAppField(props.requestAppFormData?.appField);
+    }
+    if (props.requestAppFormData && props.requestAppFormData?.descriptionField) {
+      setDescriptionField(props.requestAppFormData?.descriptionField);
+    }
+  }, [props.requestAppFormData]);
+  
+    const sendAppRequest = () => {
+      setIsSubmiting(true);
+      const formData = { app: appField, description: descriptionField }
+      if (props.genericData.marketplaceId) {
+        context?.apiHandler
+          .sendRequestForNewApp(props.genericData.marketplaceId, formData)
+          .then((res) => {
+            if (res) {
+              if (onSuccess) {
+                onSuccess();
+              }
+            }
+            setIsSubmiting(false);
+          });
+      }
+    };
+
+  return html`
+    <div class="${styles.requestAppForm} integry-container__request-app-form">
+      <div class="${styles.fieldWrap}">
+        <${Input} value=${appField} 
+         onChange=${(newValue: string) => {
+            setAppField(newValue);
+        }}
+        className="request-app-form-field" 
+        title="What app would you like to integrate?" 
+        placeholder="E.g. gmail, google drive" />
+      </div>
+      <div class="${styles.fieldWrap}">
+        <${TextArea} value=${descriptionField} 
+        onChange=${(newValue: string) => {
+            setDescriptionField(newValue);
+        }} 
+        className="request-app-form-field" 
+        title="What would you like to do with this app?" 
+        placeholder="E.g. Sync your leads, send emails to new sign up, etc." />
+      </div>
+      <div class="${styles.buttonWrap}">
+        <${Button} label="Submit"
+         disabled=${!isValid} 
+         className="integry-primary-btn"
+         width="96px"
+         height="44px"
+         isLoading=${isSumbiting}
+         onClick=${sendAppRequest} />
+      </div>
+    </div>
+  `;
+};
+
+export default connect<RequestAppFormProps, unknown, StoreType, unknown>(
+  [
+    'genericData',
+    'requestAppFormData'
+  ],
+  actionFunctions,
+)(RequestAppForm);

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

@@ -0,0 +1,43 @@
+.requestAppWidget {
+    .buttonWrap {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        .left {
+            font-style: normal;
+            font-weight: 500;
+            font-size: 14px;
+            line-height: 17px;
+            font-family: inherit;
+            color: #7E7A8F;
+            margin-right: 11px;
+        }
+        .right {
+
+        }
+    }
+    &.marketplace-apps {
+        margin-right: 2px;
+    }
+    &.search-pop-up {
+        .buttonWrap {
+            justify-content: flex-start;
+            .left {
+                color: #333333;
+                margin-right: 8px;
+            }
+        }
+    }
+}
+.requestAppForm {
+    display: flex;
+    flex-direction: column;
+    .fieldWrap {
+        margin-bottom: 28px;
+    }
+    .buttonWrap {
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+    }
+}

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

@@ -0,0 +1,272 @@
+import { html } from 'htm/preact';
+import { connect } from 'unistore/preact';
+import { useContext, useEffect, useState } from 'preact/hooks';
+import { TemplateField, NestedObject } from '@/interfaces';
+import AppContext from '@/contexts/AppContext';
+import { StoreType } from '@/types/store';
+import { IntegryAPI } from '@/modules/api';
+// import { Input } from '@/components/Input';
+import { LargeLoader } from '@/components/LargeLoader';
+import { Loader } from '@/components/Loader';
+import { MultipurposeField } from '@/components/MultipurposeField';
+import ConfigureFieldWrapper from '@/components/ConfigureFieldWrapper';
+import { ListBox } from '@/components/MultipurposeField/Dropdown';
+import { actionFunctions } from '@/store';
+import styles from './styles.module.scss';
+
+export type SectionFieldsProps = {
+  stepId: number;
+  sectionField: 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;
+  apiHandler: IntegryAPI;
+  description?: string;
+  showStepValidation?: boolean;
+  selectedStepData?: any;
+  onFieldChange: (data: any) => void;
+  fieldDynamicData: (field: any) => any;
+  selectedStepElementData?: any;
+  accountConnected?: boolean;
+  getFieldLabelTags: (field: any, isNested: boolean) => string[];
+} & StoreType;
+
+interface SectionDataItem {
+  id: string;
+  title: string;
+  activity_field?: any;
+}
+
+const SectionFields = (props: SectionFieldsProps) => {
+  const {
+    stepId,
+    sectionField,
+    endpointData,
+    genericData,
+    activityOutputData,
+    activityOutputDataRaw,
+    appName,
+    sourceFlowData = {},
+    sourceFlowIntegrataionInvocationUrl = '',
+    selectedAuthId = '',
+    isMappable = true,
+    isEditable = true,
+    allowTagsInText = true,
+    placeHolder = '',
+    refreshRootStepData,
+    description = '',
+    showStepValidation = false,
+    selectedStepData,
+    onFieldChange,
+    fieldDynamicData,
+    selectedStepElementData,
+    accountConnected,
+    getFieldLabelTags,
+    apiHandler,
+  } = props;
+  const [sectionItems, setSectionItems] = useState<any[]>([]);
+  const [loading, setLoading] = useState<boolean>(false);
+  const [
+    isErrorOnLoadingCustomFields,
+    setIsErrorOnLoadingCustomFields,
+  ] = useState<boolean>(false);
+
+  const context = useContext(AppContext);
+  const isReadOnly = context?.isReadOnly;
+
+  const fetchSectionFields = async () => {
+    setSectionItems(sectionField.template_fields || []);
+  };
+
+  useEffect(() => {
+    fetchSectionFields();
+  }, [sectionField, 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}}`);
+        }
+      });
+    });
+
+    props.setStepMappingData({
+      stepId,
+      fieldId: sectionField.id,
+      id: machineName,
+      value: valSubstituded,
+    });
+  };
+
+  return html`
+    <div>
+      ${loading
+        ? html`<div className=${styles.loadingText}>
+            <div class=${styles.actionFormLoader}>
+              <${Loader} />
+            </div>
+            Loading custom fields...
+          </div> `
+        : html` ${sectionItems.map((el) => {
+            const ele = props.stepDataMapping[stepId][sectionField.id];
+            let fieldVal = '';
+            const parsedVal = ele.objectValue as Record<
+              string,
+              string | number
+            >;
+            if (parsedVal && parsedVal[el.id]) {
+              fieldVal = `${parsedVal[el.id]}`;
+            }
+            return el.activity_field.type === 'SELECT'
+              ? html`<div key=${
+                  el.id
+                } class=${`${styles.actionStepFieldWrap} integry-action-field-wrap`}>
+                <${ConfigureFieldWrapper}
+                field=${el}
+                stepId=${stepId}
+                templateId=${props.genericData?.templateId}
+                >
+                <${ListBox}
+                  key=${el.activity_field?.id}
+                  fieldId=${el.activity_field?.id || el.id}
+                  apiHandler=${apiHandler}
+                  title=${el.title || el.activity_field?.title}
+                  description=${description}
+                  showStepValidation=${showStepValidation}
+                  placeholder=${placeHolder}
+                  isRequired=${el.is_required}
+                  isHidden=${el.is_hidden}
+                  isSearchable=${
+                    true
+                    // el.activity_field.is_searchable TODO: enable this when Serach is added for mulipurposes field
+                  }
+                  value=${
+                    (selectedStepData &&
+                      selectedStepData[el.id] &&
+                      selectedStepData[el.id].value) ||
+                    el.default_value ||
+                    ''
+                  }
+                  onChange=${(val: string) => {
+                    onFieldChange({
+                      stepId,
+                      fieldId: el.id,
+                      value: val,
+                      isRequired: el.is_required,
+                    });
+                  }}
+                  endpointUrl=${
+                    el.source_flow_integration_invocation_url ||
+                    el.activity_field?.data_src
+                  }
+                  isDynamic=${el.activity_field?.is_dynamic}
+                  endpointData=${JSON.stringify({
+                    authorization_id:
+                      props.stepMapping &&
+                      props.stepMapping[stepId]?.selectedAuthId,
+                    ...fieldDynamicData(el),
+                  })}
+                  isReadOnly=${isReadOnly}
+                  isChanged=${
+                    selectedStepElementData && selectedStepElementData.isChanged
+                  }
+                  activityOutputData=${activityOutputData}
+                  }
+                  type=${el.activity_field?.type}
+                  selectedAuthId=${`${
+                    props.stepMapping[stepId]?.selectedAuthId || ''
+                  }`}
+                  disabled=${!props.stepMapping[stepId]?.isAuthVerified}
+                  sourceFlowData=${sourceFlowData}
+                  sourceFlowIntegrataionInvocationUrl=${
+                    el.source_flow_integration_invocation_url
+                  }
+                  skipOptionFetch=${props.userConfig?.viewAsIU} 
+                  isMappable=${el.is_mappable}
+                  isEditable=${el.is_editable}
+                  allowTagsInText=${el.allow_tags_in_text}
+                  accountConnected=${accountConnected}
+                  labelTags=${getFieldLabelTags(el, false)}
+                  appName=${appName}
+                  isMultiSelect=${el.is_multiselect}
+                ><//>
+                </${ConfigureFieldWrapper}>
+              </div>`
+              : html`
+                  <div class=${styles.sectionFieldWrapper}>
+                    <${MultipurposeField}
+                      title=${el.title || el.activity_field.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 || ''}
+                    />
+                  </div>
+                `;
+          })}`}
+      ${!isErrorOnLoadingCustomFields
+        ? ''
+        : html`<span className=${styles.noOptions}
+            >Could not load custom fields.
+            ${false
+              ? html``
+              : html` <a
+                  className=${styles.optionsRefresh}
+                  href="#"
+                  onclick=${() => {
+                    setLoading(true);
+                    setIsErrorOnLoadingCustomFields(false);
+                    fetchSectionFields();
+                  }}
+                  >${' '}Try again?</a
+                >`}
+          </span>`}
+    </div>
+  `;
+};
+
+export default connect<SectionFieldsProps, unknown, StoreType, unknown>(
+  [
+    'stepState',
+    'genericData',
+    'embedConfig',
+    'stepMapping',
+    'dynamicFieldData',
+    'stepDataMapping',
+    'parentChildMapping',
+  ],
+  actionFunctions,
+)(SectionFields);

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

@@ -0,0 +1,67 @@
+.actionFormWrap {
+  width: 100%;
+  .noStepFields {
+    font-family: 'Inter';
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 24px;
+    color: #999999;
+  }
+}
+
+.actionStepFieldWrap {
+  margin-bottom: 16px;
+}
+
+.unsupported {
+  font-size: 12px;
+  color: #ca8c1b;
+}
+.actionFormLoader {
+  width: 15px;
+  margin: 0 auto;
+}
+
+.noOptions {
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 15px;
+  margin-bottom: 12px;
+  display: block;
+  color: #999;
+  span.noOptionsRetry {
+    [class^='styles-module_loader_'] {
+      position: relative;
+      top: 5px;
+    }
+  }
+}
+.loadingText {
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 15px;
+  margin-bottom: 12px;
+  color: #999;
+  display: flex;
+  .actionFormLoader {
+    margin: 0 7px 0 0;
+  }
+}
+a.optionsRefreshProminent {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 8px;
+  font-size: 12px;
+  line-height: 15px;
+  color: #4250f0;
+  cursor: pointer;
+  text-decoration: none;
+}
+a.optionsRefresh {
+  font-size: 12px;
+  line-height: 15px;
+  color: #4250f0;
+  cursor: pointer;
+  text-decoration: none;
+}