Access to the subscription whitelist button (#1959)

* join beta * lingui extract * Apply suggestions from code review * lingui extract * switch to form * lingui extract * Update packages/files-ui/src/Components/Elements/BetaModal.tsx * lingui extract * Update packages/files-ui/src/Components/FilesRoutes.tsx Co-authored-by: Tanmoy Basak Anjan <tanmoy3399@gmail.com> Co-authored-by: GitHub Actions <actions@github.com> Co-authored-by: Tanmoy Basak Anjan <tanmoy3399@gmail.com> Co-authored-by: Michael Yankelev <12774278+FSM1@users.noreply.github.com>
ChainSafe · Feb 24, 2022 · dbe1ade · dbe1ade
1 parent 288f56c
commit dbe1ade
Show file tree

Hide file tree

Showing 8 changed files with 142 additions and 1 deletion.
diff --git a/packages/files-ui/src/Components/Elements/BetaModal.tsx b/packages/files-ui/src/Components/Elements/BetaModal.tsx
@@ -0,0 +1,80 @@
+import { Button, Typography } from "@chainsafe/common-components"
+import { createStyles, makeStyles } from "@chainsafe/common-theme"
+import { Trans } from "@lingui/macro"
+import React, { useCallback } from "react"
+import { CSFTheme } from "../../Themes/types"
+import { ROUTE_LINKS } from "../FilesRoutes"
+import CustomModal from "./CustomModal"
+
+const useStyles = makeStyles(
+  ({ constants }: CSFTheme) => {
+    return createStyles({
+      root: {
+        padding: `${constants.generalUnit * 6}px ${constants.generalUnit * 4}px`,
+        flexDirection: "column",
+        display: "flex",
+        alignItems: "center"
+      },
+      title: {
+        marginBottom: constants.generalUnit * 3
+      },
+      modalInner: {
+        maxWidth: "600px !important"
+      },
+      buttonContainer: {
+        width: "100%"
+      },
+      nextButton: {
+        margin: "auto",
+        marginTop: constants.generalUnit * 3
+      }
+    })
+  })
+
+interface Props {
+  onHide: () => void
+}
+
+const BetaModal = ({ onHide }: Props) => {
+  const classes = useStyles()
+
+  const onFormdButtonClick = useCallback(() => {
+    window.open(ROUTE_LINKS.DiscordInvite, "_blank")
+    onHide()
+  }, [onHide])
+
+  return (
+    <CustomModal
+      injectedClass={{ inner: classes.modalInner }}
+      active={true}
+      closePosition="right"
+      maxWidth="sm"
+      onClose={onHide}
+      mobileStickyBottom={false}
+    >
+      <div className={classes.root}>
+        <Typography
+          variant="h2"
+          className={classes.title}
+        >
+          <Trans>Need more storage?</Trans>
+        </Typography>
+        <Typography variant="h4">
+          <Trans>
+            Join our new limited-access subscription plans to upgrade to a plan with more storage.
+          </Trans>
+        </Typography>
+        <div className={classes.buttonContainer}>
+          <Button
+            data-posthog="Subscription-whitelist-form"
+            className={classes.nextButton}
+            onClick={onFormdButtonClick}
+          >
+            <Trans>Request access!</Trans>
+          </Button>
+        </div>
+      </div>
+    </CustomModal>
+  )}
+
+export default BetaModal
diff --git a/packages/files-ui/src/Components/FilesRoutes.tsx b/packages/files-ui/src/Components/FilesRoutes.tsx
@@ -43,7 +43,8 @@ export const ROUTE_LINKS = {
     const adjustedRawCurrentPath = !rawCurrentPath ? "/" : rawCurrentPath
     return `/shared/${bucketId}${adjustedRawCurrentPath}`
   },
-  DiscordInvite: "https://discord.gg/zAEY37fNb2"
+  DiscordInvite: "https://discord.gg/zAEY37fNb2",
+  SubscriptionWhitelistForm: "https://chainsafe.typeform.com/to/unZ0veao"
 }
 
 export const permissionPath = (permission: NonceResponsePermission) => permission === "read" ? "read" : "edit"

diff --git a/packages/files-ui/src/Components/Layouts/AppHeader.tsx b/packages/files-ui/src/Components/Layouts/AppHeader.tsx
@@ -8,6 +8,7 @@ import { Trans } from "@lingui/macro"
 import { useThresholdKey } from "../../Contexts/ThresholdKeyContext"
 import { CSFTheme } from "../../Themes/types"
 import { useFilesApi } from "../../Contexts/FilesApiContext"
