@useinsider/guido 2.1.0-beta.e13d291 → 2.1.0-beta.e2d48fe

package/dist/extensions/Blocks/Recommendation/settingsPanel.js

@@ -1,27 +1,17 @@
 import { SettingsPanelRegistry as S, SettingsPanelTab as I, SettingsTab as T, ContainerControls as E, TextControls as C } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
 import { BLOCK_ID as R } from "./block.js";
-import { RecommendationBlockId as N } from "./constants/blockIds.js";
-import { RecommendationControlId as _ } from "./constants/controlIds.js";
-import { CONTROL_BLOCK_ID as L } from "./controls/main/index.js";
-import "./store/recommendation.js";
-import "./controls/name/index.js";
-import "./controls/price/index.js";
-import "./controls/oldPrice/index.js";
-import "./controls/omnibusPrice/index.js";
-import "./controls/omnibusDiscount/index.js";
-import "./controls/button/index.js";
-import "./controls/image/index.js";
-import { SPACING_CONTROL_ID as U } from "./controls/spacing/index.js";
-import { CARD_BACKGROUND_COLOR_CONTROL_ID as B } from "./controls/cardBackground/index.js";
-import { LAYOUT_CONTROL_ID as D } from "./controls/layout/index.js";
-import { COMPOSITION_CONTROL_BLOCK_ID as A } from "./controls/cardComposition/index.js";
-class s extends S {
+import { COMPOSITION_CONTROL_BLOCK_ID as L } from "./cardCompositionControl.js";
+import { RecommendationBlockId as N, RecommendationControlId as _ } from "./constants.js";
+import { CONTROL_BLOCK_ID as U } from "./control.js";
+import { CARD_BACKGROUND_COLOR_CONTROL_ID as B } from "./controls/cardBackgroundColorControl.js";
+import { SPACING_CONTROL_ID as D } from "./controls/spacingControl.js";
+class m extends S {
   registerBlockControls(O) {
     O[R] = [
       new I(
         T.SETTINGS,
         [
-          L,
+          U,
           E.EXTERNAL_INDENTS
         ]
       ),
@@ -30,14 +20,13 @@ class s extends S {
         [
           C.TEXT_BLOCK_BACKGROUND_COLOR,
           B,
-          D,
-          U
+          D
         ]
       ),
       new I(
         "Card Composition",
         [
-          A
+          L
         ]
       ).withLabel("Card Composition")
     ], O[N.NAME] = [
@@ -169,5 +158,5 @@ class s extends S {
   }
 }
 export {
-  s as SettingsPanel
+  m as SettingsPanel
 };

package/dist/extensions/Blocks/Recommendation/store/recommendation.js

@@ -1,14 +1,13 @@
-import { RecommendationFeedSourceMaps as l, PriceAttributes as p } from "../../../../enums/extensions/recommendationBlock.js";
-import { useRecommendationApi as m } from "../../../../services/recommendationApi.js";
-import { useConfigStore as f } from "../../../../stores/config.js";
-import { defineStore as d } from "pinia";
-import { DEFAULT_CARDS_IN_ROW as g } from "../constants/layout.js";
-import { generateCompleteFilterQuery as c } from "../utils/filterUtil.js";
-const s = m(), h = () => ({
+import { RecommendationFeedSourceMaps as n, PriceAttributes as u } from "../../../../enums/extensions/recommendationBlock.js";
+import { useRecommendationApi as l } from "../../../../services/recommendationApi.js";
+import { useConfigStore as c } from "../../../../stores/config.js";
+import { defineStore as p } from "pinia";
+import { generateCompleteFilterQuery as m } from "../utils/filterUtil.js";
+const a = l(), d = () => ({
   recommendationCampaignUrls: {},
   recommendationProducts: [],
   recommendationConfigs: {
-    cardsInRow: g,
+    cardsInRow: 3,
     currencySettings: {
       name: "USD",
       value: "USD",
@@ -119,14 +118,14 @@ const s = m(), h = () => ({
     productIds: ["22", "12"],
     id: 1,
     language: "tr_TR",
-    orientation: "grid",
+    orientation: "vertical",
     recommendedProducts: [],
     sendProductRequestFlag: !1,
     shuffleProducts: !1,
     strategy: "mostPopular",
     textTrimming: !0,
     unresponsive: !1,
-    size: "6"
+    size: "9"
   },
   activePredictiveAlgorithms: [],
   languages: {},
@@ -135,8 +134,8 @@ const s = m(), h = () => ({
   filterSelectionDrawerStatus: !1,
   filterList: {},
   filterGroup: 1
-}), R = d("guidoRecommendationExtension", {
-  state: () => h(),
+}), y = p("guidoRecommendationExtension", {
+  state: () => d(),
   getters: {
     hasFilters: (e) => !!e.recommendationConfigs.filters.length,
     getFilterGroupCount: (e) => {
@@ -146,7 +145,7 @@ const s = m(), h = () => ({
     getActivePredictiveAlgorithms: (e) => {
       const t = [];
       return e.activePredictiveAlgorithms.forEach((r) => {
-        t.push(...l.filter((i) => i.id === r));
+        t.push(...n.filter((i) => i.id === r));
       }), t.map((r) => ({
         text: r.name,
         value: r.key
@@ -161,7 +160,7 @@ const s = m(), h = () => ({
       value: t.text
     })),
     getFilterList: (e) => Object.values(e.filterList).map((t) => {
-      const r = t.type === "defaultAttribute", i = p.includes(t.attributeName);
+      const r = t.type === "defaultAttribute", i = u.includes(t.attributeName);
       let o = r ? t.attributeName : `product_attributes.${t.attributeName}`;
       return o = i ? `${o}.${e.recommendationConfigs.currencySettings.value}` : o, {
         text: t.displayName,
@@ -179,13 +178,13 @@ const s = m(), h = () => ({
         activePredictiveAlgorithms: e,
         languages: t,
         currencies: r
-      } = await s.fetchRecommendationCreateData();
+      } = await a.fetchRecommendationCreateData();
       this.activePredictiveAlgorithms = e, this.languages = t;
       const [i] = r;
       this.recommendationConfigs.currencySettings.name = i.text, this.recommendationConfigs.currencySettings.value = i.value, this.currencyList = r, this.filterStatus = !!this.recommendationConfigs.filters.length;
     },
     async fetchRecommendationFilters() {
-      const e = await s.fetchRecommendationFilters();
+      const e = await a.fetchRecommendationFilters();
       this.filterList = e;
     },
     addFilterGroup(e) {
@@ -225,15 +224,13 @@ const s = m(), h = () => ({
       }
     },
     addFilter(e) {
-      const t = [...this.recommendationConfigs.filters], i = t.filter(
-        (a) => a.filterGroup === e.filterGroup
-      ).length + 1, o = t.findLastIndex((a) => a.filterGroup === e.filterGroup);
-      o !== -1 ? t.splice(o + 1, 0, {
+      const t = [...this.recommendationConfigs.filters], r = t.findLastIndex((i) => i.filterGroup === e.filterGroup);
+      r !== -1 ? t.splice(r + 1, 0, {
         ...e,
-        filterNumber: i
+        filterNumber: r + 2
       }) : t.push({
         ...e,
-        filterNumber: i
+        filterNumber: 1
       }), this.$patch({
         recommendationConfigs: {
           filters: t
@@ -241,32 +238,30 @@ const s = m(), h = () => ({
       });
     },
     generateFilterQuery() {
-      return c(this.recommendationConfigs.filters);
+      return m(this.recommendationConfigs.filters);
     },
     async fetchRecommendationProducts() {
-      var u;
-      const e = this.recommendationConfigs.filters.filter((n) => n.isValid), t = c(e), r = ((u = l.find((n) => n.key === this.recommendationConfigs.strategy)) == null ? void 0 : u.path) || "", i = f(), o = {
-        // Note: {itemId} and {campaignId} are template placeholders replaced at runtime
-        locale: this.recommendationConfigs.language,
-        currency: this.recommendationConfigs.currencySettings.value,
-        partnerName: i.partnerName,
-        productId: this.recommendationConfigs.strategy === "manualMerchandising" ? this.recommendationConfigs.productIds.join(",") : "{itemId}",
-        size: this.recommendationConfigs.size,
-        details: !0,
-        campaignId: "{campaignId}",
-        filter: t
-      };
-      this.recommendationConfigs.shuffleProducts && (o.shuffle = !0);
-      const a = await s.fetchRecommendationProducts(
-        r,
-        o
+      var o;
+      const e = this.generateFilterQuery(), t = ((o = n.find((s) => s.key === this.recommendationConfigs.strategy)) == null ? void 0 : o.path) || "", r = c(), i = await a.fetchRecommendationProducts(
+        t,
+        {
+          // TODO: Here will be optimized and filled carefully
+          locale: this.recommendationConfigs.language,
+          currency: this.recommendationConfigs.currencySettings.value,
+          partnerName: r.partnerName,
+          productId: this.recommendationConfigs.strategy === "manualMerchandising" ? this.recommendationConfigs.productIds.join(",") : "{itemId}",
+          size: this.recommendationConfigs.size,
+          details: !0,
+          campaignId: "{campaignId}",
+          filter: e
+        }
       );
       this.$patch({
-        recommendationProducts: a
+        recommendationProducts: i
       });
     }
   }
 });
 export {
-  R as useRecommendationExtensionStore
+  y as useRecommendationExtensionStore
 };

package/dist/extensions/Blocks/Recommendation/templates/blockTemplate.js

@@ -0,0 +1,181 @@
+import { BlockType as e, BlockAttr as o } from "../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { RecommendationBlockId as s, ATTR_PRODUCT_BUTTON as r, ATTR_PRODUCT_OMNIBUS_DISCOUNT as c, ATTR_PRODUCT_OMNIBUS_PRICE as p, ATTR_PRODUCT_OLD_PRICE as i, ATTR_PRODUCT_PRICE as d, ATTR_PRODUCT_NAME as T, ATTR_PRODUCT_IMAGE as b } from "../constants.js";
+import { generateTemplate as _, prepareProductRows as O, spacer as u, DEFAULTS as f, getDefaultProducts as C } from "./templateUtils.js";
+import { DEFAULT_CARD_COMPOSITION as I, DEFAULT_CARD_VISIBILITY as h } from "./templateUtils.js";
+const g = `
+    <td align="left" class="ins-recommendation-v3-block-v2 esd-block-recommendation-v3-block es-p20">
+        <table width="100%" cellpadding="0" cellspacing="0" border="0">
+            <tr>
+                <td align="center">
+                    <table
+                        class="container"
+                        width="100%"
+                        cellpadding="0"
+                        cellspacing="0"
+                        border="0">
+                        <tbody>
+                            <tr>
+                                <td>
+                                    <table
+                                        width="100%"
+                                        cellpadding="0"
+                                        cellspacing="0"
+                                        border="0">
+                                        <tbody>
+                                            <${e.BLOCK_TEXT}
+                                                class="es-p10t es-p10b es-p20l es-p20r"
+                                                align="center">
+                                                <p path="1" style="font-size: 28px; color: #333333;">
+                                                    <strong path="1,0">{-{-TITLE-}-}</strong>
+                                                </p>
+                                            </${e.BLOCK_TEXT}>
+                                        </tbody>
+                                    </table>
+                                </td>
+                            </tr>
+                            ${u}
+                            <tr>
+                                <td>
+                                    <table
+                                        class="ins-recommendation-product-container"
+                                        width="100%"
+                                        cellpadding="0"
+                                        cellspacing="0"
+                                        border="0"
+                                    >
+                                        {-{-PRODUCT_ROWS-}-}
+                                    </table>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </td>
+            </tr>
+        </table>
+    </td>
+`, n = {
+  [b]: (t) => `
+        <${e.BLOCK_IMAGE}
+            ${o.BLOCK_IMAGE.src}="${t.image_url}"
+            ${o.BLOCK_IMAGE.alt}="${t.name}"
+            ${o.BLOCK_IMAGE.href}="#"
+            class="product-image"
+            align="center"
+            style="max-width: 100%; height: auto; margin: 0 auto;"
+            esd-extension-block-id="${s.IMAGE}">
+        </${e.BLOCK_IMAGE}>
+    `,
+  [T]: (t) => `
+        <${e.BLOCK_TEXT}
+            class="product-name es-p10t es-p10b es-p15l es-p15r"
+            align="center"
+            esd-extension-block-id="${s.NAME}">
+            <p path="1" contenteditable="false" style="font-size: 16px; color: #333333;">
+                <strong path="1,0">${t.name}</strong>
+            </p>
+        </${e.BLOCK_TEXT}>
+    `,
+  [d]: () => `
+        <${e.BLOCK_TEXT}
+            class="product-price es-p15l es-p15r"
+            align="center"
+            esd-extension-block-id="${s.PRICE}">
+            <p path="1" contenteditable="false" style="font-size: 16px; color: #333333;">
+                <strong path="1,0">18,00 TRY</strong>
+            </p>
+        </${e.BLOCK_TEXT}>
+    `,
+  [i]: () => `
+        <${e.BLOCK_TEXT}
+            class="product-old-price es-p15l es-p15r"
+            align="center"
+            esd-extension-block-id="${s.OLD_PRICE}">
+            <p path="1" contenteditable="false" style="font-size: 14px; color: #999999;">
+                <s path="1,0">20,00 TRY</s>
+            </p>
+        </${e.BLOCK_TEXT}>
+    `,
+  [p]: () => `
+        <${e.BLOCK_TEXT}
+            class="product-omnibus-price es-p15l es-p15r"
+            align="center"
+            data-text-before="Lowest 30-day price: "
+            data-text-after=""
+            esd-extension-block-id="${s.OMNIBUS_PRICE}">
+            <p path="1" contenteditable="false" style="font-size: 12px; color: #666666;">
+                <span class="omnibus-text-before">Lowest 30-day price: </span>
+                <span class="omnibus-price-value">17,00 TRY</span>
+                <span class="omnibus-text-after"></span>
+            </p>
+        </${e.BLOCK_TEXT}>
+    `,
+  [c]: () => `
+        <${e.BLOCK_TEXT}
+            class="product-omnibus-discount es-p15l es-p15r"
+            align="center"
+            data-text-before=""
+            data-text-after=""
+            esd-extension-block-id="${s.OMNIBUS_DISCOUNT}">
+            <p path="1" contenteditable="false" style="font-size: 12px; color: #666666;">
+                <span class="omnibus-text-before"></span>
+                <span class="omnibus-discount-value">-6%</span>
+                <span class="omnibus-text-after"></span>
+            </p>
+        </${e.BLOCK_TEXT}>
+    `,
+  [r]: () => `
+        <${e.BLOCK_BUTTON}
+            ${o.BLOCK_BUTTON.href}="#"
+            class="product-button es-p10t es-p10b"
+            align="center"
+            esd-extension-block-id="${s.BUTTON}">
+            <span class="es-button-border">
+                <a
+                    href="#"
+                    class="es-button buy-button"
+                    target="_blank"
+                    style="
+                        display: inline-block;
+                        width: 90%;
+                        max-width: 150px;
+                        padding: 12px 20px;
+                        background-color: #ffffff;
+                        color: #333333;
+                        text-decoration: none;
+                        border: 2px solid #cccccc;
+                        font-size: 16px;
+                        box-sizing: border-box;
+                    ">
+                    Buy
+                </a>
+            </span>
+        </${e.BLOCK_BUTTON}>
+    `
+};
+function x() {
+  const t = C();
+  return _(
+    g,
+    t,
+    3,
+    n,
+    f.TITLE
+  );
+}
+function E(t, a, l) {
+  return O(
+    t,
+    a,
+    n,
+    l
+  );
+}
+export {
+  f as DEFAULTS,
+  I as DEFAULT_CARD_COMPOSITION,
+  h as DEFAULT_CARD_VISIBILITY,
+  g as default,
+  C as getDefaultProducts,
+  x as getDefaultTemplate,
+  E as prepareProductRows
+};

package/dist/extensions/Blocks/Recommendation/templates/migrationTemplate.js

@@ -0,0 +1,189 @@
+import { ATTR_PRODUCT_BUTTON as o, ATTR_PRODUCT_OMNIBUS_DISCOUNT as a, ATTR_PRODUCT_OMNIBUS_PRICE as s, ATTR_PRODUCT_OLD_PRICE as l, ATTR_PRODUCT_PRICE as c, ATTR_PRODUCT_NAME as r, ATTR_PRODUCT_IMAGE as d } from "../constants.js";
+import { prepareProductRows as i } from "./templateUtils.js";
+import { DEFAULTS as k, getDefaultProducts as f } from "./templateUtils.js";
+const g = `
+    <td
+        align="left"
+        esd-extension-block-id="recommendation-block"
+        esd-handler-name="esd-extension-RecommendationBlock"
+        class="ins-recommendation-v3-block-v2 esd-block-recommendation-v3-block esd-extension-block es-p20"
+    >
+        <table width="100%" cellpadding="0" cellspacing="0" border="0">
+            <tr>
+                <td align="center">
+                    <table
+                        class="container"
+                        width="100%"
+                        cellpadding="0"
+                        cellspacing="0"
+                        border="0">
+                        <tbody>
+                            <tr>
+                                <td>
+                                    <table
+                                        width="100%"
+                                        cellpadding="0"
+                                        cellspacing="0"
+                                        border="0">
+                                        <tbody>
+                                            <tr>
+                                                {-{-TITLE-}-}
+                                            </tr>
+                                        </tbody>
+                                    </table>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="spacer" style="height: 20px;"></td>
+                            </tr>
+                            <tr>
+                                <td>
+                                    <table
+                                        class="ins-recommendation-product-container"
+                                        width="100%"
+                                        cellpadding="0"
+                                        cellspacing="0"
+                                        border="0"
+                                    >
+                                        {-{-PRODUCT_ROWS-}-}
+                                    </table>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </td>
+            </tr>
+        </table>
+    </td>
+`, p = {
+  [d]: (t) => `
+        <tr>
+            <td
+                class="esd-block-image product-image"
+                esd-extension-block-id="recommendation-block-image"
+                align="center"
+                style="font-size: 0px;">
+                <a target="_blank" href="${t.url}">
+                    <img
+                        src="${t.image_url}"
+                        alt="${t.name}"
+                        width="120"
+                        style="display: block; max-width: 100%; height: auto;"
+                        class="adapt-img">
+                </a>
+            </td>
+        </tr>
+    `,
+  [r]: (t) => `
+        <tr>
+            <td
+                class="esd-block-text product-name"
+                esd-extension-block-id="recommendation-block-name"
+                align="center">
+                <p
+                    path="1"
+                    contenteditable="false"
+                    style="font-size: 16px; color: #333333; font-weight: 600; text-align: center;">
+                    <strong path="1,0">${t.name}</strong>
+                </p>
+            </td>
+        </tr>
+    `,
+  [c]: () => `
+        <tr>
+            <td
+                class="esd-block-text product-price"
+                esd-extension-block-id="recommendation-block-price"
+                align="center">
+                <p
+                    path="1"
+                    contenteditable="false"
+                    style="font-size: 16px; color: #333333; font-weight: bold; text-align: center;">
+                    <strong path="1,0">18,00 TRY</strong>
+                </p>
+            </td>
+        </tr>
+    `,
+  [l]: () => `
+        <tr>
+            <td
+                class="esd-block-text product-old-price"
+                esd-extension-block-id="recommendation-block-old-price"
+                align="center">
+                <p
+                    path="1"
+                    contenteditable="false"
+                    style="font-size: 14px; color: #999999; text-decoration: line-through; text-align: center;">
+                    <s path="1,0">20,00 TRY</s>
+                </p>
+            </td>
+        </tr>
+    `,
+  [s]: () => `
+        <tr>
+            <td
+                class="esd-block-text product-omnibus-price"
+                esd-extension-block-id="recommendation-block-omnibus-price"
+                data-text-before="Lowest 30-day price: "
+                data-text-after=""
+                align="center">
+                <p
+                    path="1"
+                    contenteditable="false"
+                    style="font-size: 14px; color: #666666; text-align: center;"><span
+                    class="omnibus-text-before">Lowest 30-day price: </span><span
+                    class="omnibus-price-value">17,00 TRY</span><span
+                    class="omnibus-text-after"></span></p>
+            </td>
+        </tr>
+    `,
+  [a]: () => `
+        <tr>
+            <td
+                class="esd-block-text product-omnibus-discount"
+                esd-extension-block-id="recommendation-block-omnibus-discount"
+                data-text-before=""
+                data-text-after=""
+                align="center">
+                <p
+                    path="1"
+                    contenteditable="false"
+                    style="font-size: 14px; color: #666666; text-align: center;"><span
+                    class="omnibus-text-before"></span><span
+                    class="omnibus-discount-value">-6%</span><span
+                    class="omnibus-text-after"></span></p>
+            </td>
+        </tr>
+    `,
+  [o]: (t) => `
+        <tr>
+            <td
+                class="esd-block-button product-button"
+                esd-extension-block-id="recommendation-block-button"
+                align="center">
+                <span class="es-button-border" style="display: block;">
+                    <a
+                        href="${t.url}"
+                        target="_blank"
+                        class="es-button">
+                        {-{-PRODUCT_BUTTON_TEXT-}-}
+                    </a>
+                </span>
+            </td>
+        </tr>
+    `
+};
+function u(t, e, n) {
+  return i(
+    t,
+    e,
+    p,
+    n
+  );
+}
+export {
+  k as DEFAULTS,
+  g as default,
+  f as getDefaultProducts,
+  u as prepareProductRows
+};