diff --git a/packages/storage-ui/src/Components/Modules/FilesList/FilesList.tsx b/packages/storage-ui/src/Components/Modules/FilesList/FilesList.tsx index 246891c669..c65cabda08 100644 --- a/packages/storage-ui/src/Components/Modules/FilesList/FilesList.tsx +++ b/packages/storage-ui/src/Components/Modules/FilesList/FilesList.tsx @@ -47,6 +47,7 @@ import { CSSTheme } from "../../../Themes/types" import MimeMatcher from "../../../Utils/MimeMatcher" import { useLanguageContext } from "../../../Contexts/LanguageContext" import { useFileBrowser } from "../../../Contexts/FileBrowserContext" +import SurveyBanner from "../SurveyBanner" interface IStyleProps { themeKey: string @@ -293,7 +294,8 @@ const FilesList = () => { showUploadsInTable, allowDropUpload, itemOperations, - moduleRootPath + moduleRootPath, + withSurvey } = useFileBrowser() const classes = useStyles({ themeKey }) const [editing, setEditing] = useState() @@ -303,6 +305,7 @@ const FilesList = () => { const [, setPreviewFileIndex] = useState() const { selectedLocale } = useLanguageContext() const { redirect } = useHistory() + const [isSurveyBannerVisible, setIsSurveyBannerVisible] = useState(true) const items: FileSystemItemType[] = useMemo(() => { let temp = [] @@ -357,6 +360,10 @@ const FilesList = () => { } } + const onHideSurveyBanner = useCallback(() => { + setIsSurveyBannerVisible(false) + }, [setIsSurveyBannerVisible]) + // Selection logic const handleSelectCid = useCallback( (cid: string) => { @@ -672,7 +679,10 @@ const FilesList = () => { )} - + { withSurvey && isSurveyBannerVisible + ? + : + }
{selectedCids.length > 0 && ( <> diff --git a/packages/storage-ui/src/Components/Modules/SurveyBanner.tsx b/packages/storage-ui/src/Components/Modules/SurveyBanner.tsx new file mode 100644 index 0000000000..bb4530d34e --- /dev/null +++ b/packages/storage-ui/src/Components/Modules/SurveyBanner.tsx @@ -0,0 +1,99 @@ +import { useLocalStorage } from "@chainsafe/browser-storage-hooks" +import { CrossIcon, Typography } from "@chainsafe/common-components" +import { createStyles, makeStyles } from "@chainsafe/common-theme" +import { Trans } from "@lingui/macro" +import React, { useCallback } from "react" +import { CSSTheme } from "../../Themes/types" +import { ROUTE_LINKS } from "../StorageRoutes" + +const SURVEY_VERSION = 1 +export const DISMISSED_SURVEY_KEY = `css.dismissedSurveyBannerV${SURVEY_VERSION}` + +const useStyles = makeStyles( + ({ constants, palette }: CSSTheme) => { + return createStyles({ + root: { + backgroundColor: palette.additional["gray"][8], + padding: constants.generalUnit, + paddingLeft: constants.generalUnit * 2, + marginTop: constants.generalUnit, + borderRadius: 2, + display: "flex" + }, + banner: { + color: constants.surveyBanner.color, + fontWeight: 600, + paddingRight: constants.generalUnit + }, + link: { + marginLeft: constants.generalUnit * 2, + color: constants.surveyBanner.color, + cursor: "pointer", + outline: "none", + textDecoration: "underline" + }, + crossIconButton: { + cursor: "pointer", + + "& span": { + display: "flex", + alignContent: "center", + justifyContent: "center", + height: "100%", + fontSize: 12, + marginRight: constants.generalUnit + }, + "& svg": { + fill: constants.surveyBanner.color + } + }, + spacer: { + flex: 1 + } + }) + }) + +interface Props { + onHide: () => void +} + +const SurveyBanner = ({ onHide }: Props) => { + const classes = useStyles() + const { localStorageSet } = useLocalStorage() + + const onClose = useCallback(() => { + onHide() + localStorageSet(DISMISSED_SURVEY_KEY, "true") + }, [localStorageSet, onHide]) + + const onOpen = useCallback(() => { + onClose() + window.open(ROUTE_LINKS.UserSurvey, "_blank") + }, [onClose]) + + return ( +
+ + + Are we on the right track? Let us know in less than 1 minute. + + + Continue + + +
+
+ +
+
+ )} + +export default SurveyBanner diff --git a/packages/storage-ui/src/Components/Pages/BucketPage.tsx b/packages/storage-ui/src/Components/Pages/BucketPage.tsx index c2736f3079..0d4e1cc6de 100644 --- a/packages/storage-ui/src/Components/Pages/BucketPage.tsx +++ b/packages/storage-ui/src/Components/Pages/BucketPage.tsx @@ -11,6 +11,8 @@ import { ROUTE_LINKS } from "../../Components/StorageRoutes" import { useStorageApi } from "../../Contexts/StorageApiContext" import { FileBrowserContext } from "../../Contexts/FileBrowserContext" import { parseFileContentResponse } from "../../Utils/Helpers" +import { useLocalStorage } from "@chainsafe/browser-storage-hooks" +import { DISMISSED_SURVEY_KEY } from "../Modules/SurveyBanner" const BucketPage: React.FC = () => { const { storageBuckets, uploadFiles, uploadsInProgress } = useStorage() @@ -19,12 +21,22 @@ const BucketPage: React.FC = () => { const [loadingCurrentPath, setLoadingCurrentPath] = useState(false) const [pathContents, setPathContents] = useState([]) const { redirect } = useHistory() - + const { localStorageGet, localStorageSet } = useLocalStorage() + const showSurvey = localStorageGet(DISMISSED_SURVEY_KEY) === "false" const { pathname } = useLocation() + const bucketId = useMemo(() => pathname.split("/")[2] , [pathname]) + useEffect(() => { + const dismissedFlag = localStorageGet(DISMISSED_SURVEY_KEY) + + if (dismissedFlag === undefined || dismissedFlag === null) { + localStorageSet(DISMISSED_SURVEY_KEY, "false") + } + }, [localStorageGet, localStorageSet]) + const currentPath = useMemo(() => { return extractFileBrowserPathFromURL(pathname, ROUTE_LINKS.Bucket(bucketId, "/")) }, [pathname, bucketId]) @@ -206,7 +218,8 @@ const BucketPage: React.FC = () => { heading: bucket?.name, controls: true, allowDropUpload: true, - itemOperations + itemOperations, + withSurvey: showSurvey }}> diff --git a/packages/storage-ui/src/Components/StorageRoutes.tsx b/packages/storage-ui/src/Components/StorageRoutes.tsx index 48f15106ca..9f31af0d45 100644 --- a/packages/storage-ui/src/Components/StorageRoutes.tsx +++ b/packages/storage-ui/src/Components/StorageRoutes.tsx @@ -16,7 +16,7 @@ export const ROUTE_LINKS = { Buckets: "/buckets", SettingsRoot: "/settings", Settings: (path: SettingsPath) => `/settings/${path}`, - + UserSurvey: "https://blocksurvey.io/survey/1K4bjDmqwtyAsehm1r4KbsdzRRDVyRCDoe/1541a8c4-275a-4e22-9547-570e94c5a55f", PrivacyPolicy: "https://files.chainsafe.io/privacy-policy", Terms: "https://files.chainsafe.io/terms-of-service", ChainSafe: "https://chainsafe.io/", diff --git a/packages/storage-ui/src/locales/en/messages.po b/packages/storage-ui/src/locales/en/messages.po index ac0c898cb2..3183f00c88 100644 --- a/packages/storage-ui/src/locales/en/messages.po +++ b/packages/storage-ui/src/locales/en/messages.po @@ -31,6 +31,9 @@ msgstr "Add more files" msgid "Api Keys" msgstr "Api Keys" +msgid "Are we on the right track? Let us know in less than 1 minute." +msgstr "Are we on the right track? Let us know in less than 1 minute." + msgid "Bucket name" msgstr "Bucket name"