@integry/sdk 4.7.39 → 4.7.41

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

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

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