@integry/sdk 4.5.2 → 4.5.4

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

@@ -0,0 +1,291 @@
+/* eslint-disable no-use-before-define */
+import { html } from 'htm/preact';
+import { StoreType } from '@/types/store';
+import { useEffect, useContext, useState, useRef } from 'preact/hooks';
+import AppContext from '@/contexts/AppContext';
+import { openPopupWindow } from '@/utils/popup';
+import { LargeLoader } from '@/components/LargeLoader';
+import { Button } from '@/components/Button';
+import { Select } from '@/components/BasicSelect';
+import { Loader } from '@/components/Loader';
+import isBrowser from '@/utils/isBrowser';
+import { AuthData, isAuthMessage } from '@/utils/isAuthMessage';
+import { MarketplaceAppAuthorizationType } from '@/interfaces';
+import { Authorization } from '@/types';
+import { Hint } from '@/components/Tooltip';
+import styles from './styles.module.scss';
+
+
+interface AccountDropdownProps extends StoreType {
+  authorizationType: MarketplaceAppAuthorizationType;
+  isIUAccount?: boolean;
+  showConnectButton?: boolean;
+  onAuthorizationSelected?: (authObj: Authorization | null, authorizationId: number) => void;
+  onAuthorizationDeleted?: (authObj: Authorization | null, authorizationId: number) => void;
+  triggerAddAccount?: boolean;
+  showError?: boolean;
+}
+
+const AccountDropdown = (props: AccountDropdownProps) => {
+  const context = useContext(AppContext);
+  const {
+    authorizationType,
+    onAuthorizationSelected,
+    onAuthorizationDeleted,
+    isIUAccount = false,
+    showConnectButton = false,
+    triggerAddAccount,
+    showError = false,
+  } = props;
+  const [loading, setLoading] = useState<boolean>(false);
+  const [selectedAuthorization, setSelectedAuthorization] = useState<Authorization | null>(null);
+  const [verifyingAuthorization, setVerifyingAuthorization] = useState<boolean>(false);
+  const authorizationTypeRef = useRef<MarketplaceAppAuthorizationType | null>(null); 
+  const verificationFailedErrorRef = useRef('');
+
+  useEffect(() => {
+    if (isBrowser())
+      window.addEventListener('message', onAuthResponseReceived);
+    return () => {
+      if (isBrowser())
+      window.removeEventListener('message', onAuthResponseReceived);
+    }
+  }, [])
+    
+  useEffect(() => {
+    if (authorizationType) {
+      authorizationTypeRef.current = authorizationType;
+    }
+    if (authorizationType && authorizationType.default_authorization) {
+        setSelectedAuthorization(getAuthorizationById(authorizationType.default_authorization))
+    }
+  }, [authorizationType])
+  
+  useEffect(() => {
+    if (triggerAddAccount) {
+      handleClickConnectBtn();
+    }
+  }, [triggerAddAccount])
+
+  const openAuthWindow = (authorizationTypeId: number) => {
+    const url = context?.apiHandler.getAuthUrl(
+      authorizationTypeId,
+    ) || '';
+    openPopupWindow(url, 'Auth Window', window, 800, 600);
+    };
+    
+  const getAuthorizationById = (authorizationId: number): Authorization | null => {
+    let authorizationTypeObj = null;
+    if (authorizationType) {
+      authorizationTypeObj = authorizationType;
+    } else if (authorizationTypeRef.current) {
+      authorizationTypeObj = authorizationTypeRef.current;
+    }
+    if (authorizationTypeObj) {
+      return authorizationTypeObj.authorizations.find((authObj) => authObj.id === authorizationId) || null;
+    }
+    return null;
+  };
+
+  const saveDefaultAuthorization = (authorizationId: number): void => {
+    let authorizationTypeId = null;
+    if (authorizationType && authorizationType.id) {
+      authorizationTypeId = authorizationType.id;
+    } else if (authorizationTypeRef.current && authorizationTypeRef.current.id) {
+      authorizationTypeId = authorizationTypeRef.current.id;
+    }
+    if (authorizationTypeId) {
+      setVerifyingAuthorization(true);
+      context?.apiHandler
+        .setDefaultAuthorization({ authorizationId, authorizationTypeId })
+        .then((data) => {
+          // eslint-disable-next-line no-empty
+          if (data && data.id) {
+              setVerifyingAuthorization(false);
+            const selectedAuthObj = getAuthorizationById(authorizationId);
+            if (selectedAuthObj) {
+              setSelectedAuthorization(selectedAuthObj);
+            }
+            if (onAuthorizationSelected) {
+                onAuthorizationSelected(selectedAuthObj, authorizationId);
+            }
+          } else {
+            setVerifyingAuthorization(false);
+            console.error('Failed to save selected authorization');
+          }
+        })
+    }
+  } 
+
+  const verifyAuthorization = (authorizationId: number): void => {
+    verificationFailedErrorRef.current = '';
+    setVerifyingAuthorization(true);
+    context?.apiHandler
+      .verifyOAuthWithError(authorizationId)
+      .then((data) => {
+        if (data) {
+          if (data.is_valid) {
+            saveDefaultAuthorization(authorizationId);
+          } else {
+            verificationFailedErrorRef.current = `${data.error_message}`;
+            setVerifyingAuthorization(false);
+            // show error message
+          }
+        } else {
+          setVerifyingAuthorization(false);
+          console.error('Failed to verify authorization');
+        }
+      })
+  }
+
+  const deleteAuth = (authorizationId: number) => {
+    setVerifyingAuthorization(true);
+    context?.apiHandler
+      .deleteAuth(authorizationId)
+      .then((res) => {
+        if (res?.status === 200) {
+          const filteredAuthorizations = authorizationType.authorizations.filter((authObj) => authObj.id !== authorizationId) || [];
+            if (filteredAuthorizations?.length > 0) {
+                saveDefaultAuthorization(filteredAuthorizations[0].id)
+            } else {
+                setVerifyingAuthorization(false);
+                const deletedAuthObj = getAuthorizationById(authorizationId);
+                if (onAuthorizationDeleted) {
+                  onAuthorizationDeleted(deletedAuthObj, authorizationId);
+                }
+            }
+        } else {
+          setVerifyingAuthorization(false);
+          console.error('Failed to disconnect app');
+        }
+      })
+  };
+
+   const onAuthResponseReceived = (messageEvent: MessageEvent<AuthData>) => {
+      if (isAuthMessage(messageEvent) && messageEvent.data.activity_name) {
+        if (!messageEvent.data.already_exists) {
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          const newAuthorization = {
+            id: Number(messageEvent.data.authorization_id),
+            authorization_type: messageEvent.data.activity_name,
+            user_identity: messageEvent.data.user_identity,
+          } as Authorization;
+          console.info(messageEvent.data);
+          saveDefaultAuthorization(Number(messageEvent.data.authorization_id));
+        } 
+      }
+    };
+
+  const addAccount = (authorizationTypeId: number): void => {
+    openAuthWindow(authorizationTypeId);
+  }
+
+  const switchAccount = (authorizationId: number): void => {
+    verifyAuthorization(authorizationId);
+  }
+
+  const getAccountOptions = (): { label: string; key: string }[] => {
+    let accountOptions = [];
+    if (authorizationType && authorizationType.authorizations.length > 0) {
+      accountOptions = authorizationType.authorizations.map((authObj) => (
+        { label: authObj.user_identity, key: `${authObj.id}` }
+      )) 
+      if (isIUAccount) {
+        accountOptions.push({ label: 'Add an account', key: 'ADD_ACCOUNT' })
+      } else {
+        accountOptions.push({ label: 'Disconnect account', key: 'DISCONNECT_ACCOUNT' })
+      }
+    } else {
+      accountOptions = [{ label: 'Add an account', key: 'ADD_ACCOUNT' }]
+    }
+    return accountOptions;
+  }
+
+  const handleAccountSelection = (index: number): void => {
+    const tempAccountOptions = getAccountOptions();
+    if (index >= 0 && tempAccountOptions.length > 0 && index < tempAccountOptions.length) {
+      if (tempAccountOptions[index].key === 'ADD_ACCOUNT') {
+        if (authorizationType && authorizationType.id) {
+          addAccount(authorizationType.id);
+        }
+      } else if (tempAccountOptions[index].key === 'DISCONNECT_ACCOUNT') {
+        if (selectedAuthorization && selectedAuthorization.id) {
+          deleteAuth(selectedAuthorization.id);
+        }
+      }
+      else {
+        switchAccount(Number(tempAccountOptions[index].key));
+      }
+    }
+  };
+
+  const shouldShowConnectButton = (): boolean => {
+    if (showConnectButton && authorizationType && authorizationType.authorizations.length === 0) {
+      return true;
+    }
+    return false;
+  };
+
+  const handleClickConnectBtn = (): void => {
+    if (authorizationType && authorizationType.id) {
+      addAccount(authorizationType.id);
+    }
+  };
+
+    return html`${loading ? html`<div class="${styles.appPageLoader}"><${LargeLoader} /></div>` :
+        html`
+            ${html `
+            <${Hint} dismissOnClick=${false} position="bottom-right" deltaY=${0}>
+            <div class="${styles.accountDropdownWrap}">
+                ${shouldShowConnectButton() ? html`
+                  <${Button} label="Connect account" 
+                  width="136px" 
+                  height="40px"  
+                  className="integry-secondary-btn"
+                  onClick=${handleClickConnectBtn} />
+                `
+                : html`
+                <div class="${styles.accountDropdown}">
+                <${Select}
+                    ariaLabel="None"
+                    placeholder="None"
+                    options=${getAccountOptions()}
+                    value=${selectedAuthorization ? `${selectedAuthorization.id}` : undefined}
+                    onChange=${handleAccountSelection}
+                ><//>
+                </div>
+                `}
+                ${verifyingAuthorization && html`
+                <div class="${styles.verifyingLoader}">
+                <${Loader} />
+                </div>
+                `}
+                ${showError && verificationFailedErrorRef.current && html`
+                <span class="${styles.spanHint}" data-hint=${verificationFailedErrorRef.current || ''} />  
+                <svg width="16" height="20" viewBox="0 0 16 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <rect y="0.5" width="16" height="16" rx="8" fill="#E26154"/>
+                  <g filter="url(#filter0_d_398_2637)">
+                  <path fill-rule="evenodd" clip-rule="evenodd" d="M7.30152 6.44613C7.25819 5.97754 7.66442 5.52344 8.12171 5.52344C8.61526 5.52344 9.00706 5.9775 8.97049 6.44613L8.68756 9.94401C8.66602 10.2565 8.39017 10.5022 8.07803 10.4798C7.80247 10.4574 7.59183 10.2193 7.57737 9.94401L7.30152 6.44613ZM7.29834 12.1526C7.29834 11.729 7.6707 11.3842 8.13026 11.3842C8.60094 11.3842 8.97328 11.729 8.97286 12.1526V12.3004C8.97286 12.724 8.58982 13.0588 8.13026 13.0588C7.67026 13.0588 7.29834 12.724 7.29834 12.3004V12.1526Z" fill="white"/>
+                  </g>
+                  <defs>
+                  <filter id="filter0_d_398_2637" x="3.29834" y="5.52344" width="9.67432" height="15.5352" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+                  <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+                  <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+                  <feOffset dy="4"/>
+                  <feGaussianBlur stdDeviation="2"/>
+                  <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+                  <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_398_2637"/>
+                  <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_398_2637" result="shape"/>
+                  </filter>
+                  </defs>
+                  </svg>
+                `
+                }
+             </div>
+             <//>
+            `}
+        `}`
+     ;
+};
+
+export default AccountDropdown;

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

@@ -0,0 +1,19 @@
+.accountDropdownWrap {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 10px;
+    .accountDropdown {
+        
+    }
+    .verifyingLoader {
+
+    }
+    .spanHint {
+        width: 16px;
+        height: 20px;
+        z-index: 999;
+        position: absolute;
+        right: 0px;
+    }
+}