@integry/sdk 4.5.2 → 4.5.4

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

@@ -0,0 +1,706 @@
+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 { Button, ButtonTypes } from '@/components/Button';
+import { ErrorMessage } from '@/components/ErrorMessage';
+import { Label } from '@/components/Label';
+import { Hint } from '@/components/Tooltip';
+import { Authorization, 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';
+
+interface AuthSelectorPropsType extends StoreType {
+  stepId: number;
+  apiHandler: IntegryAPI;
+  showErrors?: boolean;
+  onAuthSelected(
+    authId: number | null,
+    isVerified: boolean,
+    override: boolean,
+  ): void;
+  forcedLoading?: boolean;
+  isReadOnly?: boolean;
+}
+
+interface AuthSelectorStateType {
+  isLoading: boolean;
+  fetched: boolean;
+  willDeleteAuthWithIndex: number | null;
+  gottoNextStepAfterAuth: boolean;
+  isSelfApp: 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 Resend = () => html`
+  <svg
+    class=${styles.resend}
+    width="13"
+    height="15"
+    viewBox="0 0 13 15"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M11.8403 5.34L10.1453 6.345C10.5053 6.96 10.7003 7.68 10.7003 8.445C10.7003 10.77 8.81031 12.645 6.50031 12.645C4.19031 12.645 2.30031 10.755 2.30031 8.445C2.30031 6.135 4.19031 4.245 6.50031 4.245V6.15L11.1053 3.27L6.50031 0.375V2.28C3.09531 2.28 0.320312 5.055 0.320312 8.46C0.320313 11.85 3.09531 14.625 6.50031 14.625C9.90531 14.625 12.6803 11.85 12.6803 8.445C12.6803 7.32 12.3653 6.255 11.8403 5.34Z"
+      fill="#8D8D8D"
+    />
+  </svg>
+`;
+
+const STATUS_ICON = {
+  connected: html` <svg
+    data-hint="Connected"
+    xmlns="http://www.w3.org/2000/svg"
+    width="12"
+    height="12"
+    viewBox="0 0 12 12"
+    fill="none"
+  >
+    <path
+      d="M5.07595 8.71074C4.99537 8.71124 4.91558 8.69526 4.8414 8.66377C4.76723 8.63229 4.70025 8.58597 4.64465 8.52767L2.70076 6.55521C2.64173 6.49997 2.59474 6.43321 2.56257 6.35906C2.5304 6.28491 2.51367 6.20495 2.51367 6.12412C2.51367 6.0433 2.5304 5.96334 2.56257 5.88919C2.59474 5.81503 2.64173 5.74827 2.70076 5.69303C2.75596 5.63496 2.82243 5.58871 2.89607 5.55711C2.96971 5.52551 3.04904 5.50921 3.12918 5.50921C3.20932 5.50921 3.2885 5.52551 3.36214 5.55711C3.43578 5.58871 3.50225 5.63496 3.55745 5.69303L5.02272 7.1812L8.04198 3.50208C8.09133 3.43834 8.15314 3.38537 8.22373 3.34644C8.29433 3.3075 8.37226 3.28343 8.45251 3.27568C8.53277 3.26794 8.61363 3.2767 8.69038 3.30142C8.76712 3.32613 8.83804 3.36627 8.89867 3.41939C8.96243 3.46871 9.0155 3.53057 9.05446 3.60113C9.09341 3.67169 9.11739 3.74947 9.12514 3.82968C9.13289 3.9099 9.12419 3.99084 9.09946 4.06754C9.07474 4.14425 9.03461 4.21509 8.98147 4.2757L5.53682 8.4745C5.48369 8.54182 5.41645 8.59676 5.33992 8.63552C5.2634 8.67427 5.17943 8.69591 5.09369 8.69892L5.07595 8.71074Z"
+      fill="#7ED321"
+    />
+    <path
+      d="M6.00303 12C4.41143 11.9984 2.8854 11.3658 1.75997 10.2409C0.634541 9.11601 0.00156423 7.5908 0 5.99998C0.00156423 4.40916 0.634541 2.88395 1.75997 1.75907C2.8854 0.634194 4.41143 0.00156346 6.00303 0C7.5936 0.00312568 9.11804 0.636454 10.2422 1.76116C11.3663 2.88587 11.9984 4.41018 12 5.99998C11.9984 7.58978 11.3663 9.11413 10.2422 10.2388C9.11804 11.3635 7.5936 11.9969 6.00303 12ZM6.00303 0.885826C4.64648 0.887389 3.34595 1.4267 2.38673 2.38545C1.4275 3.34421 0.887824 4.6441 0.88626 5.99998C0.88626 7.35634 1.42544 8.65715 2.385 9.61624C3.34456 10.5753 4.646 11.1142 6.00303 11.1142C7.35903 11.1126 8.65888 10.5731 9.61717 9.61415C10.5755 8.65523 11.1137 7.35532 11.1137 5.99998C11.1122 4.64512 10.5734 3.34613 9.61543 2.38754C8.65749 1.42896 7.35855 0.888951 6.00303 0.885826Z"
+      fill="#7ED321"
+    />
+  </svg>`,
+  error: html` <svg
+    data-hint="${'Could not authorize'}"
+    xmlns="http://www.w3.org/2000/svg"
+    width="12"
+    height="12"
+    viewBox="0 0 12 12"
+    fill="none"
+  >
+    <path
+      d="M5.99833 0.891429C6.08866 0.891429 6.31281 0.918857 6.43659 1.16571L11.0702 10.3749C11.1839 10.6011 11.0969 10.7966 11.0535 10.8686C11.01 10.9406 10.8828 11.112 10.6319 11.112H1.36474C1.11382 11.112 0.986692 10.944 0.9432 10.8686C0.899708 10.7966 0.812723 10.6011 0.926472 10.3749L5.56006 1.16571C5.68385 0.918857 5.908 0.891429 5.99833 0.891429ZM5.99833 0C5.51991 0 5.0415 0.250286 4.78724 0.754286L0.15365 9.96343C-0.314727 10.8926 0.344346 12 1.36474 12H10.6353C11.6557 12 12.3147 10.8926 11.8464 9.96343L7.20942 0.754286C6.95515 0.250286 6.47674 0 5.99833 0Z"
+      fill="#F05C42"
+    />
+    <path
+      d="M5.99494 8.71924C5.83435 8.71924 5.70053 8.77752 5.59013 8.89067C5.47973 9.00381 5.42285 9.14095 5.42285 9.3021C5.42285 9.48724 5.47973 9.63124 5.59682 9.7341C5.71391 9.83695 5.84774 9.88838 6.00163 9.88838C6.15553 9.88838 6.286 9.83695 6.4031 9.73067C6.51685 9.62781 6.57372 9.48381 6.57372 9.3021C6.57372 9.14095 6.51685 9.00381 6.4031 8.89067C6.29269 8.7741 6.15553 8.71924 5.99494 8.71924Z"
+      fill="#F05C42"
+    />
+    <path
+      d="M5.99923 3.9668C5.68474 3.9668 5.43048 4.23423 5.44386 4.55651L5.54423 7.57708C5.55092 7.8308 5.755 8.03308 6.00257 8.03308C6.25014 8.03308 6.45422 7.8308 6.46091 7.57708L6.55793 4.55651C6.56797 4.23423 6.31371 3.9668 5.99923 3.9668Z"
+      fill="#F05C42"
+    />
+  </svg>`,
+};
+
+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`
+    <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=${html`
+            <div
+              style="display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px;"
+            >
+              <span
+                style="font-size: 12px; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: normal;"
+                >${value}</span
+              >
+              <div class=${styles.status} style="margin-bottom: -2px;">
+                ${isReadOnly
+                  ? html`
+                      ${false &&
+                      isChecked &&
+                      html`<div>
+                        <div class=${styles.statusGreen} />
+                        Connected
+                      </div>`}
+                    `
+                  : html`
+                      <div
+                        class="${styles.statusIcon}"
+                        style="display: flex;flex-direction: row;align-items: center;justify-content: flex-start;"
+                      >
+                        ${false &&
+                        status === 'VERIFYING' &&
+                        !isDeleting &&
+                        html`<div class=${styles.statusOrange} />
+                          <${Loader} /> `}
+                        ${status === 'VERIFYING' &&
+                        !isDeleting &&
+                        html`<${Loader} size="sm" /> `}
+                      </div>
+                      <div
+                        class="${styles.statusIcon}"
+                        style="display: flex;flex-direction: row;align-items: center;justify-content: flex-start;"
+                      >
+                        ${status === 'CONNECTED' &&
+                        !error &&
+                        !isDeleting &&
+                        false &&
+                        html`<div class=${styles.statusGreen} />
+                          Connected`}
+                        ${status === 'CONNECTED' &&
+                        !error &&
+                        !isDeleting &&
+                        STATUS_ICON.connected}
+                      </div>
+                      <div
+                        class="${styles.statusIcon}"
+                        style="display: flex;flex-direction: row;align-items: center;justify-content: flex-start;"
+                      >
+                        ${status === 'ERROR' &&
+                        !isDeleting &&
+                        false &&
+                        html`<div class=${styles.statusRed} />
+                          Failed
+                          ${!isReadOnly &&
+                          html`<div onclick=${handleReverify}>
+                            <${Resend} />
+                          </div>`} `}
+                        ${status === 'ERROR' &&
+                        !isDeleting &&
+                        false &&
+                        html`${STATUS_ICON.error}
+                        ${!isReadOnly &&
+                        html`<div onclick=${handleReverify}>
+                          <${Resend} />
+                        </div>`} `}
+                      </div>
+                      ${isDeleting && html`<${Loader} />`}
+                      ${error &&
+                      !isDeleting &&
+                      !(status === 'VERIFYING') &&
+                      html`<div class=${styles.error}>${error}</div>`}
+                    `}
+              </div>
+            </div>
+          `}
+          isChecked=${isChecked}
+          onChange=${handleChange}
+          isDisabled=${isReadOnly}
+          className="authRadio"
+        />
+      </div>
+      <div
+        class=${`${styles.statusWrap} ${isReadOnly ? styles.readonly : ''}`}
+      ></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>
+      `}
+    </div>
+  `;
+};
+
+class AuthSelector extends Component<
+  AuthSelectorPropsType,
+  AuthSelectorStateType
+> {
+  static contextType = AppContext;
+
+  constructor(props: AuthSelectorPropsType) {
+    super(props);
+    this.state = {
+      isLoading: false,
+      fetched: false,
+      willDeleteAuthWithIndex: null,
+      gottoNextStepAfterAuth: false,
+      isSelfApp: false,
+    };
+  }
+
+  componentDidMount() {
+    if (isBrowser())
+      window.addEventListener('message', this.onAuthResponseReceived);
+
+    // in preview mode, auto-verify the auth we pass
+    const { stepId, stepMapping, selectedAuthByAppId } = this.props;
+    const stepAppId = stepMapping[stepId].step.authorization_type.app.id;
+    const selectedAuthIdOfApp = selectedAuthByAppId[stepAppId];
+    let auth = stepMapping[stepId].selectedAuthId;
+
+    if (
+      stepMapping[stepId].step.authorization_type.app.id ===
+      this.props.genericData.selfAppId
+    ) {
+      this.setState({ isSelfApp: true });
+      let openAuthWindow = false;
+      if (
+        !this.props.genericData.userVariablesValidation &&
+        stepMapping[stepId].authorizations.length === 0
+      ) {
+        openAuthWindow = true;
+        this.setState({ gottoNextStepAfterAuth: true });
+      }
+
+      if (openAuthWindow) {
+        this.openAuthWindow();
+      }
+    }
+
+    if (!auth && stepMapping[stepId].authorizations.length > 0) {
+      auth =
+        selectedAuthIdOfApp ||
+        stepMapping[stepId].authorizations[0].authorizationId;
+    }
+    let authIndex = stepMapping[stepId].authorizations.findIndex(
+      (el) => el.authorizationId === auth,
+    );
+    if (stepMapping[stepId].authorizations.length > 0 && authIndex === -1) {
+      authIndex = 0; // if the selected auth is not in the list, we select the first one
+    }
+    const authStatus = this.getAuthStatus(
+      stepMapping[stepId].authorizations[authIndex] || auth,
+    );
+    // auth is selected but is in idle state
+    if (stepMapping[stepId].selectedAuthId && authStatus === 'IDLE') {
+      this.verifyAuth(authIndex, true);
+    } else if (!stepMapping[stepId].selectedAuthId && authIndex !== -1) {
+      this.verifyAuth(authIndex, true); // if not auth is selected in the step. we verify the auth at authIndex
+    } else if (auth) {
+      this.verifyAuth(0, true);
+    }
+    const visibleFields = this.props.stepMapping[
+      stepId
+    ].step.template_fields.filter((field: any) => field.is_visible === true);
+
+    if (stepMapping[stepId].step.activity.type !== 'MAKE_HTTP_CALL') {
+      if (
+        visibleFields.length !== 0 || // if there are visible fields
+        (stepMapping[stepId].step.authorization_type.app.id ===
+          this.props.genericData.selfAppId && // or if the selfApp(app whose flow are being listed) is the same as the app of the step
+          stepMapping[stepId].authorizations.length > 0) // and there are authorizations of that app
+      ) {
+        if (stepMapping[stepId].authorizations.length) {
+          this.props.onAuthSelected(
+            // select the first auth automatically and skip the auth selection step
+            stepMapping[stepId].authorizations[authIndex].authorizationId,
+            true,
+            true,
+          );
+        }
+        if (
+          !this.props.genericData.isTestIntegration ||
+          (this.props.genericData.isTestIntegration &&
+            stepMapping[stepId].step.authorization_type.app.id !==
+              this.props.genericData.selfAppId)
+        ) {
+          this.props.gotoNextStep();
+        }
+      }
+    }
+  }
+
+  componentDidUpdate(prevProps: AuthSelectorPropsType) {
+    const { stepId, stepMapping } = this.props;
+    const step = stepMapping[stepId];
+    const authId = step.selectedAuthId;
+
+    const authIndex = stepMapping[stepId].authorizations.findIndex(
+      (el) => el.authorizationId === authId,
+    );
+
+    const auth = stepMapping[stepId].authorizations[authIndex];
+
+    const authStatus = this.getAuthStatus(
+      stepMapping[stepId].authorizations[authIndex],
+    );
+
+    // verify auth whenever we select a new one
+    // if (authId !== prevProps.stepMapping[stepId].selectedAuthId && authIndex) {
+    //   console.log('verifying 1');
+
+    //   this.verifyAuth(authIndex);
+    // }
+    if (
+      step.authorizations.length ===
+      prevProps.stepMapping[stepId].authorizations.length + 1
+    ) {
+      // auth was added so we verify
+      this.verifyAuth(step.authorizations.length - 1);
+    }
+    // verify auth in edit mode when step changes
+    if (
+      authStatus === 'IDLE' &&
+      !auth.isVerifying &&
+      !auth.isVerified &&
+      !this.state.isLoading
+    ) {
+      this.verifyAuth(authIndex, true);
+    }
+  }
+
+  componentWillUnmount() {
+    if (isBrowser())
+      window.removeEventListener('message', this.onAuthResponseReceived);
+  }
+
+  private verifyAuth = (authIndex: number, override?: boolean) => {
+    const { stepId } = this.props;
+    const auth = this.props.stepMapping[stepId].authorizations[authIndex];
+
+    if (!auth) return;
+
+    const isAuthVerifiedInPreviewMode =
+      !this.props.genericData.isPreviewMode && auth.isVerified;
+    const hideAuhtorizationStatus = !this.props.stepMapping[stepId]
+      .isUserinfoRequired;
+
+    if (isAuthVerifiedInPreviewMode || hideAuhtorizationStatus) {
+      this.props.onAuthSelected(auth.authorizationId, true, !!override);
+      this.context.eventEmitter.emit('did-select-authorization', {
+        authorizationId: Number(auth.authorizationId),
+      });
+      return;
+    }
+
+    this.setState({ isLoading: true });
+    this.props.toggleVerifyAuthorizationFlag({
+      stepId,
+      authId: auth.authorizationId,
+      isVerifying: true,
+    });
+
+    this.props.apiHandler
+      .verifyOAuth(auth.authorizationId)
+      .then((res) => {
+        if (res) {
+          this.props.onAuthSelected(auth.authorizationId, true, !!override);
+          this.context.eventEmitter.emit('did-select-authorization', {
+            authorizationId: Number(auth.authorizationId),
+          });
+        } else {
+          this.props.onAuthSelected(auth.authorizationId, false, !!override);
+        }
+      })
+      .catch((err) => console.error(err))
+      .finally(() => {
+        this.props.toggleVerifyAuthorizationFlag({
+          stepId,
+          authId: auth.authorizationId,
+          isVerifying: false,
+        });
+        this.setState({ isLoading: false });
+      });
+  };
+
+  private willDelete = (authIndex: number) => {
+    this.setState({
+      willDeleteAuthWithIndex: authIndex,
+    });
+  };
+
+  private deleteAuth = (authIndex: number) => {
+    const { stepId } = this.props;
+    const auth = this.props.stepMapping[stepId].authorizations[authIndex];
+
+    this.props.toggleDeleteAuthorizationFlag({
+      stepId,
+      authId: auth.authorizationId,
+      isDeleting: true,
+      error: '',
+    });
+
+    this.context.eventEmitter.emit('did-begin-remove-authorization', {
+      authorizationId: Number(auth.authorizationId),
+    });
+
+    this.props.apiHandler
+      .deleteAuth(auth.authorizationId)
+      .then((res) => {
+        if (res?.status === 200) {
+          this.props.removeAuthorization({
+            stepId,
+            authId: auth.authorizationId,
+          });
+          this.context.eventEmitter.emit('did-remove-authorization', {
+            authorizationId: Number(auth.authorizationId),
+            appId: this.props.genericData.app_id || '',
+          });
+        } else if (res?.status === 405) {
+          // we have a deletion error
+          this.props.toggleDeleteAuthorizationFlag({
+            stepId,
+            authId: auth.authorizationId,
+            isDeleting: false,
+            error: `${res.data}`,
+          });
+        } else {
+          this.props.toggleDeleteAuthorizationFlag({
+            stepId,
+            authId: auth.authorizationId,
+            isDeleting: false,
+            error: 'An unexpected error occurred',
+          });
+        }
+      })
+      .catch((err) => {
+        console.error(err);
+      })
+      .finally(() => this.setState({ willDeleteAuthWithIndex: null }));
+  };
+
+  private onAuthResponseReceived = (messageEvent: MessageEvent<AuthData>) => {
+    if (isAuthMessage(messageEvent) && messageEvent.data.activity_name) {
+      console.info(messageEvent.data);
+      if (this.props.stepId) {
+        const { stepId } = this.props;
+        const authApp = this.props.stepMapping[stepId]?.step?.activity?.app;
+        if (!messageEvent.data.already_exists) {
+          this.props.addAuthorization({
+            stepId: this.props.stepId,
+            authData: {
+              authorizationId: messageEvent.data.authorization_id,
+              userIdentity: messageEvent.data.user_identity,
+              disableLink: '',
+              authType: '',
+              isVerified: false,
+              didFetchStatus: false,
+              isVerifying: false,
+              isDeleting: false,
+              error: '',
+            },
+          });
+        } else {
+          this.props.setStepAuthId({
+            stepId: this.props.stepId,
+            authId: Number(messageEvent.data.authorization_id),
+          });
+        }
+        this.context.eventEmitter.emit('did-add-authorization', {
+          identity: messageEvent.data.user_identity,
+          authorizationId: Number(messageEvent.data.authorization_id),
+          flowId: this.props.genericData.templateId,
+          appId: authApp.id || '',
+          appName: authApp?.name,
+          appIcon: authApp?.icon_url,
+          alreadyExists: messageEvent.data.already_exists,
+          externalId: messageEvent.data.external_id,
+        });
+
+        if (this.state.gottoNextStepAfterAuth) {
+          this.props.gotoNextStep();
+        }
+      }
+    }
+  };
+
+  private getAuthStatus = (auth: Authorization) => {
+    const { stepId } = this.props;
+    if (!auth) return null;
+    let status = 'IDLE';
+    const hideAuhtorizationStatus = !this.props.stepMapping[stepId]
+      .isUserinfoRequired;
+    if (hideAuhtorizationStatus) {
+      return status;
+    }
+    if (auth.isVerified && auth.didFetchStatus) status = 'CONNECTED';
+    if (!auth.isVerified && auth.didFetchStatus) status = 'ERROR';
+    if (auth.isVerifying) status = 'VERIFYING';
+    return status;
+  };
+
+  private getError = () => {
+    const { stepId } = this.props;
+    const step = this.props.stepMapping[stepId];
+    if (!step.authorizations) {
+      return `Please add a valid ${
+        step.step.authorization_type.app?.name || step.step.activity.app.name
+      } account`;
+    }
+    return `Please select a valid ${
+      step.step.authorization_type.app?.name || step.step.activity.app.name
+    } account`;
+  };
+
+  public openAuthWindow = () => {
+    const { stepMapping, stepId } = this.props;
+    const selectedStep = stepMapping[stepId].step;
+    if (selectedStep) {
+      const url = this.context.apiHandler.getAuthUrl(
+        selectedStep.authorization_type.id,
+      );
+      openPopupWindow(url, 'Auth Window', window, 800, 600);
+    }
+  };
+
+  render() {
+    const { stepId, showErrors = false, forcedLoading = false } = this.props;
+    const step = this.props.stepMapping[stepId];
+    const { authorizations } = step;
+    const isReadOnly = this.context?.isReadOnly || this.props.isReadOnly;
+    if (forcedLoading) {
+      return html`
+        <div style="margin-top:-74px; display: flex; justify-content: center;">
+          <${Loader} />
+        </div>
+      `;
+    }
+    return html`
+      <div class="${styles.authSelectorWrap} integry-container__auth-selector">
+        ${false &&
+        html` <${Label}
+          title="Connect account"
+          description=${`Select your ${
+            step.step.authorization_type.app?.name ||
+            step.step.activity.app.name
+          } account`}
+          isRequired=${true}
+        />`}
+        <div class=${styles.rows} style="margin-bottom: 8px;">
+          ${authorizations.map(
+            (el, index) => html`<${AuthorizationRow}
+              id=${el.authorizationId}
+              value=${el.userIdentity}
+              status=${this.getAuthStatus(el)}
+              isChecked=${el.authorizationId === step.selectedAuthId}
+              isDeleting=${el.isDeleting}
+              willDelete=${this.state.willDeleteAuthWithIndex === index}
+              error=${el.error}
+              handleChange=${() => this.verifyAuth(index)}
+              handleReverify=${() => this.verifyAuth(index)}
+              handleDelete=${(shouldDelete: boolean) =>
+                shouldDelete
+                  ? this.deleteAuth(index)
+                  : this.setState({ willDeleteAuthWithIndex: null })}
+              handleWillDelete=${() => this.willDelete(index)}
+              isReadOnly=${isReadOnly}
+            />`,
+          )}
+        </div>
+        ${(!isReadOnly || this.props.genericData.isTestIntegration) &&
+        html`
+          <div class=${showErrors ? `${styles.error}` : ''}>
+            <${Hint}
+              dismissOnClick=${false}
+              position="bottom-right"
+              deltaY=${0}
+            >
+              ${(!this.state.isSelfApp || authorizations.length === 0) &&
+              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 another ${step.step.authorization_type.app.name} account`}</span> -->
+                <span>${`Add account`}</span>
+              </div>`}
+            <//>
+          </div>
+          ${showErrors && html`<${ErrorMessage}>${this.getError()}<//>`}
+        `}
+      </div>
+    `;
+  }
+}
+
+export default connect<
+  AuthSelectorPropsType,
+  AuthSelectorStateType,
+  StoreType,
+  unknown
+>(
+  ['stepMapping', 'genericData', 'selectedAuthByAppId', 'xIntegryConfig'],
+  actionFunctions,
+)(AuthSelector);