feat(VCST-4553): predefined product list (#2165)

## Description

## References
### Jira-link:
https://virtocommerce.atlassian.net/browse/VCST-4553
### Artifact URL:

https://vc3prerelease.blob.core.windows.net/packages/vc-theme-b2b-vue-2.41.0-pr-2165-d068-d0687d7b.zip

---------

Co-authored-by: Elena Mutykova <[email protected]>

Author: vas11yev1work

.serena/project.yml

@@ -24,7 +24,10 @@
 languages:
   - vue
   - typescript
-encoding: 'utf-8'
+
+# the encoding used by text files in the project
+# For a list of possible encodings, see https://docs.python.org/3.11/library/codecs.html#standard-encodings
+encoding: "utf-8"
 
 # whether to use project's .gitignore files to ignore files
 ignore_all_files_in_gitignore: true
@@ -81,8 +84,28 @@ excluded_tools: []
 
 # initial prompt for the project. It will always be given to the LLM upon activating the project
 # (contrary to the memories, which are loaded on demand).
-initial_prompt: ''
+initial_prompt: ""
+# the name by which the project can be referenced within Serena
+project_name: "frontend"
 
-project_name: 'frontend'
+# list of tools to include that would otherwise be disabled (particularly optional tools that are disabled by default)
 included_optional_tools: []
+
+# fixed set of tools to use as the base tool set (if non-empty), replacing Serena's default set of tools.
+# This cannot be combined with non-empty excluded_tools or included_optional_tools.
 fixed_tools: []
+
+# list of mode names to that are always to be included in the set of active modes
+# The full set of modes to be activated is base_modes + default_modes.
+# If the setting is undefined, the base_modes from the global configuration (serena_config.yml) apply.
+# Otherwise, this setting overrides the global configuration.
+# Set this to [] to disable base modes for this project.
+# Set this to a list of mode names to always include the respective modes for this project.
+base_modes:
+
+# list of mode names that are to be activated by default.
+# The full set of modes to be activated is base_modes + default_modes.
+# If the setting is undefined, the default_modes from the global configuration (serena_config.yml) apply.
+# Otherwise, this overrides the setting from the global configuration (serena_config.yml).
+# This setting can, in turn, be overridden by CLI parameters (--mode).
+default_modes:

client-app/pages/matcher/builderIo/customComponents.ts

@@ -201,6 +201,62 @@ export const builderIOComponents: Array<BuilderIOComponentType> = [
       },
     ],
   },
+  {
+    name: "Predefined Products",
+    component: ProductsBlock,
+    inputs: [
+      {
+        name: "title",
+        type: "string",
+        defaultValue: "Predefined Products",
+      },
+      {
+        name: "subtitle",
+        type: "string",
+      },
+      {
+        name: "cardType",
+        type: "string",
+        defaultValue: "full",
+        enum: ["full", "short"],
+      },
+      {
+        name: "columnsAmountTablet",
+        type: "string",
+        defaultValue: "3",
+        enum: ["3", "2"],
+      },
+      {
+        name: "columnsAmountDesktop",
+        type: "string",
+        defaultValue: "4",
+        enum: ["4", "3"],
+      },
+      {
+        name: "skus",
+        type: "list",
+        friendlyName: "SKUs",
+        subFields: [
+          {
+            name: "sku",
+            type: "string",
+            friendlyName: "Product SKU",
+            defaultValue: "",
+          },
+        ],
+        onChange: (options: Map<string, Array<{ sku: string }>>) => {
+          const skus = options.get("skus");
+          if (!Array.isArray(skus)) {
+            return;
+          }
+          if (skus.length > 12) {
+            options.set("skus", skus.slice(0, 12));
+            alert("Maximum 12 SKUs allowed");
+          }
+        },
+      },
+    ],
+  },
   {
     component: Slider,
     name: "Slider",

client-app/plugins/builder-preview/schemas/sections/predefined-product-list.json

@@ -0,0 +1,34 @@
+{
+  "name": "Predefined products",
+  "icon": "local_mall",
+  "displayField": "name",
+  "settings": [
+    {
+      "id": "title",
+      "label": "Title",
+      "type": "string",
+      "tab": "Content"
+    },
+    {
+      "id": "subtitle",
+      "label": "Subtitle",
+      "type": "string",
+      "multiline": true,
+      "tab": "Content"
+    },
+    {
+      "id": "skus",
+      "label": "SKUs",
+      "type": "list",
+      "tab": "Content",
+      "default": [],
+      "element": [
+        {
+          "id": "sku",
+          "label": "Product SKU",
+          "type": "string"
+        }
+      ]
+    }
+  ]
+}

client-app/shared/static-content/components/index.ts

@@ -37,4 +37,5 @@ export const templateBlocks: { [key: string]: Component } = {
   "text-block": TextBlock,
   "title-block": TitleBlock,
   category: Category,
+  "predefined-product-list": ProductsBlock,
 };

client-app/shared/static-content/components/products-block.vue

@@ -18,14 +18,14 @@
           '2xl': Number(columnsAmountDesktop),
         }"
       >
-        <ProductCard v-for="item in products" :key="item.id" :card-type="cardType" :product="item" />
+        <ProductCard v-for="item in displayProducts" :key="item.id" :card-type="cardType" :product="item" />
       </VcProductsGrid>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { watchEffect } from "vue";
+import { computed, watchEffect } from "vue";
 import { ProductCard, useProducts } from "@/shared/catalog";
 
 interface IProps {
@@ -39,6 +39,7 @@ interface IProps {
   cardType?: "full" | "short";
   columnsAmountDesktop?: string;
   columnsAmountTablet?: string;
+  skus?: Array<{ sku: string }>;
 }
 
 const props = withDefaults(defineProps<IProps>(), {
@@ -50,11 +51,45 @@ const props = withDefaults(defineProps<IProps>(), {
 
 const { products, fetchProducts } = useProducts();
 
+const skuCodes = computed(() => {
+  const skus = Array.from(new Set(props.skus?.map((item) => item.sku)?.filter(Boolean) ?? []));
+  if (!skus.length) {
+    return [];
+  }
+  return skus;
+});
+
+const skuFilterExpression = computed(() => {
+  if (!skuCodes.value.length) {
+    return "";
+  }
+  return `"code":"${skuCodes.value.join('","')}"`;
+});
+
+const combinedFilter = computed(() => {
+  const filters = [skuFilterExpression.value, props.filter].filter(Boolean);
+  return filters.join(" ");
+});
+
+const displayProducts = computed(() => {
+  if (!skuCodes.value.length) {
+    return products.value;
+  }
+
+  const skuOrderMap = new Map(skuCodes.value.map((sku, index) => [sku, index]));
+
+  return [...products.value].sort((a, b) => {
+    const orderA = skuOrderMap.get(a.code) ?? Number.MAX_SAFE_INTEGER;
+    const orderB = skuOrderMap.get(b.code) ?? Number.MAX_SAFE_INTEGER;
+    return orderA - orderB;
+  });
+});
+
 watchEffect(async () => {
   await fetchProducts({
-    itemsPerPage: props.count,
+    itemsPerPage: skuCodes.value.length || props.count,
     keyword: props.query,
-    filter: props.filter,
+    filter: combinedFilter.value || undefined,
   });
 });
 </script>