@integry/sdk 4.5.2 → 4.5.4

package/src/components/HTMLContent/index.tsx

@@ -0,0 +1,275 @@
+import { html } from 'htm/preact';
+import { connect } from 'unistore/preact';
+import { useEffect, useState, useRef } from 'preact/hooks';
+import { StoreType } from '@/types/store';
+import { openPopupWindow } from '@/utils/popup';
+
+import styles from './styles.module.scss';
+
+interface HTMLFieldProps {
+  htmlContent: string;
+  xIntegryConfig?: any;
+  stepDataMapping?: any;
+  stepState?: any;
+  genericData?: any;
+  stepMapping?: any;
+  isAction?: boolean;
+  requiresAuthToken?: boolean;
+  apiHandler?: any;
+  handleChange?: (e: any) => void;
+  handleCancel?: () => void;
+}
+
+const HTMLContent = (props: HTMLFieldProps) => {
+  const { htmlContent, xIntegryConfig = {} } = props;
+  const [htmlContentState, setHtmlContentState] = useState(htmlContent);
+  const [hasPreprocessedHtmlContent, setHasPreprocessedHtmlContent] = useState(
+    false,
+  );
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const actionBaseUrl = 'https://embed.app.integry.io';
+  const actionUrl = `${actionBaseUrl}/render-action-btn-html/render`;
+
+  const replaceValuesWithJSON = (inputString: string, jsonData: any) => {
+    // Regular expression to match values inside double curly braces
+    const regex = /{(.*?)}/g;
+
+    // Use the replace method to replace matched values
+    const replacedString = inputString.replace(
+      regex,
+      (match: any, group: string) => {
+        // Trim the group to remove leading and trailing whitespaces
+        const key = group.trim();
+
+        // Access the nested values using a loop
+        const keys = key.split('.');
+        let value = jsonData;
+
+        // eslint-disable-next-line no-restricted-syntax
+        for (const k of keys) {
+          // eslint-disable-next-line no-prototype-builtins
+          if (value.hasOwnProperty(k)) {
+            value = value[k];
+          } else {
+            // If a key is not found and key is not authorization.token.access_token, return an empty string
+            if (key !== 'authorization.token.access_token') return '';
+
+            return `{${key}}`;
+          }
+        }
+
+        // Return the replacement value
+        return value;
+      },
+    );
+
+    return replacedString;
+  };
+
+  const getCurrentStep = () => {
+    const { stepState, stepMapping } = props;
+
+    return stepMapping[stepState.currentStep.stepId] || {};
+  };
+
+  const generateInJsonData = () => {
+    let generatedJSON = {
+      steps: {},
+      storage: {},
+      authorization: {},
+    };
+    const { stepDataMapping, stepState, stepMapping } = props;
+    const { steps = [] } = stepState;
+    const currentStep = getCurrentStep();
+    const selectedAuthFilter = currentStep.authorizations.filter(
+      (auth: any) => auth.authorizationId === currentStep.selectedAuthId,
+    );
+    const selectedAuth = selectedAuthFilter[0] || {};
+    if (steps.length > 0) {
+      let tempSteps = {};
+      steps.forEach(
+        (step: { title: string; type: string; stepId: number | string }) => {
+          const { title, type, stepId } = step;
+          if (type === 'CONFIGURATION') {
+            const objectTitle = `form_${title
+              .toLowerCase()
+              .replace(/ /g, '_')}`;
+            if (stepDataMapping[stepId]) {
+              let tempObject = {};
+              Object.keys(stepDataMapping[stepId]).forEach((fieldId) => {
+                const { value, machineName } = stepDataMapping[stepId][fieldId];
+                tempObject = {
+                  ...tempObject,
+                  [machineName]: value,
+                };
+              });
+              tempSteps = {
+                ...tempSteps,
+                [objectTitle]: {
+                  in: {
+                    ...tempObject,
+                  },
+                },
+              };
+            }
+          }
+        },
+      );
+      generatedJSON = {
+        ...generatedJSON,
+        steps: {
+          ...tempSteps,
+        },
+        storage: {
+          ...props.genericData.storage,
+        },
+      };
+    }
+    return generatedJSON;
+  };
+
+  const onActionResponseReceived = (event: MessageEvent) => {
+    // Verify the message origin (for security)
+    if (event.origin !== actionBaseUrl) return;
+
+    // Check if the message contains the connectedAccountId
+    if (props.handleChange) {
+      props.handleChange(event.data);
+    }
+  };
+
+  // Add the message event listener
+  window.addEventListener('message', onActionResponseReceived);
+
+  // Handle cases where the user closes the auth window without completing auth
+
+  useEffect(() => {
+    const result = replaceValuesWithJSON(htmlContent, {
+      xIntegryConfig: { ...(xIntegryConfig || {}) },
+      ...generateInJsonData(),
+    });
+    setHtmlContentState(result);
+
+    if (props.isAction) {
+      /**
+       * we want to open html render in a child window if its for an action of a text field
+       */
+      const encodedHmlt = btoa(encodeURIComponent(result));
+      const currentStep = getCurrentStep();
+      const selectedAuthFilter = currentStep.authorizations.filter(
+        (auth: any) => auth.authorizationId === currentStep.selectedAuthId,
+      );
+      const selectedAuth = selectedAuthFilter[0] || {};
+      const selectedAuthId = props.requiresAuthToken
+        ? selectedAuth.authorizationId
+        : '';
+      const authWindow = openPopupWindow(
+        `${actionUrl}?content=${encodedHmlt}&auth_id=${selectedAuthId}&${props.apiHandler.getAuthConfig()}`,
+        'Action Button',
+        window,
+        800,
+        600,
+      );
+      const checkWindowClosed = setInterval(() => {
+        if (authWindow && authWindow.closed) {
+          clearInterval(checkWindowClosed);
+          window.removeEventListener('message', onActionResponseReceived);
+          if (props.handleCancel) {
+            props.handleCancel();
+          }
+        }
+      }, 500);
+    } else if (containerRef.current) {
+      try {
+        containerRef.current.innerHTML = htmlContentState;
+
+        // Extract and process link tags
+        const links = containerRef.current.querySelectorAll(
+          'link[rel="stylesheet"]',
+        );
+        links.forEach((link) => {
+          const newLink = document.createElement('link');
+          Array.from(link.attributes).forEach((attr) =>
+            newLink.setAttribute(attr.name, attr.value),
+          );
+
+          // Avoid duplicates
+          if (
+            !Array.from(document.head.querySelectorAll('link')).some(
+              (existingLink) => existingLink.href === newLink.href,
+            )
+          ) {
+            document.head.appendChild(newLink);
+          }
+          link.remove();
+        });
+
+        // Extract and process scripts
+        const scripts = containerRef.current.querySelectorAll('script');
+
+        // Define loadScript with proper typing
+        const loadScript = (
+          script: HTMLScriptElement,
+          callback: () => void,
+        ) => {
+          const newScript = document.createElement('script');
+
+          if (script.src) {
+            // For external scripts
+            newScript.src = script.src;
+            newScript.onload = callback;
+          } else {
+            // For inline scripts
+            newScript.textContent = script.textContent;
+            callback(); // Inline scripts can execute immediately
+          }
+
+          // Copy attributes if any
+          Array.from(script.attributes).forEach((attr) =>
+            newScript.setAttribute(attr.name, attr.value),
+          );
+
+          document.body.appendChild(newScript);
+          script.remove();
+        };
+
+        // Process scripts in sequence
+        const processScripts = (
+          scripts: NodeListOf<HTMLScriptElement>,
+          index = 0,
+        ) => {
+          if (index < scripts.length) {
+            loadScript(scripts[index], () =>
+              processScripts(scripts, index + 1),
+            );
+          }
+        };
+
+        processScripts(scripts);
+      } catch (e) {
+        console.error(e);
+      }
+    }
+    setHasPreprocessedHtmlContent(true);
+  }, [htmlContentState]);
+
+  return html`
+    ${hasPreprocessedHtmlContent && !props.isAction
+      ? html`<div
+          class="${styles.htmlField}"
+          dangerouslySetInnerHTML=${{
+            __html: htmlContentState,
+          }}
+          ref="${containerRef}"
+        />`
+      : html``}
+  `;
+};
+
+export default connect<HTMLFieldProps, unknown, StoreType, unknown>([
+  'xIntegryConfig',
+  'stepDataMapping',
+  'stepMapping',
+  'stepState',
+  'genericData',
+])(HTMLContent);

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

