@integry/sdk 4.5.10 → 4.5.11

package/src/components/MultipurposeField/index.tsx

@@ -363,6 +363,7 @@ const MultipurposeField = (props: MultipurposeFieldProps) => {
   };
 
   const onTagClick = (tag: string) => {
+    console.log('tag', tag);
     if (tagify) {
       if (!allowTagsInText) {
         tagify.removeAllTags();
@@ -679,6 +680,7 @@ const MultipurposeField = (props: MultipurposeFieldProps) => {
               ? true
               : false}
             refreshRootStepData=${refreshRootStepData}
+            tagsComponent=${tagsComponent}
           />
         </div>`}
       </div>

package/src/components/TestComponent/index.ts

@@ -3,19 +3,69 @@ 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 {
-  label: string;
+  tags: any;
+  onSelect: (tag: any) => void;
 }
 
 /**
  * Test component
  *
  */
-export const Test = (props: TestProps) => {
-  const { label, ...restOfProps } = props;
+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>Hello world</div> `;
+  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/features/common/ActionForm/index.ts

@@ -48,6 +48,8 @@ interface ActionFormPropsType extends StoreType {
   accountConnected: boolean;
   selectedAuthId: string;
   onFieldChangeCallback?: (fieldId: string, value: string) => void;
+  tagsComponent?: any;
+  tagsTree?: any;
 }
 
 interface ActionFormStateType {
@@ -1437,13 +1439,19 @@ class ActionForm extends Component<ActionFormPropsType, ActionFormStateType> {
                                       el.title || el.activity_field?.title
                                     }
                                     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 || {},
+                                      )
                                     }
                                     description=${elDescription}
                                     value=${
@@ -1527,6 +1535,7 @@ class ActionForm extends Component<ActionFormPropsType, ActionFormStateType> {
                                       el.data_type === 'STRING[]' ||
                                       el.data_type === 'NUMBER[]'
                                     )}
+                                    tagsComponent=${this.props.tagsComponent}
                                   ><//>
                                   </${ConfigureFieldWrapper}>
                                 </div>
@@ -1824,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}
@@ -1839,6 +1854,7 @@ class ActionForm extends Component<ActionFormPropsType, ActionFormStateType> {
                                   refreshRootStepData=${
                                     this.refreshRootStepData
                                   }
+                                  tagsComponent=${this.props.tagsComponent}
                                 />
                               
                                 </${ConfigureFieldWrapper}>

package/src/index.ts

@@ -48,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';
 
@@ -1988,6 +1989,7 @@ export class IntegryJS {
       step: {},
       connectedAccountId: '',
       tagsComponent: null,
+      tagsTree: {},
       onFieldChangeCallback: () => {
         // Placeholder function for future implementation
       },
@@ -2018,6 +2020,7 @@ export class IntegryJS {
                 accountConnected=${true}
                 tagsComponent=${options.tagsComponent}
                 onFieldChangeCallback=${options.onFieldChangeCallback}
+                tagsTree=${options.tagsTree}
               />
             <//>
           <//>

package/src/types/index.ts

@@ -295,4 +295,5 @@ export type RenderFlowStepOptions = {
   connectedAccountId: string;
   tagsComponent?: any;
   onFieldChangeCallback: (fieldId: string, value: any) => void;
+  tagsTree: any;
 };