@integry/sdk 4.5.2 → 4.5.4

package/src/features/templates/TemplatesView/index.ts

@@ -0,0 +1,368 @@
+/* eslint-disable no-use-before-define */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { html } from 'htm/preact';
+import { connect } from 'unistore/preact';
+import { useEffect, useState, useContext } from 'preact/hooks';
+// import fuzzysort from 'fuzzysort';
+
+import { Template as TemplateType, Integration, Template } from '@/interfaces';
+import { IntegryAPI } from '@/modules/api';
+import { EventEmitter } from '@/modules/event-emitter';
+import AppPageLoader from '@/features/containers/AppFlowContainer/AppFlowWrap/app-page-loader';
+import FlowCard from '@/features/containers/AppFlowContainer/AppFlowListing/flowCard';
+import FlowCardCompact from '@/features/containers/AppFlowContainer/AppFlowListing/flowCardCompact';
+// import { TabBar } from '@/components/TabBar';
+import AppContext from '@/contexts/AppContext';
+import { Search } from '@/components/Search';
+import Footer from '@/components/Footer';
+
+// import IntegrationsList from '@/features/integrations/IntegrationsList';
+import { calculateDatetimeDifference } from '@/utils/datetime';
+import {
+  IntegrySDKEvents,
+  TemplateFormRenderModes,
+  TemplateListingRenderModes,
+  ViewStyles,
+} from '@/types';
+import { StoreType } from '@/types/store';
+import { actionFunctions } from '@/store';
+
+import style from './styles.module.scss';
+// import { Template } from '../Template';
+
+type Props = {
+  deploymentId: number;
+  layout: TemplateListingRenderModes;
+  apiHandler: IntegryAPI;
+  renderMode: TemplateFormRenderModes;
+  renderFlowsMode: TemplateFormRenderModes;
+  eventEmitter: EventEmitter<IntegrySDKEvents>;
+  onTemplateClick?: (templateId: Template) => void;
+  dFlag?: string;
+} & StoreType;
+
+// type State = {
+//   loading: boolean;
+//   filteredTemplates: TemplateType[];
+//   error: string | null;
+//   query: string;
+// };
+
+// class TemplatesView extends Component<Props, State> {
+const TemplatesView = (props: Props) => {
+  const context = useContext(AppContext);
+  // static contextType = AppContext;
+
+  const [loading, setLoading] = useState(false);
+  const [filteredTemplates, setFilteredTemplates] = useState<TemplateType[]>(
+    [],
+  );
+  const [error, setError] = useState<string | null>(null);
+  const [query, setQuery] = useState<string>('');
+  const [currentDflag, setCurrentDflag] = useState<string>('');
+
+  const flowCardComponent =
+    props.customComponents?.flowCard ||
+    (props.genericData.viewStyle === ViewStyles.COMPACT
+      ? FlowCardCompact
+      : FlowCard);
+
+  const getTemplates = () => {
+    props.apiHandler
+      .getTemplateListingV2(
+        props.userConfig?.tags || [],
+        props.genericData.deploymentIdFromConfig,
+      )
+      .then((response: any) => {
+        const { results = [] } = response;
+        context?.eventEmitter.emit('did-load-flows', {
+          flows: results,
+        });
+        setFilteredTemplates(results);
+        setLoading(false);
+      })
+      .catch((err) => {
+        setLoading(false);
+        setError('Error fetching deployment');
+      });
+  };
+
+  const pollGetTemplatesForLiveData = (
+    currentIndex = 0,
+    { delay = 1000, frequency = 5 },
+  ) => {
+    getTemplates();
+    if (currentIndex < frequency) {
+      setTimeout(() => {
+        pollGetTemplatesForLiveData(currentIndex + 1, { delay, frequency });
+      }, delay);
+    }
+  };
+
+  useEffect(() => {
+    setLoading(true);
+    props.setStoreState({
+      fetchingIntegrations: true,
+      fetchingTemplates: true,
+    });
+  }, []);
+
+  useEffect(() => {
+    pollGetTemplatesForLiveData(0, {
+      delay: 5000,
+      frequency: 3,
+    });
+
+    setCurrentDflag(props.dFlag || new Date().toISOString());
+    if (currentDflag !== '') {
+      const diff = calculateDatetimeDifference(props.dFlag, currentDflag);
+      // eslint-disable-next-line no-console
+      console.log('TemplatesView - Dflag', { dflag: props.dFlag, diff });
+    }
+  }, [props.dFlag]);
+
+  const getAppIntegrations = (templateId: number): any => {
+    const appIntegrations = props.integrations.filter(
+      (el) => el.template === templateId,
+    );
+    return appIntegrations;
+  };
+
+  const debounce = (func: any, delay: number) => {
+    let timeoutId: any;
+
+    return (...args: any) => {
+      clearTimeout(timeoutId);
+      timeoutId = setTimeout(() => {
+        func.apply(this, args);
+      }, delay);
+    };
+  };
+
+  const filterTemplates = (queryText: string, templates = props.templates) => {
+    if (queryText) {
+      setQuery(queryText);
+      setFilteredTemplates(
+        templates.filter((item) =>
+          item.name.toLowerCase().includes(queryText.toLowerCase()),
+        ),
+      );
+    } else {
+      setFilteredTemplates(templates);
+    }
+  };
+
+  const getFilteredTemplates = (
+    searchText: string,
+    templates: any = [],
+  ): any[] => {
+    let tempTemplates = templates;
+    if (searchText) {
+      tempTemplates = tempTemplates.filter(
+        (item: any) =>
+          item.name.toLowerCase().includes(searchText.trim().toLowerCase()) ||
+          item?.branding_app?.name
+            .toLowerCase()
+            .includes(searchText.trim().toLowerCase()),
+      );
+    }
+    return tempTemplates;
+  };
+
+  const onTemplateClick = (template: Template) => {
+    props.setGenericData({
+      templateId: template.id,
+      name: template.name,
+    });
+    if (props.onTemplateClick) {
+      props.onTemplateClick(template);
+    }
+  };
+
+  const onIntegrationDelete = (integration: Integration) => {
+    const {
+      id: integrationId,
+      name: integrationName,
+      template_detail,
+    } = integration;
+    props.setIntegrationLoadingState({
+      integrationId,
+      isLoading: true,
+      op: 'edit',
+    });
+    props.apiHandler
+      .deleteIntegration(integrationId)
+      .then((res) => {
+        console.info(res);
+        props.setIntegrationLoadingState({
+          integrationId,
+          isLoading: false,
+          op: 'delete',
+        });
+        getTemplates();
+        // props.setStoreState({
+        //   dFlag: new Date().toISOString(),
+        // });
+        context?.eventEmitter.emit('did-delete-integration', {
+          flowId: template_detail.id,
+          flowName: template_detail.name,
+          flowDescription: template_detail.description,
+          integrationId,
+          integrationName,
+        });
+      })
+      .catch((err) => console.error(err));
+  };
+
+  const onUpdateName = (integrationId: number, name: string) => {
+    props.setIntegrationLoadingState({
+      integrationId,
+      isLoading: true,
+      op: 'edit-name',
+      updatedName: name,
+    });
+    props.apiHandler
+      .renameIntegration(`${integrationId}`, name)
+      .then((integrationData) => {
+        if (integrationData) {
+          props.setIntegrationLoadingState({
+            integrationId,
+            isLoading: false,
+            op: 'edit',
+          });
+          getTemplates();
+        } else {
+          throw new Error('Could not update integration name');
+        }
+      })
+      .catch((err) => console.error(err));
+  };
+
+  const onIntegrationEdit = (integration: Integration, templateId: number) => {
+    const { renderMode } = props;
+    props.setStoreState({
+      ...{
+        integrationIdToEdit: integration.id,
+        genericData: {
+          ...props.genericData,
+          brandingApp: null,
+          templateId,
+          name: integration.name,
+        },
+      },
+      ...(renderMode === TemplateFormRenderModes.MODAL && {
+        showSetupModal: true,
+        showFlowListModal: false,
+      }),
+      ...(renderMode === TemplateFormRenderModes.INLINE && {
+        showSetupInline: true,
+        showFlowListModal: false,
+      }),
+    });
+  };
+
+  if (loading) {
+    return html`<${AppPageLoader} renderMode=${props.renderMode} />`;
+  }
+
+  return html`
+    <div>
+      ${error
+        ? html`${error}`
+        : html` <div
+            label=${props.userConfig?.title ||
+            props.userConfig?.availableFlowsLabel ||
+            'Available Flows'}
+            id=${`tab-1-${props.renderFlowsMode}`}
+            style="${props.renderFlowsMode === TemplateFormRenderModes.MODAL
+              ? 'padding: 24px; padding-top: 0px; margin-top: -32px'
+              : 'padding: 24px;'}"
+          >
+            <div>
+              <h1 class=${style.flowHeading}>
+                ${props.userConfig?.title ||
+                props.userConfig?.availableFlowsLabel ||
+                'Flows'}
+                ${' '}(${getFilteredTemplates(query, filteredTemplates || [])
+                  .length})
+              </h1>
+              <div class=${style.search}>
+                <${Search}
+                  resultCount=${getFilteredTemplates(
+                    query,
+                    filteredTemplates || [],
+                  ).length}
+                  onChange=${(val: string) => {
+                    setQuery(val);
+                    // debounce(filterTemplates(val.trim()), 500);
+                  }}
+                  placeholder="${props.userConfig?.searchPlaceholder ||
+                  'Search for flows'}"
+                >
+                <//>
+              </div>
+            </div>
+            <div
+              class="${props.layout === TemplateListingRenderModes.LIST
+                ? style.template_list
+                : style.template_grid} ${'integry-container__flows-view'}"
+              style=${props.genericData.viewStyle === ViewStyles.COMPACT
+                ? 'gap: 0;'
+                : ''}
+            >
+              ${!loading &&
+              getFilteredTemplates(query, filteredTemplates || []).map(
+                (template) =>
+                  html`
+                    <${flowCardComponent}
+                      key=${`template-${template.id}`}
+                      flow=${template}
+                      flowIcon=${template.branding_app?.icon_url}
+                      accountVerified=${true}
+                      onFlowSelect=${(flow: any, instance: any) => {
+                        if (instance) {
+                          onIntegrationEdit(instance, flow.id);
+                        } else onTemplateClick(template);
+                      }}
+                      onDeleteInstance=${(integration: any) => {
+                        onIntegrationDelete({
+                          ...integration,
+                          template_detail: template,
+                        });
+                      }}
+                      updateInstanceName=${(
+                        flowId: number,
+                        instanceId: number,
+                        name: string,
+                      ) => {
+                        onUpdateName(instanceId, name);
+                      }}
+                    >
+                    <//>
+                  `,
+              )}
+            </div>
+            ${getFilteredTemplates(query, filteredTemplates || []).length < 1 &&
+            html`<div class=${style.noFlows}>
+              ${query
+                ? 'No flows found for this search query'
+                : 'You have not added any flows'}
+            </div>`}
+          </div>`}
+      <${Footer} />
+    </div>
+  `;
+};
+
+export default connect<Props, null, StoreType, unknown>(
+  [
+    'genericData',
+    'userConfig',
+    'integrations',
+    'templates',
+    'customComponents',
+    'activatedTab',
+    'dFlag',
+  ],
+  actionFunctions,
+)(TemplatesView);

