Conditional demo mode

locale/defaultMessages.json

@@ -1675,6 +1675,10 @@
     "context": "button",
     "string": "Delete"
   },
+  "src_dot_demo": {
+    "context": "notification message after log in",
+    "string": "Just to let you know... You're in demo mode. You can play around with the dashboard but can't save changes."
+  },
   "src_dot_description": {
     "string": "Description"
   },

src/auth/AuthProvider.tsx

@@ -1,14 +1,14 @@
-import { maybe } from "@saleor/misc";
-import React from "react";
-import { useIntl } from "react-intl";
-
+import { DEMO_MODE } from "@saleor/config";
 import useNotifier from "@saleor/hooks/useNotifier";
+import { maybe } from "@saleor/misc";
 import {
   isSupported as isCredentialsManagementAPISupported,
   login as loginWithCredentialsManagementAPI,
   saveCredentials
 } from "@saleor/utils/credentialsManagement";
+import React from "react";
 import { MutationFunction, MutationResult } from "react-apollo";
+import { useIntl } from "react-intl";
 
 import { UserContext } from "./";
 import {
@@ -20,7 +20,12 @@ import { RefreshToken, RefreshTokenVariables } from "./types/RefreshToken";
 import { TokenAuth, TokenAuthVariables } from "./types/TokenAuth";
 import { User } from "./types/User";
 import { VerifyToken, VerifyTokenVariables } from "./types/VerifyToken";
-import { getAuthToken, removeAuthToken, setAuthToken } from "./utils";
+import {
+  displayDemoMessage,
+  getAuthToken,
+  removeAuthToken,
+  setAuthToken
+} from "./utils";
 
 interface AuthProviderOperationsProps {
   children: (props: {
@@ -37,13 +42,11 @@ const AuthProviderOperations: React.FC<AuthProviderOperationsProps> = ({
   const intl = useIntl();
   const notify = useNotifier();
 
-  const handleLogin = () =>
-    notify({
-      text: intl.formatMessage({
-        defaultMessage:
-          "Just to let you know... You're in demo mode. You can play around with the dashboard but can't save changes."
-      })
-    });
+  const handleLogin = () => {
+    if (DEMO_MODE) {
+      displayDemoMessage(intl, notify);
+    }
+  };
 
   return (
     <TypedTokenAuthMutation>
@@ -89,7 +92,7 @@ interface AuthProviderProps {
     MutationFunction<RefreshToken, RefreshTokenVariables>,
     MutationResult<RefreshToken>
   ];
-  onLogin: () => void;
+  onLogin?: () => void;
 }
 
 interface AuthProviderState {
@@ -153,7 +156,9 @@ class AuthProvider extends React.Component<
 
     tokenAuthFn({ variables: { email, password } }).then(result => {
       if (result && !result.data.tokenCreate.errors.length) {
-        onLogin();
+        if (!!onLogin) {
+          onLogin();
+        }
         saveCredentials(result.data.tokenCreate.user, password);
       }
     });

src/auth/components/LoginPage/LoginPage.tsx

@@ -4,6 +4,7 @@ import TextField from "@material-ui/core/TextField";
 import Typography from "@material-ui/core/Typography";
 import Form from "@saleor/components/Form";
 import { FormSpacer } from "@saleor/components/FormSpacer";
+import { DEMO_MODE } from "@saleor/config";
 import { commonMessages } from "@saleor/intl";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
@@ -53,14 +54,16 @@ const LoginCard: React.FC<LoginCardProps> = props => {
   const classes = useStyles(props);
   const intl = useIntl();
 
+  let initialFormData = { email: "", password: "" };
+  if (DEMO_MODE) {
+    initialFormData = {
+      email: "admin@example.com",
+      password: "admin"
+    };
+  }
+
   return (
-    <Form
-      initial={{
-        email: "admin@example.com",
-        password: "admin"
-      }}
-      onSubmit={onSubmit}
-    >
+    <Form initial={initialFormData} onSubmit={onSubmit}>
       {({ change: handleChange, data, submit: handleSubmit }) => (
         <>
           {error && (

src/auth/utils.ts

@@ -1,3 +1,7 @@
+import { UseNotifierResult } from "@saleor/hooks/useNotifier";
+import { commonMessages } from "@saleor/intl";
+import { IntlShape } from "react-intl";
+
 const TOKEN_STORAGE_KEY = "dashboardAuth";
 
 export const getAuthToken = () =>
@@ -13,3 +17,12 @@ export const removeAuthToken = () => {
   localStorage.removeItem(TOKEN_STORAGE_KEY);
   sessionStorage.removeItem(TOKEN_STORAGE_KEY);
 };
+
+export const displayDemoMessage = (
+  intl: IntlShape,
+  notify: UseNotifierResult
+) => {
+  notify({
+    text: intl.formatMessage(commonMessages.demo)
+  });
+};

src/config.ts

@@ -2,7 +2,7 @@ import packageInfo from "../package.json";
 import { SearchVariables } from "./hooks/makeSearch";
 import { ListSettings, ListViews, Pagination } from "./types";
 
-export const APP_MOUNT_URI = process.env.APP_MOUNT_URI || "/";
+export const APP_MOUNT_URI = process.env.APP_MOUNT_URI;
 export const API_URI = process.env.API_URI;
 
 export const DEFAULT_INITIAL_SEARCH_DATA: SearchVariables = {
@@ -90,3 +90,5 @@ export const defaultListSettings: AppListViewSettings = {
 };
 
 export const APP_VERSION = packageInfo.version;
+export const DEMO_MODE = process.env.DEMO_MODE === "true";
+export const GTM_ID = process.env.GTM_ID;

src/index.tsx

@@ -1,3 +1,5 @@
+import Navigator from "@saleor/components/Navigator";
+import useAppState from "@saleor/hooks/useAppState";
 import { defaultDataIdFromObject, InMemoryCache } from "apollo-cache-inmemory";
 import { ApolloClient } from "apollo-client";
 import { ApolloLink } from "apollo-link";
@@ -9,12 +11,10 @@ import React from "react";
 import { ApolloProvider } from "react-apollo";
 import { render } from "react-dom";
 import ErrorBoundary from "react-error-boundary";
+import TagManager from "react-gtm-module";
 import { useIntl } from "react-intl";
 import { BrowserRouter, Route, Switch } from "react-router-dom";
 
-import Navigator from "@saleor/components/Navigator";
-import useAppState from "@saleor/hooks/useAppState";
-import TagManager from "react-gtm-module";
 import AttributeSection from "./attributes";
 import { attributeSection } from "./attributes/urls";
 import Auth, { getAuthToken, removeAuthToken } from "./auth";

src/intl.ts

@@ -10,6 +10,11 @@ export const commonMessages = defineMessages({
   dashboard: {
     defaultMessage: "Dashboard"
   },
+  demo: {
+    defaultMessage:
+      "Just to let you know... You're in demo mode. You can play around with the dashboard but can't save changes.",
+    description: "notification message after log in"
+  },
   description: {
     defaultMessage: "Description"
   },