Add Demo Banner (#1416)

CHANGELOG.md

@@ -81,6 +81,7 @@ All notable, unreleased changes to this project will be documented in this file.
 - Add app dashboard extensions - #1292 by @jwm0
 - Introduce fulfillment creation - #1241 by @orzechdev
 - Introduce Click&Collect feature - #1268 by @kuchichan
+- Add Demo Banner - #1331 by @kamilpastuszka
 
 # 2.11.1
 

locale/defaultMessages.json

@@ -2079,6 +2079,18 @@
   "src_dot_components_dot_DeleteFilterTabDialog_dot_71479100": {
     "string": "Are you sure you want to delete {name} search tab?"
   },
+  "src_dot_components_dot_DemoBanner_dot_1647850230": {
+    "string": "Storefront"
+  },
+  "src_dot_components_dot_DemoBanner_dot_214739616": {
+    "string": "Play with <emphasis>GraphQL API</emphasis>"
+  },
+  "src_dot_components_dot_DemoBanner_dot_2367386033": {
+    "string": "API"
+  },
+  "src_dot_components_dot_DemoBanner_dot_4093572282": {
+    "string": "See <emphasis>DEMO STOREFRONT</emphasis>"
+  },
   "src_dot_components_dot_ErrorMessageCard_dot_2845142593": {
     "context": "header",
     "string": "Error"

package-lock.json

@@ -5607,6 +5607,30 @@
             "supports-color": "^7.1.0"
           }
         },
+        "dotenv": {
+          "version": "6.2.0",
+          "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-6.2.0.tgz",
+          "integrity": "sha512-HygQCKUBSFl8wKQZBSemMywRWcEDNidvNbjGVyZu3nbZ8qq9ubiPoGLMdRDpfSrpkkm9BXYFkpKxxFX38o/76w==",
+          "dev": true
+        },
+        "dotenv-defaults": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/dotenv-defaults/-/dotenv-defaults-1.1.1.tgz",
+          "integrity": "sha512-6fPRo9o/3MxKvmRZBD3oNFdxODdhJtIy1zcJeUSCs6HCy4tarUpd+G67UTU9tF6OWXeSPqsm4fPAB+2eY9Rt9Q==",
+          "dev": true,
+          "requires": {
+            "dotenv": "^6.2.0"
+          }
+        },
+        "dotenv-webpack": {
+          "version": "1.8.0",
+          "resolved": "https://registry.npmjs.org/dotenv-webpack/-/dotenv-webpack-1.8.0.tgz",
+          "integrity": "sha512-o8pq6NLBehtrqA8Jv8jFQNtG9nhRtVqmoD4yWbgUyoU3+9WBlPe+c2EAiaJok9RB28QvrWvdWLZGeTT5aATDMg==",
+          "dev": true,
+          "requires": {
+            "dotenv-defaults": "^1.0.2"
+          }
+        },
         "file-loader": {
           "version": "4.3.0",
           "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-4.3.0.tgz",
@@ -6558,6 +6582,15 @@
         "@types/react": "*"
       }
     },
+    "@types/react-responsive": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/react-responsive/-/react-responsive-3.0.3.tgz",
+      "integrity": "sha512-paTAvXIFgv/jG60d7WSV0+yWCjqJ05cG+KOV48SiqYGjGi9kFdss9QnVTTLnFJmbUwWnoM+VD1Iyay1JBy/HPQ==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/react-router": {
       "version": "5.1.13",
       "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.13.tgz",
@@ -7896,6 +7929,11 @@
         "vscode-uri": "1.0.6"
       },
       "dependencies": {
+        "dotenv": {
+          "version": "8.6.0",
+          "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.6.0.tgz",
+          "integrity": "sha512-IrPdXQsk2BbzvCBGBOTmmSH5SodmqZNt4ERAZDmW4CT+tL8VtvinqywuANaFu4bOMWki16nqf0e4oC0QIaDr/g=="
+        },
         "moment": {
           "version": "2.29.1",
           "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz",
@@ -11891,6 +11929,11 @@
         }
       }
     },
+    "css-mediaquery": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/css-mediaquery/-/css-mediaquery-0.1.2.tgz",
+      "integrity": "sha1-aiw3NEkoYYYxxUvTPO3TAdoYvqA="
+    },
     "css-select": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/css-select/-/css-select-2.1.0.tgz",
