Skill 33 · Launchdarkly Flag Qualitative Feedback Setup

Subchapter 33.3

Popover Feedback

Size

10 KB

Lines

142

Nearby

Source

references/PopoverFeedback.tsx

TypeScript142 lines10 KB

1import { useState } from 'react';
2import type { LDClient } from "launchdarkly-js-client-sdk";
3import { sendFeedback, type LDFeedbackSentiment } from './sendFeedback';
4
5const ThumbsUpIcon = () => (
6  <svg width="20" height="20" viewBox=

PopoverFeedback.tsx on GitHub

"0 0 20 20"

fill

=

"none"

xmlns

=

"http://www.w3.org/2000/svg"

>

</svg>

);

const ThumbsDownIcon = () => (

</svg>

);

const HappyFaceIcon = () => (

</g>

</svg>

);

const NeutralFaceIcon = () => (

</g>

</svg>

);

const FrownyFaceIcon = () => (

</g>

</svg>

);

const SpeechBubbleIcon = () => (

</svg>

);

type SentimentOption = { value: LDFeedbackSentiment; label: string; Icon: React.FC };

const THUMBS_OPTIONS: SentimentOption[] = [

{ value: "positive", label: "Thumbs up", Icon: ThumbsUpIcon },

{ value: "negative", label: "Thumbs down", Icon: ThumbsDownIcon },

];

const SMILEY_OPTIONS: SentimentOption[] = [

{ value: "positive", label: "Happy face", Icon: HappyFaceIcon },

{ value: "neutral", label: "Neutral face", Icon: NeutralFaceIcon },

{ value: "negative", label: "Frowny face", Icon: FrownyFaceIcon },

];

export function PopoverFeedback({

flagKey,

prompt,

icons,

ldClient,

}: {

flagKey: string;

prompt: string;

icons: "thumbs" | "smileys" | "none";

ldClient: LDClient;

}) {

const [isOpen, setIsOpen] = useState(false);

const [feedback, setFeedback] = useState("");

const [sentiment, setSentiment] = useState<LDFeedbackSentiment | undefined>(undefined);

const [submitted, setSubmitted] = useState(false);

const sentimentOptions = icons === "thumbs" ? THUMBS_OPTIONS : icons === "smileys" ? SMILEY_OPTIONS : [];

const handleSubmit = () => {

sendFeedback(ldClient, flagKey, feedback, sentiment, prompt);

setIsOpen(false);

setFeedback("");

setSentiment(undefined);

setSubmitted(true);

};

if (submitted) {

return <span>Thanks for your feedback!</span>;

}

return (

<button

onClick={() => setIsOpen(!isOpen)}

style={{ display: "flex", alignItems: "center", gap: "0.375rem", background: "none", border: "none", cursor: "pointer" }}

>

Give feedback

</button>

{isOpen && (

<textarea

name="feedback"

value={feedback}

onChange={(e) => setFeedback(e.target.value)}

placeholder={prompt}

rows={3}

style={{ width: "100%", padding: "0.5rem", marginBottom: "0.5rem", boxSizing: "border-box", border: "1px solid #ccc", borderRadius: "0.25rem", fontFamily: "sans-serif" }}

/>

{sentimentOptions.length > 0 && (

{sentimentOptions.map(({ value, label, Icon }) => (

<button

key={value}

onClick={() => setSentiment(sentiment === value ? undefined : value)}

aria-label={label}

style={{ cursor: "pointer", background: sentiment === value ? "#eee" : "none", border: "none", borderRadius: "0.25rem", padding: "0.25rem 0.5rem" }}

>

</button>

))}

</div>

)}

Send

</button>

</div>

)}

</div>

);

}

// Usage examples:

// <PopoverFeedback flagKey="my-flag" prompt="How do you feel?" icons="thumbs" ldClient={ldClient} />

// <PopoverFeedback flagKey="my-flag" prompt="How do you feel?" icons="smileys" ldClient={ldClient} />

// <PopoverFeedback flagKey="my-flag" prompt="Any feedback?" icons="none" ldClient={ldClient} />