@integry/sdk 4.7.39 → 4.7.41

package/src/features/containers/MarketplaceContainer/AppCard/index.ts

@@ -1,91 +0,0 @@
-import { html } from 'htm/preact';
-// import { useEffect, useContext, useState } from 'preact/hooks';
-import { Tag } from '@/components/Tag';
-import { AppConnectionStatus, MarketplaceAppBundle } from '@/interfaces';
-// import AppContext from '@/contexts/AppContext';
-
-import { Loader } from '@/components/Loader';
-import styles from './styles.module.scss';
-
-enum ConnectionTagType {
-  CONNECTED = 'success',
-  ERROR = 'fail',
-  VERIFYING = '',
-  '' = '',
-}
-
-interface AppCardProps {
-    marketplaceApp: MarketplaceAppBundle;
-    handleCardClick?: (marketplaceApp: MarketplaceAppBundle) => void;
-}
-
-const AppCard = (props: AppCardProps) => {
-  const {
-    marketplaceApp,
-    handleCardClick
-  } = props;
-  // const context = useContext(AppContext);
-  // const [connectionStatus, setConnectionStatus] = useState<AppConnectionStatus>(AppConnectionStatus.NONE);
-  const { app, connectionStatus = AppConnectionStatus.NONE } = marketplaceApp;
-
-  // useEffect(() => {
-  //   const authorizationType = marketplaceApp.app.authorization_type;
-  //     if (authorizationType.authorizations.length > 0 && authorizationType.default_authorization) {
-  //     setConnectionStatus(AppConnectionStatus.VERIFYING);
-  //     context?.apiHandler
-  //       .verifyOAuth(authorizationType.default_authorization)
-  //       .then((res) => {
-  //         if (res) {;
-  //           setConnectionStatus(AppConnectionStatus.CONNECTED);
-  //         } else {
-  //           setConnectionStatus(AppConnectionStatus.ERROR);
-  //         }
-  //       })
-  //   }
-  // }, []);
-
-  const getConnectionStatus = () => {
-    if (connectionStatus === AppConnectionStatus.CONNECTED) {
-      return 'Connected';
-    }
-    if (connectionStatus === AppConnectionStatus.ERROR) {
-      return html`
-        <span class="${styles['app-card-tag__inner-span']}">Error <span style="height: 9px; top: 1px; position: relative; left: 1px;"><svg 
-            style="width: 1em; height: 1em;" 
-            width="9" height="9" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M4.99777 0.978142C5.06552 0.978142 5.23363 0.998713 5.32647 1.18386L8.80166 8.09071C8.88697 8.26043 8.82173 8.407 8.78912 8.461C8.7565 8.515 8.66115 8.64357 8.47296 8.64357H1.52258C1.33439 8.64357 1.23904 8.51757 1.20642 8.461C1.1738 8.407 1.10857 8.26043 1.19388 8.09071L4.66907 1.18386C4.76191 0.998713 4.93002 0.978142 4.99777 0.978142ZM4.99777 0.30957C4.63896 0.30957 4.28015 0.497285 4.08945 0.875285L0.614261 7.78214C0.262978 8.479 0.757283 9.30957 1.52258 9.30957H8.47547C9.24076 9.30957 9.73507 8.479 9.38379 7.78214L5.90609 0.875285C5.71539 0.497285 5.35658 0.30957 4.99777 0.30957Z" fill="#F05C42"/>
-            <path d="M4.99547 6.84888C4.87503 6.84888 4.77467 6.89259 4.69186 6.97745C4.60906 7.06231 4.56641 7.16516 4.56641 7.28602C4.56641 7.42488 4.60906 7.53288 4.69688 7.61002C4.7847 7.68716 4.88507 7.72573 5.00049 7.72573C5.11591 7.72573 5.21377 7.68716 5.30159 7.60745C5.3869 7.53031 5.42956 7.42231 5.42956 7.28602C5.42956 7.16516 5.3869 7.06231 5.30159 6.97745C5.21879 6.89002 5.11591 6.84888 4.99547 6.84888Z" fill="#F05C42"/>
-            <path d="M4.99795 3.28467C4.76209 3.28467 4.5714 3.48524 4.58143 3.72695L4.65671 5.99238C4.66173 6.18267 4.81479 6.33438 5.00046 6.33438C5.18614 6.33438 5.3392 6.18267 5.34422 5.99238L5.41698 3.72695C5.42451 3.48524 5.23382 3.28467 4.99795 3.28467Z" fill="#F05C42"/>
-            </svg></span>
-        </span>
-        `;
-    } 
-    return ''; 
-  };
-
-  const onCardClick = (): void => {
-    if (handleCardClick) {
-      handleCardClick(marketplaceApp);
-    }
-  } 
-
-  return html`
-    <div class="${styles.appCard} integry-container__app-card" onclick="${onCardClick || ''}">
-      <div class="${styles.leftSection}">
-       <img src="${app.icon_url}" class="${styles.appLogo}" alt="app-logo" />
-      </div>
-      <div class="${styles.rightSection}">
-        <div class="${styles.appTitleSection}">
-        <span class="${styles.appName}">${app.name}</span> ${connectionStatus === AppConnectionStatus.VERIFYING && html`<${Loader} />`} 
-        ${app.authorization_type.authorizations.length > 0 && html`
-        <${Tag} label="${getConnectionStatus()}" type="${ConnectionTagType[connectionStatus]}" className="app-card-tag" />`}
-        </div>
-        <div class="${styles.appDescription}">
-          ${marketplaceApp.long_description || ''}
-        </div>
-      </div>
-    </div>
-  `;
-};
-
-export { AppCard };

