From aabf1d146d81e56aa05d89f12cfb6dfa1f28ff91 Mon Sep 17 00:00:00 2001
From: Gorbachev Egor <7gorbachevm@gmail.com>
Date: Mon, 8 Jan 2024 20:20:46 +0700
Subject: [PATCH] Support chat link

---
 .env                                          |  1 -
 src/screens/deck-form/deck-form.tsx           | 10 +++----
 .../deck-form/store/deck-form-store.test.ts   |  2 +-
 src/screens/deck-list/main-screen.tsx         |  7 ++---
 src/screens/folder-form/folder-form.tsx       | 10 +++----
 src/screens/folder-review/folder-preview.tsx  |  6 ++--
 .../share-deck/share-deck-settings.tsx        | 14 ++++-----
 src/screens/shared/links.ts                   |  4 +++
 src/screens/shared/screen.tsx                 |  2 +-
 .../user-settings/user-settings-main.tsx      | 30 ++++++++++++++-----
 .../settings-row.tsx => ui/card-row.tsx}      |  4 +--
 11 files changed, 53 insertions(+), 37 deletions(-)
 create mode 100644 src/screens/shared/links.ts
 rename src/{screens/user-settings/settings-row.tsx => ui/card-row.tsx} (85%)

diff --git a/.env b/.env
index aca37592..773f99c4 100644
--- a/.env
+++ b/.env
@@ -1,4 +1,3 @@
 VITE_API_URL=/api
-VITE_CHANNEL_LINK=
 VITE_BOT_APP_URL=
 
diff --git a/src/screens/deck-form/deck-form.tsx b/src/screens/deck-form/deck-form.tsx
index 5ae66223..2d9a6f47 100644
--- a/src/screens/deck-form/deck-form.tsx
+++ b/src/screens/deck-form/deck-form.tsx
@@ -10,7 +10,7 @@ import { useMount } from "../../lib/react/use-mount.ts";
 import { useBackButton } from "../../lib/telegram/use-back-button.tsx";
 import { useTelegramProgress } from "../../lib/telegram/use-telegram-progress.tsx";
 import { assert } from "../../lib/typescript/assert.ts";
-import { SettingsRow } from "../user-settings/settings-row.tsx";
+import { CardRow } from "../../ui/card-row.tsx";
 import { Button } from "../../ui/button.tsx";
 import { HintTransparent } from "../../ui/hint-transparent.tsx";
 import { RadioSwitcher } from "../../ui/radio-switcher.tsx";
