gatsby-core-theme 40.0.13 → 40.0.14

package/CHANGELOG.md

@@ -1,3 +1,22 @@
+## [40.0.14](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/compare/v40.0.13...v40.0.14) (2024-10-25)
+
+
+### Bug Fixes
+
+* add a constant to get more data for rocket sites ([edceac5](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/edceac5b2eef0550605e7a73d27d784552fa3d2b))
+* clean up ([b97f17c](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/b97f17ce8e93c3c172976a184d42fa695b6ac3ad))
+* fix test ([ba9ef61](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/ba9ef61395ce9a68b80e5f148142602f2bd69f57))
+* make style ([4f6caa4](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/4f6caa4fd7cdcae7ffa680b401b8b19028c9446d))
+* refactor ([8d72576](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/8d72576a00ad3235c9ca7af6d0043dadcbc9844c))
+* refactor admin bar ([b674893](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/b67489301d51421e545c928fd7dbafa571451ae8))
+* tracking api ([9f12c77](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/9f12c771ceaa48f96f30c0abe37ba49e11c60071))
+* tracking api ([bae53e4](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/bae53e4d6d31b47b6f5e05998ea4d64e35c2851f))
+
+
+* Merge branch 'tm-4861-admin-bar' into 'master' ([785772c](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/785772c1d169595efb891e8b0205ee1c0813140e))
+* Merge branch 'bonus-data-rocket' into 'master' ([4e73f21](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/4e73f213c0150f94e46f982565e76ea0cfb3d9ad))
+* Merge branch 'tm-4898-tracking-api-v2' into 'master' ([528ca42](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/528ca4281b9ee4e4bb3c15b2049a67889a23a711))
+
 ## [40.0.13](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/compare/v40.0.12...v40.0.13) (2024-10-24)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-core-theme",
-  "version": "40.0.13",
+  "version": "40.0.14",
   "description": "Gatsby Theme NPM Package",
   "author": "",
   "license": "ISC",

package/src/components/atoms/admin/bar/bar.module.scss

