Add team feature fake door

packages/files-ui/src/Components/Elements/TeamModal.tsx

@@ -0,0 +1,77 @@
+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 TeamModal = ({ onHide }: Props) => {
+  const classes = useStyles()
+
+  const onSignupTeamClick = useCallback(() => {
+    window.open(ROUTE_LINKS.TeamSignup, "_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>Teams</Trans>
+        </Typography>
+        <Typography variant="h4">
+          <Trans>A better sharing experience is coming soon.</Trans>
+        </Typography>
+        <div className={classes.buttonContainer}>
+          <Button
+            data-posthog="Sign-me-up"
+            className={classes.nextButton}
+            onClick={onSignupTeamClick}
+          >
+            <Trans>Sign me up!</Trans>
+          </Button>
+        </div>
+      </div>
+    </CustomModal>
+  )}
+
+export default TeamModal

packages/files-ui/src/Components/FilesRoutes.tsx

@@ -33,7 +33,8 @@ export const ROUTE_LINKS = {
     const adjustedRawCurrentPath = !rawCurrentPath ? "/" : rawCurrentPath
     return `/shared/${bucketId}${adjustedRawCurrentPath}`
   },
-  DiscordInvite: "https://discord.gg/zAEY37fNb2"
+  DiscordInvite: "https://discord.gg/zAEY37fNb2",
+  TeamSignup: "https://shrl.ink/cgQy"
 }
 
 export const SETTINGS_PATHS = ["profile", "plan", "security"] as const

packages/files-ui/src/Components/Layouts/AppHeader.tsx

@@ -18,7 +18,7 @@ import { useThresholdKey } from "../../Contexts/ThresholdKeyContext"
 import { CSFTheme } from "../../Themes/types"
 import { useUser } from "../../Contexts/UserContext"
 import { useFilesApi } from "../../Contexts/FilesApiContext"
-import { usePosthog } from "../../Contexts/PosthogContext"
+import TeamModal from "../Elements/TeamModal"
 
 const useStyles = makeStyles(
   ({ palette, animation, breakpoints, constants, zIndex }: CSFTheme) => {
@@ -149,7 +149,11 @@ const useStyles = makeStyles(
         margin: `0 ${constants.generalUnit * 2}px`,
 
         "& button" : {
-          height: constants.generalUnit * 4
+          height: constants.generalUnit * 4,
+
+          "&:not(:first-child)": {
+            marginLeft: constants.generalUnit * 2
+          }
         }
       }
     })
@@ -168,8 +172,8 @@ const AppHeader = ({ navOpen, setNavOpen }: IAppHeader) => {
   const { publicKey, isNewDevice, shouldInitializeAccount, logout } = useThresholdKey()
   const { getProfileTitle, removeUser } = useUser()
   const [searchActive, setSearchActive] = useState(false)
+  const [isTeamModalOpen, setIsTeamModalOpen] = useState(false)
   const { history } = useHistory()
-  const posthog = usePosthog()
 
   const signOut = useCallback(async () => {
     logout()
@@ -182,9 +186,12 @@ const AppHeader = ({ navOpen, setNavOpen }: IAppHeader) => {
   }, [logout, removeUser, history])
 
   const onReportBugClick = useCallback(() => {
-    posthog && posthog.capture("Report Bug")
     window.open(ROUTE_LINKS.DiscordInvite, "_blank")
-  }, [posthog])
+  }, [])
+
+  const onStartATeamClick = useCallback(() => {
+    setIsTeamModalOpen(true)
+  }, [])
 
   return (
     <header
@@ -214,13 +221,23 @@ const AppHeader = ({ navOpen, setNavOpen }: IAppHeader) => {
               </section>
               <section className={classes.buttonsSection}>
                 <Button
+                  data-posthog="Report-a-bug"
                   data-cy="send-feedback-nav"
                   variant="tertiary"
                   size="small"
                   onClick={onReportBugClick}
                 >
                   <Trans>Report a bug</Trans>
                 </Button>
+                <Button
+                  data-posthog="Start-a-team"
+                  data-cy="start-team-nav"
+                  variant="tertiary"
+                  size="small"
+                  onClick={onStartATeamClick}
+                >
+                  <Trans>Start a team</Trans>
+                </Button>
               </section>
               <section className={classes.accountControls}>
                 <MenuDropdown
@@ -285,6 +302,7 @@ const AppHeader = ({ navOpen, setNavOpen }: IAppHeader) => {
           )}
         </>
       )}
+      {isTeamModalOpen && <TeamModal onHide={() => setIsTeamModalOpen(false)}/>}
     </header>
   )
 }

packages/files-ui/src/Contexts/PosthogContext.tsx

@@ -173,14 +173,4 @@ function usePageTrack() {
   }, [pathname, hasOptedIn, posthogInitialized])
 }
 
-function usePosthog() {
-  const { hasOptedIn, posthogInitialized } = usePosthogContext()
-
-  if (posthogInitialized && hasOptedIn){
-    return posthog
-  }
-
-  return undefined
-}
-
-export { PosthogProvider, usePosthogContext, usePageTrack, usePosthog }
+export { PosthogProvider, usePosthogContext, usePageTrack }