package/src/features/containers/MarketplaceContainer/AppCard/styles.module.scss

@@ -1,66 +0,0 @@
-.appCard {
-    background: #FFFFFF;
-    border: 1px solid #E0E0E0;
-    border-radius: 8px;
-    display: flex;
-    flex-direction: row;
-    width: 350px;
-    height: 88px;
-    padding: 16px;
-    cursor: pointer;
-    filter: drop-shadow(0px 0px 12px rgba(0, 0, 0, 0.06));
-    .leftSection {
-        .appLogo {
-            height: 56px;
-            width: 56px;
-            object-fit: contain;
-            border-radius: 50%;
-        }
-        margin-right: 16px;
-    }
-    .rightSection {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        .appTitleSection {
-            font-family: inherit;
-            font-style: normal;
-            font-weight: 600;
-            font-size: 16px;
-            line-height: 19px;
-            color: #333333;
-            display: flex;
-            flex-wrap: nowrap;
-            margin-bottom: 8px;
-            align-items: center;
-            .appName {
-                margin-right: 8px;
-                max-width: 160px;
-                white-space: nowrap;
-                overflow: hidden;
-                text-overflow: ellipsis;
-            }
-        }
-        .appDescription {
-            font-family: inherit;
-            font-style: normal;
-            font-weight: 400;
-            font-size: 14px;
-            line-height: 17px;
-            color: #4F4F4F;
-            max-width: 242px;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            margin-left: 1px;
-        }
-    }
-    &:hover {
-        border: 1px solid #4250f0;
-    }
-}
-
-.app-card-tag__inner-span {
-    display: flex;
-    align-items: baseline;
-}

package/src/features/containers/MarketplaceContainer/AppListing/index.ts

@@ -1,34 +0,0 @@
-import { html } from 'htm/preact';
-import { connect } from 'unistore/preact';
-import { actionFunctions } from '@/store';
-import { StoreType } from '@/types/store';
-import { MarketplaceAppBundle } from '@/interfaces';
-import { AppCard } from '@/features/containers/MarketplaceContainer/AppCard';
-import styles from './styles.module.scss';
-
-interface AppListingProps extends StoreType {
-  marketplaceApps: MarketplaceAppBundle[];
-}
-
-const AppListing = (props: AppListingProps) => {
-  const {
-      marketplaceApps
-  } = props;
-
-  const handleCardClick = (marketplaceApp: MarketplaceAppBundle): void => {
-    props.setStoreState({
-      showMarketplaceAppPageId: marketplaceApp.id,
-    })
-  };
-
-  return html`
-    <div class="${styles.appListing} integry-container__app-listing">
-      ${marketplaceApps.map((marketplaceApp) => html`<${AppCard} handleCardClick=${handleCardClick} key=${marketplaceApp.id} marketplaceApp=${marketplaceApp} />`)}
-    </div>
-  `;
-};
-
-export default connect<AppListingProps, unknown, StoreType, unknown>(
-  [],
-  actionFunctions,
-)(AppListing);

package/src/features/containers/MarketplaceContainer/AppListing/styles.module.scss

@@ -1,10 +0,0 @@
-.appListing {
-    // display: grid;
-    // grid-template-columns: repeat(3, 350px);
-    // grid-column-gap: 30px;
-    // grid-row-gap: 32px;
-    display: flex;
-    flex-wrap: wrap;
-    row-gap: 24px;
-    column-gap: 30px;
-}

