gatsby-core-theme 22.0.11 → 22.0.12

package/CHANGELOG.md

@@ -1,3 +1,14 @@
+## [22.0.12](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v22.0.11...v22.0.12) (2023-06-15)
+
+
+### Bug Fixes
+
+* 404 bug ([d31e875](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/d31e87550db9791ff19c265821ebcbdf72728a06))
+* 404 pages for multiple markets ([06621e2](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/06621e281677788cdfd6f8766ad05e0854135ae4))
+
+
+* Merge branch 'tm-3524-404-pages-fix' into 'master' ([0f00d4a](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/0f00d4a75b0b069780a5670f7d1eddb3e1c1d71d))
+
 ## [22.0.11](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v22.0.10...v22.0.11) (2023-06-14)
 
 

package/gatsby-node.esm.js

@@ -26,7 +26,9 @@ let marketSections = [];
 let prefilledModules = [];
 let siteInfo = null;
 let operators = null;
+let allMarkets = null;
 let translations = null;
+let allTranslations = null;
 let languageKey = null;
 let context404 = null;
 let sports = null;
@@ -185,6 +187,8 @@ exports.createPages = async ({ actions: { createPage } }, themeOptions) => {
   // eslint-disable-next-line prefer-destructuring
   languageKey = Object.keys(processed.relations.translations)[0];
   translations = processed.relations.translations[languageKey];
+  allTranslations = processed.relations.translations;
+  allMarkets = processed.site_markets;
   htmlSitemapPages = processSitemapPages(pages, processed.site_markets);
 
   if (['rage_seo', 'rage_ppc', 'sports'].includes(response.general.type)) {
@@ -220,7 +224,7 @@ exports.createPages = async ({ actions: { createPage } }, themeOptions) => {
       processed.pages[siteMarket][pageType].forEach((page) => {
         marketSections = processed.market_sections[siteMarket];
         prefilledModules = processed.prefilled_market_modules[siteMarket];
-        const allMarkets = processed.site_markets;
+
         const processedPage = page;
         processedPage.preconnect_links = preconnectLinks;
 
@@ -429,9 +433,32 @@ exports.createPages = async ({ actions: { createPage } }, themeOptions) => {
 };
 
 exports.onCreatePage = ({ page, actions }) => {
-  const { createPage } = actions;
+  const { createPage, deletePage } = actions;
+
+  if (page.path.match(/^\/[a-z]{2}\/404\/$/)) {
+    const oldPage = { ...page };
+    const langCode = page.path.split(`/`)[1];
+    page.matchPath = `/${langCode}/*`;
 
-  if (page.path.includes('404')) {
+    const marketCode = Object.keys(allMarkets).find(
+      (key) => allMarkets[key].path_prefix === langCode
+    );
+
+    if (marketCode) {
+      // Recreate the modified page
+      deletePage(oldPage);
+      createPage({
+        ...page,
+        context: {
+          ...context404,
+          page: { ...context404.page, market: marketCode },
+          translations: allTranslations[langCode],
+        },
+      });
+    } else {
+      deletePage(oldPage);
+    }
+  } else if (page.path.includes('404')) {
     createPage({
       path: page.path,
       component: require.resolve('./src/components/app.js'),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-core-theme",
-  "version": "22.0.11",
+  "version": "22.0.12",
   "description": "Gatsby Theme NPM Package",
   "main": "index.js",
   "GATSBY_RECAPTCHA_SITEKEY": "6LfoyvMUAAAAAO4nl_MQnqHb4XdHxEiu5cXgIqeB",

package/src/components/atoms/not-found/index.js

@@ -1,14 +1,24 @@
 /* eslint-disable react/no-unescaped-entities */
-import React from 'react';
+import React, { useContext } from 'react';
+import { Context } from 'gatsby-core-theme/src/context/MainProvider';
 import styles from './not-found.module.scss';
+import { translate } from '~helpers/getters';
 
-const NotFound = () => (
-  <div className={styles.wrapper || ''}>
-    <div className={styles.textBlock || ''}>
-      <p>Oops! We can't seem to find that page anymore.</p>
-      <p>While you're here though, why not check out these top South African Casinos:</p>
+const NotFound = () => {
+  const { translations } = useContext(Context) || {};
+
+  return (
+    <div className={styles.wrapper || ''}>
+      <h2>{translate(translations, 'main_404_title', 'Oops, Something Went Wrong.')}</h2>
+      <div className={styles.textBlock || ''}>
+        {translate(
+          translations,
+          'second_404_title',
+          'It seems the page you are looking for does not exist. Try these useful links:'
+        )}
+      </div>
     </div>
-  </div>
-);
+  );
+};
 
 export default NotFound;

package/src/components/atoms/not-found/not-found.module.scss

@@ -1,13 +1,10 @@
 .wrapper {
-  display: flex;
+  @include flex-align(center, center);
+  flex-direction: column;
   grid-area: main;
   padding: 0 2.4rem;
   margin-top: 8rem;
 
-  @include min(laptop){
-    margin-top: 0;
-  }
-
   .textBlock{
     @include min(tablet){
       max-width: 60%;

package/src/components/molecules/main/index.js

@@ -14,7 +14,7 @@ const Main = ({ section = {}, pageContext = {}, serverData = {}, exclOperator =
 
   return (
     <main className={styles.modulePage || ''}>
-      {NotFound && <NotFound />}
+      {NotFound && <NotFound pageContext={pageContext} />}
       {HtmlSitemap && <HtmlSitemap pageContext={pageContext} />}
       {section.modules &&
         section.modules.map((module) => (

package/src/pages/ar/404.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import App from 'gatsby-core-theme/src/components/app';
+
+const PageNotFound = ({ pageContext }) => <App pageContext={pageContext} />;
+
+PageNotFound.propTypes = {
+  pageContext: PropTypes.shape({
+    page: PropTypes.shape({
+      path: PropTypes.string,
+    }),
+  }).isRequired,
+};
+
+export default PageNotFound;