@integry/sdk 4.7.39 → 4.7.41

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

@@ -1,361 +0,0 @@
-.authSelectorDropdownContainer {
-  .label {
-    font-weight: 400;
-    font-size: 12px;
-    line-height: 15px;
-    color: #333333;
-    margin-bottom: 5px;
-
-    span {
-      color: #ff4d34;
-      margin-left: 2px;
-      font-size: 16px;
-    }
-  }
-
-  .title {
-    font-family: inherit;
-    font-style: normal;
-    font-weight: 500;
-    font-size: 16px;
-    line-height: 19px;
-    color: #333333;
-  }
-
-  .confirmation {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: flex-start;
-    font-style: normal;
-    font-weight: 400;
-    font-size: 12px;
-    line-height: 15px;
-    padding: 40px;
-    padding-right: 21px;
-    height: 100%;
-    div {
-      width: max-content;
-    }
-
-    button {
-      cursor: pointer;
-      -webkit-appearance: button;
-      font-weight: 500;
-      font-size: 11px;
-      line-height: 14px;
-      padding: 0px 6px;
-      text-align: center;
-      border-radius: 12px;
-      border: 0;
-      outline: none;
-      color: #7e7a8f;
-      background-color: #f1f1f1;
-      height: 18px;
-
-      &:nth-child(2) {
-        color: #ffffff;
-        margin-left: 10px;
-        margin-right: 10px;
-        background-color: #f05c42;
-      }
-    }
-
-    .confirmationHeading {
-      color: #333;
-      font-family: Inter;
-      font-size: 24px;
-      font-style: normal;
-      font-weight: 500;
-      line-height: 30px;
-      margin-bottom: 16px;
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      justify-content: flex-start;
-      gap: 8px;
-    }
-
-    .confirmationDescription {
-      width: 100%;
-
-      p {
-        color: #666666;
-        font-family: Inter;
-        font-size: 16px;
-        font-style: normal;
-        font-weight: 400;
-        line-height: 24px;
-        margin: 0;
-        margin-bottom: 24px;
-        display: block;
-        text-wrap: wrap;
-      }
-    }
-
-    .confirmationActions {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      justify-content: flex-start;
-      gap: 16px;
-
-      .primaryCTA {
-        height: 40px;
-        padding: 10px 15px;
-        margin: 0px;
-        justify-content: center;
-        align-items: center;
-        border-radius: 5px;
-        background: #F05C42;
-        color: #FFFFFF;
-        font-family: Inter;
-        font-size: 13px;
-        font-style: normal;
-        font-weight: 400;
-        line-height: normal;
-      }
-
-      .secondaryCTA {
-        height: 40px;
-        padding: 10px 15px;
-        justify-content: center;
-        align-items: center;
-        border-radius: 5px;
-        border: 1px solid #F0F0F0;
-        background: #F0F0F0;
-        color: #333333;
-        font-family: Inter;
-        font-size: 13px;
-        font-style: normal;
-        font-weight: 400;
-        line-height: normal;
-      }
-    }
-  }
-
-  .rows {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: center;
-
-    #integry-modal-content-wrap {
-      height: 286px;
-    }
-  }
-
-  .row {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-    cursor: pointer;
-    width: 100%;
-    max-height: 39px;
-    min-height: 39px;
-
-    .checkboxRow {
-      width: 100%;
-      flex-direction: row;
-      justify-content: space-between;
-      min-height: 39px;
-      padding: 0 12px;
-    }
-
-    .rowLabel {
-      margin: 0;
-      color: #4F4F4F;
-      font-family: Inter;
-      font-size: 12px;
-      font-style: normal;
-      font-weight: 500;
-      line-height: normal;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-
-    &:hover {
-      background: rgba(233, 236, 239, 0.5);
-
-      .deleteIcon svg {
-        visibility: visible;
-        user-select: auto;
-      }
-    }
-  }
-
-  .rowSelected {
-    background: rgba(66, 80, 240, 0.10000000149011612);
-
-    &:hover {
-      background: rgba(66, 80, 240, 0.10000000149011612);
-    }
-  }
-
-  .rowItem {
-    width: 100%;
-  }
-
-  .error {
-    color: #f05c42;
-    button {
-      color: #f05c42;
-      border-color: #f05c42;
-    }
-  }
-
-  .verify {
-    font-family: inherit;
-    font-style: normal;
-    font-weight: 400;
-    font-size: 12px;
-    line-height: 15px;
-    color: #4250F0;
-    cursor: pointer;
-    &:hover {
-      color: #252e91;
-    }
-  }
-
-  .errorMessage {
-    margin-top: 4px;
-    font-size: 12px;
-    line-height: 15px;
-    letter-spacing: -0.2px;
-    color: #f05c42;
-  }
-
-  .description {
-    font-size: 14px;
-    line-height: 20px;
-    color: #8c8c8c;
-    margin-bottom: 10px;
-  }
-
-  .checkboxRowWrap {
-    width: 100%;
-  }
-  .checkboxRow {
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    gap: 5px;
-    .radio {
-      width: 100%;
-      max-width: 250px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      &.readonly {
-        width: 70%;
-      }
-    }
-    .deleteIcon {
-      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: auto;
-      &.readonly {
-        width: 30%;
-      }
-      .status {
-        position: relative;
-        width: auto;
-        div {
-          display: flex;
-          align-items: center;
-        }
-        svg {
-          margin-left: 8px;
-        }
-        .statusRed,
-        .statusOrange,
-        .statusGreen {
-          width: 5px;
-          height: 5px;
-          border-radius: 9999px;
-          margin: 0px;
-          margin-right: 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;
-    }
-  }
-
-  .addAccount {
-    font-family: inherit;
-    font-style: normal;
-    cursor: pointer;
-    padding: 11px 10px;
-
-    span {
-      font-weight: 500;
-      font-size: 12px;
-      line-height: 15px;
-      color: #4250F0;
-      visibility: visible;
-    }
-
-    &:hover {
-      background: rgba(233, 236, 239, 0.5);
-    }
-  }
-  .buttonWrap {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-     button {
-      padding: 10px 15px !important;
-    }
-  }
- 
-  .noAccountsPrompt {
-    margin: 16px 0px 24px 0px;
-    font-style: normal;
-    font-weight: 400;
-    font-size: 12px;
-    line-height: 15px;
-    color: #999999;
-  }
-}

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

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