@useinsider/guido 3.0.0 → 3.1.0

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

@@ -3,7 +3,7 @@ const n = `/* Utils */
 
 /* Recommendation Controls - Main settings panel separators */
 .recommendation-controls-container > div {
-    border-bottom: 1px solid #e0e0e0;
+    border-bottom: 1px solid #eee;
 }
 
 .recommendation-controls-container > div:first-child {
@@ -18,10 +18,217 @@ const n = `/* Utils */
     padding: 0
 }
 
-/* Hide drag icon for list layout (ordering disabled) */
+/* Right-align the mobile layout toggle within the two-column grid */
+.product-layout-control-container ue-switcher {
+    justify-self: end;
+}
+
+/* Hide drag icon for list layout (ordering disabled) — legacy UE-ORDERABLE */
 ue-orderable.orderable-disabled .droppable-icon {
     display: none;
 }
+
+/* =============================================
+   Custom Orderable List (replaces UE-ORDERABLE)
+   ============================================= */
+
+/* Card Composition Description */
+.card-composition-description {
+    font-size: 13px;
+    color: var(--guido-color-gray-800);
+    margin: 0;
+    line-height: 1.4;
+}
+
+/* Add Attribute button */
+#guido__btn-add-attribute {
+    margin: 16px;
+}
+
+#guido__btn-add-attribute .button {
+    background: var(--guido-color-primary-100);
+    color: var(--guido-color-primary-500);
+    border: none;
+}
+
+#guido__btn-add-attribute .button:not(.disabled):hover {
+    background: var(--guido-color-primary-0);
+}
+
+#guido__btn-add-attribute .button.disabled {
+    background: var(--guido-color-gray-100);
+    color: var(--guido-color-gray-500);
+}
+
+/* Custom attribute select wrapper (inside orderable item) */
+.custom-attr-select-wrap {
+    flex: 1;
+    min-width: 0;
+}
+
+.custom-attr-select-wrap ue-select {
+    width: 270px;
+}
+
+/* Orderable List */
+.orderable-list {
+    display: flex;
+    flex-direction: column;
+}
+
+.orderable-item {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    padding: 16px;
+    min-height: 72px;
+    background: var(--guido-color-white);
+    border-top: 1px solid #eee;
+    cursor: default;
+    transition: background 0.15s;
+    box-sizing: border-box;
+}
+
+.orderable-item:first-child {
+    border-top: none;
+}
+
+.orderable-item:hover {
+    background: #fafafa;
+}
+
+.orderable-item.dragging {
+    opacity: 0.5;
+    background: var(--guido-color-gray-1);
+}
+
+.orderable-item.drag-over {
+    border-top: 2px solid var(--guido-color-primary-500, #0A2ECC);
+}
+
+.drag-handle {
+    user-select: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    flex-shrink: 0;
+}
+
+.drag-handle .drag-handle-btn .button {
+    padding: 0;
+    min-width: auto;
+    cursor: move;
+}
+
+.drag-handle .drag-handle-btn .button .icon-button {
+    color: var(--guido-color-gray-600);
+}
+
+.item-label {
+    flex: 1;
+    font-size: 13px;
+    line-height: 16px;
+    color: #333;
+}
+
+.item-action {
+    display: flex;
+    align-items: center;
+}
+
+/* Custom attribute delete button */
+.custom-attr-delete .button .icon-button {
+    color: var(--guido-color-danger-500);
+}
+
+/* Disable drag for list layout */
+.orderable-list.orderable-disabled .drag-handle {
+    display: none;
+}
+
+.orderable-list.orderable-disabled .orderable-item {
+    cursor: default;
+}
+
+/* ─── Migration Info Box ─────────────────────────────────────────────── */
+/* Shown in the settings panel title when a block was migrated from legacy */
+
+/* Layout variables for positioning the absolutely-placed info box */
+:host {
+    --rec-migration-padding: 16px;
+    --rec-migration-title-height: 61px;
+    --rec-migration-box-height: 98px;
+}
+
+/* Push tabs down when info box is present inside the control panel header */
+.control-panel-header:has(.recommendation-block-migration-info) {
+    position: relative;
+    margin-bottom: calc(2 * var(--rec-migration-padding) + var(--rec-migration-box-height));
+}
+
+/* Info box container */
+.recommendation-block-migration-info {
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+    padding: 12px;
+    background: var(--guido-color-background-onpage-message-info);
+    border: 1px solid var(--guido-color-border-onpage-message-info);
+    border-radius: 4px;
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.07);
+    position: absolute;
+    left: var(--rec-migration-padding);
+    right: var(--rec-migration-padding);
+    top: calc(var(--rec-migration-padding) + var(--rec-migration-title-height));
+}
+
+/* Icon — 18x19 icon inside a 24x24 bounding box (matches Figma) */
+.recommendation-block-migration-info__icon {
+    flex-shrink: 0;
+    width: 24px;
+    height: 24px;
+}
+
+/* Text content */
+.recommendation-block-migration-info__text {
+    margin: 4px 0;
+    white-space: normal;
+    font-size: 13px;
+    font-weight: 400;
+    line-height: 16px;
+}
+
+/* ─── Sync Info Message ─────────────────────────────────────────────── */
+/* Shown above tabs in sub-block panels (Name, Button, Image) to indicate
+   that editing applies to all product cards. Same structure as migration info. */
+
+.sync-info-message {
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+    padding: 12px;
+    margin: 16px 16px 0;
+    background: var(--guido-color-background-onpage-message-info);
+    border: 1px solid var(--guido-color-border-onpage-message-info);
+    border-radius: 4px;
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.07);
+}
+
+.sync-info-message__icon {
+    flex-shrink: 0;
+    width: 24px;
+    height: 24px;
+}
+
+.sync-info-message__text {
+    margin: 4px 0;
+    white-space: normal;
+    font-size: 13px;
+    font-weight: 400;
+    line-height: 16px;
+}
 `;
 export {
   n as default

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

@@ -1,8 +1,8 @@
-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 { SettingsPanelRegistry as E, SettingsPanelTab as _, SettingsTab as O, ContainerControls as C, TextControls as R } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { BLOCK_ID as U } 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 { RecommendationControlId as T } from "./constants/controlIds.js";
+import { CONTROL_BLOCK_ID as A } from "./controls/main/index.js";
 import "./store/recommendation.js";
 import "./controls/name/index.js";
 import "./controls/price/index.js";
@@ -11,163 +11,187 @@ 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 {
-  registerBlockControls(O) {
-    O[R] = [
-      new I(
-        T.SETTINGS,
-        [
-          L,
-          E.EXTERNAL_INDENTS
+import { SPACING_CONTROL_ID as L } from "./controls/spacing/index.js";
+import { CARD_BACKGROUND_COLOR_CONTROL_ID as D } from "./controls/cardBackground/index.js";
+import { COMPOSITION_CONTROL_BLOCK_ID as B } from "./controls/cardComposition/index.js";
+import { SYNC_INFO_MESSAGE_CONTROL_ID as S } from "./controls/syncInfoMessage.js";
+class Z extends E {
+  registerBlockControls(I) {
+    I[U] = [
+      new _(
+        O.SETTINGS,
+        [
+          A,
+          C.EXTERNAL_INDENTS
         ]
       ),
-      new I(
-        T.STYLES,
+      new _(
+        O.STYLES,
         [
-          C.TEXT_BLOCK_BACKGROUND_COLOR,
-          B,
+          R.TEXT_BLOCK_BACKGROUND_COLOR,
           D,
-          U
+          L
         ]
       ),
-      new I(
+      new _(
         "Card Composition",
         [
-          A
+          B
         ]
-      ).withLabel("Card Composition")
-    ], O[N.NAME] = [
-      new I(
-        T.SETTINGS,
+      ).withLabel(this.api.translate("Card Composition"))
+    ], I[N.NAME] = [
+      new _(
+        O.SETTINGS,
         [
-          _.NAME_STYLE,
-          _.NAME_ALIGN,
-          _.NAME_TEXT_TRIM,
-          _.NAME_PADDINGS
+          S,
+          T.NAME_STYLE,
+          T.NAME_ALIGN,
+          T.NAME_TEXT_TRIM,
+          T.NAME_PADDINGS
         ]
       ),
-      new I(
-        T.STYLES,
+      new _(
+        O.STYLES,
         [
-          _.NAME_BACKGROUND,
-          _.NAME_FONT_FAMILY,
-          _.NAME_SIZE,
-          _.NAME_COLOR
+          T.NAME_BACKGROUND,
+          T.NAME_FONT_FAMILY,
+          T.NAME_SIZE,
+          T.NAME_COLOR
         ]
       )
-    ], O[N.PRICE] = [
-      new I(
-        T.SETTINGS,
+    ], I[N.PRICE] = [
+      new _(
+        O.SETTINGS,
         [
-          _.PRICE_STYLE,
-          _.PRICE_ALIGN,
-          _.PRICE_PADDINGS
+          S,
+          T.PRICE_STYLE,
+          T.PRICE_ALIGN,
+          T.PRICE_PADDINGS
         ]
       ),
-      new I(
-        T.STYLES,
+      new _(
+        O.STYLES,
         [
-          _.PRICE_BACKGROUND,
-          _.PRICE_FONT_FAMILY,
-          _.PRICE_SIZE,
-          _.PRICE_COLOR
+          T.PRICE_BACKGROUND,
+          T.PRICE_FONT_FAMILY,
+          T.PRICE_SIZE,
+          T.PRICE_COLOR
         ]
       )
-    ], O[N.OLD_PRICE] = [
-      new I(
-        T.SETTINGS,
+    ], I[N.OLD_PRICE] = [
+      new _(
+        O.SETTINGS,
         [
-          _.OLD_PRICE_STYLE,
-          _.OLD_PRICE_ALIGN,
-          _.OLD_PRICE_PADDINGS
+          S,
+          T.OLD_PRICE_STYLE,
+          T.OLD_PRICE_ALIGN,
+          T.OLD_PRICE_PADDINGS
         ]
       ),
-      new I(
-        T.STYLES,
+      new _(
+        O.STYLES,
         [
-          _.OLD_PRICE_BACKGROUND,
-          _.OLD_PRICE_FONT_FAMILY,
-          _.OLD_PRICE_SIZE,
-          _.OLD_PRICE_COLOR
+          T.OLD_PRICE_BACKGROUND,
+          T.OLD_PRICE_FONT_FAMILY,
+          T.OLD_PRICE_SIZE,
+          T.OLD_PRICE_COLOR
         ]
       )
-    ], O[N.OMNIBUS_PRICE] = [
-      new I(
-        T.SETTINGS,
+    ], I[N.OMNIBUS_PRICE] = [
+      new _(
+        O.SETTINGS,
         [
-          _.OMNIBUS_PRICE_TEXT_BEFORE,
-          _.OMNIBUS_PRICE_TEXT_AFTER,
-          _.OMNIBUS_PRICE_STYLE,
-          _.OMNIBUS_PRICE_ALIGN,
-          _.OMNIBUS_PRICE_PADDINGS
+          S,
+          T.OMNIBUS_PRICE_TEXT_BEFORE,
+          T.OMNIBUS_PRICE_TEXT_AFTER,
+          T.OMNIBUS_PRICE_STYLE,
+          T.OMNIBUS_PRICE_ALIGN,
+          T.OMNIBUS_PRICE_PADDINGS
         ]
       ),
-      new I(
-        T.STYLES,
+      new _(
+        O.STYLES,
         [
-          _.OMNIBUS_PRICE_BACKGROUND,
-          _.OMNIBUS_PRICE_FONT_FAMILY,
-          _.OMNIBUS_PRICE_SIZE,
-          _.OMNIBUS_PRICE_COLOR
+          T.OMNIBUS_PRICE_BACKGROUND,
+          T.OMNIBUS_PRICE_FONT_FAMILY,
+          T.OMNIBUS_PRICE_SIZE,
+          T.OMNIBUS_PRICE_COLOR
         ]
       )
-    ], O[N.OMNIBUS_DISCOUNT] = [
-      new I(
-        T.SETTINGS,
+    ], I[N.OMNIBUS_DISCOUNT] = [
+      new _(
+        O.SETTINGS,
         [
-          _.OMNIBUS_DISCOUNT_TEXT_BEFORE,
-          _.OMNIBUS_DISCOUNT_TEXT_AFTER,
-          _.OMNIBUS_DISCOUNT_STYLE,
-          _.OMNIBUS_DISCOUNT_ALIGN,
-          _.OMNIBUS_DISCOUNT_PADDINGS
+          S,
+          T.OMNIBUS_DISCOUNT_TEXT_BEFORE,
+          T.OMNIBUS_DISCOUNT_TEXT_AFTER,
+          T.OMNIBUS_DISCOUNT_STYLE,
+          T.OMNIBUS_DISCOUNT_ALIGN,
+          T.OMNIBUS_DISCOUNT_PADDINGS
         ]
       ),
-      new I(
-        T.STYLES,
+      new _(
+        O.STYLES,
         [
-          _.OMNIBUS_DISCOUNT_BACKGROUND,
-          _.OMNIBUS_DISCOUNT_FONT_FAMILY,
-          _.OMNIBUS_DISCOUNT_SIZE,
-          _.OMNIBUS_DISCOUNT_COLOR
+          T.OMNIBUS_DISCOUNT_BACKGROUND,
+          T.OMNIBUS_DISCOUNT_FONT_FAMILY,
+          T.OMNIBUS_DISCOUNT_SIZE,
+          T.OMNIBUS_DISCOUNT_COLOR
         ]
       )
-    ], O[N.BUTTON] = [
-      new I(
-        T.SETTINGS,
+    ], I[N.BUTTON] = [
+      new _(
+        O.SETTINGS,
         [
-          _.BUTTON_TEXT,
-          _.BUTTON_ALIGN,
-          _.BUTTON_PADDINGS,
-          _.BUTTON_MARGINS
+          S,
+          T.BUTTON_TEXT,
+          T.BUTTON_ALIGN,
+          T.BUTTON_PADDINGS,
+          T.BUTTON_MARGINS
         ]
       ),
-      new I(
-        T.STYLES,
+      new _(
+        O.STYLES,
         [
-          _.BUTTON_COLOR,
-          _.BUTTON_FONT_FAMILY,
-          _.BUTTON_TEXT_SIZE,
-          _.BUTTON_TEXT_STYLE_AND_FONT_COLOR,
-          _.BUTTON_FIT_TO_CONTENT,
-          _.BUTTON_BORDER_RADIUS,
-          _.BUTTON_BORDER
+          T.BUTTON_COLOR,
+          T.BUTTON_FONT_FAMILY,
+          T.BUTTON_TEXT_SIZE,
+          T.BUTTON_TEXT_STYLE_AND_FONT_COLOR,
+          T.BUTTON_FIT_TO_CONTENT,
+          T.BUTTON_BORDER_RADIUS,
+          T.BUTTON_BORDER
         ]
       )
-    ], O[N.IMAGE] = [
-      new I(
-        T.SETTINGS,
+    ], I[N.CUSTOM_ATTRIBUTE] = [
+      new _(
+        O.SETTINGS,
         [
-          _.IMAGE_SIZE,
-          _.IMAGE_MARGINS
+          T.CUSTOM_ATTR_STYLE,
+          T.CUSTOM_ATTR_ALIGN,
+          T.CUSTOM_ATTR_PADDINGS
+        ]
+      ),
+      new _(
+        O.STYLES,
+        [
+          T.CUSTOM_ATTR_BACKGROUND,
+          T.CUSTOM_ATTR_FONT_FAMILY,
+          T.CUSTOM_ATTR_SIZE,
+          T.CUSTOM_ATTR_COLOR
+        ]
+      )
+    ], I[N.IMAGE] = [
+      new _(
+        O.SETTINGS,
+        [
+          S,
+          T.IMAGE_SIZE,
+          T.IMAGE_MARGINS
         ]
       )
     ];
   }
 }
 export {
-  s as SettingsPanel
+  Z as SettingsPanel
 };

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

@@ -5,11 +5,11 @@ import { defineStore as G } from "pinia";
 import { DEFAULT_CARDS_IN_ROW as F } from "../constants/layout.js";
 import { EXCLUDED_ALGORITHM_IDS as w } from "../constants/defaultConfig.js";
 import { getDefaultProducts as S } from "../templates/utils.js";
-import { generateCompleteFilterQuery as I } from "../utils/filterUtil.js";
+import { generateCompleteFilterQuery as b } from "../utils/filterUtil.js";
 import { isFilterValid as D } from "../validation/filterSchema.js";
 const h = y();
 let u = null, m = null, d = null;
-function b() {
+function I() {
   return {
     cardsInRow: F,
     currencySettings: {
@@ -25,6 +25,7 @@ function b() {
     productIds: [],
     id: 1,
     language: "en_US",
+    mobileLayoutEnabled: !1,
     orientation: "grid",
     recommendedProducts: [],
     sendProductRequestFlag: !1,
@@ -32,12 +33,13 @@ function b() {
     strategy: "mostPopular",
     textTrimming: !0,
     unresponsive: !1,
-    size: "6"
+    size: "6",
+    customAttributes: []
   };
 }
 function P() {
   return {
-    recommendationConfigs: b(),
+    recommendationConfigs: I(),
     recommendationProducts: [],
     filterStatus: !1,
     filterSelectionDrawerStatus: !1,
@@ -66,7 +68,7 @@ const v = () => ({
      * This allows all existing code that reads `store.recommendationConfigs` to work unchanged.
      */
     recommendationConfigs(t) {
-      return t.currentRecommendationId !== null && t.blockStates[t.currentRecommendationId] ? t.blockStates[t.currentRecommendationId].recommendationConfigs : b();
+      return t.currentRecommendationId !== null && t.blockStates[t.currentRecommendationId] ? t.blockStates[t.currentRecommendationId].recommendationConfigs : I();
     },
     /**
      * Proxy getter: delegates to blockStates[currentRecommendationId].recommendationProducts
@@ -352,7 +354,7 @@ const v = () => ({
       }), r.recommendationConfigs.filters = e;
     },
     generateFilterQuery() {
-      return I(this.recommendationConfigs.filters);
+      return b(this.recommendationConfigs.filters);
     },
     // ====================================================================
     // Per-Block Product Fetching
@@ -373,7 +375,7 @@ const v = () => ({
     },
     async _doFetchProducts() {
       var p;
-      const t = this.currentRecommendationId, r = this.blockStates[t], { recommendationConfigs: e } = r, n = e.filters.filter((a) => a.isValid), c = I(n), i = ((p = g.find((a) => a.key === e.strategy)) == null ? void 0 : p.path) || "", o = C(), s = {
+      const t = this.currentRecommendationId, r = this.blockStates[t], { recommendationConfigs: e } = r, n = e.filters.filter((a) => a.isValid), c = b(n), i = ((p = g.find((a) => a.key === e.strategy)) == null ? void 0 : p.path) || "", o = C(), s = {
         locale: e.language,
         currency: e.currencySettings.value,
         partnerName: o.partnerName,