@integry/sdk 4.5.2 → 4.5.4

package/src/components/form/ObjectField/index.ts

@@ -0,0 +1,364 @@
+import { html } from 'htm/preact';
+import { useState } from 'preact/hooks';
+import { Input } from '@/components/Input';
+import { TextArea } from '@/components/TextArea';
+import { CheckboxGroup } from '@/components/CheckboxGroup';
+import ConfigureFieldWrapper from '@/components/ConfigureFieldWrapper';
+import { ListBox } from '@/components/MultipurposeField/Dropdown';
+import { MultipurposeField } from '@/components/MultipurposeField';
+import styles from './styles.module.scss';
+
+interface ObjectFieldProps {
+  field: any;
+  functionArguments: any;
+  connectedAccount: string;
+  appName: string;
+  onChange: (
+    fieldId: string,
+    value: any,
+    type: string,
+    required: boolean,
+    parentFieldId?: string,
+    index?: number,
+  ) => void;
+  apiHandler: any;
+  isArray?: boolean; // New prop to check if the input is an array
+  activityOutputData: any;
+  activityOutputDataRaw: any;
+}
+
+type Option = {
+  id: any;
+  value: string;
+};
+interface FieldDetails {
+  meta: {
+    title: string;
+    description_for_users: string;
+    is_required: boolean;
+    ui: {
+      placeholder: string;
+      regex?: string;
+      regex_error_message?: string;
+      ui_field: {
+        type?: string;
+        options?: Option[];
+        data_source?: any; // If needed, define this more specifically
+        endpointURL?: string; // Add endpointURL here
+      };
+    };
+  };
+  properties?: any; // If there are nested fields for objects
+  type: string;
+}
+
+// Define the structure of each object in the array
+type FieldObject = {
+  [key: string]: any; // Allow any string key with any value
+};
+
+const transformTemplateFieldsToProperties = (templateFields: any[]) => {
+  const properties: { [key: string]: FieldDetails } = {};
+
+  templateFields.forEach((tf) => {
+    properties[tf.id] = {
+      meta: {
+        title: tf.title,
+        description_for_users: tf.description,
+        is_required: tf.is_required,
+        ui: {
+          placeholder: tf.placeholder,
+          regex: tf.regex || '',
+          regex_error_message: tf.regex_msg || 'Invalid input.',
+          ui_field: {
+            type: tf.type || 'TEXTFIELD',
+            options: [], // Populate if needed
+            data_source: null, // Adjust if needed
+            endpointURL: '', // Adjust if needed
+          },
+        },
+      },
+      properties: tf.template_fields?.length
+        ? transformTemplateFieldsToProperties(tf.template_fields)
+        : undefined,
+      type: tf.data_type || 'string',
+    };
+  });
+
+  return properties;
+};
+
+const ObjectField = (props: ObjectFieldProps) => {
+  const {
+    field,
+    functionArguments,
+    connectedAccount,
+    appName,
+    onChange,
+    apiHandler,
+    isArray = false, // Default to false
+    activityOutputData,
+    activityOutputDataRaw,
+  } = props;
+  const normalizedField = {
+    ...field,
+    properties:
+      field.properties ||
+      (field.template_fields
+        ? transformTemplateFieldsToProperties(field.template_fields)
+        : {}),
+  };
+
+  const [objectArray, setObjectArray] = useState<FieldObject[]>([{}]); // Start with one empty object in the array
+
+  // Method to handle field changes for each object in the array
+  const handleFieldChange = (
+    index: number,
+    fieldId: string,
+    value: any,
+    dataType: string,
+  ) => {
+    const updatedObjectArray = [...objectArray];
+    updatedObjectArray[index][fieldId] = value;
+
+    // Update the state with the modified object array
+    setObjectArray(updatedObjectArray);
+
+    // Optionally trigger the parent change handler
+    if (isArray) {
+      onChange(
+        fieldId,
+        updatedObjectArray,
+        dataType,
+        field.is_required,
+        field.id,
+        index,
+      );
+    } else {
+      onChange(fieldId, value, dataType, field.is_required, field.id);
+    }
+  };
+
+  // Method to handle the 'Add More' button click
+  const handleAddMore = () => {
+    setObjectArray([...objectArray, {}]); // Add another empty object to the array
+  };
+
+  const getRegex: any = (f: any) => {
+    if (f.type === 'boolean') {
+      return '^(true|false)$'; // Matches "true" or "false" as strings
+    }
+    if (f.type === 'number') {
+      return '^\\d+$'; // Matches numeric values only
+    }
+    if (f.type === 'array' && f.items && f.items.type === 'number') {
+      return '^\\d+$'; // Matches numeric values only
+    }
+
+    return ''; // Default to empty string
+  };
+
+  const getRegexErrorMessage: any = (f: any) => {
+    if (f.type === 'boolean') {
+      return 'Please enter "true" or "false".'; // Error message for boolean fields
+    }
+    if (f.type === 'number') {
+      return 'Please enter a valid number.'; // Error message for number fields
+    }
+    if (f.type === 'array' && f.items && f.items.type === 'number') {
+      return 'Please enter a valid number.'; // Error message for number fields
+    }
+
+    return 'Invalid input.'; // Default error message
+  };
+
+  const handleDeleteIconClick = (index: number) => {
+    setObjectArray((prevValues) => {
+      const newValues = prevValues.filter((_, i) => i !== index);
+      return newValues;
+    });
+  };
+
+  // Render fields for each object in the array
+  const renderFields = (
+    properties: { [key: string]: FieldDetails },
+    objectIndex: number,
+  ) =>
+    Object.entries(properties).map(([fieldName, fieldDetails], index) => {
+      const fieldType = fieldDetails.meta.ui.ui_field?.type || 'TEXTFIELD';
+      const options: Option[] = fieldDetails.meta.ui.ui_field?.options || [];
+      const placeholder =
+        fieldDetails.meta.ui.placeholder ||
+        (['DYNAMIC_DROPDOWN', 'STATIC_DROPDOWN'].includes(
+          fieldDetails.meta.ui.ui_field?.type || '',
+        )
+          ? `Select or enter a value here...`
+          : `Enter value here...`);
+
+      const fieldElement = html`
+        <div class="${styles.functionFieldWrap} integry-action-field-wrap">
+          <${ConfigureFieldWrapper} field=${fieldDetails}>
+            ${fieldType === 'TEXTFIELD' &&
+            html`
+              <${MultipurposeField}
+                id="${fieldName}"
+                title="${fieldDetails.meta.title}"
+                activityOutputData=${activityOutputData}
+                activityOutputDataRaw=${activityOutputDataRaw}
+                description="${fieldDetails.meta.description_for_users}"
+                value=${(objectArray[objectIndex] || {})[fieldName] || ''}
+                placeholder="${placeholder}"
+                onChange=${(val: any) => {
+                  const valueReceived =
+                    fieldDetails.type === 'number' ? Number(val) : val;
+                  handleFieldChange(
+                    objectIndex,
+                    fieldName,
+                    valueReceived,
+                    fieldDetails.meta.ui.ui_field?.type || 'TEXTFIELD',
+                  );
+                }}
+                regex=${fieldDetails.meta.ui.regex || getRegex(fieldDetails)}
+                regexErrorMessage=${fieldDetails.meta.ui.regex_error_message ||
+                getRegexErrorMessage(fieldDetails)}
+                isRequired="${fieldDetails.meta.is_required}"
+                type=${fieldType}
+                isMappable=${activityOutputDataRaw &&
+                Object.entries(activityOutputDataRaw).length > 0}
+                isEditable=${true}
+                allowTagsInText=${activityOutputDataRaw}
+                fieldId=${`${field.id}_${fieldName}`}
+              ><//>
+            `}
+            ${fieldType === 'TEXTAREA' &&
+            html`
+              <${MultipurposeField}
+                id="${fieldName}"
+                title="${fieldDetails.meta.title}"
+                description="${fieldDetails.meta.description_for_users}"
+                activityOutputData=${activityOutputData}
+                activityOutputDataRaw=${activityOutputDataRaw}
+                value=${(objectArray[objectIndex] || {})[fieldName] || ''}
+                onChange=${(val: any) =>
+                  handleFieldChange(
+                    objectIndex,
+                    fieldName,
+                    val,
+                    fieldDetails.meta.ui.ui_field?.type || 'TEXTAREA',
+                  )}
+                placeholder="${placeholder}"
+                isRequired="${fieldDetails.meta.is_required}"
+                regex=${fieldDetails.meta.ui.regex || getRegex(fieldDetails)}
+                regexErrorMessage=${fieldDetails.meta.ui.regex_error_message ||
+                getRegexErrorMessage(fieldDetails)}
+                isEditable=${true}
+                fieldId=${`${field.id}_${fieldName}`}
+                type=${fieldType}
+                isMappable=${activityOutputDataRaw &&
+                Object.entries(activityOutputDataRaw).length > 0}
+                allowTagsInText=${activityOutputDataRaw}
+              ><//>
+            `}
+            ${fieldType === 'CHECKBOX' &&
+            html`
+              <${CheckboxGroup}
+                fieldId="${fieldName}"
+                title="${fieldDetails.meta.title}"
+                value=${(objectArray[objectIndex] || {})[fieldName] || ''}
+                onChange=${(val: any) =>
+                  handleFieldChange(
+                    objectIndex,
+                    fieldName,
+                    val,
+                    fieldDetails.meta.ui.ui_field?.type || 'CHECKBOX',
+                  )}
+              />
+            `}
+            ${fieldType === 'DYNAMIC_DROPDOWN' &&
+            html`
+              <${ListBox}
+                key=${fieldName}
+                fieldId=${fieldName}
+                apiHandler=${apiHandler}
+                title=${fieldDetails.meta.title}
+                description=${fieldDetails.meta.description_for_users}
+                placeholder="${placeholder}"
+                isRequired="${fieldDetails.meta.is_required}"
+                endpointUrl=${fieldDetails.meta.ui.ui_field?.endpointURL || ''}
+                options=${options}
+                value=${(objectArray[objectIndex] || {})[fieldName] || ''}
+                onChange=${(val: any) =>
+                  handleFieldChange(
+                    objectIndex,
+                    fieldName,
+                    val,
+                    fieldDetails.meta.ui.ui_field?.type || 'DYNAMIC_DROPDOWN',
+                  )}
+              />
+            `}
+          <//>
+        </div>
+      `;
+
+      return fieldElement;
+    });
+  return html`
+    <div class="${styles.objectContainer}">
+      ${objectArray.map(
+        (_, index) =>
+          html`
+            <div class="${styles.objectFieldWrap}">
+              <div class="${styles.label}">
+                <label class="${styles.subLabel}">
+                  <div>
+                    ${field.title}${isArray ? ` ${index + 1}` : ''}
+                    ${isArray &&
+                    objectArray.length > 1 &&
+                    index !== objectArray.length - 1 &&
+                    html`
+                      <div class=${styles.removeButton}>
+                        <button
+                          class="${styles.removeButton}"
+                          onClick=${() => {
+                            if (handleDeleteIconClick) {
+                              handleDeleteIconClick(index);
+                            }
+                          }}
+                          tabindex="-1"
+                        >
+                          <svg
+                            width="15"
+                            height="15"
+                            viewBox="0 0 15 15"
+                            fill="none"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path d="M1.5 4.1999H13.65" stroke="#999999" />
+                            <path
+                              d="M11.6254 5.5498V6.2248L10.9504 13.6498H4.20039L3.52539 6.2248V5.5498"
+                              stroke="#999999"
+                              stroke-linejoin="round"
+                            />
+                            <path
+                              d="M5.55078 3.525V2.175C5.55078 1.80221 5.85299 1.5 6.22578 1.5H8.92578C9.29857 1.5 9.60078 1.80221 9.60078 2.175V3.525"
+                              stroke="#999999"
+                            />
+                          </svg>
+                        </button>
+                      </div>
+                    `}
+                  </div>
+                  <div>${field.description}</div>
+                </label>
+              </div>
+              ${renderFields(normalizedField.properties, index)}
+            </div>
+          `,
+      )}
+      ${isArray &&
+      html` <a onClick=${handleAddMore}>+ Add another ${field.title}</a> `}
+    </div>
+  `;
+};
+
+export { ObjectField, ObjectFieldProps };