@@ -13026,26 +13069,10 @@
       }
     },
     "dotenv": {
-      "version": "8.2.0",
+      "version": "10.0.0",
-      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-10.0.0.tgz",
-      "integrity": "sha512-8sJ78ElpbDJBHNeBzUbUVLsqKdccaa/BXF1uPTw3GrvQTBgrQrtObr2mUrE38vzYd8cEv+m/JBfDLioYcfXoaw=="
+      "integrity": "sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q==",
-    },
+      "dev": true
-    "dotenv-defaults": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/dotenv-defaults/-/dotenv-defaults-1.1.1.tgz",
-      "integrity": "sha512-6fPRo9o/3MxKvmRZBD3oNFdxODdhJtIy1zcJeUSCs6HCy4tarUpd+G67UTU9tF6OWXeSPqsm4fPAB+2eY9Rt9Q==",
-      "dev": true,
-      "requires": {
-        "dotenv": "^6.2.0"
-      },
-      "dependencies": {
-        "dotenv": {
-          "version": "6.2.0",
-          "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-6.2.0.tgz",
-          "integrity": "sha512-HygQCKUBSFl8wKQZBSemMywRWcEDNidvNbjGVyZu3nbZ8qq9ubiPoGLMdRDpfSrpkkm9BXYFkpKxxFX38o/76w==",
-          "dev": true
-        }
-      }
     },
     "dotenv-expand": {
       "version": "5.1.0",
@@ -13053,15 +13080,6 @@
       "integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==",
       "dev": true
     },
-    "dotenv-webpack": {
-      "version": "1.8.0",
-      "resolved": "https://registry.npmjs.org/dotenv-webpack/-/dotenv-webpack-1.8.0.tgz",
-      "integrity": "sha512-o8pq6NLBehtrqA8Jv8jFQNtG9nhRtVqmoD4yWbgUyoU3+9WBlPe+c2EAiaJok9RB28QvrWvdWLZGeTT5aATDMg==",
-      "dev": true,
-      "requires": {
-        "dotenv-defaults": "^1.0.2"
-      }
-    },
     "downshift": {
       "version": "1.31.16",
       "resolved": "https://registry.npmjs.org/downshift/-/downshift-1.31.16.tgz",
@@ -19930,6 +19948,14 @@
         "core-js": "^3.0.4",
         "dotenv": "^8.0.0",
         "dotenv-expand": "^5.1.0"
+      },
+      "dependencies": {
+        "dotenv": {
+          "version": "8.6.0",
+          "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.6.0.tgz",
+          "integrity": "sha512-IrPdXQsk2BbzvCBGBOTmmSH5SodmqZNt4ERAZDmW4CT+tL8VtvinqywuANaFu4bOMWki16nqf0e4oC0QIaDr/g==",
+          "dev": true
+        }
       }
     },
     "left-pad": {
@@ -20978,6 +21004,14 @@
         }
       }
     },
+    "matchmediaquery": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/matchmediaquery/-/matchmediaquery-0.3.1.tgz",
+      "integrity": "sha512-Hlk20WQHRIm9EE9luN1kjRjYXAQToHOIAHPJn9buxBwuhfTHoKUcX+lXBbxc85DVQfXYbEQ4HcwQdd128E3qHQ==",
+      "requires": {
+        "css-mediaquery": "^0.1.2"
+      }
+    },
     "math-random": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/math-random/-/math-random-1.0.4.tgz",
@@ -24488,6 +24522,16 @@
         "react-popper": "^1.3.7"
       }
     },
+    "react-responsive": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/react-responsive/-/react-responsive-7.0.0.tgz",
+      "integrity": "sha512-RukaKD+UI/MIR+P8eUgVGURfiCafRvvcVnq41scT0eEQWHwDGliH/OAlrwIr1oyz8aKLGroZa+U8mTZV5ihPfA==",
+      "requires": {
+        "hyphenate-style-name": "^1.0.0",
+        "matchmediaquery": "^0.3.0",
+        "prop-types": "^15.6.1"
+      }
+    },
     "react-router": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz",

package.json

@@ -143,6 +143,7 @@
     "cross-env": "^6.0.3",
     "cypress": "^8.3.0",
     "cypress-file-upload": "^5.0.8",
+    "dotenv": "^10.0.0",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.5",
     "enzyme-to-json": "^3.6.1",

src/components/DemoBanner/DemoBanner.tsx

