total overhaul with new inputMode option

Author: laander

packages/browser-sdk/index.html

@@ -15,22 +15,25 @@
       const urlParams = new URLSearchParams(window.location.search);
       const publishableKey = urlParams.get("publishableKey");
       const flagKey = urlParams.get("flagKey") ?? "huddles";
+
+      const onFeedbackClick = (e) => {
+        reflag.requestFeedback({
+          flagKey,
+          inputMode: "comment-and-score",
+          position: { type: "POPOVER", anchor: e.currentTarget },
+        });
+      };
     </script>
     <style>
       body {
         font-family: sans-serif;
       }
       #start-huddle {
-        border: 1px solid black;
-        padding: 10px;
+        margin: 100px;
       }
     </style>
     <div id="start-huddle" style="display: none">
-      <button
-        onClick="bucket.requestFeedback({flagKey, requireSatisfactionScore: false, position: {type: 'POPOVER', anchor: event.currentTarget}})"
-      >
-        Give feedback!
-      </button>
+      <button onClick="onFeedbackClick(event)">Give feedback!</button>
       <button onClick="reflag.track(flagKey)">Start huddle</button>
     </div>
 

packages/browser-sdk/src/client.ts

@@ -7,6 +7,7 @@ import {
   RequestFeedbackOptions,
 } from "./feedback/feedback";
 import * as feedbackLib from "./feedback/ui";
