gatsby-theme-q3 3.2.0 → 3.2.4

package/CHANGELOG.md

@@ -3,6 +3,44 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.2.4](https://github.com/3merge/q/compare/v3.2.3...v3.2.4) (2022-02-10)
+
+
+### Bug Fixes
+
+* feature photo and margins ([c8cd20a](https://github.com/3merge/q/commit/c8cd20a4f51a5ef0be67a4fbffa25f007641171e))
+
+
+
+
+
+## [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
+
+
+
+
+
+## [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
+
+
+
+
+
+## [3.2.1](https://github.com/3merge/q/compare/v3.2.0...v3.2.1) (2022-02-09)
+
+
+### Bug Fixes
+
+* misc domain issues ([17cb74b](https://github.com/3merge/q/commit/17cb74b927721f11b5fcd8f8a9a1a28a86867048))
+
+
+
+
+
 # [3.2.0](https://github.com/3merge/q/compare/v3.1.5...v3.2.0) (2022-02-09)
 
 

package/gatsby-browser.js

@@ -11,6 +11,11 @@ export {
 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';

package/gatsby-config.js

@@ -4,14 +4,7 @@ require('dotenv').config();
 const genKey = (url) =>
   String(url).includes('netlify') ? 'disallow' : 'allow';
 
-module.exports = ({
-  siteUrl,
-  title,
-  brandingColor,
-  icon,
-  netlify,
-  ...options
-}) => {
+module.exports = (options) => {
   const plugins = [
     {
       resolve: 'gatsby-theme-q3-mui',
@@ -48,24 +41,20 @@ module.exports = ({
         },
       },
     },
-  ];
-
-  if (netlify)
-    plugins.push({
+    {
       resolve: 'gatsby-plugin-netlify',
       options: {
         generateMatchPathRewrites: true,
       },
-    });
-
-  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

@@ -17,8 +17,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 const PageWrapper = ({
   children,
-  includeLoader,
-  includeLocale
+  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 = {

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: 1,
+    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: 2,
+    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,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getStartUrl = exports.generateMetaTitleOptions = exports.generateMetaDescriptionOptions = exports.generateManifest = exports.generateIcons = exports.generateBrand = exports.default = exports.Manifest = void 0;
+exports.getStartUrl = exports.generateMetaTitleOptions = exports.generateMetaDescriptionOptions = exports.generateManifest = exports.generateIcons = exports.generateBrand = exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -69,13 +69,6 @@ const generateManifest = (site = {}) => ({
 
 exports.generateManifest = generateManifest;
 
-const Manifest = props => (0, _lodash.isObject)(props) ? /*#__PURE__*/_react.default.createElement("link", {
-  rel: "manifest",
-  href: `data:application/manifest+json,${encodeURIComponent(JSON.stringify(props))}`
-}) : null;
-
-exports.Manifest = Manifest;
-
 const SEO = ({
   description,
   lang,
@@ -85,12 +78,13 @@ 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: metaTitle,
-    titleTemplate: generateBrand((0, _lodash.get)(site, 'brand', 'Q3')),
+    titleTemplate: generateBrand(site.brand),
     meta: [...generateMetaTitleOptions(metaTitle), ...generateMetaDescriptionOptions(metaDescription), {
       property: 'og:type',
       content: 'website'
@@ -98,7 +92,10 @@ const SEO = ({
       name: 'twitter:card',
       content: 'summary'
     }].concat(meta)
-  }, /*#__PURE__*/_react.default.createElement(Manifest, generateManifest(site)), /*#__PURE__*/_react.default.createElement("link", {
+  }, (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
   }));

package/lib/components/Wrapper.js

@@ -7,8 +7,6 @@ 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"));
@@ -16,27 +14,12 @@ var _q3UiPermissions = _interopRequireDefault(require("q3-ui-permissions"));
 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
-}) => {
-  setBaseUrlForRest(baseURL);
-  return /*#__PURE__*/_react.default.createElement(_q3UiPermissions.default, null, 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/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.2.0",
+  "version": "3.2.4",
   "main": "index.js",
   "license": "MIT",
   "peerDependencies": {
@@ -28,13 +28,13 @@
     "gatsby-plugin-robots-txt": "^1.6.14",
     "gatsby-plugin-sharp": "^4.2.0",
     "gatsby-plugin-sitemap": "^5.2.0",
-    "gatsby-theme-q3-mui": "^3.2.0",
+    "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-helpers": "^3.2.0",
-    "q3-ui-locale": "^3.2.0",
+    "q3-ui-locale": "^3.2.1",
     "query-string": "^7.0.1",
     "react-helmet": "^6.1.0",
     "react-share": "^4.3.1",
@@ -42,5 +42,5 @@
     "transform-loader": "^0.2.4",
     "yarn": "^1.22.17"
   },
-  "gitHead": "e7b26a194d8779024212ba64ca440222c28d82c7"
+  "gitHead": "5ca604e4b9081cf5728a581bc0a7300ffcefb6e9"
 }

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

@@ -3,11 +3,7 @@ import PropTypes from 'prop-types';
 import { Loader } from 'q3-admin/lib/components';
 import SearchEngine from './SearchEngine';
 
-const PageWrapper = ({
-  children,
-  includeLoader,
-  includeLocale,
-}) => (
+const PageWrapper = ({ children, includeLoader }) => (
   <>
     <SearchEngine />
     {includeLoader && <Loader />}