@@ -1,74 +1,45 @@
-.container, .subMenuList {
-     background-color: #23282d;
-}
-
-.innerContainer {
-    max-width: var(--main-container-max);
-    margin: 0 auto;
-
-    @include flex-align(center, space-between);
-}
-
-.menuItem {
-    @include flex-align(center, center);
-
-    color: #fff;
-    font-size: 1.3rem;
-    padding: 1rem 2rem;
-    gap: .5rem;
-
-    &:hover {
-        background-color: #32373c;
-        color: #00b9eb;
-    }
-}
+.container {
+  display: none;
+  background-color: #000;
 
-
-.label {
+  @include min(laptop){
+    @include flex-direction(row);
     @include flex-align(center, flex-start);
-
-    color: #fff;
-    font-size: 1.3rem;
-    padding: 1rem 2rem;
-    gap: .5rem;
-    font-weight: bold;
+  }
 }
 
-.labelBorder {
-    border-top: 1px solid #fff;
+.innerContainer {
+  max-width: var(--main-container-max);
+  height: var(--admin-bar-height, 7.2rem);
+  margin: 0 auto;
+  width: 100%;
+
+  @include flex-align(center, space-between);
 }
 
 .menuList {
-    @include flex-align(center, center);
+  @include flex-align(center, center);
 
-    position: relative;
+  gap: 2.4rem;
+  position: relative;
 
-    >li:hover {
-        > ul {
-            display: block;
-        }
+  > li:hover {
+    > div {
+        @include flex-direction(row);
     }
+  }
 }
 
-.subMenuList {
-    display: none;
-    position: absolute;
-    top: 100%;
-    z-index: 99;
+.checkbox {
+  color: #fff;
+  font-size: 1.4rem;
+  font-weight: 500;
 
-    > li a {
-        @include flex-align(center, flex-start);
-    }
+  @include flex-direction(row);
+  @include flex-align(center, center);
 
+  gap: 1rem;
+  padding-right: 2.5rem;
 }
 
-.preview {
-    background-color: #00b9eb;
-    color: #23282d;
-    font-weight: bold;
-}
 
-.previewOff {
-    background-color: #23282d;
-    color: #fff;
-}

package/src/components/atoms/admin/bar/index.js

@@ -1,106 +1,34 @@
+/* eslint-disable react/prop-types */
 import React, { useContext, useState } from "react";
 import PropTypes from "prop-types";
-import { FaEdit } from "@react-icons/all-files/fa/FaEdit";
-import { FaLayerGroup } from "@react-icons/all-files/fa/FaLayerGroup";
-import { MdMenu } from "@react-icons/all-files/md/MdMenu";
-import { MdArtTrack } from "@react-icons/all-files/md/MdArtTrack";
 import { Context } from "~context/MainProvider.js";
 import { getMenuObj } from "~helpers/menu";
+import { menusConfig } from "../../../../constants/admin-bar";
+import LayoutSection from "./layout-section";
+import PreviewLink from "./preview";
+import Logo from "./logo";
 import styles from "./bar.module.scss";
 
-const getRelationLinks = (page) => {
-  let hercLink = `${process.env.HERCULES_BACKEND_URL}`;
-  let linkText = ``;
-
-  switch (page.type) {
-    case "operator":
-      hercLink += `operators/${page.relation.operator_id}/sites-data?site=${process.env.GATSBY_SITE_NAME}`;
-      linkText = "Edit Operator Sites Data";
-      break;
-    case "game":
-      hercLink += `games/${page.relation.id}/sites?site_name=${process.env.GATSBY_SITE_NAME}`;
-      linkText = "Edit Game Sites Data";
-      break;
-    case "author":
-      hercLink += `site-authors/${page.relation_id}`;
-      linkText = "Edit Author Data";
-      break;
-    case "payment_method":
-      hercLink += `deposit-methods/${page.relation_id}`;
-      linkText = "Edit Payment Data";
-      break;
-    default:
-      return null;
-  }
-
-  return (
-    <>
-      <li>
-        <span className={`${styles.label}`}>Relations</span>
-      </li>
-      <li>
-        <a
-          className={styles.menuItem}
-          target="_blank"
-          href={hercLink}
-          rel="noreferrer"
-        >
-          <FaEdit /> {linkText}
-        </a>
-      </li>
-    </>
-  );
-};
-
-const getFooterLinks = (section) => {
-  const menus = ["as_seen_on", "links", "social_icons"];
-
-  return menus.map((menu) => {
-    if (section[menu]) {
-      return (
-        <li>
-          <a
-            className={styles.menuItem}
-            target="_blank"
-            href={`${process.env.HERCULES_BACKEND_URL}site-menus/${section[menu].id}/items`}
-            rel="noreferrer"
-          >
-            <MdMenu /> Edit {section[menu].title}
-          </a>
-        </li>
-      );
-    }
-    return null;
-  });
-};
-
 const AdminBar = ({ page, marketSections, menu }) => {
   const { setShowTranslationKeys, preview } = useContext(Context) || {};
   const [val, setVal] = useState(false);
+  const types = ["operator", "game", "author", "payment_method"];
 
-  const navSection = marketSections && marketSections.navigation;
-  const footerSection = marketSections && marketSections.footer;
-  const footerExtraFields = footerSection && footerSection.extra_fields;
+  const navSection = marketSections?.navigation;
+  const footerSection = marketSections?.footer?.extra_fields;
+  const menuObj = navSection?.modules
+    ? getMenuObj(navSection.modules, menu)
+    : null;
 
-  let menuObj = "";
-  if (navSection?.modules) {
-    menuObj = getMenuObj(navSection.modules, menu);
-  }
+  const menus =  menusConfig(menuObj, footerSection, page, types);
 
   return (
     <div className={styles.container}>
       <div className={styles.innerContainer}>
-        <a
-          className={styles.menuItem}
-          target="_blank"
-          href={`${process.env.HERCULES_BACKEND_URL}`}
-          rel="noreferrer"
-        >
-          Hercules
-        </a>
+        <Logo />
         <ul className={styles.menuList}>
           <li>
-            <label className={styles.menuItem} htmlFor="translation">
+            <label className={styles.checkbox} htmlFor="translation">
               <input
                 id="translation"
                 type="checkbox"
@@ -114,73 +42,8 @@ const AdminBar = ({ page, marketSections, menu }) => {
               Show translation keys
             </label>
           </li>
-          <li>|</li>
-          <li>
-            <span className={styles.menuItem}>
-              <MdArtTrack /> Layout
-            </span>
-            <ul className={styles.subMenuList}>
-              <li>
-                <span className={`${styles.label}`}>Navigation Section</span>
-              </li>
-              <li>
-                {menuObj && (
-                  <a
-                    className={styles.menuItem}
-                    target="_blank"
-                    href={`${process.env.HERCULES_BACKEND_URL}site-menus/${menuObj.menu_id}/items`}
-                    rel="noreferrer"
-                  >
-                    <FaLayerGroup /> Edit Main Menu
-                  </a>
-                )}
-              </li>
-              <li>
-                <span className={`${styles.label} ${styles.labelBorder}`}>
-                  Footer Section
-                </span>
-              </li>
-              {footerExtraFields && getFooterLinks(footerExtraFields)}
-            </ul>
-          </li>
-
-          <li>
-            <span className={styles.menuItem}>
-              <FaEdit /> Page
-            </span>
-            <ul className={styles.subMenuList}>
-              <li>
-                <a
-                  className={styles.menuItem}
-                  target="_blank"
-                  href={`${process.env.HERCULES_BACKEND_URL}site-pages/${page.id}`}
-                  rel="noreferrer"
-                >
-                  <FaEdit /> Edit Page
-                </a>
-              </li>
-              {getRelationLinks(page)}
-            </ul>
-          </li>
-
-          {!preview && <li>|</li>}
-
-          <li>
-            <a
-              className={`${styles.menuItem} ${styles.preview} ${
-                !preview ? styles.previewOff : ""
-              }`}
-              target={!preview ? "_blank" : ""}
-              href={
-                !preview
-                  ? `/preview/?path=${page.path}&market_id=${page.market_id}`
-                  : `/${page.path}`
-              }
-              rel="noreferrer"
-            >
-              {preview ? "Preview Mode On" : "Preview Mode Off"}
-            </a>
-          </li>
+          <LayoutSection menus={menus} />
+          <PreviewLink page={page} preview={preview} />
         </ul>
       </div>
     </div>
@@ -195,9 +58,6 @@ AdminBar.propTypes = {
   }),
   marketSections: PropTypes.shape({
     navigation: PropTypes.shape({}),
-    navigator: PropTypes.shape({
-      modules: PropTypes.shape({}),
-    }),
     footer: PropTypes.shape({}),
   }),
   menu: PropTypes.string,

package/src/components/atoms/admin/bar/layout-section/index.js

@@ -0,0 +1,64 @@
+import React from "react";
+import PropTypes from "prop-types";
+import styles from "./layout-section.module.scss";
+import Redirect from "./link";
+
+const LayoutSection = ({ menus }) => {
+  const paths = (type, id) => {
+    switch (type) {
+      case "menu":
+        return `site-menus/${id}/items`;
+      case "page":
+        return `site-pages/${id}`;
+      case "operator":
+        return `operators/${id}/sites-data?site=${process.env.GATSBY_SITE_NAME}`;
+      case "game":
+        return `games/${id}/sites?site_name=${process.env.GATSBY_SITE_NAME}`;
+      case "author":
+        return `site-authors/${id}`;
+      case "payment_method":
+        return `deposit-methods/${id}`;
+      default:
+        return "";
+    }
+  };
+
+  return menus?.map((res) => (
+    <li>
+      <span className={`${styles.menuItem} ${styles.link}`}>{res.label}</span>
+      <div className={styles.subMenuList}>
+        {res?.sections?.map((section) => (
+          <ul className={styles.lists}>
+            {section.label && (
+              <li>
+                <span className={styles.label}>{section.label}</span>
+              </li>
+            )}
+            {section?.links?.map((link) => (
+              <li>
+                <Redirect
+                  icon={link?.icon}
+                  path={paths(link?.type, link.data)}
+                  linkText={link.buttonText}
+                  description={link.description}
+                />
+              </li>
+            ))}
+          </ul>
+        ))}
+      </div>
+    </li>
+  ));
+};
+
+LayoutSection.propTypes = {
+  navSection: PropTypes.shape({}),
+  footerSection: PropTypes.shape({
+    extra_fields: PropTypes.shape({}),
+  }),
+  menuObj: PropTypes.shape({
+    menu_id: PropTypes.number,
+  }),
+};
+
+export default LayoutSection;

package/src/components/atoms/admin/bar/layout-section/layout-section.module.scss

@@ -0,0 +1,49 @@
+.subMenuList {
+  background-color: #000;
+
+  @include flex-direction(row);
+  @include flex-align(start, flex-start);
+
+  padding: 2.4rem;
+  display: none;
+  position: absolute;
+  top: 100%;
+  z-index: 99;
+  gap: 2.4rem;
+  border-radius: .8rem;
+  left: 0;
+
+  > li a {
+    @include flex-align(center, flex-start);
+  }
+}
+
+.menuItem {
+  @include flex-align(center, center);
+
+  padding: 1rem 2rem;
+  gap: 0.5rem;
+  border: 1px solid #fff;
+  border-radius: 0.4rem;
+  height: 4rem;
+  font-size: 1.4rem;
+  line-height: 2.4rem;
+  font-weight: 500;
+  color: #fff;
+}
+
+
+.label {
+  @include flex-align(center, flex-start);
+
+  color: #fff;
+  font-size: 2rem;
+  gap: 0.5rem;
+  font-weight: 500;
+}
+
+.lists{
+  @include flex-direction(column);
+
+  gap: 1.6rem;
+}

package/src/components/atoms/admin/bar/layout-section/link/index.js

@@ -0,0 +1,25 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+import PropTypes from "prop-types";
+import styles from './link.module.scss'
+
+export default function Link({icon, path, linkText, description}) {
+  return (
+    <a
+    className={styles.link}
+    target="_blank"
+    href={`${process.env.HERCULES_BACKEND_URL}${path}`}
+    rel="noreferrer"
+  >
+    <span className={styles.title}>{icon && icon} {linkText}</span>
+    <p className={styles.desc}>{description}</p>
+  </a>
+  )
+}
+
+Link.propTypes = {
+  icon: PropTypes.string,
+  path: PropTypes.string,
+  linkText: PropTypes.string,
+  description: PropTypes.string
+};

package/src/components/atoms/admin/bar/layout-section/link/link.module.scss

@@ -0,0 +1,28 @@
+.link {
+  @include flex-direction(column);
+
+  background: #0f172a;
+  width: 29rem;
+  border: 1px solid #1e293b;
+  border-radius: .8rem;
+  padding: 1.6rem;
+}
+
+.title{
+    font-size: 1.6rem;
+    color: #fff;
+    font-weight: 600;
+
+    @include flex-direction(row);
+    @include flex-align(center, flex-start);
+
+    svg{
+        margin-right: 1.6rem;
+    }
+}
+
+.desc{
+    font-size: 1.4rem;
+    color: #E2E8F0;
+    padding-left: 3.2rem;
+}

package/src/components/atoms/admin/bar/logo/index.js

@@ -0,0 +1,35 @@
+/* eslint-disable jsx-a11y/control-has-associated-label */
+import React from "react";
+import styles from "./logo.module.scss";
+
+export default function index() {
+  return (
+    <a
+      className={styles.logo}
+      target="_blank"
+      href={`${process.env.HERCULES_BACKEND_URL}`}
+      rel="noreferrer"
+    >
+      <svg
+        id="sidebar-logo"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 117.96 117.84"
+        height="40px"
+        fill="#fff"
+      >
+        <path
+          d="M117.96 29.34v59.39c0 8.31-2.42 15.35-7.03 20.43l-.33.36c-.13.14-.26.28-.4.41-.05.06-.11.11-.17.17l-.07.07c-.05.05-.11.11-.17.16-.07.07-.15.14-.22.21l-.36.33c-4.93 4.44-11.88 6.97-20.62 6.97H29.36c-8.74 0-15.69-2.53-20.62-6.97l-.36-.33c-.13-.13-.27-.26-.4-.38-.08-.08-.16-.16-.23-.24-.13-.13-.26-.26-.39-.4l-.33-.36C2.42 104.09 0 97.04 0 88.73V29.34c0-9 2.54-15.97 7.03-20.86.11-.12.22-.24.33-.35l.12-.12c.05-.05.11-.11.16-.17l.07-.07c.06-.06.11-.11.17-.16.1-.1.21-.2.32-.31l.36-.33C13.67 2.35 20.83 0 29.36 0H88.6c8.54 0 15.7 2.35 20.81 6.97l.36.33c.1.1.21.2.31.29.08.08.16.15.23.23.1.1.2.2.29.3.11.12.22.23.33.35 4.49 4.9 7.03 11.88 7.03 20.87"
+          fill="#0037ff"
+         />
+        <path
+          className="st1"
+          d="M68.16 16.66l-.93 25.83 9.71 6.96v33.64l-10.89-7.8-.89 24.54 13.25-8.56 14.64-38.22 8.63.37zM41.02 83.09V49.45l9.83-7.05-.92-25.74-33.52 36.76 8.63-.37 14.64 38.22 13.25 8.56-.89-24.64z"
+         />
+        <path
+          fill="#ffd100"
+          d="M72.94 51.51L58.98 41.5 45.02 51.51V75.3l13.96-10 13.96 10z"
+         />
+      </svg>
+    </a>
+  );
+}

package/src/components/atoms/admin/bar/logo/logo.module.scss

@@ -0,0 +1,8 @@
+.logo{
+    font-size: 1.6rem;
+    font-weight: bold;
+    color: #fff;
+
+    @include flex-direction(row);
+    @include flex-align(center, center);
+}

package/src/components/atoms/admin/bar/preview/index.js

@@ -0,0 +1,32 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { FiEye } from "@react-icons/all-files/fi/FiEye";
+import { FiEyeOff } from "@react-icons/all-files/fi/FiEyeOff";
+import styles from "./preview.module.scss";
+
+const PreviewLink = ({ page, preview }) => (
+    <li>
+      <a
+        className={styles.preview}
+        target={!preview ? "_blank" : ""}
+        href={
+          !preview
+            ? `/preview/?path=${page.path}&market_id=${page.market_id}`
+            : `/${page.path}`
+        }
+        rel="noreferrer"
+      >
+        Preview page {preview ? <FiEyeOff /> : <FiEye />}
+      </a>
+    </li>
+  );
+
+PreviewLink.propTypes = {
+  page: PropTypes.shape({
+    path: PropTypes.string,
+    market_id: PropTypes.number,
+  }),
+  preview: PropTypes.bool,
+};
+
+export default PreviewLink;

package/src/components/atoms/admin/bar/preview/preview.module.scss

@@ -0,0 +1,14 @@
+.preview {
+    background-color: #165af8;
+    color: #fff;
+    height: 4rem;
+    padding: 0.6rem 1.6rem;
+    border-radius: 0.4rem;
+    font-weight: 500;
+
+    @include flex-direction(row);
+    @include flex-align(center, center);
+
+    gap: 0.8rem;
+  }
+  

package/src/components/atoms/header-operator-bannner/index.js

@@ -42,6 +42,7 @@ const HeaderOperatorBaner = ({
           ctaBtn
           item={operator}
           tracker="main"
+          pageTemplate={template}
           buttonType={buttonType}
           modulePosition={modulePosition}
           itemPosition={itemPosition}

package/src/components/atoms/operator-info-block/index.js

@@ -6,7 +6,7 @@ import PrettyLink from '~atoms/pretty-link';
 import styles from './operator-info-block.module.scss';
 import keygen from '~helpers/keygen';
 
-const OperatorInfoBlock = ({ page,  }) => {
+const OperatorInfoBlock = ({ page, modulePosition }) => {
   const { relation } = page;
   const status = relation?.status;
   if (status !== 'active') return null;
@@ -21,7 +21,7 @@ const OperatorInfoBlock = ({ page,  }) => {
   return (
     <>
       <ul className={styles.operatorInfoBlock || ''}>
-        {infos.map((item) => {
+        {infos.map((item, index) => {
           return (
             <li key={keygen()}>
               <p className={styles.label || ''}>{item.field_label}</p>
@@ -34,6 +34,8 @@ const OperatorInfoBlock = ({ page,  }) => {
                     tracker="main"
                     clickedElement="operator_name"
                     className="operator-info-block-gtm"
+                    modulePosition={modulePosition}
+                    itemPosition={index + 1}
                   >
                     {relation[item.field_name]}
                   </PrettyLink>
@@ -68,6 +70,7 @@ const OperatorInfoBlock = ({ page,  }) => {
 OperatorInfoBlock.propTypes = {
   // eslint-disable-next-line react/no-unused-prop-types
   activeOperator: PropTypes.bool,
+  modulePosition: PropTypes.number,
   page: PropTypes.shape({
     relation: PropTypes.shape({
       url: PropTypes.string,

package/src/components/molecules/bonus/template-one/index.js

@@ -32,7 +32,7 @@ export default function Bonus({
             pageTemplate={pageTemplate}
             module={module.name}
             tracker={module?.tracking_link_name || "main"}
-            clickedElement="oneliner"
+            clickedElement="logo"
             className={`${styles.logo || ""} operator-banner-gtm logo-cta`}
             modulePosition={modulePosition}
           >
@@ -59,6 +59,7 @@ export default function Bonus({
             <BonusBox
               item={operator}
               module={module.name}
+              pageTemplate={pageTemplate}
               tracker={module?.type || "main"}
               modulePosition={modulePosition}
             />

package/src/components/molecules/bonus/template-two/index.js

@@ -43,12 +43,10 @@ export default function TemplateOne({
 
   return (
     <div
-      className={`${styles.operatorBanner || ""} ${
-        !closedBanner ? styles.show : styles.hide
-      } ${styles.tncEnable}
-      ${tncFixed ? styles.showTncFixed || "" : ""} ${
-        floating ? styles.floating : ""
-      }`}
+      className={`${styles.operatorBanner || ""} ${!closedBanner ? styles.show : styles.hide
+        } ${styles.tncEnable}
+      ${tncFixed ? styles.showTncFixed || "" : ""} ${floating ? styles.floating : ""
+        }`}
     >
       <div className={styles.container}>
         <div>
@@ -57,7 +55,7 @@ export default function TemplateOne({
             pageTemplate={pageTemplate}
             module={module.name}
             tracker={module?.tracking_link_name || "main"}
-            clickedElement="oneliner"
+            clickedElement="logo"
             className={`${styles.logo || ""} operator-banner-gtm logo-cta`}
           >
             <LazyImage
@@ -85,7 +83,7 @@ export default function TemplateOne({
               <p className={styles.welcomeBonus}>{welcomeBonusText}</p>
             )}
 
-            <BonusBox item={operator} tracker={module?.type || "main"} />
+            <BonusBox item={operator} tracker={module?.type || "main"} pageTemplate={pageTemplate} />
             {!tncFixed && <Tnc isFixed={tncFixed} operator={operator} />}
           </div>
         </div>

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

@@ -16,6 +16,7 @@ const Content = ({
   isHomepageFirstModule = false,
   isModuleIntroduction = '',
   page,
+  pageTemplate,
   moduleName = 'content',
   isContentCollapsible = false,
   icon = <IoIosArrowDown />,
@@ -25,7 +26,7 @@ const Content = ({
 }) => {
   const { show_more_label, show_less_label, show_more_enabled } = module || {}
 
-  const pageTemplate = page?.template
+  const pageTemplateData = page?.template || pageTemplate;
 
   const [showMore, setShowMore] = useState(false)
 
@@ -46,20 +47,21 @@ const Content = ({
 
   const mainContent = (content, customClassName = '') => (
     <div
-      className={` ${styles.content || ''} ${lists.ul || ''} ${
-        blockquote.blockquote || ''
-      } 
+      className={` ${styles.content || ''} ${lists.ul || ''} ${blockquote.blockquote || ''
+        } 
       ${styles[customClass] || ''}
-      ${switchStyle(module.style) || ''} ${
-        isHomepageFirstModule ? styles.homepageFirstModuleContent || '' : ''
-      } ${
-        isModuleIntroduction ? styles.moduleIntroMargin || '' : ''
-      } ${customClassName}
+      ${switchStyle(module.style) || ''} ${isHomepageFirstModule ? styles.homepageFirstModuleContent || '' : ''
+        } ${isModuleIntroduction ? styles.moduleIntroMargin || '' : ''
+        } ${customClassName}
       `}
     >
       {parse(content, {
         replace: (node) =>
-          replaceMedia(node, moduleWidth, moduleName, pageTemplate, modulePosition, styles, page )
+          replaceMedia(node, moduleWidth, moduleName, pageTemplateData, modulePosition, styles, {
+            siteName: page?.siteInfo?.site_name,
+            pageTitle: page?.title,
+            name: page?.relation?.name,
+          })
       })}
     </div>
   )
@@ -70,21 +72,23 @@ const Content = ({
     showMoreText = false
   ) => (
     <div
-      className={` ${styles.content || ''} ${lists.ul || ''} ${
-        blockquote.blockquote || ''
-      } 
+      className={` ${styles.content || ''} ${lists.ul || ''} ${blockquote.blockquote || ''
+        } 
       ${styles[customClass] || ''}
        ${showMore && !isContentCollapsible ? styles.showMore : ''}  
-      ${switchStyle(module.style) || ''} ${
-        isHomepageFirstModule ? styles.homepageFirstModuleContent || '' : ''
-      } ${
-        isModuleIntroduction ? styles.moduleIntroMargin || '' : ''
-      } ${customClassName}
+      ${switchStyle(module.style) || ''} ${isHomepageFirstModule ? styles.homepageFirstModuleContent || '' : ''
+        } ${isModuleIntroduction ? styles.moduleIntroMargin || '' : ''
+        } ${customClassName}
         ${showMoreText && !showMore ? styles.hide : ''}
       `}
     >
       {parse(content, {
-        replace: (node) => replaceMedia(node, page, {}, moduleWidth, styles)
+        replace: (node) =>
+          replaceMedia(node, moduleWidth, moduleName, pageTemplateData, modulePosition, styles, {
+            siteName: page?.siteInfo?.site_name,
+            pageTitle: page?.title,
+            name: page?.relation?.name,
+          })
       })}
     </div>
   )
@@ -96,18 +100,16 @@ const Content = ({
       {mainContent(module.value)}
       <button
         type="button"
-        className={`${
-          isContentCollapsible
-            ? styles.showMoreTwoButton || ''
-            : styles.showMoreButton || ''
-        } ${(!isContentCollapsible && showMore && styles.hide) || ''} ${
-          (showMore && isContentCollapsible && styles.showMoreTwoButtonOpen) ||
+        className={`${isContentCollapsible
+          ? styles.showMoreTwoButton || ''
+          : styles.showMoreButton || ''
+          } ${(!isContentCollapsible && showMore && styles.hide) || ''} ${(showMore && isContentCollapsible && styles.showMoreTwoButtonOpen) ||
           ''
-        }`}
+          }`}
         onClick={handleChange}
         title="showMoreContentButton"
       >
-        {showMore ? show_less_label || show_more_label :  show_more_label}
+        {showMore ? show_less_label || show_more_label : show_more_label}
         {icon && isContentCollapsible && icon}
       </button>
 
@@ -130,7 +132,13 @@ Content.propTypes = {
     style: PropTypes.string,
     show_more_content: PropTypes.string
   }),
-  page: PropTypes.shape({ template: PropTypes.string }),
+  page: PropTypes.shape({
+    template: PropTypes.string,
+    title: PropTypes.string,
+    relation: PropTypes.shape({ name: PropTypes.string }),
+    siteInfo: PropTypes.shape({ site_name: PropTypes.string })
+  }),
+  pageTemplate: PropTypes.string,
   moduleName: PropTypes.string,
   isHomepageFirstModule: PropTypes.bool,
   isModuleIntroduction: PropTypes.string,

package/src/components/molecules/floating-area/index.js

@@ -45,7 +45,10 @@ export default function FloatingArea({
           <Suspense fallback={<></>}>
             <OperatorBanner
               type={pageType}
-              template={template}
+              pageTemplate={template}
+              module={{
+                name: 'bonus',
+              }}
               sticky
               logo={pageContext.page.relation.logo_url}
               operator={pageContext.page.relation}

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

@@ -109,14 +109,15 @@ const Modules = ({ module, page, pageContext, modulePosition }) => {
   const anchorLabel = module.anchor_label
     ? removeSymbols(anchorLink(module.anchor_label))
     : module.name === 'archive'
-    ? 'archiveLabel'
-    : `module_${module.module_value_id}`
+      ? 'archiveLabel'
+      : `module_${module.module_value_id}`
 
   const extraProps = () => {
     switch (module.name) {
       case 'bonus':
         return {
           operator: module?.value,
+          pageTemplate: page?.template,
           logo: module?.value?.logo?.url,
           hasLink: true
         }
@@ -145,26 +146,24 @@ const Modules = ({ module, page, pageContext, modulePosition }) => {
           module.name === 'archive' && module.module_title ? null : anchorLabel
         }
         style={module.background_color && moduleBackgroundColor}
-        className={`${
-          styles[moduleClassName] !== undefined
-            ? styles[moduleClassName] || ''
-            : ''
-        } ${module.name || ''} ${styles.module || ''} ${
-          module?.style ? styles[module.style] || '' : ''
-        } module`}
+        className={`${styles[moduleClassName] !== undefined
+          ? styles[moduleClassName] || ''
+          : ''
+          } ${module.name || ''} ${styles.module || ''} ${module?.style ? styles[module.style] || '' : ''
+          } module`}
       >
         <ModuleTitle
           module={module}
           anchorLabel={module.name === 'archive' ? anchorLabel : ''}
         />
         {module.module_introduction && (
-          <Content module={{ value: module.module_introduction }} />
+          <Content module={{ value: module.module_introduction }} pageTemplate={page?.template} modulePosition={modulePosition} />
         )}
 
         {module.name === 'accordion' ||
-        module.name === 'content' ||
-        module.name === 'top_list' ||
-        module.name === 'anchor' ? (
+          module.name === 'content' ||
+          module.name === 'top_list' ||
+          module.name === 'anchor' ? (
           <ModuleComponent
             module={module}
             page={page}
@@ -184,7 +183,7 @@ const Modules = ({ module, page, pageContext, modulePosition }) => {
           </Suspense>
         )}
 
-        {admin && <AdminButton page={page} module={module} modulePosition={modulePosition - 1} /> }
+        {admin && <AdminButton page={page} module={module} modulePosition={modulePosition - 1} />}
       </div>
     )
   )

package/src/components/molecules/toplist/default-row/index.js

@@ -65,7 +65,8 @@ const Row = ({
         />
       </PrettyLink>
       <Bonus
-        module="bonus"
+        module={module}
+        clickedElement='oneliner'
         item={item}
         tracker={oneliner}
         modulePosition={modulePosition}

package/src/constants/admin-bar.js

@@ -0,0 +1,88 @@
+/* eslint-disable import/prefer-default-export */
+/* eslint-disable react/react-in-jsx-scope */
+import React from 'react'
+import { IoMdMenu } from "@react-icons/all-files/io/IoMdMenu";
+import { FiEye } from "@react-icons/all-files/fi/FiEye";
+import { IoLink } from "@react-icons/all-files/io5/IoLink";
+import { RiInstagramLine } from "@react-icons/all-files/ri/RiInstagramLine";
+import { FiDatabase } from "@react-icons/all-files/fi/FiDatabase";
+import { FaLayerGroup } from "@react-icons/all-files/fa/FaLayerGroup";
+
+export const menusConfig = (menuObj, footerSection, page, types) => [
+  {
+    label: "Layout",
+    sections: [
+      {
+        label: "Main Menu",
+        links: [
+          {
+            data: menuObj?.menu_id || null,
+            buttonText: "Edit Main Menu",
+            icon: <IoMdMenu fontSize={20} />,
+            type: "menu",
+            description: "Change the navigation structure and links in the main menu.",
+          },
+        ],
+      },
+      {
+        label: "Footer Menu",
+        links: [
+          {
+            buttonText: "Edit as seen on",
+            icon: <FiEye fontSize={20} />,
+            type: "menu",
+            data: footerSection?.as_seen_on.id,
+            description: "Change the items within the ‘As seen on’ section.",
+          },
+          {
+            buttonText: "Edit footer links",
+            icon: <IoLink fontSize={20}/>,
+            type: "menu",
+            data: footerSection?.links.id,
+            description: "Change the URL and labels within the footer menu.",
+          },
+          {
+            buttonText: "Edit Social icons",
+            icon: <RiInstagramLine fontSize={20} />,
+            type: "menu",
+            data: footerSection?.social_icons.id,
+            description: "Add or replace social media links.",
+          },
+        ],
+      },
+    ],
+  },
+  {
+    label: "Page",
+    sections: [
+      {
+        label: "Page",
+        links: [
+          {
+            data: page.id || null,
+            buttonText: "Edit Page",
+            icon: <FaLayerGroup fontSize={20} />,
+            type: "page",
+            description: "Make changes to the page settings.",
+          },
+        ],
+      },
+      {
+        ...(types.includes(page?.type) && {
+          label: "Relations",
+          links: [
+            {
+              ...(types.includes(page?.type) && {
+                data: page?.relation?.operator_id,
+                buttonText: `Edit ${page?.type} Sites Data`,
+                icon: <FiDatabase fontSize={20} />,
+                type: page?.type,
+                description: "Make changes to Hercules sites data.",
+              }),
+            },
+          ],
+        }),
+      },
+    ],
+  },
+];

package/src/constants/settings.mjs

@@ -55,5 +55,10 @@ export default {
     default: {
       filter_pages: ['operator'],
     }
+  },
+  remove_bonus_data:{
+    default:['withdrawal_methods', 'currencies', 'license_objects','deposit_methods' ],
+    "casinossuisses.org": ['withdrawal_methods', 'currencies'],
+    "demo-rocket-theme.gigmedia.com": ['withdrawal_methods', 'currencies']
   }
 };

package/src/helpers/processor/modules.mjs

@@ -134,7 +134,7 @@ export function processCardsV2(
   const moduleSelectedTypes =
     module.cards_selector_filters && module.cards_selector_filters.types;
 
-  const market = pagesMappedById[pageId] ? pagesMappedById[pageId].market : '';
+  const market = pagesMappedById[pageId] ? pagesMappedById[pageId].market : "";
 
   module.items = [];
 
@@ -289,10 +289,10 @@ export function processBonus(module, relations) {
     cloneDeep(relations.operator[module.value])
   );
   if (object.bonus) {
-    delete object.bonus.withdrawal_methods;
-    delete object.bonus.currencies;
-    delete object.bonus.license_objects;
-    delete object.bonus.deposit_methods;
+    const removeFields =
+      settings.remove_bonus_data[process.env.GATSBY_SITE_NAME] ||
+      settings.remove_bonus_data.default;
+      removeFields.forEach(res => delete object.bonus[res])
   }
 
   module.value = pick(
@@ -307,10 +307,10 @@ export function processTopListModule(
   pages,
   markets,
   data,
-  toplists,
+  toplists
 ) {
-  module.items = module.items.map((listItem) => {    
-    const {type} = listItem;
+  module.items = module.items.map((listItem) => {
+    const { type } = listItem;
     const showLoadMore = listItem.show_load_more || 0;
     const itemsCount = listItem.num_items_initial_load
       ? Number(listItem.num_items_initial_load)
@@ -329,8 +329,8 @@ export function processTopListModule(
         .toLocaleString("en-US", options)
         .replace(" ", ", ");
     }
-    
-    if (listItem.id && toplists && toplists[listItem.id.toString()]) {      
+
+    if (listItem.id && toplists && toplists[listItem.id.toString()]) {
       listItem.items = toplists[listItem.id].items;
     }
 
@@ -340,24 +340,29 @@ export function processTopListModule(
           if (item.ribbons && item.ribbons.length === 0) delete item.ribbons;
           if (item.ribbon_ids && item.ribbon_ids.length === 0)
             delete item.ribbon_ids;
-          
+
           const operatorRelation = Object.values(relations.operator).find(
-            (operator) =>  operator.operator_id === item.operator_id && type === operator.type
+            (operator) =>
+              operator.operator_id === item.operator_id &&
+              type === operator.type
           );
 
-          operatorRelation.ribbons = item.ribbon_ids && item.ribbon_ids.length === 0 ? operatorRelation.ribbons : item.ribbon_ids;
+          operatorRelation.ribbons =
+            item.ribbon_ids && item.ribbon_ids.length === 0
+              ? operatorRelation.ribbons
+              : item.ribbon_ids;
 
           const operatorPage =
             pages && pages.operator && operatorRelation
               ? pages.operator.filter(
-                  (page) =>page.relation.operator_id === operatorRelation.operator_id
-                    
+                  (page) =>
+                    page.relation.operator_id === operatorRelation.operator_id
                 )
               : [];
 
           const reviewLink =
             operatorPage.length > 0 ? operatorPage[0].path : null;
-        
+
           const clone = pick(
             sanitizeOperatorData(
               cloneDeep(operatorRelation),
@@ -376,11 +381,14 @@ export function processTopListModule(
   });
 }
 
-export function processContentModule(module, translations, relationData, content) {
-  
-  
-  module.value = content && content[module.value] || module.value;
-  
+export function processContentModule(
+  module,
+  translations,
+  relationData,
+  content
+) {
+  module.value = (content && content[module.value]) || module.value;
+
   module.value = generatePlaceholderString(
     module.value,
     translations,
@@ -393,8 +401,6 @@ export function processContentModule(module, translations, relationData, content
       relationData
     );
   }
-
-
 }
 
 export function shouldSavePrefilled(module = {}, siteName) {
@@ -408,10 +414,10 @@ export function shouldSavePrefilled(module = {}, siteName) {
   );
 }
 
-export function processSpotlightModule(module = {}, content){
+export function processSpotlightModule(module = {}, content) {
   module.items.forEach((item) => {
-    item.content = content && content[item.content] || item.content;
-    item.text = content && content[item.text] || item.text;
+    item.content = (content && content[item.content]) || item.content;
+    item.text = (content && content[item.text]) || item.text;
   });
   return module;
 }
@@ -457,7 +463,15 @@ export function processModule(
   } else if (module.name === "bonus") {
     processBonus(module, relations);
   } else if (module.name === "top_list") {
-    processTopListModule(module, relations, pages, markets, data, toplists, isPreview);
+    processTopListModule(
+      module,
+      relations,
+      pages,
+      markets,
+      data,
+      toplists,
+      isPreview
+    );
   } else if (module.name === "spotlights") {
     processSpotlightModule(module, content);
   } else if (module.name === "menu" && menus && menus[module.menu_id]) {