package/src/features/containers/MarketplaceContainer/MarketplaceContentWrap/index.ts

@@ -1,132 +0,0 @@
-/* eslint-disable no-nested-ternary */
-import { html } from 'htm/preact';
-import { useEffect, useRef, useState } from 'preact/hooks';
-import { connect } from 'unistore/preact';
-import { actionFunctions } from '@/store';
-import { StoreType } from '@/types/store';
-import { Search } from '@/components/Search';
-import AppListing from '@/features/containers/MarketplaceContainer/AppListing';
-import { MarketplaceAppBundle } from '@/interfaces';
-
-import { LargeLoader } from '@/components/LargeLoader';
-import { ErrorMessage } from '@/components/ErrorMessage';
-import RequestAppWidget from '@/features/common/RequestAppWidget';
-import styles from './styles.module.scss';
-
-
-interface MarketplaceContentWrapProps extends StoreType {
-    marketplaceApps: MarketplaceAppBundle[];
-    loadingAppsStatus: string;
-    className?: string;
-    handleCloseMarketplaceModal?: () => void;
-}
-
-const MarketplaceContentWrap = (props: MarketplaceContentWrapProps) => {
-    const { marketplaceApps, loadingAppsStatus, className, handleCloseMarketplaceModal } = props;
-    const [filteredApps, setFilteredApps] = useState<MarketplaceAppBundle[]>(marketplaceApps);
-    const searchValueRef = useRef('');
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const [resetSearch, setResetSearch] = useState(false);
-
-    useEffect(() => {
-        if (searchValueRef.current) {
-            // eslint-disable-next-line no-use-before-define
-            searchApps(searchValueRef.current);
-        } else {
-            setFilteredApps(marketplaceApps);
-        }
-    }, [marketplaceApps]);
-
-    const connectedApps: MarketplaceAppBundle[] = [];
-    const discoverApps: MarketplaceAppBundle[] = [];
-    filteredApps.forEach((marketplaceApp: MarketplaceAppBundle) => {
-        if (marketplaceApp.app.authorization_type.authorizations.length > 0) {
-            connectedApps.push(marketplaceApp);
-        } else {
-            discoverApps.push(marketplaceApp);
-        }
-    });
-  
-    const searchApps = (searchValue: string) => {
-        if (searchValue) {
-            searchValueRef.current = searchValue;
-            const searchedApps = marketplaceApps.filter((marketplaceApp) => {
-                if (marketplaceApp.app.name.toLowerCase().includes(searchValue.toLowerCase())) {
-                    return true;
-                }
-                return false;
-            });
-            setFilteredApps(searchedApps);
-        } else {
-            searchValueRef.current = '';
-            setFilteredApps(marketplaceApps);
-        }
-    };
-
-    const onClickTellButtonSearchPopUp = () => {
-        if (handleCloseMarketplaceModal) {
-            handleCloseMarketplaceModal();
-        }
-        props.setStoreState({
-            requestAppFormData: {
-                appField: searchValueRef.current,
-            }
-        });
-        // setResetSearch((prev) => !prev);
-    }
-
-    return html`
-    ${loadingAppsStatus === 'LOADING' ? html`<div class="${styles.marketplaceLoader}"><${LargeLoader} /></div>` : html`
-        <div class="${styles[className || '']}">
-            <div class="${styles.searchWrap}">
-                <${Search} reset=${resetSearch} onChange=${searchApps} disabled className="search-marketplace" placeholder="Search by app name"/>
-                ${searchValueRef.current && filteredApps.length === 0 && html`
-                <div class="${styles.searchAppPopUp}">
-                    <p class="${styles.searchText}">No results for “${searchValueRef.current}”</p>
-                    <${RequestAppWidget} buttonWidth="107px" buttonHeight="32px" className="search-pop-up"  onClickTellButton=${onClickTellButtonSearchPopUp}/>
-                </div>`
-                }
-            </div>
-            <div class="${styles.appListingWrap}">
-            ${connectedApps.length > 0 && html`
-                <div class="${styles.marketplaceSection} ${'integry-container__marketplace-section'}">
-                <h3 class="${styles.sectionTitle} ${'integry-container__marketplace-section__title'}">Connected apps</h3>
-                <${AppListing} marketplaceApps="${connectedApps}" />
-                </div>
-            `}
-            ${discoverApps.length > 0 && html`
-                <div class="${styles.marketplaceSection} ${styles.discoverApps} ${'integry-container__marketplace-section'}">
-                <h3 class="${styles.sectionTitle} ${'integry-container__marketplace-section__title'}">Discover apps</h3>
-                <${AppListing} marketplaceApps="${discoverApps}" />
-                </div>
-            `}
-            ${connectedApps.length === 0 && discoverApps.length === 0 && html`
-                <div class="${styles.marketplaceSection} ${'integry-container__marketplace-section'}">
-                <h3 class="${styles.sectionTitle} ${'integry-container__marketplace-section__title'}">
-                    ${marketplaceApps.length === 0 ? 'No apps added in marketplace'
-                    : filteredApps.length === 0 ? `No results for “${searchValueRef.current}”` : 'Discover apps'}
-                </h3>
-                ${loadingAppsStatus ? html`
-                    <div class="${styles.errorMessageWrap}">
-                    <${ErrorMessage}><p>${loadingAppsStatus}</p><//> 
-                    </div>
-                ` : html`
-                    <p class="${styles.infoMessage}">
-                    </p>
-                `}
-                </div>
-            `}
-            </div>
-        </div>
-        <${RequestAppWidget} className="marketplace-apps"  onClickTellButton=${handleCloseMarketplaceModal} />
-    `
-    }
-    `;
-}
-
-export default connect<MarketplaceContentWrapProps, unknown, StoreType, unknown>(
-  [
-    'genericData',
-  ],
-  actionFunctions,
-)(MarketplaceContentWrap);

