gatsby-theme-q3 3.2.0 → 3.2.4

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={1}
+          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={2}
+          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

@@ -68,20 +68,11 @@ export const generateManifest = (site = {}) => ({
   theme_color: site.color,
 });
 
-export const Manifest = (props) =>
-  isObject(props) ? (
-    <link
-      rel="manifest"
-      href={`data:application/manifest+json,${encodeURIComponent(
-        JSON.stringify(props),
-      )}`}
-    />
-  ) : null;
-
 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
@@ -89,9 +80,7 @@ const SEO = ({ description, lang, meta, title }) => {
         lang,
       }}
       title={metaTitle}
-      titleTemplate={generateBrand(
-        get(site, 'brand', 'Q3'),
-      )}
+      titleTemplate={generateBrand(site.brand)}
       meta={[
         ...generateMetaTitleOptions(metaTitle),
         ...generateMetaDescriptionOptions(metaDescription),
@@ -105,7 +94,14 @@ const SEO = ({ description, lang, meta, title }) => {
         },
       ].concat(meta)}
     >
-      <Manifest {...generateManifest(site)} />
+      {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,32 +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';
 
-const setBaseUrlForRest = (
-  baseURL = process.env.GATSBY_APP_BASE_URL ||
-    'http://localhost:9000',
-) => {
-  axios.defaults.baseURL = baseURL;
-  return axios.defaults;
-};
-
-const Wrapper = ({ baseURL, children }) => {
-  setBaseUrlForRest(baseURL);
-  return <AuthProvider>{children}</AuthProvider>;
-};
-
-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/withPublicTemplate.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import PublicTemplate from './PublicTemplate';
+
+const withPublicTemplate = (Component) => (props) =>
+  (
+    <PublicTemplate {...props}>
+      <Component {...props} />
+    </PublicTemplate>
+  );
+
+export default withPublicTemplate;

package/src/components/withSuccessOp.jsx

@@ -20,7 +20,7 @@ const withSuccessOp = (Component, msg) => {
           component={Link}
           to="/login"
           variant="contained"
-          color="primary"
+          color="secondary"
         >
           {t('labels:login')}
         </Button>

package/src/pages/login.jsx

@@ -9,48 +9,60 @@ import Box from '@material-ui/core/Box';
 import { Form, Field } from 'q3-ui-forms/lib/builders';
 import FormBox from '../components/FormBox';
 import withAuthenticate from '../components/withAuthenticate';
+import withPublicTemplate from '../components/withPublicTemplate';
 
-export default withAuthenticate(({ authenticate }) => {
-  const { t } = useTranslation();
+const Login = withPublicTemplate(
+  withAuthenticate(({ authenticate }) => {
+    const { t } = useTranslation();
 
-  return (
-    <FormBox
-      renderBottom={
-        <>
-          <Form onSubmit={authenticate}>
-            <Field
-              name="email"
-              type="email"
-              required
-              xl={12}
-              lg={12}
-            />
-            <Field
-              required
-              name="password"
-              type="password"
-              xl={12}
-              lg={12}
-            />
-          </Form>
-          <Box mt={2} mb={1}>
-            <Divider />
-          </Box>
-          <Grid container spacing={1}>
-            <MuiLink component={Link} to="/password-reset">
-              {t('labels:requestNewPassword')}
-            </MuiLink>
-            <MuiLink component={Link} to="/reverify">
-              {t('labels:reverifyLink')}
-            </MuiLink>
-          </Grid>
-        </>
-      }
-      renderTop={
-        <Typography variant="h1" gutterBottom>
-          {t('titles:login')}
-        </Typography>
-      }
-    />
-  );
-});
+    return (
+      <FormBox
+        renderBottom={
+          <>
+            <Form onSubmit={authenticate}>
+              <Field
+                name="email"
+                type="email"
+                required
+                xl={12}
+                lg={12}
+              />
+              <Field
+                required
+                name="password"
+                type="password"
+                xl={12}
+                lg={12}
+              />
+            </Form>
+            <Box mt={2} mb={1}>
+              <Divider />
+            </Box>
+            <Grid container spacing={1}>
+              <MuiLink
+                component={Link}
+                to="/password-reset"
+              >
+                {t('labels:requestNewPassword')}
+              </MuiLink>
+              <MuiLink component={Link} to="/reverify">
+                {t('labels:reverifyLink')}
+              </MuiLink>
+            </Grid>
+          </>
+        }
+        renderTop={
+          <Typography
+            component="h1"
+            variant="h2"
+            gutterBottom
+          >
+            {t('titles:login')}
+          </Typography>
+        }
+      />
+    );
+  }),
+);
+
+export default Login;

package/src/pages/password-change.jsx

@@ -8,6 +8,7 @@ import { Form, Field } from 'q3-ui-forms/lib/builders';
 import FormBoxContent from '../components/FormBoxContent';
 import FormBox from '../components/FormBox';
 import withSuccessOp from '../components/withSuccessOp';
+import withPublicTemplate from '../components/withPublicTemplate';
 
 const PasswordChange = ({ onSuccess, location }) => {
   const { passwordResetToken, email } = queryString.parse(
@@ -64,7 +65,8 @@ PasswordChange.propTypes = {
   }).isRequired,
 };
 
-export default withSuccessOp(
-  PasswordChange,
-  'passwordChangeNotice',
+const PasswordChangeWithTemplate = withPublicTemplate(
+  withSuccessOp(PasswordChange, 'passwordChangeNotice'),
 );
+
+export default PasswordChangeWithTemplate;

package/src/pages/password-reset.jsx

@@ -5,6 +5,7 @@ import { Form, Field } from 'q3-ui-forms/lib/builders';
 import FormBox from '../components/FormBox';
 import FormBoxContent from '../components/FormBoxContent';
 import withSuccessOp from '../components/withSuccessOp';
+import withPublicTemplate from '../components/withPublicTemplate';
 
 const PasswordReset = ({ onSuccess }) => (
   <FormBox
@@ -39,7 +40,8 @@ PasswordReset.propTypes = {
   onSuccess: PropTypes.func.isRequired,
 };
 
-export default withSuccessOp(
-  PasswordReset,
-  'passwordResetNotice',
+const PasswordResetWithTemplate = withPublicTemplate(
+  withSuccessOp(PasswordReset, 'passwordResetNotice'),
 );
+
+export default PasswordResetWithTemplate;

package/src/pages/reverify.jsx

@@ -9,6 +9,7 @@ import FormBox from '../components/FormBox';
 import FormBoxContent from '../components/FormBoxContent';
 import FormBoxNotice from '../components/FormBoxNotice';
 import { hasOp, toOp } from '../components/utils';
+import withPublicTemplate from '../components/withPublicTemplate';
 
 const Reverify = ({ location: { search, pathname } }) => {
   const { t } = useTranslation();
@@ -23,7 +24,7 @@ const Reverify = ({ location: { search, pathname } }) => {
           component={Link}
           to="/reverify"
           variant="contained"
-          color="primary"
+          color="secondary"
         >
           {t('labels:tryAgain')}
         </Button>
@@ -67,4 +68,5 @@ Reverify.propTypes = {
   }).isRequired,
 };
 
-export default Reverify;
+const ReverifyWithTemplate = withPublicTemplate(Reverify);
+export default ReverifyWithTemplate;

package/src/pages/verify.jsx

@@ -8,19 +8,14 @@ import { Form, Field } from 'q3-ui-forms/lib/builders';
 import FormBoxContent from '../components/FormBoxContent';
 import FormBox from '../components/FormBox';
 import withAuthenticate from '../components/withAuthenticate';
+import withPublicTemplate from '../components/withPublicTemplate';
 
-export default withAuthenticate(
-  ({ authenticate, ...props }) => {
-    const {
-      verificationCode,
-      id,
-      email,
-    } = queryString.parse(
-      get(props, 'location.search', ''),
-      {
+const Verify = withPublicTemplate(
+  withAuthenticate(({ authenticate, ...props }) => {
+    const { verificationCode, id, email } =
+      queryString.parse(get(props, 'location.search', ''), {
         decode: false,
-      },
-    );
+      });
 
     return (
       <FormBox
@@ -69,5 +64,7 @@ export default withAuthenticate(
         }
       />
     );
-  },
+  }),
 );
+
+export default Verify;

package/__tests__/config.int.test.js

@@ -1,62 +0,0 @@
-import { get } from 'lodash';
-import config from '../gatsby-config';
-
-const CANONICAL = 'gatsby-plugin-canonical-urls';
-const ROBOTS = 'gatsby-plugin-robots-txt';
-
-const ENV = {
-  contentfulSpaceID: 1,
-  contentfulAccessToken: 1,
-};
-
-const containsResolver = (plugins = [], name) =>
-  plugins.find(
-    (p) => typeof p === 'object' && p.resolve === name,
-  );
-
-const checkPlugins = (args = {}, plugin) => {
-  const { plugins } = config({ ...ENV, ...args });
-  const statement = expect(
-    containsResolver(plugins, plugin),
-  );
-
-  return {
-    has: () => statement.not.toBeUndefined(),
-    hasNot: () => statement.toBeUndefined(),
-  };
-};
-
-describe('gatsby-config', () => {
-  describe('plugins', () => {
-    it('should include conditional plugins', () =>
-      [CANONICAL].forEach((name) =>
-        checkPlugins(
-          {
-            brandingColor: '#FFF',
-            title: 'Foo',
-            siteUrl: 'https://google.ca',
-          },
-          name,
-        ).has(),
-      ));
-
-    it('should exclude conditional plugins', () =>
-      [CANONICAL].forEach((name) =>
-        checkPlugins({}, name).hasNot(),
-      ));
-
-    it.each([
-      ['https://dev.netlify.3merge.com', 'disallow'],
-      ['https://3merge.com', 'allow'],
-    ])('should disable indexing', (url, key) => {
-      process.env.URL = url;
-      const { plugins } = config({ ...ENV });
-      const res = containsResolver(plugins, ROBOTS);
-      const prod = get(
-        res,
-        'options.env.production.policy',
-      )[0];
-      expect(prod).toHaveProperty(key, '/');
-    });
-  });
-});

package/helpers/__tests__/loadContent.unit.test.js

@@ -1,13 +0,0 @@
-const path = require('path');
-const loadContent = require('../loadContent');
-
-describe('loadContent', () => {
-  it('should fetch all content from directory', () => {
-    const out = loadContent(
-      path.resolve(__dirname, '../../__fixtures__'),
-    );
-
-    expect(out).toHaveProperty('en');
-    expect(out).toHaveProperty('fr');
-  });
-});

package/helpers/__tests__/pagination.unit.test.js

@@ -1,139 +0,0 @@
-const {
-  genCursor,
-  appendSiblingsToContext,
-  getPreviousArchiveUrl,
-  getNextArchiveUrl,
-  getNumberOfPages,
-  paginateArchiveContext,
-} = require('../pagination');
-
-const genEntries = () => {
-  const entries = [];
-  for (let i = 0; i < 30; i += 1) entries.push(i);
-  return entries;
-};
-
-describe('pagination', () => {
-  describe('"genCursor"', () => {
-    const stub = ['foo', 'bar', 'quuz', 'garply'];
-    const cursor = genCursor(stub, 2);
-    // current index targets "quuz"
-
-    it('should identify first item', () => {
-      expect(cursor.first).toMatch('foo');
-    });
-
-    it('should identify last item', () => {
-      expect(cursor.last).toMatch('garply');
-    });
-
-    it('should identify next item', () => {
-      expect(cursor.next).toMatch('garply');
-    });
-
-    it('should identify previous item', () => {
-      expect(cursor.prev).toMatch('bar');
-    });
-
-    it('should identify first position', () => {
-      expect(cursor.isFirst).toBeFalsy();
-      expect(genCursor(stub, 0).isFirst).toBeTruthy();
-    });
-
-    it('should identify last position', () => {
-      expect(cursor.isLast).toBeFalsy();
-      expect(genCursor(stub, 3).isLast).toBeTruthy();
-    });
-  });
-
-  describe('"appendSiblingsToContext"', () => {
-    const mockContentfulEntry = (id) => ({
-      contentful_id: id,
-    });
-
-    const stubWithContentful = [
-      mockContentfulEntry(1),
-      mockContentfulEntry(2),
-      mockContentfulEntry(3),
-    ];
-
-    it('should map contentful entries using cursor', () => {
-      const entries = appendSiblingsToContext(
-        stubWithContentful,
-      );
-      expect(entries[0]).toMatchObject({
-        prev: 3,
-        next: 2,
-      });
-      expect(entries[2]).toMatchObject({
-        prev: 2,
-        next: 1,
-      });
-    });
-  });
-
-  describe('"getPreviousArchiveUrl"', () => {
-    it('should return null', () => {
-      expect(getPreviousArchiveUrl('/foo', 1)).toBeNull();
-    });
-
-    it('should return archive', () => {
-      expect(getPreviousArchiveUrl('/foo', 2)).toEqual(
-        '/foo',
-      );
-    });
-
-    it('should return archive sub-directory', () => {
-      expect(getPreviousArchiveUrl('/foo', 3)).toEqual(
-        '/foo/2',
-      );
-    });
-  });
-
-  describe('"getNextArchiveUrl"', () => {
-    it('should return sub-directory', () => {
-      expect(getNextArchiveUrl('/foo', 8, 9)).toEqual(
-        '/foo/9',
-      );
-    });
-
-    it('should return null', () => {
-      expect(getNextArchiveUrl('/foo', 9, 9)).toBeNull();
-    });
-  });
-
-  describe('"getNumberOfPages"', () => {
-    it('should return number divisible by', () => {
-      expect(getNumberOfPages(genEntries(), 5)).toBe(6);
-    });
-  });
-
-  describe('"paginateArchiveContext"', () => {
-    it('should return pagination meta', () => {
-      // default 15 per page
-      const res = paginateArchiveContext(
-        genEntries(),
-        '/foo',
-      );
-
-      expect(res).toHaveLength(2);
-      expect(res[0]).toMatchObject({
-        path: '/foo',
-        limit: 15,
-        skip: 0,
-        pageNum: 0,
-        prev: null,
-        next: '/foo/2',
-      });
-
-      expect(res[1]).toMatchObject({
-        path: '/foo/2',
-        limit: 15,
-        skip: 15,
-        pageNum: 1,
-        prev: '/foo',
-        next: null,
-      });
-    });
-  });
-});