@integry/sdk 4.5.2 → 4.5.4

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

@@ -0,0 +1,161 @@
+import { html } from 'htm/preact';
+import {
+  useEffect,
+  useState,
+  useContext
+} from 'preact/hooks';
+
+import { Loader } from '@/components/Loader';
+import AppCard from '@/features/common/AppCard';
+import AppCardCompact from '@/features/common/AppCardCompact';
+import Footer from '@/components/Footer';
+
+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 AppsForFlows = (props: any) => {
+  const { genericData, renderMode, userConfig } = props;
+  const context = useContext(AppContext);
+  const [apps, setApps] = useState<any[]>([]); 
+  const [isFetchingApps, setIsFetchingApps] = useState<boolean>(true);
+  const [searchText, setSearchText] = useState<string>('');
+  const [totalApps, setTotalApps] = useState<number>(0);
+  const getApps = ({
+    nextURL = null,
+    currentApps = <any>[],
+  }) => {
+    setIsFetchingApps(true);
+    if(genericData.deploymentId && genericData.showTemplates) {
+      context?.apiHandler.getAdminApps({
+        bundleId: genericData.deploymentId,
+        nextURL,
+      }).then((appsResponse) => {
+        const { links } = appsResponse;
+        const tempApps = appsResponse.results.map((app: any) => ({
+            ...app,
+          }));
+  
+        if (links.next) {
+          getApps({
+            nextURL: links.next,
+            currentApps: [...currentApps, ...tempApps],
+          });
+        } else {
+          setTotalApps(appsResponse.count || (tempApps || []).length);
+          setApps([...currentApps, ...tempApps]);
+          setIsFetchingApps(false);
+        }
+      }).catch((error) => {
+        // eslint-disable-next-line no-console
+        console.log('error', {error});
+        setIsFetchingApps(false);
+      });
+    }
+    else {
+      context?.apiHandler.getApps({
+        tags: userConfig.tags || [],
+        nextURL,
+      }).then((appsResponse) => {
+        const { links } = appsResponse;
+        const tempApps = appsResponse.results.map((app: any) => ({
+            ...app,
+          }));
+  
+        if (links.next) {
+          getApps({
+            nextURL: links.next,
+            currentApps: [...currentApps, ...tempApps],
+          });
+        } else {
+          setTotalApps(appsResponse.count || (tempApps || []).length);
+          setApps([...currentApps, ...tempApps]);
+          setIsFetchingApps(false);
+        }
+      }).catch((error) => {
+        // eslint-disable-next-line no-console
+        console.log('error', {error});
+        setIsFetchingApps(false);
+      });
+    }
+  };
+  const filterApps = (inputString: string, items: any) => {
+    const cleanedInput = inputString.trim(); // Remove trailing spaces
+  
+    if (cleanedInput === '') {
+      return items; // Return all items if cleanedInput is empty
+    }
+  
+    const filteredItems = items.filter((item: any) =>
+      item.name.toLowerCase().includes(cleanedInput.toLowerCase())
+    );
+    return filteredItems;
+  }
+  useEffect(() => {
+    getApps({
+      currentApps: apps,
+    });
+  }, []);
+  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}>
+        <p id="appsHeaderTitle" class=${styles.appsHeaderTitle}>${userConfig.title || 'Apps'}${' '}${isFetchingApps ? html`<${Loader} />` : html`(${totalApps || apps.length})`}</p>
+        <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);
+            }}
+          />
+          ${searchText !== '' && html`
+          <svg class=${styles.clearCta} onclick=${() => {
+            setSearchText('');
+          }} 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>
+      ${isFetchingApps && html`<div style="height: 300px;" />`}
+      ${!isFetchingApps && filterApps(searchText ,apps || []).length < 1 && html`
+      <div id="appsForFlowsCardsNoAppFound" class=${styles.appsForFlowsCardsNoAppFound}>
+        <svg width="100" height="100" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg"><g opacity="0.5"><path d="M52 100.38C77.9574 100.38 99 79.3378 99 53.3804C99 27.423 77.9574 6.38037 52 6.38037C26.0426 6.38037 5 27.423 5 53.3804C5 79.3378 26.0426 100.38 52 100.38Z" fill="#F9F9F9"></path><path d="M46.3186 16.7539V7.87435C46.3186 3.51833 42.7943 0 38.431 0H7.88758C3.52423 0 0 3.51833 0 7.87435V37.4451C0 41.8011 3.52423 45.3194 7.88758 45.3194H16.9499C19.0477 30.2409 31.1308 18.4293 46.3186 16.7539Z" fill="#EEEEEE"></path><path d="M16.9499 54.5339H7.88758C3.52423 54.5339 0 58.0523 0 62.4083V91.979C0 96.335 3.52423 99.8533 7.88758 99.8533H22.4041H38.431C42.7943 99.8533 46.3186 96.335 46.3186 91.979V83.0156C31.1308 81.3402 19.0477 69.5287 16.9499 54.5339Z" fill="#EEEEEE"></path><path d="M96.6648 80.2514L80.3023 63.9163C82.3161 59.6441 83.407 54.8692 83.407 49.9268C83.407 31.4974 68.4709 16.5864 50.0106 16.5864C48.7519 16.5864 47.5772 16.6702 46.3186 16.8377V22.3665V37.5289C46.3186 41.8849 42.7943 45.4032 38.431 45.4032H22.4041H16.9499C16.6982 46.9111 16.6143 48.4189 16.6143 50.0105C16.6143 51.6022 16.7821 53.11 16.9499 54.6179H38.431C42.7943 54.6179 46.3186 58.1362 46.3186 62.4922V76.9006V83.1833C47.4933 83.3509 48.7519 83.4346 50.0106 83.4346C55.0452 83.4346 59.7442 82.2619 64.0237 80.3352L80.3862 96.6703C84.8335 101.11 92.2176 101.11 96.6648 96.6703C101.112 91.9792 101.112 84.6912 96.6648 80.2514Z" fill="#E2E2E2"></path><path d="M38.4308 45.3194C42.7941 45.3194 46.3184 41.801 46.3184 37.445V22.2827V16.7539C31.1306 18.4293 19.0475 30.2408 16.9497 45.3194H22.4039H38.4308Z" fill="#C9C9C9"></path><path d="M46.3184 62.4083C46.3184 58.0523 42.7941 54.5339 38.4308 54.5339H16.9497C19.0475 69.6125 31.1306 81.424 46.3184 83.0994V76.8167V62.4083Z" fill="#C9C9C9"></path></g></svg>
+        ${searchText !== '' && html`<p>Sorry, we can't find the app you're looking for. Please try again with a different search term.</p>`}
+        ${searchText === '' && html`<p>Sorry, no apps found.</p>`}
+      </div>`}
+      ${!isFetchingApps && filterApps(searchText ,apps || []).length > 0 && html`
+      <div id="${`embed--appsForFlowsCards__${renderMode}`}"
+      class="${props.genericData.viewStyle === ViewStyles.COMPACT ? styles.appsForFlowsCardsCompact : styles.appsForFlowsCards}">
+        ${filterApps(searchText ,apps || []).map((app: any) => 
+          html`
+            <${genericData.viewStyle === ViewStyles.COMPACT ? AppCardCompact : AppCard} key=${app.id} app=${app} onAppClick=${(e: any) => {
+              props.setGenericData({
+                app_id: e.id,
+              })
+            }} />
+        `)}
+      </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,
+)(AppsForFlows);

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

