@integry/sdk 4.7.39 → 4.7.40

package/src/features/containers/AppPageContainer/AppPage/index.tsx

@@ -1,262 +0,0 @@
-/* eslint-disable no-use-before-define */
-import { html } from 'htm/preact';
-import { connect } from 'unistore/preact';
-import { actionFunctions } from '@/store';
-import { StoreType } from '@/types/store';
-import { useEffect, useContext, useState, useRef } from 'preact/hooks';
-import AppContext from '@/contexts/AppContext';
-import { MarketplaceAppBundle, UploadFileObj } from '@/interfaces';
-import { LargeLoader } from '@/components/LargeLoader';
-import { EditableTextArea } from '@/components/EditableTextArea';
-// import { Modal } from '@/components/Modal';
-import AccountDropdown from '@/features/common/AccountDropdown';
-import FlowSetupContainer from '@/features/containers/FlowSetupContainer';
-import { Authorization } from '@/types';
-import { ConfirmationPopUp } from '@/components/PopUp/ConfirmationPopUp';
-import MediaUplaod from '@/components/MediaUpload';
-import MediaGallery from '@/components/MediaGallery';
-import IntegrationCard from '../IntegrationCard';
-import styles from './styles.module.scss';
-
-interface AppPageProps extends StoreType {
-  marketplaceId: string;
-  marketplaceAppId: string;
-}
-
-const AppPage = (props: AppPageProps) => {
-  const {
-    marketplaceId,
-    marketplaceAppId
-  } = props;
-  const context = useContext(AppContext);
-  const [appData, setAppData] = useState<MarketplaceAppBundle | null>(null);
-  const [loading, setLoading] = useState<boolean>(false);
-  const [reloadPage, setReloadPage] = useState<boolean>(false);
-  const [connectedAppAuthID, setConnectedAppAuthID] = useState<number | undefined | null>(null);
-  const connectedAppAuthIDRef = useRef<number | undefined | null>(null);
-  const [showConnectAccountPopUp, setShowConnectAccountPopUp] = useState(false);
-  const [triggerAddAccount, setTriggerAddAccount] = useState(false);
-
-  useEffect(() => () => {
-    props.setStoreState({
-      showSetupInline: false
-    })
-    props.resetTemplateFields();
-  }, []);
-
-   useEffect(() => {
-     if (marketplaceId) {
-       setLoading(true);
-      context?.apiHandler
-        .getMarketplaceAppDetail({ marketplaceId, marketplaceAppId, app_auth_id: connectedAppAuthID })
-        .then((data) => {
-          if (data) {
-            setAppData(data);
-            connectedAppAuthIDRef.current = data.app.authorization_type.default_authorization;
-          } else {
-            console.error(`Failed to fetch app details`);
-          }
-          setLoading(false);
-        })
-    }
-   }, [marketplaceId, marketplaceAppId, reloadPage, connectedAppAuthID]);
-
-  const handelAuthorizationSelected = (authObj: Authorization | null, authID: number): void => {
-    setShowConnectAccountPopUp(false);
-    setConnectedAppAuthID(authID);
-    // setReloadPage((prev) => !prev);
-  }
-
-  const handelAuthorizationDeleted = (): void => {
-    setReloadPage((prev) => !prev);
-  }
-
-  const saveAppDescription = (updatedDescription: string): void => {
-    if (appData?.id) {
-      context?.apiHandler
-        .saveAppDescription(appData?.id, {long_description: updatedDescription})
-        .then((data) => {
-          if (data) {
-            //  saved description
-          } else {
-            console.error(`Failed to save app description`);
-          }
-        })
-    }
-  }
-
-  const saveAppMedia = (uploadMedia: UploadFileObj[]): void => {
-    if (appData?.id) {
-      context?.apiHandler
-        .saveAppMedia(appData?.id, {media: uploadMedia})
-        .then((data) => {
-          if (data) {
-            // saved media
-          } else {
-            console.error(`Failed to save app media`);
-          }
-        })
-    }
-  }
-
-  const handleUploadMedia = (filesData: UploadFileObj[]): void => {
-    if (filesData) {
-      saveAppMedia(filesData);
-    }
-  }
-
-  const onEditDescription = (value: string): void => {
-    saveAppDescription(value);
-  };
-
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const getContainerName = (): string => {
-    if (appData?.integrations && appData.integrations.length > 0) {
-      return appData?.integrations.filter(
-        (el) => el.id === props.genericData.templateId,
-      )[0]?.name;
-    }
-    return '';
-  };
-
-  const canOpenIntegration = (): boolean => {
-    if (!connectedAppAuthID && !connectedAppAuthIDRef.current) {
-      setShowConnectAccountPopUp(true);
-      return false;
-    }
-    return true;
-  };
-
-  const connectAccount = (): void => {
-    setTriggerAddAccount(true);
-    setTriggerAddAccount(false);
-  }
-
-  const onIntegrationUpdate = (): void => {
-    setReloadPage((prev) => !prev);    
-  };
-
-  return html`${loading ? html`<div class="${styles.appPageLoader}"><${LargeLoader} /></div>` : html `${appData && html `
-    ${!props.showSetupInline && html `<div class="${styles.appPage} integry-container__app-page" >
-     <div class="${styles.appLogoSection}">
-      <div class="${styles.appLogoWrap}">
-        <img class="${styles.logo}" src=${appData?.app.icon_url} />
-        <div class="${styles.appNameWrap}">
-          <h2 class="${styles.appName}">${appData?.app.name}</h2>
-        </div>
-      </div>
-      <div class="${styles.appConnectWrap}">
-        <div class="${styles.connectList}">
-          <${AccountDropdown} 
-          authorizationType=${appData?.app?.authorization_type}
-          onAuthorizationSelected=${handelAuthorizationSelected}
-          onAuthorizationDeleted=${handelAuthorizationDeleted}
-          showConnectButton=${true}
-          triggerAddAccount=${triggerAddAccount}  
-          showError=${true}
-          />
-        </div>
-      </div>
-     </div>
-     <div class="${styles.appOverviewSection}">
-     ${appData.long_description || (props?.userConfig && props?.userConfig?.viewAsIU) ? html`
-      <div class="${styles.appDetail}">
-        ${props?.userConfig && props?.userConfig?.viewAsIU ? html`
-          <${EditableTextArea} value=${appData?.long_description} 
-          handleChange=${onEditDescription} 
-          keepEditingOn=${true}
-          placeholder="Enter help text here..."
-          //>
-        `
-        : html`
-          ${appData?.long_description}
-        `}
-      </div>` : html ``}
-      ${((appData?.media && appData.media.length > 0) || (props?.userConfig && props?.userConfig?.viewAsIU)) && html`
-      <div class="${styles.appMedia}"> 
-        ${props?.userConfig && props?.userConfig?.viewAsIU ? html`
-          <${MediaUplaod} media=${appData?.media} handleUploadMedia=${handleUploadMedia} />
-        `: html `
-          <${MediaGallery} media=${appData?.media} /> 
-        `}
-      </div>
-      `}
-     </div>
-     <div class="${styles.appIntegrationSection}">
-     <h2 class="${styles.sectionHeading}">Integrations</h2>
-      <div class="${styles.integrationListing}">
-       ${appData?.integrations && appData.integrations.length > 0 && html`
-          ${appData?.integrations.map((integration) => (
-              html`
-                <${IntegrationCard} integrationData=${integration} 
-                canOpenIntegration=${canOpenIntegration} />
-              `
-            ))}
-       `}
-      </div>
-     </div>
-     ${showConnectAccountPopUp && html`
-          <${ConfirmationPopUp}
-            isOpen=${showConnectAccountPopUp}
-            title=${`You haven’t connected your ${appData.app.name} account`}
-            description="In order to run the integrations on your behalf, we need access to your account."
-            buttonLabel="Login"
-            cancelButtonLabel="Cancel"
-            handleButtonClick=${connectAccount}
-            handleCancelClick=${() => {
-              setShowConnectAccountPopUp(false);
-              setTriggerAddAccount(false);
-            }}
-            icon=${appData.app.icon_url}
-            />   
-      `}
-    </div>
-    `}
-    ${props.showSetupInline && html`
-        <div
-          class="${styles.inlineSetup} ${'integry-container__setup-form--inline'}"
-        >
-          <${FlowSetupContainer}
-            deploymentId=${props.genericData.marketplaceId}
-            flowId=${props.genericData.templateId}
-            connectedAppAuthID=${connectedAppAuthID || connectedAppAuthIDRef.current}
-            onUpdate=${onIntegrationUpdate}
-          />
-          <div
-            class=${styles.close}
-            onclick=${() => {
-              props.resetTemplateFields();
-            }}
-          >
-            <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>
-      `}
-    `}
-    `}
-  `;
-};
-
-export default connect<AppPageProps, unknown, StoreType, unknown>(
-  ['userConfig', 'integrationIdToEdit', 'genericData', 'showSetupInline'],
-  actionFunctions,
-)(AppPage);