@@ -0,0 +1,3 @@
+.htmlField {
+  margin-bottom: 16px;
+}

package/src/components/InfoBox/index.ts

@@ -0,0 +1,48 @@
+import { html } from 'htm/preact';
+import { FunctionComponent } from 'preact';
+
+import styles from './styles.module.scss';
+
+const InfoBox: FunctionComponent<{
+  style: Record<string, string | number>;
+}> = ({ style, children }) => html`
+  <div class=${styles.smartbox} style=${style}>
+    <svg
+      width="25"
+      height="25"
+      viewBox="0 0 25 25"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M5.3125 12.3603C5.3125 8.47114 8.46911 5.31445 12.3584 5.31445L12.3585 5.31484C16.2474 5.31484 19.4041 8.47145 19.4417 12.3215C19.4417 14.8631 18.1333 17.134 15.9767 18.4048V22.718C15.9767 23.6805 15.2067 24.4505 14.2442 24.4505H10.51C9.5475 24.4505 8.7775 23.6805 8.7775 22.718V18.4437C6.62088 17.1728 5.3125 14.8628 5.3125 12.3603ZM10.3164 20.5597H14.3982V19.7897H10.3164V20.5597ZM14.2079 22.8697H10.4738C10.3971 22.8697 10.2812 22.793 10.2812 22.6772V22.0997H14.363V22.6772C14.4006 22.793 14.3239 22.8697 14.2081 22.8697H14.2079ZM14.3977 17.5188L14.8218 17.2872H14.8218C16.7092 16.3247 17.8642 14.4387 17.8642 12.3588C17.8642 9.3163 15.3992 6.85291 12.3583 6.85291C9.31585 6.85291 6.85246 9.31791 6.85246 12.3588C6.85246 14.4764 8.00746 16.3638 9.89335 17.2872L10.3175 17.5188V18.2888H14.3977V17.5188Z"
+        fill="#556BDD"
+      />
+      <path
+        d="M12.3559 4.19588C12.7801 4.19588 13.1259 3.84998 13.1259 3.42588V0.77C13.1259 0.345884 12.78 0 12.3559 0C11.9318 0 11.5859 0.345899 11.5859 0.77V3.42588C11.5859 3.85 11.9318 4.19588 12.3559 4.19588Z"
+        fill="#556BDD"
+      />
+      <path
+        d="M23.9454 11.5107H21.2895C20.8654 11.5107 20.5195 11.8566 20.5195 12.2807C20.5195 12.7049 20.8654 13.0507 21.2895 13.0507H23.9454C24.3695 13.0507 24.7154 12.7048 24.7154 12.2807C24.7154 11.8581 24.368 11.5107 23.9454 11.5107Z"
+        fill="#556BDD"
+      />
+      <path
+        d="M3.42588 11.5107H0.77C0.345884 11.5107 0 11.8566 0 12.2807C0 12.7049 0.345899 13.0507 0.77 13.0507H3.42588C3.85 13.0507 4.19588 12.7048 4.19588 12.2807C4.19588 11.8581 3.84848 11.5107 3.42588 11.5107Z"
+        fill="#556BDD"
+      />
+      <path
+        d="M5.58214 4.77336L3.69625 2.88748C3.38795 2.57917 2.92625 2.57917 2.61795 2.88748C2.30964 3.19578 2.30965 3.65748 2.61795 3.96578L4.50383 5.85167C4.65723 6.00507 4.84973 6.08327 5.04221 6.08327C5.2347 6.08327 5.42721 6.00657 5.5806 5.85167C5.8904 5.54337 5.8904 5.08167 5.5821 4.77336H5.58214Z"
+        fill="#556BDD"
+      />
+      <path
+        d="M22.0978 2.88748C21.7895 2.57917 21.3278 2.57917 21.0195 2.88748L19.1336 4.77336C18.8253 5.08166 18.8253 5.54336 19.1336 5.85167C19.287 6.00507 19.4795 6.08327 19.672 6.08327C19.8644 6.08327 20.057 6.00657 20.2103 5.85167L22.0962 3.96578C22.406 3.65748 22.406 3.19578 22.0977 2.88748H22.0978Z"
+        fill="#556BDD"
+      />
+    </svg>
+    <div>${children}</div>
+  </div>
+`;
+
+export { InfoBox };

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