@@ -0,0 +1,60 @@
+import { useTheme } from "@material-ui/core/styles";
+import useMediaQuery from "@material-ui/core/useMediaQuery";
+import ExternalLink from "@saleor/components/ExternalLink";
+import React from "react";
+import { FormattedMessage } from "react-intl";
+
+import { SALEOR_GRAPHQL_URL, SALEOR_STOREFRONT_URL } from "./constants";
+import styles from "./styles";
+
+export const DemoBanner: React.FC = () => {
+  const theme = useTheme();
+  const isMdUp = useMediaQuery(theme.breakpoints.up("md"));
+  const classes = styles();
+
+  return (
+    <div className={classes.wrapper}>
+      <div className={classes.borderedWrapper}>
+        <div />
+        <div className={classes.linkList}>
+          <ExternalLink className={classes.link} href={SALEOR_STOREFRONT_URL}>
+            {isMdUp ? (
+              <FormattedMessage
+                defaultMessage="See <emphasis>DEMO STOREFRONT</emphasis>"
+                values={{
+                  emphasis: (children: any) => (
+                    <em className={classes.textEmphasis}>{children}</em>
+                  )
+                }}
+              />
+            ) : (
+              <div className={classes.textEmphasis}>
+                <FormattedMessage defaultMessage="Storefront" />
+              </div>
+            )}
+          </ExternalLink>
+          {isMdUp && <div className={classes.divider} />}
+          <ExternalLink className={classes.link} href={SALEOR_GRAPHQL_URL}>
+            {isMdUp ? (
+              <FormattedMessage
+                defaultMessage="Play with <emphasis>GraphQL API</emphasis>"
+                values={{
+                  emphasis: (children: any) => (
+                    <em className={classes.textEmphasis}>{children}</em>
+                  )
+                }}
+              />
+            ) : (
+              <div className={classes.textEmphasis}>
+                <FormattedMessage defaultMessage="API" />
+              </div>
+            )}
+          </ExternalLink>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+DemoBanner.displayName = "DemoBanner";
+export default DemoBanner;

src/components/DemoBanner/constants.ts

@@ -0,0 +1,6 @@
+export const greyDark = "#9D9FB1";
+export const textColor = "#3D3D3D";
+export const emphasisedTextBlue = "#036DFF";
+
+export const SALEOR_GRAPHQL_URL = "https://demo.saleor.io/graphql/";
+export const SALEOR_STOREFRONT_URL = "https://demo.saleor.io/";

src/components/DemoBanner/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./DemoBanner";
+export * from "./DemoBanner";

src/components/DemoBanner/styles.ts

@@ -0,0 +1,55 @@
+import { makeStyles } from "@saleor/macaw-ui";
+
+import { emphasisedTextBlue, greyDark, textColor } from "./constants";
+
+const useStyles = makeStyles(
+  theme => ({
+    wrapper: {
+      width: "100%",
+      backgroundColor: "inherit",
+      padding: `0 13px`,
+      fontSize: theme.spacing(1.5)
+    },
+    borderedWrapper: {
+      display: "flex",
+      flexDirection: "row",
+      justifyContent: "space-between",
+      alignItems: "center",
+      maxHeight: theme.spacing(7.5),
+      flex: "0 0 auto",
+      padding: theme.spacing(3, 0),
+      backgroundImage: `linear-gradient(to right,  ${greyDark} 13%, rgba(255, 255, 255, 0) 0%)`,
+      backgroundPosition: "bottom",
+      backgroundSize: theme.spacing(1.5, 0.125),
+      backgroundRepeat: "repeat-x"
+    },
+    logoWrapper: {
+      lineHeight: 0
+    },
+    linkList: {
+      display: "flex",
+      alignItems: "center"
+    },
+    link: {
+      display: "flex",
+      padding: theme.spacing(2),
+      color: textColor
+    },
+    textEmphasis: {
+      color: emphasisedTextBlue,
+      textTransform: "uppercase",
+      fontWeight: 600,
+      fontStyle: "normal",
+      paddingLeft: "5px"
+    },
+    divider: {
+      borderRight: `1px solid  ${greyDark}`,
+      height: theme.spacing(2)
+    }
+  }),
+  {
+    name: "DemoBanner"
+  }
+);
+
+export default useStyles;

src/index.tsx

@@ -1,3 +1,4 @@
+import DemoBanner from "@saleor/components/DemoBanner";
 import useAppState from "@saleor/hooks/useAppState";
 import { ThemeProvider } from "@saleor/macaw-ui";
 import { defaultDataIdFromObject, InMemoryCache } from "apollo-cache-inmemory";
@@ -39,7 +40,7 @@ import { LocaleProvider } from "./components/Locale";
 import MessageManagerProvider from "./components/messages";
 import { ShopProvider } from "./components/Shop";
 import { WindowTitle } from "./components/WindowTitle";
-import { API_URI, APP_MOUNT_URI, GTM_ID } from "./config";
+import { API_URI, APP_MOUNT_URI, DEMO_MODE, GTM_ID } from "./config";
 import ConfigurationSection, { createConfigurationMenu } from "./configuration";
 import AppStateProvider from "./containers/AppState";
 import BackgroundTasksProvider from "./containers/BackgroundTasks";
@@ -170,6 +171,7 @@ const Routes: React.FC = () => {
   return (
     <>
       <WindowTitle title={intl.formatMessage(commonMessages.dashboard)} />
+      {DEMO_MODE && <DemoBanner />}
       {homePageLoaded ? (
         <AppLayout>
           <ErrorBoundary