@integry/sdk 4.5.2 → 4.5.3

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

@@ -0,0 +1,364 @@
+/* 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 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,
+} 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 || FlowCardCompact;
+
+  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
+      class="${style.templatesContainer}"
+      style="${props.renderFlowsMode === TemplateFormRenderModes.MODAL
+        ? 'height: 557px;'
+        : ''}"
+    >
+      ${error
+        ? html`${error}`
+        : html` <div
+            label=${props.userConfig?.title ||
+            props.userConfig?.availableFlowsLabel ||
+            'Available Flows'}
+            id=${`tab-1-${props.renderFlowsMode}`}
+            class="${props.renderFlowsMode === TemplateFormRenderModes.MODAL
+              ? style.templatesContentModal
+              : style.templatesContent}"
+          >
+            <div class="${style.templatesHeader}">
+              <h1 class=${style.flowHeading}>
+                ${props.userConfig?.title ||
+                props.userConfig?.availableFlowsLabel ||
+                'Flows'}
+                ${' '}(${getFilteredTemplates(query, filteredTemplates || [])
+                  .length})
+              </h1>
+              <${Search}
+                resultCount=${getFilteredTemplates(
+                  query,
+                  filteredTemplates || [],
+                ).length}
+                onChange=${(val: string) => {
+                  setQuery(val);
+                  // debounce(filterTemplates(val.trim()), 500);
+                }}
+                className="compact-search"
+                placeholder="${props.userConfig?.searchPlaceholder ||
+                'Search for flows'}"
+              >
+              <//>
+            </div>
+            <div
+              class="${style.template_list} ${style.integryScrollbar} ${'integry-container__flows-view'}"
+              style="${props.renderFlowsMode === TemplateFormRenderModes.MODAL
+                ? 'min-height: 446px;'
+                : ''}"
+            >
+              ${!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/TemplatesViewCompact/styles.module.scss

@@ -0,0 +1,141 @@
+.templatesContainer {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  min-width: 342px;
+
+  .templatesContent {
+    // padding: 24px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+    max-height: calc(100% - 28px);
+    // overflow: hidden;
+    flex: 1;
+    width: 100%;
+  }
+
+  .templatesContentModal {
+    padding: 24px;
+    padding-top: 0px; 
+    margin-top: -25px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+    max-height: calc(100vh - 204px);
+    overflow: hidden;
+  }
+}
+
+.template_list {
+  display: grid;
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+  grid-template-rows: repeat(8, 1fr);
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  gap: 8px;
+  padding-top: 8px;
+  padding-bottom: 16px;
+  padding-left: 4px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  scrollbar-gutter: stable;
+}
+
+.templatesHeader {
+  min-width: 342px;
+  width: 100%;
+  padding-left: 4px;
+
+  .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;
+    margin-bottom: 16px;
+    margin-top: 0;
+  }
+}
+
+.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;
+}
+
+.integryScrollbar {
+  width: calc(100% + 10px);
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+  /* Track */
+  &::-webkit-scrollbar-track {
+    // background: #f1f1f1;
+    background: transparent;
+    border-radius: 10px;
+    margin-right: 5px;
+  }
+
+  /* Handle */
+  &::-webkit-scrollbar-thumb {
+    background: #ededed;
+    border: 1px solid #e7e7e7;
+    border-radius: 10px;
+    background: #d3d2d2;
+    margin-right: 5px;
+  }
+
+  /* Handle on hover */
+  &::-webkit-scrollbar-thumb:hover {
+    background: #999999;
+  }
+
+  /* Handle on hover */
+  &::-webkit-scrollbar-thumb:hover {
+    background: #999999;
+  }
+}

package/src/hooks/useAutosizeTextArea.ts

@@ -0,0 +1,22 @@
+/* eslint-disable no-param-reassign */
+import { useEffect } from 'preact/hooks';
+
+// Updates the height of a <textarea> when the value changes.
+const useAutosizeTextArea = (
+  textAreaRef: HTMLTextAreaElement | null,
+  value: string,
+) => {
+  useEffect(() => {
+    if (textAreaRef) {
+      // We need to reset the height momentarily to get the correct scrollHeight for the textarea
+      textAreaRef.style.height = '0px';
+      const {scrollHeight} = textAreaRef;
+
+      // We then set the height directly, outside of the render loop
+      // Trying to set this with state or a ref will product an incorrect value.
+      textAreaRef.style.height = `${scrollHeight}px`;
+    }
+  }, [textAreaRef, value]);
+};
+
+export default useAutosizeTextArea;

package/src/hooks/useCustomRef.ts

