gatsby-core-theme 44.5.4 → 44.6.0

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+# [44.6.0](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/compare/v44.5.4...v44.6.0) (2025-11-05)
+
+
+### Bug Fixes
+
+* add tests ([d4a5beb](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/d4a5beb41c0ca2455bd6a6098392ff895463363c))
+* create a function to be used by both prefiled module use filters and normal cards v2 use filters ([644ab6b](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/644ab6b2a767ac2a8229137c3d7f0485a483f1f8))
+* fix conflicts ([2fc5b12](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/2fc5b120fb90cb00085fa9d4024191edcd4dc049))
+* processCardsv2 logic to include a case for prefilled modules when use filters is selected ([e233b24](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/e233b247e4ff9011394ad1faf83c010a1f755de8))
+* refactor my MR on prefilled to make dry ([f49718d](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/f49718d36ef34d1beafac764524241a1bb1ec4d4))
+* resolve conflicts ([565d812](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/565d8120f6c1010b55c08c52c5433a466ab08a90))
+
+
+* Merge branch 'EN-203/image-text-spotlights' into 'master' ([0e10e81](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/0e10e81873e5bd3bafe9f9b524c9aa436ebafda7))
+* Merge branch 'en-104-prefilled-card-module' into 'master' ([065b470](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/065b4707594e1956ef4830bbb5402022c88b91ef))
+
+
+### Features
+
+* spotlights module template ([307d296](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/307d296b473b73c7d180845cb3eef8be5ed33622))
+
 ## [44.5.4](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/compare/v44.5.3...v44.5.4) (2025-10-31)
 
 

package/package.json

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

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

@@ -80,6 +80,11 @@ const Modules = ({ module, page, pageContext, modulePosition }) => {
               import("~molecules/spotlights_v2/image-text/template-four")
             );
           }
+          if (module?.style === "template_five") {
+            return lazy(() =>
+              import("~molecules/spotlights_v2/image-text/template-five")
+            );
+          }
           return lazy(() =>
             import("~molecules/spotlights_v2/image-text/template-one")
           );

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

@@ -0,0 +1,45 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import keygen from '~helpers/keygen';
+import styles from './template-five.module.scss';
+import Item from './item';
+
+export default function TemplateOne({
+  module,
+  scrollableContent = false,
+  width = 104,
+  height = 104,
+  modulePosition
+}) {
+  const { items } = module;
+  return (
+    <div className={styles?.spotlightsImage || ''}>
+      {
+        // eslint-disable-next-line react/prop-types
+        items?.map((res,index) => (
+            <Item 
+              key={keygen()}
+              item={res}
+              scrollableContent={scrollableContent}
+              width={width}
+              height={height}
+              modulePosition={modulePosition} 
+              moduleName={module.name}
+              index={index+1}
+            />
+          ))
+      }
+    </div>
+  );
+}
+
+TemplateOne.propTypes = {
+  module: PropTypes.shape({
+    items: PropTypes.arrayOf(PropTypes.shape({})),
+    name: PropTypes.string,
+  }).isRequired,
+  scrollableContent: PropTypes.bool,
+  width: PropTypes.number,
+  height: PropTypes.number,
+  modulePosition: PropTypes.number,
+};

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

