gatsby-theme-q3 3.1.5 → 3.2.3

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [3.1.5](https://github.com/3merge/q/compare/v3.1.4...v3.1.5) (2022-02-01)
+## [3.2.3](https://github.com/3merge/q/compare/v3.2.2...v3.2.3) (2022-02-10)
 
 **Note:** Version bump only for package gatsby-theme-q3
 
@@ -11,7 +11,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-## [3.1.4](https://github.com/3merge/q/compare/v3.1.3...v3.1.4) (2022-02-01)
+## [3.2.2](https://github.com/3merge/q/compare/v3.2.1...v3.2.2) (2022-02-10)
 
 **Note:** Version bump only for package gatsby-theme-q3
 
@@ -19,58 +19,97 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-# [3.1.0](https://github.com/3merge/q/compare/v3.0.4...v3.1.0) (2022-01-31)
-
-**Note:** Version bump only for package gatsby-theme-q3
-
-
-
-
-
-## [3.0.4](https://github.com/3merge/q/compare/v3.0.3...v3.0.4) (2022-01-29)
-
-**Note:** Version bump only for package gatsby-theme-q3
-
-
-
-
-
-## [3.0.3](https://github.com/3merge/q/compare/v3.0.2...v3.0.3) (2022-01-29)
+## [3.2.1](https://github.com/3merge/q/compare/v3.2.0...v3.2.1) (2022-02-09)
 
 
 ### Bug Fixes
 
-* major release bugs ([#372](https://github.com/3merge/q/issues/372)) ([d3e0681](https://github.com/3merge/q/commit/d3e0681a8d9ce61558b3aeaabe94ce8bc326dfa7))
+* misc domain issues ([17cb74b](https://github.com/3merge/q/commit/17cb74b927721f11b5fcd8f8a9a1a28a86867048))
 
 
 
 
 
-## [3.0.2](https://github.com/3merge/q/compare/v3.0.1...v3.0.2) (2022-01-28)
-
-**Note:** Version bump only for package gatsby-theme-q3
+# [3.2.0](https://github.com/3merge/q/compare/v3.1.5...v3.2.0) (2022-02-09)
 
 
+### Features
 
-
-
-## [3.0.1](https://github.com/3merge/q/compare/v3.0.0...v3.0.1) (2022-01-28)
-
-**Note:** Version bump only for package gatsby-theme-q3
-
-
-
-
-
-# [3.0.0](https://github.com/3merge/q/compare/v2.3.13...v3.0.0) (2022-01-28)
-
-**Note:** Version bump only for package gatsby-theme-q3
+* text locale editor ([#377](https://github.com/3merge/q/issues/377)) ([e827875](https://github.com/3merge/q/commit/e8278757be7505554376c1d1d78d9b8900fdf35e))
 
 
 
 
 
 
+## [3.1.5](https://github.com/3merge/q/compare/v3.1.4...v3.1.5) (2022-02-01)
+
+**Note:** Version bump only for package gatsby-theme-q3
+
+
+
+
+
+## [3.1.4](https://github.com/3merge/q/compare/v3.1.3...v3.1.4) (2022-02-01)
+
+**Note:** Version bump only for package gatsby-theme-q3
+
+
+
+
+
+# [3.1.0](https://github.com/3merge/q/compare/v3.0.4...v3.1.0) (2022-01-31)
+
+**Note:** Version bump only for package gatsby-theme-q3
+
+
+
+
+
+## [3.0.4](https://github.com/3merge/q/compare/v3.0.3...v3.0.4) (2022-01-29)
+
+**Note:** Version bump only for package gatsby-theme-q3
+
+
+
+
+
+## [3.0.3](https://github.com/3merge/q/compare/v3.0.2...v3.0.3) (2022-01-29)
+
+
+### Bug Fixes
+
+* major release bugs ([#372](https://github.com/3merge/q/issues/372)) ([d3e0681](https://github.com/3merge/q/commit/d3e0681a8d9ce61558b3aeaabe94ce8bc326dfa7))
+
+
+
+
+
+## [3.0.2](https://github.com/3merge/q/compare/v3.0.1...v3.0.2) (2022-01-28)
+
+**Note:** Version bump only for package gatsby-theme-q3
+
+
+
+
+
+## [3.0.1](https://github.com/3merge/q/compare/v3.0.0...v3.0.1) (2022-01-28)
+
+**Note:** Version bump only for package gatsby-theme-q3
+
+
+
+
+
+# [3.0.0](https://github.com/3merge/q/compare/v2.3.13...v3.0.0) (2022-01-28)
+
+**Note:** Version bump only for package gatsby-theme-q3
+
+
+
+
+
+
 ## [2.3.11](https://github.com/3merge/q/compare/v2.3.10...v2.3.11) (2022-01-18)
 
 **Note:** Version bump only for package gatsby-theme-q3

package/gatsby-browser.js

@@ -1,4 +1,33 @@
+import axios from 'axios';
+import { last, size } from 'lodash';
+import { getDomain } from 'q3-admin';
+import { browser } from 'q3-ui-helpers';
+
 export {
   wrapPageElement,
   wrapRootElement,
 } from './gatsby-ssr';
+
+export const onClientEntry = async () => {
+  if (!browser.isBrowserReady()) return;
+
+  // set api default root
+  axios.defaults.baseURL =
+    process.env.GATSBY_APP_BASE_URL ||
+    'http://localhost:9000';
+
+  // set language default
+  axios.defaults.headers['Content-Language'] =
+    window.localStorage.getItem('q3-locale') || 'en';
+
+  // set tenant default
+  const { host } = window.location;
+  const parts = String(host).split('.').reverse();
+
+  if (size(parts) > 1)
+    axios.defaults.headers['X-Session-Tenant'] =
+      last(parts);
+
+  // calls Q3 API
+  await getDomain();
+};

package/gatsby-config.js

@@ -4,16 +4,7 @@ require('dotenv').config();
 const genKey = (url) =>
   String(url).includes('netlify') ? 'disallow' : 'allow';
 
-module.exports = ({
-  contentfulSpaceID,
-  contentfulAccessToken,
-  siteUrl,
-  title,
-  brandingColor,
-  icon,
-  netlify,
-  ...options
-}) => {
+module.exports = (options) => {
   const plugins = [
     {
       resolve: 'gatsby-theme-q3-mui',
@@ -50,51 +41,20 @@ module.exports = ({
         },
       },
     },
-  ];
-
-  if (contentfulSpaceID) {
-    if (!contentfulAccessToken)
-      throw new Error('Contentful access token missing');
-
-    plugins.push({
-      resolve: 'gatsby-source-contentful',
-      options: {
-        spaceId: contentfulSpaceID,
-        accessToken: contentfulAccessToken,
-      },
-    });
-  }
-
-  if (netlify)
-    plugins.push({
+    {
       resolve: 'gatsby-plugin-netlify',
       options: {
         generateMatchPathRewrites: true,
       },
-    });
-
-  if (title && brandingColor)
-    plugins.push({
-      resolve: 'gatsby-plugin-manifest',
-      options: {
-        short_name: title,
-        start_url: '/',
-        background_color: '#FFF',
-        theme_color: brandingColor,
-        display: 'standalone',
-        name: title,
-        icon,
-      },
-    });
-
-  if (siteUrl)
-    plugins.push({
+    },
+    {
       resolve: 'gatsby-plugin-canonical-urls',
       options: {
         stripQueryString: true,
-        siteUrl,
+        siteUrl: process.env.URL,
       },
-    });
+    },
+  ];
 
   return {
     plugins,

package/gatsby-node.js

@@ -70,7 +70,6 @@ exports.onCreatePage = async ({ page, actions }) => {
     createPage({
       ...page,
       context: {
-        contentful_id: 'APP',
         to: '/app',
       },
     });

package/lib/components/FormBoxContent.js

@@ -23,7 +23,8 @@ const FormBoxContent = ({
     t
   } = (0, _q3UiLocale.useTranslation)();
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
-    variant: "h1",
+    component: "h1",
+    variant: "h2",
     gutterBottom: true
   }, t(`titles:${title}`)), /*#__PURE__*/_react.default.createElement(_Typography.default, {
     gutterBottom: true

package/lib/components/PageWrapper.js

@@ -13,21 +13,12 @@ var _components = require("q3-admin/lib/components");
 
 var _SearchEngine = _interopRequireDefault(require("./SearchEngine"));
 
-var _useLocale = _interopRequireDefault(require("./useLocale"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-// cannot conditionally call hooks otherwise
-const Locale = () => {
-  (0, _useLocale.default)();
-  return null;
-};
-
 const PageWrapper = ({
   children,
-  includeLoader,
-  includeLocale
-}) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_SearchEngine.default, null), includeLoader && /*#__PURE__*/_react.default.createElement(_components.Loader, null), includeLocale && /*#__PURE__*/_react.default.createElement(Locale, null), children);
+  includeLoader
+}) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_SearchEngine.default, null), includeLoader && /*#__PURE__*/_react.default.createElement(_components.Loader, null), children);
 
 PageWrapper.defaultProps = {
   children: null,

package/lib/components/PublicTemplate.js

@@ -9,7 +9,13 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _components = require("q3-admin/lib/components");
+var _core = require("@material-ui/core");
+
+var _gatsby = require("gatsby");
+
+var _q3UiLocale = require("q3-ui-locale");
+
+var _lodash = require("lodash");
 
 var _AdminPublicGateway = _interopRequireDefault(require("./AdminPublicGateway"));
 
@@ -17,18 +23,136 @@ var _useSiteMetaData = _interopRequireDefault(require("./useSiteMetaData"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+const useStyle = (0, _core.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: (0, _lodash.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
+  } = (0, _useSiteMetaData.default)();
+  return brand ? /*#__PURE__*/_react.default.createElement(_core.Box, {
+    display: "inline-block",
+    mx: 1
+  }, "\xA9", new Date().getFullYear(), " ", brand) : null;
+}; // eslint-disable-next-line
+
+
+const TextLink = ({
+  href,
+  text
+}) => {
+  const {
+    t
+  } = (0, _q3UiLocale.useTranslation)('labels');
+  return href ? /*#__PURE__*/_react.default.createElement(_core.Box, {
+    display: "inline-block",
+    mx: 1
+  }, /*#__PURE__*/_react.default.createElement(_core.Link, {
+    href: href,
+    target: "_blank"
+  }, t(text))) : null;
+};
+
 const PublicTemplate = ({
   children,
   ...rest
 }) => {
   const {
     brand,
-    logo
+    cancellation,
+    logo,
+    terms,
+    privacy,
+    photo
   } = (0, _useSiteMetaData.default)();
-  return /*#__PURE__*/_react.default.createElement(_AdminPublicGateway.default, rest, /*#__PURE__*/_react.default.createElement(_components.Public, {
-    companyName: brand,
-    logo: logo
-  }, children));
+  const cls = useStyle({
+    photo
+  });
+  return /*#__PURE__*/_react.default.createElement(_AdminPublicGateway.default, rest, /*#__PURE__*/_react.default.createElement(_core.Box, {
+    alignItems: "center",
+    component: "article",
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    width: "100%"
+  }, /*#__PURE__*/_react.default.createElement(_core.Box, {
+    component: "header",
+    mt: "2vh",
+    mb: 2,
+    textAlign: "center"
+  }, /*#__PURE__*/_react.default.createElement(_gatsby.Link, {
+    to: "/",
+    className: cls.logo
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    alt: brand,
+    src: logo
+  }))), /*#__PURE__*/_react.default.createElement(_core.Paper, {
+    className: cls.container
+  }, /*#__PURE__*/_react.default.createElement(_core.Grid, {
+    alignItems: "center",
+    container: true,
+    spacing: 1
+  }, /*#__PURE__*/_react.default.createElement(_core.Hidden, {
+    smDown: true
+  }, /*#__PURE__*/_react.default.createElement(_core.Grid, {
+    item: true,
+    xs: 6
+  }, /*#__PURE__*/_react.default.createElement(_core.Box, {
+    className: cls.photo
+  }))), /*#__PURE__*/_react.default.createElement(_core.Grid, {
+    item: true,
+    md: 6,
+    xs: 12
+  }, /*#__PURE__*/_react.default.createElement(_core.Box, {
+    p: 2
+  }, children)))), /*#__PURE__*/_react.default.createElement(_core.Box, {
+    maxWidth: "75vw",
+    component: "footer",
+    mt: 3,
+    textAlign: "center"
+  }, /*#__PURE__*/_react.default.createElement("small", null, /*#__PURE__*/_react.default.createElement(Copyright, null), /*#__PURE__*/_react.default.createElement(TextLink, {
+    href: terms,
+    text: "termsAndConditions"
+  }), /*#__PURE__*/_react.default.createElement(TextLink, {
+    href: privacy,
+    text: "privacyPolicy"
+  }), /*#__PURE__*/_react.default.createElement(TextLink, {
+    href: cancellation,
+    text: "cancellationPolicy"
+  })))));
 };
 
 PublicTemplate.defaultProps = {

package/lib/components/SearchEngine.js

@@ -3,18 +3,72 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.getStartUrl = exports.generateMetaTitleOptions = exports.generateMetaDescriptionOptions = exports.generateManifest = exports.generateIcons = exports.generateBrand = exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _lodash = require("lodash");
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _reactHelmet = require("react-helmet");
 
+var _q3UiHelpers = require("q3-ui-helpers");
+
 var _useSiteMetaData = _interopRequireDefault(require("./useSiteMetaData"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+const withContent = output => content => content && (0, _lodash.isFunction)(output) ? output(content) : [];
+
+const getStartUrl = () => _q3UiHelpers.browser.isBrowserReady() ? (0, _lodash.get)(window, 'location.host') : '';
+
+exports.getStartUrl = getStartUrl;
+const generateMetaDescriptionOptions = withContent(content => [{
+  name: 'description',
+  content
+}, {
+  property: 'og:description',
+  content
+}, {
+  name: 'twitter:description',
+  content
+}]);
+exports.generateMetaDescriptionOptions = generateMetaDescriptionOptions;
+const generateMetaTitleOptions = withContent(content => [{
+  property: 'og:title',
+  content
+}, {
+  name: 'twitter:title',
+  content
+}]);
+exports.generateMetaTitleOptions = generateMetaTitleOptions;
+
+const generateBrand = xs => xs ? `%s | ${xs}` : undefined;
+
+exports.generateBrand = generateBrand;
+
+const generateIcons = (site = {}) => site !== null && site !== void 0 && site.favicon ? [{
+  src: site.favicon,
+  sizes: '512x512',
+  type: 'image/png'
+}] : [];
+
+exports.generateIcons = generateIcons;
+
+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
+});
+
+exports.generateManifest = generateManifest;
+
 const SEO = ({
   description,
   lang,
@@ -23,35 +77,28 @@ const SEO = ({
 }) => {
   const site = (0, _useSiteMetaData.default)();
   const metaDescription = description || site.description;
+  const metaTitle = title || site.title;
+  const manifestData = generateManifest(site);
   return /*#__PURE__*/_react.default.createElement(_reactHelmet.Helmet, {
     htmlAttributes: {
       lang
     },
-    title: title || site.title,
-    titleTemplate: `%s | ${site.brand}`,
-    meta: [{
-      name: 'description',
-      content: metaDescription
-    }, {
-      property: 'og:title',
-      content: title
-    }, {
-      property: 'og:description',
-      content: metaDescription
-    }, {
+    title: metaTitle,
+    titleTemplate: generateBrand(site.brand),
+    meta: [...generateMetaTitleOptions(metaTitle), ...generateMetaDescriptionOptions(metaDescription), {
       property: 'og:type',
       content: 'website'
     }, {
       name: 'twitter:card',
       content: 'summary'
-    }, {
-      name: 'twitter:title',
-      content: title
-    }, {
-      name: 'twitter:description',
-      content: metaDescription
     }].concat(meta)
-  });
+  }, (0, _lodash.isObject)(manifestData) ? /*#__PURE__*/_react.default.createElement("link", {
+    rel: "manifest",
+    href: `data:application/manifest+json,${encodeURIComponent(JSON.stringify(manifestData))}`
+  }) : null, /*#__PURE__*/_react.default.createElement("link", {
+    rel: "icon",
+    href: site.favicon
+  }));
 };
 
 SEO.defaultProps = {

package/lib/components/Wrapper.js

@@ -7,41 +7,19 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _axios = _interopRequireDefault(require("axios"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _q3UiPermissions = _interopRequireDefault(require("q3-ui-permissions"));
 
-var _LocaleBundles = _interopRequireDefault(require("./LocaleBundles"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 /* eslint-disable import/no-extraneous-dependencies */
-const setBaseUrlForRest = (baseURL = process.env.GATSBY_APP_BASE_URL || 'http://localhost:9000') => {
-  _axios.default.defaults.baseURL = baseURL;
-  return _axios.default.defaults;
-};
-
 const Wrapper = ({
-  baseURL,
-  children,
-  locale
-}) => {
-  setBaseUrlForRest(baseURL);
-  return /*#__PURE__*/_react.default.createElement(_LocaleBundles.default, {
-    locale: locale
-  }, /*#__PURE__*/_react.default.createElement(_q3UiPermissions.default, null, children));
-};
+  children
+}) => /*#__PURE__*/_react.default.createElement(_q3UiPermissions.default, null, children);
 
-Wrapper.defaultProps = {
-  baseURL: undefined
-};
 Wrapper.propTypes = {
-  baseURL: _propTypes.default.string,
-  children: _propTypes.default.node.isRequired,
-  // eslint-disable-next-line
-  locale: _propTypes.default.object.isRequired
+  children: _propTypes.default.node.isRequired
 };
 var _default = Wrapper;
 exports.default = _default;

package/lib/components/__tests__/SearchEngine.test.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _SearchEngine = require("../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((0, _SearchEngine.generateMetaDescriptionOptions)().length).toBe(0);
+  });
+  it('should render descriptions with content', () => {
+    expect((0, _SearchEngine.generateMetaDescriptionOptions)('foo').length).toBeGreaterThanOrEqual(1);
+  });
+  it('should return host', () => {
+    expect((0, _SearchEngine.getStartUrl)()).toMatch(host);
+  });
+  it('should render favicon', () => {
+    expect((0, _SearchEngine.generateIcons)({
+      favicon: host
+    })).toHaveLength(1);
+  });
+  it('should not render favicon', () => {
+    expect((0, _SearchEngine.generateIcons)({
+      favicon: undefined
+    })).toHaveLength(0);
+  });
+  it('should include template literals', () => {
+    expect((0, _SearchEngine.generateBrand)('3merge')).toMatch('%s | 3merge');
+  });
+});