package/src/components/form/ObjectField/styles.module.scss

@@ -0,0 +1,103 @@
+.inputGroupWrapper {
+  fieldset {
+    padding: 0;
+    margin: 0;
+    border: none;
+    margin-bottom: 24px;
+  }
+  .readonlyHint {
+    width: 100%;
+    height: -webkit-fill-available;
+    z-index: 99;
+    position: absolute;
+  }
+}
+.objectContainer {
+  margin-bottom: 20px;
+  .objectFieldWrap {
+    border-top: 1px solid #e2e0db;
+    padding-top: 20px;
+  }
+
+  legend {
+    font-size: 12px;
+    padding-left: 0; /* Remove padding on the left */
+    margin-left: 0; /* Remove margin on the left */
+    border-left: none; /* Remove the default left border */
+    width: auto;
+  }
+  hr {
+    border: none;
+    height: 1px;
+    background-color: #e2e0db;
+  }
+  a {
+    color: #007bff;
+    text-decoration: none;
+    font-size: 12px;
+    &:hover {
+      text-decoration: underline;
+      cursor: pointer;
+    }
+  }
+  .label {
+    margin-bottom: 15px;
+    .subLabel {
+      display: block;
+      margin-bottom: 0;
+
+      > div:first-child {
+        color: #000;
+        font-family: Inter;
+        font-size: 12px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: normal;
+        margin-bottom: 3px;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+
+        .tagSpan {
+          margin-left: 10px;
+        }
+        .refreshIcon {
+          margin-left: 8px;
+          cursor: pointer;
+        }
+      }
+      > div:nth-child(2) {
+        color: var(--black-and-grey-draft-and-tooltip-desc, #999);
+        font-family: Inter;
+        font-size: 12px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: normal;
+        margin-bottom: 8px;
+      }
+    }
+    .required {
+      color: #333;
+      font-size: 16px;
+      margin-left: 2px;
+    }
+    .removeButton {
+      background: none;
+      border: none;
+      color: #999999; /* Red color */
+      cursor: pointer;
+      font-size: 18px; /* Size of the delete icon */
+      padding: 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin-right: 10px;
+      margin-left: auto;
+      margin-right: 0px;
+    }
+
+    .removeButton:hover {
+      color: #999999; /* Darker red on hover */
+    }
+  }
+}

package/src/components/form/index.ts

@@ -0,0 +1,3 @@
+import { ObjectField, ObjectFieldProps } from './ObjectField';
+
+export { ObjectField, ObjectFieldProps };

package/src/contexts/AppContext.ts

@@ -0,0 +1,12 @@
+// eslint-disable-next-line import/no-cycle
+import { IntegryAPI } from '@/modules/api';
+import { EventEmitter } from '@/modules/event-emitter';
+import { IntegrySDKEvents } from '@/types';
+import { createContext } from 'preact';
+
+export default createContext<{
+  apiHandler: IntegryAPI;
+  eventEmitter: EventEmitter<IntegrySDKEvents>;
+  isPreviewMode: boolean;
+  isReadOnly?: boolean;
+} | null>(null);

package/src/declaration.d.ts

@@ -0,0 +1,7 @@
+// declaration.d.ts
+declare module '*.scss' {
+  const content: Record<string, string>;
+  export default content;
+}
+
+declare module 'dompurify';

package/src/extensions/HMAC.ts

@@ -0,0 +1,25 @@
+/**
+ *
+ * @param key Key to sign hash
+ * @param message Message to hash
+ * @returns {string}
+ */
+export async function HMAC(message: string, key: string): Promise<string> {
+  const g = (str: string) =>
+    new Uint8Array(
+      [...unescape(encodeURIComponent(str))].map((c) => c.charCodeAt(0)),
+    );
+  const k = g(key);
+  const m = g(message);
+  const c = await crypto.subtle.importKey(
+    'raw',
+    k,
+    { name: 'HMAC', hash: 'SHA-256' },
+    true,
+    ['sign'],
+  );
+  const s = await crypto.subtle.sign('HMAC', c, m);
+  return [...new Uint8Array(s)]
+    .map((b) => b.toString(16).padStart(2, '0'))
+    .join('');
+}

package/src/extensions/IntegryAPIError.ts

@@ -0,0 +1,19 @@
+import { UnfetchResponse } from '../types';
+
+/**
+ * Extend default Error class
+ */
+class IntegryAPIError extends Error {
+  statusCode: number | undefined;
+
+  response: UnfetchResponse | undefined;
+
+  constructor(errorMessage: string, response?: UnfetchResponse) {
+    super(errorMessage);
+    this.name = this.constructor.name;
+    this.statusCode = response?.status;
+    this.response = response;
+  }
+}
+
+export { IntegryAPIError };