@@ -0,0 +1,13 @@
+import { RefObject } from 'preact';
+import { useCallback, useRef } from 'preact/hooks';
+
+function useCustomRef<T>(): [RefObject<T>, (node: T) => void] {
+  const ref = useRef<T | null>(null);
+  const setRef = useCallback((node: T) => {
+    ref.current = node;
+  }, []);
+
+  return [ref, setRef];
+}
+
+export default useCustomRef;

package/src/hooks/useDebounce.ts

@@ -0,0 +1,17 @@
+import { useEffect, useState } from 'preact/hooks';
+
+function useDebounce<T>(value: T, delay?: number): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setDebouncedValue(value), delay || 500);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}
+
+export default useDebounce;

package/src/hooks/useElementResize.ts

@@ -0,0 +1,40 @@
+import { RefObject } from 'preact';
+import { useCallback, useEffect, useState } from 'preact/hooks';
+
+import useEventListener from './useEventListener';
+
+interface Size {
+  width: number;
+  height: number;
+}
+
+function useElementSize<T extends HTMLElement = HTMLDivElement>(
+  elementRef: RefObject<T>,
+): Size {
+  const [size, setSize] = useState<Size>({
+    width: 0,
+    height: 0,
+  });
+
+  // Prevent too many rendering using useCallback
+  const updateSize = useCallback(() => {
+    const node = elementRef?.current;
+    if (node) {
+      setSize({
+        width: node.offsetWidth || 0,
+        height: node.offsetHeight || 0,
+      });
+    }
+  }, [elementRef]);
+
+  // Initial size on mount
+  useEffect(() => {
+    updateSize();
+  }, []);
+
+  useEventListener('resize', updateSize);
+
+  return size;
+}
+
+export default useElementSize;

package/src/hooks/useEventListener.ts

@@ -0,0 +1,44 @@
+import { RefObject } from 'preact';
+import { useEffect, useRef } from 'preact/hooks';
+
+function useEventListener<T extends HTMLElement = HTMLDivElement>(
+  eventName: keyof WindowEventMap,
+  handler: (event: Event) => void,
+  element?: RefObject<T>,
+) {
+  // Create a ref that stores handler
+  const savedHandler: RefObject<(event: Event) => void> = useRef<
+    (event: Event) => void
+  >();
+
+  useEffect(() => {
+    // Define the listening target
+    const targetElement: T | Window = element?.current || window;
+    if (!(targetElement && targetElement.addEventListener)) {
+      return;
+    }
+
+    // Update saved handler if necessary
+    if (savedHandler.current !== handler) {
+      savedHandler.current = handler;
+    }
+
+    // Create event listener that calls handler function stored in ref
+    const eventListener = (event: Event) => {
+      // eslint-disable-next-line no-extra-boolean-cast
+      if (!!savedHandler?.current) {
+        savedHandler.current(event);
+      }
+    };
+
+    targetElement.addEventListener(eventName, eventListener);
+
+    // Remove event listener on cleanup
+    // eslint-disable-next-line consistent-return
+    return () => {
+      targetElement.removeEventListener(eventName, eventListener);
+    };
+  }, [eventName, element, handler]);
+}
+
+export default useEventListener;

package/src/hooks/useHover.ts

@@ -0,0 +1,40 @@
+import { RefObject } from 'preact';
+import { useEffect, useState } from 'preact/hooks';
+
+/**
+ *
+ * @param ref Element to watch for hover state
+ * @param disableDetection Boolean flag to disable detection
+ * @returns {boolean} Returns a boolean value indicating whether the mouse is hovering over the element
+ */
+function useHover<T extends HTMLElement = HTMLDivElement>(
+  ref: RefObject<T>,
+  disableDetection = false,
+): boolean {
+  const [value, setValue] = useState(false);
+  const handleMouseOver = () => !disableDetection && setValue(true);
+  const handleMouseOut = () => !disableDetection && setValue(false);
+  useEffect(
+    () => {
+      const node = ref.current;
+
+      if (node) {
+        if (value && !disableDetection) {
+          // when disabling detection when already hovered, we need
+          // to make sure that the value is set to false
+          setValue(false);
+        }
+        node.addEventListener('mouseenter', handleMouseOver);
+        node.addEventListener('mouseleave', handleMouseOut);
+      }
+      return () => {
+        node?.removeEventListener('mouseenter', handleMouseOver);
+        node?.removeEventListener('mouseleave', handleMouseOut);
+      };
+    },
+    [ref.current, disableDetection], // Recall only if ref changes
+  );
+  return value;
+}
+
+export default useHover;