+import BetaModal from "../Elements/BetaModal"
 import NotificationsDropdown from "../Elements/Notifications/NotificationsDropdown"
 
 const useStyles = makeStyles(
@@ -143,11 +144,16 @@ const AppHeader = ({ navOpen, setNavOpen }: IAppHeader) => {
   const { isLoggedIn, secured } = useFilesApi()
   const { publicKey, isNewDevice, shouldInitializeAccount } = useThresholdKey()
   const [searchActive, setSearchActive] = useState(false)
+  const [isBetaModalOpen, setIsBetaModalOpen] = useState(false)
 
   const onReportBugClick = useCallback(() => {
     window.open(ROUTE_LINKS.DiscordInvite, "_blank")
   }, [])
 
+  const onJoinBetaClick = useCallback(() => {
+    setIsBetaModalOpen(true)
+  }, [])
+
   return (
     <header
       className={clsx(classes.root, {
@@ -184,6 +190,14 @@ const AppHeader = ({ navOpen, setNavOpen }: IAppHeader) => {
                 >
                   <Trans>Report a bug</Trans>
                 </Button>
+                <Button
+                  data-posthog="Join-beta"
+                  variant="tertiary"
+                  size="small"
+                  onClick={onJoinBetaClick}
+                >
+                  <Trans>Need more storage?</Trans>
+                </Button>
               </section>
               <section>
                 <NotificationsDropdown />
@@ -234,6 +248,7 @@ const AppHeader = ({ navOpen, setNavOpen }: IAppHeader) => {
           }
         </>
       )}
+      {isBetaModalOpen && <BetaModal onHide={() => setIsBetaModalOpen(false)}/>}
     </header>
   )
 }

diff --git a/packages/files-ui/src/locales/de/messages.po b/packages/files-ui/src/locales/de/messages.po
@@ -481,6 +481,9 @@ msgstr ""
 msgid "I’m done saving my backup secret phrase"
 msgstr "Ich bin fertig mit dem Speichern meines Sixherungsgeheimsatzes"
 
+msgid "Join our new limited-access subscription plans to upgrade to a plan with more storage."
+msgstr ""
+
 msgid "Keep original files"
 msgstr ""
 
@@ -538,6 +541,9 @@ msgstr "Meine Dateien"
 msgid "Name"
 msgstr "Name"
 
+msgid "Need more storage?"
+msgstr ""
+
 msgid "New folder"
 msgstr "Neuer Ordner"
 
@@ -742,6 +748,9 @@ msgstr "Datei melden"
 msgid "Report a bug"
 msgstr "Fehler melden"
 
+msgid "Request access!"
+msgstr ""
+
 msgid "Requested from"
 msgstr "Angefordert von"
 

diff --git a/packages/files-ui/src/locales/en/messages.po b/packages/files-ui/src/locales/en/messages.po
@@ -484,6 +484,9 @@ msgstr "Invoice outstanding"
 msgid "I’m done saving my backup secret phrase"
 msgstr "I’m done saving my backup secret phrase"
 
+msgid "Join our new limited-access subscription plans to upgrade to a plan with more storage."
+msgstr "Join our new limited-access subscription plans to upgrade to a plan with more storage."
+
 msgid "Keep original files"
 msgstr "Keep original files"
 
@@ -541,6 +544,9 @@ msgstr "My Files"
 msgid "Name"
 msgstr "Name"
 
+msgid "Need more storage?"
+msgstr "Need more storage?"
+
 msgid "New folder"
 msgstr "New folder"
 
@@ -745,6 +751,9 @@ msgstr "Report a File"
 msgid "Report a bug"
 msgstr "Report a bug"
 
+msgid "Request access!"
+msgstr "Request access!"
+
 msgid "Requested from"
 msgstr "Requested from"
 

diff --git a/packages/files-ui/src/locales/es/messages.po b/packages/files-ui/src/locales/es/messages.po
@@ -485,6 +485,9 @@ msgstr ""
 msgid "I’m done saving my backup secret phrase"
 msgstr ""
 
+msgid "Join our new limited-access subscription plans to upgrade to a plan with more storage."
+msgstr ""
+
 msgid "Keep original files"
 msgstr ""
 
@@ -542,6 +545,9 @@ msgstr "Mis Archivos"
 msgid "Name"
 msgstr "Nombre"
 
+msgid "Need more storage?"
+msgstr ""
+
 msgid "New folder"
 msgstr "Nuevo Folder"
 
@@ -746,6 +752,9 @@ msgstr ""
 msgid "Report a bug"
 msgstr ""
 
+msgid "Request access!"
+msgstr ""
+
 msgid "Requested from"
 msgstr "Solicitado a"
 

diff --git a/packages/files-ui/src/locales/fr/messages.po b/packages/files-ui/src/locales/fr/messages.po
@@ -485,6 +485,9 @@ msgstr "Facture non réglée"
 msgid "I’m done saving my backup secret phrase"
 msgstr "Phrase de sauvegarde secrète enregistrée"
 
+msgid "Join our new limited-access subscription plans to upgrade to a plan with more storage."
+msgstr ""
+
 msgid "Keep original files"
 msgstr "Conserver les fichiers originaux"
 
@@ -542,6 +545,9 @@ msgstr "Mes Fichiers"
 msgid "Name"
 msgstr "Nom"
 
+msgid "Need more storage?"
+msgstr ""
+
 msgid "New folder"
 msgstr "Nouveau dossier"
 
@@ -746,6 +752,9 @@ msgstr "Signaler un fichier"
 msgid "Report a bug"
 msgstr "Signaler une erreur"
 
+msgid "Request access!"
+msgstr ""
+
 msgid "Requested from"
 msgstr "Envoyé par"
 

diff --git a/packages/files-ui/src/locales/no/messages.po b/packages/files-ui/src/locales/no/messages.po
@@ -481,6 +481,9 @@ msgstr ""
 msgid "I’m done saving my backup secret phrase"
 msgstr ""
 
+msgid "Join our new limited-access subscription plans to upgrade to a plan with more storage."
+msgstr ""
+
 msgid "Keep original files"
 msgstr ""
 
@@ -538,6 +541,9 @@ msgstr "Mine filer"
 msgid "Name"
 msgstr "Navn"
 
+msgid "Need more storage?"
+msgstr ""
+
 msgid "New folder"
 msgstr "Ny mappe"
 
@@ -742,6 +748,9 @@ msgstr ""
 msgid "Report a bug"
 msgstr ""
 
+msgid "Request access!"
+msgstr ""
+
 msgid "Requested from"
 msgstr "Forespurt fra"