package/src/features/containers/AppPageContainer/AppPage/styles.module.scss

@@ -1,120 +0,0 @@
-.appPageLoader {
-    position: relative;
-    left: calc(100% - 26px - 50%);
-    top: 30%;
-    width: fit-content;
-}
-.appPage {
-    font-family: inherit;
-    p {
-        margin: 0px;
-    }
-    padding-bottom: 15px;
-    .appLogoSection {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 16px;
-        justify-content: space-between;
-        align-items: flex-start;
-        margin-bottom: 24px;
-        .appLogoWrap {
-            display: flex;
-            align-items: center;
-            column-gap: 8px;
-            .logo {
-                width: 40px;
-                height: 40px;
-                border-radius: 50%;
-            }
-            .appNameWrap {
-                .appName {
-                    margin: 0px;
-                    font-family: inherit;
-                    font-style: normal;
-                    font-weight: 600;
-                    font-size: 24px;
-                    line-height: 29px;
-                    text-transform: capitalize;
-                    color: #333333;
-                }
-                .appCategory {
-                    margin: 0px;
-                }
-            }
-        }
-        .appConnectWrap {
-            display: flex;
-            align-items: baseline;
-            .connectLabel {
-                margin-right: 16px;
-            }
-            .connectList {
-
-            }
-        }
-    }
-    .appOverviewSection {
-        margin-bottom: 24px;
-        .appDetail {
-            font-family: inherit;
-            font-style: normal;
-            font-weight: 400;
-            font-size: 16px;
-            line-height: 30px;
-            color: #999999;
-            height: fit-content;
-            width: 100%;
-        }
-        .appMedia {
-            margin-top: 16px;
-        }
-    }
-    .appIntegrationSection {
-        .sectionHeading {
-            font-family: inherit;
-            font-style: normal;
-            font-weight: 500;
-            font-size: 18px;
-            line-height: 22px;
-            color: #000000;
-            margin-bottom: 16px;
-        }
-        .integrationListing {
-            display: flex;
-            flex-wrap: wrap;
-            gap: 16px;
-        }
-    }
-    @media (min-width: 640px) {
-        .appOverviewSection {
-            display: flex;
-            flex-wrap: wrap;
-        }
-    }
-    @media (min-width: 857px) {
-     .appOverviewSection {
-            display: flex;
-            flex-wrap: nowrap;
-            justify-content: space-between;
-            align-items: flex-start;
-            gap: 32px;
-            .appMedia {
-                margin-top: 0px;
-            }
-        }   
-    }
-}
-.inlineSetup {
-    display: flex;
-    position: relative;
-    justify-content: center;
-    height: 100%;
-    padding: 50px;
-    .close {
-        position: absolute;
-        padding: 10px;
-        cursor: pointer;
-        top: 0;
-        right: 0;
-    }
- }