package/src/features/containers/MarketplaceContainer/MarketplaceContentWrap/styles.module.scss

@@ -1,117 +0,0 @@
-.marketplaceSection {
-margin-bottom: 40px;
-.sectionTitle {
-    font-family: inherit;
-    font-style: normal;
-    font-weight: 500;
-    font-size: 18px;
-    line-height: 22px;
-    color: #333333;
-    margin: 0px;
-    margin-bottom: 24px;
-    margin-top: 0px;
-}
-.errorMessageWrap {
-    margin-left: 2px;
-}
-.infoMessage{
-    margin-left: 2px;
-    font-family: inherit;
-    font-style: normal;
-    font-weight: normal;
-    font-size: 16px;
-    line-height: 19px;
-    color: #333333;
-}
-}
-.searchWrap {
-    position: relative;
-    .searchAppPopUp {
-        position: absolute;
-        top: 42px;
-        left: 0px;
-        background: #FFFFFF;
-        border: 1px solid rgba(0, 0, 0, 0.2);
-        box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.12);;
-        border-radius: 4px;
-        padding: 16px 22px;
-        width: 445px;
-        .searchText {
-            font-family: inherit;
-            font-style: normal;
-            font-weight: 500;
-            font-size: 14px;
-            line-height: 17px;
-            color: #7E7A8F;
-            margin: 0px;
-            margin-bottom: 6px;
-        }
-        @media (min-width: 320px) {
-            max-width: 353px;
-        }
-        @media (min-width: 875px) {
-            max-width: 445px;
-        }
-    }
-}
-.marketplaceLoader {
-    position: relative;
-    left: calc(100% - 26px - 50%);
-    top: 30%;
-    width: fit-content;
-}
-.modal-marketplace-content {
-    min-height: calc(100vh - 100px - 186px - 30px);
-    margin-bottom: 30px;
-    .marketplaceSection {
-    .sectionTitle {
-        font-family: inherit;
-        font-style: normal;
-        font-weight: 500;
-        font-size: 18px;
-        line-height: 22px;
-        color: #000000;
-        margin: 0px;
-        margin-bottom: 24px;
-        margin-top: 0px;
-    }
-    }
-    @media (min-height: 1152px) {
-        min-height: calc(1000px - 186px - 30px);
-    }
-}
-.inline-marketplace-content {
-    height: calc(100% - 40px);
-    margin-bottom: 30px;
-    .marketplaceSection {
-        &.discoverApps {
-            margin-bottom: 0px;
-        }
-    }
-    .appListingWrap {
-        overflow-y: auto;
-        max-height: calc(100% - 68px);
-        &::-webkit-scrollbar {
-            width: 7px;
-        }
-
-        /* Track */
-        &::-webkit-scrollbar-track {
-            // background: #f1f1f1;
-            background: transparent;
-            border-radius: 8px;
-        }
-
-        /* Handle */
-        &::-webkit-scrollbar-thumb {
-            background: #BDBDBD;
-            border: 1px solid #BDBDBD;
-            border-radius: 8px;
-        }
-
-        /* Handle on hover */
-        &::-webkit-scrollbar-thumb:hover {
-            background: rgb(116, 116, 116);
-        }
-    }
-}