@integry/sdk 4.7.39 → 4.7.40

package/src/features/containers/AppFlowContainer/Authentication/index.ts

@@ -1,610 +0,0 @@
-import { html } from 'htm/preact';
-import { actionFunctions } from '@/store';
-import { useEffect, useContext, useState, useRef } from 'preact/hooks';
-import { connect } from 'unistore/preact';
-import AppContext from '@/contexts/AppContext';
-import { Hint } from '@/components/Tooltip';
-import { Modal } from '@/components/Modal';
-import { Loader } from '@/components/Loader';
-import { openPopupWindow } from '@/utils/popup';
-import isBrowser from '@/utils/isBrowser';
-import { AuthData, isAuthMessage } from '@/utils/isAuthMessage';
-import { StoreType } from '@/types/store';
-import { BrandingApp } from '@/interfaces';
-import AuthSelectorDropdown from '@/features/common/AuthSelectorDropdown';
-import { createRef } from 'preact';
-import { ViewStyles } from '@/types';
-import styles from './styles.module.scss';
-
-export type StepsPropsType = {
-  onUpdate?(): void;
-  isActionSetup?: boolean;
-  goBack?(): void;
-  brandingApp: any;
-} & StoreType;
-
-const Authentication = (props: any) => {
-  const {
-    embedConfig,
-    authorizations,
-    onAuthDelete,
-    onAuthenticationRecieved,
-    hideAuthActions = false,
-    onAuthVerify,
-    stepId,
-    onAuthSelected,
-    initialAuthVerification = true,
-  } = props;
-
-  const context = useContext(AppContext);
-
-  const [selectedAuth, setSelectedAuth] = useState<any>(null);
-  const [authVerification, setAuthVerification] = useState<any>({});
-  const [isVerifying, setIsVerifying] = useState<boolean>(true);
-  const [isSelectedAuthVerified, setIsSelectedAuthVerified] = useState<boolean>(
-    false,
-  );
-  const [showAuthPopup, setShowAuthPopup] = useState<boolean>(false);
-  const [allowMultipleAccounts, setAllowMultipleAccounts] = useState<boolean>(
-    true,
-  );
-  const [showDeleteConfirmation, setShowDeleteConfirmation] = useState<boolean>(
-    false,
-  );
-  const [isDeleting, setIsDeleting] = useState<boolean>(false);
-  const [isFirstTimeLoad, setIsFirstTimeLoad] = useState<boolean>(true);
-  const [authError, setAuthError] = useState<string | null>(null);
-
-  const onAuthResponseReceived = (messageEvent: MessageEvent<AuthData>) => {
-    if (isAuthMessage(messageEvent) && messageEvent.data.activity_name) {
-      if (onAuthenticationRecieved) onAuthenticationRecieved(messageEvent);
-      setAuthError(null);
-    }
-  };
-
-  const authPopoverRef = createRef();
-
-  const authPopoverCtaRef = createRef();
-
-  const openAuthWindow = () => {
-    const { appData } = props;
-    const { authorization_type } = appData || {};
-    if (context) {
-      const url = context.apiHandler.getAuthUrl(authorization_type.id);
-      openPopupWindow(url, 'Auth Window', window, 800, 600);
-    }
-  };
-  useEffect(() => {
-    const { userConfig, selectedAuthByAppId, appData } = props;
-    const { id: appId } = appData || {};
-    let tempAuthVerification = {};
-    let hasSetDefaultAuth = false;
-
-    let currentAuthObj = selectedAuthByAppId[appId]
-      ? authorizations.find(
-          (auth: any) => auth.id === selectedAuthByAppId[appId],
-        ) || authorizations[authorizations.length - 1]
-      : authorizations[authorizations.length - 1];
-
-    if (authorizations.length > 0) {
-      const tempAuth = authorizations.filter(
-        (auth: any) => auth.id === props.stepMapping[stepId]?.selectedAuthId,
-      );
-      if (
-        stepId &&
-        tempAuth.length > 0 &&
-        (selectedAuth === null ||
-          props.stepMapping[stepId].authorizations.filter(
-            (auth: any) => auth.authorizationId === selectedAuth?.id,
-          ).length === 0)
-      ) {
-        setSelectedAuth(tempAuth[0]);
-        [currentAuthObj] = tempAuth;
-        hasSetDefaultAuth = true;
-      } else if (
-        props.stepMapping[stepId]?.selectedAuthId === null ||
-        !stepId
-      ) {
-        setSelectedAuth(currentAuthObj);
-        hasSetDefaultAuth = true;
-      }
-
-      authorizations.forEach((auth: any) => {
-        tempAuthVerification = {
-          ...tempAuthVerification,
-          [auth.id]: 'verifying',
-        };
-      });
-      // NOTE: ENABLE IT WHEN HANDLING MULTIPLE AUTHS
-      // authorizations.forEach((auth: any) => {
-      //   context?.apiHandler
-      //     .verifyOAuth(auth.id)
-      //     .then((isVerified) => {
-      //       setAuthVerification({
-      //         ...tempAuthVerification,
-      //         [auth.id]: isVerified ? 'success' : 'fail',
-      //       });
-      //       setAuthError(isVerified ? null : 'Could not authorize');
-      //       onAuthVerify(auth.id, isVerified);
-      //     })
-      //     .catch((err) => {
-      //       console.error(err);
-      //     })
-      //     .finally(() => {
-      //       setIsVerifying(false);
-      //     });
-      // });
-      if (selectedAuth === null && !hasSetDefaultAuth) {
-        setSelectedAuth(currentAuthObj);
-        hasSetDefaultAuth = true;
-      }
-      if (hasSetDefaultAuth && initialAuthVerification) {
-        context?.apiHandler
-          .verifyOAuth(currentAuthObj.id)
-          .then((isVerified) => {
-            setAuthVerification({
-              ...tempAuthVerification,
-              [currentAuthObj.id]: isVerified ? 'success' : 'fail',
-            });
-            setAuthError(isVerified ? null : 'Could not authorize');
-            onAuthVerify(currentAuthObj.id, isVerified);
-            setIsSelectedAuthVerified(isVerified || false);
-            onAuthSelected(currentAuthObj.id, isVerified);
-
-            if (stepId) {
-              const dependentSteps = props.stepMapping[
-                stepId
-              ].step.template_fields
-                .filter(
-                  (el: any) =>
-                    el.activity_field && el.activity_field.is_dynamic,
-                )
-                .map((el: any) => el.id);
-              props.setStepAuthorization(
-                stepId,
-                currentAuthObj.id,
-                isVerified,
-                [],
-                false,
-              );
-            }
-          })
-          .catch((err) => {
-            console.error(err);
-          })
-          .finally(() => {
-            setIsVerifying(false);
-          });
-        setIsFirstTimeLoad(false);
-      } else if (hasSetDefaultAuth && !initialAuthVerification) {
-        setIsVerifying(false);
-        setAuthVerification({
-          ...tempAuthVerification,
-          [currentAuthObj.id]: 'success',
-        });
-        setAuthError(null);
-        onAuthVerify(currentAuthObj.id, true);
-        setIsSelectedAuthVerified(true);
-        setIsFirstTimeLoad(false);
-        onAuthSelected(currentAuthObj.id, false);
-      }
-    } else {
-      setIsVerifying(false);
-      setSelectedAuth(null);
-      if (
-        props.appData &&
-        isFirstTimeLoad &&
-        !userConfig.skipAutoConnect &&
-        !props.genericData.skipAccountConnectionOnLoad
-      ) {
-        setIsFirstTimeLoad(false);
-        openAuthWindow();
-      }
-      if (props.appData && isFirstTimeLoad) {
-        setIsFirstTimeLoad(false);
-        props.setGenericData({
-          ...props.genericData,
-          skipAccountConnectionOnLoad: false, // NOTE: This is to make sure that the auth window is Skipped only once
-        });
-      }
-    }
-    if (isBrowser()) window.addEventListener('message', onAuthResponseReceived);
-    return () => {
-      if (isBrowser())
-        window.removeEventListener('message', onAuthResponseReceived);
-    };
-  }, [authorizations]);
-
-  const handleAuthSelected = (
-    authId: number,
-    authStepId: number,
-    isVerified: boolean,
-    override: boolean,
-  ) => {
-    const tempAuth = authorizations.filter((auth: any) => auth.id === authId);
-    if (tempAuth.length > 0) {
-      setSelectedAuth(tempAuth[0]);
-      if (onAuthSelected) {
-        onAuthSelected(tempAuth[0].id, isVerified);
-      }
-    } else {
-      setSelectedAuth(null);
-      if (onAuthSelected) {
-        onAuthSelected(0, isVerified); // NOTE: 0 is for no auth
-      }
-    }
-
-    setShowAuthPopup(false);
-  };
-
-  const handleNewAccountAdded = (authId: any) => {
-    const tempAuth = authorizations.filter((auth: any) => auth.id === authId);
-    setSelectedAuth(tempAuth[0]);
-    setShowAuthPopup(false);
-  };
-
-  const deleteAuth = (authId: number) => {
-    const { appData } = props;
-    const { id: appId } = appData as BrandingApp;
-    if (context) {
-      setIsDeleting(true);
-      context.apiHandler
-        .deleteAuth(authId, true)
-        .then((res: any) => {
-          const { data, status = 500 } = res;
-          if (status === 200) {
-            if (onAuthDelete) onAuthDelete(authId, appId);
-            if (authorizations.length > 1) {
-              const tempAuths = authorizations.filter(
-                (auth: any) => auth.id !== authId,
-              );
-              setSelectedAuth(tempAuths[0]);
-            } else {
-              setSelectedAuth(null);
-            }
-            setAuthError(null);
-          } else if (typeof data === 'string') {
-            setAuthError(data || 'Could not authorize');
-          } else {
-            setAuthError('Could not authorize');
-          }
-        })
-        .catch((err) => {
-          console.error(err);
-        })
-        .finally(() => {
-          setIsDeleting(false);
-        });
-    }
-  };
-
-  // if (authorizations.length === 0 && !isVerifying) {
-  //   return html`
-  //     <div class="${styles.authenticationContainer}">
-  //       <div class="${styles.authSelectorInlineWrap}">
-  //         <div class="${styles.authSelectorUsername}">
-  //           <span class="${styles.authSelectorLabel}" style="color: #999999;"
-  //             >Account:</span
-  //           >
-  //           <span
-  //             onclick=${(e: any) => {
-  //               e.stopPropagation();
-  //               openAuthWindow();
-  //             }}
-  //             class="${styles.authCTA}"
-  //             >Connect an account...</span
-  //           >
-  //         </div>
-  //       </div>
-  //     </div>
-  //   `;
-  // }
-
-  return html`
-    <div
-      class=${styles.accountField}
-      style="color: #999999;"
-      onClick=${() => {
-        setShowAuthPopup(true);
-      }}
-    >
-      ${props.genericData.viewStyle === ViewStyles.COMFORTABLE
-        ? `${props?.appData?.name} Account:`
-        : ''}
-      ${allowMultipleAccounts &&
-      html` <${Hint} dismissOnClick=${true} position=${'bottom-right'}>
-        <div
-          ref=${authPopoverCtaRef}
-          class=${styles.accountFieldDropdown}
-          style="${showAuthPopup ? 'border: 1px solid #4250F0;' : ''}"
-          data-hint="${props.genericData.viewStyle === ViewStyles.COMPACT
-            ? `${props?.appData?.name} Account`
-            : ''}"
-        >
-          <p style="margin-left: 0;">
-            ${selectedAuth?.user_identity
-              ? html` <div
-                  style="max-width: ${isSelectedAuthVerified || false
-                    ? '220px'
-                    : '156px'}; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"
-                >
-                  ${selectedAuth?.user_identity}
-                </div>`
-              : html` <div
-                  style="max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;color: #999999;"
-                >
-                  No account connected
-                </div>`}
-            ${selectedAuth?.user_identity &&
-            html` <div class=${styles.accountStatus}>
-              ${false
-                ? html`<${Loader} />`
-                : html`
-                    ${isSelectedAuthVerified &&
-                    html`<svg
-                      data-hint="Connected"
-                      width="12"
-                      height="12"
-                      viewBox="0 0 12 12"
-                      fill="none"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M5.07595 8.71074C4.99537 8.71124 4.91558 8.69526 4.8414 8.66377C4.76723 8.63229 4.70025 8.58597 4.64465 8.52767L2.70076 6.55521C2.64173 6.49997 2.59474 6.43321 2.56257 6.35906C2.5304 6.28491 2.51367 6.20495 2.51367 6.12412C2.51367 6.0433 2.5304 5.96334 2.56257 5.88919C2.59474 5.81503 2.64173 5.74827 2.70076 5.69303C2.75596 5.63496 2.82243 5.58871 2.89607 5.55711C2.96971 5.52551 3.04904 5.50921 3.12918 5.50921C3.20932 5.50921 3.2885 5.52551 3.36214 5.55711C3.43578 5.58871 3.50225 5.63496 3.55745 5.69303L5.02272 7.1812L8.04198 3.50208C8.09133 3.43834 8.15314 3.38537 8.22373 3.34644C8.29433 3.3075 8.37226 3.28343 8.45251 3.27568C8.53277 3.26794 8.61363 3.2767 8.69038 3.30142C8.76712 3.32613 8.83804 3.36627 8.89867 3.41939C8.96243 3.46871 9.0155 3.53057 9.05446 3.60113C9.09341 3.67169 9.11739 3.74947 9.12514 3.82968C9.13289 3.9099 9.12419 3.99084 9.09946 4.06754C9.07474 4.14425 9.03461 4.21509 8.98147 4.2757L5.53682 8.4745C5.48369 8.54182 5.41645 8.59676 5.33992 8.63552C5.2634 8.67427 5.17943 8.69591 5.09369 8.69892L5.07595 8.71074Z"
-                        fill="#7ED321"
-                      />
-                      <path
-                        d="M6.00303 12C4.41143 11.9984 2.8854 11.3658 1.75997 10.2409C0.634541 9.11601 0.00156423 7.5908 0 5.99998C0.00156423 4.40916 0.634541 2.88395 1.75997 1.75907C2.8854 0.634194 4.41143 0.00156346 6.00303 0C7.5936 0.00312568 9.11804 0.636454 10.2422 1.76116C11.3663 2.88587 11.9984 4.41018 12 5.99998C11.9984 7.58978 11.3663 9.11413 10.2422 10.2388C9.11804 11.3635 7.5936 11.9969 6.00303 12ZM6.00303 0.885826C4.64648 0.887389 3.34595 1.4267 2.38673 2.38545C1.4275 3.34421 0.887824 4.6441 0.88626 5.99998C0.88626 7.35634 1.42544 8.65715 2.385 9.61624C3.34456 10.5753 4.646 11.1142 6.00303 11.1142C7.35903 11.1126 8.65888 10.5731 9.61717 9.61415C10.5755 8.65523 11.1137 7.35532 11.1137 5.99998C11.1122 4.64512 10.5734 3.34613 9.61543 2.38754C8.65749 1.42896 7.35855 0.888951 6.00303 0.885826Z"
-                        fill="#7ED321"
-                      />
-                    </svg>`}
-                    ${selectedAuth &&
-                    !isSelectedAuthVerified &&
-                    html`<svg
-                      data-hint="Could not authorize"
-                      width="12"
-                      height="12"
-                      viewBox="0 0 12 12"
-                      fill="none"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M5.99833 0.891429C6.08866 0.891429 6.31281 0.918857 6.43659 1.16571L11.0702 10.3749C11.1839 10.6011 11.0969 10.7966 11.0535 10.8686C11.01 10.9406 10.8828 11.112 10.6319 11.112H1.36474C1.11382 11.112 0.986692 10.944 0.9432 10.8686C0.899708 10.7966 0.812723 10.6011 0.926472 10.3749L5.56006 1.16571C5.68385 0.918857 5.908 0.891429 5.99833 0.891429ZM5.99833 0C5.51991 0 5.0415 0.250286 4.78724 0.754286L0.15365 9.96343C-0.314727 10.8926 0.344346 12 1.36474 12H10.6353C11.6557 12 12.3147 10.8926 11.8464 9.96343L7.20942 0.754286C6.95515 0.250286 6.47674 0 5.99833 0Z"
-                        fill="#F05C42"
-                      />
-                      <path
-                        d="M5.99494 8.71924C5.83435 8.71924 5.70053 8.77752 5.59013 8.89067C5.47973 9.00381 5.42285 9.14095 5.42285 9.3021C5.42285 9.48724 5.47973 9.63124 5.59682 9.7341C5.71391 9.83695 5.84774 9.88838 6.00163 9.88838C6.15553 9.88838 6.286 9.83695 6.4031 9.73067C6.51685 9.62781 6.57372 9.48381 6.57372 9.3021C6.57372 9.14095 6.51685 9.00381 6.4031 8.89067C6.29269 8.7741 6.15553 8.71924 5.99494 8.71924Z"
-                        fill="#F05C42"
-                      />
-                      <path
-                        d="M5.99923 3.9668C5.68474 3.9668 5.43048 4.23423 5.44386 4.55651L5.54423 7.57708C5.55092 7.8308 5.755 8.03308 6.00257 8.03308C6.25014 8.03308 6.45422 7.8308 6.46091 7.57708L6.55793 4.55651C6.56797 4.23423 6.31371 3.9668 5.99923 3.9668Z"
-                        fill="#F05C42"
-                      />
-                    </svg>`}
-                  `}
-            </div>`}
-          </p>
-          ${selectedAuth &&
-          !isSelectedAuthVerified &&
-          !false &&
-          html` <span
-            style="margin-left: 0px;margin-right: 4px;display: flex;
-                      flex-direction: row;
-                      align-items: center;
-                      justify-content: center;
-                      visibility: hidden;"
-            >Reconnect</span
-          >`}
-          <svg
-            class=${styles.accountFieldDropdownIcon}
-            style="${showAuthPopup ? 'transform: rotate(180deg);' : ''}"
-            width="20"
-            height="20"
-            viewBox="0 0 20 20"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M15 8L10 13L5 8"
-              stroke="#999999"
-              stroke-width="2"
-              stroke-linecap="round"
-            />
-          </svg>
-        </div>
-        <div
-          style=${showAuthPopup && allowMultipleAccounts
-            ? 'display:block;'
-            : 'display:none;'}
-          class=${styles.authWrapDropdown}
-          ref=${authPopoverRef}
-        >
-          ${true &&
-          html`<${AuthSelectorDropdown}
-            appId=${props?.appData?.id}
-            appData=${props?.appData}
-            apiHandler=${context ? context?.apiHandler : null}
-            showErrors=${false}
-            closePopup=${() => {
-              setShowAuthPopup(false);
-            }}
-            onAuthSelected=${(
-              authId: number,
-              isVerified: boolean,
-              override: boolean,
-            ) => handleAuthSelected(authId, 0, isVerified, override)}
-            }
-            onAuthDeleted=${(authId: number, appId: number) =>
-              onAuthDelete(authId, appId)}
-            }
-            showPopup=${showAuthPopup}
-            onNextButtonClick=${() => {
-              setShowAuthPopup(false);
-            }}
-            authWindowSwitch="false"
-            autoSelectAuth=${true}
-            onNewAccountAdded=${handleNewAccountAdded}
-            selectedAuth=${selectedAuth}
-            authorizations=${authorizations}
-            authPopoverRef=${authPopoverRef}
-            authPopoverCtaRef=${authPopoverCtaRef}
-            setShowAuthPopup=${(state: boolean) => {
-              setShowAuthPopup(state);
-            }}
-          >
-          <//>`}
-        </div>
-      <//>`}
-      ${allowMultipleAccounts
-        ? html``
-        : html` ${!false &&
-          html` 
-                    <div
-                      style="
-                      display: flex;
-                      flex-direction: row;
-                      align-items: center;
-                      justify-content: ${
-                        selectedAuth && !isSelectedAuthVerified
-                          ? 'flex-end'
-                          : 'flex-start'
-                      };
-                      margin-left: ${
-                        selectedAuth && !isSelectedAuthVerified ? 'auto' : '5px'
-                      };"
-                    >
-                      ${
-                        selectedAuth &&
-                        !isSelectedAuthVerified &&
-                        html` <span
-                          style="margin-left: 0px;margin-right: 4px;display: flex;
-                        flex-direction: row;
-                        align-items: center;
-                        justify-content: center;
-                        margin-top: -2px;
-                        visibility: hidden;"
-                          >Reconnect</span
-                        >`
-                      }
-                      <span
-                        style="${
-                          false
-                            ? 'opacity:0.5;cursor:not-allowed;border-bottom:none; margin-top: -1.5px;'
-                            : 'border-bottom:none; margin-top: -1.5px;'
-                        }"
-                        
-                        class=${
-                          false ? 'deleteAuthIconError' : 'deleteAuthIcon'
-                        }
-                      >
-                        ${
-                          selectedAuth &&
-                          html` <${Hint}
-                            dismissOnClick=${true}
-                            position=${'bottom-right'}
-                            className=${styles.deleteIconTooltip}
-                          >
-                            <svg
-                              style=${selectedAuth && !isSelectedAuthVerified
-                                ? 'visibility: visible;'
-                                : ''}
-                              data-hint="Disconnect"
-                              width="13"
-                              height="13"
-                              viewBox="0 0 13 13"
-                              fill="none"
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <path
-                                d="M0.866211 3.46654H12.1329"
-                                stroke="#F05C42"
-                                stroke-width="1.4"
-                              />
-                              <path
-                                d="M9.95091 4.7666V5.34438L9.37313 11.6999H3.59536L3.01758 5.34438V4.7666"
-                                stroke="#F05C42"
-                                stroke-width="1.4"
-                                stroke-linejoin="round"
-                              />
-                              <path
-                                d="M4.75098 3.03314V1.87758C4.75098 1.55848 5.00966 1.2998 5.32875 1.2998H7.63987C7.95896 1.2998 8.21764 1.55848 8.21764 1.87758V3.03314"
-                                stroke="#F05C42"
-                                stroke-width="1.4"
-                              />
-                            </svg>
-                          <//>`
-                        }
-                      </span>
-                    </div>
-                </div>`}`}
-    </div>
-
-    ${showDeleteConfirmation &&
-    html` <${Modal} isOpen=${true} className=${'authConfirmation'}>
-      <div class=${styles.confirmation}>
-        <div class=${styles.confirmationHeading}>
-          <svg
-            width="22"
-            height="22"
-            viewBox="0 0 22 22"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M10.9969 1.63429C11.1625 1.63429 11.5735 1.68457 11.8004 2.13714L20.2953 19.0206C20.5039 19.4354 20.3444 19.7937 20.2647 19.9257C20.1849 20.0577 19.9519 20.372 19.4918 20.372H2.50202C2.04201 20.372 1.80894 20.064 1.7292 19.9257C1.64946 19.7937 1.48999 19.4354 1.69853 19.0206L10.1934 2.13714C10.4204 1.68457 10.8313 1.63429 10.9969 1.63429ZM10.9969 0C10.1198 0 9.24275 0.458857 8.7766 1.38286L0.281691 18.2663C-0.577 19.9697 0.631301 22 2.50202 22H19.498C21.3687 22 22.577 19.9697 21.7183 18.2663L13.2173 1.38286C12.7511 0.458857 11.874 0 10.9969 0Z"
-              fill="#F05C42"
-            />
-            <path
-              d="M10.9941 15.6943C10.6997 15.6943 10.4544 15.8012 10.252 16.0086C10.0496 16.2161 9.94531 16.4675 9.94531 16.7629C9.94531 17.1023 10.0496 17.3663 10.2643 17.5549C10.4789 17.7435 10.7243 17.8378 11.0064 17.8378C11.2886 17.8378 11.5278 17.7435 11.7424 17.5486C11.951 17.36 12.0552 17.096 12.0552 16.7629C12.0552 16.4675 11.951 16.2161 11.7424 16.0086C11.54 15.7949 11.2886 15.6943 10.9941 15.6943Z"
-              fill="#F05C42"
-            />
-            <path
-              d="M11.0074 7.65039C10.4308 7.65039 9.96467 8.14068 9.98921 8.73153L10.167 13.6023C10.1793 14.0675 10.5534 14.4383 11.0073 14.4383C11.4612 14.4383 11.8353 14.0675 11.8476 13.6023L12.0317 8.73153C12.0501 8.14068 11.5839 7.65039 11.0074 7.65039Z"
-              fill="#F05C42"
-            />
-          </svg>
-          Disconnect account
-        </div>
-        <div class=${styles.confirmationDescription}>
-          <p>
-            Disconnecting your account will delete all integration instances.
-            This action cannot be undone.
-          </p>
-          <p>Are you sure?</p>
-        </div>
-        <div class=${styles.confirmationActions}>
-          <button
-            class=${styles.secondaryCTA}
-            onclick=${(e: any) => {
-              e.stopPropagation();
-              setShowDeleteConfirmation(false);
-            }}
-          >
-            Cancel
-          </button>
-          <button
-            class=${styles.primaryCTA}
-            onclick=${(e: any) => {
-              e.stopPropagation();
-              deleteAuth(selectedAuth?.id);
-              setShowDeleteConfirmation(false);
-            }}
-          >
-            Disconnect
-          </button>
-        </div>
-      </div>
-    <//>`}
-  `;
-};
-
-export default connect<unknown, unknown, StoreType, unknown>(
-  [
-    'userConfig',
-    'genericData',
-    'embedConfig',
-    'stepMapping',
-    'selectedAuthByAppId',
-  ],
-  actionFunctions,
-)(Authentication);