@integry/sdk 4.7.39 → 4.7.41

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

@@ -1,706 +0,0 @@
-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);