From 2b1e0b0281144f3da4167fdba56c022dfeeae08c Mon Sep 17 00:00:00 2001
From: Walter Galvao <walterbgneto@gmail.com>
Date: Wed, 29 Jan 2025 21:48:55 -0300
Subject: [PATCH] fix(web): digests form ux

---
 .../digest-base-fields/digest-base-fields.tsx | 46 ++++++++++++++-----
 .../digests/settings/team-metrics/page.tsx    |  2 +-
 .../[id]/digests/settings/team-wip/page.tsx   |  2 +-
 .../app/teams/[id]/digests/settings/types.ts  |  7 ++-
 4 files changed, 43 insertions(+), 14 deletions(-)

diff --git a/apps/web/src/app/teams/[id]/digests/settings/components/digest-base-fields/digest-base-fields.tsx b/apps/web/src/app/teams/[id]/digests/settings/components/digest-base-fields/digest-base-fields.tsx
index 33a3829..7358691 100644
--- a/apps/web/src/app/teams/[id]/digests/settings/components/digest-base-fields/digest-base-fields.tsx
+++ b/apps/web/src/app/teams/[id]/digests/settings/components/digest-base-fields/digest-base-fields.tsx
@@ -4,16 +4,17 @@ import {
   Stack,
   Title,
   Switch,
-  TextInput,
   Divider,
   Select,
   Box,
   InputLabel,
   Chip,
   Group,
+  Input,
+  Text,
 } from "@mantine/core";
 import { DigestFrequency } from "@sweetr/graphql-types/api";
-import { IconBrandSlack, IconClock, IconWorld } from "@tabler/icons-react";
+import { IconClock, IconInfoCircle, IconWorld } from "@tabler/icons-react";
 import { BoxSetting } from "../../../../../../../components/box-setting";
 import { SelectHour } from "../../../../../../../components/select-hour";
 import { SelectTimezone } from "../../../../../../../components/select-timezone/select-timezone";
@@ -51,14 +52,34 @@ export const DigestBaseFields = ({ form }: DigestBaseFieldsProps) => {
         </BoxSetting>
 
         {isEnabled && (
-          <TextInput
-            ref={channelRef}
-            label="Channel"
-            leftSection={<IconBrandSlack stroke={1} />}
-            placeholder="#team"
-            {...form.getInputProps("channel")}
-          />
+          <>
+            <Input.Wrapper>
+              <Input.Label required>Channel</Input.Label>
+              <Group align="top">
+                <Stack gap="5px" flex="1">
+                  <Input
+                    ref={channelRef}
+                    leftSection={<>#</>}
+                    flex="1"
+                    {...form.getInputProps("channel")}
+                  />
+                  {form.getInputProps("channel").error && (
+                    <Input.Error>
+                      {form.getInputProps("channel").error}
+                    </Input.Error>
+                  )}
+                </Stack>
+              </Group>
+            </Input.Wrapper>
+          </>
         )}
+        <Group gap={5}>
+          <IconInfoCircle size={16} stroke={1.5} />
+          <Text c="dimmed" size="xs">
+            Tip: Sweetr is only able to auto join public channels. You must
+            manually invite @Sweetr to private channels.
+          </Text>
+        </Group>
       </Stack>
 
       {isEnabled && (
@@ -69,7 +90,8 @@ export const DigestBaseFields = ({ form }: DigestBaseFieldsProps) => {
             <Title order={5}>Schedule</Title>
 
             <Select
-              label="DigestFrequency"
+              required
+              label="Frequency"
               data={[
                 { value: DigestFrequency.WEEKLY, label: "Every week" },
                 {
@@ -93,7 +115,7 @@ export const DigestBaseFields = ({ form }: DigestBaseFieldsProps) => {
               }}
             />
             <Box>
-              <InputLabel>Day of the week</InputLabel>
+              <InputLabel required>Day of the week</InputLabel>
               <Chip.Group
                 value={form.values.dayOfTheWeek}
                 onChange={(value) => {
@@ -134,11 +156,13 @@ export const DigestBaseFields = ({ form }: DigestBaseFieldsProps) => {
             </Box>
             <Group grow>
               <SelectHour
+                required
                 {...form.getInputProps("timeOfDay")}
                 label="Time"
                 leftSection={<IconClock size={16} stroke={1.5} />}
               />
               <SelectTimezone
+                required
                 {...form.getInputProps("timezone", { type: "input" })}
                 label="Timezone"
                 leftSection={<IconWorld size={16} stroke={1.5} />}
diff --git a/apps/web/src/app/teams/[id]/digests/settings/team-metrics/page.tsx b/apps/web/src/app/teams/[id]/digests/settings/team-metrics/page.tsx
index 2cfa990..d3df3e0 100644
--- a/apps/web/src/app/teams/[id]/digests/settings/team-metrics/page.tsx
+++ b/apps/web/src/app/teams/[id]/digests/settings/team-metrics/page.tsx
@@ -71,7 +71,7 @@ export const TeamMetricsDigestPage = () => {
   }, [digestQuery.isFetched]);
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  const isFormValid = useMemo(() => form.isValid(), [form.values]);
+  const isFormValid = useMemo(() => !form.validate().hasErrors, [form.values]);
 
   const handleSave: FormEventHandler = async (event) => {
     event.preventDefault();
diff --git a/apps/web/src/app/teams/[id]/digests/settings/team-wip/page.tsx b/apps/web/src/app/teams/[id]/digests/settings/team-wip/page.tsx
index c96bb97..f075dae 100644
--- a/apps/web/src/app/teams/[id]/digests/settings/team-wip/page.tsx
+++ b/apps/web/src/app/teams/[id]/digests/settings/team-wip/page.tsx
@@ -79,7 +79,7 @@ export const TeamWipDigestPage = () => {
   }, [digestQuery.isFetched]);
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  const isFormValid = useMemo(() => form.isValid(), [form.values]);
+  const isFormValid = useMemo(() => !form.validate().hasErrors, [form.values]);
 
   const handleSave: FormEventHandler = async (event) => {
     event.preventDefault();
diff --git a/apps/web/src/app/teams/[id]/digests/settings/types.ts b/apps/web/src/app/teams/[id]/digests/settings/types.ts
index 3ae4b42..08f02b2 100644
--- a/apps/web/src/app/teams/[id]/digests/settings/types.ts
+++ b/apps/web/src/app/teams/[id]/digests/settings/types.ts
@@ -6,7 +6,12 @@ import { z } from "zod";
 
 export const FormDigest = z.object({
   enabled: z.boolean(),
-  channel: z.string().min(1),
+  channel: z
+    .string()
+    .min(1, "Field is required")
+    .refine((val) => !val.startsWith("#"), {
+      message: "Channel should not start with #",
+    }),
   frequency: z.nativeEnum(DigestFrequency),
   dayOfTheWeek: z.array(z.nativeEnum(DayOfTheWeek)).min(1),
   timeOfDay: z.string().min(1),