package/src/features/containers/AppPageContainer/IntegrationCard/index.ts

@@ -1,165 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable no-use-before-define */
-import { html } from 'htm/preact';
-import { connect } from 'unistore/preact';
-import { actionFunctions } from '@/store';
-import { StoreType } from '@/types/store';
-import { useContext, useState } from 'preact/hooks';
-import {  MarketplaceAppIntegration } from '@/interfaces';
-import { Button } from '@/components/Button';
-import { Tag } from '@/components/Tag';
-import { Toggle } from '@/components/Toggle';
-import { convertDateToStandard } from '@/utils/datetime';
-import AppContext from '@/contexts/AppContext';
-import styles from './styles.module.scss';
-
-enum IntegrationTagTypeLabel  {
-  run_on_demand = 'Run on-demand',
-  run_automatically = 'Runs automatically',
-  '' = '',
-}
-
-enum integrationStatus {
-    ACTIVE = 'ACTIVE',
-    INACTIVE = 'INACTIVE', 
-}
-
-interface IntegrationCardProps extends StoreType {
-    integrationData: MarketplaceAppIntegration;
-    canOpenIntegration?: () => boolean;
-}
-
-const IntegrationCard = (props: IntegrationCardProps) => {
-  const {
-      integrationData,
-      canOpenIntegration,
-    } = props;
-      const context = useContext(AppContext);
-    const { name, id,  meta = null } = integrationData;
-    const [isIntegrationEnabled, setIsIntegrationEnabled] = useState(meta ?  meta.status === integrationStatus.ACTIVE: false);
-    const [loading, setLoading] = useState<boolean>(false);
-    
-    const toggleIntegrationStatus = (shouldEnable: boolean): void => {
-        if (meta && meta.integration_id) {
-            document.body.style.cursor='wait';
-            context?.apiHandler
-                .toggleIntegration(meta.integration_id, shouldEnable)
-                .then((data) => {
-                    if (data) {
-                        setIsIntegrationEnabled(shouldEnable);
-                    } else {
-                        console.error(`Failed to update integration status`);
-                    }
-                    document.body.style.cursor='default';
-                })
-        }
-    };
-
-    const handleEnableDisableIntegration = (shouldEnable: boolean): void => {
-        if (meta && meta.integration_id) {
-            toggleIntegrationStatus(shouldEnable);
-        }
-    }
-
-    const handleIntegrationEdit = () => {
-        if (canOpenIntegration && canOpenIntegration()) {
-            props.setStoreState({
-            ...{
-                integrationIdToEdit: meta ? meta.integration_id : null,
-                genericData: {
-                ...props.genericData,
-                brandingApp: null,
-                templateId: id,
-                },
-            },
-            ...({
-                showSetupInline: true,
-            }),
-            });   
-        }
-    };
-    
-    return html`${integrationData && html`
-    <div class="${styles.integrationCard}" onclick=${handleIntegrationEdit}>
-        <p class="${styles.integrationName}">${name}</p>
-        <div class="${styles.metaInfoWrap}">
-            <div class="${styles.integrationTypeTag}">
-                <${Tag} label="${IntegrationTagTypeLabel.run_automatically}" type="grey" className="integration-card-tag" />
-            </div>
-            <div class="${styles.moreInfo}">
-                More info
-                <svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <g clip-path="url(#clip0_355_3187)">
-                <path d="M7.37138 8.72406C7.37138 7.97593 6.24951 7.97593 6.24951 8.72406C6.24951 9.47219 7.37138 9.47219 7.37138 8.72406Z" fill="#999999"/>
-                <path d="M6.81063 11.5133C9.63127 11.5133 11.9263 9.21824 11.9263 6.3976C11.9257 3.5776 9.63127 1.28256 6.81063 1.28256C3.98999 1.28256 1.69495 3.57696 1.69495 6.39824C1.69495 9.21888 3.98935 11.5133 6.81063 11.5133ZM6.81063 12.082C3.67127 12.082 1.12695 9.53707 1.12695 6.39835C1.12695 3.25899 3.67191 0.714671 6.81063 0.714671C9.94999 0.714671 12.4943 3.25963 12.4943 6.39835C12.4943 9.53707 9.94935 12.082 6.81063 12.082Z" fill="#999999"/>
-                <path d="M6.4126 7.39746H7.20823V3.51186H6.4126V7.39746Z" fill="#999999"/>
-                </g>
-                <defs>
-                <clipPath id="clip0_355_3187">
-                <rect width="12" height="12" fill="white" transform="matrix(1 0 0 -1 0.746094 12.6885)"/>
-                </clipPath>
-                </defs>
-                </svg>
-            </div>
-        </div>
-        <div class="${styles.bottomWrap}">
-        <div class="${styles.integrationStatus}">
-            Last run | ${meta ? html`${meta.last_run_start_time ? 
-            // convertDateToStandard(meta.last_run_start_time) : 'Never'}
-            convertDateToStandard(meta.last_run_start_time) : 'No runs as yet'}
-            ${meta?.last_run_status && html`${
-               meta?.last_run_status === 'ok' ? html`
-                <svg width="16" height="16" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M8.32812 0.517578C3.91213 0.517578 0.328125 4.10158 0.328125 8.51758C0.328125 12.9381 3.91213 16.5176 8.32812 16.5176C12.7487 16.5176 16.3281 12.9381 16.3281 8.51758C16.3281 4.10158 12.7441 0.517578 8.32812 0.517578ZM8.32812 15.329C4.57041 15.329 1.5167 12.2753 1.5167 8.51758C1.5167 4.75986 4.57041 1.70615 8.32812 1.70615C12.0858 1.70615 15.1396 4.75986 15.1396 8.51758C15.1396 12.2753 12.0813 15.329 8.32812 15.329Z" fill="#4BBF72"/>
-                <path d="M10.9838 5.68334L7.24437 10.0765L5.65352 8.3622C5.42952 8.11991 5.05466 8.1062 4.81237 8.3302C4.57009 8.5542 4.55637 8.92906 4.78037 9.17134L6.82837 11.3748C6.94266 11.4936 7.09809 11.5668 7.26266 11.5668C7.26723 11.5668 7.2718 11.5668 7.27637 11.5668C7.44551 11.5622 7.60551 11.4891 7.71523 11.3565L11.8844 6.45591C12.0947 6.20448 12.0672 5.82963 11.8158 5.61934C11.5689 5.39991 11.1941 5.43191 10.9838 5.68334Z" fill="#4BBF72"/>
-                </svg>
-            ` : html`
-                <svg width="16" height="16" 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>
-            `}`}
-            ` : 'No runs as yet'}
-        </div>
-        ${true ? html`
-            <div class="${styles.toggleWrap}">
-            ${ isIntegrationEnabled ? 'Enabled' : 'Disabled' }
-            <${Toggle} id=${id} value=${isIntegrationEnabled}
-                onChange=${(val: boolean, event: any) => {
-                    event.stopPropagation();
-                    handleEnableDisableIntegration(val);
-                }}
-            <//> 
-            </div>
-        ` : html`
-            <${Button} label="Run"
-            disabled=${false} 
-            className="integry-primary-btn"
-            isLoading=${false}
-            width="54px"
-            height="36px"
-            />
-        `}
-        </div>
-    </div>
-    `}
-  `;
-};
-
-export default connect<IntegrationCardProps, unknown, StoreType, unknown>(
-  ['genericData'],
-  actionFunctions,
-)(IntegrationCard);

