@integry/sdk 4.5.9 → 4.5.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@integry/sdk",
-  "version": "4.5.9",
+  "version": "4.5.11",
   "description": "Integry SDK",
   "main": "dist/umd/index.umd.js",
   "module": "dist/esm/index.csm.js",

package/src/components/MultipurposeField/TagMenu/index.ts

@@ -43,6 +43,7 @@ interface FieldMenuProps {
   isMultiSelect?: boolean;
   loadingOptions?: boolean;
   nextPage?: string;
+  tagsComponent?: any;
 }
 
 const FieldDropdown = (props: FieldMenuProps) => {
@@ -65,6 +66,7 @@ const FieldDropdown = (props: FieldMenuProps) => {
     isMultiSelect = false,
     loadingOptions = false,
     nextPage = '',
+    tagsComponent = null,
   } = props;
 
   // Set active tab in state
@@ -327,55 +329,63 @@ const FieldDropdown = (props: FieldMenuProps) => {
                 </div>`}
           </div>`
         : html` <div className="${styles.mappedFieldMenu}">
-            ${Object.keys(!isEditable ? searchJSON(tags, searchValue) : tags)
-              .length > 0
-              ? Object.keys(
+            ${tagsComponent
+              ? html`<${tagsComponent} tags=${tags} onSelect=${onTagClick}>
+                <//>`
+              : html`${Object.keys(
                   !isEditable ? searchJSON(tags, searchValue) : tags,
-                ).map(
-                  (objKey, index, arr) => html`
-                    <${TagOptions}
-                      objectKey="${objKey}"
-                      keyValue="${objKey}"
-                      objectData="${!isEditable
-                        ? searchJSON(tags, searchValue)[objKey]
-                        : tags[objKey]}"
-                      onSelect=${onTagClick}
-                      isRoot="${true}"
-                    />
-                    ${index !== arr.length - 1
-                      ? ''
-                      : html`<span>
-                          ${isLoadingRootStepData
-                            ? html`<${ThreeDotLoader} color="#999" />`
-                            : html` <a
-                                className=${styles.optionsRefreshProminent}
-                                href="#"
-                                onclick=${handleRefresh}
-                                >Reload fields?</a
-                              >`}
-                        </span>`}
-                  `,
-                )
-              : html`<div className=${styles.noOptions}>
-                  ${!isEditable && searchValue !== ''
-                    ? 'Your search did not match any fields'
-                    : html`
-                        <span className=${styles.noOptionsRetry}>
-                          ${isLoadingRootStepData
-                            ? html`<${ThreeDotLoader} color="#999" />`
-                            : html`${isErrorOnLoadingRootStepData
-                                  ? 'Could not load fields.'
-                                  : 'No fields found.'}
-                                <a
-                                  className=${styles.optionsRefresh}
-                                  href="#"
-                                  onclick=${handleRefresh}
-                                >
-                                  ${' '}Try again?</a
-                                >`}
-                        </span>
-                      `}
-                </div>`}
+                ).length > 0
+                  ? Object.keys(
+                      !isEditable ? searchJSON(tags, searchValue) : tags,
+                    ).map(
+                      (objKey, index, arr) => html`
+                        <${TagOptions}
+                          objectKey="${objKey}"
+                          keyValue="${objKey}"
+                          objectData="${!isEditable
+                            ? searchJSON(tags, searchValue)[objKey]
+                            : tags[objKey]}"
+                          onSelect=${onTagClick}
+                          isRoot="${true}"
+                        />
+                        ${index !== arr.length - 1
+                          ? ''
+                          : html`<span>
+                              ${isLoadingRootStepData
+                                ? html`<${ThreeDotLoader} color="#999" />`
+                                : html` <a
+                                    className=${styles.optionsRefreshProminent}
+                                    href="#"
+                                    onclick=${handleRefresh}
+                                    >Reload fields?</a
+                                  >`}
+                            </span>`}
+                      `,
+                    )
+                  : html`<div className=${styles.noOptions}>
+                      ${!isEditable && searchValue !== ''
+                        ? 'Your search did not match any fields'
+                        : html`
+                            <span className=${styles.noOptionsRetry}>
+                              ${isLoadingRootStepData
+                                ? html`<${ThreeDotLoader} color="#999" />`
+                                : html`${isErrorOnLoadingRootStepData
+                                      ? 'Could not load fields.'
+                                      : 'No fields found.'}
+                                    <a
+                                      className=${styles.optionsRefresh}
+                                      href="#"
+                                      onclick=${(e: any) => {
+                                        e.preventDefault();
+                                        e.stopPropagation();
+                                        handleRefresh();
+                                      }}
+                                    >
+                                      ${' '}Try again?</a
+                                    >`}
+                            </span>
+                          `}
+                    </div>`}`}
           </div>`}
     </div>
   </div>`;