@@ -0,0 +1,64 @@
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+import React from "react";
+import PropTypes from "prop-types";
+import LazyImage from "~hooks/lazy-image";
+import {
+  imagePrettyUrl,
+} from "~helpers/getters.mjs";
+import { getAltText } from "~helpers/image";
+import styles from "./style.module.scss";
+
+export default function TemplateOne({
+  item,
+  scrollableContent = false,
+  width = 240,
+  height = 240,
+  index
+}) {  
+  const TitleTag = item?.title_tag || "label";
+  
+  return (
+    <div className={styles.item}>
+      <div>
+        <span className={styles.number}>{index}</span>
+      </div>
+        <div className={styles.content}>
+        {item?.label && <TitleTag>{item?.label}</TitleTag>}
+        {item?.text && (
+          <div
+            tabIndex={`${scrollableContent ? 0 : -1}`}
+            className={`${styles.desc} ${
+              scrollableContent ? styles.scroll : ""
+            }`}
+            dangerouslySetInnerHTML={{ __html: item?.text }}
+          />
+        )}
+        </div>
+          {item?.image && (
+          <LazyImage
+            width={width}
+            height={height}
+            src={imagePrettyUrl(item?.image, width, height)}
+            alt={getAltText(item?.image_object, item?.label)}
+          />
+        )}
+    </div>
+  );
+}
+
+TemplateOne.propTypes = {
+  item: PropTypes.shape({
+    title_tag: PropTypes.string,
+    image: PropTypes.string,
+    label: PropTypes.string,
+    text: PropTypes.string,
+    image_object: PropTypes.shape({
+      alt: PropTypes.string,
+    }),
+  }).isRequired,
+  scrollableContent: PropTypes.bool,
+  width: PropTypes.number,
+  height: PropTypes.number,
+  index: PropTypes.number
+};

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

