@integry/sdk 4.5.2 → 4.5.4

package/src/features/containers/AppFlowContainer/AppFlowListing/flowInstanceCompact.tsx

@@ -0,0 +1,577 @@
+/* eslint-disable import/no-cycle */
+/* eslint-disable @typescript-eslint/quotes */
+import { html } from 'htm/preact';
+import AppContext from '@/contexts/AppContext';
+import { useEffect, useContext, useState } from 'preact/hooks';
+import { Hint } from '@/components/Tooltip';
+import { Loader } from '@/components/Loader';
+
+import { Instance } from '@/interfaces';
+import { CollapsedMenu } from '@/components/CollapsedMenu';
+import { EditableText } from '@/components/EditableText';
+import { Toggle } from '@/components/Toggle-v2';
+import { Tag } from '@/components/Tag';
+
+import { convertDateToStandard } from '@/utils/datetime';
+
+import styles from './compactStyles.module.scss';
+
+interface FlowInstanceRowProps {
+  instance: Instance;
+  onEditInstance?: (instance: Instance) => void;
+  onDelete?: (instance: Instance) => void;
+  isCompact?: boolean;
+  hideLastRunTime?: boolean;
+  hideInfoIcon?: boolean;
+  hideContextMenu?: boolean;
+  hideIntegrationToggle?: boolean;
+}
+interface FlowInstanceProps {
+  instances: Instance[];
+  onEditInstance: FlowInstanceRowProps['onEditInstance'];
+  onDelete: FlowInstanceRowProps['onDelete'];
+  updateInstanceName: (instanceId: number, name: string) => void;
+  isCompact?: boolean;
+}
+
+export const MenuIcon = () =>
+  html`<svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M4.5 11C5.32843 11 6 10.3284 6 9.5C6 8.67157 5.32843 8 4.5 8C3.67157 8 3 8.67157 3 9.5C3 10.3284 3.67157 11 4.5 11Z"
+      fill="#999999"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M9.5 11C10.3284 11 11 10.3284 11 9.5C11 8.67157 10.3284 8 9.5 8C8.67157 8 8 8.67157 8 9.5C8 10.3284 8.67157 11 9.5 11Z"
+      fill="#999999"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M14.5 11C15.3284 11 16 10.3284 16 9.5C16 8.67157 15.3284 8 14.5 8C13.6716 8 13 8.67157 13 9.5C13 10.3284 13.6716 11 14.5 11Z"
+      fill="#999999"
+    />
+  </svg>`;
+
+export const InstanceBlockedInfo = (props: { instance: Instance }) => {
+  const {
+    error_app_name,
+    first_error_received_at,
+    status,
+    usage_limit_reached_at,
+    error_code,
+  } = props.instance;
+
+  const convertedTime = first_error_received_at
+    ? convertDateToStandard(first_error_received_at)
+    : '';
+
+  const getBlockedReason = () => {
+    switch (status) {
+      case 'AUTH_MISSING':
+        // return `Authentication failed. Try to re-authenticate your account and enable the instance.`;
+        return `Integration has been blocked because\nof failed authentication. User needs to\nre-authenticate their account and enable\nthe integration.`;
+      case 'BLOCKED':
+        if (usage_limit_reached_at) {
+          return `Integration has been blocked because\nthe user limit has been reached`;
+          return `User limit is reached`;
+        }
+        if (error_code >= 500 && error_code <= 599) {
+          return `Integration has been blocked because\nof too many server errors`;
+          return error_app_name && convertedTime
+            ? `Too many server errors from ${error_app_name} since ${convertedTime}. \nYou can try enabling the instance.`
+            : `Too many server errors. You can try enabling the instance.`;
+        }
+        if (error_code >= 400 && error_code <= 499) {
+          return `Integration has been blocked because of too many data errors`;
+          return error_app_name && convertedTime
+            ? `Too many errors from ${error_app_name} since ${convertedTime} \ndue to a configuration issue. Try creating a new instance.`
+            : `Too many errors due to a configuration issue. Try create a new instance.`;
+        }
+        return '';
+      default:
+        return '';
+    }
+  };
+  const blockedReason = getBlockedReason();
+  return blockedReason
+    ? html`<${Hint}
+        dismissOnClick=${false}
+        deltaY=${12}
+        position="fixed"
+        style="display: flex; flex-direction: row; align-items: center; justify-content: center;margin-right:6px;"
+        template=${(content: string) => html`<div>${blockedReason}</div>`}
+      >
+        <svg
+          width="16"
+          height="16"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            data-hint="${blockedReason}"
+            d="M0 12C0 18.6268 5.37184 24 12 24C18.6268 24 24 18.6268 24 12C24 5.37322 18.6282 3.05176e-05 12 3.05176e-05C5.37319 3.05176e-05 0 5.37187 0 12Z"
+            fill="#F05C42"
+          />
+          <path
+            d="M13.185 16.9089C13.185 15.3294 10.8164 15.3294 10.8164 16.9089C10.8164 18.4884 13.185 18.4884 13.185 16.9089Z"
+            fill="white"
+          />
+          <path
+            d="M11.1582 13.2688C11.1582 13.7326 11.5342 14.1087 11.9981 14.1087V14.1087C12.462 14.1087 12.838 13.7326 12.838 13.2688V6.74489C12.838 6.28101 12.462 5.90497 11.9981 5.90497V5.90497C11.5342 5.90497 11.1582 6.28102 11.1582 6.74489V13.2688Z"
+            fill="white"
+          />
+        </svg>
+      <//>`
+    : '';
+};
+
+export const InstanceStatusPill = (props: {
+  instance: Instance;
+  flowType: 'ON_DEMAND' | 'AUTOMATIC';
+  executionBehaviour: 'SAVE_ONLY' | 'SAVE_AND_EXECUTE';
+}) => {
+  const {
+    instance,
+    flowType = 'AUTOMATIC',
+    executionBehaviour = 'SAVE_AND_EXECUTE',
+  } = props;
+  const {
+    last_run_status = null,
+    last_run_start_time = null,
+    status,
+  } = instance;
+  const getTagData = () => {
+    if (!last_run_status && !last_run_start_time && status === 'ACTIVE') {
+      return {
+        type: 'grey',
+        label:
+          flowType === 'ON_DEMAND' && executionBehaviour === 'SAVE_AND_EXECUTE'
+            ? 'Queued'
+            : // : "Hasn't Run",
+              // : "No runs as yet",
+              '',
+      };
+    }
+    switch (last_run_status) {
+      case 'failed':
+        return {
+          type: 'fail',
+          // label: 'Failed',
+          label: 'Blocked',
+        };
+      case 'running...':
+        return {
+          type: 'info',
+          label: 'Running...',
+        };
+      case 'running':
+        return {
+          type: 'info',
+          label: 'Running...',
+        };
+      case 'ok':
+        return {
+          type: 'success',
+          label: 'Completed',
+        };
+      default:
+        return null;
+    }
+  };
+
+  const tagData = getTagData();
+  return tagData && (tagData.label || '') !== ''
+    ? html`<${Tag}
+        type="${tagData.type}"
+        label="${tagData.label}"
+        className="flow-instance"
+      />`
+    : '';
+};
+
+const lastRunTooltip: any = {
+  failed: 'Last run was aborted',
+  'running...': 'The integration is running',
+  running: 'The integration is running',
+  ok: 'Last run was completed',
+};
+
+export const InstanceStatusCompactPill = (props: {
+  instance: Instance;
+  flowType: 'ON_DEMAND' | 'AUTOMATIC';
+  executionBehaviour: 'SAVE_ONLY' | 'SAVE_AND_EXECUTE';
+}) => {
+  const {
+    instance,
+    flowType = 'AUTOMATIC',
+    executionBehaviour = 'SAVE_AND_EXECUTE',
+  } = props;
+  const {
+    last_run_status = null,
+    last_run_start_time = null,
+    status,
+  } = instance;
+  const getTagData = () => {
+    if (!last_run_status && !last_run_start_time && status === 'ACTIVE') {
+      return {
+        type: 'grey',
+        label:
+          flowType === 'ON_DEMAND' && executionBehaviour === 'SAVE_AND_EXECUTE'
+            ? 'Queued'
+            : // : "Hasn't Run",
+              // : "No runs as yet",
+              '',
+      };
+    }
+    switch (last_run_status) {
+      case 'failed':
+        return {
+          type: 'fail',
+          // label: 'Failed',
+          label: 'Aborted',
+          icon: html`
+            <svg
+              width="12"
+              height="12"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <circle
+                data-hint="${lastRunTooltip[last_run_status]}"
+                cx="12"
+                cy="12"
+                r="12"
+                fill="#FDEFEC"
+              />
+              <path
+                d="M16 8L8 16"
+                stroke="#F05C42"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+              <path
+                d="M8 8L16 16"
+                stroke="#F05C42"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          `,
+          tooltip: `Last run was aborted`,
+        };
+      case 'running...':
+        return {
+          type: 'info',
+          label: 'Running...',
+          icon: html`
+            <svg
+              width="12"
+              height="12"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <circle
+                data-hint="${lastRunTooltip[last_run_status]}"
+                cx="12"
+                cy="12"
+                r="12"
+                fill="#CAE1FC"
+              />
+              <circle cx="6" cy="12" r="2" fill="#509CF6" />
+              <circle opacity="0.5" cx="12" cy="12" r="2" fill="#509CF6" />
+              <circle opacity="0.3" cx="18" cy="12" r="2" fill="#509CF6" />
+            </svg>
+          `,
+          tooltip: `The integration is running`,
+        };
+      case 'running':
+        return {
+          type: 'info',
+          label: 'Running...',
+          icon: html`
+            <svg
+              width="12"
+              height="12"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <circle
+                data-hint="${lastRunTooltip[last_run_status]}"
+                cx="12"
+                cy="12"
+                r="12"
+                fill="#CAE1FC"
+              />
+              <circle cx="6" cy="12" r="2" fill="#509CF6" />
+              <circle opacity="0.5" cx="12" cy="12" r="2" fill="#509CF6" />
+              <circle opacity="0.3" cx="18" cy="12" r="2" fill="#509CF6" />
+            </svg>
+          `,
+          tooltip: `The integration is running`,
+        };
+      case 'ok':
+        return {
+          type: 'success',
+          label: 'Completed',
+          icon: html`
+            <svg
+              width="12"
+              height="12"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <circle
+                data-hint="${lastRunTooltip[last_run_status]}"
+                cx="12"
+                cy="12"
+                r="12"
+                fill="#C4E9D2"
+              />
+              <path
+                d="M17 8L10.441 15.5L7 11.5653"
+                stroke="#3BB568"
+                stroke-width="2"
+                stroke-linecap="round"
+              />
+            </svg>
+          `,
+          tooltip: `Last run was completed`,
+        };
+      default:
+        return null;
+    }
+  };
+
+  const tagData = getTagData();
+  return tagData && (tagData.label || '') !== ''
+    ? // ? html`<${Hint} deltaY=${12} position="fixed" style="display: flex; flex-direction: row; align-items: center; justify-content: flex-start;" disabled=${!tagData.tooltip}>${tagData.icon}<//>`
+      html`${tagData.icon}`
+    : '';
+};
+
+export const FlowInstanceRow = (props: FlowInstanceRowProps) => {
+  const {
+    instance,
+    onEditInstance,
+    onDelete,
+    isCompact = false,
+    hideLastRunTime = false,
+    hideInfoIcon = false,
+    hideContextMenu = false,
+    hideIntegrationToggle = false,
+  } = props;
+  const context = useContext(AppContext);
+  const [instanceStatus, setInstanceStatus] = useState<Instance['status']>(
+    instance.status,
+  );
+  const [isDeleting, setIsDeleting] = useState(false);
+
+  useEffect(() => {
+    setInstanceStatus(instance.status);
+  }, [instance.status]);
+
+  const toggleIntegration = (instanceId: number, value: boolean) => {
+    setInstanceStatus(value ? 'ACTIVE' : 'INACTIVE'); // optimistic update
+    context?.apiHandler
+      .toggleIntegration(instanceId, value)
+      .catch((err: unknown) => {
+        console.error(err);
+        setInstanceStatus(instance.status);
+      });
+  };
+  const handleOptionSelect = (
+    option: { id: string; label: string },
+    selectedInstance: Instance,
+  ) => {
+    switch (option.id) {
+      case 'edit':
+        if (onEditInstance) {
+          onEditInstance(selectedInstance);
+        }
+        break;
+      case 'delete':
+        setIsDeleting(true);
+        if (onDelete) onDelete(selectedInstance);
+        break;
+      default:
+        break;
+    }
+  };
+
+  return html`
+    ${!hideLastRunTime &&
+    html` <${Hint} style="" position="fixed" deltaY=${14}>
+      <div
+        data-hint="${lastRunTooltip[instance.last_run_status]}"
+        class="${styles.flowInstanceColumn} ${styles.instanceRunTime}"
+        style="${isCompact
+          ? 'display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:4px;'
+          : 'flex: 1;'}"
+      >
+        ${instance.last_run_start_time
+          ? convertDateToStandard(instance.last_run_start_time)
+          : `No runs as yet`}
+        ${isCompact &&
+        html`<${InstanceStatusCompactPill} instance=${instance} />`}
+      </div>
+    <//>`}
+    ${!isCompact &&
+    html` <div
+      class="${styles.flowInstanceColumn}"
+      style="margin-right: 8px;display:flex;flex-direction:row;align-items:center;justify-content:center;"
+    >
+      ${html`<${isCompact ? InstanceStatusCompactPill : InstanceStatusPill}
+        instance=${instance}
+      />`}
+    </div>`}
+    <div
+      onClick=${(e: any) => {
+        e.stopPropagation();
+      }}
+      class="${styles.flowInstanceColumn} ${styles.instanceStatus}"
+      style="${'display: flex; flex-direction: row; align-items: center; justify-content: flex-end; gap: 0px; margin-top: -16.5px;'}"
+    >
+      ${!hideInfoIcon &&
+      instanceStatus === 'BLOCKED' &&
+      html`<${InstanceBlockedInfo} instance=${instance} />`}
+      ${!hideIntegrationToggle &&
+      html`<${Toggle}
+        id=${instance.id}
+        value=${isDeleting ? false : instanceStatus === 'ACTIVE'}
+        disabled=${isDeleting}
+        onChange=${(value: boolean) => {
+          if (!isDeleting) {
+            toggleIntegration(instance.id, value);
+          }
+        }}
+        size=${isCompact ? 'sm' : 'lg'}
+      />`}
+      ${isDeleting
+        ? html`<div style="margin: 0 6px; margin-bottom: -3px;">
+            <${Loader} size="sm" />
+          </div>`
+        : !hideContextMenu &&
+          html` <${CollapsedMenu}
+            verticalIcon=${true}
+            className="instanceMenu"
+            options=${[
+              ...(onEditInstance
+                ? [
+                    {
+                      id: 'edit',
+                      label: 'Edit',
+                    },
+                  ]
+                : []),
+              ...(onDelete
+                ? [
+                    {
+                      id: 'delete',
+                      label: 'Delete',
+                    },
+                  ]
+                : []),
+            ]}
+            onOptionSelect=${(option: { id: string; label: string }) =>
+              handleOptionSelect(option, instance)}
+          />`}
+    </div>
+    <!--<div class="${styles.flowInstanceColumn}" style="display: flex; flex-direction: row; align-items: center; justify-content: flex-start;${isDeleting
+      ? 'margin: 0 6px;'
+      : ''}">
+    </div>-->
+  `;
+};
+
+const FlowInstance = (props: FlowInstanceProps) => {
+  const {
+    instances,
+    onEditInstance,
+    updateInstanceName,
+    onDelete,
+    isCompact = false,
+  } = props;
+  const context = useContext(AppContext);
+
+  const onUpdateName = (instanceId: number, name: string) => {
+    const oldName =
+      instances.find((instance) => instance.id === instanceId)?.name || '';
+    updateInstanceName(instanceId, name);
+    context?.apiHandler
+      .renameIntegration(`${instanceId}`, name)
+      .then((integrationData) => {
+        if (!integrationData) {
+          updateInstanceName(instanceId, oldName);
+          throw new Error('Could not update integration name');
+        }
+      })
+      .catch((err) => {
+        console.error(err);
+        updateInstanceName(instanceId, oldName);
+      });
+  };
+  return html`
+    <div class="${styles.flowInstanceContainer}">
+      ${instances.map(
+        (instance) => html`
+          <div class="${styles.flowInstancesContainer}">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="13"
+              height="15"
+              viewBox="0 0 13 15"
+              fill="none"
+            >
+              <path
+                d="M12.677 11.5703C12.8723 11.375 12.8723 11.0584 12.677 10.8632L9.49501 7.68121C9.29975 7.48595 8.98316 7.48595 8.7879 7.68121C8.59264 7.87647 8.59264 8.19306 8.7879 8.38832L11.6163 11.2167L8.78791 14.0452C8.59264 14.2404 8.59264 14.557 8.78791 14.7523C8.98317 14.9475 9.29975 14.9475 9.49501 14.7523L12.677 11.5703ZM1.00571 11.2167L0.505714 11.2167L0.505697 11.7168L1.00571 11.7167L1.00571 11.2167ZM0.506052 1.30357C0.506043 1.57971 0.729893 1.80358 1.00604 1.80358C1.28218 1.80359 1.50604 1.57974 1.50605 1.3036L0.506052 1.30357ZM1.50599 3.106C1.506 2.82985 1.28215 2.60599 1.00601 2.60598C0.729866 2.60597 0.506 2.82982 0.50599 3.10596L1.50599 3.106ZM0.505929 4.90836C0.505919 5.1845 0.729769 5.40836 1.00591 5.40837C1.28205 5.40838 1.50592 5.18453 1.50593 4.90839L0.505929 4.90836ZM1.50587 6.71078C1.50588 6.43464 1.28203 6.21077 1.00588 6.21077C0.729742 6.21076 0.505877 6.43461 0.505868 6.71075L1.50587 6.71078ZM0.505806 8.51314C0.505797 8.78928 0.729647 9.01315 1.00579 9.01316C1.28193 9.01317 1.5058 8.78932 1.50581 8.51318L0.505806 8.51314ZM1.50574 10.3156C1.50575 10.0394 1.2819 9.81556 1.00576 9.81555C0.72962 9.81554 0.505754 10.0394 0.505745 10.3155L1.50574 10.3156ZM1.94886 11.7167C2.225 11.7167 2.44886 11.4929 2.44886 11.2167C2.44886 10.9406 2.225 10.7167 1.94886 10.7167L1.94886 11.7167ZM3.83514 10.7167C3.559 10.7167 3.33514 10.9406 3.33514 11.2167C3.33515 11.4929 3.559 11.7167 3.83515 11.7167L3.83514 10.7167ZM5.72143 11.7167C5.99757 11.7167 6.22143 11.4929 6.22143 11.2167C6.22143 10.9406 5.99757 10.7167 5.72143 10.7167L5.72143 11.7167ZM7.60772 10.7167C7.33158 10.7167 7.10772 10.9406 7.10772 11.2167C7.10772 11.4929 7.33158 11.7167 7.60772 11.7167L7.60772 10.7167ZM9.49401 11.7167C9.77015 11.7167 9.99401 11.4929 9.99401 11.2167C9.99401 10.9406 9.77015 10.7167 9.49401 10.7167L9.49401 11.7167ZM11.3803 10.7167C11.1042 10.7167 10.8803 10.9406 10.8803 11.2167C10.8803 11.4929 11.1042 11.7167 11.3803 11.7167L11.3803 10.7167ZM0.506083 0.402371L0.506052 1.30357L1.50605 1.3036L1.50608 0.402405L0.506083 0.402371ZM0.50599 3.10596L0.505929 4.90836L1.50593 4.90839L1.50599 3.106L0.50599 3.10596ZM0.505868 6.71075L0.505806 8.51314L1.50581 8.51318L1.50587 6.71078L0.505868 6.71075ZM0.505745 10.3155L0.505714 11.2167L1.50571 11.2168L1.50574 10.3156L0.505745 10.3155ZM1.00571 11.7167L1.94886 11.7167L1.94886 10.7167L1.00571 10.7167L1.00571 11.7167ZM3.83515 11.7167L5.72143 11.7167L5.72143 10.7167L3.83514 10.7167L3.83515 11.7167ZM7.60772 11.7167L9.49401 11.7167L9.49401 10.7167L7.60772 10.7167L7.60772 11.7167ZM11.3803 11.7167L12.3234 11.7167L12.3234 10.7167L11.3803 10.7167L11.3803 11.7167Z"
+                fill="#D6D6D6"
+              />
+            </svg>
+            <div
+              class="${styles.flowInstanceRow} ${styles.flowInstanceMultipleRow}"
+              key=${`instance-id-flow-row-${instance.id}`}
+            >
+              <${EditableText}
+                value=${instance.name}
+                handleChange=${(name: string) =>
+                  onUpdateName(instance.id, name)}
+                wrapperClassName=${styles.editableTextWrapper}
+                customStyles=${{
+                  wrapperClassName: styles.editableTextWrapper,
+                  inputClassName: styles.inlineEditInput,
+                }}
+              />
+              <div class=${styles.flowInstanceRowMeta}>
+                <${FlowInstanceRow}
+                  instance=${instance}
+                  onEditInstance=${onEditInstance}
+                  onDelete=${onDelete}
+                  isCompact=${isCompact}
+                />
+              </div>
+            </div>
+          </div>
+        `,
+      )}
+    </div>
+  `;
+};
+
+export default FlowInstance;

package/src/features/containers/AppFlowContainer/AppFlowListing/index.tsx

@@ -0,0 +1,83 @@
+import { Flow, Instance, UserConfig } from '@/interfaces';
+import { actionFunctions } from '@/store';
+import { MarketplaceRenderModes, ViewStyles } from '@/types';
+import { StoreType } from '@/types/store';
+import { html } from 'htm/preact';
+import { useEffect } from 'preact/hooks';
+import { connect } from 'unistore/preact';
+import FlowCard from './flowCard';
+import FlowCardCompact from './flowCardCompact';
+
+import styles from './styles.module.scss';
+
+interface WraperrProps extends StoreType {
+  marketplaceId: string;
+  userConfig?: UserConfig;
+  accountVerified: boolean;
+  renderMode: MarketplaceRenderModes;
+  onFlowSelect: (flowId: Flow, instance?: Instance) => void;
+  updateInstanceName: (
+    flowId: number,
+    instanceId: number,
+    name: string,
+  ) => void;
+  appFlows: Flow[];
+  onDeleteInstance?: (instance: any) => void;
+  appData?: any;
+}
+
+const AppFlowListing = (props: WraperrProps) => {
+  const {
+    onFlowSelect,
+    updateInstanceName,
+    appFlows,
+    accountVerified,
+    renderMode,
+    onDeleteInstance,
+    genericData,
+    appData,
+  } = props;
+
+  useEffect(() => {
+    props.resetTemplateFields();
+  }, []);
+
+  return html`
+    <div
+      id="${`embed--flowCardContainer__${renderMode}`}"
+      class="${styles.flowCardContainer} ${styles.integryScrollbar} ${renderMode ===
+      MarketplaceRenderModes.INLINE
+        ? styles.inlineFlowContainer
+        : ''}"
+    >
+      ${appFlows.map(
+        (template: any) => html`
+          <${genericData.viewStyle === ViewStyles.COMPACT ? FlowCardCompact : FlowCard}
+            flow=${template}
+            flowIcon=${appData ? appData.icon_url : ""}
+            accountVerified=${accountVerified}
+            onFlowSelect=${onFlowSelect}
+            updateInstanceName=${updateInstanceName}
+            onDeleteInstance=${(instance: any) => {
+              if (onDeleteInstance) {
+                onDeleteInstance({...instance, template_detail: template});
+              }
+            }}
+            customStyle=${`max-width: 364px; width: 100%;`}
+          />
+        `,
+      )}
+    </div>
+  `;
+};
+
+export default connect<WraperrProps, unknown, StoreType, unknown>(
+  [
+    'userConfig',
+    'genericData',
+    'showMarketplaceModal',
+    'showMarketplaceAppPageId',
+    'IUAccountsData',
+  ],
+  actionFunctions,
+)(AppFlowListing);