@integry/sdk 4.7.39 → 4.7.40

package/src/features/containers/AuthSetupContainer/index.ts

@@ -1,349 +0,0 @@
-/* eslint-disable no-use-before-define */
-import { html } from 'htm/preact';
-import { useCallback, useContext, useEffect, useState } from 'preact/hooks';
-import { connect } from 'unistore/preact';
-import { NewModal } from '@/components/NewModal';
-import { actionFunctions } from '@/store';
-import AppContext from '@/contexts/AppContext';
-import { StoreType } from '@/types/store';
-import { openPopupWindow } from '@/utils/popup';
-import { AppsForAuthConnection, BrandingApp } from '@/interfaces';
-import { AuthData, isAuthMessage } from '@/utils/isAuthMessage';
-import { ThreeDotLoader } from '@/components/ThreeDotLoader';
-import { truncate } from '@/utils/truncate';
-import isBrowser from '@/utils/isBrowser';
-import { AppSelection } from './AppSelection';
-import { AuthTypeSelection } from './AuthTypeSelection';
-
-import styles from './styles.module.scss';
-import { Header } from './Header';
-import { PostAdditionPopup } from './PostAdditionPopup';
-
-interface ContainerProps extends StoreType {
-  deploymentId?: string;
-  appId?: string;
-  authTypeId?: string;
-  isAnonymous: boolean;
-  onClose(): void;
-  showAppAuthModal: boolean;
-  hideAppConnectionModal: boolean;
-  forceRerender: boolean;
-  tags: string[];
-}
-
-enum AUTH_MODAL_FLOWS {
-  APP_SELECTION = 'APP_SELECTION',
-  AUTH_TYPE_SELECTION = 'AUTH_TYPE_SELECTION',
-  POST_ADDITION = 'POST_ADDITION',
-}
-
-const AuthSetupContainer = (props: ContainerProps) => {
-  const {
-    deploymentId,
-    isAnonymous,
-    appId,
-    authTypeId,
-    hideAppConnectionModal,
-    forceRerender,
-    tags,
-  } = props;
-  const context = useContext(AppContext);
-
-  const [loadingApps, setLoadingApps] = useState(true);
-  const [verifyingAuth, setVerifyingAuth] = useState(false);
-  const [verificationError, setVerificationError] = useState('');
-  const [apps, setApps] = useState<BrandingApp[]>([]);
-  const [authInfo, setAuthInfo] = useState<AuthData | null>(null);
-  const [selectedAuthTypeId, setSelectedAuthTypeId] = useState<number | null>(
-    null,
-  );
-  const [selectedApp, setSelectedApp] = useState<BrandingApp | null>(null);
-
-  const [flow, setFlow] = useState<AUTH_MODAL_FLOWS>(
-    props.appId
-      ? AUTH_MODAL_FLOWS.AUTH_TYPE_SELECTION
-      : AUTH_MODAL_FLOWS.APP_SELECTION,
-  );
-
-  const onModalClose = () => {
-    props.onClose();
-  };
-
-  const cb = useCallback(
-    (messageEvent: MessageEvent<AuthData>) => {
-      if (
-        isAuthMessage(messageEvent) &&
-        messageEvent.data.activity_name &&
-        (props.authTypeId || selectedApp)
-      ) {
-        const eventPayload = {
-          identity: messageEvent.data.user_identity,
-          authorizationId: Number(messageEvent.data.authorization_id),
-          flowId: null,
-          appId: Number(selectedApp?.id),
-          appName: selectedApp?.name || '',
-          appIcon: selectedApp?.icon_url || '',
-          alreadyExists: messageEvent.data.already_exists,
-          externalId: messageEvent.data.external_id,
-        };
-        window.removeEventListener('message', cb);
-        context?.eventEmitter.emit('did-add-authorization', eventPayload);
-      }
-    },
-    [selectedApp],
-  );
-
-  useEffect(() => {
-    if (appId && !selectedApp) {
-      // only show loading if we want to fetch the app and its auth types
-      setLoadingApps(true);
-      context?.apiHandler.getAppById(appId).then((app) => {
-        if (app) {
-          setSelectedApp(app);
-          if (!authTypeId) {
-            setLoadingApps(false);
-            setFlow(AUTH_MODAL_FLOWS.AUTH_TYPE_SELECTION);
-          }
-        } else {
-          throw new Error(`IntegryJS: Could not find app with id '${appId}'`);
-        }
-      });
-    }
-  }, [appId]);
-
-  useEffect(() => {
-    if (!appId && !apps.length) {
-      context?.apiHandler
-        .getAppsForAuthConnection({
-          deploymentId: deploymentId ? `${deploymentId}` : '',
-          page: 1,
-          tags:
-            (tags || []).length > 0
-              ? tags.map((tag) => encodeURIComponent(tag)).join(',')
-              : '',
-        })
-        .then((data) => {
-          setLoadingApps(false);
-          setApps(data?.results ?? []);
-        });
-    }
-  }, [appId]);
-
-  useEffect(() => {
-    if (appId && authTypeId) {
-      openAuthWindow(Number(authTypeId));
-      window.addEventListener('message', cb);
-    }
-    return () => {
-      window.removeEventListener('message', cb);
-    };
-  }, [appId, authTypeId, selectedApp, forceRerender]);
-
-  useEffect(() => {
-    const onAuthResponseReceived = (messageEvent: MessageEvent<AuthData>) => {
-      if (
-        isAuthMessage(messageEvent) &&
-        messageEvent.data.activity_name &&
-        (props.authTypeId || selectedApp)
-      ) {
-        const eventPayload = {
-          identity: messageEvent.data.user_identity,
-          authorizationId: Number(messageEvent.data.authorization_id),
-          flowId: null,
-          appId: Number(selectedApp?.id),
-          appName: selectedApp?.name || '',
-          appIcon: selectedApp?.icon_url || '',
-          alreadyExists: messageEvent.data.already_exists,
-          externalId: messageEvent.data.external_id,
-        };
-        setAuthInfo(messageEvent.data);
-
-        const authIdToVerify = messageEvent.data.authorization_id;
-
-        setFlow(AUTH_MODAL_FLOWS.POST_ADDITION);
-
-        if (authIdToVerify) {
-          if (!isAnonymous) {
-            context?.apiHandler
-              .verifyOAuth(authIdToVerify)
-              .then((addedSuccessfully) => {
-                if (addedSuccessfully) {
-                  context?.eventEmitter.emit(
-                    'did-add-authorization',
-                    eventPayload,
-                  );
-                } else {
-                  setVerificationError(
-                    `Your ${selectedApp?.name} account could not be verified due to incorrect credentials.
-                  Please try again.`,
-                  );
-                  context?.eventEmitter.emit(
-                    'did-fail-authorization-verification',
-                    eventPayload,
-                  );
-                  context.apiHandler.deleteAuth(authIdToVerify);
-                }
-                if (hideAppConnectionModal) {
-                  onModalClose();
-                } else {
-                  setVerifyingAuth(false);
-                }
-              });
-          } else {
-            context?.eventEmitter.emit('did-add-authorization', eventPayload);
-            onModalClose();
-          }
-        } else {
-          context?.eventEmitter.emit(
-            'did-fail-authorization-verification',
-            eventPayload,
-          );
-          console.error('IntegryJS: Auth ID was not returned');
-          setVerificationError('Auth ID was not returned');
-        }
-      }
-    };
-    if (isBrowser() && !authTypeId) {
-      window.addEventListener('message', onAuthResponseReceived);
-    }
-
-    return () => {
-      window.removeEventListener('message', onAuthResponseReceived);
-    };
-  }, [selectedApp, authTypeId]);
-
-  const openAuthWindow = (typeId: number) => {
-    const url = context?.apiHandler.getAuthUrl(typeId);
-    if (url) {
-      openPopupWindow(url, 'Auth Window', window, 800, 600);
-    }
-  };
-
-  const setApp = (app: BrandingApp) => {
-    setSelectedApp(app);
-    setVerifyingAuth(true);
-    openAuthWindow(app.authorization_type.id);
-  };
-
-  const onAppSelect = (selectedAppId: number) => {
-    const app = apps.filter((el) => el.id === selectedAppId)[0];
-    setApp(app);
-  };
-
-  const handleNav = (direction: 'NEXT' | 'BACK') => {
-    switch (direction) {
-      case 'BACK':
-        setSelectedApp(null);
-        setSelectedAuthTypeId(null);
-        setFlow(AUTH_MODAL_FLOWS.APP_SELECTION);
-        break;
-      case 'NEXT':
-        if (selectedAuthTypeId) {
-          setVerifyingAuth(true);
-          openAuthWindow(selectedAuthTypeId);
-        }
-        break;
-      default:
-        break;
-    }
-  };
-  return html`
-    <${NewModal}
-      isOpen=${props.showAppAuthModal}
-      onClose=${onModalClose}
-      CustomCloseElement=${() => html``}
-      customClass=${'authConnectionFormModal'}
-    >
-      <div class="${styles.form} ${'integry-container__auth_connection_form'}">
-        ${flow !== AUTH_MODAL_FLOWS.POST_ADDITION &&
-        html`
-          <div class=${styles.inner}>
-            ${loadingApps
-              ? html`<div
-                  class=${props.appId ? styles.smallerLoader : styles.loader}
-                >
-                  <${ThreeDotLoader} color="#999" />
-                </div>`
-              : html`
-                  ${flow === AUTH_MODAL_FLOWS.APP_SELECTION &&
-                  html`
-                <${Header} handleCloseClick=${onModalClose}>Connect an app</${Header}>
-                <${AppSelection} apps=${apps} handleAppSelect=${onAppSelect} //>
-              `}
-                  ${flow === AUTH_MODAL_FLOWS.AUTH_TYPE_SELECTION &&
-                  html`
-                <${Header} handleCloseClick=${onModalClose}>How would you like to authenticate?</${Header}>
-                <${AuthTypeSelection} selectedApp=${selectedApp} handleNav=${handleNav} selectedAuthTypeId=${selectedAuthTypeId} handleAuthTypeIdChange=${(
-                    id: number,
-                  ) =>
-                    setSelectedAuthTypeId(
-                      id,
-                    )} hideBackButton=${!!props.appId} //>
-              `}
-                `}
-          </div>
-        `}
-        ${flow === AUTH_MODAL_FLOWS.POST_ADDITION &&
-        selectedApp &&
-        authInfo &&
-        html`
-          ${verifyingAuth
-            ? html` <div class=${styles.loadingModal}>
-                <${ThreeDotLoader} color="#999" />
-              </div>`
-            : html`
-                <${PostAdditionPopup}
-                  iconUrl=${selectedApp.icon_url}
-                  title=${verificationError
-                    ? 'Error adding Account'
-                    : 'Account Connected'}
-                  handleCloseClick=${onModalClose}
-                >
-                  ${verificationError
-                    ? html`${verificationError}`
-                    : html`
-                        Your account${' '}
-                        ${truncate(authInfo.user_identity)}${' '}in${' '}
-                        ${selectedApp.name} has been connected. You can now use
-                        it in an integration.
-                      `}
-                <//>
-              `}
-        `}
-      </div>
-    <//>
-  `;
-};
-
-const AuthSetupContainerWrap = (props: ContainerProps) => {
-  const { deploymentId, authTypeId, appId, onClose } = props;
-
-  const [render, setRender] = useState(true);
-
-  const handleClose = () => {
-    setRender(false);
-    onClose();
-  };
-
-  return render
-    ? html`
-        <${AuthSetupContainer}
-          deploymentId=${deploymentId}
-          appId=${appId}
-          authTypeId=${authTypeId}
-          onClose=${handleClose}
-          isAnonymous=${props.genericData.isAnonymous}
-          showAppAuthModal=${props.genericData.showAppAuthModal}
-          forceRerender=${props.forceRerender}
-          hideAppConnectionModal=${props.userConfig?.hideAppConnectionModal}
-          tags=${props.userConfig?.tags}
-        >
-        <//>
-      `
-    : html``;
-};
-
-export default connect<ContainerProps, unknown, StoreType, unknown>(
-  ['userConfig', 'genericData'],
-  actionFunctions,
-)(AuthSetupContainerWrap);

