Feedback

const attachmentId = await studio.uploads.screenshot({ uri: capture.uri });

await studio.feedback.submit({
  message: 'The chart overlaps the legend.',
  attachmentIds: [attachmentId],
});

const file = input.files?.[0]; // from <input type="file">
const attachmentId = await studio.uploads.screenshot({ file });

await studio.feedback.submit({
  message: 'The chart overlaps the legend.',
  attachmentIds: [attachmentId],
});

'use client';

import { useState } from 'react';
import { isStudioError } from 'panelui-studio';

import { studio } from '@/lib/studio';

export function FeedbackForm({ onSent }: { onSent?: () => void }) {
  const [status, setStatus] = useState<'idle' | 'sending' | 'sent'>('idle');
  const [error, setError] = useState<string | null>(null);

  async function send(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    const form = new FormData(event.currentTarget);
    const shot = form.get('screenshot');
    setStatus('sending');
    setError(null);
    try {
      const attachmentIds =
        shot instanceof File && shot.size > 0 ? [await studio.uploads.screenshot({ file: shot })] : [];
      await studio.feedback.submit({
        message: String(form.get('message')),
        screen: window.location.pathname,
        attachmentIds,
      });
      setStatus('sent');
      onSent?.();
    } catch (caught) {
      setStatus('idle');
      setError(isStudioError(caught) ? caught.message : "Couldn't send that. Check your connection.");
    }
  }

  if (status === 'sent') return <p>Thanks — we read every one.</p>;

  return (
    <form onSubmit={send}>
      <label htmlFor="feedback-message">What should we fix first?</label>
      <textarea id="feedback-message" name="message" required maxLength={5000} />
      <label htmlFor="feedback-screenshot">Screenshot (optional)</label>
      <input id="feedback-screenshot" name="screenshot" type="file" accept="image/png,image/jpeg,image/webp" />
      {error ? <p role="alert">{error}</p> : null}
      <button type="submit" disabled={status === 'sending'}>
        {status === 'sending' ? 'Sending…' : 'Send feedback'}
      </button>
    </form>
  );
}

import { useState, type RefObject } from 'react';
import { View } from 'react-native';
import { captureRef } from 'react-native-view-shot';
import { Button, Checkbox, Feedback, Rating, Text, useToast } from 'panelui-native';
import { isStudioError } from 'panelui-studio';

import { studio } from '@/lib/studio';

export function FeedbackButton({ screenRef }: { screenRef: RefObject<View | null> }) {
  const { toast } = useToast();
  const [open, setOpen] = useState(false);
  const [rating, setRating] = useState(0);
  const [attach, setAttach] = useState(true);
  const [error, setError] = useState<string | null>(null);

  async function send(message: string) {
    setError(null);
    try {
      const attachmentIds: string[] = [];
      if (attach) {
        const uri = await captureRef(screenRef, { format: 'png', result: 'tmpfile' });
        attachmentIds.push(await studio.uploads.screenshot({ uri }));
      }

      const { feedback } = await studio.feedback.submit({
        message,
        rating: rating || undefined,
        screen: '/workouts',
        attachmentIds,
      });

      setOpen(false);
      setRating(0);
      toast.show({ variant: 'success', label: `Sent as #${feedback.number}` });
    } catch (caught) {
      // Shown in the dialog: a toast would sit underneath it.
      setError(isStudioError(caught) ? caught.message : "Couldn't send that. Check your connection.");
    }
  }

  return (
    <>
      <Button onPress={() => setOpen(true)}>Send feedback</Button>
      <Feedback open={open} onOpenChange={setOpen}>
        <Feedback.Content>
          <Feedback.Panel>
            <Feedback.Title>What should we fix first?</Feedback.Title>
            <Feedback.Close />
            <Feedback.Field placeholder="Tell us what got in your way" />
            <View className="gap-4 pt-2">
              <Rating label="How was it?" value={rating} onValueChange={setRating} />
              <Checkbox label="Attach a screenshot" checked={attach} onCheckedChange={setAttach} />
              {error ? (
                <Text size="sm" className="text-destructive">
                  {error}
                </Text>
              ) : null}
            </View>
          </Feedback.Panel>
          <Feedback.Footer>
            <Feedback.Cancel />
            <Feedback.Submit onSubmit={send} />
          </Feedback.Footer>
        </Feedback.Content>
      </Feedback>
    </>
  );
}