package/src/components/MultipurposeField/index.tsx

@@ -52,6 +52,7 @@ interface MultipurposeFieldProps {
   buttonText?: string;
   onButtonClickScript?: string;
   buttonScriptRequiresAuthToken?: boolean;
+  tagsComponent?: any;
 }
 
 const MultipurposeField = (props: MultipurposeFieldProps) => {
@@ -84,6 +85,7 @@ const MultipurposeField = (props: MultipurposeFieldProps) => {
     buttonText = 'Add',
     onButtonClickScript = '',
     buttonScriptRequiresAuthToken = false,
+    tagsComponent = null,
   } = props;
   const [showTagMenu, setShowTagMenu] = useState(false);
   const [currentValue, setCurrentValue] = useState(value);
@@ -361,6 +363,7 @@ const MultipurposeField = (props: MultipurposeFieldProps) => {
   };
 
   const onTagClick = (tag: string) => {
+    console.log('tag', tag);
     if (tagify) {
       if (!allowTagsInText) {
         tagify.removeAllTags();
@@ -677,6 +680,7 @@ const MultipurposeField = (props: MultipurposeFieldProps) => {
               ? true
               : false}
             refreshRootStepData=${refreshRootStepData}
+            tagsComponent=${tagsComponent}
           />
         </div>`}
       </div>

package/src/components/TestComponent/index.ts

@@ -0,0 +1,71 @@
+import { html } from 'htm/preact';
+import cx from 'classnames';
+
+import { Hint } from '@/components/Tooltip';
+import { ThreeDotLoader } from '@/components/ThreeDotLoader';
+import { TagOptions } from '@/components/MultipurposeField/TagOptions';
+
+import styles from './styles.module.scss';
+
+export interface TestProps {
+  tags: any;
+  onSelect: (tag: any) => void;
+}
+
+/**
+ * Test component
+ *
+ */
+export const TestComponent = (props: TestProps) => {
+  const { tags, onSelect, ...restOfProps } = props;
+  const tagsLocal: any = {
+    FirstName: 'John',
+    LastName: 'Doe',
+    Gender: 'male',
+    Age: 20,
+    DateOfBirth: '1990-01-01',
+    Email: 'johndoe@example.com',
+    Phone: '555-555-1234',
+    Address: {
+      Street: '123 Main St',
+      City: 'New York',
+      State: 'NY',
+      PostalCode: '10001',
+      Country: 'USA',
+    },
+    PreferredContactMethod: 'email',
+    LastContacted: '2023-01-15',
+    Twitter: '@johndoe',
+    Website: 'https://www.example.com',
+    LinkedIn: 'https://www.linkedin.com/in/johndoe',
+    Bio: 'John Doe is a software engineer with over 10 years of experience.',
+    Relationship: 'professional',
+    Tags: ['tech', 'conference', 'networking'],
+    JobTitle: 'Software Engineer',
+    Company: 'Example Corp.',
+    DateCreated: '2023-04-14T12:00:00Z',
+    DateUpdated: '2023-04-14T12:00:00Z',
+    NextMeeting: {
+      Date: '2023-05-01',
+      Topic: 'Project Planning',
+      Location: 'New York',
+    },
+    Notes: 'Met at the 2022 Tech Conference in San Francisco.',
+  };
+
+  return html`
+    <div>
+      ${Object.keys(tagsLocal).map(
+        (objKey, index, arr) => html`
+          <${TagOptions}
+            objectKey="${objKey}"
+            keyValue="${objKey}"
+            objectData="${tagsLocal[objKey]}"
+            onSelect=${onSelect}
+            isRoot="${true}"
+          />
+        `,
+      )}
+    </div>
+  `;
+};

package/src/components/TestComponent/styles.module.scss

@@ -0,0 +1,152 @@
+.button {
+  outline: none;
+  cursor: pointer;
+  appearance: none;
+  font-size: 12px;
+  padding: 0px 15px;
+  height: 30px;
+  &.btnPrimary {
+    border: 1px solid #4250f0;
+    background: #4250f0;
+    border-radius: 4px;
+    font-size: 12px;
+    color: #ffffff;
+    &:not(.disabled):hover {
+      background: var(--theme-accent-blue-2, #3a46d5);
+      border: 1px solid var(--theme-accent-blue-2, #3a46d5);
+    }
+  }
+  &.btnSecondary {
+    border: 1px solid #4250f0;
+    background: transparent;
+    text-align: center;
+    font-size: 12px;
+    color: #4250f0;
+    border-radius: 4px;
+    &:not(.disabled):hover {
+      background: #4250f0;
+      color: white;
+    }
+  }
+  &.buttonLink {
+    border: none;
+    color: #4250f0;
+    font-weight: 500;
+    font-size: 12px;
+    background: transparent;
+    padding: 0;
+    margin: 0;
+    &:not(.disabled):hover {
+      color: #473a64;
+    }
+  }
+
+  &.tell-us-more-btn {
+    width: 113px;
+    height: 36px;
+    background: #ffffff;
+    border: 1px solid #4250f0;
+    // box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.08), inset 0px -1px 0px rgba(0, 0, 0, 0.2);
+    border-radius: 5px;
+    font-family: inherit;
+    font-style: normal;
+    font-weight: 500;
+    font-size: 14px;
+    line-height: 20px;
+    color: #4250f0;
+    &:not(.disabled):hover {
+      background: #ffffff;
+      color: #4250f0;
+    }
+    padding: 0px;
+  }
+
+  &.integry-primary-btn {
+    width: auto;
+    height: auto;
+    background: #4250f0;
+    border: 1px solid #4250f0;
+    box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.08),
+      inset 0px -1px 0px rgba(0, 0, 0, 0.2);
+    border-radius: 5px;
+    font-family: inherit;
+    font-style: normal;
+    font-weight: 500;
+    font-size: 14px;
+    line-height: 20px;
+    text-align: center;
+    color: #ffffff;
+    &:not(.disabled):hover {
+      background: #2c36ad;
+      color: #ffffff;
+    }
+    padding: 0px;
+  }
+
+  &.integry-btn-grey {
+    width: auto;
+    height: auto;
+    background: #f3f3f3;
+    border: 1px solid #f3f3f3;
+    box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.08),
+      inset 0px -1px 0px rgba(0, 0, 0, 0.2);
+    border-radius: 5px;
+    font-family: inherit;
+    font-style: normal;
+    font-weight: 500;
+    font-size: 14px;
+    line-height: 20px;
+    text-align: center;
+    color: #333333;
+    &:not(.disabled):hover {
+      background: #e6e6e6;
+      color: #333333;
+    }
+    padding: 0px;
+  }
+
+  &.integry-secondary-btn {
+    width: auto;
+    height: auto;
+    background: #ffffff;
+    border: 1px solid #4250f0;
+    // box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.08), inset 0px -1px 0px rgba(0, 0, 0, 0.2);
+    border-radius: 5px;
+    font-family: inherit;
+    font-style: normal;
+    font-weight: 500;
+    font-size: 14px;
+    line-height: 20px;
+    color: #4250f0;
+    &:not(.disabled):hover {
+      background: #4250f0;
+      color: #ffffff;
+    }
+    padding: 0px;
+  }
+
+  &.disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  &.flowWrapButton {
+    border-radius: 5px;
+    border: 1px solid var(--theme-accent-blue-1, #4250f0);
+    background: var(--theme-accent-blue-1, #4250f0);
+    color: #fff;
+    font-family: Inter;
+    font-size: 13px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+    padding: 4.5px 10px;
+    cursor: pointer;
+    height: auto;
+
+    &:hover {
+      background: var(--theme-accent-blue-2, #3a46d5) !important;
+      border: 1px solid var(--theme-accent-blue-2, #3a46d5) !important;
+    }
+  }
+}

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

@@ -47,14 +47,14 @@ interface ActionFormPropsType extends StoreType {
   isReadOnly?: boolean;
   accountConnected: boolean;
   selectedAuthId: string;
-  tagsTree: any;
   onFieldChangeCallback?: (fieldId: string, value: string) => void;
+  tagsComponent?: any;
+  tagsTree?: any;
 }
 
 interface ActionFormStateType {
   loading: boolean;
   dynamicFieldDataState: any;
-  tagsTree: any;
   parentChildMapping: any;
   dynamicFieldsData: any;
   parentFieldChanged: boolean;
@@ -81,10 +81,6 @@ class ActionForm extends Component<ActionFormPropsType, ActionFormStateType> {
     this.state = {
       loading: false,
       dynamicFieldDataState: {},
-      tagsTree:
-        this.props.tagsTree && Object.keys(this.props.tagsTree).length > 0
-          ? JSONToActivityOutputData(this.props.tagsTree)
-          : {},
       parentChildMapping: this.setParentChildMapping([templateStep]),
       dynamicFieldsData: {},
       parentFieldChanged: false,
@@ -1444,14 +1440,18 @@ class ActionForm extends Component<ActionFormPropsType, ActionFormStateType> {
                                     }
                                     activityOutputData=${this.arrayToNestedJSONWithFirstValue(
                                       this.props.activityOutputData ||
-                                        this.state.tagsTree,
+                                        JSONToActivityOutputData(
+                                          this.props.tagsTree || {},
+                                        ),
                                       this.props.dynamicFieldData ||
                                         this.state.dynamicFieldDataState ||
                                         {},
                                     )}
                                     activityOutputDataRaw=${
                                       this.props.activityOutputData ||
-                                      this.state.tagsTree
+                                      JSONToActivityOutputData(
+                                        this.props.tagsTree || {},
+                                      )
                                     }
                                     description=${elDescription}
                                     value=${
@@ -1535,6 +1535,7 @@ class ActionForm extends Component<ActionFormPropsType, ActionFormStateType> {
                                       el.data_type === 'STRING[]' ||
                                       el.data_type === 'NUMBER[]'
                                     )}
+                                    tagsComponent=${this.props.tagsComponent}
                                   ><//>
                                   </${ConfigureFieldWrapper}>
                                 </div>
@@ -1832,13 +1833,19 @@ class ActionForm extends Component<ActionFormPropsType, ActionFormStateType> {
                                   type=${el.activity_field?.type}
                                   labelTags=${getFieldLabelTags(el, false)}
                                   activityOutputData=${this.arrayToNestedJSONWithFirstValue(
-                                    this.props.activityOutputData,
+                                    this.props.activityOutputData ||
+                                      JSONToActivityOutputData(
+                                        this.props.tagsTree || {},
+                                      ),
                                     this.props.dynamicFieldData ||
                                       this.state.dynamicFieldDataState ||
                                       {},
                                   )}
                                   activityOutputDataRaw=${
-                                    this.props.activityOutputData
+                                    this.props.activityOutputData ||
+                                    JSONToActivityOutputData(
+                                      this.props.tagsTree || {},
+                                    )
                                   }
                                   isMappable=${el.is_mappable}
                                   isEditable=${el.is_editable}
@@ -1847,6 +1854,7 @@ class ActionForm extends Component<ActionFormPropsType, ActionFormStateType> {
                                   refreshRootStepData=${
                                     this.refreshRootStepData
                                   }
+                                  tagsComponent=${this.props.tagsComponent}
                                 />
                               
                                 </${ConfigureFieldWrapper}>

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

@@ -68,6 +68,7 @@ const DynamicFields = (props: DynamicFieldsProps) => {
     // if configMode is true, then don't fetch dynamic items
     // fetch dynamic items from endpoint
     if (sourceFlowIntegrataionInvocationUrl && selectedAuthId) {
+      setLoading(true);
       context?.apiHandler
         .callSourceFlowIntegrationInvocationUrl<DynamicDataItem[]>(
           new URL(sourceFlowIntegrataionInvocationUrl),
@@ -92,6 +93,7 @@ const DynamicFields = (props: DynamicFieldsProps) => {
         .finally(() => setLoading(false));
     } else if (activity_field && activity_field.dynamic_field_src) {
       let data;
+      setLoading(true);
       try {
         data = JSON.parse(endpointData);
       } catch (error) {

package/src/index.ts

@@ -28,6 +28,7 @@ import {
   RenderModes,
   Layouts,
   SetupIntegrationOptions,
+  RenderFlowStepOptions,
 } from '@/types';
 
 import { createSDKStore, initialState } from '@/store';
@@ -47,6 +48,7 @@ import FunctionForm from '@/features/common/FunctionForm';
 import { openPopupWindow } from '@/utils/popup';
 import { Modal } from '@/components/Modal';
 import { ListBox } from '@/components/MultipurposeField/Dropdown';
+// import { TestComponent } from '@/components/TestComponent';
 import { MultipurposeField } from './components/MultipurposeField';
 import SDKDebugContainer from './features/containers/SDKDebugContainer';
 
@@ -1982,13 +1984,18 @@ export class IntegryJS {
   };
 
   public renderFlowStep = (
-    containerId: string,
-    step: any,
-    connectedAccountId: string,
-    tagsTree = {},
-    onFieldChangeCallback?: (fieldId: string, value: string) => void,
+    options: RenderFlowStepOptions = {
+      containerId: 'integry-marketplace',
+      step: {},
+      connectedAccountId: '',
+      tagsComponent: null,
+      tagsTree: {},
+      onFieldChangeCallback: () => {
+        // Placeholder function for future implementation
+      },
+    },
   ) => {
-    const target = document.getElementById(containerId);
+    const target = document.getElementById(options.containerId);
 
     if (target) {
       const store = createSDKStore();
@@ -2003,16 +2010,17 @@ export class IntegryJS {
           >
             <${Provider} store=${store} key=${this.getRandomFlowId(10)}>
               <${ActionForm}
-                step=${step}
+                step=${options.step}
                 stepType=${'CONFIGURE'}
                 showStepValidation=${false}
                 apiHandler=${this.apiHandler}
                 eventEmitter=${this.eventEmitter}
                 isReadOnly="${false}"
-                selectedAuthId="${connectedAccountId}"
+                selectedAuthId="${options.connectedAccountId}"
                 accountConnected=${true}
-                tagsTree=${tagsTree}
-                onFieldChangeCallback=${onFieldChangeCallback}
+                tagsComponent=${options.tagsComponent}
+                onFieldChangeCallback=${options.onFieldChangeCallback}
+                tagsTree=${options.tagsTree}
               />
             <//>
           <//>
@@ -2021,7 +2029,7 @@ export class IntegryJS {
       );
     } else {
       console.warn(
-        `Integry SDK render target with id ${containerId} was not found`,
+        `Integry SDK render target with id ${options.containerId} was not found`,
       );
     }
   };

package/src/types/index.ts

@@ -1,5 +1,3 @@
-import { type } from 'superstruct';
-
 export type IntegrySDKEventType =
   | 'authorizations'
   | 'did-add-authorization'
@@ -291,3 +289,11 @@ export type SetupIntegrationOptions = {
   integrationId?: number;
   params?: Record<string, string>;
 };
+export type RenderFlowStepOptions = {
+  containerId: string;
+  step: any;
+  connectedAccountId: string;
+  tagsComponent?: any;
+  onFieldChangeCallback: (fieldId: string, value: any) => void;
+  tagsTree: any;
+};