@@ -0,0 +1,279 @@
+.appsContainer {
+  * {
+    user-select: none;
+  }
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  border-radius: 8px;
+  height: calc(100%);
+  padding-bottom: 0px;
+  min-height: 615px;
+  // min-height: 605px;
+  max-height: calc(100vh - 140px);
+  width: 100%;
+
+  .appsForFlowsCards {
+    height: calc(100vh - 272px);
+    max-height: 465px;
+  }
+
+  .appsHeader {
+    width: 100%;
+  }
+}
+
+.appsForFlowsCardsNoAppFound {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  width: 100%;
+  margin-top: 24px;
+  flex: 1;
+  
+  p {
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 24px;
+    text-align: center;
+    color: #999999;
+    max-width: 318px;
+    margin: 0px;
+  }
+}
+
+.appsContainerInline {
+  * {
+    user-select: none;
+  }
+
+  display: block;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  border-radius: 8px;
+  height: calc(100%);
+  margin: auto;
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+
+  .appsHeader {
+    width: 100%;
+    box-shadow: none;
+
+    .searchContainer {
+      width: calc(100% - 72px);
+    }
+  }
+
+  .appsForFlowsCards {
+    width: calc(100% - 40px);
+    // height: 100%;
+    display: grid;
+    --auto-grid-min-size: 268px;
+    grid-template-columns: repeat(auto-fill, minmax(var(--auto-grid-min-size), 1fr));
+    grid-gap: 8px;
+    grid-template-rows: repeat(auto-fill, minmax(105px, 1fr));
+  }
+}
+
+.appsHeader {
+  // box-shadow: 0px 1px 0px 0px #EFEFEF;
+  box-shadow: none;
+  width: 100%;
+
+  .appsHeaderTitle {
+    color: var(--black-and-grey-title-and-desc, #333);
+    font-family: Inter;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
+    width: calc(100% - 24px);
+    margin-left: 24px;
+    margin-top: 16px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 4px;
+  }
+
+  .searchContainer {
+    margin: auto;
+    margin-top: 17px;
+    margin-bottom: 8px;
+    border-radius: 8px;
+    border: 1px solid #F2F2F2;
+    background: #FFF;
+    padding: 12px;
+    width: calc(100% - 72px);
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 10px;
+
+    input {
+      width: 100%;
+      outline: none;
+      border: none;
+      font-family: Inter;
+      font-size: 12px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: normal;
+      color: #333;
+
+      &:focus {
+        outline: none;
+      }
+
+      &::placeholder {
+        color: #999;
+        font-family: Inter;
+        font-size: 12px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: normal;
+      }
+    }
+
+    .clearCta {
+      cursor: pointer;
+    }
+  }
+}
+
+
+.appsForFlowsCards {
+  gap: 8px;
+  overflow: auto;
+  padding-top: 12px;
+  padding-bottom: 12px;
+  padding-left: 10px;
+  padding-right: 10px;
+  margin-top: 4px;
+  width: calc(100% - 46px);
+  // padding-right: 6px;
+  margin-left: 14px;
+  scrollbar-gutter: stable;
+  display: grid;
+  --auto-grid-min-size: 262px;
+  grid-template-columns: repeat(auto-fill, minmax(var(--auto-grid-min-size), 1fr));
+  grid-template-rows: repeat(auto-fill, 105px);
+  grid-gap: 8px;
+  flex: 1;
+
+  &::-webkit-scrollbar {
+    width: 5px;
+  }
+  /* Track */
+  &::-webkit-scrollbar-track {
+    background: transparent;
+    border-radius: 10px;
+  }
+
+  /* Handle */
+  &::-webkit-scrollbar-thumb {
+    background: #ededed;
+    border: 1px solid #e7e7e7;
+    border-radius: 10px;
+  }
+
+  /* Handle on hover */
+  &::-webkit-scrollbar-thumb:hover {
+    background: rgb(116, 116, 116);
+  }
+}
+
+.appsForFlowsCardsCompact {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  width: calc(100% + 15px);
+  overflow-y: auto;
+  scrollbar-gutter: stable;
+  padding-bottom: 24px;
+  flex: 1;
+  margin-top: 16px;
+
+  &::-webkit-scrollbar {
+    width: 5px;
+  }
+  /* Track */
+  &::-webkit-scrollbar-track {
+    background: transparent;
+    border-radius: 10px;
+  }
+
+  /* Handle */
+  &::-webkit-scrollbar-thumb {
+    background: #ededed;
+    border: 1px solid #e7e7e7;
+    border-radius: 10px;
+  }
+
+  /* Handle on hover */
+  &::-webkit-scrollbar-thumb:hover {
+    background: rgb(116, 116, 116);
+  }
+}
+
+.compact-view {
+  max-width: 342px;
+  margin: 0px;
+  padding: 0 24px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  margin: 0 auto;
+  border: 1px solid #eeeeee;
+  
+  .appsHeader {
+    .appsHeaderTitle {
+      color: var(--black-and-grey-title-and-desc, #333);
+      font-family: Inter;
+      font-size: 16px;
+      font-style: normal;
+      font-weight: 500;
+      line-height: normal;
+      margin-left: 0;
+      margin-top: 24px;
+    }
+  }
+
+  .searchContainer {
+    margin: 0;
+    border-radius: 8px;
+    border: 1px solid var(--Gray-6, #F2F2F2);
+    background: #FFF;
+    padding: 0 12px;
+    width: calc(100% - 24px) !important;
+    height: 40px;
+
+    .searchInput {
+      color: #333;  
+      font-family: Inter;
+      font-size: 12px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: normal;
+
+      &::placeholder {
+        color: var(--black-and-grey-draft-and-tooltip-desc, #999);
+        font-family: Inter;
+        font-size: 12px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: normal;
+      }
+    }
+  }
+}

package/src/features/containers/AuthSetupContainer/AppSelection.ts

@@ -0,0 +1,73 @@
+import fuzzysort from 'fuzzysort';
+import { html } from 'htm/preact';
+import { useEffect, useState } from 'preact/hooks';
+
+import { AppsForAuthConnection, BrandingApp } from '@/interfaces';
+import { Search } from '@/components/Search';
+import { truncate } from '@/utils/truncate';
+import { Hint } from '@/components/Tooltip';
+
+import styles from './styles.module.scss';
+
+export const AppSelection = (props: {
+  apps: BrandingApp[];
+  handleAppSelect(appId: number): void;
+}) => {
+  const { apps, handleAppSelect } = props;
+
+  const [filteredApps, setFilteredApps] = useState<BrandingApp[]>(apps);
+
+  const [query, setQuery] = useState('');
+
+  useEffect(() => {
+    setFilteredApps(apps);
+  }, [apps]);
+
+  useEffect(() => {
+    if (query) {
+      const filtered = fuzzysort
+        .go(query, apps, {
+          keys: ['name'],
+          scoreFn: (keysResult) => {
+            const nameResult = keysResult[0];
+            const tagsResult = keysResult[1];
+            // assign higher score to name result
+            const score = Math.max(
+              nameResult ? nameResult.score + 100 : -Infinity,
+              tagsResult ? tagsResult.score : -Infinity,
+            );
+            return score;
+          },
+        })
+        .map((el) => el.obj);
+      setFilteredApps(filtered);
+    } else {
+      setFilteredApps(apps);
+    }
+  }, [query]);
+
+  return html`
+    <div class=${styles.appSelection}>
+      <${Search}
+        placeholder="Search for an app"
+        onChange=${(val: string) => setQuery(val)}
+      >
+      <//>
+      <div class=${styles.template_grid}>
+        ${filteredApps.map(
+          (el) => html` <div
+            onclick=${() => handleAppSelect(el.id)}
+            class=${styles.appCard}
+          >
+            <div>
+              <img src=${el.icon_url} />
+            </div>
+            <${Hint} dismissOnClick=${false} position="top" deltaY=${0}>
+              <div data-hint="${el.name}">${truncate(el.name)}</div>
+            <//>
+          </div>`,
+        )}
+      </div>
+    </div>
+  `;
+};

package/src/features/containers/AuthSetupContainer/AuthTypeSelection.ts

@@ -0,0 +1,67 @@
+import { html } from 'htm/preact';
+
+import { AppsForAuthConnection } from '@/interfaces';
+import { Radio } from '@/components/RadioGroup/Radio';
+import { AuthorizationTypes } from '@/types';
+
+import styles from './styles.module.scss';
+import { Footer } from './Footer';
+
+const AUTH_NAMES: {
+  [key in AuthorizationTypes]: string;
+} = {
+  'OAuth2-1': 'Login to the app',
+  OAuth2: 'Login to the app',
+  APIKey: 'Provide an API Key',
+  Basic: 'Enter username and password',
+  BasicWithoutURL: 'Enter username and password',
+  BasicAndAPIKey: 'Enter username and password',
+  APIKeyWithURL: 'Provide an API Key',
+  APIKeySecret: 'Provide an API Key',
+  APIKeySecretRegion: 'Provide an API Key',
+  APISecret: 'Provide an API Key',
+};
+
+export const AuthTypeSelection = (props: {
+  selectedApp: AppsForAuthConnection;
+  selectedAuthTypeId: number;
+  hideBackButton?: boolean;
+  handleAuthTypeIdChange(id: number): void;
+  handleNav(): void;
+}) => {
+  const {
+    selectedApp,
+    selectedAuthTypeId,
+    handleAuthTypeIdChange,
+    handleNav,
+    hideBackButton = false,
+  } = props;
+
+  const handleChange = (id: number) => {
+    handleAuthTypeIdChange(id);
+  };
+
+  return html`
+    <div class=${styles.auth_type_selection}>
+      <div class=${styles.method_selection}>
+        <div class=${styles.text}>
+          Select one of the following methods to provide access.
+        </div>
+        <div class=${styles.authlist}>
+          ${selectedApp.authorization_type.map(
+            (el) => html`
+              <${Radio}
+                id=${el.id}
+                value=${AUTH_NAMES[el.type] || el.type}
+                isChecked=${selectedAuthTypeId === el.id}
+                onChange=${handleChange}
+              />
+            `,
+          )}
+        </div>
+        <${Footer} hideBackButton=${hideBackButton} handleNav=${handleNav}
+        disableNext=${!selectedAuthTypeId} //>
+      </div>
+    </div>
+  `;
+};

package/src/features/containers/AuthSetupContainer/Footer.ts

@@ -0,0 +1,32 @@
+import { html } from 'htm/preact';
+import { Button, ButtonTypes } from '@/components/Button';
+
+import styles from './styles.module.scss';
+
+export const Footer = (props: {
+  disableNext?: boolean;
+  hideBackButton?: boolean;
+  handleNav(direction: 'NEXT' | 'BACK'): void;
+}) => {
+  const { handleNav, hideBackButton = false, disableNext = false } = props;
+
+  return html`
+    <div class=${styles.footer}>
+      <div class=${styles.buttons}>
+        ${!hideBackButton &&
+        html`
+          <${Button}
+            label="Back"
+            onClick=${() => handleNav('BACK')}
+            type=${ButtonTypes.SECONDARY}
+          ><//>
+        `}
+        <${Button}
+          label="Next"
+          onClick=${() => handleNav('NEXT')}
+          hasError=${disableNext}
+        ><//>
+      </div>
+    </div>
+  `;
+};

package/src/features/containers/AuthSetupContainer/Header.ts

@@ -0,0 +1,39 @@
+import { html } from 'htm/preact';
+import { ComponentChild } from 'preact';
+
+import styles from './styles.module.scss';
+
+export const Header = (props: {
+  children: ComponentChild;
+  handleCloseClick(): void;
+}) => {
+  const { children, handleCloseClick } = props;
+
+  return html`
+    <div class=${styles.header}>
+      <div class=${styles.text}>${children}</div>
+      <div class=${styles.close} onclick=${handleCloseClick}>
+        <svg
+          width="20"
+          height="22"
+          viewBox="0 0 20 22"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M14.2426 16.1822L5.75732 6.86328"
+            stroke="#999999"
+            stroke-width="2"
+            stroke-linecap="round"
+          />
+          <path
+            d="M14.2426 6.86328L5.75732 16.1822"
+            stroke="#999999"
+            stroke-width="2"
+            stroke-linecap="round"
+          />
+        </svg>
+      </div>
+    </div>
+  `;
+};

package/src/features/containers/AuthSetupContainer/PostAdditionPopup.ts

@@ -0,0 +1,27 @@
+import { html, Component } from 'htm/preact';
+import { Button } from '@/components/Button';
+import { Header } from './Header';
+
+import styles from './styles.module.scss';
+
+export const PostAdditionPopup = (props: {
+  title: string;
+  iconUrl: string;
+  children?: Component;
+  handleCloseClick(): void;
+}) => {
+  const { title, iconUrl, handleCloseClick, children } = props;
+
+  return html`
+    <div class=${styles.successModal}>
+      <${Header} handleCloseClick=${handleCloseClick} //>
+      <div class=${styles.contents}>
+        <img class=${styles.img} src=${iconUrl} />
+        <div class=${styles.title}>${title}</div>
+        <div class=${styles.text}>${children}</div>
+        <${Button} label="OK" onClick=${handleCloseClick} width="75px"
+        height="38px" //>
+      </div>
+    </div>
+  `;
+};