gatsby-matrix-theme 5.0.4 → 5.0.7

package/.ci.yml

@@ -16,6 +16,9 @@ Matrix Theme Test:
     - yarn config set cache-folder .yarn
     - yarn
     - yarn workspace gatsby-matrix-theme test
+  artifacts:
+    paths:
+      - coverage/
   coverage: /All files\s*\|\s*([\d\.]+)/
   rules:
     - if: '$CI_MERGE_REQUEST_TARGET_BRANCH_NAME == "master"'
@@ -36,8 +39,7 @@ Theme Publish:
     - cd matrix-theme/
     - yarn
     - npx semantic-release -b $CI_COMMIT_REF_NAME
-  when:
-    manual
+  when: manual
   only:
     refs:
       - master
@@ -45,4 +47,4 @@ Theme Publish:
       - $PIPELINE != "content-trigger"
 
 variables:
-  PIPELINE: automated
+  PIPELINE: automated

package/CHANGELOG.md

@@ -1,3 +1,48 @@
+## [5.0.7](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v5.0.6...v5.0.7) (2022-03-10)
+
+
+### Bug Fixes
+
+* update theme version ([93021b7](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/93021b744577e5b0bb0980368219539b2f82fbf5))
+
+## [5.0.6](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v5.0.5...v5.0.6) (2022-03-10)
+
+
+### Bug Fixes
+
+* lighthouse pipeline ([e4086ba](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/e4086ba67d73a1bab6c0c32eaadfceecd438a8f5))
+* popup styling ([d8533b2](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/d8533b2661f71abe80177b0d7357f585213106a0))
+* spotlight boxes with icons = style ([ba7914a](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/ba7914a4558401350ebe0934d87acc70ad017d7d))
+* spotlight styling ([c852440](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/c852440d4b902ff2a08ce8b7941737a7f7085e68))
+
+
+* Merge branch 'tm-2758-lighthouse' into 'master' ([8d1cc38](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/8d1cc3824e067a3c55b8f9c8dcc85c5eee381350))
+* Merge branch 'master' of https://git.ilcd.rocks/team-floyd/themes/matrix-theme ([1fea267](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/1fea267f3b6a02b5d78a7d1cea1af91cee4866b9))
+* Merge branch 'tm-2767-fix-boxes-icons' into 'master' ([e7a573e](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/e7a573edbabbe9047699782c58789f2b340413f1))
+
+## [5.0.5](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v5.0.4...v5.0.5) (2022-03-09)
+
+
+### Bug Fixes
+
+* add colors ([107f82b](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/107f82bc88f3fc5f34751dc058df6f9b882dd2c6))
+* add excludeTemplateInPopup prop on popup ([7983069](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/79830691468af802f660bef22ce07b38ab329dfa))
+* add make style and replace word month with current month ([e18de59](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/e18de59e12447bcb75bd946bea4cfab628659ce0))
+* add props for title and buttonText ([ed833d9](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/ed833d9d17588024cfaeed9910178b4c8cef8d42))
+* change structure and add some others fields ([1d415ce](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/1d415ceebf210e86ce21ea2482ed794a4e83538c))
+* fix conflicts ([53b31db](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/53b31dbb2684f2d855bd32c6ae715039e02764f5))
+* moved the img in the static folder ([e8899f4](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/e8899f4375a8bc1282718d63a9fa4aec7a53370d))
+* name and tnc default false ([66ed72f](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/66ed72f08220d6d603baf9ae1f6a398ff0bfabed))
+
+
+### Config
+
+* updated core theme ([6a6c533](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/6a6c533d562898cf3843069a4529b597d1f685d0))
+
+
+* Merge branch 'tm-2674-il-popup' into 'master' ([33782fa](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/33782fa9a48fb1bc64a22f97fc75fc0cdb18afc8))
+* Merge branch 'master' into tm-2674-il-popup ([1e33c6f](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/1e33c6fbd0b4ebc8f0647b5bdca6b48fdb486429))
+
 ## [5.0.4](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v5.0.3...v5.0.4) (2022-03-08)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "5.0.4",
