@integry/sdk 4.5.2 → 4.5.3

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

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

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

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

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