gatsby-core-theme 30.0.56 → 30.0.58

package/CHANGELOG.md

@@ -1,3 +1,41 @@
+## [30.0.58](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v30.0.57...v30.0.58) (2024-01-23)
+
+
+### Bug Fixes
+
+* cookie consent ([0e6fa43](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/0e6fa43da500b195bfeec7f5c4ea8df44eeb711b))
+* removed gap ([325589d](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/325589dc50551a287837564b11257a408df00047))
+
+
+### Code Refactoring
+
+* hide arrow on image mode template two for spotlights if link is not added ([e744e09](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/e744e09a1f7df152709a576c65461cf62c1370d6))
+
+
+* Merge branch 'tm-3950-spotlights' into 'master' ([9707c5c](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/9707c5c786fe0ab7f7fd764c4d7efc466b1f47b1))
+* Merge branch 'tm-3981-grouping-bottom-page' into 'master' ([0da1509](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/0da150983e5a437722ed767dba318ee1729badf6))
+
+## [30.0.57](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v30.0.56...v30.0.57) (2024-01-19)
+
+
+### Bug Fixes
+
+* carousel item ([5d6429c](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/5d6429c3bdaff2ce76d73cc740ce3b905774e9bf))
+* contact-form ([6b11b39](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/6b11b39eb067e9078b3c9174908e4a7edc75d957))
+* grouped Scroll to Top - Cookie Consent - Operator Banner ([5478d44](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/5478d44bd6a399adf5a3d80bb6497e7820eabf6f))
+* remove global states for cookie and banner and fixed tests ([950f798](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/950f7986d3bc525f21112477d8e4c8e76b975313))
+* revert changes ([f7bd71f](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/f7bd71fa1ad948490846988ac2992d6ef2964612))
+* slider image width and height ([148d36f](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/148d36f661c976c8f22c00932e719abec8fad67a))
+* slider image width and height ([9423297](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/94232974a3a94115034807ec885bd16202f8804e))
+* translations moved to page context ([dfb6d3c](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/dfb6d3c8275601081202a65972f1e1109a96474f))
+* update carousel ([c471cce](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/c471cce2a17e0037a4e1219be3b5d1fefc1f4aea))
+
+
+* Merge branch 'irishluck-pre-launch-fix' into 'master' ([5dfedc3](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/5dfedc3972f6f8a312e4ddd06009dc60d3655bf6))
+* Merge branch 'irishluck-pre-launch-fix' into 'master' ([4f076e2](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/4f076e20363c11fda4eebdc971d9f52d54b95511))
+* Merge branch 'tm-3981-grouping-bottom-page' into 'master' ([a2ec654](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/a2ec65494f02d2c6e56dcf432b22f1302cb68b4c))
+* Merge branch 'contact-form' into 'master' ([313309b](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/313309bd8335e79d9c041f3d341a5e84f475ba48))
+
 ## [30.0.56](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v30.0.55...v30.0.56) (2024-01-18)
 
 

package/gatsby-node.mjs

@@ -430,7 +430,6 @@ export const createPages = async ({ actions: { createPage } }, themeOptions) =>
             title: 'Tracker',
             relation_type: 'page',
             language: languageKey,
-            translations: processed.relations.translations[marketOperator],
             path: trackerPath,
             meta_robots: ['noindex', 'nofollow'],
           };
