@integry/sdk 4.6.39 → 4.6.41

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

@@ -0,0 +1,337 @@
+import { html, Component } from 'htm/preact';
+import { connect } from 'unistore/preact';
+
+import { Loader } from '@/components/Loader';
+import { IntegryAPI } from '@/modules/api';
+import { Radio } from '@/components/RadioGroup/Radio';
+import { Label } from '@/components/Label';
+import { Hint } from '@/components/Tooltip';
+import { StoreType } from '@/types/store';
+import { actionFunctions } from '@/store';
+import isBrowser from '@/utils/isBrowser';
+import AppContext from '@/contexts/AppContext';
+
+import { openPopupWindow } from '@/utils/popup';
+import { AuthData, isAuthMessage } from '@/utils/isAuthMessage';
+
+import styles from './styles.module.scss';
+
+type Authorization = {
+  id: number;
+  display_name: string;
+};
+
+interface AuthSelectorPropsType extends StoreType {
+  authorizations: Authorization[];
+  selectedAuthId?: number | null;
+  onAuthSelected(authId: number | null): void;
+  apiHandler: IntegryAPI;
+  loginUrl?: string;
+  appName?: string;
+  onAuthCreated?(auth: Authorization): void;
+  onAuthDeleted?(authId: number): void;
+}
+
+interface AuthSelectorStateType {
+  isLoading: boolean;
+  fetched: boolean;
+  willDeleteAuthWithIndex: number | null;
+  isDeleting: boolean;
+}
+
+const Confirmation = (props: { callback(shouldDelete: boolean): void }) => {
+  const { callback } = props;
+  return html`
+    <div class=${styles.confirmation}>
+      <div class=${styles.confirmationText}>Are you sure?</div>
+      <button onclick=${() => callback(false)}>No</button>
+      <button onclick=${() => callback(true)}>Yes</button>
+    </div>
+  `;
+};
+
+const AuthorizationRow = (props: {
+  id: string;
+  value: string;
+  isChecked?: boolean;
+  isLoading: boolean;
+  willDelete?: boolean;
+  isDeleting?: boolean;
+  error?: string;
+  status: 'VERIFYING' | 'CONNECTED' | 'ERROR' | 'IDLE' | null;
+  handleChange?: (id: string) => void;
+  handleReverify?: () => void;
+  handleDelete?: (shouldDelete: boolean) => void;
+  handleWillDelete?: () => void;
+  isReadOnly?: boolean;
+  forcedLoading?: boolean;
+}) => {
+  const {
+    id,
+    value,
+    isChecked,
+    status = 'IDLE',
+    isDeleting = false,
+    willDelete = false,
+    handleChange,
+    handleReverify,
+    handleDelete = () => null,
+    handleWillDelete = () => null,
+    error,
+    isReadOnly,
+  } = props;
+  return html`
+    <${Hint} dismissOnClick=${false} position="top" deltaY=${0}>
+      <div
+        class="${styles.checkboxRow} ${isChecked
+          ? styles.isCheckBoxSelected
+          : ''}"
+      >
+        ${isReadOnly &&
+        html`<span
+          class=${styles.readonlyHint}
+          data-hint=${isReadOnly ? `Cannot modify user selection` : ''}
+        ></span>`}
+        <div class=${`${styles.radio} ${isReadOnly ? styles.readonly : ''}`}>
+          <${Radio}
+            id=${id}
+            value=${value}
+            isChecked=${isChecked}
+            onChange=${handleChange}
+            isDisabled=${false}
+            className="authRadio"
+          />
+        </div>
+
+        ${willDelete &&
+        !isDeleting &&
+        html` <${Confirmation} callback=${handleDelete} /> `}
+        ${!(status === 'VERIFYING' || isDeleting || willDelete) &&
+        !isReadOnly &&
+        html`
+          <div class=${styles.deleteIcon} onclick=${handleWillDelete}>
+            <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="#F05C42" />
+              <path
+                d="M11.6254 5.5498V6.2248L10.9504 13.6498H4.20039L3.52539 6.2248V5.5498"
+                stroke="#F05C42"
+                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="#F05C42"
+              />
+            </svg>
+          </div>
+        `}
+        ${isDeleting &&
+        html`
+          <div class=${styles.deletingIcon}>
+            <${Loader} size="small" />
+          </div>
+        `}
+      </div>
+    <//>
+  `;
+};
+
+class AuthSelectorV2 extends Component<
+  AuthSelectorPropsType,
+  AuthSelectorStateType
+> {
+  static contextType = AppContext;
+
+  constructor(props: AuthSelectorPropsType) {
+    super(props);
+    this.state = {
+      isLoading: false,
+      fetched: false,
+      willDeleteAuthWithIndex: null,
+      isDeleting: false,
+    };
+  }
+
+  componentDidMount() {
+    if (isBrowser())
+      window.addEventListener('message', this.onAuthResponseReceived);
+
+    let { selectedAuthId } = this.props;
+    const { authorizations } = this.props;
+
+    if (!selectedAuthId && authorizations.length > 0) {
+      selectedAuthId = authorizations[0].id;
+    }
+    let authIndex = authorizations.findIndex((el) => el.id === selectedAuthId);
+    if (authorizations.length > 0 && authIndex === -1) {
+      authIndex = 0;
+    }
+  }
+
+  componentDidUpdate(prevProps: AuthSelectorPropsType) {
+    const { selectedAuthId, authorizations } = this.props;
+
+    const authIndex = authorizations.findIndex(
+      (el) => el.id === selectedAuthId,
+    );
+  }
+
+  componentWillUnmount() {
+    if (isBrowser())
+      window.removeEventListener('message', this.onAuthResponseReceived);
+  }
+
+  private willDelete = (authIndex: number) => {
+    this.setState({
+      willDeleteAuthWithIndex: authIndex,
+    });
+  };
+
+  private deleteAuth = (authIndex: number) => {
+    const { authorizations } = this.props;
+    const auth = authorizations[authIndex];
+    this.setState({ isDeleting: true });
+
+    this.props.apiHandler
+      .deleteAuth(auth.id)
+      .then((res) => {
+        if (res?.status === 200) {
+          this.context.eventEmitter.emit('did-remove-authorization', {
+            authorizationId: Number(auth.id),
+            appId: this.props.genericData.app_id || '',
+          });
+          if (this.props.onAuthDeleted) {
+            this.props.onAuthDeleted(auth.id);
+          }
+        }
+        this.setState({ isDeleting: false });
+      })
+      .catch((err) => {
+        console.error(err);
+      })
+      .finally(() =>
+        this.setState({ willDeleteAuthWithIndex: null, isDeleting: false }),
+      );
+  };
+
+  private onAuthResponseReceived = (messageEvent: MessageEvent<AuthData>) => {
+    if (isAuthMessage(messageEvent) && messageEvent.data.activity_name) {
+      if (this.props.onAuthCreated) {
+        this.props.onAuthCreated({
+          id: Number(messageEvent.data.authorization_id),
+          display_name: messageEvent.data.user_identity,
+        });
+      }
+      this.context.eventEmitter.emit('did-add-authorization', {
+        identity: messageEvent.data.user_identity,
+        authorizationId: Number(messageEvent.data.authorization_id),
+        flowId: this.props.genericData.templateId,
+        alreadyExists: messageEvent.data.already_exists,
+        externalId: messageEvent.data.external_id,
+      });
+    }
+  };
+
+  public openAuthWindow = () => {
+    if (this.props.loginUrl) {
+      const { loginUrl } = this.props;
+      openPopupWindow(loginUrl, 'Auth Window', window, 800, 600);
+    }
+  };
+
+  render() {
+    const { authorizations, appName } = this.props;
+
+    return html`
+      <div
+        class="${styles.authSelectorWrapV2} integry-container__auth-selector"
+      >
+        <div class="${styles.authSelectorHeader}">
+          <${Label}
+            title="Connect account"
+            description=${`Select your ${appName || ''} account`}
+            isRequired=${true}
+          />
+        </div>
+        <div class=${styles.rows}>
+          ${authorizations.map(
+            (el, index) => html`<${AuthorizationRow}
+              id=${el.id}
+              value=${el.display_name}
+              status=${`CONNECTED`}
+              isChecked=${el.id === this.props.selectedAuthId}
+              willDelete=${this.state.willDeleteAuthWithIndex === index}
+              handleChange=${(id: string) => {
+                this.props.onAuthSelected(Number(id));
+              }}
+              handleDelete=${(shouldDelete: boolean) =>
+                shouldDelete
+                  ? this.deleteAuth(index)
+                  : this.setState({ willDeleteAuthWithIndex: null })}
+              handleWillDelete=${() => this.willDelete(index)}
+              isDeleting=${this.state.isDeleting}
+            />`,
+          )}
+        </div>
+        ${true &&
+        html`
+          <div>
+            <${Hint}
+              dismissOnClick=${false}
+              position="bottom-right"
+              deltaY=${0}
+            >
+              ${true &&
+              html`<div
+                data-hint=${this.props.genericData.isPreviewMode &&
+                'New accounts cannot be added in preview mode'}
+                class=${styles.addAccountCTA}
+                onClick=${() => {
+                  if (
+                    !this.props.genericData.isPreviewMode &&
+                    !(
+                      this.state.isLoading ||
+                      this.props.genericData.isPreviewMode
+                    )
+                  ) {
+                    this.openAuthWindow();
+                  }
+                }}
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="16"
+                  height="16"
+                  viewBox="0 0 16 16"
+                  fill="none"
+                >
+                  <path
+                    d="M7.94453 7.94417V8.44417H8.44453V7.94417H7.94453ZM7.94453 8.44417H8.44453V7.94417H7.94453V8.44417ZM8.44453 8.44417V7.94417H7.94453V8.44417H8.44453ZM8.44453 7.94417H7.94453V8.44417H8.44453V7.94417ZM8.19453 3.64417C8.05646 3.64417 7.94453 3.53224 7.94453 3.39417H8.94453C8.94453 2.97995 8.60874 2.64417 8.19453 2.64417V3.64417ZM8.44453 3.39417C8.44453 3.53224 8.3326 3.64417 8.19453 3.64417V2.64417C7.78032 2.64417 7.44453 2.97995 7.44453 3.39417H8.44453ZM8.44453 7.94417V3.39417H7.44453V7.94417H8.44453ZM3.39453 8.44417H7.94453V7.44417H3.39453V8.44417ZM3.64453 8.19417C3.64453 8.33224 3.5326 8.44417 3.39453 8.44417V7.44417C2.98032 7.44417 2.64453 7.77995 2.64453 8.19417H3.64453ZM3.39453 7.94417C3.5326 7.94417 3.64453 8.05609 3.64453 8.19417H2.64453C2.64453 8.60838 2.98032 8.94417 3.39453 8.94417V7.94417ZM7.94453 7.94417H3.39453V8.94417H7.94453V7.94417ZM8.44453 12.9942V8.44417H7.44453V12.9942H8.44453ZM8.19453 12.7442C8.3326 12.7442 8.44453 12.8561 8.44453 12.9942H7.44453C7.44453 13.4084 7.78032 13.7442 8.19453 13.7442V12.7442ZM7.94453 12.9942C7.94453 12.8561 8.05646 12.7442 8.19453 12.7442V13.7442C8.60874 13.7442 8.94453 13.4084 8.94453 12.9942H7.94453ZM7.94453 8.44417V12.9942H8.94453V8.44417H7.94453ZM12.9945 7.94417H8.44453V8.94417H12.9945V7.94417ZM12.7445 8.19417C12.7445 8.05609 12.8565 7.94417 12.9945 7.94417V8.94417C13.4087 8.94417 13.7445 8.60838 13.7445 8.19417H12.7445ZM12.9945 8.44417C12.8565 8.44417 12.7445 8.33224 12.7445 8.19417H13.7445C13.7445 7.77995 13.4087 7.44417 12.9945 7.44417V8.44417ZM8.44453 8.44417H12.9945V7.44417H8.44453V8.44417ZM7.94453 3.39417V7.94417H8.94453V3.39417H7.94453Z"
+                    fill="#333333"
+                  />
+                </svg>
+
+                <span>${`Add account`}</span>
+              </div>`}
+            <//>
+          </div>
+        `}
+      </div>
+    `;
+  }
+}
+
+export default connect<
+  AuthSelectorPropsType,
+  AuthSelectorStateType,
+  StoreType,
+  unknown
+>(
+  ['stepMapping', 'genericData'],
+  actionFunctions,
+)(AuthSelectorV2);