@@ -90,23 +90,23 @@ export const DeckForm = observer(() => {
       </Label>
 
       {deckFormStore.form.cards.length > 0 && (
-        <SettingsRow
+        <CardRow
           onClick={() => {
             deckFormStore.goToCardList();
           }}
         >
           <span>{t("cards")}</span>
           <span>{deckFormStore.form.cards.length}</span>
-        </SettingsRow>
+        </CardRow>
       )}
 
-      <SettingsRow>
+      <CardRow>
         <span>{t("speaking_cards")}</span>
         <RadioSwitcher
           isOn={deckFormStore.isSpeakingCardEnabled}
           onToggle={deckFormStore.toggleIsSpeakingCardEnabled}
         />
-      </SettingsRow>
+      </CardRow>
       {deckFormStore.isSpeakingCardEnabled ? (
         <div
           className={css({
diff --git a/src/screens/deck-form/store/deck-form-store.test.ts b/src/screens/deck-form/store/deck-form-store.test.ts
index 4b89516a..7bdbc20e 100644
--- a/src/screens/deck-form/store/deck-form-store.test.ts
+++ b/src/screens/deck-form/store/deck-form-store.test.ts
@@ -38,7 +38,7 @@ const mapUpsertDeckRequestToResponse = (
         back: card.back,
       };
     }),
-  }
+  },
 });
 
 const mocks = vi.hoisted(() => {
diff --git a/src/screens/deck-list/main-screen.tsx b/src/screens/deck-list/main-screen.tsx
index 85ca2d8b..bb200a9e 100644
--- a/src/screens/deck-list/main-screen.tsx
+++ b/src/screens/deck-list/main-screen.tsx
@@ -11,12 +11,12 @@ import { screenStore } from "../../store/screen-store.ts";
 import { Button } from "../../ui/button.tsx";
 import { DeckLoading } from "./deck-loading.tsx";
 import WebApp from "@twa-dev/sdk";
-import { assert } from "../../lib/typescript/assert.ts";
 import { ListHeader } from "../../ui/list-header.tsx";
 import { range } from "../../lib/array/range.ts";
 import { reset } from "../../ui/reset.ts";
 import { ViewMoreDecksToggle } from "./view-more-decks-toggle.tsx";
 import { t } from "../../translations/t.ts";
+import { links } from "../shared/links.ts";
 
 export const MainScreen = observer(() => {
   useMount(() => {
@@ -181,10 +181,7 @@ export const MainScreen = observer(() => {
             <Button
               icon={"mdi-call-made"}
               onClick={() => {
-                const channelLink = import.meta.env.VITE_CHANNEL_LINK;
-                assert(channelLink, "Channel link env variable is empty");
-
-                WebApp.openTelegramLink(channelLink);
+                WebApp.openTelegramLink(links.botChannel);
               }}
             >
               {t("telegram_channel")}
diff --git a/src/screens/folder-form/folder-form.tsx b/src/screens/folder-form/folder-form.tsx
index 4aef018a..a05c5582 100644
--- a/src/screens/folder-form/folder-form.tsx
+++ b/src/screens/folder-form/folder-form.tsx
@@ -10,7 +10,7 @@ import { useTelegramProgress } from "../../lib/telegram/use-telegram-progress.ts
 import { useMount } from "../../lib/react/use-mount.ts";
 import { useMainButton } from "../../lib/telegram/use-main-button.tsx";
 import { assert } from "../../lib/typescript/assert.ts";
-import { SettingsRow } from "../user-settings/settings-row.tsx";
+import { CardRow } from "../../ui/card-row.tsx";
 import { reset } from "../../ui/reset.ts";
 import { css, cx } from "@emotion/css";
 import { theme } from "../../ui/theme.tsx";
@@ -57,7 +57,7 @@ export const FolderForm = observer(() => {
       <Label text={t("decks")} isPlain>
         {folderForm.decks.value.map((deck, i) => {
           return (
-            <SettingsRow key={i}>
+            <CardRow key={i}>
               <span>{deck.name}</span>
               <button
                 className={cx(reset.button, css({ padding: 8, fontSize: 16 }))}
@@ -73,7 +73,7 @@ export const FolderForm = observer(() => {
                   )}
                 />
               </button>
-            </SettingsRow>
+            </CardRow>
           );
         })}
       </Label>
@@ -85,7 +85,7 @@ export const FolderForm = observer(() => {
         ) : null}
         {folderStore.decksMineFiltered.map((deck) => {
           return (
-            <SettingsRow key={deck.id}>
+            <CardRow key={deck.id}>
               <span>{deck.name}</span>
               <button
                 className={cx(reset.button, css({ padding: 8, fontSize: 16 }))}
@@ -104,7 +104,7 @@ export const FolderForm = observer(() => {
                   )}
                 />
               </button>
-            </SettingsRow>
+            </CardRow>
           );
         })}
       </Label>
diff --git a/src/screens/folder-review/folder-preview.tsx b/src/screens/folder-review/folder-preview.tsx
index 68b1b8a6..39e13001 100644
--- a/src/screens/folder-review/folder-preview.tsx
+++ b/src/screens/folder-review/folder-preview.tsx
@@ -12,7 +12,7 @@ import { ButtonSideAligned } from "../../ui/button-side-aligned.tsx";
 import { useTelegramProgress } from "../../lib/telegram/use-telegram-progress.tsx";
 import { t } from "../../translations/t.ts";
 import { useReviewStore } from "../deck-review/store/review-store-context.tsx";
-import { SettingsRow } from "../user-settings/settings-row.tsx";
+import { CardRow } from "../../ui/card-row.tsx";
 import { ListHeader } from "../../ui/list-header.tsx";
 import { assert } from "../../lib/typescript/assert.ts";
 import { userStore } from "../../store/user-store.ts";
@@ -187,14 +187,14 @@ export const FolderPreview = observer(() => {
         <ListHeader text={t("decks")} />
         {folder.decks.map((deck, i) => {
           return (
-            <SettingsRow
+            <CardRow
               key={i}
               onClick={() => {
                 deckListStore.goDeckById(deck.id);
               }}
             >
               {deck.name}
-            </SettingsRow>
+            </CardRow>
           );
         })}
         {folder.cardsToReview.length === 0 && (
diff --git a/src/screens/share-deck/share-deck-settings.tsx b/src/screens/share-deck/share-deck-settings.tsx
index 28db7b9d..5dcdb841 100644
--- a/src/screens/share-deck/share-deck-settings.tsx
+++ b/src/screens/share-deck/share-deck-settings.tsx
@@ -4,7 +4,7 @@ import { screenStore } from "../../store/screen-store.ts";
 import { useMainButton } from "../../lib/telegram/use-main-button.tsx";
 import { t } from "../../translations/t.ts";
 import { useTelegramProgress } from "../../lib/telegram/use-telegram-progress.tsx";
-import { SettingsRow } from "../user-settings/settings-row.tsx";
+import { CardRow } from "../../ui/card-row.tsx";
 import { RadioSwitcher } from "../../ui/radio-switcher.tsx";
 import { HintTransparent } from "../../ui/hint-transparent.tsx";
 import { Label } from "../../ui/label.tsx";
@@ -36,25 +36,25 @@ export const ShareDeckSettings = observer(() => {
 
   return (
     <Screen title={t("share_deck_settings")}>
-      <SettingsRow>
+      <CardRow>
         <span>{t("share_one_time_access_link")}</span>
         <RadioSwitcher
           isOn={store.form.isOneTime.value}
           onToggle={store.form.isOneTime.toggle}
         />
-      </SettingsRow>
+      </CardRow>
       <HintTransparent>
         {t("share_one_time_access_link_description")}
       </HintTransparent>
       {store.form.isOneTime.value && (
         <>
-          <SettingsRow>
+          <CardRow>
             <span>{t("share_access_duration")}</span>
             <RadioSwitcher
               isOn={store.form.isAccessDuration.value}
               onToggle={store.form.isAccessDuration.toggle}
             />
-          </SettingsRow>
+          </CardRow>
         </>
       )}
       {store.form.isOneTime.value && store.form.isAccessDuration.value && (
@@ -64,13 +64,13 @@ export const ShareDeckSettings = observer(() => {
         </Label>
       )}
 
-      <SettingsRow
+      <CardRow
         onClick={() => {
           store.isDeckAccessesOpen.setTrue();
         }}
       >
         {t("share_one_time_links_usage")}
-      </SettingsRow>
+      </CardRow>
     </Screen>
   );
 });
diff --git a/src/screens/shared/links.ts b/src/screens/shared/links.ts
new file mode 100644
index 00000000..15bc0914
--- /dev/null
+++ b/src/screens/shared/links.ts
@@ -0,0 +1,4 @@
+export const links = {
+  botChannel: "https://t.me/memo_card_bot_channel",
+  supportChat: "https://t.me/memocard_support",
+};
diff --git a/src/screens/shared/screen.tsx b/src/screens/shared/screen.tsx
index dba1c2d2..be4e989a 100644
--- a/src/screens/shared/screen.tsx
+++ b/src/screens/shared/screen.tsx
@@ -21,7 +21,7 @@ export const Screen = observer((props: Props) => {
       })}
     >
       <div>
-        <h3 className={css({ textAlign: "center"})}>{title}</h3>
+        <h3 className={css({ textAlign: "center" })}>{title}</h3>
         {subtitle}
       </div>
       {children}
diff --git a/src/screens/user-settings/user-settings-main.tsx b/src/screens/user-settings/user-settings-main.tsx
index 65d8378b..f7c992cb 100644
--- a/src/screens/user-settings/user-settings-main.tsx
+++ b/src/screens/user-settings/user-settings-main.tsx
@@ -6,7 +6,7 @@ import { useMount } from "../../lib/react/use-mount.ts";
 import { generateTimeRange } from "./generate-time-range.tsx";
 import { useMainButton } from "../../lib/telegram/use-main-button.tsx";
 import { useTelegramProgress } from "../../lib/telegram/use-telegram-progress.tsx";
-import { SettingsRow } from "./settings-row.tsx";
+import { CardRow } from "../../ui/card-row.tsx";
 import { RadioSwitcher } from "../../ui/radio-switcher.tsx";
 import { theme } from "../../ui/theme.tsx";
 import { Select } from "../../ui/select.tsx";
@@ -16,6 +16,8 @@ import { screenStore } from "../../store/screen-store.ts";
 import { HintTransparent } from "../../ui/hint-transparent.tsx";
 import { t } from "../../translations/t.ts";
 import { Screen } from "../shared/screen.tsx";
+import WebApp from "@twa-dev/sdk";
+import { links } from "../shared/links.ts";
 
 export const timeRanges = generateTimeRange();
 
@@ -45,7 +47,7 @@ export const UserSettingsMain = observer(() => {
 
   return (
     <Screen title={t("settings")}>
-      <SettingsRow>
+      <CardRow>
         <span>{t("settings_review_notifications")}</span>
         <span
           className={css({
@@ -58,9 +60,9 @@ export const UserSettingsMain = observer(() => {
             onToggle={isRemindNotifyEnabled.toggle}
           />
         </span>
-      </SettingsRow>
+      </CardRow>
       {isRemindNotifyEnabled.value && (
-        <SettingsRow>
+        <CardRow>
           <span>{t("settings_time")}</span>
           <div className={css({ color: theme.linkColor })}>
             <Select
@@ -74,14 +76,14 @@ export const UserSettingsMain = observer(() => {
               }))}
             />
           </div>
-        </SettingsRow>
+        </CardRow>
       )}
 
       <HintTransparent>
         {t("settings_review_notifications_hint")}
       </HintTransparent>
 
-      <SettingsRow>
+      <CardRow>
         <span>{t("speaking_cards")}</span>
         <span
           className={css({
@@ -94,9 +96,23 @@ export const UserSettingsMain = observer(() => {
             onToggle={isSpeakingCardsEnabled.toggle}
           />
         </span>
-      </SettingsRow>
+      </CardRow>
 
       <HintTransparent>{t("card_speak_description")}</HintTransparent>
+
+      <CardRow
+        onClick={() => {
+          WebApp.openTelegramLink(links.supportChat);
+        }}
+      >
+        <span
+          className={css({
+            color: theme.linkColor,
+          })}
+        >
+          Contact support
+        </span>
+      </CardRow>
     </Screen>
   );
 });
diff --git a/src/screens/user-settings/settings-row.tsx b/src/ui/card-row.tsx
similarity index 85%
rename from src/screens/user-settings/settings-row.tsx
rename to src/ui/card-row.tsx
index fc03f2a4..4d294641 100644
--- a/src/screens/user-settings/settings-row.tsx
+++ b/src/ui/card-row.tsx
@@ -1,14 +1,14 @@
 import { observer } from "mobx-react-lite";
 import React, { ReactNode } from "react";
 import { css } from "@emotion/css";
-import { theme } from "../../ui/theme.tsx";
+import { theme } from "./theme.tsx";
 
 type Props = {
   children: ReactNode;
   onClick?: () => void;
 };
 
-export const SettingsRow = observer((props: Props) => {
+export const CardRow = observer((props: Props) => {
   return (
     <label
       onClick={props.onClick}