@integry/sdk 4.5.2 → 4.5.4

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

@@ -0,0 +1,66 @@
+.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

@@ -0,0 +1,34 @@
+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

@@ -0,0 +1,10 @@
+.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

@@ -0,0 +1,132 @@
+/* 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

@@ -0,0 +1,117 @@
+.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);
+        }
+    }
+}

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

@@ -0,0 +1,242 @@
+import { html } from 'htm/preact';
+import { useEffect, useContext, useState, useRef } from 'preact/hooks';
+import { connect } from 'unistore/preact';
+import { Modal } from '@/components/Modal';
+import { MarketplaceRenderModes, ViewStyles } from '@/types';
+import { actionFunctions } from '@/store';
+import AppContext from '@/contexts/AppContext';
+import { StoreType } from '@/types/store';
+import { AppConnectionStatus, MarketplaceAppAuthorizationType, MarketplaceAppBundle, UserConfig } from '@/interfaces';
+import RequestAppModal from '@/features/common/RequestAppWidget/RequestAppModal';
+import AppPage from '@/features/containers/AppPageContainer/AppPage';
+import AccountDropdown from '@/features/common/AccountDropdown';
+import MarketplaceContentWrap from './MarketplaceContentWrap';
+import styles from './styles.module.scss';
+
+interface ContainerProps extends StoreType {
+  marketplaceId: string;
+  userConfig?: UserConfig;
+  renderMode: MarketplaceRenderModes;
+}
+
+const MarketplaceContainer = (props: ContainerProps) => {
+  const {
+    renderMode,
+    marketplaceId,
+    userConfig,
+    genericData,
+  } = props;
+  const context = useContext(AppContext);
+  const [loadingAppsStatus, setLoadingAppsStatus] = useState('LOADING');
+  const [marketplaceApps, setMarketplaceApps] = useState<MarketplaceAppBundle[]>([]);
+  const appConnectionVerificationSent = useRef(false);
+  const tempMarketplaceAppsRef = useRef<MarketplaceAppBundle[]>([]);
+
+  const setConnectionStatus = (connectionStatus: AppConnectionStatus, marketplaceAppId: number) => {
+    const updatedMarketplaceApps = tempMarketplaceAppsRef.current.map((marketplaceApp) => {
+      if (marketplaceAppId === marketplaceApp.id) {
+        return {
+          ...marketplaceApp,
+          connectionStatus,
+        }
+      } 
+      return marketplaceApp;
+    });
+    tempMarketplaceAppsRef.current = updatedMarketplaceApps;
+    setMarketplaceApps(updatedMarketplaceApps);
+  } 
+
+  const setMarketplaceAppsConnectionStatus = (resData: MarketplaceAppBundle[]) => {
+    resData.forEach((marketplaceApp) => {
+      const authorizationType = marketplaceApp.app.authorization_type;
+      if (authorizationType.authorizations.length > 0 && authorizationType.default_authorization) {
+      setConnectionStatus(AppConnectionStatus.VERIFYING, marketplaceApp.id);
+      context?.apiHandler
+        .verifyOAuth(authorizationType.default_authorization)
+        .then((res) => {
+          if (res) {
+            setConnectionStatus(AppConnectionStatus.CONNECTED, marketplaceApp.id);
+          } else {
+            setConnectionStatus(AppConnectionStatus.ERROR, marketplaceApp.id);
+          }
+        })
+    }
+    });
+  }
+
+  useEffect(() => {
+    if (marketplaceApps.length > 0 && !appConnectionVerificationSent.current) {
+      appConnectionVerificationSent.current = true;
+      tempMarketplaceAppsRef.current = marketplaceApps;
+      setMarketplaceAppsConnectionStatus(marketplaceApps);
+      setLoadingAppsStatus('');
+    }
+  }, [marketplaceApps, appConnectionVerificationSent.current]);
+
+  useEffect(() => {
+    if (!props.showMarketplaceAppPageId) {
+       appConnectionVerificationSent.current = false;
+     }
+    if (marketplaceId) {
+      setLoadingAppsStatus('LOADING');
+      context?.apiHandler
+        .getMarketplaceDetails({ marketplaceId })
+        .then((data) => {
+          if (data) {
+            props.setGenericData({
+              marketplaceDetail: data.meta
+            })
+          } else {
+            console.error(`Failed to fetch marketplace details`);
+          }
+        })
+        context?.apiHandler
+          .getMarketplaceApps({
+            marketplaceId
+          })
+          .then((resData) => {
+            if (resData) {
+              setMarketplaceApps(resData);
+              if (resData.length < 1) {
+                setLoadingAppsStatus('');
+              }
+            } else {
+              setLoadingAppsStatus(`Error: Failed to fetch marketplace apps`);
+            }
+          });
+    }
+  }, [marketplaceId, props.showMarketplaceAppPageId]);
+
+  const fetchIUAccounts = (): void => {
+    context?.apiHandler
+        .getIUTestingAccounts()
+        .then((data) => {
+          if (data) {
+            props.setGenericData({
+              IUAccountsData: data
+            })
+          } else {
+            console.error(`Failed to fetch IU Accounts data`);
+          }
+        })
+  }
+
+  useEffect(() => {
+    if (userConfig && userConfig.viewAsIU) {
+      fetchIUAccounts();
+    }
+  }, [])
+  
+  const handleCloseMarketplaceModal = () => {
+    props.setStoreState({
+      showMarketplaceModal: false,
+    });
+  };
+
+  const handelAuthorizationSelected = (): void => {
+    fetchIUAccounts();
+  }
+
+  const getAuthorizationTypeWithAccounts = (): MarketplaceAppAuthorizationType | null => {
+    if (props.genericData.IUAccountsData) {
+      return props.genericData.IUAccountsData;
+    }
+    return null;
+  } 
+
+  const handleGoBackToApps = (): void => {
+    props.setStoreState({
+      showMarketplaceAppPageId: null,
+    })
+  };
+
+  return html`
+    <div class="${styles['integry-container']} ${'integry-container'}">
+      ${renderMode === MarketplaceRenderModes.INLINE &&
+      html`
+        <div
+          class="${styles.inlineSetup} ${'integry-container__marketplace--inline'}"
+        >
+        ${props.showMarketplaceAppPageId ?
+            html`<${AppPage} marketplaceId=${marketplaceId} marketplaceAppId=${props.showMarketplaceAppPageId} />`    
+            : html`
+            <${MarketplaceContentWrap} className="inline-marketplace-content" loadingAppsStatus=${loadingAppsStatus} marketplaceApps=${marketplaceApps} />      
+            `
+          } 
+        </div>
+      `}
+    </div>
+    ${renderMode === MarketplaceRenderModes.MODAL &&
+    html`
+      <${Modal}
+        isOpen=${props.showMarketplaceModal}
+        onClose=${handleCloseMarketplaceModal}
+        className="marketplace-modal"
+        isCompact=${genericData.viewStyle === ViewStyles.COMPACT}
+      >
+        <div class="${styles.modalSetup} ${'integry-container__marketplace--modal'}">
+          <div class=${styles.modalHeader}>
+            <div class="${styles.modalTitle}">
+              ${props.showMarketplaceAppPageId ? html`
+                <div class="${styles.backLink}" onclick=${handleGoBackToApps}>
+                  <svg width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <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>
+                  <p class="${styles.backLabel}">Apps</p>
+                </div>
+              `
+              : html`
+              ${userConfig?.marketplaceModalTitle || 'Marketplace'}`
+              }
+            </div>
+            ${userConfig?.viewAsIU && !props.showMarketplaceAppPageId && html`
+            <div class="${styles.accountsWrap}">
+              <p class="${styles.label}">Account:</p>
+              <div class="${styles.accountList}">
+                <${AccountDropdown} 
+                authorizationType=${getAuthorizationTypeWithAccounts()}
+                onAuthorizationSelected=${handelAuthorizationSelected}
+                isIUAccount=${true}
+                showError=${true}
+                />
+              </div>
+            </div>
+            `}
+          </div>
+          <div class="${styles.modalContentWrap}">
+          ${props.showMarketplaceAppPageId ?
+              html`<${AppPage} marketplaceId=${marketplaceId} marketplaceAppId=${props.showMarketplaceAppPageId} />`    
+              : html`
+              <${MarketplaceContentWrap} className="modal-marketplace-content" 
+                loadingAppsStatus=${loadingAppsStatus} 
+                marketplaceApps=${marketplaceApps} 
+                handleCloseMarketplaceModal=${handleCloseMarketplaceModal}
+                />        
+              `
+           }  
+          </div>
+        </div>
+      <//>
+    `}
+    ${html`
+      <${RequestAppModal} />
+    `}
+  `;
+};
+
+export default connect<ContainerProps, unknown, StoreType, unknown>(
+  [
+    'userConfig',
+    'genericData',
+    'showMarketplaceModal',
+    'showMarketplaceAppPageId',
+    'IUAccountsData',
+  ],
+  actionFunctions,
+)(MarketplaceContainer);

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

@@ -0,0 +1,84 @@
+.integry-container {
+  width: inherit;
+  height: inherit;
+  .inlineSetup {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: column;
+    position: relative;
+    justify-content: flex-start;
+    height: 100%;
+    padding: 15px;
+  }
+}
+ .modalSetup {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column;
+    position: relative;
+    justify-content: center;
+    height: 100%;
+    padding: 24px;
+    padding-left: 0px;
+    padding-right: 0px;
+    padding-bottom: 0px;
+    .modalHeader {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      padding-right: 100px;
+      height: 48px;
+      border-bottom: 1px solid #E0E0E0;
+      .modalTitle {
+        font-family: inherit;
+        font-style: normal;
+        font-weight: 500;
+        font-size: 18px;
+        line-height: 22px;
+        color: #000000;
+        // margin-bottom: 24px;
+        margin-left: 32px;
+        .backLink {
+            display: flex;
+            align-items: center;
+            justify-content: flex-start;
+            cursor: pointer;
+            svg {
+                vertical-align: unset;
+                margin-right: 8px;
+            }
+            p {
+                margin: 0px;
+            }
+            .backLabel {
+              font-family: inherit;
+              font-style: normal;
+              font-weight: 400;
+              font-size: 14px;
+              line-height: 17px;
+              color: #000000;
+            }
+        }
+      }
+      .accountsWrap {    
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        .label {
+          font-family: 'Inter';
+          font-style: normal;
+          font-weight: 500;
+          font-size: 12px;
+          line-height: 15px;
+          color: #333333;
+          margin: 0px;
+          margin-right: 10px;
+        }
+      }
+    }
+    .modalContentWrap {
+      margin-top: 24px;
+      margin-left: 32px;
+      margin-right: 30px;
+    }
+  }