+import { OpenFeedbackFormOptions } from "./feedback/ui/types";
 import {
   CheckEvent,
   FallbackFlagOverride,
@@ -24,6 +25,12 @@ import { showToolbarToggle } from "./toolbar";
 const isMobile = typeof window !== "undefined" && window.innerWidth < 768;
 const isNode = typeof document === "undefined"; // deno supports "window" but not "document" according to https://remix.run/docs/en/main/guides/gotchas
 
+const VALID_INPUT_MODES: Required<OpenFeedbackFormOptions["inputMode"]>[] = [
+  "comment-and-score",
+  "comment-only",
+  "score-only",
+];
+
 /**
  * (Internal) User context.
  *
@@ -701,6 +708,13 @@ export class ReflagClient {
       return;
     }
 
+    if (options.inputMode && !VALID_INPUT_MODES.includes(options.inputMode)) {
+      this.logger.error(
+        "`requestFeedback` call ignored. Invalid `inputMode` provided",
+      );
+      return;
+    }
+
     const feedbackData = {
       flagKey: options.flagKey,
       companyId:
@@ -720,30 +734,22 @@ export class ReflagClient {
         position: options.position || this.requestFeedbackOptions.position,
         translations:
           options.translations || this.requestFeedbackOptions.translations,
-        openWithCommentVisible: options.openWithCommentVisible,
-        requireSatisfactionScore: options.requireSatisfactionScore,
+        inputMode: options.inputMode,
         onClose: options.onClose,
         onDismiss: options.onDismiss,
-        onScoreSubmit: async (data) => {
-          const res = await this.feedback({
-            ...feedbackData,
-            ...data,
-          });
-
-          if (res) {
-            const json = await res.json();
-            return { feedbackId: json.feedbackId };
-          }
-          return { feedbackId: undefined };
-        },
         onSubmit: async (data) => {
           // Default onSubmit handler
-          await this.feedback({
+          const res = await this.feedback({
             ...feedbackData,
             ...data,
           });
 
-          options.onAfterSubmit?.(data);
+          if (!res) return;
+
+          const json = res ? await res.json() : {};
+          options.onAfterSubmit?.({ ...data, ...json });
+
+          return json;
         },
       });
     }, 1);

packages/browser-sdk/src/feedback/feedback.ts

@@ -378,7 +378,7 @@ export class AutoFeedback {
     message: FeedbackPrompt,
     completionHandler: FeedbackPromptCompletionHandler,
   ) {
-    let feedbackId: string | undefined = undefined;
+    const feedbackId: string | undefined = undefined;
 
     await this.feedbackPromptEvent({
       promptId: message.promptId,
@@ -435,24 +435,16 @@ export class AutoFeedback {
         feedbackLib.openFeedbackForm({
           key: message.featureId,
           title: message.question,
-          onScoreSubmit: async (data) => {
-            const res = await replyCallback(data);
-            feedbackId = res.feedbackId;
-            return { feedbackId: res.feedbackId };
-          },
           onSubmit: async (data) => {
-            await replyCallback(data);
-            options.onAfterSubmit?.(data);
+            const res = await replyCallback(data);
+            if (!res) return;
+            options.onAfterSubmit?.({ ...data, ...res });
+            return res;
           },
           onDismiss: () => replyCallback(null),
           position: this.position,
           translations: this.feedbackTranslations,
           ...options,
-          openWithCommentVisible:
-            options.requireSatisfactionScore === false
-              ? true
-              : options.openWithCommentVisible,
-          requireSatisfactionScore: options.requireSatisfactionScore,
         });
       },
     };

packages/browser-sdk/src/feedback/ui/Button.css

@@ -6,7 +6,7 @@
   user-select: none;
   position: relative;
   white-space: nowrap;
-  height: 2rem;
+  height: 1.85rem;
   padding-inline-start: 0.75rem;
   padding-inline-end: 0.75rem;
   gap: 0.5em;
@@ -27,11 +27,11 @@
   &.primary {
     background-color: var(
       --reflag-feedback-dialog-primary-button-background-color,
-      white
+      #09090b
     );
-    color: var(--reflag-feedback-dialog-primary-button-color, #1e1f24);
+    color: var(--reflag-feedback-dialog-primary-button-color, white);
     border: 1px solid
-      var(--reflag-feedback-dialog-primary-border-color, #d8d9df);
+      var(--reflag-feedback-dialog-primary-border-color, #09090b);
   }
 
   &:disabled {

packages/browser-sdk/src/feedback/ui/FeedbackDialog.css

@@ -1,7 +1,7 @@
 .dialog {
   position: fixed;
   width: 210px;
-  padding: 16px 22px 10px;
+  padding: 16px 16px 16px;
   font-size: var(--reflag-feedback-dialog-font-size, 1rem);
   font-family: var(
     --reflag-feedback-dialog-font-family,

packages/browser-sdk/src/feedback/ui/FeedbackDialog.tsx

@@ -11,7 +11,6 @@ import { FeedbackForm } from "./FeedbackForm";
 import styles from "./index.css?inline";
 import { RadialProgress } from "./RadialProgress";
 import {
-  FeedbackScoreSubmission,
   FeedbackSubmission,
   OpenFeedbackFormOptions,
   WithRequired,
@@ -25,26 +24,19 @@ export type FeedbackDialogProps = WithRequired<
 const INACTIVE_DURATION_MS = 20 * 1000;
 const SUCCESS_DURATION_MS = 3 * 1000;
 
+export type FormState = "idle" | "submitting" | "submitted" | "error";
+
 export const FeedbackDialog: FunctionComponent<FeedbackDialogProps> = ({
   key,
   title = DEFAULT_TRANSLATIONS.DefaultQuestionLabel,
   position,
   translations = DEFAULT_TRANSLATIONS,
-  openWithCommentVisible = false,
-  requireSatisfactionScore = true,
+  inputMode = "comment-and-score",
   onClose,
   onDismiss,
   onSubmit,
-  onScoreSubmit,
 }) => {
-  // If requireSatisfactionScore is false, always show comment field
-  const effectiveOpenWithCommentVisible =
-    requireSatisfactionScore === false ? true : openWithCommentVisible;
-
-  const [feedbackId, setFeedbackId] = useState<string | undefined>(undefined);
-  const [scoreState, setScoreState] = useState<
-    "idle" | "submitting" | "submitted"
-  >("idle");
+  const [formState, setFormState] = useState<FormState>("idle");
 
   const { isOpen, close } = useDialog({ onClose, initialValue: true });
 
@@ -56,24 +48,21 @@ export const FeedbackDialog: FunctionComponent<FeedbackDialogProps> = ({
 
   const submit = useCallback(
     async (data: Omit<FeedbackSubmission, "feedbackId">) => {
-      await onSubmit({ ...data, feedbackId });
-      autoClose.startWithDuration(SUCCESS_DURATION_MS);
-    },
-    [autoClose, feedbackId, onSubmit],
-  );
-
-  const submitScore = useCallback(
-    async (data: Omit<FeedbackScoreSubmission, "feedbackId">) => {
-      if (onScoreSubmit !== undefined) {
-        setScoreState("submitting");
-
-        const res = await onScoreSubmit({ ...data, feedbackId });
-        setFeedbackId(res.feedbackId);
-        setScoreState("submitted");
+      try {
+        setFormState("submitting");
+        const res = await onSubmit({ ...data });
+        if (!res) throw new Error("Failed to submit feedback");
+        setFormState("submitted");
+        autoClose.startWithDuration(SUCCESS_DURATION_MS);
+      } catch (error) {
+        setFormState("error");
+        console.error("Couldn't submit feedback with Reflag:", error);
+        throw error;
       }
     },
-    [feedbackId, onScoreSubmit],
+    [autoClose, onSubmit],
   );
+
   const dismiss = useCallback(() => {
     autoClose.stop();
     close();
@@ -94,14 +83,12 @@ export const FeedbackDialog: FunctionComponent<FeedbackDialogProps> = ({
         <>
           <FeedbackForm
             key={key}
-            openWithCommentVisible={effectiveOpenWithCommentVisible}
+            inputMode={inputMode}
             question={title}
-            requireSatisfactionScore={requireSatisfactionScore}
-            scoreState={scoreState}
             t={{ ...DEFAULT_TRANSLATIONS, ...translations }}
             onInteraction={autoClose.stop}
-            onScoreSubmit={submitScore}
             onSubmit={submit}
+            formState={formState}
           />
 
           <button class="close" onClick={dismiss}>
@@ -111,7 +98,7 @@ export const FeedbackDialog: FunctionComponent<FeedbackDialogProps> = ({
                 progress={1.0 - autoClose.elapsedFraction}
               />
             )}
-            <Close />
+            <Close width={18} height={18} />
           </button>
         </>
       </Dialog>

packages/browser-sdk/src/feedback/ui/FeedbackForm.css

@@ -1,6 +1,7 @@
 .container {
   overflow-y: hidden;
   transition: max-height 400ms cubic-bezier(0.65, 0, 0.35, 1);
+  max-height: 999px;
 }
 
 .form {
@@ -33,21 +34,16 @@
   align-items: flex-start;
   gap: 10px;
   transition: opacity 400ms cubic-bezier(0.65, 0, 0.35, 1);
-
-  opacity: 0;
-  position: absolute;
-  top: 0;
-  left: 0;
 }
 
 .title {
   color: var(--reflag-feedback-dialog-color, #1e1f24);
-  font-size: 15px;
+  font-size: 14px;
   font-weight: 400;
   line-height: 115%;
   text-wrap: balance;
   max-width: calc(100% - 20px);
-  margin-bottom: 6px;
+  margin-bottom: 0px;
   line-height: 1.3;
 }
 
@@ -111,8 +107,7 @@
 .error {
   margin: 0;
   color: var(--reflag-feedback-dialog-error-color, #e53e3e);
-  font-size: 0.8125em;
-  font-weight: 500;
+  font-size: 13px;
 }
 
 .submitted {