@@ -0,0 +1,21 @@
+.smartbox {
+  display: flex;
+  background: #f6f7fd;
+  border: 1px solid #a5b1ed;
+  box-sizing: border-box;
+  border-radius: 6px;
+  padding: 20px;
+  font-size: 13px;
+  line-height: 20px;
+  color: #333333;
+  svg {
+    margin-right: 10px;
+  }
+  a {
+    text-decoration: none;
+    color: #4250f0;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}

package/src/components/Input/BaseInput/index.ts

@@ -0,0 +1,170 @@
+import { html, Component } from 'htm/preact';
+import { forwardRef } from 'preact/compat';
+import { TagButton } from '@/components/AddTagButton';
+import HTMLContent from '@/components/HTMLContent';
+import { useState } from 'preact/hooks';
+
+import styles from './styles.module.scss';
+
+interface BaseInputProps extends Partial<HTMLInputElement> {
+  placeholder: string;
+  value: string;
+  control?: Component;
+  handleChange?: (id: string) => void;
+  handleBlur?: () => void;
+  handleFocus?: () => void;
+  isReadOnly?: boolean;
+  className?: string;
+  onAddTag?: () => void;
+  fieldId?: string;
+  showDeleteIcon?: boolean;
+  handleDeleteIconClick?: () => void;
+  isButtonEnabled?: boolean;
+  buttonText?: string;
+  onButtonClickScript?: string;
+  buttonScriptRequiresAuthToken?: boolean;
+  apiHandler?: any;
+}
+
+/**
+ * BaseInput component
+ *
+ */
+const BaseInput = forwardRef((props: BaseInputProps, ref) => {
+  const {
+    placeholder,
+    value,
+    type = 'text',
+    control,
+    handleChange = () => null,
+    handleBlur = () => null,
+    handleFocus = () => null,
+    isReadOnly = false,
+    className = '',
+    onAddTag,
+    fieldId = '',
+    id = '',
+    showDeleteIcon = false,
+    handleDeleteIconClick,
+    isButtonEnabled = false,
+    buttonText = '',
+    onButtonClickScript = '',
+    buttonScriptRequiresAuthToken = false,
+    apiHandler,
+  } = props;
+
+  const [isActionClicked, setIsActionClicked] = useState(false);
+
+  const handleInputChange = (e: MouseEvent) => {
+    if (!isReadOnly && e.currentTarget instanceof HTMLInputElement) {
+      const { value: newValue } = e.currentTarget;
+      handleChange(newValue);
+    }
+  };
+
+  const handleDateChange = (e: InputEvent) => {
+    if (
+      !isReadOnly &&
+      e.currentTarget instanceof HTMLInputElement &&
+      e.currentTarget.type === 'date'
+    ) {
+      const { value: newValue } = e.currentTarget;
+      handleChange(newValue);
+    }
+  };
+
+  const handleActionReturned = (val: string) => {
+    if (handleChange) {
+      handleChange(val);
+    }
+    setIsActionClicked(false);
+  };
+
+  const handleActionCancelled = () => {
+    setIsActionClicked(false);
+  };
+
+  return html`
+    <div
+      class=${`${styles.inputWrapper} ${className ? styles[className] : ''} ${
+        showDeleteIcon ? styles.withDeleteIcon : ''
+      }`}
+      id=${fieldId}
+      style="position: relative;"
+    >
+      <input
+        type=${type}
+        placeholder=${placeholder}
+        value=${value}
+        onkeyup=${handleInputChange}
+        onchange=${handleDateChange}
+        onblur=${handleBlur}
+        onfocus=${handleFocus}
+        readonly=${isReadOnly}
+        ref=${ref}
+        id=${id}
+        class=${`${isReadOnly ? styles.readonly : ''} ${
+          styles[className || '']
+        }`}
+      />
+      ${isButtonEnabled &&
+      html`
+        <a
+          href="#"
+          class=${styles.inputButtonLink}
+          onClick=${(e: MouseEvent) => {
+            e.preventDefault();
+            setIsActionClicked(true);
+          }}
+        >
+          ${buttonText}
+        </a>
+      `}
+      ${showDeleteIcon &&
+      html`
+        <button
+          class="${styles.removeButton}"
+          onClick=${() => {
+            if (handleDeleteIconClick) {
+              handleDeleteIconClick();
+            }
+          }}
+          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>
+      `}
+      ${onAddTag && html` <${TagButton} onClick=${onAddTag} /> `}
+      ${control && html`<${control} //>`}
+    </div>
+    ${isButtonEnabled &&
+    isActionClicked &&
+    html`<${HTMLContent}
+      htmlContent=${onButtonClickScript}
+      isAction=${true}
+      handleChange=${handleActionReturned}
+      handleCancel=${handleActionCancelled}
+      requiresAuthToken=${buttonScriptRequiresAuthToken}
+      apiHandler=${apiHandler}
+    />`}
+  `;
+});
+
+export { BaseInput, BaseInputProps };

package/src/components/Input/BaseInput/styles.module.scss

@@ -0,0 +1,94 @@
+.inputWrapper {
+  position: relative;
+  width: 100%;
+  margin-top: 8px;
+  input {
+    width: 100%;
+    color: #333;
+    display: block;
+    box-sizing: border-box;
+    appearance: none;
+    padding: 12px 12px;
+    border-radius: 4px;
+    border: 1px solid #e2e0db;
+    font-size: 14px;
+    outline: none;
+    height: 40px;
+    font-family: Inter;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 20px; /* 166.667% */
+
+    &:focus {
+      outline: none;
+    }
+    &::placeholder {
+      color: var(--black-and-grey-draft-and-tooltip-desc, #999);
+      font-family: Inter;
+      font-size: 12px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 20px; /* 166.667% */
+    }
+    &.readonly {
+      cursor: auto !important;
+    }
+  }
+  &.request-app-form-field {
+    margin-top: 6px;
+    input {
+      border: 1px solid #ada9bb;
+      border-radius: 5px;
+      height: 37px;
+      font-style: normal;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 20px;
+      color: #333333;
+      font-family: inherit;
+      &::placeholder {
+        line-height: 17px;
+        color: #8c8c8c;
+      }
+    }
+  }
+  .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;
+  }
+
+  .removeButton:hover {
+    color: #999999; /* Darker red on hover */
+  }
+  .inputButtonLink {
+    position: absolute;
+    right: 15px;
+    top: 50%;
+    transform: translateY(-50%);
+    font-size: 12px;
+    text-decoration: none;
+    color: #007bff; /* Adjust to match your theme */
+    cursor: pointer;
+  }
+}
+.withDeleteIcon {
+  border: 1px solid #e2e0db;
+  border-radius: 4px;
+  display: flex;
+  width: 95vh;
+  input {
+    border: none;
+  }
+  tags {
+    border: none;
+  }
+}