gatsby-matrix-theme 53.15.1 → 53.16.1

package/CHANGELOG.md

@@ -1,3 +1,20 @@
+## [53.16.1](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/compare/v53.16.0...v53.16.1) (2026-04-27)
+
+
+### Config
+
+* update gatsby theme version ([cb17576](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/cb17576365336964626b93761947dd4b8f793141))
+
+# [53.16.0](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/compare/v53.15.1...v53.16.0) (2026-04-23)
+
+
+* Merge branch 'en-455-verification' into 'master' ([34f17af](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/34f17afb21bd8c35ad58d2ae73214c691b5c62de))
+
+
+### Features
+
+* verification badge on operator cards ([727331f](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/727331f2e8e6942f1188032e6e233f936b5805dd))
+
 ## [53.15.1](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/compare/v53.15.0...v53.15.1) (2026-04-15)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "53.15.1",
+  "version": "53.16.1",
   "main": "index.js",
   "description": "Matrix Theme NPM Package",
   "author": "",
@@ -26,7 +26,7 @@
     "@react-icons/all-files": "^4.1.0",
     "@gigmedia/enigma-utils": "^1.20.0",
     "gatsby": "^5.11.0",
-    "gatsby-core-theme": "^44.22.0",
+    "gatsby-core-theme": "^44.22.3",
     "gatsby-plugin-sharp": "^5.11.0",
     "gatsby-plugin-sitemap": "^6.13.1",
     "gatsby-transformer-sharp": "^5.11.0",

package/src/components/atoms/cards/operator-card/template-one/index.js

@@ -15,10 +15,12 @@ import styles from './template-one.module.scss';
 import Bonus from '~molecules/bonus-box/template-one';
 import { TrackingKeys } from '~constants/tracking-api';
 import VariableComponent from '../variables';
