@integry/sdk 4.5.8 → 4.5.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@integry/sdk",
-  "version": "4.5.8",
+  "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

@@ -9,6 +9,7 @@ import { ListBox } from '@/components/MultipurposeField/Dropdown';
 import { Loader } from '@/components/Loader';
 import {
   IntegryStep,
+  TemplateStep,
   TemplateField,
   IncomingWebhookObject,
   NestedObject,
@@ -46,30 +47,41 @@ 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;
 }
 
 interface StepDataMapping {
   [key: string]: any;
 }
 
+type FieldMapping = {
+  [key: string]: {
+    fieldId: number;
+    childFields: any[] | null;
+    parentFields: any[] | null;
+  };
+};
+
+type Mapping = Record<number, any>;
+
 class ActionForm extends Component<ActionFormPropsType, ActionFormStateType> {
   constructor(props: ActionFormPropsType) {
     super(props);
+    const templateStep: any = props.step;
     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,
     };
   }
 
@@ -105,6 +117,54 @@ class ActionForm extends Component<ActionFormPropsType, ActionFormStateType> {
     }
   }
 
+  setParentChildMapping(steps: TemplateStep[]) {
+    this.setState((prevState) => {
+      const parentChildMapping = steps.reduce((mapping: Mapping, step) => {
+        const stepMapping = step.template_fields.reduce(
+          (fields: FieldMapping, field) => {
+            const activityField = field.activity_field;
+
+            if (activityField) {
+              // Create a copy of the fields object to avoid mutating it
+              const updatedFields = { ...fields };
+
+              updatedFields[activityField.machine_name] = {
+                fieldId: field.id,
+                childFields: activityField.child_fields
+                  ? JSON.parse(activityField.child_fields)
+                  : null,
+                parentFields: activityField.parent_fields
+                  ? JSON.parse(activityField.parent_fields)
+                  : null,
+              };
+
+              return updatedFields;
+            }
+
+            return fields;
+          },
+          {}, // Initial empty object
+        );
+
+        // Create a new object for `mapping` to avoid mutation
+        return {
+          ...mapping, // Spread the existing mapping to preserve the previous entries
+          [step.id]: {
+            ...(prevState.parentChildMapping?.[step.id] || {}), // Ensure it starts with the previous state or empty object
+            ...stepMapping, // Merge the new step mapping
+          },
+        };
+      }, {});
+
+      return {
+        parentChildMapping: {
+          ...prevState.parentChildMapping, // Spread the previous state to preserve other data
+          ...parentChildMapping, // Add the newly calculated `parentChildMapping`
+        },
+      };
+    });
+  }
+
   getVisibleFieldsDataOnRootStep = (
     stepId: number,
   ): {
@@ -829,7 +889,8 @@ class ActionForm extends Component<ActionFormPropsType, ActionFormStateType> {
 
   private shouldShowOldMapping = () => {
     const stepId = this.props.step.id;
-    const stepObject = this.props.stepMapping && this.props.stepMapping[stepId];
+    const stepObject = (this.props.stepMapping &&
+      this.props.stepMapping[stepId]) || { step: this.props.step };
     if (this.stepIsOfType(['ADAPTER', 'ACTION'])) {
       const anyVisibleFields = stepObject.step.template_fields.filter(
         (el) => el.is_visible,
@@ -918,6 +979,18 @@ class ActionForm extends Component<ActionFormPropsType, ActionFormStateType> {
     return payload;
   };
 
+  private isParentField = (
+    mapping: Record<string, Record<string, any>>,
+    machineName: string,
+  ): boolean =>
+    Object.values(mapping).some((fields) =>
+      Object.values(fields).some(
+        (field) =>
+          Array.isArray(field.parentFields) &&
+          field.parentFields.includes(machineName),
+      ),
+    );
+
   private onFieldChange = ({
     stepId,
     fieldId,
@@ -933,6 +1006,19 @@ class ActionForm extends Component<ActionFormPropsType, ActionFormStateType> {
   }) => {
     // we want to check if callback function is passed in props, if yes then call it
     if (this.props.onFieldChangeCallback) {
+      this.setState((prevState) => ({
+        dynamicFieldsData: {
+          ...prevState.dynamicFieldsData,
+          [machineName || '']: value,
+        },
+      }));
+
+      if (
+        this.isParentField(this.state.parentChildMapping, machineName || '')
+      ) {
+        this.setState({ parentFieldChanged: !this.state.parentFieldChanged });
+      }
+
       this.props.onFieldChangeCallback(machineName || '', value);
     } else {
       this.props.setStepFieldData({
@@ -1351,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=${
@@ -1540,11 +1624,13 @@ class ActionForm extends Component<ActionFormPropsType, ActionFormStateType> {
                                       dynamicField=${el}
                                       endpointData=${JSON.stringify({
                                         authorization_id:
-                                          this.props.stepMapping &&
-                                          this.props.stepMapping[
-                                            this.props.step.id
-                                          ]?.selectedAuthId,
+                                          (this.props.stepMapping &&
+                                            this.props.stepMapping[
+                                              this.props.step.id
+                                            ]?.selectedAuthId) ||
+                                          this.props.selectedAuthId,
                                         ...this.fieldDynamicData(el),
+                                        ...this.state.dynamicFieldsData,
                                       })}
                                       activityOutputData=${this.arrayToNestedJSONWithFirstValue(
                                         this.props.activityOutputData,
@@ -1560,7 +1646,9 @@ class ActionForm extends Component<ActionFormPropsType, ActionFormStateType> {
                                       selectedAuthId=${`${
                                         this.props.stepMapping[
                                           this.props.step.id
-                                        ]?.selectedAuthId || ''
+                                        ]?.selectedAuthId ||
+                                        this.props.selectedAuthId ||
+                                        ''
                                       }`}
                                       sourceFlowData=${this.sourceFlowData(el)}
                                       sourceFlowIntegrataionInvocationUrl=${el.source_flow_integration_invocation_url}
@@ -1569,6 +1657,8 @@ class ActionForm extends Component<ActionFormPropsType, ActionFormStateType> {
                                       allowTagsInText=${el.allow_tags_in_text}
                                       refreshRootStepData=${this
                                         .refreshRootStepData}
+                                      parentFieldChanged=${this.state
+                                        .parentFieldChanged}
                                     />
                                   </div>
                                 `;

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

@@ -26,6 +26,7 @@ export type DynamicFieldsProps = {
   allowTagsInText?: boolean;
   placeHolder?: string;
   refreshRootStepData?: (callback?: any) => void;
+  parentFieldChanged?: boolean;
 } & StoreType;
 
 interface DynamicDataItem {
@@ -50,6 +51,7 @@ const DynamicFields = (props: DynamicFieldsProps) => {
     allowTagsInText = true,
     placeHolder = '',
     refreshRootStepData,
+    parentFieldChanged = false,
   } = props;
   const [dynamicItems, setDynamicItems] = useState<DynamicDataItem[]>([]);
   const [loading, setLoading] = useState<boolean>(true);
@@ -66,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),
@@ -90,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) {
@@ -121,7 +125,7 @@ const DynamicFields = (props: DynamicFieldsProps) => {
 
   useEffect(() => {
     fetchDynamicFields();
-  }, [dynamicField, endpointData, selectedAuthId]);
+  }, [dynamicField, endpointData, selectedAuthId, parentFieldChanged]);
 
   const getPlaceholder = () => {
     let placeHolderValue = 'Enter text or map to fields...';
@@ -163,7 +167,9 @@ const DynamicFields = (props: DynamicFieldsProps) => {
             Loading custom fields...
           </div> `
         : html` ${dynamicItems.map((el) => {
-            const ele = props.stepDataMapping[stepId][dynamicField.id];
+            const ele = props.stepDataMapping[stepId]
+              ? props.stepDataMapping[stepId][dynamicField.id]
+              : ({} as { objectValue: Record<string, string | number> });
             let fieldVal = '';
             const parsedVal = ele.objectValue as Record<
               string,

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;
+};