@@ -0,0 +1,196 @@
+.content {
+  @include flex-direction(column);
+  @include flex-align(center, center);
+
+  gap: 1.6rem;
+  align-items: flex-start;
+
+
+  > label {
+    font-size: 2.4rem;
+    font-weight: 600;
+    line-height: 3.2rem;
+    color: #1B1B1C;
+
+    @include min(tablet) {
+      grid-column: 2;
+    }
+  }
+
+  > h2,
+  h3,
+  h4 {
+    font-size: 2.4rem;
+    font-weight: 600;
+    line-height: 3.2rem;
+    color: #1B1B1C;
+
+    @include min(tablet) {
+      grid-column: 2;
+    }
+  }
+}
+
+.subtitle {
+  color: #64646d;
+  text-align: center;
+  font-size: 1.4rem;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 2.2rem;
+  margin-bottom: 1.6rem;
+
+  @include min(tablet) {
+    grid-column: 2;
+  }
+}
+
+.item {
+  width: 100%;
+  height: 100%;
+  padding-top: 2.4rem;
+  padding-bottom: 2.4rem;
+  gap: 1.6rem;
+
+  @include flex-direction(column);
+  @include flex-align(start, space-between);
+
+  border-bottom: 2px solid #D63B54;
+
+    @include min(tablet) {
+     padding-top: 3.2rem;
+     padding-bottom: 3.2rem;
+     flex-direction: row;
+    }
+
+  > a {
+    height: 5.6rem;
+    width: 100%;
+  }
+
+    > img {
+    width: 34rem;
+    height: 34rem;
+    object-fit: cover;
+    border-radius: .8rem;
+
+    @include min(tablet) {
+      grid-row: 1 / span 2;
+      grid-column: 1;
+      width: 24rem;
+      height: 24rem;
+    }
+  }
+}
+
+.desc {
+  color: var(--spotlight-template-one-desc-image-text-mode, #515156);
+  text-align: left;
+  font-size: 1.6rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 2.6rem;
+
+  @include min(tablet) {
+    grid-column: 2;
+  }
+}
+
+.readMore {
+  height: 13.5rem;
+  overflow: hidden;
+}
+
+.scroll {
+  max-height: 16.2rem;
+  overflow-y: auto;
+  padding-right: 1.6rem;
+
+  &::-webkit-scrollbar {
+    width: 0.6rem;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: #c4c4c4;
+    border-radius: 0.5rem;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: #515156;
+    border-radius: 0.5rem;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background: #555;
+  }
+}
+
+.readMoreBtn {
+  @include flex-direction(row);
+  @include flex-align(center, start);
+
+  width: 100%;
+  color: #262629;
+  font-size: 1.6rem;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 2.7rem;
+  cursor: pointer;
+
+  > svg {
+    margin-left: 0.4rem;
+  }
+
+  @include min(tablet) {
+    grid-column: 2;
+  }
+}
+
+.topSection{
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+
+    > h2,
+  h3,
+  h4 {
+    font-size: 2.4rem;
+    font-weight: 600;
+    line-height: 3.2rem;
+    color: #1B1B1C;
+
+    @include min(tablet) {
+      grid-column: 2;
+    }
+  }
+
+  span{
+    margin-right: 1rem;
+    background-color: #D63B54;
+    width: 3.2rem;
+    height: 3.2rem;
+    border-radius: 100%;
+    font-size: 1.4rem;
+    line-height: 2.2rem;
+    font-weight: 500;
+    color: #FDFEFD;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-left: -4.3rem;
+  }
+}
+
+  .number{
+    background-color: #D63B54;
+    width: 3.2rem;
+    height: 3.2rem;
+    border-radius: 100%;
+    font-size: 1.4rem;
+    line-height: 2.2rem;
+    font-weight: 500;
+    color: #FDFEFD;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }

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

@@ -0,0 +1,9 @@
+.spotlightsImage {
+  max-width: var(--main-container-max);
+  margin: 0 auto;
+
+  @include flex-direction(column);
+  @include flex-align(center, center);
+
+  gap: 1.6rem;
+}

package/src/components/molecules/spotlights_v2/image-text/template-five/template-five.stories.js

@@ -0,0 +1,94 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import React from 'react';
+import {
+  Title,
+  Description,
+  Primary,
+  PRIMARY_STORY,
+  ArgsTable,
+} from '@storybook/addon-docs/blocks';
+import TemplateOne from '.';
+
+export default {
+  title: 'Theme/Modules/Spotlight/Image Text/Template Five',
+  component: TemplateOne,
+  argTypes: {
+    buttonType: {
+      name: 'buttonType',
+      defaultValue: 'secondary',
+      options: ['primary', 'secondary', 'tertiary'],
+      control: { type: 'radio' },
+    },
+    buttonSize: {
+      name: 'buttonType',
+      defaultValue: 'm',
+      options: ['xs', 's', 'm', 'l', 'xl', 'noSize'],
+      control: { type: 'radio' },
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: 'A component that shows a list of pros and cons and corresponding icons.',
+      },
+      page: () => (
+        <>
+          <Title />
+          <Description />
+          <Primary />
+          <ArgsTable story={PRIMARY_STORY} />
+        </>
+      ),
+    },
+  },
+};
+
+const Template = (args) => <TemplateOne {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  module: {
+    mode: 'image_text',
+    read_more_text: '',
+    show_read_more: '1',
+    items: [
+      {
+        image: `1702045256/xl.png`,
+        label: `Javier A. Pernia`,
+        link: {
+          title: null,
+          type: 'internal',
+          value: `/rizk`,
+        },
+        link_text: 'Read Review',
+        subtitle: 'Senior Content Writer',
+        text: `<p>Lorem ipsum dolor sit amet consectetur. Diam justo eu tellus morbi amet suspendisse purus tincidunt. Fermentum with risus felis feugiat scelerisque in convallis id cras. Varius lacus id lacus hendrerit commodo orci loredio dignissim massa mauris massa pellentesque et magna lectus duis. Rhoncus eros enim egestas integer eu duis ullamcorper. Magna dictum suspendisse habitasse massa. Odio viverra sit nisl duis nisl sit. Quam ut tincidunt dui lorem pretium commodo aliquam accumsan. Sagittis ultrices est vitae habitant eget morbi. Eu non ipsum pretium enim eleifend quam ut. At tortor in ut sed ultrices suspendisse bibendum nunc. In odio volutpat scelerisque gravida egestas ut turpis. Ut facilisi massa elit maecenas amet volutpat quis eu.</p>`,
+      },
+      {
+        image: `1702045256/xl.png`,
+        label: `Javier A. Pernia`,
+        subtitle: 'Senior Content Writer',
+        link: {
+          title: null,
+          type: 'internal',
+          value: `/rizk`,
+        },
+        link_text: 'Read Review',
+        text: `<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ullamcorper orci a, nec lacus, viverra. Fusce pellentesque eget vitae, ac nibh sem in neque sagittis. Dapibus ornare egestas sagittis massa arcu est arcu fermentum.</p>`,
+      },
+      {
+        image: `1702045256/xl.png`,
+        subtitle: 'Senior Content Writer',
+        label: `Javier A. Pernia`,
+        link: {
+          title: null,
+          type: 'internal',
+          value: `/rizk`,
+        },
+        link_text: 'Read Review',
+        text: `<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ullamcorper orci a, nec lacus, viverra. Fusce pellentesque eget vitae, ac nibh sem in neque sagittis. Dapibus ornare egestas sagittis massa arcu est arcu fermentum.</p>`,
+      },
+    ],
+  },
+  scrollableContent: false,
+};

package/src/components/molecules/spotlights_v2/image-text/template-five/template-five.test.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { getSpotlightItems } from '~tests/factories/modules/spotlights.factory';
+import TemplateFive from '.';
+
+test('Image-text mode', () => {
+  const { container } = render(<TemplateFive module={getSpotlightItems(6, 'image')} />);
+
+  const img = screen.getByAltText('label 6');
+  expect(img).toBeInTheDocument();
+
+  const paragraphs = container.querySelectorAll('p');
+  expect(paragraphs.length).toBeGreaterThan(0);
+
+  const labels = container.querySelectorAll('label');
+  expect(labels.length).toBeGreaterThan(0);
+});

package/src/resolver/index.mjs

@@ -219,6 +219,7 @@ export function processSections(
             data,
             toplists,
             content,
+            prefilledMarketModules,
             previewPageID
           );
           sections[sectionKey].modules[key] = module;

package/src/resolver/modules.mjs

@@ -119,24 +119,132 @@ export function filterOperators(pages, selectedProviders, selectedTypes) {
   return filterInactiveOperators(pagesFiltered);
 }
 
+export function buildCardItems({
+  module,
+  pagesCloned,
+  pagesMappedById,
+  cardType,
+  pageTemplateId,
+  sortType,
+  market,
+  content,
+  pageId,
+  selectedAuthors,
+  selectedReviewer,
+  selectedCategories,
+  selectedProviders,
+  selectedTypes,
+  limit = 50,
+}) {
+  const allFilters = [
+    cardType,
+    pageTemplateId,
+    selectedAuthors,
+    selectedReviewer,
+    selectedCategories,
+    selectedProviders,
+    selectedTypes,
+  ];
+
+  const u8 = new Uint8Array(allFilters);
+  const b64 = Buffer.from(u8).toString("base64");
+
+  let pagesList = [];
+  if (cardType) {
+    const pagesGroupedByType = pagesCloned[cardType];
+    if (!pagesGroupedByTemplateId[`${cardType}_${market}`]) {
+      pagesGroupedByTemplateId[`${cardType}_${market}`] = groupBy(
+        pagesGroupedByType,
+        "template_id"
+      );
+    }
+    pagesList =
+      pagesGroupedByTemplateId[`${cardType}_${market}`][pageTemplateId] || [];
+  } else {
+    pagesList = Object.values(pagesMappedById);
+  }
+
+  if (pagesList.length > 0) {
+    if (!cardItems[b64]) {
+      let filteredPages = filterPages(pagesList, selectedAuthors, "author_id");
+      filteredPages = filterPages(
+        filteredPages,
+        selectedReviewer,
+        "reviewer_id"
+      );
+      filteredPages = filterPages(
+        filteredPages,
+        selectedCategories,
+        "categoryIds",
+        pageId
+      );
+      filteredPages = removeDuplicates(filteredPages, "id");
+
+      let finalizedFilteredPages = [];
+      switch (cardType) {
+        case "game":
+          finalizedFilteredPages = filterGames(
+            filteredPages,
+            selectedCategories,
+            selectedProviders
+          );
+          break;
+        case "operator":
+          finalizedFilteredPages = filterOperators(
+            filteredPages,
+            selectedProviders,
+            selectedTypes
+          );
+          break;
+        case "event":
+          finalizedFilteredPages = filterEvents(filteredPages);
+          break;
+        default:
+          finalizedFilteredPages = filteredPages;
+      }
+
+      const uniquePages = removeCurrentPage(
+        removeDuplicates(finalizedFilteredPages, "id"),
+        pageId
+      );
+      cardItems[b64] = uniquePages;
+    }
+
+    const items = cardItems[b64];
+    if (sortType === "random") {
+      module.items = sampleSize(items, limit);
+    } else if (sortType === "latest") {
+      items.sort((a, b) => (a.created_at > b.created_at ? -1 : 1));
+      module.items = items.slice(0, limit);
+    } else if (sortType === "alphabetical") {
+      items.sort((a, b) => a.title.localeCompare(b.title));
+      module.items = items.slice(0, limit);
+    } else {
+      module.items = items.slice(0, limit);
+    }
+
+    module.items = module.items.map((item) =>
+      clonePageForCards(cloneDeep(item), module.style, content)
+    );
+  }
+}
+
 export function processCardsV2(
   module,
   pagesCloned,
   pagesMappedById,
   pageId,
-  content
+  content,
+  prefilledMarketModules = {}
 ) {
-  const cardType = module.cards_page_type;
-  const pageTemplateId = module.cards_page_type_id;
-  const sortType = module.cards_selector_filters_sort_by;
-  const cardSelector = module.cards_selector;
+  const prefilled =
+    prefilledMarketModules[module.module_value_id] ||
+    prefilledMarketModules[module.value_id];
+
+  const cardType = module?.cards_page_type || prefilled?.cards_page_type;
+
+  const cardSelector = module?.cards_selector;
   const styleName = module.style;
-  const moduleSelectedProviders =
-    module.cards_selector_filters && module.cards_selector_filters.providers;
-  const moduleSelectedCategories =
-    module.cards_selector_filters && module.cards_selector_filters.categories;
-  const moduleSelectedTypes =
-    module.cards_selector_filters && module.cards_selector_filters.types;
 
   const market = pagesMappedById[pageId] ? pagesMappedById[pageId].market : "";
 
@@ -155,131 +263,53 @@ export function processCardsV2(
     if (cardType === "operator") {
       module.items = filterInactiveOperators(module.items);
     }
-  } else if (cardSelector === "use_filters") {
-    let pagesList = [];
-    const selectedAuthors = module.cards_selector_filters.page_authors;
-    const selectedReviewer = module.cards_selector_filters.page_reviewer;
-    const selectedCategories = module.cards_selector_filters.page_categories;
-
-    const allFilters = [
+  } else if (
+    cardSelector === "use_filters" ||
+    (prefilled && prefilled.cards_selector === "use_filters")
+  ) {
+    const filters = module?.cards_selector_filters || {};
+    const prefilledFilters = prefilled?.cards_selector_filters || {};
+    const { page_authors, page_reviewer, page_categories } = filters;
+    const pageTemplateId =
+      module?.cards_page_type_id || prefilled?.cards_page_type_id;
+
+    const sortType =
+      module?.cards_selector_filters_sort_by ||
+      prefilled?.cards_selector_filters_sort_by;
+
+    const moduleSelectedProviders =
+      (module?.cards_selector_filters &&
+        module?.cards_selector_filters.providers) ||
+      prefilledFilters?.providers;
+
+    const moduleSelectedTypes =
+      (module?.cards_selector_filters && module?.cards_selector_filters.types) ||
+      prefilledFilters?.types;
+
+    const limit =
+      module?.cards_selector_filters_limit ||
+      prefilled?.cards_selector_filters_limit ||
+      50;
+
+    buildCardItems({
+      module,
+      pagesCloned,
+      pagesMappedById,
+      pagesGroupedByTemplateId,
+      cardItems,
       cardType,
       pageTemplateId,
-      selectedAuthors,
-      selectedReviewer,
-      selectedCategories,
-      moduleSelectedProviders,
-      moduleSelectedCategories,
-      moduleSelectedTypes,
-    ];
-
-    const u8 = new Uint8Array(allFilters);
-    const b64 = Buffer.from(u8).toString("base64");
-
-    if (cardType) {
-      // Get all pages by the selected page type
-      const pagesGroupedByType = pagesCloned[cardType];
-
-      // Grouping pages by template ID
-      if (!pagesGroupedByTemplateId[`${cardType}_${market}`]) {
-        pagesGroupedByTemplateId[`${cardType}_${market}`] = groupBy(
-          pagesGroupedByType,
-          "template_id"
-        );
-      }
-
-      // Populate pagesList if page type and template exists
-      pagesList =
-        !pagesGroupedByTemplateId[`${cardType}_${market}`] ||
-        !pagesGroupedByTemplateId[`${cardType}_${market}`][pageTemplateId]
-          ? []
-          : pagesGroupedByTemplateId[`${cardType}_${market}`][pageTemplateId];
-    } else {
-      pagesList = pagesMappedById.map((page) => page);
-    }
-
-    // Check if there are pages before starting filtering
-    if (pagesList.length > 0) {
-      if (!cardItems[b64]) {
-        const pagesFilteredByAuthor = filterPages(
-          pagesList,
-          selectedAuthors,
-          "author_id"
-        );
-
-        // Filter by reviewer
-        const pagesFilteredByReviewer = filterPages(
-          pagesFilteredByAuthor,
-          selectedReviewer,
-          "reviewer_id"
-        );
-
-        const pagesFilteredByAuthorAndCategory = filterPages(
-          pagesFilteredByReviewer,
-          selectedCategories,
-          "categoryIds",
-          pageId
-        );
-
-        // Removing any duplicate pages in the final array (because pages may have more than one category)
-        const filteredPages = removeDuplicates(
-          pagesFilteredByAuthorAndCategory,
-          "id"
-        );
-
-        let finalizedFilteredPages = [];
-        switch (cardType) {
-          case "game":
-            finalizedFilteredPages = filterGames(
-              filteredPages,
-              moduleSelectedCategories,
-              moduleSelectedProviders
-            );
-            break;
-          case "operator":
-            finalizedFilteredPages = filterOperators(
-              filteredPages,
-              moduleSelectedProviders,
-              moduleSelectedTypes
-            );
-            break;
-          case "event":
-            finalizedFilteredPages = filterEvents(filteredPages);
-            break;
-          default:
-            finalizedFilteredPages = filteredPages;
-        }
-        const uniquePages = removeCurrentPage(
-          removeDuplicates(finalizedFilteredPages, "id"),
-          pageId
-        );
-        cardItems[b64] = uniquePages;
-      }
-      const itemLimit = module.cards_selector_filters_limit || 50;
-      // Applying sorting
-      if (sortType === "random") {
-        module.items = sampleSize(cardItems[b64], itemLimit);
-      } else if (sortType === "latest") {
-        if (cardItems[b64].length > 0) {
-          cardItems[b64].sort((a, b) => (a.created_at > b.created_at ? -1 : 1));
-          module.items = cardItems[b64].slice(0, itemLimit);
-        }
-      } else if (sortType === "alphabetical") {
-        if (cardItems[b64].length > 0) {
-          cardItems[b64].sort((a, b) => {
-            if (a.title < b.title) {
-              return -1;
-            }
-            if (a.title > b.title) {
-              return 1;
-            }
-            return 0;
-          });
-          module.items = module.cards_selector_filters_limit
-            ? cardItems[b64].slice(0, module.cards_selector_filters_limit)
-            : cardItems[b64];
-        }
-      }
-    }
+      sortType,
+      market,
+      content,
+      pageId,
+      selectedAuthors: page_authors,
+      selectedReviewer: page_reviewer,
+      selectedCategories: page_categories,
+      selectedProviders: moduleSelectedProviders,
+      selectedTypes: moduleSelectedTypes,
+      limit,
+    });
   }
 
   if (styleName !== "comparison_table") {
@@ -491,8 +521,9 @@ export function processContentModule(
   content,
   previewPageID
 ) {
-  
-  module.value = previewPageID ? module.value : (content && content[module.value]) || "";
+  module.value = previewPageID
+    ? module.value
+    : (content && content[module.value]) || "";
 
   module.value = generatePlaceholderString(
     module.value,
@@ -614,6 +645,7 @@ export function processModule(
   data,
   toplists,
   content,
+  prefilledMarketModules,
   previewPageID
 ) {
   module.module_title =
@@ -635,9 +667,22 @@ export function processModule(
   }
 
   if (module.name === "cards_v2") {
-    processCardsV2(module, pages, pagesMappedById, pageId, content);
+    processCardsV2(
+      module,
+      pages,
+      pagesMappedById,
+      pageId,
+      content,
+      prefilledMarketModules
+    );
   } else if (module.name === "content") {
-    processContentModule(module, translations, relationData, content, previewPageID);
+    processContentModule(
+      module,
+      translations,
+      relationData,
+      content,
+      previewPageID
+    );
   } else if (module.name === "bonus") {
     processBonus(module, relations, data);
   } else if (module.name === "top_list") {

package/src/resolver/modules.test.js

@@ -10,7 +10,7 @@ import {
   processTopListModule,
   shouldSavePrefilled,
   processContentModule,
-  processAnchor
+  processAnchor,
 } from "./modules.mjs";
 import { objectsHolder } from "~tests/factories/modules/modules.factory";
 import getPageDataList from "~tests/factories/pages/list.factory";
@@ -326,4 +326,60 @@ describe("Modules Helper", () => {
     expect(processedAnchor.items[0].label).toBe(text0.replace('[YEAR]', year));
     expect(processedAnchor.items[1].label).toBe(text1.replace('[operator_name]', page?.relation.name));
   });
-});
+
+
+  test("Cards V2 Prefilled module with use_filters - game type", () => {
+    process.env.GATSBY_SITE_NAME = "default";
+
+    const pagesNum = 5;
+    const pageList = getPageDataList(pagesNum).map((page) => ({
+      ...page,
+      relation_type: "game",
+      template_id: "game_template",
+      relation: {
+        game_categories: [{ id: 1 }],
+        game_provider: { id: 2 },
+      },
+      author_id: 1,
+      reviewer_id: 1,
+      categoryIds: [1],
+    }));
+
+    const pagesCloned = groupBy(pageList, "relation_type");
+    const pagesMappedById = groupBy(pageList, "id", true);
+
+    const prefilledModule = {
+      module_value_id: 111,
+      cards_selector: "use_filters",
+      cards_page_type: "game",
+      cards_page_type_id: "game_template",
+      cards_selector_filters: {
+        page_authors: [1],
+        page_categories: [1],
+        providers: [2],
+        categories: [1],
+      },
+      cards_selector_filters_limit: 3,
+      cards_selector_filters_sort_by: "latest",
+      style: "default",
+      items: [],
+    };
+
+    const prefilledMarketModules = {
+      111: prefilledModule,
+    };
+
+    processCardsV2(
+      prefilledModule,
+      pagesCloned,
+      pagesMappedById,
+      1,
+      {},
+      prefilledMarketModules
+    );
+
+    expect(prefilledModule.items).toHaveLength(3);
+  });
+
+  
+})