+  "version": "5.0.7",
   "main": "index.js",
   "description": "Matrix Theme NPM Package",
   "author": "",
@@ -31,7 +31,7 @@
     "cross-env": "^7.0.2",
     "dotenv": "8.2.0",
     "gatsby": "^3.3.1",
-    "gatsby-core-theme": "^5.1.0",
+    "gatsby-core-theme": "^5.1.2",
     "gatsby-image": "^3.3.0",
     "gatsby-plugin-image": "^1.3.1",
     "gatsby-plugin-postcss": "^4.3.0",

package/src/components/atoms/cards/popup-card/index.js

@@ -2,14 +2,17 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import OperatorCta from 'gatsby-core-theme/src/components/atoms/operator-cta';
 import { imagePrettyUrl } from 'gatsby-core-theme/src/helpers/getters';
+import Tnc from 'gatsby-core-theme/src/components/molecules/tnc';
+import StarRating from 'gatsby-core-theme/src/components/molecules/star-rating';
 import LazyImage from '~hooks/lazy-image';
 
 import styles from './popup-card.module.scss';
 
-const PopupCard = ({ item, tracker }) => {
-  const { logo_url: logoUrl } = item;
+const PopupCard = ({ item, tracker, showName = false, showTnc = false, showRating = false }) => {
+  const { logo_url: logoUrl, name } = item;
   const oneLiner = item?.one_liners?.main?.one_liner;
   const secondLiner = item?.one_liners?.secondary?.one_liner;
+  const tnc = item?.extra_fields?.terms_and_conditions_text_enabled;
   const [one, second] = (oneLiner?.includes('+') && oneLiner?.split('+')) || [
     oneLiner,
     secondLiner,
@@ -17,14 +20,14 @@ const PopupCard = ({ item, tracker }) => {
 
   return (
     <div className={styles.popupCard}>
-      <div className={styles.wrapper}>
-        <div className={styles.imgContainer}>
-          <LazyImage src={imagePrettyUrl(logoUrl)} alt={oneLiner} width={98} height={98} />
-        </div>
-        <div className={styles.textContainer}>
-          <p className={styles.primaryText}>{one}</p>
-          <p className={styles.secondaryText}>{`+${second}`}</p>
-        </div>
+      <div className={styles.imgContainer}>
+        <LazyImage src={imagePrettyUrl(logoUrl)} alt={oneLiner} width={98} height={98} />
+        {showRating && <StarRating numOfStars={5} rating={item?.rating} />}
+        {showName && <p className={styles.name}>{name}</p>}
+      </div>
+      <div className={styles.textContainer}>
+        <p className={styles.primaryText}>{one}</p>
+        <p className={styles.secondaryText}>{`+${second}`}</p>
       </div>
       <div className={styles.buttonContainer}>
         <OperatorCta
@@ -34,15 +37,25 @@ const PopupCard = ({ item, tracker }) => {
           gtmClass="popup-operator-cta-gtm"
         />
       </div>
+      {showTnc && tnc === '1' && (
+        <div className={styles.tandc}>
+          <Tnc onlyMobile operator={item} />
+        </div>
+      )}
     </div>
   );
 };
 
 PopupCard.propTypes = {
   item: PropTypes.shape({
+    name: PropTypes.string,
     links: PropTypes.shape({
       main: PropTypes.string,
     }),
+    rating: PropTypes.string,
+    extra_fields: PropTypes.shape({
+      terms_and_conditions_text_enabled: PropTypes.string,
+    }),
     logo_url: PropTypes.string,
     one_liners: PropTypes.shape({
       main: PropTypes.shape({
@@ -54,6 +67,9 @@ PopupCard.propTypes = {
     }),
   }),
   tracker: PropTypes.string,
+  showName: PropTypes.bool,
+  showTnc: PropTypes.bool,
+  showRating: PropTypes.bool,
 };
 
 export default PopupCard;

package/src/components/atoms/cards/popup-card/popup-card.module.scss

@@ -1,8 +1,6 @@
 .popupCard {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: space-between;
+  display: grid;
+  grid-template-columns: 8rem 2fr;
   padding-top: 16px;
   border-top: 1px solid #a5bcf0;
 
@@ -11,67 +9,73 @@
     padding: 16px 0;
   }
 
-  .wrapper {
-    height: 100%;
-    display: flex;
+  @include max(tablet) {
+    width: 100%;
+  }
+
+  .imgContainer {
+    width: 8rem;
+    min-width: 8rem;
+    grid-column: 1/2;
+    grid-row: 1/2;
+    @include flex-direction(column);
+    @include flex-align(center, center);
 
-    @include max(tablet) {
+    @include min(tablet) {
+      min-width: 9.8rem;
+      width: 9.8rem;
+      height: 9.8rem;
+    }
+
+    > img {
       width: 100%;
+      height: 100%;
+      border-radius: 0.4rem;
+      object-fit: contain;
     }
+  }
+  .tandc{
+    grid-row: 3/4;
+    grid-column: 1/3;
+    margin-bottom: 2rem;
+  }
+  .textContainer {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    grid-column: 2/3;
+    grid-row: 1/2;
+    margin-left: 1.5rem;
 
-    .imgContainer {
-      width: 8rem;
-      height: 8rem;
-      min-width: 8rem;
+    .primaryText {
+      color: #e00028;
+      font-weight: 700;
+      font-size: 1.4rem;
+      line-height: 2.3rem;
 
       @include min(tablet) {
-        min-width: 9.8rem;
-        width: 9.8rem;
-        height: 9.8rem;
-      }
-
-      > img {
-        width: 100%;
-        height: 100%;
-        border-radius: 0.4rem;
-        object-fit: contain;
+        font-size: 2rem;
+        line-height: 3rem;
       }
     }
 
-    .textContainer {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      margin-left: 1.5rem;
-
-      .primaryText {
-        color: #e00028;
-        font-weight: 700;
-        font-size: 1.4rem;
-        line-height: 2.3rem;
-
-        @include min(tablet) {
-          font-size: 2rem;
-          line-height: 3rem;
-        }
-      }
-
-      .secondaryText {
-        color: #17182f;
-        font-weight: 700;
-        line-height: 2.3rem;
-        font-size: 1.4rem;
+    .secondaryText {
+      color: #17182f;
+      font-weight: 700;
+      line-height: 2.3rem;
+      font-size: 1.4rem;
 
-        @include min(tablet) {
-          line-height: 3rem;
-          font-size: 1.8rem;
-        }
+      @include min(tablet) {
+        line-height: 3rem;
+        font-size: 1.8rem;
       }
     }
+   
   }
-
   .buttonContainer {
     margin-left: 3rem;
+    grid-column: 1/3;
+    grid-row: 2/3;
 
     @include max(mobile) {
       width: 100%;
@@ -88,4 +92,13 @@
       font-size: 1.8rem;
     }
   }
+  @include min(tablet){
+    grid-template-columns: 9.8rem 2fr 1.5fr;
+    .buttonContainer {
+      @include flex-direction(row);
+      @include flex-align(center, end);
+      grid-column: 3/4;
+      grid-row: 1/2;
+    }
+  }
 }

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

@@ -10,13 +10,13 @@ import { MdClose } from 'react-icons/md';
 import { translate } from 'gatsby-core-theme/src/helpers/getters';
 import { Context } from 'gatsby-core-theme/src/context/TranslationsProvider';
 import PopupCard from '../../atoms/cards/popup-card';
-
 import { setIdleTimeout } from '../../../helpers/popup';
 import { isMobileDevice } from '../../../helpers/mobile-detect';
+import months from '../../../constants/months';
 
 import styles from './popup.module.scss';
 
-const Popup = ({ module, isStorybook = false }) => {
+const Popup = ({ module, isStorybook = false, toggle = false, icon = null }) => {
   const modal = useRef(null);
   const [showModal, setShowModal] = useState(false);
   const { items } = module.items[0];
@@ -24,9 +24,15 @@ const Popup = ({ module, isStorybook = false }) => {
   const { style } = module;
   const tracker = isMobileDevice() ? 'mobPopup' : 'Popup';
   const { translations } = useContext(Context) || {};
+  const date = new Date();
+  const month = months[date.getMonth()];
+  const title = translate(translations, 'popupTitle', 'Claim These Exclusive Bonuses').replace(
+    'month',
+    month
+  );
 
-  const close = () => {
-    setShowModal(false);
+  const handelActive = (status) => {
+    setShowModal(status);
   };
 
   const idleTimeout = () => {
@@ -47,17 +53,13 @@ const Popup = ({ module, isStorybook = false }) => {
 
   const handleEsc = (event) => {
     if (event.keyCode === 27) {
-      close();
+      setShowModal(false);
     }
   };
 
   const handleOutsideClick = (event) => {
-    if (
-      modal.current &&
-      !modal.current.contains(event.target) &&
-      !modal.current.previousElementSibling.contains(event.target)
-    ) {
-      close();
+    if (modal.current && modal?.current === event.target) {
+      setShowModal(false);
     }
   };
 
@@ -89,20 +91,41 @@ const Popup = ({ module, isStorybook = false }) => {
   }, []);
 
   return (
-    <div className={`${styles.modalInner} ${style && styles[style]}`} ref={modal}>
-      <div className={styles.modalOverlay} onClick={close}>
-        <div className={styles.popupCenter}>
-          <div className={styles.modalContent}>
-            <div className={styles.modalTitle}>
-              <p>{translate(translations, 'claim_bonuses', 'Claim These Exclusive Bonuses')}</p>
-              <button className={`${styles.closeIcon} popup-gtm btn-cta`} onClick={close}>
-                <MdClose />
-              </button>
+    <div
+      className={`${styles.popup} ${toggle ? styles.toggleButton : styles.defaultPopup} ${
+        style && styles[style]
+      }`}
+    >
+      {showModal && <div onClick={() => handelActive(false)} className={styles.modalOverlay} />}
+      <div className={`${styles.modalInner} `} ref={modal}>
+        <div className={styles.itemsContent}>
+          <div className={styles.popupCenter}>
+            <div className={styles.modalContent}>
+              <div className={styles.modalTitle}>
+                <p>{title}</p>
+                <button
+                  className={`${styles.closeIcon} popup-gtm btn-cta`}
+                  onClick={() => handelActive(false)}
+                >
+                  <MdClose />
+                </button>
+              </div>
+              {shownItems?.map((item, index) => (
+                // eslint-disable-next-line react/no-array-index-key
+                <PopupCard key={index} item={item} tracker={tracker} />
+              ))}
             </div>
-            {shownItems?.map((item, index) => (
-              // eslint-disable-next-line react/no-array-index-key
-              <PopupCard key={index} item={item} tracker={tracker} />
-            ))}
+            {toggle && (
+              <div
+                className={styles.toggleButtonPopup}
+                onClick={() => {
+                  handelActive(!showModal);
+                }}
+              >
+                {icon}
+                <p>{title}</p>
+              </div>
+            )}
           </div>
         </div>
       </div>
@@ -116,6 +139,8 @@ Popup.propTypes = {
     style: PropTypes.string,
   }).isRequired,
   isStorybook: PropTypes.bool,
+  toggle: PropTypes.bool,
+  icon: PropTypes.elementType,
 };
 
 export default Popup;