package/src/features/containers/AppPageContainer/IntegrationCard/styles.module.scss

@@ -1,81 +0,0 @@
-.integrationCard {
-    background: #FFFFFF;
-    border: 1px solid #F2F2F2;
-    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.06);
-    border-radius: 8px;
-    width: 352px;
-    height: 197px;
-    padding-bottom: 16px;
-    cursor: pointer;
-    .integrationName {
-        font-family: inherit;
-        font-style: normal;
-        font-weight: 500;
-        font-size: 14px;
-        line-height: 24px;
-        color: #333333;
-        margin-bottom: 16px;
-        word-break: break-word;
-        overflow: hidden;
-        height: 48px;
-        padding: 0px 24px;
-        margin-top: 24px;
-    }
-    .metaInfoWrap {
-        display: flex;
-        flex-wrap: wrap;
-        align-items: center;
-        justify-content: flex-start;
-        margin-bottom: 16px;
-        gap: 16px;
-        padding: 0px 24px;
-        .moreInfo {
-            font-family: inherit;
-            font-style: normal;
-            font-weight: 400;
-            font-size: 12px;
-            line-height: 15px;
-            color: #999999;
-            display: flex;
-            justify-content: flex-start;
-            align-items: center;
-            svg {
-                vertical-align: unset;
-                margin-left: 5px;
-            }
-        }
-    }
-    .bottomWrap {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        border-top: 1px solid #E0E0E0;
-        padding: 24px;
-        padding-top: 16px;
-        padding-bottom: 0px;
-        .integrationStatus {
-            font-family: inherit;
-            font-style: normal;
-            font-weight: 400;
-            font-size: 12px;
-            line-height: 15px;
-            color: #999999;
-            display: flex;
-            align-items: center;
-            justify-content: flex-start;
-            gap: 6px;
-        }
-        .toggleWrap {
-            font-family: inherit;
-            font-style: normal;
-            font-weight: 400;
-            font-size: 13px;
-            line-height: 16px;
-            color: #999999;
-            display: flex;
-            justify-content: flex-end;
-            align-items: center;
-            gap: 8px;
-        }
-    }
-}