@integry/sdk 4.5.9 → 4.5.10

package/package.json

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

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

@@ -369,7 +369,11 @@ const FieldDropdown = (props: FieldMenuProps) => {
                                 <a
                                   className=${styles.optionsRefresh}
                                   href="#"
-                                  onclick=${handleRefresh}
+                                  onclick=${(e: any) => {
+                                    e.preventDefault();
+                                    e.stopPropagation();
+                                    handleRefresh();
+                                  }}
                                 >
                                   ${' '}Try again?</a
                                 >`}

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);

package/src/components/TestComponent/index.ts

@@ -0,0 +1,21 @@
+import { html } from 'htm/preact';
+import cx from 'classnames';
+
+import { Hint } from '@/components/Tooltip';
+import { ThreeDotLoader } from '@/components/ThreeDotLoader';
+
+import styles from './styles.module.scss';
+
+export interface TestProps {
+  label: string;
+}
+
+/**
+ * Test component
+ *
+ */
+export const Test = (props: TestProps) => {
+  const { label, ...restOfProps } = props;
+
+  return html` <div>Hello world</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,12 @@ interface ActionFormPropsType extends StoreType {
   isReadOnly?: boolean;
   accountConnected: boolean;
   selectedAuthId: string;
-  tagsTree: any;
   onFieldChangeCallback?: (fieldId: string, value: string) => void;
 }
 
 interface ActionFormStateType {
   loading: boolean;
   dynamicFieldDataState: any;
-  tagsTree: any;
   parentChildMapping: any;
   dynamicFieldsData: any;
   parentFieldChanged: boolean;
@@ -81,10 +79,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,
@@ -1443,15 +1437,13 @@ class ActionForm extends Component<ActionFormPropsType, ActionFormStateType> {
                                       el.title || el.activity_field?.title
                                     }
                                     activityOutputData=${this.arrayToNestedJSONWithFirstValue(
-                                      this.props.activityOutputData ||
-                                        this.state.tagsTree,
+                                      this.props.activityOutputData,
                                       this.props.dynamicFieldData ||
                                         this.state.dynamicFieldDataState ||
                                         {},
                                     )}
                                     activityOutputDataRaw=${
-                                      this.props.activityOutputData ||
-                                      this.state.tagsTree
+                                      this.props.activityOutputData
                                     }
                                     description=${elDescription}
                                     value=${

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';
@@ -1982,13 +1983,17 @@ 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,
+      onFieldChangeCallback: () => {
+        // Placeholder function for future implementation
+      },
+    },
   ) => {
-    const target = document.getElementById(containerId);
+    const target = document.getElementById(options.containerId);
 
     if (target) {
       const store = createSDKStore();
@@ -2003,16 +2008,16 @@ 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}
               />
             <//>
           <//>
@@ -2021,7 +2026,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,10 @@ 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;
+};