@integry/sdk 4.5.2 → 4.5.4

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

@@ -0,0 +1,576 @@
+import { html } from 'htm/preact';
+import { useEffect, useState, useContext, useRef } from 'preact/hooks';
+
+import { Loader } from '@/components/Loader';
+import { LargeLoader } from '@/components/LargeLoader';
+import { ThreeDotLoader } from '@/components/ThreeDotLoader';
+import AppCard from '@/features/common/MarketplaceAppCard';
+import AppCardCompact from '@/features/common/MarketplaceAppCardCompact';
+import Footer from '@/components/Footer';
+import { Hint } from '@/components/Tooltip';
+import isBrowser from '@/utils/isBrowser';
+import { truncate, isTruncatable } from '@/utils/truncate';
+import { AuthData, isAuthMessage } from '@/utils/isAuthMessage';
+import { openPopupWindow } from '@/utils/popup';
+
+import { connect } from 'unistore/preact';
+import { StoreType } from '@/types/store';
+import { actionFunctions } from '@/store';
+import AppContext from '@/contexts/AppContext';
+import { ViewStyles } from '@/types';
+
+import styles from './styles.module.scss';
+
+const Confirmation = (props: { callback(shouldDelete: boolean): void }) => {
+  const { callback } = props;
+  const [isProcessing, setIsProcessing] = useState(false);
+
+  const handleYesClick = () => {
+    setIsProcessing(true); // Update the state to show "..."
+    callback(true); // Trigger the callback function
+  };
+
+  return html`
+    <div class=${styles.confirmation}>
+      <div class=${styles.confirmationText}>Are you sure?</div>
+      <button disabled=${isProcessing} onclick=${() => callback(false)}>
+        No
+      </button>
+      <button onclick=${handleYesClick}>
+        ${isProcessing ? html`<${ThreeDotLoader} color="#fff" />` : 'Yes'}
+      </button>
+    </div>
+  `;
+};
+
+const AuthorizationRow = (props: {
+  id: string;
+  value: string;
+  isChecked?: boolean;
+  isLoading: boolean;
+  willDelete?: boolean;
+  isDeleting?: boolean;
+  error?: string;
+  status: 'VERIFYING' | 'CONNECTED' | 'ERROR' | 'IDLE' | null;
+  handleChange?: (id: string) => void;
+  handleReverify?: () => void;
+  handleDelete?: (shouldDelete: boolean) => void;
+  handleWillDelete?: () => void;
+  isReadOnly?: boolean;
+  forcedLoading?: boolean;
+}) => {
+  const {
+    id,
+    value,
+    isChecked,
+    status = 'IDLE',
+    isDeleting = false,
+    willDelete = false,
+    handleChange,
+    handleReverify,
+    handleDelete = () => null,
+    handleWillDelete = () => null,
+    error,
+    isReadOnly,
+  } = props;
+  return html`
+    <${Hint} dismissOnClick=${false} position="top" deltaY=${0}>
+      <div class="${styles.checkboxRow} ${styles.buttonShadow}">
+        <div
+          class="${styles.connectedAccountRow} ${willDelete
+            ? styles.statusWrapShortWidth
+            : ''}"
+        >
+          <span class="${styles.connectedAccountValue}"
+            >${isTruncatable(value, 66) ? truncate(value, 66) : value}</span
+          >
+          <div class=${`${styles.statusWrap}`}>
+            <div class=${styles.status}>
+              <svg
+                width="12"
+                height="13"
+                viewBox="0 0 12 13"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <circle cx="6" cy="6.5" r="6" fill="#C4E9D2" />
+                <path
+                  d="M8.49951 4.5L5.22003 8.25L3.49951 6.28264"
+                  stroke="#3BB568"
+                  stroke-linecap="round"
+                />
+              </svg>
+            </div>
+          </div>
+        </div>
+
+        ${willDelete &&
+        !isDeleting &&
+        html` <${Confirmation} callback=${handleDelete} /> `}
+        ${!(status === 'VERIFYING' || isDeleting || willDelete) &&
+        !isReadOnly &&
+        html`
+          <div class=${styles.deleteIcon} onclick=${handleWillDelete}>
+            <svg
+              width="15"
+              height="15"
+              viewBox="0 0 15 15"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path d="M1.5 4.1999H13.65" stroke="#F05C42" />
+              <path
+                d="M11.6254 5.5498V6.2248L10.9504 13.6498H4.20039L3.52539 6.2248V5.5498"
+                stroke="#F05C42"
+                stroke-linejoin="round"
+              />
+              <path
+                d="M5.55078 3.525V2.175C5.55078 1.80221 5.85299 1.5 6.22578 1.5H8.92578C9.29857 1.5 9.60078 1.80221 9.60078 2.175V3.525"
+                stroke="#F05C42"
+              />
+            </svg>
+          </div>
+        `}
+      </div>
+    <//>
+  `;
+};
+
+const MarketplaceAppsCompact = (props: any) => {
+  const { genericData, renderMode, userConfig, appName } = props;
+  const context = useContext(AppContext);
+  const [apps, setApps] = useState<any[]>([]);
+  const [filteredApps, setFilteredApps] = useState<any[]>([]);
+  const [isFetchingApps, setIsFetchingApps] = useState<boolean>(true);
+  const [searchText, setSearchText] = useState<string>('');
+  const [totalApps, setTotalApps] = useState<number>(0);
+  const [cursor, setCursor] = useState<string>('');
+  const [filteredAppsCount, setFilteredAppsCount] = useState<number>(0);
+
+  const [loadingNextPage, setLoadingNextPage] = useState<boolean>(false);
+  const [searchInProgress, setSearchInProgress] = useState<boolean>(false);
+
+  const [selectedApp, setSelectedApp] = useState<any>(null);
+  const [
+    selectedAppConnectedAccounts,
+    setSelectedAppConnectedAccounts,
+  ] = useState<any[]>([]);
+  const [willDeleteAuthWithIndex, setWillDeleteAuthWithIndex] = useState<
+    number | null
+  >(null);
+  const [allowMultipleAuths, setAllowMultipleAuth] = useState<boolean>(true);
+
+  const DEBOUNCE_DELAY = 500;
+  const debounceTimeout = useRef<ReturnType<typeof setTimeout>>(0);
+
+  const getApps = ({
+    currentApps = <any>[],
+    search = '',
+    initialLoad = false,
+    nextCursor = '',
+  }) => {
+    setIsFetchingApps(true);
+
+    const cursorToUse = nextCursor || cursor;
+
+    context?.apiHandler
+      .getMarketplaceAppsV2({
+        cursor: search !== '' ? null : cursorToUse,
+        search,
+      })
+      .then((appsResponse) => {
+        const tempApps = appsResponse.apps.map((app: any) => ({
+          ...app,
+        }));
+        if (appsResponse._cursor || search === '') {
+          // we don't want to
+          setCursor(appsResponse._cursor);
+        }
+
+        setTotalApps(appsResponse.count || (tempApps || []).length);
+        if (search === '') {
+          setFilteredApps((prev) => [...prev, ...tempApps]);
+        } else {
+          setFilteredApps(tempApps);
+        }
+
+        if (initialLoad) {
+          setApps((prev) => [...prev, ...tempApps]);
+        }
+        setIsFetchingApps(false);
+        setLoadingNextPage(false);
+        setSearchInProgress(false);
+      })
+      .catch((error) => {
+        // eslint-disable-next-line no-console
+        console.log('error', { error });
+        setIsFetchingApps(false);
+        setLoadingNextPage(false);
+        setSearchInProgress(false);
+      });
+  };
+
+  const handleScroll = (e: any) => {
+    const bottom =
+      Math.floor(e.target.scrollHeight) ===
+      Math.floor(e.target.scrollTop + e.target.clientHeight);
+
+    if (bottom && !isFetchingApps && cursor && !loadingNextPage) {
+      // Trigger the next page load when at the bottom
+      setLoadingNextPage(true);
+      getApps({
+        currentApps: filteredApps,
+        search: searchText,
+        initialLoad: true, // we consider the next page to be part of the initial load
+        nextCursor: cursor, // Use the cursor for pagination
+      });
+    }
+  };
+
+  const filterApps = (inputString: string, items: any) => {
+    const cleanedInput = inputString.trim(); // Remove trailing spaces
+    setSearchInProgress(true);
+
+    if (cleanedInput === '') {
+      setFilteredApps(items); // Set the apps when there's no search input
+      return items;
+    }
+
+    setFilteredApps([]); // Clear the apps on each input change
+
+    // Clear the previous timeout to avoid executing the previous search
+    if (debounceTimeout.current) {
+      clearTimeout(debounceTimeout.current);
+    }
+
+    // Set a new debounce timeout to trigger the search after the delay
+    debounceTimeout.current = setTimeout(() => {
+      // Call the server-side function to fetch apps based on the search term
+      getApps({ currentApps: items, search: cleanedInput });
+    }, DEBOUNCE_DELAY); // Delay search until user stops typing
+
+    return [];
+  };
+
+  const handleGoBackToApps = () => {
+    setSelectedApp(null);
+  };
+
+  const onAuthResponseReceived = (messageEvent: MessageEvent<AuthData>) => {
+    if (isAuthMessage(messageEvent) && messageEvent.data.activity_name) {
+      const tempAccounts = [
+        ...selectedAppConnectedAccounts,
+        {
+          id: messageEvent.data.authorization_id,
+          display_name: messageEvent.data.user_identity,
+        },
+      ];
+      if (selectedApp && !selectedApp.allow_multiple_connected_accounts) {
+        setAllowMultipleAuth(false);
+      }
+      setSelectedAppConnectedAccounts(tempAccounts);
+      if (isBrowser())
+        window.removeEventListener('message', onAuthResponseReceived);
+    }
+  };
+
+  const openAuthWindow = () => {
+    if (isBrowser()) window.addEventListener('message', onAuthResponseReceived);
+    if (context && selectedApp && allowMultipleAuths) {
+      const url = selectedApp.login_url;
+      openPopupWindow(url, 'Auth Window', window, 800, 600);
+    }
+  };
+
+  const deleteAuth = (authIndex: number) => {
+    const auth = selectedAppConnectedAccounts[authIndex];
+
+    context?.apiHandler
+      .deleteAuth(auth.id)
+      .then((res) => {
+        if (res?.status === 200) {
+          if (selectedAppConnectedAccounts && authIndex >= 0) {
+            selectedAppConnectedAccounts.splice(authIndex, 1);
+            if (selectedAppConnectedAccounts.length === 0) {
+              setAllowMultipleAuth(true);
+            }
+          }
+
+          context.eventEmitter.emit('app-disconnected', selectedApp);
+        }
+      })
+      .catch((err) => {
+        console.error(err);
+      })
+      .finally(() => {
+        // setWillDeleteAuth(false);
+        // setIsDeletingAuth(false);
+        setWillDeleteAuthWithIndex(null);
+      });
+  };
+
+  const willDelete = (authIndex: number) => {
+    setWillDeleteAuthWithIndex(authIndex);
+  };
+
+  const getApp = (_appName: string) => {
+    context?.apiHandler.getApp(_appName).then((app) => {
+      setSelectedApp(app);
+      if (
+        app.allow_multiple_connected_accounts ||
+        app.connected_accounts.length === 0
+      ) {
+        setAllowMultipleAuth(true);
+      } else {
+        setAllowMultipleAuth(false);
+      }
+      setIsFetchingApps(false);
+    });
+  };
+
+  useEffect(() => {
+    if (appName && appName !== '') {
+      getApp(appName);
+    } else {
+      getApps({
+        currentApps: apps,
+        search: '',
+        initialLoad: true,
+      });
+    }
+  }, []);
+
+  useEffect(() => {
+    setSelectedAppConnectedAccounts(selectedApp?.connected_accounts || []);
+  }, [selectedApp]);
+  return html`
+    <div
+      id="embed--appsContainer"
+      class="${renderMode === 'INLINE'
+        ? styles.appsContainerInline
+        : styles.appsContainer}
+    ${genericData.viewStyle === ViewStyles.COMPACT
+        ? styles['compact-view']
+        : ''} embed--appsContainer--${renderMode}"
+      style="${renderMode === 'INLINE' && props.showMarketplaceModal
+        ? 'display: flex;'
+        : ''}"
+    >
+      <div
+        id="apps-header"
+        class="${styles.appsHeader} ${selectedApp
+          ? styles.appsHeaderWithBorder
+          : ''}"
+      >
+        ${selectedApp
+          ? html`
+              <div class="${styles.backLink} ${styles.appsHeaderTitle}">
+                ${!appName &&
+                html`<svg
+                  width="33"
+                  height="33"
+                  viewBox="0 0 33 33"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                  onclick=${handleGoBackToApps}
+                >
+                  <circle
+                    cx="16.6758"
+                    cy="16.5684"
+                    r="15.5"
+                    fill="white"
+                    stroke="#E0E0E0"
+                  />
+                  <path
+                    d="M16.8975 11.3777L16.5547 11.7205L16.5547 11.7205L16.8975 11.3777ZM16.8975 12.0634L16.5547 11.7205L16.5547 11.7205L16.8975 12.0634ZM16.2119 11.3777L16.5547 11.7205L16.2119 11.3777ZM11.3634 16.2262L11.0205 15.8833L11.0205 15.8833L11.3634 16.2262ZM11.0205 16.569L10.6777 
+                  16.2262L10.3349 16.569L10.6777 16.9118L11.0205 16.569ZM11.3634 16.9118L11.0205 17.2547L11.0205 17.2547L11.3634 16.9118ZM16.2119 21.7603L16.5547 21.4175L16.5547 21.4175L16.2119 21.7603ZM16.8975 21.7603L16.5547 21.4175L16.5547 21.4175L16.8975 21.7603ZM16.8975 21.0747L16.5547 21.4175L16.5547 21.4175L16.8975 21.0747ZM12.3919 16.569L12.0491 16.2262L11.7062 16.569L12.0491 16.9118L12.3919 16.569ZM22.8574 17.0545L22.8574 17.5394L22.8574 17.0545ZM22.8574 16.0848L22.8574 16.5697L22.8574 
+                  16.0848ZM13.1605 16.0848L13.1605 15.6L13.1605 16.0848ZM13.1605 17.0545L13.1605 16.5697L13.1605 17.0545ZM16.5547 11.7205L16.5547 11.7205L17.2404 12.4062C17.6191 12.0275 17.6191 11.4135 17.2404 11.0348L16.5547 11.7205ZM16.5547 11.7205L17.2404 11.0348C16.8617 10.6562 16.2477 10.6562 15.869 11.0348L16.5547 11.7205ZM11.7062 16.569L16.5547 11.7205L15.869 11.0348L11.0205 15.8833L11.7062 16.569ZM11.3634 16.9118L11.7062 16.569L11.0205 15.8833L10.6777 16.2262L11.3634 16.9118ZM11.7062 16.569L11.3634 16.2262L10.6777 
+                  16.9118L11.0205 17.2547L11.7062 16.569ZM16.5547 21.4175L11.7062 16.569L11.0205 17.2547L15.869 22.1032L16.5547 21.4175ZM16.5547 21.4175L15.869 22.1032C16.2477 22.4819 16.8617 22.4819 17.2404 22.1032L16.5547 21.4175ZM16.5547 21.4175L16.5547 
+                  21.4175L17.2404 22.1032C17.6191 21.7245 17.6191 21.1105 17.2404 20.7318L16.5547 21.4175ZM12.0491 16.9118L16.5547 21.4175L17.2404 20.7318L12.7347 16.2262L12.0491 16.9118ZM16.5547 11.7205L12.0491 16.2262L12.7347 16.9118L17.2404 12.4062L16.5547 11.7205ZM22.8574 16.5697L22.8574 16.5697L22.8574 17.5394C23.393 17.5394 23.8271 17.1052 23.8271 16.5697L22.8574 16.5697ZM22.8574 16.5697L22.8574 16.5697L23.8271 16.5697C23.8271 16.0341 23.393 15.6 22.8574 15.6L22.8574 
+                  16.5697ZM13.1605 16.5697L22.8574 16.5697L22.8574 15.6L13.1605 15.6L13.1605 16.5697ZM13.1605 16.5697L13.1605 15.6C12.6249 15.6 12.1908 16.0341 12.1908 16.5697L13.1605 16.5697ZM13.1605 16.5697L12.1908 16.5697C12.1908 17.1052 12.6249 17.5394 13.1605 17.5394L13.1605 16.5697ZM22.8574 16.5697L13.1605 16.5697L13.1605 17.5394L22.8574 17.5394L22.8574 16.5697Z"
+                    fill="#4250F0"
+                  />
+                </svg>`}
+                ${selectedApp &&
+                html`<img
+                  src=${selectedApp.icon_url}
+                  title="${selectedApp.title}"
+                />`}
+
+                <p class="${styles.backLabel}">
+                  ${selectedApp ? selectedApp.title : 'Apps'}
+                </p>
+              </div>
+            `
+          : html`
+              <p id="appsHeaderTitle" class=${styles.appsHeaderTitle}>
+                ${(() => {
+                  if (selectedApp) {
+                    return selectedApp.title;
+                  }
+                  if (appName) {
+                    return 'Loading...';
+                  }
+                  return 'Apps';
+                })()}
+              </p>
+            `}
+        ${!selectedApp &&
+        !appName &&
+        html`<div id="search-container" class=${styles.searchContainer}>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="15"
+            height="15"
+            viewBox="0 0 15 15"
+            fill="none"
+          >
+            <path
+              d="M14.7706 13.6638L11.148 10.0407C13.0421 7.59989 12.8712 4.06416 10.6303 1.82385C9.45395 0.647448 7.89024 0 6.2271 0C4.56335 0 2.99953 0.647997 1.82385 1.82385C0.647448 2.99965 0 4.56335 0 6.2271C0 7.89084 0.647996 9.45466 1.82385 10.6303C3.00025 11.8067 4.56396 12.4542 6.2271 12.4542C7.62663 12.4542 8.95411 11.9942 10.0413 11.1481L13.6638 14.7706C13.8168 14.9236 14.0167 14.9997 14.2172 14.9997C14.4172 14.9997 14.6177 14.9236 14.7706 14.7706C15.0765 14.4654 15.0765 13.9697 14.7706 13.6639L14.7706 13.6638ZM2.93043 9.52291C2.05038 8.64226 1.56482 7.47179 1.56482 6.22694C1.56482 4.98153 2.04978 3.81114 2.93043 2.93037C3.81049 2.04972 4.98156 1.56476 6.2264 1.56476C7.47124 1.56476 8.6422 2.04972 9.52297 2.93037C11.3409 4.74767 11.3409 7.705 9.52297 9.52276C8.64232 10.4034 7.47124 10.8884 6.2264 10.8884C4.98156 10.8884 3.8112 10.4034 2.93043 9.52276V9.52291Z"
+              fill="#BDBDBD"
+            />
+          </svg>
+          <input
+            id="search-apps-flow-lifecycle"
+            class=${styles.searchInput}
+            placeholder="${userConfig.searchPlaceholder || 'Search for apps'}"
+            value=${searchText}
+            oninput=${(e: any) => {
+              setSearchText(e.target.value);
+              filterApps(e.target.value, apps);
+            }}
+          />
+          ${searchText !== '' &&
+          html` <svg
+            class=${styles.clearCta}
+            onclick=${() => {
+              setSearchText('');
+              filterApps('', apps);
+            }}
+            xmlns="http://www.w3.org/2000/svg"
+            width="12"
+            height="12"
+            viewBox="0 0 12 12"
+            fill="none"
+          >
+            <path
+              d="M10.2426 10.2425L1.75732 1.75732"
+              stroke="#333333"
+              stroke-width="1.33333"
+              stroke-linecap="round"
+            />
+            <path
+              d="M10.2426 1.75732L1.75732 10.2425"
+              stroke="#333333"
+              stroke-width="1.33333"
+              stroke-linecap="round"
+            />
+          </svg>`}
+        </div>`}
+      </div>
+
+      ${true &&
+      filteredApps.length < 1 &&
+      !selectedApp &&
+      html` <div
+        id="appsForFlowsCardsNoAppFound"
+        class=${styles.appsForFlowsCardsNoAppFound}
+      >
+        ${searchText !== '' &&
+        html` ${isFetchingApps && html`<${LargeLoader} />`}
+        ${!searchInProgress && html`<p>Sorry, no apps found.</p>`}`}
+        ${searchText === '' &&
+        html` ${isFetchingApps && html`<${LargeLoader} />`}
+        ${!isFetchingApps && html`<p>Sorry, no apps found.</p>`}`}
+      </div>`}
+      ${true &&
+      (filteredApps.length > 0 || selectedApp) &&
+      html`
+        ${selectedApp
+          ? html`<div
+              class="${styles.marketplaceAuthSelectorWrap} integry-container__auth-selector"
+            >
+              <div class="${styles.heading}">Connected Accounts</div>
+              <div class=${styles.rows}>
+                ${selectedAppConnectedAccounts.map(
+                  (el: any, index: number) => html`<${AuthorizationRow}
+                    id=${el.id}
+                    value=${el.display_name}
+                    status=${`CONNECTED`}
+                    handleDelete=${(shouldDelete: boolean) =>
+                      shouldDelete
+                        ? deleteAuth(index)
+                        : setWillDeleteAuthWithIndex(null)}
+                    handleWillDelete=${() => willDelete(index)}
+                    willDelete=${willDeleteAuthWithIndex === index}
+                  />`,
+                )}
+              </div>
+              ${true &&
+              html`
+                <${Hint} dismissOnClick=${false} position="top" deltaY=${0}>
+                  <div
+                    data-hint="${allowMultipleAuths
+                      ? ''
+                      : `You cannot connect more than one account for ${selectedApp.title}.`}"
+                    class="${styles.checkboxRow} ${styles.buttonShadow} ${styles.marketplaceAddAccountBtn} ${allowMultipleAuths
+                      ? ''
+                      : styles.disabled}"
+                    onclick=${openAuthWindow}
+                  >
+                    <span>+</span>
+                    <p>Add account</p>
+                  </div>
+                <//>
+              `}
+            </div>`
+          : html`<div
+              id="${`embed--appsForFlowsCardsComfortable__${renderMode}`}"
+              onscroll=${handleScroll}
+              class="${props.genericData.viewStyle === ViewStyles.COMPACT
+                ? styles.appsForFlowsCardsCompact
+                : styles.appsForFlowsCards}"
+            >
+              ${filteredApps.map(
+                (app: any) =>
+                  html`
+                    <${genericData.viewStyle === ViewStyles.COMPACT
+                      ? AppCardCompact
+                      : AppCard}
+                      key=${app.id}
+                      app=${app}
+                      onAppClick=${(appClicked: any) => {
+                        setSelectedApp(appClicked);
+                      }}
+                    />
+                  `,
+              )}
+              ${cursor &&
+              html`<div
+                class="${styles.loadMore}"
+                onclick=${() => {
+                  getApps({
+                    currentApps: apps,
+                  });
+                }}
+              >
+                ${loadingNextPage
+                  ? html`<${ThreeDotLoader} color="#999" />`
+                  : html``}
+              </div>`}
+            </div>`}
+      `}
+      ${!isFetchingApps &&
+      html`<${Footer}
+        style=${renderMode === 'INLINE'
+          ? 'padding-top: 12px;'
+          : 'padding-top: 12px; box-shadow: 0px -6px 10px 0px rgba(255, 255, 255, 0.8);'}
+      />`}
+    </div>
+  `;
+};
+
+export default connect<StoreType, unknown, StoreType, unknown>(
+  ['genericData', 'userConfig', 'showMarketplaceModal'],
+  actionFunctions,
+)(MarketplaceAppsCompact);