package/src/features/containers/AuthSetupContainer/styles.module.scss

@@ -1,229 +0,0 @@
-.form {
-  max-height: 540px;
-  .inner {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    padding: 30px 36px;
-    padding-bottom: 0;
-  }
-  .loader,
-  .smallerLoader {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .loader {
-    width: 784px;
-    height: 510px;
-  }
-
-  .smallerLoader {
-    width: 658px;
-    height: 373.5px;
-  }
-}
-
-.template_grid {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 20px;
-  margin-top: 20px;
-  padding-right: 11px;
-  margin-right: -18px;
-  overflow-x: hidden;
-  overflow-y: scroll;
-  max-height: 358px;
-  padding-bottom: 40px;
-
-  &::-webkit-scrollbar {
-    width: 5px;
-  }
-
-  /* Track */
-  &::-webkit-scrollbar-track {
-    // background: #f1f1f1;
-    background: transparent;
-    border-radius: 10px;
-  }
-
-  /* Handle */
-  &::-webkit-scrollbar-thumb {
-    background: #ededed;
-    border: 1px solid #e7e7e7;
-    border-radius: 10px;
-  }
-
-  /* Handle on hover */
-  &::-webkit-scrollbar-thumb:hover {
-    background: rgb(116, 116, 116);
-  }
-}
-
-.header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  .text {
-    font-weight: 500;
-    font-size: 24px;
-    color: #141313;
-  }
-  .close {
-    cursor: pointer;
-  }
-}
-
-.loadingModal {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 570px;
-  height: 346px;
-}
-
-.appSelection {
-  margin-top: 20px;
-  width: 100vw;
-  max-width: 784px;
-  height: 470px;
-}
-
-.successModal {
-  padding-top: 28px;
-  padding-bottom: 41px;
-  padding-left: 28px;
-  padding-right: 28px;
-  width: 570px;
-  height: 346px;
-  box-sizing: border-box;
-  .contents {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    max-width: 350px;
-    margin: 0 auto;
-    margin-top: -22px;
-    .img {
-      border-radius: 9999px;
-      overflow: hidden;
-      width: 80px;
-      height: 80px;
-      margin-bottom: 20px;
-    }
-    .title {
-      font-weight: 500;
-      font-size: 24px;
-      color: #1c1a27;
-      margin-bottom: 15px;
-    }
-    .text {
-      font-weight: 400;
-      font-size: 18px;
-      line-height: 22px;
-      color: #8c8c8c;
-      text-align: center;
-      margin-bottom: 25px;
-      -webkit-box-orient: vertical;
-      display: -webkit-box;
-      -webkit-line-clamp: 3;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: normal;
-    }
-  }
-}
-
-.auth_type_selection {
-  display: flex;
-  flex: 1;
-  margin-top: 20px;
-  width: 658px;
-  border-top: 1px solid #d7d7d7;
-  .method_selection {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    padding-top: 40px;
-    flex: 1;
-    .authlist {
-      padding-bottom: 32px;
-      overflow: auto;
-      height: 130px;
-      &::-webkit-scrollbar {
-        width: 5px;
-      }
-
-      /* Track */
-      &::-webkit-scrollbar-track {
-        // background: #f1f1f1;
-        background: transparent;
-        border-radius: 10px;
-      }
-
-      /* Handle */
-      &::-webkit-scrollbar-thumb {
-        background: #ededed;
-        border: 1px solid #e7e7e7;
-        border-radius: 10px;
-      }
-
-      /* Handle on hover */
-      &::-webkit-scrollbar-thumb:hover {
-        background: rgb(116, 116, 116);
-      }
-    }
-    .text {
-      font-weight: 400;
-      font-size: 18px;
-      line-height: 22px;
-      color: #8c8c8c;
-      margin-bottom: 18px;
-    }
-  }
-}
-
-.footer {
-  border-top: 1px solid #d7d7d7;
-  display: flex;
-  justify-content: flex-end;
-  padding-top: 20px;
-  padding-bottom: 30px;
-  .buttons {
-    display: flex;
-    > div:first-child {
-      margin-right: 20px;
-    }
-  }
-}
-
-.appCard {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-  border: 1px solid #e2e0db;
-  &:hover {
-    border: 1px solid #b6b5b5;
-  }
-  border-radius: 4px;
-  height: 160px;
-  box-sizing: border-box;
-  cursor: pointer;
-  gap: 20px;
-  img {
-    width: 64px;
-    height: 64px;
-    border-radius: 99999px;
-    overflow: hidden;
-  }
-
-  > div {
-    font-weight: 500;
-    font-size: 15px;
-    color: #333333;
-  }
-}