@integry/sdk 4.5.2 → 4.5.4

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

@@ -0,0 +1,349 @@
+/* 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

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