package/src/features/common/AuthSelectorV2/styles.module.scss

@@ -0,0 +1,232 @@
+.authSelectorWrapV2 {
+  .label {
+    font-weight: 800;
+    font-size: 14px;
+    color: #333333;
+    line-height: 20px;
+    margin-bottom: 5px;
+
+    span {
+      color: #ff4d34;
+      margin-left: 2px;
+      font-size: 16px;
+    }
+  }
+
+  .confirmation {
+    display: flex;
+    align-items: center;
+    .confirmationText {
+      font-size: 12px;
+    }
+    // width: 35%;
+    button {
+      cursor: pointer;
+      -webkit-appearance: button;
+      font-weight: 500;
+      font-size: 12px;
+      line-height: 15px;
+      /* identical to box height */
+      padding: 4px 12px;
+
+      text-align: center;
+      border-radius: 12px;
+      border: 0;
+      outline: none;
+
+      color: #7e7a8f;
+      background-color: #f1f1f1;
+
+      &:nth-child(2) {
+        color: #7e7a8f;
+        margin-left: 10px;
+        margin-right: 10px;
+      }
+      &:nth-child(3) {
+        color: #ffffff;
+        background-color: #f05c42;
+      }
+    }
+  }
+  .rows {
+    margin-top: 10px;
+    margin-bottom: 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .error {
+    color: #f05c42;
+    button {
+      color: #f05c42;
+      border-color: #f05c42;
+    }
+  }
+
+  .errorMessage {
+    margin-top: 4px;
+    font-size: 12px;
+    line-height: 15px;
+    letter-spacing: -0.197647px;
+    color: #f05c42;
+  }
+
+  .description {
+    font-size: 14px;
+    line-height: 20px;
+    color: #8c8c8c;
+    margin-bottom: 10px;
+  }
+
+  .checkboxRow {
+    display: flex;
+    align-items: center;
+    color: #333;
+    font-size: 14px;
+    border-radius: 4px;
+    border: 1px solid var(--Gray-5, #e0e0e0);
+    background: #fff;
+    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.08);
+    padding: 0 16px;
+    max-height: 48px;
+    min-height: 48px;
+
+    .radio {
+      // width: 45%;
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+
+      .authRadio {
+        margin: 0;
+      }
+
+      &.readonly {
+        // width: 70%;
+      }
+    }
+    .deleteIcon {
+      width: 20px;
+      // padding-left: 8px;
+      // padding-right: 8px;
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+      svg {
+        cursor: pointer;
+        visibility: hidden;
+        user-select: none;
+      }
+    }
+    .statusWrap {
+      display: flex;
+      align-items: center;
+      font-size: 12px;
+      width: 20px;
+      &.readonly {
+        // width: 30%;
+        width: 20px;
+      }
+      .status {
+        position: relative;
+        width: 200px;
+        div {
+          display: flex;
+          align-items: center;
+        }
+        svg {
+          margin-left: 8px;
+        }
+        .statusRed,
+        .statusOrange,
+        .statusGreen {
+          width: 5px;
+          height: 5px;
+          border-radius: 9999px;
+          margin: 0 8px;
+        }
+        .statusRed {
+          background: #e26154;
+        }
+        .statusOrange {
+          background: #fcc700;
+        }
+
+        .statusGreen {
+          background: #2ecc71;
+        }
+
+        span {
+          margin-left: 10px;
+        }
+        .resend {
+          cursor: pointer;
+        }
+      }
+    }
+    &:hover {
+      .deleteIcon svg {
+        visibility: visible;
+        user-select: auto;
+      }
+    }
+    .readonlyHint {
+      position: absolute;
+      width: 40%;
+      height: -webkit-fill-available;
+      z-index: 99;
+      margin: 10px 0px;
+    }
+
+    &:hover {
+      border: 1px solid var(--theme-accent-blue-1, #4250f0);
+      box-shadow: 0px 0px 8px 0px rgba(66, 80, 240, 0.16);
+    }
+    [class^='styles-module_text_'] {
+      font-size: 12px;
+    }
+  }
+
+  .isCheckBoxSelected {
+    border: 1px solid var(--theme-accent-blue-1, #4250f0);
+    box-shadow: 0px 0px 8px 0px rgba(66, 80, 240, 0.16);
+  }
+
+  .addAccountCTA {
+    border-radius: 4px;
+    border: 1px solid var(--Gray-5, #e0e0e0);
+    background: #fff;
+    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.08);
+    color: var(--black-and-grey-title-and-desc, #333);
+    font-feature-settings: 'clig' off, 'liga' off;
+    font-family: Inter;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+    padding: 16px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 8px;
+    cursor: pointer;
+
+    &:hover {
+      border: 1px solid var(--theme-accent-blue-1, #4250f0);
+      box-shadow: 0px 0px 8px 0px rgba(66, 80, 240, 0.16);
+    }
+  }
+  .authSelectorHeader {
+    label {
+      div:first-child {
+        font-size: 13px;
+      }
+      div:nth-child(2) {
+        font-size: 11px;
+      }
+    }
+  }
+}

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

@@ -4,25 +4,16 @@ import { connect } from 'unistore/preact';
 import { useContext } from 'preact/hooks';
 // import DOMPurify from 'dompurify';
 import { ListBox } from '@/components/MultipurposeField/Dropdown';
-import AppPageLoader from '@/features/containers/AppFlowContainer/AppFlowWrap/app-page-loader';
 import { actionFunctions } from '@/store';
-import MappingUI from '@/features/common/MappingUI';
 import { Button } from '@/components/Button';
 import { StoreType } from '@/types/store';
-import { DateInput, Input, PasswordInput } from '@/components/Input';
-import HTMLContent from '@/components/HTMLContent';
-import TextContent from '@/components/TextContent';
 import { MultipurposeField } from '@/components/MultipurposeField';
 import DynamicTypedField from '@/features/common/DynamicTypedField';
-import SectionField from '@/features/common/SectionField';
-import { TimeInput } from '@/components/TimeInput';
-import NewMappingUI from '@/features/common/NewMappingUI';
-import { areParentValuesValid, getFieldLabelTags } from '@/utils/stepUtils';
 import ConfigureFieldWrapper from '@/components/ConfigureFieldWrapper';
-import { TextArea } from '@/components/TextArea';
 import { CheckboxGroup } from '@/components/CheckboxGroup';
 import AppContext from '@/contexts/AppContext';
-import { ObjectField } from '@/components/form';
+import { ObjectField } from '@/components/form/ObjectField';
+import { LargeLoader } from '@/components/LargeLoader';
 import {
   JSONToActivityOutputData,
   JSONToDynamicFieldData,
@@ -39,6 +30,7 @@ interface FunctionFormPropsType extends StoreType {
   autoMapVars: boolean;
   onClose: (response: any) => void;
   apiHandler: any;
+  customSaveCallback?: (response: any) => void; // Optional callback: Helps the implementor to implement their own save button
 }
 
 interface ActionFormStateType {
@@ -159,7 +151,7 @@ class FunctionForm extends Component<
     return arr;
   };
 
-  private onSubmit = () => {
+  private onSubmit = (event: any, returnResponse = false) => {
     this.setState({ isSubmitting: true });
     const { functionName } = this.props;
     const { functionDetails } = this.state;
@@ -237,7 +229,12 @@ class FunctionForm extends Component<
       }
     });
 
+    if (returnResponse) {
+      return args;
+    }
+
     this.props.onClose(args);
+    return args;
   };
 
   parseJsonArray = (input: string): any[] => {
@@ -307,6 +304,9 @@ class FunctionForm extends Component<
     });
 
     const isValid = true;
+    let hasInvalidFields = Object.keys(this.state.dynamicFieldDataState).some(
+      (key) => key !== fieldId && this.state.invalidFields.includes(key),
+    );
 
     if (value && isValid) {
       this.setState({
@@ -315,6 +315,7 @@ class FunctionForm extends Component<
         ),
       });
     } else if (isRequired) {
+      hasInvalidFields = true;
       this.setState((prevState) => ({
         invalidFields: prevState.invalidFields.includes(fieldId)
           ? prevState.invalidFields
@@ -326,6 +327,13 @@ class FunctionForm extends Component<
     if (this.state.parentFields.includes(fieldId)) {
       this.setState({ parentFieldsChanged: !this.state.parentFieldsChanged });
     }
+
+    if (this.props.customSaveCallback) {
+      this.props.customSaveCallback({
+        hasInvalidFields,
+        data: this.onSubmit({}, true),
+      });
+    }
   };
 
   replacePlaceholders = (
@@ -793,8 +801,8 @@ class FunctionForm extends Component<
 
     return html`
       ${this.state.loading
-        ? html`<div>
-            <${AppPageLoader} renderMode=${`MODAL`} />
+        ? html`<div class="${styles.functionFormLoader}">
+            <${LargeLoader} />
           </div>`
         : functionDetails &&
           functionDetails.meta &&

package/src/features/common/FunctionForm/styles.module.scss

@@ -8,6 +8,12 @@
     color: #999999;
   }
 }
+.functionFormLoader {
+  display: flex;
+  justify-content: center;
+  min-height: 100px;
+  align-items: center;
+}
 .functionFormWrap {
   padding: 5px 20px;
   font-family: 'Inter';