async load the SuccessMessage

Author: ryan953

packages/feedback-async/src/widget/Dialog.tsx

@@ -7,6 +7,8 @@ import type { Props as BaseProps } from './DialogBase';
 import { DialogContent } from './components/DialogContent';
 import type { Props as DialogContentProps } from './components/DialogContent';
 
+export { showSuccessMessage } from './Message';
+
 function renderDialog(parent: HTMLElement, props: DialogContentProps): void {
   render(<DialogContent {...props} />, parent);
 }

packages/feedback-async/src/widget/DialogWithScreenShots.tsx

@@ -8,6 +8,8 @@ import { DialogContent } from './components/DialogContent';
 import type { Props as DialogContentProps } from './components/DialogContent';
 import { ScreenShotArea } from './components/ScreenShotArea';
 
+export { showSuccessMessage } from './Message';
+
 function renderDialog(parent: HTMLElement, props: DialogContentProps): void {
   render(
     <DialogContent {...props}>

packages/feedback-async/src/widget/Message.ts

@@ -0,0 +1,28 @@
+import type { FeedbackInternalOptions } from '../types';
+import { SuccessMessage } from './components/SuccessMessage';
+
+/**
+ * Show the success message for 5 seconds
+ */
+export function showSuccessMessage(shadow: ShadowRoot, options: FeedbackInternalOptions, onCleanup: () => void): void {
+  const cleanup = (): void => {
+    success.remove();
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+    }
+    onCleanup();
+  };
+
+  const success = SuccessMessage({
+    message: options.successMessageText,
+    onClick: cleanup,
+  });
+
+  if (!success) {
+    throw new Error('Unable to show success message');
+  }
+
+  shadow.appendChild(success);
+
+  const timeoutId = setTimeout(cleanup, 5000);
+}

packages/feedback-async/src/widget/SuccessMessage.ts

@@ -0,0 +1,21 @@
+import { WINDOW } from '../../constants';
+import { SuccessIcon } from '../components/SuccessIcon';
+
+export interface SuccessMessageProps {
+  message: string;
+  onClick: () => void;
+}
+
+/**
+ * Feedback dialog component that has the form
+ */
+export function SuccessMessage({ message, onClick }: SuccessMessageProps): HTMLDivElement {
+  const doc = WINDOW.document;
+  const el = doc.createElement('div');
+  el.className = 'success-message';
+  el.addEventListener('click', onClick);
+  el.appendChild(SuccessIcon());
+  el.appendChild(doc.createTextNode(message));
+
+  return el;
+}

packages/feedback-async/src/widget/components/SuccessMessage.ts

@@ -8,7 +8,6 @@ import { sendFeedback } from '../sendFeedback';
 import type { DialogComponent, FeedbackFormData, FeedbackInternalOptions, FeedbackWidget } from '../types';
 import type { ActorComponent } from './Actor';
 import { Actor } from './Actor';
-import { SuccessMessage } from './SuccessMessage';
 import { loadDialog } from './loadDialog';
 
 interface CreateWidgetParams {
@@ -44,79 +43,6 @@ export function createWidget({
   let actor: ActorComponent | undefined;
   let dialog: DialogComponent | undefined;
 
-  /**
-   * Show the success message for 5 seconds
-   */
-  function showSuccessMessage(): void {
-    if (!shadow) {
-      return;
-    }
-
-    try {
-      const success = SuccessMessage({
-        message: options.successMessageText,
-        onRemove: () => {
-          if (timeoutId) {
-            clearTimeout(timeoutId);
-          }
-          showActor();
-        },
-      });
-
-      if (!success.el) {
-        throw new Error('Unable to show success message');
-      }
-
-      shadow.appendChild(success.el);
-
-      const timeoutId = setTimeout(() => {
-        if (success) {
-          success.remove();
-        }
-      }, 5000);
-    } catch (err) {
-      // TODO: error handling
-      logger.error(err);
-      console.log(err); // eslint-disable-line no-console
-    }
-  }
-
-  /**
-   * Handler for when the feedback form is completed by the user. This will
-   * create and send the feedback message as an event.
-   */
-  async function _handleFeedbackSubmit(feedback: FeedbackFormData): Promise<void> {
-    if (!dialog) {
-      return;
-    }
-
-    const missingFields = getMissingFields(feedback, options);
-    if (missingFields.length > 0) {
-      dialog.showError(`Please enter in the following required fields: ${missingFields.join(', ')}`);
-      return;
-    }
-
-    dialog.hideError();
-    try {
-      await sendFeedback({ ...feedback, source: FEEDBACK_WIDGET_SOURCE });
-    } catch (err) {
-      DEBUG_BUILD && logger.error(err);
-      dialog.showError('There was a problem submitting feedback, please wait and try again.');
-      if (options.onSubmitError) {
-        options.onSubmitError();
-      }
-      return;
-    }
-
-    // Success
-    removeDialog();
-    showSuccessMessage();
-
-    if (options.onSubmitSuccess) {
-      options.onSubmitSuccess();
-    }
-  }
-
   /**
    * Displays the default actor
    */
@@ -157,7 +83,7 @@ export function createWidget({
       const user = scope && scope.getUser();
 
       loadDialog({ screenshots: false })
-        .then(Dialog => {
+        .then(({ Dialog, showSuccessMessage }) => {
           dialog = Dialog({
             colorScheme: options.colorScheme,
             showBranding: options.showBranding,
@@ -180,7 +106,35 @@ export function createWidget({
               closeDialog();
               showActor();
             },
-            onSubmit: _handleFeedbackSubmit,
+            onSubmit: async function _handleFeedbackSubmit(feedback: FeedbackFormData): Promise<void> {
+              if (!dialog) {
+                return;
+              }
+
+              const missingFields = getMissingFields(feedback, options);
+              if (missingFields.length > 0) {
+                dialog.showError(`Please enter in the following required fields: ${missingFields.join(', ')}`);
+                return;
+              }
+
+              dialog.hideError();
+              try {
+                await sendFeedback({ ...feedback, source: FEEDBACK_WIDGET_SOURCE });
+              } catch (err) {
+                DEBUG_BUILD && logger.error(err);
+                dialog.showError('There was a problem submitting feedback, please wait and try again.');
+                if (options.onSubmitError) {
+                  options.onSubmitError();
+                }
+                return;
+              }
+
+              removeDialog();
+              showSuccessMessage(shadow, options, showActor);
+              if (options.onSubmitSuccess) {
+                options.onSubmitSuccess();
+              }
+            },
           });
 
           if (!dialog.el) {

packages/feedback-async/src/widget/createWidget.ts

@@ -1,17 +1,23 @@
 import type { DialogComponent } from '../types';
 import type { Props as BaseProps } from './DialogBase';
+import type { showSuccessMessage } from './Message';
 
-type Return = (props: Omit<BaseProps, 'renderDialog'>) => DialogComponent;
+type DialogRenderer = (props: Omit<BaseProps, 'renderDialog'>) => DialogComponent;
+
+type Return = {
+  Dialog: DialogRenderer;
+  showSuccessMessage: typeof showSuccessMessage;
+};
 
 /**
  * Async load the Dialog component for rendering.
  */
 export async function loadDialog({ screenshots }: { screenshots: boolean }): Promise<Return> {
   if (screenshots) {
-    const { Dialog } = await import('./DialogWithScreenShots');
-    return Dialog;
+    const { Dialog, showSuccessMessage } = await import('./DialogWithScreenShots');
+    return { Dialog, showSuccessMessage };
   } else {
-    const { Dialog } = await import('./Dialog');
-    return Dialog;
+    const { Dialog, showSuccessMessage } = await import('./Dialog');
+    return { Dialog, showSuccessMessage };
   }
 }