@integry/sdk 4.7.39 → 4.7.41

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

@@ -1,537 +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;
-}
-
-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 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}>
-        ${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=${isReadOnly}
-            className="authRadio"
-          />
-        </div>
-        <div
-          class=${`${styles.statusWrap} ${isReadOnly ? styles.readonly : ''}`}
-        >
-          <div class=${styles.status}>
-            ${isReadOnly
-              ? html`
-                  ${isChecked &&
-                  html`<div>
-                    <div class=${styles.statusGreen} />
-                    Connected
-                  </div>`}
-                `
-              : html`
-                  <div>
-                    ${status === 'VERIFYING' &&
-                    !isDeleting &&
-                    html`<div class=${styles.statusOrange} />
-                      Verifying <${Loader} /> `}
-                  </div>
-                  <div>
-                    ${status === 'CONNECTED' &&
-                    !error &&
-                    !isDeleting &&
-                    html`<div class=${styles.statusGreen} />
-                      Connected`}
-                  </div>
-                  <div>
-                    ${status === 'ERROR' &&
-                    !isDeleting &&
-                    html`<div class=${styles.statusRed} />
-                      Failed
-                      ${!isReadOnly &&
-                      html`<div onclick=${handleReverify}>
-                        <${Resend} />
-                      </div>`} `}
-                  </div>
-                  ${isDeleting && html`<${Loader} />`}
-                  ${error &&
-                  !isDeleting &&
-                  !(status === 'VERIFYING') &&
-                  html`<div class=${styles.error}>${error}</div>`}
-                `}
-          </div>
-        </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,
-    };
-  }
-
-  componentDidMount() {
-    if (isBrowser())
-      window.addEventListener('message', this.onAuthResponseReceived);
-
-    // in preview mode, auto-verify the auth we pass
-    const { stepId, stepMapping } = this.props;
-    let auth = stepMapping[stepId].selectedAuthId;
-    if (!auth && stepMapping[stepId].authorizations.length > 0) {
-      auth = 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;
-    }
-    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);
-    } else if (auth) {
-      this.verifyAuth(0, true);
-    }
-  }
-
-  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,
-        });
-      }
-    }
-  };
-
-  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">
-        <${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}>
-          ${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 &&
-        html`
-          <div class=${showErrors ? `${styles.error}` : ''}>
-            <${Button}
-              onClick=${() =>
-                !this.props.genericData.isPreviewMode && this.openAuthWindow()}
-              label=${`Add ${step.step.authorization_type.app.name} account`}
-              type=${ButtonTypes.SECONDARY}
-              disabled=${this.state.isLoading ||
-              this.props.genericData.isPreviewMode}
-              tooltip=${this.props.genericData.isPreviewMode &&
-              'New accounts cannot be added in preview mode'}
-            >
-            <//>
-          </div>
-          ${showErrors && html`<${ErrorMessage}>${this.getError()}<//>`}
-        `}
-      </div>
-    `;
-  }
-}
-
-export default connect<
-  AuthSelectorPropsType,
-  AuthSelectorStateType,
-  StoreType,
-  unknown
->(
-  ['stepMapping', 'genericData'],
-  actionFunctions,
-)(AuthSelector);

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

@@ -1,161 +0,0 @@
-.authSelectorWrap {
-  .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;
-    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: #ffffff;
-        margin-left: 10px;
-        margin-right: 10px;
-        background-color: #f05c42;
-      }
-    }
-  }
-  .rows {
-    margin-top: 24px;
-    margin-bottom: 24px;
-  }
-
-  .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;
-    margin-bottom: 16px;
-
-    .radio {
-      width: 45%;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      &.readonly {
-        width: 70%;
-      }
-    }
-    .deleteIcon {
-      width: 200px;
-      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: 20%;
-      &.readonly {
-        width: 30%;
-      }
-      .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;
-    }
-  }
-}