@@ -439,6 +438,7 @@ export const createPages = async ({ actions: { createPage } }, themeOptions) =>
             component: trackerComp,
             context: {
               page: trackerPageObject,
+              translations: processed.relations.translations[marketOperator],
               siteInfo,
               operator,
               isTracker: true,

package/package.json

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

package/src/components/atoms/scroll-to-top/index.js

@@ -1,74 +1,28 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import React, { useContext, useEffect, useState, useRef } from 'react';
+import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
-import isSticky from '~hooks/stickyOnScroll';
-import { Context } from '~context/MainProvider';
 import styles from './scroll-to-top.module.scss';
 
-const ScrollToTop = ({ scrollTo = '0', offsetTop = 400, hideOnScrollDown = false }) => {
-  const { cookieAccepted, bannerIsActive } = useContext(Context) || {};
-  const [show, setShow] = useState(false);
-  let scrollY = typeof window !== 'undefined' && (window?.scrollY || 0);
-  const showScroll = isSticky(offsetTop);
+const ScrollToTop = ({ scrollTo = '0' }) => {
   const scrollToTopBtn = useRef();
 
   const scrollTop = () => {
     window.scrollTo({ top: scrollTo, behavior: 'smooth' });
   };
 
-  const handleEvent = () => {
-    if (window.scrollY > scrollY) {
-      setShow(false);
-    } else {
-      setShow(true);
-    }
-    const scrollTopBtnHeight = parseInt(scrollToTopBtn.current.clientHeight / 2);
-    const footerElementRect =
-      document.querySelector('footer') && document.querySelector('footer').getBoundingClientRect();
-
-    if (footerElementRect) {
-      if (footerElementRect.y < window.innerHeight) {
-        scrollToTopBtn.current.style.bottom = `${
-          window.innerHeight - footerElementRect.y - scrollTopBtnHeight
-        }px`;
-      } else {
-        scrollToTopBtn.current.style.bottom = '0px';
-      }
-    }
-
-    scrollY = window.scrollY;
-  };
-
-  useEffect(() => {
-    window.addEventListener('scroll', handleEvent);
-    window.addEventListener('mousemove', handleEvent);
-    window.addEventListener('touchstart', handleEvent);
-
-    return () => {
-      window.removeEventListener('scroll', handleEvent);
-      window.removeEventListener('mousemove', handleEvent);
-      window.removeEventListener('touchstart', handleEvent);
-    };
-  }, []);
-
   return (
     <button
       type="button"
       aria-label="Scroll to top"
       onClick={(e) => scrollTop(e)}
       ref={scrollToTopBtn}
-      className={`${styles.scrollToTop || ''} ${cookieAccepted && (styles.cookieAccepted || '')} ${
-        !bannerIsActive && (styles.closedBanner || '')
-      } ${!show && hideOnScrollDown && (styles?.showScrollToTopButton || '')}`}
-      style={{ display: showScroll ? 'flex' : 'none' }}
+      className={styles.scrollToTop}
     />
   );
 };
 
 ScrollToTop.propTypes = {
   scrollTo: PropTypes.string,
-  offsetTop: PropTypes.number,
-  hideOnScrollDown: PropTypes.bool,
 };
 
 export default ScrollToTop;

package/src/components/atoms/scroll-to-top/scroll-to-top.module.scss

@@ -1,9 +1,3 @@
-body[data-scroll='0'] {
-  .scrollToTop {
-    opacity: 0;
-  }
-}
-
 .showScrollToTopButton {
   @include max(mobile) {
       display: none !important;
@@ -18,9 +12,7 @@ body[data-scroll='0'] {
   width: 64px;
   height: 64px;
   text-align: center;
-  bottom: 47rem;
-  position: fixed;
-  right: 0;
+  margin-left: auto;
 
   &:before {
     @include arrow(#000, 2rem, up, false);
@@ -28,36 +20,4 @@ body[data-scroll='0'] {
     bottom: calc(50% - 1.25rem);
     left: calc(50% - 1rem);
   }
-
-  &.cookieAccepted {
-    bottom: 25rem;
-
-    &.closedBanner {
-      bottom: 0;
-    }
-
-    @include min(tablet) {
-      bottom: 11rem;
-    }
-  }
-
-  &.closedBanner {
-    bottom: 22rem;
-
-    @include min(tablet) {
-      bottom: 16.2rem;
-    }
-
-    @include min(laptop) {
-      bottom: 7.4rem;
-    }
-  }
-
-  @include min(tablet) {
-    bottom: 27.2rem;
-  }
-
-  @include min(laptop) {
-    bottom: 18.4rem;
-  }
 }

package/src/components/molecules/bonus/template-two/bonus.module.scss

@@ -1,14 +1,10 @@
 .operatorBanner {
   width: 100%;
-  bottom: 0;
   padding: 1.6rem 1.6rem 2.4rem 1.6rem;
-  position: fixed;
   z-index: var(--cookie-consent-index);
   border-top: 1.5px solid var(--operator-banner-sticky-border-color, #515156);
   background: var(--operator-banner-sticky-backgorund, #1b1b1c);
   box-shadow: 0px 4px 12px 0px rgba(27, 27, 28, 0.08);
-  left: 0;
-  right: 0;
 
   @include min(tablet) {
     padding: 1.6rem;
@@ -151,8 +147,8 @@
 
 .closeBtn {
   position: absolute;
-  right: 0;
-  top: 0;
+  right: -1rem;
+  top: -1rem;
   background-color: #3c3c40;
   @include min(tablet) {
     width: 2rem;
@@ -169,7 +165,7 @@
   left: 0;
   right: 0;
   transition: all 1s;
-  bottom: -10rem;
+  margin-bottom: -10rem;
   margin-left: auto;
   margin-right: auto;
   padding: 0.8rem 1.6rem;
@@ -182,7 +178,7 @@
 }
 
 .show {
-  bottom: 1rem;
+  margin-bottom: 0;
 }
 
 .tncEnable {

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

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import React, { useState, useEffect, useContext } from 'react';
+import React, { useState, useContext } from 'react';
 import PropTypes from 'prop-types';
 import { FaArrowRight } from '@react-icons/all-files/fa/FaArrowRight';
 import { IoMdClose } from '@react-icons/all-files/io/IoMdClose';
@@ -29,7 +29,7 @@ export default function TemplateOne({
 }) {
   const [show, setShow] = useState(showOnLoad);
   const [closed, setClosed] = useState(false);
-  const { cookieAccepted, setBannerActive, translations } = useContext(Context) || {};
+  const { translations } = useContext(Context) || {};
   const { standardised_logo_url, logo_url, bonus, name } = operator || {};
   const logo = standardised_logo_url || logo_url;
 
@@ -41,12 +41,8 @@ export default function TemplateOne({
       defaultValue: 'Play',
     },
   };
-  // eslint-disable-next-line no-unused-expressions
+
   isSticky(stickyOffset, setShow);
-  useEffect(() => {
-    // eslint-disable-next-line no-unused-expressions
-    setBannerActive(show);
-  });
 
   const clickHandler = () => {
     setShow(false);
@@ -57,10 +53,8 @@ export default function TemplateOne({
     !closed && (
       <div
         className={`${styles.operatorBanner || ''} ${show && styles.show} ${
-          cookieAccepted && (styles.cookieAccepted || '')
-        } ${tncEnable ? styles.tncEnable : ''} ${showTncFixed ? styles.showTncFixed || '' : ''} ${
-          floating ? styles.floating : ''
-        }
+          tncEnable ? styles.tncEnable : ''
+        } ${showTncFixed ? styles.showTncFixed || '' : ''} ${floating ? styles.floating : ''}
         `}
       >
         <div className={styles.container}>
@@ -106,14 +100,14 @@ export default function TemplateOne({
             translationsObj={translationsObj}
           />
           {showTncFixed && <Tnc hasCollapse={false} operator={operator} />}
+          <IoMdClose
+            className={`${styles.closeBtn || ''}`}
+            onClick={clickHandler}
+            fontSize={16}
+            color="#ffffff"
+            title="Close Icon"
+          />
         </div>
-        <IoMdClose
-          className={`${styles.closeBtn || ''}`}
-          onClick={clickHandler}
-          fontSize={16}
-          color="#ffffff"
-          title="Close Icon"
-        />
       </div>
     )
   );

package/src/components/molecules/carousel/default-slide/index.js

@@ -9,7 +9,7 @@ import styles from './default-slide.module.scss';
 
 const Slide = ({
   item = {},
-  imageSizes = { width: null, height: 930 },
+  imageSizes = { width: 675, height: 930 },
   slideTitle = '',
   hideCaptions = false,
 }) => {
@@ -21,9 +21,13 @@ const Slide = ({
           className={styles.image || ''}
           src={imagePrettyUrl(item.image, imageSizes.width, imageSizes.height)}
           alt={getAltText(item?.image_object, item.title || slideTitle)}
+          width={imageSizes.width}
+          height={imageSizes.height}
         />
       )}
-      {item.content && <p className={styles.content || ''}>{item.content}</p>}
+      {item.content && (
+        <div className={styles.content || ''} dangerouslySetInnerHTML={{ __html: item.content }} />
+      )}
       {item.label && <span className={styles.label}>{item.label}</span>}
     </>
   );
@@ -38,8 +42,6 @@ Slide.propTypes = {
     secondary_action: PropTypes.string,
     label: PropTypes.string,
   }),
-  primaryBtnText: PropTypes.string,
-  secondaryBtnText: PropTypes.string,
   hideCaptions: PropTypes.bool,
   imageSizes: PropTypes.shape({ width: PropTypes.any, height: PropTypes.any }),
   slideTitle: PropTypes.string,

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

@@ -71,6 +71,7 @@ const Content = ({
       </button>
 
       {showMore &&
+        module.show_more_content &&
         mainContent(
           module.show_more_content,
           isContentCollapsible ? styles.contentCollapsibleBox : ''

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

@@ -6,7 +6,6 @@ import Items from '~atoms/menu/items';
 import MenuIcon from '~atoms/menu/menu-icon';
 
 import { NavigationContext } from '~organisms/navigation/navigationContext';
-import { Context } from '~context/MainProvider';
 
 import styles from './menu.module.scss';
 import keygen from '~helpers/keygen';
@@ -28,7 +27,6 @@ const Menu = ({
   const menuListRef = useRef(React.createRef());
 
   const { setShowSearch, setShowMenu, showMenu, showSearch } = useContext(NavigationContext);
-  const { cookieAccepted } = useContext(Context) || false;
 
   if (section.modules) {
     menuObject = getMenuObj(section.modules, menu);
@@ -58,7 +56,7 @@ const Menu = ({
         ref={menuListRef}
         className={`${menuListClasses || ''} ${showMenu && (styles.show || '')} ${
           styles[customStyles] || ''
-        } ${cookieAccepted ? styles.cookieAccepted || '' : ''}`}
+        }`}
         role="menu"
       >
         {menuObject &&

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

@@ -246,7 +246,7 @@ const Pagination = ({
 Pagination.propTypes = {
   currentPage: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
   pagePath: PropTypes.string.isRequired,
-  totalPages: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  totalPages: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   nextComp: PropTypes.oneOfType([PropTypes.element, PropTypes.any]),
   previousComp: PropTypes.oneOfType([PropTypes.element, PropTypes.any]),
   firstComp: PropTypes.oneOfType([PropTypes.element, PropTypes.any]),

package/src/components/molecules/spotlights_v2/image/template-two/index.js

@@ -16,7 +16,7 @@ export default function TemplateOne({ module }) {
       {res?.image && <LazyImage src={imagePrettyUrl(res?.image)} />}
       <p>
         {res?.link_text || translate(translations, 'link_text_spotlights', 'Top Online Casinos')}{' '}
-        <FaArrowRight size={20} color="#fff" />
+        {res.link?.value && <FaArrowRight size={20} color="#fff" />}
       </p>
       {res.subtitle && <span>{res.subtitle}</span>}
     </>

package/src/components/molecules/spotlights_v2/image-text/template-one/index.js

@@ -30,10 +30,12 @@ export default function TemplateOne({
                 )}
                 {res?.label && <TitleTag>{res.label}</TitleTag>}
                 {res.subtitle && <span>{res.subtitle}</span>}
-                <div
-                  className={`${styles.desc} ${scrollableContent ? styles.scroll : ''}`}
-                  dangerouslySetInnerHTML={{ __html: res?.text }}
-                />
+                {res?.text && (
+                  <div
+                    className={`${styles.desc} ${scrollableContent ? styles.scroll : ''}`}
+                    dangerouslySetInnerHTML={{ __html: res?.text }}
+                  />
+                )}
               </div>
 
               {res?.link?.value && (

package/src/components/molecules/spotlights_v2/image-text/template-one/template-one.module.scss

@@ -4,11 +4,13 @@
   @include flex-direction(column);
   @include flex-align(center, center);
   gap: 1.6rem;
+
   @include min(tablet) {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
   }
 }
+
 .item {
   border-radius: 1.6rem;
   background: var(--spotlight-template-one-backgorund-image-text-mode, #fff);
@@ -18,16 +20,19 @@
   padding: 1.6rem;
   gap: 1.6rem;
   @include flex-direction(column);
-  @include flex-align(start, space-between);
+  @include flex-align(stretch, space-between);
+
   > a {
     min-height: 5.6rem;
     width: 100%;
     white-space: normal;
   }
 }
+
 .topSection {
   @include flex-direction(column);
   gap: 1.6rem;
+
   > img {
     width: 100%;
     height: 17.6rem;
@@ -36,7 +41,6 @@
     margin-bottom: 0.8rem;
   }
 
-
   a > label,
   a > span,
   a > h1,
@@ -58,7 +62,7 @@
 }
 
 .desc {
-  color: var(--uspotlight-template-one-desc-image-text-mode, #515156);
+  color: var(--spotlight-template-one-desc-image-text-mode, #515156);
   text-align: justify;
   font-size: 1.6rem;
   font-style: normal;
@@ -68,9 +72,10 @@
 }
 
 .scroll {
-  height: 18rem;
-  overflow-y: scroll;
+  max-height: 18rem;
+  overflow-y: auto;
   padding-right: 1.6rem;
+
   &::-webkit-scrollbar {
     width: .6rem;
   }
@@ -89,6 +94,7 @@
     background: #555;
   }
 }
+
 .scrollContent{
   padding: 2.4rem;
 }

package/src/components/molecules/spotlights_v2/image-text/template-three/item/index.js

@@ -27,12 +27,14 @@ export default function TemplateOne({
       <div className={styles.topSection}>
         {item?.image && <LazyImage width={104} height={104} src={imagePrettyUrl(item?.image)} />}
         {item?.label && <TitleTag>{item?.label}</TitleTag>}
-        <div
-          className={`${styles.desc} ${scrollableContent ? styles.scroll : ''} ${
-            readMore && !scrollableContent && !showMore ? styles.readMore : ''
-          }`}
-          dangerouslySetInnerHTML={{ __html: item?.text }}
-        />
+        {item?.text && (
+          <div
+            className={`${styles.desc} ${scrollableContent ? styles.scroll : ''} ${
+              readMore && !scrollableContent && !showMore ? styles.readMore : ''
+            }`}
+            dangerouslySetInnerHTML={{ __html: item?.text }}
+          />
+        )}
         {readMore && !scrollableContent && (
           <span onClick={() => setShowMore(!showMore)} className={styles.readMoreBtn}>
             {!showMore ? (

package/src/components/molecules/spotlights_v2/image-text/template-three/item/style.module.scss

@@ -2,30 +2,33 @@
   @include flex-direction(column);
   @include flex-align(center, center);
   gap: 0.8rem;
+
   @include min(tablet) {
     display: grid;
     grid-template-columns: repeat(2, auto);
-    align-items: flex-start;
   }
+
   > img {
     width: 8rem;
     height: 8rem;
     object-fit: cover;
     border-radius: 100%;
     margin-bottom: 1.6rem;
+
     @include min(tablet) {
-      grid-column: 1/2;
-      grid-row: 1/5;
+      grid-row: 1 / span 2;
+      grid-column: 1;
       width: 12rem;
       height: 12rem;
-      margin-top: 4rem;
-      margin-right: 2.4rem;
+      margin: 0;
     }
+
     @include min(laptop){
       width: 12.6rem;
       height: 12.6rem;
     }
   }
+
   > label {
     color: var(--spotlight-template-two-label-image-text-mode, #1b1b1c);
     font-size: 1.8rem;
@@ -33,19 +36,23 @@
     font-weight: 700;
     line-height: 2.8rem;
     text-transform: capitalize;
+
     @include min(tablet) {
-      grid-column: 2/3;
-      grid-row: 1/2;
       font-size: 2.2rem;
       line-height: 3rem;
+      grid-column: 2;
     }
   }
+
   > h2,
   h3,
   h4 {
+    font-size: 2.2rem;
+    font-weight: 700;
+    line-height: 3rem;
+
     @include min(tablet) {
-      grid-column: 2/3;
-      grid-row: 1/2;
+      grid-column: 2;
     }
   }
 }
@@ -58,9 +65,9 @@
   font-weight: 700;
   line-height: 2.2rem;
   margin-bottom: 1.6rem;
+
   @include min(tablet) {
-    grid-column: 2/3;
-    grid-row: 2/3;
+    grid-column: 2;
   }
 }
 
@@ -74,6 +81,7 @@
   gap: 1.6rem;
   @include flex-direction(column);
   @include flex-align(start, space-between);
+
   > a {
     height: 5.6rem;
     width: 100%;
@@ -81,33 +89,29 @@
 }
 
 .desc {
-  color: var(--uspotlight-template-one-desc-image-text-mode, #515156);
+  color: var(--spotlight-template-one-desc-image-text-mode, #515156);
   text-align: justify;
   font-size: 1.6rem;
   font-style: normal;
   font-weight: 400;
   line-height: 2.7rem;
   margin-bottom: 0.8rem;
-  @include min(tablet){
-    grid-column: 2/3;
-    grid-row: 2/3;
-}
 
+  @include min(tablet) {
+    grid-column: 2;
+  }
 }
 
 .readMore {
   height: 13.5rem;
   overflow: hidden;
-  @include min(tablet){
-    grid-column: 2/3;
-    grid-row: 2/3;
-}
 }
 
 .scroll {
-  height: 16.2rem;
-  overflow-y: scroll;
+  max-height: 16.2rem;
+  overflow-y: auto;
   padding-right: 1.6rem;
+
   &::-webkit-scrollbar {
     width: 0.6rem;
   }
@@ -137,11 +141,12 @@
   font-weight: 600;
   line-height: 2.7rem;
   cursor: pointer;
-  @include min(tablet){
-    grid-column: 2/3;
-    grid-row: 3/4;
-}
+
   > svg {
     margin-left: 0.4rem;
   }
+
+  @include min(tablet) {
+    grid-column: 2;
+  }
 }

package/src/components/molecules/spotlights_v2/image-text/template-two/index.js

@@ -30,10 +30,12 @@ export default function TemplateOne({
                 )}
                 {res?.label && <TitleTag>{res.label}</TitleTag>}
                 {res.subtitle && <span>{res.subtitle}</span>}
-                <div
-                  className={`${styles.desc} ${scrollableContent ? styles.scroll : ''}`}
-                  dangerouslySetInnerHTML={{ __html: res?.text }}
-                />
+                {res?.text && (
+                  <div
+                    className={`${styles.desc} ${scrollableContent ? styles.scroll : ''}`}
+                    dangerouslySetInnerHTML={{ __html: res?.text }}
+                  />
+                )}
               </div>
               {res?.link?.value && (
                 <Button

package/src/components/molecules/spotlights_v2/image-text/template-two/template-two.module.scss

@@ -4,11 +4,13 @@
   @include flex-direction(column);
   @include flex-align(center, center);
   gap: 1.6rem;
+
   @include min(tablet) {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
   }
 }
+
 .item {
   border-radius: 1.6rem;
   background: var(--spotlight-template-two-backgorund-image-text-mode, #fff);
@@ -18,17 +20,20 @@
   padding: 2.4rem;
   gap: 1.6rem;
   @include flex-direction(column);
-  @include flex-align(start, space-between);
+  @include flex-align(stretch, space-between);
+
   > a {
     min-height: 5.6rem;
     width: 100%;
     white-space: normal;
   }
 }
+
 .topSection {
   @include flex-direction(column);
   @include flex-align(center, center);
   gap: .8rem;
+
   > img {
     width: 10.4rem;
     height: 10.4rem;
@@ -37,7 +42,6 @@
     margin-bottom: 1.6rem;
   }
   
-  
   a > label,
   a > span,
   a > h1,
@@ -57,7 +61,6 @@
     text-align: center;
   }
 
-
   a > span, > span {
     color: #64646d;
     text-align: center;
@@ -70,7 +73,7 @@
 }
 
 .desc {
-  color: var(--uspotlight-template-one-desc-image-text-mode, #515156);
+  color: var(--spotlight-template-one-desc-image-text-mode, #515156);
   text-align: justify;
   font-size: 1.6rem;
   font-style: normal;
@@ -80,9 +83,10 @@
 }
 
 .scroll {
-  height: 18rem;
-  overflow-y: scroll;
+  max-height: 18rem;
+  overflow-y: auto;
   padding-right: 1.6rem;
+
   &::-webkit-scrollbar {
     width: .6rem;
   }

package/src/components/molecules/star-rating/one-star.js

@@ -28,7 +28,7 @@ const OneStar = ({
 };
 
 OneStar.propTypes = {
-  numOfStars: PropTypes.oneOf([5, 10]).isRequired,
+  numOfStars: PropTypes.oneOf([5, 10]),
   rating: PropTypes.oneOfType([PropTypes.array, PropTypes.number, PropTypes.string]).isRequired,
   active: PropTypes.bool,
   showLabel: PropTypes.bool,

package/src/components/organisms/cookie-consent/cookie-consent.module.scss

@@ -6,22 +6,13 @@
   padding: 1.7rem 0;
   box-shadow: 0px -4px 10px rgba(0, 0, 0, 0.15);
 
-  &.bottom {
-    bottom: 0;
-    left: 0;
-  }
-
-  &.top {
-    top: 0;
-    left: 0;
-  }
-
   > div {
-    @include flex-align(flex-start, space-between);
+    @include flex-align(center, center);
     flex-direction: column;
     padding: 0rem 1.6rem;
-
+    gap: 1rem;
     @include min(tablet) {
+      @include flex-align(flex-start, flex-end);
       flex-direction: row;
       align-items: center;
       padding: 0rem 2.3rem !important;

package/src/components/organisms/cookie-consent/cookie-consent.test.js

@@ -22,7 +22,7 @@ function renderComponent() {
         cookieAccepted: true,
       }}
     >
-      <CookieConsent acceptText="Accept Me" declineText="Decline Me" declineURL="/" location="top">
+      <CookieConsent acceptText="Accept Me" declineText="Decline Me" declineURL="/">
         {children}
       </CookieConsent>
     </MainProvider>
@@ -47,10 +47,6 @@ describe('cookie consent component', () => {
     expect(getByText('Accept Me')).toBeTruthy();
     expect(getByText('Decline Me')).toBeTruthy();
   });
-  test('Location', () => {
-    const { container } = renderComponent();
-    expect(container.querySelector('div.top')).toBeTruthy();
-  });
   test('Hide on accept', () => {
     const { container, getByText } = renderComponent();
     const btn = getByText('Accept Me');

package/src/components/organisms/cookie-consent/index.js

@@ -4,7 +4,6 @@ import PropTypes from 'prop-types';
 import { navigate } from 'gatsby';
 import Modal from 'gatsby-core-theme/src/hooks/modal';
 import { ModalContext } from 'gatsby-core-theme/src/hooks/modal/modalContext';
-import Sticky from '~molecules/sticky';
 import Button from '~atoms/button/button';
 import { translate } from '~helpers/getters';
 import { Context } from '~context/MainProvider';
@@ -16,22 +15,15 @@ const CookieConsent = ({
   settingsCookie = false,
   declineText = 'Decline',
   declineURL = '#',
-  location = 'bottom',
   children,
 }) => {
   const cookieName = 'CookieConsent';
   // states
-  const [ck, setCk] = useState(true);
-  // when component did mount or state has updated
+  const [ck, setCk] = useState(
+    (typeof window !== `undefined` && getCookie(cookieName) === 'true') || false
+  );
   const { showModal } = useContext(ModalContext);
   const { translations } = useContext(Context) || {};
-  const { setCookieAccepted } = useContext(Context);
-
-  useEffect(() => {
-    const getCk = Boolean(getCookie(cookieName)) || false;
-    setCk(getCk);
-    setCookieAccepted(getCk);
-  }, [ck, setCookieAccepted]);
 
   // when user declines
   const handleDecline = () => {
@@ -47,7 +39,7 @@ const CookieConsent = ({
   return (
     <>
       {!showModal && !ck && (
-        <Sticky showOnScroll className={styles.cookieConsent || ''} position={location}>
+        <div className={styles.cookieConsent || ''}>
           <div className={styles.content || ''}>{children}</div>
           <div className={styles.buttonsContainer || ''}>
             {settingsCookie && (
@@ -82,7 +74,7 @@ const CookieConsent = ({
               />
             )}
           </div>
-        </Sticky>
+        </div>
       )}
     </>
   );
@@ -93,7 +85,6 @@ CookieConsent.propTypes = {
   settingsCookie: PropTypes.bool,
   declineText: PropTypes.string,
   declineURL: PropTypes.string,
-  location: PropTypes.oneOf(['bottom', 'top']),
   children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node, PropTypes.any]),
 };
 

package/src/components/organisms/form/form.module.scss

@@ -106,28 +106,11 @@
     }
   }
 
-  button {
-    align-items: center;
-    background-color: var(--primary-button-color,#6e33e5) !important;
-    border-radius: 100px !important;
-    color: var(--primary-button-color-text,#fff) !important;
-    display: inline-flex !important;
-    font-size: 1.8rem;
-    font-weight: 700;
-    gap: 0.4rem;
-    justify-content: center;
-    line-height: 2.7rem;
-    padding: 1.6rem 2.4rem !important;
-    text-align: center;
-    text-transform: capitalize;
-    
-    &:hover,
-    &:focus {
-      background: var(--primary-button-color,#6e33e5) !important;
-      border-radius: 100px !important;
-      color: var(--primary-button-color-text,#fff) !important;
-    }
+
+  button{
+    text-align: start;
   }
+
 }
 
 .formGroup {

package/src/components/organisms/form/index.js

@@ -317,21 +317,20 @@ const FormComponent = ({
             </div>
           )}
           {hasButton && (
-            <div className={styles.formButton || ''}>
+            <button className={styles.formButton || ''} type="submit">
               <Button
                 buttonSize={buttonSize}
                 buttonType={buttonType}
                 isInternalLink={false}
                 btnText={state.loading ? 'sending...' : buttonLabel}
                 gtmClass="form-gtm btn-cta"
-                onClick={(e) => handleSubmit(e)}
                 icon={
                   showButtonIcon ? (
                     <FaArrowRight fontSize={20} title="Right-pointing Arrow Icon" />
                   ) : null
                 }
               />
-            </div>
+            </button>
           )}
           {(state.success || state.failed || !state.isValid) && (
             <div className={styles.formAlerts || ''}>

package/src/components/pages/body/body.module.scss

@@ -0,0 +1,11 @@
+.floatingArea{
+    @include flex-direction(column);
+    width: 100%;
+    position: fixed;
+    transition: all 1s;
+    bottom: -30rem;
+}
+
+.show {
+    bottom: 0;
+}

package/src/components/pages/body/index.js

@@ -13,9 +13,11 @@ import Footer from '~molecules/footer';
 import Navigation from '~organisms/navigation';
 import ScrollToTop from '~atoms/scroll-to-top';
 import CookieConsent from '~organisms/cookie-consent';
+import isSticky from '~hooks/stickyOnScroll';
+import styles from './body.module.scss';
 import { setCookie, getCookie } from '~helpers/cookies';
 
-function Body({ pageContext, children, hideOperatorBanner, serverData }) {
+function Body({ pageContext, children, hideOperatorBanner, serverData, offsetTop = 400 }) {
   const getBodySection = (name) => getSection(name, pageContext);
   const { template } = pageContext.page;
   const is404 = pageContext?.page?.path?.includes('404');
@@ -23,6 +25,7 @@ function Body({ pageContext, children, hideOperatorBanner, serverData }) {
   const main = getBodySection('main');
   const navigation = getBodySection('navigation');
   const footer = getBodySection('footer');
+  const showScroll = isSticky(offsetTop);
 
   useEffect(() => {
     if (!getCookie('affUUID')) {
@@ -55,18 +58,20 @@ function Body({ pageContext, children, hideOperatorBanner, serverData }) {
       {main && !children && (
         <Main serverData={serverData} section={main} pageContext={pageContext} />
       )}
-      {OperatorBanner && (
-        <OperatorBanner
-          pageTemplate={template}
-          module={{ name: 'operator_banner', tracking_link_name: 'main' }}
-          floating
-          operator={pageContext.page.relation}
-        />
-      )}
       {children && <main>{children}</main>}
-      <ScrollToTop />
       <Footer template={template} section={footer} />
-      <CookieConsent />
+      <div className={`${styles.floatingArea} ${showScroll ? styles.show : ''}`}>
+        <ScrollToTop />
+        {OperatorBanner && (
+          <OperatorBanner
+            pageTemplate={template}
+            module={{ name: 'operator_banner', tracking_link_name: 'main' }}
+            floating
+            operator={pageContext.page.relation}
+          />
+        )}
+        <CookieConsent />
+      </div>
     </>
   );
 }
@@ -75,6 +80,7 @@ Body.propTypes = {
   children: PropTypes.element,
   // eslint-disable-next-line react/forbid-prop-types
   serverData: PropTypes.shape({}),
+  offsetTop: PropTypes.number,
   pageContext: PropTypes.shape({
     page: PropTypes.shape({
       id: PropTypes.number,

package/src/components/pages/tracker/index-ssr.js

@@ -26,8 +26,7 @@ const Tracker = ({
   operatorLogoHeight = '80',
   serverData,
 }) => {
-  const { operator, page } = pageContext;
-  const translations = page?.translations;
+  const { operator, page, translations } = pageContext;
 
   const tracker = getTrackerName(operator, page, path);
 

package/src/components/pages/tracker/index.js

@@ -25,8 +25,7 @@ const Tracker = ({
   operatorLogoWidth = '80',
   operatorLogoHeight = '80',
 }) => {
-  const { operator, page } = pageContext;
-  const translations = page?.translations;
+  const { operator, page, translations } = pageContext;
 
   const tracker = getTrackerName(operator, page, path);
 

package/src/context/MainProvider.js

@@ -5,17 +5,11 @@ export const Context = createContext();
 
 export default (props) => {
   const { value, children } = props;
-  const [bannerIsActive, setBannerActive] = useState(false);
-  const [cookieAccepted, setCookieAccepted] = useState(true);
 
   return (
     <Context.Provider
       value={{
         translations: value.translations,
-        bannerIsActive,
-        setBannerActive,
-        cookieAccepted,
-        setCookieAccepted,
       }}
     >
       {children}

package/src/styles/utils/variables/_main.scss

@@ -82,7 +82,7 @@
   --modal-index: 30;
   --navigation-index: 20;
   --scroll-to-top-index: 10;
-  --cookie-consent-index: 20;
+  --cookie-consent-index: 30;
   --search-form-index: 15;
   --above-search-form-index: 16;