@integry/sdk 4.5.2 → 4.5.4

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

@@ -0,0 +1,610 @@
+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);