+import VerificationBadge from '../../../verification-badge/template-one';
 
 const VerifyIcon = lazy(() => import('~images/icons/verify'));
 
 const TemplateOne = ({
+  showVerificationBadge = false,
   showRibbon = false,
   item,
   useOneStarRating = true,
@@ -32,7 +34,11 @@ const TemplateOne = ({
   authorTemplateTwo = true,
   sellingPointsIcon = <FaCheck title="Check Icon" />,
   showBonusForAll = false,
-  verifyIcon = <Suspense fallback={<></>}><VerifyIcon /></Suspense>,
+  verifyIcon = (
+    <Suspense fallback={<></>}>
+      <VerifyIcon />
+    </Suspense>
+  ),
   showOperatorCta = true,
   operatorLogoWidth = 88,
   operatorLogoHeight = 88,
@@ -44,7 +50,7 @@ const TemplateOne = ({
   itemPosition,
   ctaIcon = <FaArrowRight title="Right-pointing Arrow Icon" />,
   hideTnc = false,
-  moduleStyle
+  moduleStyle,
 }) => {
   const ribbons = item?.relation?.ribbons || [];
   const { relation, path } = item;
@@ -89,17 +95,8 @@ const TemplateOne = ({
           {showSellingPoints && !!sellingPoints?.length && (
             <SellingPoints sellingPoints={sellingPoints} limit={3} icon={sellingPointsIcon} />
           )}
-          {showBonusForAll ? (
-            <BonusTemplate
-              moduleName={TrackingKeys?.CARDS}
-              item={relation}
-              tracker="main"
-              pageTemplate={page?.template}
-              modulePosition={modulePosition}
-              itemPosition={itemPosition}
-            />
-          ) : (
-            !isInactive && (
+          <div className={styles.bonusAndVerification}>
+            {showBonusForAll ? (
               <BonusTemplate
                 moduleName={TrackingKeys?.CARDS}
                 item={relation}
@@ -108,8 +105,20 @@ const TemplateOne = ({
                 modulePosition={modulePosition}
                 itemPosition={itemPosition}
               />
-            )
-          )}
+            ) : (
+              !isInactive && (
+                <BonusTemplate
+                  moduleName={TrackingKeys?.CARDS}
+                  item={relation}
+                  tracker="main"
+                  pageTemplate={page?.template}
+                  modulePosition={modulePosition}
+                  itemPosition={itemPosition}
+                />
+              )
+            )}
+            {showVerificationBadge && relation?.status === 'active' && <VerificationBadge />}
+          </div>
         </div>
         <div className={styles?.cardFooter || ''}>
           {hasVariableComponent && (
@@ -157,9 +166,7 @@ const TemplateOne = ({
               }`}
             >
               {paymentMethods?.slice(0, 4).map((deposit) => {
-                const logo =
-                  deposit?.logo?.filename ||
-                  deposit?.logo
+                const logo = deposit?.logo?.filename || deposit?.logo;
                 if (!logo) return;
                 return (
                   <li key={`${deposit.id}-${deposit.name}`}>
@@ -178,9 +185,7 @@ const TemplateOne = ({
               {paymentMethods?.length > 4 && <li>{`+${paymentMethods?.length - 4}`}</li>}
             </ul>
           )}
-          {!hideTnc && (
-            <TncTemplate operator={item?.relation} isFixed/>
-          )}
+          {!hideTnc && <TncTemplate operator={item?.relation} isFixed />}
         </div>
       </div>
     </div>
@@ -188,6 +193,7 @@ const TemplateOne = ({
 };
 
 TemplateOne.propTypes = {
+  showVerificationBadge: PropTypes.bool,
   item: PropTypes.shape({
     relation: PropTypes.shape({
       ribbons: PropTypes.arrayOf(PropTypes.string),

package/src/components/atoms/cards/operator-card/template-one/template-one.module.scss

@@ -19,7 +19,7 @@
         line-height: 2.2rem;
 
         // > span::before {
-         // color: #ffdb20;
+        // color: #ffdb20;
         // }
 
         > span:nth-child(2) {
@@ -67,12 +67,12 @@
     font-size: 1rem;
     font-weight: 400;
     line-height: 1.5rem;
-     
-    > div{
+
+    > div {
       max-height: 45px;
       overflow: auto;
       padding-right: 1.6rem;
-  
+
       &::-webkit-scrollbar {
         -webkit-appearance: none;
         width: 0.4rem;
@@ -85,7 +85,7 @@
         background: var(--color-52);
         border-radius: 2px;
       }
-  
+
       a {
         font-size: 1rem;
         font-weight: 400;
@@ -174,3 +174,9 @@
     }
   }
 }
+.bonusAndVerification {
+  @include flex-direction(var(--bonus-and-verification-direction, column));
+  align-items: var(--bonus-and-verification-align, center);
+  justify-content: var(--bonus-and-verification-justify, flex-start);
+  gap: var(--bonus-and-verification-gap, 0.8rem);
+}

package/src/components/atoms/cards/operator-card/template-one/template-one.stories.js

@@ -1,5 +1,5 @@
 /* eslint-disable import/no-extraneous-dependencies */
-import React, { lazy, Suspense } from 'react';
+import React from 'react';
 import {
   Title,
   Description,
@@ -8,10 +8,9 @@ import {
   ArgsTable,
 } from '@storybook/addon-docs/blocks';
 import { getSampleOperatorCards } from 'gatsby-core-theme/tests/factories/modules/card.factory';
+import VerifyIcon from '~images/icons/verify';
 import TemplateOne from '.';
 
-const VerifyIcon = lazy(() => import('~images/icons/verify'));
-
 const operatorData = getSampleOperatorCards();
 
 export default {
@@ -34,7 +33,7 @@ export default {
     verifyIcon: {
       name: 'verifyIcon',
       type: { name: 'element', required: false },
-      defaultValue: <Suspense fallback={<></>}><VerifyIcon /></Suspense>,
+      defaultValue: <VerifyIcon />,
       description: 'verify icon',
     },
     page: {