feat: implement feedback form

src/app/_layout.tsx

@@ -197,6 +197,32 @@ function RootLayoutContent() {
             title: "Open-source licenses",
           }}
         />
+        <Stack.Screen
+          name="settings/feedback"
+          options={{
+            headerTransparent: Platform.OS === "ios" ? true : false,
+            title: "",
+            presentation:
+              Platform.OS === "ios"
+                ? isLiquidGlassAvailable() && osName !== "iPadOS"
+                  ? "formSheet"
+                  : "modal"
+                : "modal",
+            sheetAllowedDetents: [1],
+            sheetInitialDetentIndex: 0,
+            gestureEnabled: false,
+            contentStyle: {
+              backgroundColor: isLiquidGlassAvailable()
+                ? "transparent"
+                : tabBarBackgroundColor,
+            },
+            headerBlurEffect: isLiquidGlassAvailable()
+              ? undefined
+              : colorScheme === "dark"
+                ? "dark"
+                : "light",
+          }}
+        />
         <Stack.Screen
           name="settings/license"
           options={{

src/app/settings/feedback.tsx

@@ -0,0 +1,44 @@
+import { FeedbackForm } from "@/components/feedback-form";
+import { ThemedView } from "@/components/themed-view";
+import { useTheme } from "@/hooks/use-theme";
+import ArrowBackSymbol from "@expo/material-symbols/arrow_back.xml";
+import { isLiquidGlassAvailable } from "expo-glass-effect";
+import { useLingui } from "@lingui/react/macro";
+import { Stack, useRouter } from "expo-router";
+import { Platform, StyleSheet } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+
+export default function FeedbackScreen() {
+  const router = useRouter();
+  const { t } = useLingui();
+  const theme = useTheme();
+  return (
+    <>
+      <Stack.Header
+        style={{
+          backgroundColor:
+            Platform.OS === "ios" ? theme.transparent : theme.background,
+        }}
+      />
+      <Stack.Screen.Title>{t`Send feedback`}</Stack.Screen.Title>
+      <Stack.Toolbar placement="left">
+        <Stack.Toolbar.Button
+          icon={process.env.EXPO_OS === "ios" ? "xmark" : ArrowBackSymbol}
+          onPress={() => router.back()}
+        />
+      </Stack.Toolbar>
+      <ThemedView
+        style={styles.sheet}
+        type={isLiquidGlassAvailable() ? "transparent" : "background"}
+      >
+        <SafeAreaView edges={["bottom", "left", "right"]} style={styles.sheet}>
+          <FeedbackForm onClose={() => router.back()} />
+        </SafeAreaView>
+      </ThemedView>
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  sheet: { flex: 1 },
+});

src/app/settings/index.tsx

@@ -125,6 +125,12 @@ export default function SettingsScreen() {
         </Section>
 
         <Section title={t`About`}>
+          <SettingsRow
+            icon={{ android: "feedback", ios: "bubble.left.and.bubble.right" }}
+            label={t`Feedback`}
+            onPress={() => router.navigate("/settings/feedback")}
+          />
+          <Divider />
           <SettingsRow
             icon={{ android: "star", ios: "star" }}
             label={t`Review eduMFA`}

src/components/feedback-form.android.tsx

@@ -0,0 +1,176 @@
+import type { FeedbackFormProps } from "@/components/feedback-form.types";
+import { Spacing } from "@/constants/theme";
+import { useFeedbackForm } from "@/hooks/use-feedback-form";
+import CloseSymbol from "@expo/material-symbols/close.xml";
+import {
+  Button,
+  Host,
+  Icon,
+  IconButton,
+  LazyColumn,
+  OutlinedTextField,
+  Row,
+  SegmentedButton,
+  SingleChoiceSegmentedButtonRow,
+  Spacer,
+  Text,
+} from "@expo/ui/jetpack-compose";
+import {
+  fillMaxSize,
+  fillMaxWidth,
+  imePadding,
+  weight,
+} from "@expo/ui/jetpack-compose/modifiers";
+import { useLingui } from "@lingui/react/macro";
+import { StyleSheet } from "react-native";
+
+const FULL_WIDTH = [fillMaxWidth()];
+const textStyles = {
+  body: { typography: "bodyMedium" },
+  caption: { typography: "bodySmall" },
+  headline: { typography: "headlineSmall" },
+  label: { typography: "labelLarge" },
+  segmentedLabel: { typography: "labelSmall" },
+  successBody: { typography: "bodyLarge" },
+} as const;
+
+export function FeedbackForm({
+  onClose,
+  showCloseButton = false,
+}: FeedbackFormProps) {
+  const { t } = useLingui();
+  const form = useFeedbackForm();
+
+  return (
+    <Host style={styles.host} useViewportSizeMeasurement>
+      <LazyColumn
+        contentPadding={{
+          bottom: Spacing.xl,
+          end: Spacing.lg,
+          start: Spacing.lg,
+          top: Spacing.lg,
+        }}
+        horizontalAlignment="start"
+        modifiers={[fillMaxSize(), imePadding()]}
+        verticalArrangement={{ spacedBy: Spacing.sm }}
+      >
+        {form.submitted ? (
+          <>
+            <Text style={textStyles.headline}>
+              {t`Thank you for your feedback`}
+            </Text>
+            <Text style={textStyles.successBody}>
+              {t`Your feedback was submitted successfully.`}
+            </Text>
+            <Button modifiers={FULL_WIDTH} onClick={onClose}>
+              <Text>{t`Done`}</Text>
+            </Button>
+          </>
+        ) : (
+          <>
+            {showCloseButton ? (
+              <Row
+                horizontalAlignment="center"
+                modifiers={FULL_WIDTH}
+                verticalAlignment="center"
+              >
+                <Text style={textStyles.headline}>{t`Send feedback`}</Text>
+                <Spacer modifiers={[weight(1)]} />
+                <IconButton onClick={onClose}>
+                  <Icon
+                    contentDescription={t`Close`}
+                    size={24}
+                    source={CloseSymbol}
+                  />
+                </IconButton>
+              </Row>
+            ) : null}
+            <Text style={textStyles.body}>
+              {t`Tell us what worked well or what we can improve.`}
+            </Text>
+
+            <Text style={textStyles.label}>{t`Feedback type`}</Text>
+            <SingleChoiceSegmentedButtonRow modifiers={FULL_WIDTH}>
+              {form.feedbackTypes.map((option) => (
+                <SegmentedButton
+                  key={option.value}
+                  modifiers={[weight(1)]}
+                  onClick={() => form.setFeedbackType(option.value)}
+                  selected={option.value === form.feedbackType}
+                >
+                  <SegmentedButton.Label>
+                    <Text maxLines={1} style={textStyles.segmentedLabel}>
+                      {option.label}
+                    </Text>
+                  </SegmentedButton.Label>
+                </SegmentedButton>
+              ))}
+            </SingleChoiceSegmentedButtonRow>
+
+            <Text style={textStyles.caption}>
+              {t`Add your name and email if you would like us to contact you with follow-up questions or updates about your feedback.`}
+            </Text>
+            <OutlinedTextField
+              keyboardOptions={{ capitalization: "words", imeAction: "next" }}
+              modifiers={FULL_WIDTH}
+              onValueChange={form.setName}
+              singleLine
+            >
+              <OutlinedTextField.Label>
+                <Text>{t`Name (optional)`}</Text>
+              </OutlinedTextField.Label>
+            </OutlinedTextField>
+            <OutlinedTextField
+              isError={Boolean(form.emailError)}
+              keyboardOptions={{ keyboardType: "email", imeAction: "next" }}
+              modifiers={FULL_WIDTH}
+              onFocusChanged={(focused) => {
+                if (!focused) form.validateCurrentEmail();
+              }}
+              onValueChange={form.changeEmail}
+              singleLine
+            >
+              <OutlinedTextField.Label>
+                <Text>{t`Email (optional)`}</Text>
+              </OutlinedTextField.Label>
+              {form.emailError ? (
+                <OutlinedTextField.SupportingText>
+                  <Text>{form.emailError}</Text>
+                </OutlinedTextField.SupportingText>
+              ) : null}
+            </OutlinedTextField>
+            <OutlinedTextField
+              isError={Boolean(form.messageError || form.submissionError)}
+              maxLength={2000}
+              maxLines={4}
+              minLines={4}
+              modifiers={FULL_WIDTH}
+              onValueChange={form.changeMessage}
+            >
+              <OutlinedTextField.Label>
+                <Text>{t`What would you like us to know?`}</Text>
+              </OutlinedTextField.Label>
+              {form.messageError || form.submissionError ? (
+                <OutlinedTextField.SupportingText>
+                  <Text>{form.messageError ?? form.submissionError}</Text>
+                </OutlinedTextField.SupportingText>
+              ) : null}
+            </OutlinedTextField>
+            <Text style={textStyles.caption}>
+              {t`Your message and optional contact details will be sent to eduMFA through Sentry.`}
+            </Text>
+            <Button modifiers={FULL_WIDTH} onClick={form.submit}>
+              <Text>{t`Submit feedback`}</Text>
+            </Button>
+          </>
+        )}
+      </LazyColumn>
+    </Host>
+  );
+}
+
+const styles = StyleSheet.create({
+  host: {
+    flex: 1,
+  },
+});

src/components/feedback-form.d.ts

@@ -0,0 +1,5 @@
+import type { FeedbackFormProps } from "@/components/feedback-form.types";
+
+export declare function FeedbackForm(
+  props: FeedbackFormProps,
+): React.JSX.Element;