gatsby-theme-q3 3.1.5 → 3.2.3

package/lib/components/useSiteMetaData.js

@@ -9,19 +9,20 @@ var _lodash = require("lodash");
 
 var _gatsby = require("gatsby");
 
-var _default = () => (0, _lodash.get)((0, _gatsby.useStaticQuery)((0, _gatsby.graphql)`
-      query {
-        site {
-          siteMetadata {
-            appDirectory
-            brand
-            description
-            favicon
-            logo
-            title
+var _useRunTime = _interopRequireDefault(require("gatsby-theme-q3-mui/src/components/useRunTime"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = () => (0, _lodash.merge)((0, _lodash.get)((0, _gatsby.useStaticQuery)((0, _gatsby.graphql)`
+        query {
+          site {
+            siteMetadata {
+              appDirectory
+              description
+              title
+            }
           }
         }
-      }
-    `), 'site.siteMetadata', {});
+      `), 'site.siteMetadata', {}), (0, _useRunTime.default)());
 
 exports.default = _default;

package/lib/components/withPublicTemplate.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _PublicTemplate = _interopRequireDefault(require("./PublicTemplate"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const withPublicTemplate = Component => props => /*#__PURE__*/_react.default.createElement(_PublicTemplate.default, props, /*#__PURE__*/_react.default.createElement(Component, props));
+
+var _default = withPublicTemplate;
+exports.default = _default;

package/lib/components/withSuccessOp.js

@@ -41,7 +41,7 @@ const withSuccessOp = (Component, msg) => {
       component: _gatsby.Link,
       to: "/login",
       variant: "contained",
-      color: "primary"
+      color: "secondary"
     }, t('labels:login'))) : /*#__PURE__*/_react.default.createElement(Component, _extends({}, props, {
       onSuccess: (0, _utils.toOp)(pathname)
     }));

package/lib/pages/login.js

@@ -27,9 +27,11 @@ var _FormBox = _interopRequireDefault(require("../components/FormBox"));
 
 var _withAuthenticate = _interopRequireDefault(require("../components/withAuthenticate"));
 