package/src/features/templates/TemplatesView/styles.module.scss

@@ -0,0 +1,71 @@
+.template_list {
+  display: grid;
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+  // gap: 0.5rem;
+  gap: 8px;
+  // padding-top: 0.5rem;
+  // padding-bottom: 0.5rem;
+  padding-top: 16px;
+  padding-bottom: 16px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  min-height: 350px;
+}
+
+.flowHeading {
+  color: var(--black-and-grey-title-and-desc, #333);
+  font-family: Inter;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+}
+
+.search {
+  margin-top: 1rem;
+  margin-bottom: 0.5rem;
+}
+
+.template_grid {
+  display: grid;
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+  gap: 0.5rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  @media (min-width: 768px) {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  @media (min-width: 1280px) {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+  @media (min-width: 1440px) {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+  @media (min-width: 2560px) {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
+}
+
+.header {
+  margin-bottom: 0.75rem;
+  margin-top: 1.5rem;
+  letter-spacing: 0.025em;
+  --tw-text-opacity: 1;
+  color: rgba(80, 156, 246, var(--tw-text-opacity));
+}
+
+.loader {
+  display: flex;
+  justify-content: center;
+  padding: 50px;
+}
+
+.noFlows {
+  text-align: center;
+  padding: 50px;
+  font-size: 16px;
+  color: #999;
+  font-weight: 500;
+}