@integry/sdk 4.5.2 → 4.5.4

package/src/features/containers/FlowSetupContainer/index.ts

@@ -0,0 +1,390 @@
+import { html } from 'htm/preact';
+import {
+  useContext,
+  useEffect,
+  useErrorBoundary,
+  useRef,
+  useState,
+} from 'preact/hooks';
+import { assert, StructError } from 'superstruct';
+import { connect } from 'unistore/preact';
+
+import AppContext from '@/contexts/AppContext';
+import { actionFunctions } from '@/store';
+import { StoreType } from '@/types/store';
+import {
+  TemplateResponse,
+  TemplatePreviewData,
+  PreviewMetadata,
+  TemplatePreviewDataType,
+  IntegrationSaveResponse,
+} from '@/interfaces';
+import { Loader } from '@/components/Loader';
+import { notEmpty } from '@/types/utils';
+import { ErrorPage } from '@/components/ErrorPage';
+import Steps, { StepsPropsType } from '@/features/common/Steps';
+
+import StepNavigation from '@/features/common/StepNavigation';
+
+import styles from './styles.module.scss';
+
+export interface FlowSetupContainerProps extends StoreType {
+  deploymentId: string;
+  flowId: string;
+  integrationId?: number;
+  templatePreviewData?: TemplatePreviewData;
+  isPreviewMode?: boolean;
+  previewMetadata?: PreviewMetadata;
+  customWrapper?: preact.VNode<Record<string, never>>;
+  versionId?: number;
+  connectedAppAuthID?: number | undefined;
+  hideStepNavigation?: boolean;
+  setupContainerClassName?: string;
+  stepsClassName?: StepsPropsType['stepsClassName'];
+  onUpdate?: (integrationData: IntegrationSaveResponse) => void;
+  onFlowExecute?: () => void;
+  onBackClick?: () => void;
+  skipAuth?: boolean;
+  hideStepCount?: boolean;
+  showCloseModalOnBackCTA?: boolean;
+  isInModal?: boolean;
+  setupContainerStyle?: string;
+  stepContainerStyle?: string;
+  params?: Record<string, string>;
+}
+
+/**
+ * Wrapper component
+ *
+ */
+const FlowSetupContainer = (props: FlowSetupContainerProps) => {
+  const [loading, setLoading] = useState<boolean>(false);
+  const [templateData, setTemplateData] = useState<TemplateResponse | null>(
+    null,
+  );
+  const {
+    flowId,
+    deploymentId,
+    integrationId,
+    customWrapper,
+    templatePreviewData,
+    previewMetadata,
+    integrationIdToEdit,
+    integrations,
+    versionId,
+    connectedAppAuthID,
+    hideStepNavigation = false,
+    setupContainerClassName = '',
+    stepsClassName = null,
+    onUpdate,
+    onFlowExecute,
+    onBackClick,
+    skipAuth = false,
+    hideStepCount = false,
+    showCloseModalOnBackCTA = false,
+    isInModal = false,
+    setupContainerStyle = '',
+    stepContainerStyle = '',
+    params = {},
+  } = props;
+
+  const [validationErr, setValidationErr] = useState<StructError | null>(null);
+
+  const [sdkError, resetSdkError] = useErrorBoundary(() => {
+    // log something here
+  });
+
+  const context = useContext(AppContext);
+
+  const MAX_REFETCH_INTEGRATIONS_API_CALL_REF = useRef(5);
+
+  useEffect(() => {
+    if (sdkError) console.error(sdkError);
+  }, [sdkError]);
+
+  useEffect(() => {
+    if (!integrationIdToEdit && integrationId)
+      props.setStoreState({
+        integrationIdToEdit: integrationId,
+      });
+  }, [integrationIdToEdit, integrationId]);
+
+  useEffect(() => {
+    setLoading(true);
+    let parsedIntegrationId = integrationId;
+    if (integrationIdToEdit) {
+      parsedIntegrationId = integrationIdToEdit;
+    }
+    if (context?.isPreviewMode && previewMetadata) {
+      // setup state using preview data
+      if (!templatePreviewData)
+        throw new Error('Preview data was not provided');
+      try {
+        assert(templatePreviewData, TemplatePreviewDataType);
+      } catch (error) {
+        console.error(error);
+        setLoading(false);
+        setValidationErr(error as StructError);
+        return;
+      }
+      const { steps, ...template } = templatePreviewData;
+      setTemplateData(templatePreviewData);
+      props.setGenericData({
+        templateId: Number(template.id),
+        deploymentId: Number(deploymentId),
+        isPreviewMode: context.isPreviewMode,
+      });
+      props.setSteps(steps.filter(notEmpty));
+      props.setStepMapping(steps.filter(notEmpty));
+      props.setParentChildMapping(steps.filter(notEmpty));
+      props.setConditionalFieldMapping(steps.filter(notEmpty));
+      props.gotoStepInPreview(previewMetadata);
+      context.eventEmitter.emit('did-load-preview', {
+        flowId: Number(template.id),
+        flowTitle: template.name,
+        flowDescription: template.description,
+      });
+      setLoading(false);
+      return;
+    }
+    if (flowId) {
+      let selfAuthId: number | undefined;
+      if (
+        props.userConfig &&
+        props.userConfig.viewAsIU &&
+        props.genericData.IUAccountsData
+      ) {
+        selfAuthId =
+          props.genericData.IUAccountsData?.default_authorization || undefined;
+      }
+      context?.apiHandler
+        .getTemplate(Number(flowId), selfAuthId, connectedAppAuthID)
+        .then((data) => {
+          setTemplateData(data);
+          if (data) {
+            props.setStoreState({
+              genericData: {
+                ...props.genericData,
+                brandingApp: data.branding_app,
+                name: data.name,
+                flowDescription: data.description,
+                flowParameters: data.parameters || {},
+                flowParametersData: params,
+              },
+            });
+            Promise.all(
+              data.steps.map((el) =>
+                context.apiHandler.getTemplateStep(
+                  Number(el.id),
+                  Number(parsedIntegrationId),
+                  versionId,
+                  selfAuthId,
+                  connectedAppAuthID,
+                ),
+              ),
+            )
+              .then(async (res) => {
+                if (res) {
+                  props.setGenericData({
+                    templateId: Number(flowId),
+                    deploymentId: Number(deploymentId),
+                    isReadOnly: context?.isReadOnly,
+                    selfAppName: data.app.name,
+                    selfAppId: data.app.id,
+                  });
+                  props.setSteps(res.filter(notEmpty));
+                  props.setStepMapping(
+                    res.filter(notEmpty),
+                    parsedIntegrationId,
+                  );
+                  props.setParentChildMapping(res.filter(notEmpty));
+                  props.setConditionalFieldMapping(res.filter(notEmpty));
+                  const flowDataObj = {
+                    templateId: Number(flowId),
+                    templateTitle: data.name,
+                    templateDescription: data.description,
+                    flowId: Number(flowId),
+                    flowTitle: data.name,
+                    flowDescription: data.description,
+                  };
+                  if (parsedIntegrationId) {
+                    context.eventEmitter.emit('did-load-flow', {
+                      ...flowDataObj,
+                      mode: 'EDIT',
+                    });
+                    context.eventEmitter.emit('did-load-integration', {
+                      flowId: Number(flowId),
+                      integrationId: parsedIntegrationId,
+                    });
+                    const integrationData = await context.apiHandler.getIntegrationById(
+                      parsedIntegrationId,
+                      context?.isReadOnly || false,
+                    );
+                    if (integrationData)
+                      props.setGenericData({
+                        currentIntegrationStatus: integrationData.status,
+                        isTestIntegration: integrationData.is_test_integration,
+                      });
+                    else
+                      throw new Error(
+                        `Error fetching integration data for ID ${props.integrationIdToEdit}`,
+                      );
+                  } else {
+                    context.eventEmitter.emit('did-load-flow', {
+                      ...flowDataObj,
+                      mode: 'CREATE',
+                    });
+                  }
+                  setLoading(false);
+                }
+              })
+              .catch((err) => console.error(err));
+          }
+        });
+    } else throw new Error('Template ID not found');
+  }, [flowId]);
+
+  const refetchIntegrations = () => {
+    if (props.genericData.deploymentId)
+      context?.apiHandler
+        .getTemplateListing(props.genericData.deploymentId)
+        .then((res) => {
+          props.setStoreState({
+            integrations: res?.integrations,
+            fetchingIntegrations: false,
+          });
+        });
+  };
+
+  const executeOnDemandFlow = (integration: IntegrationSaveResponse): void => {
+    if (templateData) {
+      const { execution_behaviour, execution_type } = templateData;
+      const triggerStep = integration.steps.find((step) => step.returned_data);
+      const { incomingWebhookPayload } = props;
+
+      if (
+        execution_behaviour === 'SAVE_AND_EXECUTE' &&
+        execution_type === 'ON_DEMAND' &&
+        triggerStep
+      ) {
+        const triggerPath = JSON.parse(triggerStep.returned_data || '')
+          ?.endpoint;
+        context?.apiHandler
+          .executeFlow(triggerPath, incomingWebhookPayload || {})
+          .then(() => {
+            if (onFlowExecute) onFlowExecute();
+            // getAppFlows();
+          })
+          .catch((err: unknown) => {
+            console.error(err);
+          });
+      }
+    }
+  };
+
+  const onFlowUpdate = (integrationData: IntegrationSaveResponse): void => {
+    refetchIntegrations();
+    if (onUpdate) {
+      onUpdate(integrationData);
+    }
+    if (!props.genericData.skipOnDemand) {
+      executeOnDemandFlow(integrationData);
+    }
+  };
+
+  useEffect(() => {
+    // fetch integrations, and set in store state for marketplace
+    if (integrationIdToEdit && integrations?.length < 1) {
+      if (MAX_REFETCH_INTEGRATIONS_API_CALL_REF.current > 0) {
+        MAX_REFETCH_INTEGRATIONS_API_CALL_REF.current -= 1;
+        refetchIntegrations();
+      }
+    }
+  }, [integrationIdToEdit, integrations]);
+
+  if (customWrapper) {
+    return html`${customWrapper}`;
+  }
+
+  return html`
+    <div
+      id="${isInModal ? 'setupContainerModal' : 'setupContainer'}"
+      class="${styles.wrap} ${setupContainerClassName} ${'integry-container'}"
+      style="${!isInModal && props.genericData.testMultipurpose
+        ? ''
+        : ''}${setupContainerStyle}"
+    >
+      ${sdkError || validationErr
+        ? html`
+            <${ErrorPage}
+              title=${validationErr
+                ? 'Validation error'
+                : 'An unexpected error occurred'}
+              description=${validationErr
+                ? 'There was an error validating the preview payload:'
+                : 'Please review the following stacktrace:'}
+              errorPayload=${validationErr || sdkError}
+              onDismiss=${validationErr ? null : resetSdkError}
+            />
+          `
+        : html`
+            ${hideStepNavigation
+              ? html``
+              : html`<div>
+                  ${!loading &&
+                  templateData &&
+                  html`
+                    <${StepNavigation}
+                      steps=${templateData.steps?.map((el) => ({
+                        label: el.title,
+                        logoUrl: el.activity.app.icon_url,
+                      }))}
+                    ><//>
+                  `}
+                </div>`}
+            <div class=${styles.main}>
+              ${loading &&
+              html`<div
+                style="min-height: 500px; display: flex; justify-content: center;margin-top:${props
+                  .genericData.testMultipurpose
+                  ? '24px'
+                  : '0'};"
+              >
+                <${Loader} />
+              </div>`}
+              ${!loading &&
+              templateData &&
+              html`
+                <${Steps}
+                  steps=${templateData.steps}
+                  onUpdate=${onFlowUpdate}
+                  stepsClassName=${stepsClassName}
+                  skipAuth=${skipAuth}
+                  onBackClick=${() => {
+                    if (onBackClick) onBackClick();
+                  }}
+                  submitButtonText=${templateData.button_text}
+                  hideStepCount=${hideStepCount}
+                  editMode=${!!integrationIdToEdit}
+                  showCloseModalOnBackCTA=${showCloseModalOnBackCTA}
+                  deploymentId=${deploymentId || props.genericData.deploymentId}
+                  isInModal=${isInModal}
+                  stepContainerStyle=${stepContainerStyle}
+                ><//>
+              `}
+            </div>
+          `}
+    </div>
+  `;
+};
+
+export default connect<FlowSetupContainerProps, unknown, StoreType, unknown>(
+  [
+    'integrationIdToEdit',
+    'genericData',
+    'integrations',
+    'userConfig',
+    'incomingWebhookPayload',
+  ],
+  actionFunctions,
+)(FlowSetupContainer);

package/src/features/containers/FlowSetupContainer/styles.module.scss

@@ -0,0 +1,18 @@
+.wrap {
+  position: relative;
+  width: 100%;
+  max-width: 730px;
+  height: 100%;
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+  font-family: inherit;
+}
+
+.main {
+  width: 100%;
+  line-height: 1;
+  height: 100%;
+}