From 4a105990210ee7c3e6173bf7c86e7423bcadbc9c Mon Sep 17 00:00:00 2001
From: Ash Keel <ash@nebula.cafe>
Date: Mon, 10 Jan 2022 17:57:32 +0100
Subject: [PATCH] Add alerts (missing variations)

---
 frontend/src/locale/en/translation.json   |  11 +
 frontend/src/ui/App.tsx                   |   2 +
 frontend/src/ui/components/MultiInput.tsx |  13 +-
 frontend/src/ui/pages/ChatAlerts.tsx      | 286 ++++++++++++++++++++++
 modules/twitch/modules.alerts.go          |   2 +-
 5 files changed, 309 insertions(+), 5 deletions(-)
 create mode 100644 frontend/src/ui/pages/ChatAlerts.tsx

diff --git a/frontend/src/locale/en/translation.json b/frontend/src/locale/en/translation.json
index 4eab82c..db61600 100644
--- a/frontend/src/locale/en/translation.json
+++ b/frontend/src/locale/en/translation.json
@@ -150,6 +150,17 @@
       "no-pwd-note": " If the database has no password (for example, it was recently changed from having one to none), leave the field empty.",
       "password": "Password",
       "submit": "Authenticate"
+    },
+    "alerts": {
+      "title": "Chat alerts",
+      "desc": "Send chat messages when your viewers follow, subscribe and other events",
+      "follow-enable": "Enable new follow message",
+      "messages": "Messages",
+      "msg-info": "If multiple messages are present, one will be picked at random",
+      "subscription-enable": "Enable subscription message",
+      "gift_sub-enable": "Enable gifted subscription message",
+      "raid-enable": "Enable raid message",
+      "cheer-enable": "Enable cheering message"
     }
   },
   "form-actions": {
diff --git a/frontend/src/ui/App.tsx b/frontend/src/ui/App.tsx
index d28aac3..d106063 100644
--- a/frontend/src/ui/App.tsx
+++ b/frontend/src/ui/App.tsx
@@ -29,6 +29,7 @@ import TwitchSettingsPage from './pages/TwitchSettings';
 import TwitchBotCommandsPage from './pages/BotCommands';
 import TwitchBotTimersPage from './pages/BotTimers';
 import AuthDialog from './pages/AuthDialog';
+import ChatAlertsPage from './pages/ChatAlerts';
 
 const LoadingDiv = styled('div', {
   display: 'flex',
@@ -188,6 +189,7 @@ export default function App(): JSX.Element {
               path="/twitch/bot/timers"
               element={<TwitchBotTimersPage />}
             />
+            <Route path="/twitch/bot/alerts" element={<ChatAlertsPage />} />
           </Routes>
         </PageWrapper>
       </PageContent>
diff --git a/frontend/src/ui/components/MultiInput.tsx b/frontend/src/ui/components/MultiInput.tsx
index 46f8865..7c1e9e1 100644
--- a/frontend/src/ui/components/MultiInput.tsx
+++ b/frontend/src/ui/components/MultiInput.tsx
@@ -3,19 +3,21 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button, FlexRow, Textarea } from '../theme';
 
-export interface MessageArrayProps {
+export interface MultiInputProps {
   placeholder?: string;
   value: string[];
   required?: boolean;
+  disabled?: boolean;
   onChange: (value: string[]) => void;
 }
 
-function MessageArray({
+function MultiInput({
   value,
   placeholder,
   onChange,
   required,
-}: MessageArrayProps) {
+  disabled,
+}: MultiInputProps) {
   const { t } = useTranslation();
 
   return (
@@ -27,6 +29,7 @@ function MessageArray({
         >
           <FlexRow border="form" css={{ flex: 1, alignItems: 'stretch' }}>
             <Textarea
+              disabled={disabled}
               border="none"
               required={required}
               placeholder={placeholder}
@@ -50,6 +53,7 @@ function MessageArray({
             </Textarea>
             {value.length > 1 && (
               <Button
+                disabled={disabled}
                 type="button"
                 variation="danger"
                 styling="form"
@@ -71,6 +75,7 @@ function MessageArray({
       ))}
       <FlexRow align="left">
         <Button
+          disabled={disabled}
           size="small"
           styling="link"
           type="button"
@@ -86,4 +91,4 @@ function MessageArray({
   );
 }
 
-export default React.memo(MessageArray);
+export default React.memo(MultiInput);
diff --git a/frontend/src/ui/pages/ChatAlerts.tsx b/frontend/src/ui/pages/ChatAlerts.tsx
new file mode 100644
index 0000000..6d15b7e
--- /dev/null
+++ b/frontend/src/ui/pages/ChatAlerts.tsx
@@ -0,0 +1,286 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useDispatch } from 'react-redux';
+import { CheckIcon } from '@radix-ui/react-icons';
+import { useModule, useStatus } from '../../lib/react-utils';
+import { modules } from '../../store/api/reducer';
+import MultiInput from '../components/MultiInput';
+import {
+  Checkbox,
+  CheckboxIndicator,
+  Field,
+  FlexRow,
+  Label,
+  PageContainer,
+  PageHeader,
+  PageTitle,
+  TabButton,
+  TabContainer,
+  TabContent,
+  TabList,
+  TextBlock,
+} from '../theme';
+
+export default function ChatAlertsPage(): React.ReactElement {
+  const { t } = useTranslation();
+  const dispatch = useDispatch();
+  const [alerts, setAlerts] = useModule(modules.twitchBotAlerts);
+
+  return (
+    <PageContainer>
+      <form
+        onSubmit={(ev) => {
+          dispatch(setAlerts(alerts));
+          ev.preventDefault();
+        }}
+      >
+        <PageHeader>
+          <PageTitle>{t('pages.alerts.title')}</PageTitle>
+          <TextBlock>{t('pages.alerts.desc')}</TextBlock>
+        </PageHeader>
+        <TabContainer defaultValue="follow">
+          <TabList>
+            <TabButton value="follow">New follow</TabButton>
+            <TabButton value="sub">Subscription</TabButton>
+            <TabButton value="gift">Gift sub</TabButton>
+            <TabButton value="raid">Raid</TabButton>
+            <TabButton value="cheer">Cheer</TabButton>
+          </TabList>
+          <TabContent value="follow">
+            <Field size="fullWidth">
+              <FlexRow spacing={1} align="left">
+                <Checkbox
+                  checked={alerts?.follow?.enabled ?? false}
+                  onCheckedChange={(ev) =>
+                    dispatch(
+                      setAlerts({
+                        ...alerts,
+                        follow: {
+                          ...alerts.follow,
+                          enabled: !!ev,
+                        },
+                      }),
+                    )
+                  }
+                  id="follow-enabled"
+                >
+                  <CheckboxIndicator>
+                    {alerts?.follow?.enabled && <CheckIcon />}
+                  </CheckboxIndicator>
+                </Checkbox>
+
+                <Label htmlFor="follow-enabled">
+                  {t('pages.alerts.follow-enable')}
+                </Label>
+              </FlexRow>
+            </Field>
+            <Field size="fullWidth">
+              <Label>{t('pages.alerts.messages')}</Label>
+              <small>{t('pages.alerts.msg-info')}</small>
+              <MultiInput
+                value={alerts?.follow?.messages ?? ['']}
+                disabled={!alerts?.follow?.enabled ?? true}
+                required={alerts?.follow?.enabled ?? false}
+                onChange={(messages) => {
+                  dispatch(
+                    setAlerts({
+                      ...alerts,
+                      follow: { ...alerts.follow, messages },
+                    }),
+                  );
+                }}
+              />
+            </Field>
+          </TabContent>
+          <TabContent value="sub">
+            <Field size="fullWidth">
+              <FlexRow spacing={1} align="left">
+                <Checkbox
+                  checked={alerts?.subscription?.enabled ?? false}
+                  onCheckedChange={(ev) =>
+                    dispatch(
+                      setAlerts({
+                        ...alerts,
+                        subscription: {
+                          ...alerts.subscription,
+                          enabled: !!ev,
+                        },
+                      }),
+                    )
+                  }
+                  id="subscription-enabled"
+                >
+                  <CheckboxIndicator>
+                    {alerts?.subscription?.enabled && <CheckIcon />}
+                  </CheckboxIndicator>
+                </Checkbox>
+
+                <Label htmlFor="subscription-enabled">
+                  {t('pages.alerts.subscription-enable')}
+                </Label>
+              </FlexRow>
+            </Field>
+            <Field size="fullWidth">
+              <Label>{t('pages.alerts.messages')}</Label>
+              <small>{t('pages.alerts.msg-info')}</small>
+              <MultiInput
+                value={alerts?.subscription?.messages ?? ['']}
+                disabled={!alerts?.subscription?.enabled ?? true}
+                required={alerts?.subscription?.enabled ?? false}
+                onChange={(messages) => {
+                  dispatch(
+                    setAlerts({
+                      ...alerts,
+                      subscription: { ...alerts.subscription, messages },
+                    }),
+                  );
+                }}
+              />
+            </Field>
+          </TabContent>
+
+          <TabContent value="gift">
+            <Field size="fullWidth">
+              <FlexRow spacing={1} align="left">
+                <Checkbox
+                  checked={alerts?.gift_sub?.enabled ?? false}
+                  onCheckedChange={(ev) =>
+                    dispatch(
+                      setAlerts({
+                        ...alerts,
+                        gift_sub: {
+                          ...alerts.gift_sub,
+                          enabled: !!ev,
+                        },
+                      }),
+                    )
+                  }
+                  id="gift_sub-enabled"
+                >
+                  <CheckboxIndicator>
+                    {alerts?.gift_sub?.enabled && <CheckIcon />}
+                  </CheckboxIndicator>
+                </Checkbox>
+
+                <Label htmlFor="gift_sub-enabled">
+                  {t('pages.alerts.gift_sub-enable')}
+                </Label>
+              </FlexRow>
+            </Field>
+            <Field size="fullWidth">
+              <Label>{t('pages.alerts.messages')}</Label>
+              <small>{t('pages.alerts.msg-info')}</small>
+              <MultiInput
+                value={alerts?.gift_sub?.messages ?? ['']}
+                disabled={!alerts?.gift_sub?.enabled ?? true}
+                required={alerts?.gift_sub?.enabled ?? false}
+                onChange={(messages) => {
+                  dispatch(
+                    setAlerts({
+                      ...alerts,
+                      gift_sub: { ...alerts.gift_sub, messages },
+                    }),
+                  );
+                }}
+              />
+            </Field>
+          </TabContent>
+
+          <TabContent value="raid">
+            <Field size="fullWidth">
+              <FlexRow spacing={1} align="left">
+                <Checkbox
+                  checked={alerts?.raid?.enabled ?? false}
+                  onCheckedChange={(ev) =>
+                    dispatch(
+                      setAlerts({
+                        ...alerts,
+                        raid: {
+                          ...alerts.raid,
+                          enabled: !!ev,
+                        },
+                      }),
+                    )
+                  }
+                  id="raid-enabled"
+                >
+                  <CheckboxIndicator>
+                    {alerts?.raid?.enabled && <CheckIcon />}
+                  </CheckboxIndicator>
+                </Checkbox>
+
+                <Label htmlFor="raid-enabled">
+                  {t('pages.alerts.raid-enable')}
+                </Label>
+              </FlexRow>
+            </Field>
+            <Field size="fullWidth">
+              <Label>{t('pages.alerts.messages')}</Label>
+              <small>{t('pages.alerts.msg-info')}</small>
+              <MultiInput
+                value={alerts?.raid?.messages ?? ['']}
+                disabled={!alerts?.raid?.enabled ?? true}
+                required={alerts?.raid?.enabled ?? false}
+                onChange={(messages) => {
+                  dispatch(
+                    setAlerts({
+                      ...alerts,
+                      raid: { ...alerts.raid, messages },
+                    }),
+                  );
+                }}
+              />
+            </Field>
+          </TabContent>
+
+          <TabContent value="cheer">
+            <Field size="fullWidth">
+              <FlexRow spacing={1} align="left">
+                <Checkbox
+                  checked={alerts?.cheer?.enabled ?? false}
+                  onCheckedChange={(ev) =>
+                    dispatch(
+                      setAlerts({
+                        ...alerts,
+                        cheer: {
+                          ...alerts.cheer,
+                          enabled: !!ev,
+                        },
+                      }),
+                    )
+                  }
+                  id="raid-enabled"
+                >
+                  <CheckboxIndicator>
+                    {alerts?.cheer?.enabled && <CheckIcon />}
+                  </CheckboxIndicator>
+                </Checkbox>
+
+                <Label htmlFor="cheer-enabled">
+                  {t('pages.alerts.cheer-enable')}
+                </Label>
+              </FlexRow>
+            </Field>
+            <Field size="fullWidth">
+              <Label>{t('pages.alerts.messages')}</Label>
+              <small>{t('pages.alerts.msg-info')}</small>
+              <MultiInput
+                value={alerts?.cheer?.messages ?? ['']}
+                disabled={!alerts?.cheer?.enabled ?? true}
+                required={alerts?.cheer?.enabled ?? false}
+                onChange={(messages) => {
+                  dispatch(
+                    setAlerts({
+                      ...alerts,
+                      cheer: { ...alerts.cheer, messages },
+                    }),
+                  );
+                }}
+              />
+            </Field>
+          </TabContent>
+        </TabContainer>
+      </form>
+    </PageContainer>
+  );
+}
diff --git a/modules/twitch/modules.alerts.go b/modules/twitch/modules.alerts.go
index 6fccd6a..f3b4adf 100644
--- a/modules/twitch/modules.alerts.go
+++ b/modules/twitch/modules.alerts.go
@@ -120,7 +120,7 @@ func SetupAlerts(bot *Bot) *BotAlertsModule {
 				if err != nil {
 					bot.logger.WithError(err).Debug("error reloading timer config")
 				} else {
-					bot.logger.Info("reloaded timer config")
+					bot.logger.Info("reloaded alert config")
 				}
 				mod.compileTemplates()
 			}