+var _withPublicTemplate = _interopRequireDefault(require("../components/withPublicTemplate"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _default = (0, _withAuthenticate.default)(({
+const Login = (0, _withPublicTemplate.default)((0, _withAuthenticate.default)(({
   authenticate
 }) => {
   const {
@@ -64,10 +66,11 @@ var _default = (0, _withAuthenticate.default)(({
       to: "/reverify"
     }, t('labels:reverifyLink')))),
     renderTop: /*#__PURE__*/_react.default.createElement(_Typography.default, {
-      variant: "h1",
+      component: "h1",
+      variant: "h2",
       gutterBottom: true
     }, t('titles:login'))
   });
-});
-
+}));
+var _default = Login;
 exports.default = _default;

package/lib/pages/password-change.js

@@ -25,6 +25,8 @@ var _FormBox = _interopRequireDefault(require("../components/FormBox"));
 
 var _withSuccessOp = _interopRequireDefault(require("../components/withSuccessOp"));
 
+var _withPublicTemplate = _interopRequireDefault(require("../components/withPublicTemplate"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const PasswordChange = ({
@@ -65,7 +67,6 @@ PasswordChange.propTypes = {
     search: _propTypes.default.string
   }).isRequired
 };
-
-var _default = (0, _withSuccessOp.default)(PasswordChange, 'passwordChangeNotice');
-
+const PasswordChangeWithTemplate = (0, _withPublicTemplate.default)((0, _withSuccessOp.default)(PasswordChange, 'passwordChangeNotice'));
+var _default = PasswordChangeWithTemplate;
 exports.default = _default;

package/lib/pages/password-reset.js

@@ -19,6 +19,8 @@ var _FormBoxContent = _interopRequireDefault(require("../components/FormBoxConte
 
 var _withSuccessOp = _interopRequireDefault(require("../components/withSuccessOp"));
 
+var _withPublicTemplate = _interopRequireDefault(require("../components/withPublicTemplate"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const PasswordReset = ({
@@ -43,7 +45,6 @@ const PasswordReset = ({
 PasswordReset.propTypes = {
   onSuccess: _propTypes.default.func.isRequired
 };
-
-var _default = (0, _withSuccessOp.default)(PasswordReset, 'passwordResetNotice');
-
+const PasswordResetWithTemplate = (0, _withPublicTemplate.default)((0, _withSuccessOp.default)(PasswordReset, 'passwordResetNotice'));
+var _default = PasswordResetWithTemplate;
 exports.default = _default;

package/lib/pages/reverify.js

@@ -27,6 +27,8 @@ var _FormBoxNotice = _interopRequireDefault(require("../components/FormBoxNotice
 
 var _utils = require("../components/utils");
 
+var _withPublicTemplate = _interopRequireDefault(require("../components/withPublicTemplate"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const Reverify = ({
@@ -45,7 +47,7 @@ const Reverify = ({
     component: _gatsby.Link,
     to: "/reverify",
     variant: "contained",
-    color: "primary"
+    color: "secondary"
   }, t('labels:tryAgain')));
   return /*#__PURE__*/_react.default.createElement(_FormBox.default, {
     renderBottom: /*#__PURE__*/_react.default.createElement(_builders.Form, {
@@ -71,5 +73,6 @@ Reverify.propTypes = {
     pathname: _propTypes.default.string
   }).isRequired
 };
-var _default = Reverify;
+const ReverifyWithTemplate = (0, _withPublicTemplate.default)(Reverify);
+var _default = ReverifyWithTemplate;
 exports.default = _default;

package/lib/pages/verify.js

@@ -25,9 +25,11 @@ var _FormBox = _interopRequireDefault(require("../components/FormBox"));
 
 var _withAuthenticate = _interopRequireDefault(require("../components/withAuthenticate"));
 
+var _withPublicTemplate = _interopRequireDefault(require("../components/withPublicTemplate"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _default = (0, _withAuthenticate.default)(({
+const Verify = (0, _withPublicTemplate.default)((0, _withAuthenticate.default)(({
   authenticate,
   ...props
 }) => {
@@ -70,6 +72,6 @@ var _default = (0, _withAuthenticate.default)(({
       description: "verify"
     })
   });
-});
-
+}));
+var _default = Verify;
 exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-theme-q3",
-  "version": "3.1.5",
+  "version": "3.2.3",
   "main": "index.js",
   "license": "MIT",
   "peerDependencies": {
@@ -23,24 +23,24 @@
     "gatsby-image": "^3.11.0",
     "gatsby-plugin-canonical-urls": "^4.2.0",
     "gatsby-plugin-force-trailing-slashes": "^1.0.5",
-    "gatsby-plugin-manifest": "^4.2.0",
     "gatsby-plugin-material-ui": "^3.0.1",
     "gatsby-plugin-netlify": "^3.14.0",
     "gatsby-plugin-robots-txt": "^1.6.14",
     "gatsby-plugin-sharp": "^4.2.0",
     "gatsby-plugin-sitemap": "^5.2.0",
-    "gatsby-source-contentful": "^7.0.0",
-    "gatsby-theme-q3-mui": "^3.1.5",
+    "gatsby-theme-q3-mui": "^3.2.3",
     "gatsby-transformer-sharp": "^4.2.0",
     "lodash": "^4.17.20",
     "process": "^0.11.10",
     "prop-types": "^15.7.2",
-    "q3-ui-locale": "^3.1.5",
+    "q3-ui-helpers": "^3.2.0",
+    "q3-ui-locale": "^3.2.1",
     "query-string": "^7.0.1",
+    "react-helmet": "^6.1.0",
     "react-share": "^4.3.1",
     "slugify": "^1.6.3",
     "transform-loader": "^0.2.4",
     "yarn": "^1.22.17"
   },
-  "gitHead": "abefd5cfba5c173f7d1df2393657ba25ebbb415f"
+  "gitHead": "d430a77040909c76b680e920a3f2cc7fd3264215"
 }

package/src/components/FormBoxContent.jsx

@@ -8,7 +8,7 @@ const FormBoxContent = ({ title, description }) => {
 
   return (
     <>
-      <Typography variant="h1" gutterBottom>
+      <Typography component="h1" variant="h2" gutterBottom>
         {t(`titles:${title}`)}
       </Typography>
       <Typography gutterBottom>

package/src/components/PageWrapper.jsx

@@ -2,23 +2,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Loader } from 'q3-admin/lib/components';
 import SearchEngine from './SearchEngine';
-import useLocale from './useLocale';
 
-// cannot conditionally call hooks otherwise
-const Locale = () => {
-  useLocale();
-  return null;
-};
-
-const PageWrapper = ({
-  children,
-  includeLoader,
-  includeLocale,
-}) => (
+const PageWrapper = ({ children, includeLoader }) => (
   <>
     <SearchEngine />
     {includeLoader && <Loader />}
-    {includeLocale && <Locale />}
     {children}
   </>
 );

package/src/components/PublicTemplate.jsx

@@ -1,17 +1,146 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Public } from 'q3-admin/lib/components';
+import {
+  Box,
+  Paper,
+  Link,
+  Grid,
+  Hidden,
+  makeStyles,
+} from '@material-ui/core';
+import { Link as ReachLink } from 'gatsby';
+import { useTranslation } from 'q3-ui-locale';
+import { isString } from 'lodash';
 import AdminPublicGateway from './AdminPublicGateway';
 import useSiteMetaData from './useSiteMetaData';
 
+const useStyle = makeStyles((theme) => ({
+  logo: {
+    height: 95,
+    width: 180,
+    display: 'block',
+
+    '& img': {
+      objectFit: 'contain',
+      height: '100%',
+      width: '100%',
+    },
+  },
+  container: {
+    maxWidth: '85vw',
+    width: 850,
+
+    [theme.breakpoints.down('md')]: {
+      width: '100%',
+    },
+
+    [theme.breakpoints.down('sm')]: {
+      width: 'auto',
+    },
+  },
+  photo: ({ photo }) => ({
+    backgroundColor: theme.palette.secondary.light,
+    backgroundImage: isString(photo)
+      ? `url("${String(photo).replace(/\s/gi, '%20')}")`
+      : undefined,
+    backgroundSize: 'contain',
+    backgroundPosition: 'center',
+    backgroundRepeat: 'no-repeat',
+    width: '100%',
+    height: '100%',
+    backgroundBlendMode: 'multiply',
+    minHeight: '55vh',
+  }),
+}));
+
+const Copyright = () => {
+  const { brand } = useSiteMetaData();
+
+  return brand ? (
+    <Box display="inline-block" mx={1}>
+      ©{new Date().getFullYear()} {brand}
+    </Box>
+  ) : null;
+};
+
+// eslint-disable-next-line
+const TextLink = ({ href, text }) => {
+  const { t } = useTranslation('labels');
+
+  return href ? (
+    <Box display="inline-block" mx={1}>
+      <Link href={href} target="_blank">
+        {t(text)}
+      </Link>
+    </Box>
+  ) : null;
+};
+
 const PublicTemplate = ({ children, ...rest }) => {
-  const { brand, logo } = useSiteMetaData();
+  const {
+    brand,
+    cancellation,
+    logo,
+    terms,
+    privacy,
+    photo,
+  } = useSiteMetaData();
+  const cls = useStyle({
+    photo,
+  });
 
   return (
     <AdminPublicGateway {...rest}>
-      <Public companyName={brand} logo={logo}>
-        {children}
-      </Public>
+      <Box
+        alignItems="center"
+        component="article"
+        display="flex"
+        flexDirection="column"
+        justifyContent="center"
+        width="100%"
+      >
+        <Box
+          component="header"
+          mt="2vh"
+          mb={2}
+          textAlign="center"
+        >
+          <ReachLink to="/" className={cls.logo}>
+            <img alt={brand} src={logo} />
+          </ReachLink>
+        </Box>
+        <Paper className={cls.container}>
+          <Grid alignItems="center" container spacing={1}>
+            <Hidden smDown>
+              <Grid item xs={6}>
+                <Box className={cls.photo} />
+              </Grid>
+            </Hidden>
+            <Grid item md={6} xs={12}>
+              <Box p={2}>{children}</Box>
+            </Grid>
+          </Grid>
+        </Paper>
+        <Box
+          maxWidth="75vw"
+          component="footer"
+          mt={3}
+          textAlign="center"
+        >
+          <small>
+            <Copyright />
+            <TextLink
+              href={terms}
+              text="termsAndConditions"
+            />
+            <TextLink href={privacy} text="privacyPolicy" />
+            <TextLink
+              href={cancellation}
+              text="cancellationPolicy"
+            />
+          </small>
+        </Box>
+      </Box>
     </AdminPublicGateway>
   );
 };

package/src/components/SearchEngine.jsx

@@ -1,32 +1,89 @@
 import React from 'react';
+import { get, isFunction, isObject } from 'lodash';
 import PropTypes from 'prop-types';
 import { Helmet } from 'react-helmet';
+import { browser } from 'q3-ui-helpers';
 import useSiteMetaData from './useSiteMetaData';
 
+const withContent = (output) => (content) =>
+  content && isFunction(output) ? output(content) : [];
+
+export const getStartUrl = () =>
+  browser.isBrowserReady()
+    ? get(window, 'location.host')
+    : '';
+
+export const generateMetaDescriptionOptions = withContent(
+  (content) => [
+    {
+      name: 'description',
+      content,
+    },
+    {
+      property: 'og:description',
+      content,
+    },
+    {
+      name: 'twitter:description',
+      content,
+    },
+  ],
+);
+
+export const generateMetaTitleOptions = withContent(
+  (content) => [
+    {
+      property: 'og:title',
+      content,
+    },
+    {
+      name: 'twitter:title',
+      content,
+    },
+  ],
+);
+
+export const generateBrand = (xs) =>
+  xs ? `%s | ${xs}` : undefined;
+
+export const generateIcons = (site = {}) =>
+  site?.favicon
+    ? [
+        {
+          src: site.favicon,
+          sizes: '512x512',
+          type: 'image/png',
+        },
+      ]
+    : [];
+
+export const generateManifest = (site = {}) => ({
+  background_color: site.color,
+  description: site.description,
+  display: 'fullscreen',
+  icons: generateIcons(site),
+  name: site.title,
+  start_url: getStartUrl(),
+  short_name: site.brand,
+  theme_color: site.color,
+});
+
 const SEO = ({ description, lang, meta, title }) => {
   const site = useSiteMetaData();
   const metaDescription = description || site.description;
+  const metaTitle = title || site.title;
+  const manifestData = generateManifest(site);
 
   return (
     <Helmet
       htmlAttributes={{
         lang,
       }}
-      title={title || site.title}
-      titleTemplate={`%s | ${site.brand}`}
+      title={metaTitle}
+      titleTemplate={generateBrand(site.brand)}
       meta={[
-        {
-          name: 'description',
-          content: metaDescription,
-        },
-        {
-          property: 'og:title',
-          content: title,
-        },
-        {
-          property: 'og:description',
-          content: metaDescription,
-        },
+        ...generateMetaTitleOptions(metaTitle),
+        ...generateMetaDescriptionOptions(metaDescription),
         {
           property: 'og:type',
           content: 'website',
@@ -35,16 +92,18 @@ const SEO = ({ description, lang, meta, title }) => {
           name: 'twitter:card',
           content: 'summary',
         },
-        {
-          name: 'twitter:title',
-          content: title,
-        },
-        {
-          name: 'twitter:description',
-          content: metaDescription,
-        },
       ].concat(meta)}
-    />
+    >
+      {isObject(manifestData) ? (
+        <link
+          rel="manifest"
+          href={`data:application/manifest+json,${encodeURIComponent(
+            JSON.stringify(manifestData),
+          )}`}
+        />
+      ) : null}
+      <link rel="icon" href={site.favicon} />
+    </Helmet>
   );
 };
 

package/src/components/Wrapper.jsx

@@ -1,38 +1,14 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import React from 'react';
-import axios from 'axios';
 import PropTypes from 'prop-types';
 import AuthProvider from 'q3-ui-permissions';
-import LocaleBundles from './LocaleBundles';
 
-const setBaseUrlForRest = (
-  baseURL = process.env.GATSBY_APP_BASE_URL ||
-    'http://localhost:9000',
-) => {
-  axios.defaults.baseURL = baseURL;
-  return axios.defaults;
-};
-
-const Wrapper = ({ baseURL, children, locale }) => {
-  setBaseUrlForRest(baseURL);
-
-  return (
-    <LocaleBundles locale={locale}>
-      <AuthProvider>{children}</AuthProvider>
-    </LocaleBundles>
-  );
-};
-
-Wrapper.defaultProps = {
-  baseURL: undefined,
-};
+const Wrapper = ({ children }) => (
+  <AuthProvider>{children}</AuthProvider>
+);
 
 Wrapper.propTypes = {
-  baseURL: PropTypes.string,
   children: PropTypes.node.isRequired,
-
-  // eslint-disable-next-line
-  locale: PropTypes.object.isRequired,
 };
 
 export default Wrapper;

package/src/components/__tests__/SearchEngine.test.jsx

@@ -0,0 +1,58 @@
+import {
+  generateMetaDescriptionOptions,
+  getStartUrl,
+  generateIcons,
+  generateBrand,
+} from '../SearchEngine';
+
+jest.mock('q3-ui-locale', () => ({
+  browser: {
+    isBrowserReady: jest.fn(),
+  },
+}));
+
+const host = 'https://google.ca';
+
+beforeEach(() => {
+  Object.defineProperty(window, 'location', {
+    value: {
+      host,
+    },
+  });
+});
+
+describe('SearchEngine', () => {
+  it('should not render descriptions without content', () => {
+    expect(generateMetaDescriptionOptions().length).toBe(0);
+  });
+
+  it('should render descriptions with content', () => {
+    expect(
+      generateMetaDescriptionOptions('foo').length,
+    ).toBeGreaterThanOrEqual(1);
+  });
+
+  it('should return host', () => {
+    expect(getStartUrl()).toMatch(host);
+  });
+
+  it('should render favicon', () => {
+    expect(
+      generateIcons({
+        favicon: host,
+      }),
+    ).toHaveLength(1);
+  });
+
+  it('should not render favicon', () => {
+    expect(
+      generateIcons({
+        favicon: undefined,
+      }),
+    ).toHaveLength(0);
+  });
+
+  it('should include template literals', () => {
+    expect(generateBrand('3merge')).toMatch('%s | 3merge');
+  });
+});

package/src/components/useSiteMetaData.js

@@ -1,22 +1,23 @@
-import { get } from 'lodash';
+import { get, merge } from 'lodash';
 import { useStaticQuery, graphql } from 'gatsby';
+import useRunTime from 'gatsby-theme-q3-mui/src/components/useRunTime';
 
 export default () =>
-  get(
-    useStaticQuery(graphql`
-      query {
-        site {
-          siteMetadata {
-            appDirectory
-            brand
-            description
-            favicon
-            logo
-            title
+  merge(
+    get(
+      useStaticQuery(graphql`
+        query {
+          site {
+            siteMetadata {
+              appDirectory
+              description
+              title
+            }
           }
         }
-      }
-    `),
-    'site.siteMetadata',
-    {},
+      `),
+      'site.siteMetadata',
+      {},
+    ),
+    useRunTime(),
   );