From 54feb609508b2da56851a7f795cf29b51f97eba4 Mon Sep 17 00:00:00 2001 From: dominik-zeglen Date: Mon, 25 Nov 2019 17:23:52 +0100 Subject: [PATCH] Add notification about navigator --- package-lock.json | 8 +++++-- package.json | 2 ++ src/components/Navigator/Navigator.tsx | 25 ++++++++++++++++++++++ src/components/Navigator/modes/index.ts | 8 +------ src/components/messages/MessageManager.tsx | 11 ++++++++-- src/components/messages/index.ts | 1 + src/config.ts | 3 +++ src/theme.ts | 8 +++++-- 8 files changed, 53 insertions(+), 13 deletions(-) diff --git a/package-lock.json b/package-lock.json index 3af4cf4fd..41c04c99a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3286,6 +3286,11 @@ "integrity": "sha512-YesPanU1+WCigC/Aj1Mga8UCOjHIfMNHZ3zzDsUY7lI8GlKnh/Kv2QwJOQ+jNQ36Ru7IfzSedlG14hppYaN13A==", "dev": true }, + "@types/semver-compare": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@types/semver-compare/-/semver-compare-1.0.1.tgz", + "integrity": "sha512-wx2LQVvKlEkhXp/HoKIZ/aSL+TvfJdKco8i0xJS3aR877mg4qBHzNT6+B5a61vewZHo79EdZavskGnRXEC2H6A==" + }, "@types/shallowequal": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/@types/shallowequal/-/shallowequal-1.1.1.tgz", @@ -18055,8 +18060,7 @@ "semver-compare": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/semver-compare/-/semver-compare-1.0.0.tgz", - "integrity": "sha1-De4hahyUGrN+nvsXiPavxf9VN/w=", - "dev": true + "integrity": "sha1-De4hahyUGrN+nvsXiPavxf9VN/w=" }, "send": { "version": "0.17.1", diff --git a/package.json b/package.json index 52c21d332..74788cf4c 100644 --- a/package.json +++ b/package.json @@ -63,6 +63,7 @@ "react-sortable-hoc": "^0.6.8", "react-sortable-tree": "^2.6.2", "react-svg": "^2.2.11", + "semver-compare": "^1.0.0", "slugify": "^1.3.4", "typescript": "^3.6.4", "url-join": "^4.0.1", @@ -98,6 +99,7 @@ "@types/react-sortable-hoc": "^0.6.5", "@types/react-sortable-tree": "^0.3.6", "@types/react-test-renderer": "^16.8.2", + "@types/semver-compare": "^1.0.1", "@types/storybook__addon-storyshots": "^3.4.9", "@types/storybook__react": "^4.0.2", "@types/url-join": "^0.8.3", diff --git a/src/components/Navigator/Navigator.tsx b/src/components/Navigator/Navigator.tsx index 2809851fd..3616b244c 100644 --- a/src/components/Navigator/Navigator.tsx +++ b/src/components/Navigator/Navigator.tsx @@ -3,7 +3,11 @@ import Downshift from "downshift"; import hotkeys from "hotkeys-js"; import React from "react"; import { useIntl } from "react-intl"; +import cmp from "semver-compare"; +import { APP_VERSION } from "@saleor/config"; +import useLocalStorage from "@saleor/hooks/useLocalStorage"; +import useNotifier from "@saleor/hooks/useNotifier"; import { getActions, getCatalog, @@ -20,6 +24,7 @@ import { QuickSearchAction } from "./types"; import useQuickSearch from "./useQuickSearch"; const navigatorHotkey = "ctrl+k, command+k"; +const navigatorNotificationStorageKey = "notifiedAboutNavigator"; function getItemOffset( actions: QuickSearchAction[], @@ -33,6 +38,11 @@ const Navigator: React.FC = () => { const input = React.useRef(null); const [query, mode, change, actions] = useQuickSearch(visible, input); const intl = useIntl(); + const notify = useNotifier(); + const [notifiedAboutNavigator, setNotifiedAboutNavigator] = useLocalStorage( + navigatorNotificationStorageKey, + false + ); React.useEffect(() => { hotkeys(navigatorHotkey, event => { @@ -40,6 +50,21 @@ const Navigator: React.FC = () => { setVisible(!visible); }); + if (cmp(APP_VERSION, "2.1.0") !== 1 && !notifiedAboutNavigator) { + notify({ + text: intl.formatMessage({ + defaultMessage: + "Our new feature to help you with your daily task. Run Navigator using Ctrl+K shortcut. (Cmd+K for Mac users)", + description: "navigator notification" + }), + title: intl.formatMessage({ + defaultMessage: "Navigator is here to help", + description: "navigator notification title" + }) + }); + setNotifiedAboutNavigator(true); + } + return () => hotkeys.unbind(navigatorHotkey); }, []); diff --git a/src/components/Navigator/modes/index.ts b/src/components/Navigator/modes/index.ts index 6acb95daf..4333883e9 100644 --- a/src/components/Navigator/modes/index.ts +++ b/src/components/Navigator/modes/index.ts @@ -31,13 +31,7 @@ function getModeActions( case "orders": return getOrdersModeActions(query, intl, cbs.navigate, queries.order); default: - return getDefaultModeActions( - query, - intl, - cbs.navigate, - queries.customers, - cbs.createOrder - ); + return getDefaultModeActions(query, intl, cbs.navigate, cbs.createOrder); } } diff --git a/src/components/messages/MessageManager.tsx b/src/components/messages/MessageManager.tsx index 11f4f659f..2ab9a38f4 100644 --- a/src/components/messages/MessageManager.tsx +++ b/src/components/messages/MessageManager.tsx @@ -1,6 +1,7 @@ import Button from "@material-ui/core/Button"; import IconButton from "@material-ui/core/IconButton"; import Snackbar from "@material-ui/core/Snackbar"; +import Typography from "@material-ui/core/Typography"; import CloseIcon from "@material-ui/icons/Close"; import React from "react"; @@ -15,7 +16,7 @@ interface MessageManagerState { } export class MessageManager extends React.Component<{}, MessageManagerState> { - state = { + state: MessageManagerState = { message: { text: "", key: "0", onUndo: undefined }, opened: false }; @@ -55,7 +56,7 @@ export class MessageManager extends React.Component<{}, MessageManagerState> { }; render() { - const { text, key, onUndo } = this.state.message; + const { title, text, key, onUndo } = this.state.message; return ( <> { }} message={ + {title && ( + + {title} + + )} {text} } + title={title} action={[ !!onUndo ? (