@integry/sdk 4.5.2 → 4.5.3

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

@@ -0,0 +1,537 @@
+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

@@ -0,0 +1,161 @@
+.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;
+    }
+  }
+}