wip

Author: ryan953

packages/feedback2/src/core/components/Actor.ts

@@ -16,16 +16,6 @@ export interface ActorComponent {
    * The style element for this component
    */
   style: HTMLStyleElement;
-
-  /**
-   * Show the actor element
-   */
-  show: () => void;
-
-  /**
-   * Hide the actor element
-   */
-  hide: () => void;
 }
 
 /**
@@ -54,13 +44,5 @@ export function Actor({ buttonLabel }: ActorProps): ActorComponent {
     get style() {
       return style;
     },
-    show: (): void => {
-      el.classList.remove('widget__actor--hidden');
-      el.setAttribute('aria-hidden', 'false');
-    },
-    hide: (): void => {
-      el.classList.add('widget__actor--hidden');
-      el.setAttribute('aria-hidden', 'true');
-    },
   };
 }

packages/feedback2/src/core/integration.ts

@@ -17,7 +17,7 @@ import {
   SUBMIT_BUTTON_LABEL,
   SUCCESS_MESSAGE_TEXT,
 } from '../constants';
-import type { DialogComponent } from '../modal/Dialog';
+import type { DialogComponent } from '../modal/components/Dialog';
 import type { DialogLifecycleCallbacks, feedback2ModalIntegration } from '../modal/integration';
 import type { feedback2ScreenshotIntegration } from '../screenshot/integration';
 import type {
@@ -182,26 +182,31 @@ export class Feedback2 implements Integration {
 
     const shadow = this._getShadow(options);
     const actor = Actor({ buttonLabel: options.buttonLabel });
-    shadow.appendChild(actor.style);
-    shadow.appendChild(actor.el);
+    const insertActor = (): void => {
+      shadow.appendChild(actor.style);
+      shadow.appendChild(actor.el);
+    };
     this.attachTo(actor.el, {
       onFormOpen() {
-        actor.hide();
+        shadow.removeChild(actor.el);
+        shadow.removeChild(actor.style);
         options.onFormOpen && options.onFormOpen();
       },
       onFormClose() {
-        actor.show();
+        insertActor();
         options.onFormClose && options.onFormClose();
       },
       onSubmitSuccess(data: FeedbackFormData) {
-        actor.show();
+        insertActor();
         options.onSubmitSuccess && options.onSubmitSuccess(data);
       },
       onSubmitError() {
-        actor.show();
+        insertActor();
         options.onSubmitError && options.onSubmitError();
       },
     });
+
+    insertActor();
   }
 
   /**

packages/feedback2/src/modal/Dialog.ts

@@ -0,0 +1,78 @@
+// biome-ignore lint/nursery/noUnusedImports: reason
+import { Fragment, h, render } from 'preact'; // eslint-disable-line @typescript-eslint/no-unused-vars
+import type { VNode } from 'preact';
+import { useCallback, useMemo, useState } from 'preact/hooks';
+import { DOCUMENT } from '../../constants';
+import type { FeedbackFormData } from '../../types';
+import { createDialogStyles } from './Dialog.css';
+import { DialogContent } from './DialogContent';
+import type { Props as DialogContentProps } from './DialogContent';
+import { SuccessIcon } from './SuccessIcon';
+
+export interface Props extends DialogContentProps {
+  successMessageText: string;
+  onDone: () => void;
+}
+
+export interface DialogComponent {
+  /**
+   * The dialog element itself
+   */
+  el: HTMLElement;
+
+  /**
+   * The style element for this component
+   */
+  style: HTMLStyleElement;
+}
+
+/**
+ *
+ */
+export function Dialog(props: Props): DialogComponent {
+  const el = DOCUMENT.createElement('div');
+  render(<DialogContainer {...props} />, el);
+
+  const style = createDialogStyles();
+
+  return {
+    get el() {
+      return el;
+    },
+    get style() {
+      return style;
+    },
+  };
+}
+
+function DialogContainer({ onDone, ...props }: Props): VNode {
+  const successIconHtml = useMemo(() => {
+    const logo = SuccessIcon();
+    return { __html: logo.outerHTML };
+  }, []);
+
+  const [timeoutId, setTimeoutId] = useState<NodeJS.Timeout | null>(null);
+
+  const onSubmitSuccess = useCallback(
+    (data: FeedbackFormData) => {
+      props.onSubmitSuccess(data);
+      setTimeoutId(() => setTimeout(onDone, 5000));
+    },
+    [onDone],
+  );
+
+  return (
+    <Fragment>
+      {didSubmit ? (
+        <div class="success-message" onClick={onDone}>
+          {props.successMessageText}
+          <span dangerouslySetInnerHTML={successIconHtml} />
+        </div>
+      ) : (
+        <dialog class="dialog" onClick={props.onFormClose} open>
+          <DialogContent {...props} onSubmitSuccess={onSubmitSuccess} />
+        </dialog>
+      )}
+    </Fragment>
+  );
+}

packages/feedback2/src/modal/components/Dialog.tsx

@@ -2,7 +2,6 @@
 import { h } from 'preact'; // eslint-disable-line @typescript-eslint/no-unused-vars
 import type { ComponentChildren, VNode } from 'preact';
 import { useMemo } from 'preact/hooks';
-
 import { Form } from './Form';
 import type { Props as FormProps } from './Form';
 import type { Props as LogoProps } from './Logo';

packages/feedback2/src/modal/components/DialogContent.tsx

@@ -3,8 +3,8 @@ import type { Integration, IntegrationFn } from '@sentry/types';
 import { isBrowser } from '@sentry/utils';
 import type { FeedbackFormData, FeedbackInternalOptions } from '../types';
 import type { SendFeedbackOptions, SendFeedbackParams } from '../types';
-import { makeDialog } from './Dialog';
-import type { DialogComponent } from './Dialog';
+import { Dialog } from './components/Dialog';
+import type { DialogComponent } from './components/Dialog';
 
 export interface DialogLifecycleCallbacks {
   /**
@@ -22,7 +22,7 @@ export interface DialogLifecycleCallbacks {
   /**
    * When the dialog is either closed, or was submitted successfully, and nothing is rendered anymore.
    *
-   * This is called after onClose OR onSuccess
+   * This is called after onFormClose OR onSubmitSuccess
    */
   onDone: (dialog: DialogComponent) => void;
 }
@@ -79,7 +79,7 @@ export class Feedback2Modal implements Integration {
       const user = scope && scope.getUser();
 
       // TODO: options may have changed?
-      const dialog = makeDialog({
+      const dialog = Dialog({
         colorScheme: options.colorScheme,
         showBranding: options.showBranding,
         showName: options.showName || options.isNameRequired,
@@ -97,18 +97,21 @@ export class Feedback2Modal implements Integration {
         namePlaceholder: options.namePlaceholder,
         defaultName: (userKey && user && user[userKey.name]) || '',
         defaultEmail: (userKey && user && user[userKey.email]) || '',
+        successMessageText: options.successMessageText,
         onFormClose: () => {
           callbacks.onDone(dialog);
           options.onFormClose && options.onFormClose();
         },
         onSubmit: callbacks.onSubmit,
         onSubmitSuccess: (data: FeedbackFormData) => {
-          callbacks.onDone(dialog);
           options.onSubmitSuccess && options.onSubmitSuccess(data);
         },
         onSubmitError: () => {
           options.onSubmitError && options.onSubmitError();
         },
+        onDone: () => {
+          callbacks.onDone(dialog);
+        },
       });
       this._dialog = dialog;
     }