@useinsider/guido 3.2.0-beta.78d83bd → 3.2.0-beta.7fb9b70

package/dist/src/config/migrator/recommendation/types.d.ts

@@ -0,0 +1,205 @@
+/**
+ * Internal types for the legacy Recommendation block migrator.
+ *
+ * The legacy block stores its full state as a JSON blob inside the
+ * `esd-dev-product-config` HTML attribute. These interfaces describe
+ * the subset of that schema we depend on. All fields are optional —
+ * legacy data is heterogeneous and we use defensive optional chaining
+ * everywhere downstream.
+ */
+/** Per-side numeric values used by border / padding theme fields. */
+export interface LegacySides<T = number> {
+    left?: T;
+    right?: T;
+    top?: T;
+    bottom?: T;
+}
+/** Padding shape used for both desktop and mobile in legacy theme. */
+export interface LegacyPaddingViewport {
+    all?: number;
+    top?: number;
+    right?: number;
+    bottom?: number;
+    left?: number;
+}
+/** Padding object covering both desktop and mobile breakpoints. */
+export interface LegacyPadding {
+    desktop?: LegacyPaddingViewport;
+    mobile?: LegacyPaddingViewport;
+}
+/** Border-radius shape — observed in two flavours: shorthand or per-corner. */
+export interface LegacyBorderRadius {
+    /** Single shorthand value (e.g. `radius: 4`). */
+    radius?: number;
+    /** Per-corner: top-left / top-right / bottom-right / bottom-left (in px). */
+    lt?: number;
+    rt?: number;
+    rb?: number;
+    lb?: number;
+}
+/** Theme attached to text-like variables (name, prices, omnibus, custom-attr). */
+export interface LegacyTextTheme {
+    textStyle?: {
+        'font-family'?: string;
+        'font-size'?: string;
+        'font-weight'?: string;
+        'font-style'?: string;
+    };
+    textColor?: {
+        color?: string;
+    };
+    textBackgroundColor?: {
+        color?: string;
+    };
+    textPadding?: LegacyPadding;
+    textLineSpacing?: {
+        lineSpacing?: string;
+        'font-lineSpacing'?: string;
+    };
+    textAlign?: {
+        align?: string;
+    };
+    textTrimming?: boolean;
+}
+/** Theme attached to image variables. */
+export interface LegacyImageTheme {
+    imageSize?: {
+        width?: number;
+        height?: number;
+    };
+}
+/** Theme attached to the button variable. */
+export interface LegacyButtonTheme {
+    buttonStyle?: {
+        'font-family'?: string;
+        'font-size'?: string;
+        'font-weight'?: string;
+        'font-style'?: string;
+    };
+    buttonStretch?: {
+        stretched?: boolean;
+    };
+    buttonInternalPadding?: LegacyPadding;
+    buttonExternalPadding?: LegacyPadding;
+    buttonText?: {
+        text?: string;
+    };
+    buttonColor?: {
+        color?: string;
+    };
+    textButtonColor?: {
+        color?: string;
+    };
+    buttonBorder?: {
+        width?: LegacySides<number>;
+        style?: LegacySides<string>;
+        color?: LegacySides<string>;
+    };
+    buttonBorderRadius?: LegacyBorderRadius;
+    buttonAlign?: {
+        align?: string;
+    };
+}
+/** Block-level theme. */
+export interface LegacyBlockTheme {
+    blockAdapt?: {
+        adapt?: boolean;
+    };
+    blockPadding?: LegacyPadding;
+}
+/** Single composition.variable entry from `esd-dev-product-config`. */
+export interface LegacyVariable {
+    /** e.g. `p_name`, `p_button`, `p_attribute_<ts>`. */
+    variable?: string;
+    /** Marker that distinguishes custom product attributes (`'p_attribute'`). */
+    variableType?: string;
+    /** Selector legacy used to address this element in the HTML. */
+    visibilityAreaSelector?: string;
+    /** Custom-attribute value (e.g. `product_attribute.brand`). */
+    value?: string;
+    /** Whether the element is hidden in the legacy block. */
+    hidden?: boolean;
+    /** Sort order across composition entries (lower = earlier). */
+    positionIdx?: number;
+    /** Element-kind-specific theme bag. */
+    theme?: LegacyTextTheme & LegacyImageTheme & LegacyButtonTheme;
+    /** Custom attribute marker. */
+    custom?: boolean;
+}
+/** Full decoded `esd-dev-product-config` shape. */
+export interface LegacyProductConfig {
+    rowCount?: number;
+    totalCount?: number;
+    orientation?: string;
+    composition?: {
+        variables?: LegacyVariable[];
+    };
+    theme?: LegacyBlockTheme;
+}
+/** Element kind dispatched from a legacy `variable` value. */
+export type ElementKind = 'image' | 'text' | 'button' | 'custom' | 'title';
+/** Mapping output from a single legacy variable. */
+export interface MappedVariable {
+    /** Composition key (`productName`, `customAttr:brand`, …) or `__title__` for titles. */
+    key: string;
+    kind: ElementKind;
+    hidden: boolean;
+    positionIdx: number;
+    /** Original legacy variable (kept for downstream theme mapping). */
+    legacy: LegacyVariable;
+    /** For custom attrs: bare attribute name (e.g. `brand`). */
+    customAttrName?: string;
+    /** For custom attrs: full `product-attr` value (e.g. `product_attribute.brand`). */
+    customAttrValue?: string;
+}
+/** CSS style strings + attributes resolved from a single text-like theme. */
+export interface MappedTextStyle {
+    /** Inline CSS for outer `<td>` (background, padding). */
+    tdStyle: string;
+    /** Inline CSS for inner `<p>` (typography, color, line-height, text-align). */
+    pStyle: string;
+    /** Value for `<td align>` attribute, if any. */
+    align?: string;
+    /** Whether to wrap content in `<strong>`. */
+    wrapBold: boolean;
+    /** Whether to wrap content in `<em>`. */
+    wrapItalic: boolean;
+    /** True if `textTrimming: true` in theme. */
+    textTrimming: boolean;
+}
+/** Resolved button styles. */
+export interface MappedButtonStyle {
+    /** Inline CSS for outer `<td>` (external padding). */
+    tdStyle: string;
+    /** Value for `<td align>`, if any. */
+    align?: string;
+    /** Inline CSS for `<span class="es-button-border">`. */
+    spanStyle: string;
+    /** Inline CSS for `<a class="es-button">`. */
+    aStyle: string;
+    /** Button label text. */
+    text?: string;
+}
+/** Resolved image styles. */
+export interface MappedImageStyle {
+    /** Width in pixels (number form) — applied as both `width=` attr and CSS. */
+    width?: number;
+    /** Height in pixels. */
+    height?: number;
+}
+/** Per-variable mapped style bag, keyed by composition key. */
+export type PerElementStyles = Record<string, MappedTextStyle | MappedButtonStyle | MappedImageStyle | undefined>;
+/** Composition mapper output. */
+export interface MappedComposition {
+    composition: string[];
+    visibility: Record<string, boolean>;
+    customAttributes: string[];
+    /** Mapping of customAttr key → full `product-attr` value. */
+    customAttrValues: Record<string, string>;
+    /** Title variable, if present (for separate title rendering). */
+    titleVariable?: LegacyVariable;
+    /** Resolved styles per composition key. */
+    perElementStyles: PerElementStyles;
+    /** Whether *any* element had `textTrimming: true`. */
+    anyTextTrimming: boolean;
+}

package/dist/src/config/migrator/recommendationMigrator.d.ts

@@ -1 +1,13 @@
-export declare function migrateRecommendation(html: string): string;
+/**
+ * Idempotent: the selector matches only blocks that have
+ * `esd-dev-product-config` AND lack `recommendation-block-v2`, so
+ * re-running on a migrated template is a no-op.
+ */
+import type { LegacyRecommendationConfig } from '@@/Types/config';
+/**
+ * Migrate all legacy Recommendation Blocks in the given HTML string.
+ * @param html              - Full template HTML.
+ * @param recommendationConfigs - Map of campaign-id → legacy config (`Record<string, LegacyRecommendationConfig>`).
+ * @returns Migrated HTML, or the original HTML if no legacy blocks exist.
+ */
+export declare function migrateRecommendation(html: string, recommendationConfigs?: Record<string, LegacyRecommendationConfig>): string;

package/dist/src/config/migrator/recommendationMigrator.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/enums/onboarding.d.ts

@@ -3,3 +3,9 @@ export declare const UI_EDITOR_SELECTOR = "ui-editor";
 export declare const CARD_COMPOSITION_TAB_SELECTOR = "button[role=\"tab\"][aria-label=\"Card Composition\"]";
 export declare const SETTINGS_TAB_SELECTOR = "button[role=\"tab\"][aria-label=\"Settings\"]";
 export declare const RIBBON_SELECTOR = ".in-ribbons-wrapper";
+export declare const DYNAMIC_CONTENT_BUTTON_SELECTOR = "#guido__btn-add-dynamic-content";
+export declare const AMP_TOGGLE_BUTTON_SELECTOR = ".guido__amp-toggle-html";
+export declare const AMP_TOGGLE_WRAPPER_SELECTOR = ".in-segments-wrapper";
+export declare const HEADER_SELECTOR = "[data-testid=\"guido-header\"]";
+export declare const POPOVER_LEFT_OFFSET = 158;
+export declare const POPOVER_TOP_GAP = 10;

package/dist/src/extensions/Blocks/RadioButton/template.d.ts

@@ -1,4 +1,4 @@
-declare const migrationTemplate = "\n    <td\n        align=\"left\"\n        esd-extension-block-id=\"radio-button-block\"\n        esd-handler-name=\"esd-extension-RadioButtonBlock\"\n        class=\"\n            radio-button\n            radio-button-v2\n            esd-block-ra\n            esd-radio-button-block\n            esd-extension-block\n            es-p10t\n            es-p10b\n            es-p30r\n            es-p30l\"\n    >\n        <table cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" width=\"100%\">\n            <tbody>\n                <tr>\n                    <td align=\"left\" width=\"70%\" style=\"vertical-align: top;\">\n                        <table cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" width=\"100%\">\n                            <tbody>\n                                <tr>\n                                    {-{-TITLE-}-}\n                                </tr>\n                                <tr>\n                                    {-{-DESCRIPTION-}-}\n                                </tr>\n                            </tbody>\n                        </table>\n                    </td>\n                    <td align=\"right\" width=\"30%\" style=\"vertical-align: middle;\">\n                        <table cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" width=\"100%\">\n                            <tbody>\n                                <tr>\n                                    <td width=\"50%\">\n                                        <table width=\"100%\">\n                                            <tr>\n                                                <td width=\"24\">\n                                                    <input\n                                                        type=\"radio\"\n                                                        id=\"radioYes\"\n                                                        name=\"unsubscribe\"\n                                                        data-cke-editable=\"1\"\n                                                        style=\"margin: 0px; vertical-align: middle;>\n                                                    </td>\n                                                {-{-YES-}-}\n                                            </tr>\n                                        </table>\n                                    </td>\n                                    <td width=\"50%\">\n                                        <table width=\"100%\">\n                                            <tr>\n                                                <td width=\"24\">\n                                                    <input\n                                                        type=\"radio\"\n                                                        id=\"radioNo\"\n                                                        name=\"unsubscribe\"\n                                                        data-cke-editable=\"1\"\n                                                        style=\"margin: 0px; vertical-align: middle;\">\n                                                </td>\n                                                {-{-NO-}-}\n                                            </tr>\n                                        </table>\n                                    </td>\n                                </tr>\n                            </tbody>\n                        </table>\n                    </td>\n                </tr>\n            </tbody>\n        </table>\n    </td>\n";
+declare const migrationTemplate = "\n    <td\n        align=\"left\"\n        esd-extension-block-id=\"radio-button-block\"\n        esd-handler-name=\"esd-extension-RadioButtonBlock\"\n        class=\"\n            radio-button\n            radio-button-v2\n            esd-block-ra\n            esd-radio-button-block\n            esd-extension-block\n            es-p10t\n            es-p10b\n            es-p30r\n            es-p30l\"\n    >\n        <table cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" width=\"100%\">\n            <tbody>\n                <tr>\n                    <td align=\"left\" width=\"70%\" style=\"vertical-align: top;\">\n                        <table cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" width=\"100%\">\n                            <tbody>\n                                <tr>\n                                    {-{-TITLE-}-}\n                                </tr>\n                                <tr>\n                                    {-{-DESCRIPTION-}-}\n                                </tr>\n                            </tbody>\n                        </table>\n                    </td>\n                    <td align=\"right\" width=\"30%\" style=\"vertical-align: middle;\">\n                        <table cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" width=\"100%\">\n                            <tbody>\n                                <tr>\n                                    <td width=\"50%\">\n                                        <table width=\"100%\">\n                                            <tr>\n                                                <td width=\"24\">\n                                                    <input\n                                                        type=\"radio\"\n                                                        id=\"radioYes\"\n                                                        name=\"unsubscribe\"\n                                                        data-cke-editable=\"1\"\n                                                        style=\"margin: 0px; vertical-align: middle;\">\n                                                    </td>\n                                                {-{-YES-}-}\n                                            </tr>\n                                        </table>\n                                    </td>\n                                    <td width=\"50%\">\n                                        <table width=\"100%\">\n                                            <tr>\n                                                <td width=\"24\">\n                                                    <input\n                                                        type=\"radio\"\n                                                        id=\"radioNo\"\n                                                        name=\"unsubscribe\"\n                                                        data-cke-editable=\"1\"\n                                                        style=\"margin: 0px; vertical-align: middle;\">\n                                                </td>\n                                                {-{-NO-}-}\n                                            </tr>\n                                        </table>\n                                    </td>\n                                </tr>\n                            </tbody>\n                        </table>\n                    </td>\n                </tr>\n            </tbody>\n        </table>\n    </td>\n";
 /**
  * @returns The template for the default checkbox block
  */

package/dist/src/extensions/Blocks/Recommendation/controls/main/utils.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/extensions/Blocks/Recommendation/services/configService.d.ts

@@ -119,6 +119,16 @@ export declare class RecommendationConfigService {
      *
      * Reads existing data-attributes and creates a proper node config.
      * Used when loading templates created before node config was implemented.
+     *
+     * Sources, in priority order (later overrides earlier):
+     * 1. `esd-ext-config` JSON blob — emitted by the recommendation migrator and
+     *    by hand-authored new templates. Carries the full RecommendationNodeConfig
+     *    (strategy, language, currency, filters, productIds, etc.) which the
+     *    discrete data-* attrs below cannot capture.
+     * 2. Discrete `data-*` attributes — runtime source of truth for
+     *    layout/composition/spacing; controls keep these in sync as the user
+     *    edits, so we let them override the JSON blob if they disagree.
+     * 3. `currency-*` attributes — durable currency source on the block element.
      * @param api - Stripo extension API with document modifier
      * @param node - The block node to migrate
      * @returns The migrated configuration

package/dist/src/extensions/Blocks/Recommendation/services/configService.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/extensions/Blocks/Recommendation/store/recommendation.d.ts

@@ -36,6 +36,25 @@ interface PerBlockState {
     /** Snapshot of filters taken when the drawer opens, used to revert on cancel */
     filterSnapshot: Filter[] | null;
 }
+/**
+ * Persisted-config subset used by `seedBlockUrlConfig` to reconstruct
+ * `recommendationConfigs` from a node-config JSON blob without coupling the
+ * caller to the full `RecommendationNodeConfig` shape. Separator strings are
+ * narrowed at the seed boundary.
+ */
+export interface PerBlockUrlConfig {
+    strategy: string;
+    language: string;
+    size: string;
+    productIds: string[];
+    filters: Filter[];
+    shuffleProducts: boolean;
+    currencyCode: string;
+    currencyAlignment: 'before' | 'after';
+    currencyDecimalCount: number;
+    currencyDecimalSeparator: string;
+    currencyThousandSeparator: string;
+}
 interface StoreState {
     recommendationCampaignUrls: Record<string, string>;
     activePredictiveAlgorithms: number[];
@@ -202,6 +221,21 @@ export declare const useRecommendationExtensionStore: import("pinia").StoreDefin
      * Automatically cleaned up when removeBlockState deletes the block entry.
      */
     markBlockInitialized(id: number): void;
+    /**
+     * Seeds the URL-relevant fields of a block from a persisted node config.
+     *
+     * Used at save-time to ensure the campaign URL is built from the
+     * persisted truth (the `esd-ext-config` blob in the raw HTML) even when
+     * the user never selected the block in this editor session — without
+     * this seed, `_syncNodeConfigToStore` would never have run for that
+     * block and the store would hold default values (USD/en_US/mostPopular)
+     * instead of the real config.
+     *
+     * Creates the block entry if missing; otherwise patches only the URL-
+     * relevant subset and leaves runtime fields (e.g., `recommendedProducts`,
+     * `isInitialized`) alone.
+     */
+    seedBlockUrlConfig(id: number, config: PerBlockUrlConfig): void;
     /**
      * Patches the current block's recommendationConfigs.
      * Replaces `store.$patch({ recommendationConfigs: { ... } })` pattern.

package/dist/src/extensions/Blocks/Recommendation/types/nodeConfig.d.ts

@@ -24,7 +24,7 @@ export interface CurrencyConfig {
     /** Number of decimal places (-1 for no formatting) */
     decimalCount: number;
     /** Character used for decimal separation */
-    decimalSeparator: '.' | ',';
+    decimalSeparator: '.' | ',' | ' ';
     /** Character used for thousands separation */
     thousandSeparator: '.' | ',' | ' ' | '';
 }

package/dist/src/extensions/Blocks/Recommendation/utils/legacyStrategyMap.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Maps legacy algorithm strategy keys (used by templates authored against the
+ * old recommendation system) to the new keys used by `RecommendationFeedSourceMaps`.
+ *
+ * Renames are matched by feed-source id:
+ *   - `viewedTogether`    → `similarViewed`         (id 11, path `viewed-together`)
+ *   - `purchasedTogether` → `similarBought`         (id 12, path `purchased-together`)
+ *   - `trending`          → `trendingProducts`      (id 40, path `trending`)
+ *   - `mostValuable`      → `mostValuableOfPartner` (id 46, path `most-valuable`)
+ *   - `topSellers`        → `mostPurchased`         (id 62, path `top-sellers`)
+ *
+ * Used at two boundaries:
+ *   1. The migrator (`settingsMapper`), so freshly migrated node configs carry
+ *      the new key.
+ *   2. The algorithm dropdown control, so already-saved blocks that still carry
+ *      a legacy key resolve to a matching dropdown option.
+ *
+ * Unknown values pass through untouched so a future-added algorithm doesn't
+ * silently default.
+ */
+export declare function mapLegacyStrategy(legacy: string | undefined): string | undefined;

package/dist/src/extensions/Blocks/Recommendation/utils/legacyStrategyMap.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/extensions/Blocks/Recommendation/utils/preserveTextStyles.d.ts

@@ -1,6 +1,3 @@
-/**
- * Utility for preserving text styling when updating innerHTML
- */
 import type { ImmutableHtmlNode } from '@stripoinc/ui-editor-extensions';
 /**
  * Preserves existing style tags when updating text content

package/dist/src/library.d.ts

@@ -1,5 +1,5 @@
 export { default as Guido } from './components/Guido.vue';
-export type { GuidoConfig, GuidoConfigInput, IdentityConfig, PartnerConfig, TemplateConfig, EditorConfig, UIConfig, FeaturesConfig, BlocksConfig, CompilerConfig, DynamicContent, EmailHeader, DefaultBlockType, CustomBlockType, ValidationResult, ValidationError, } from './@types/config';
+export type { GuidoConfig, GuidoConfigInput, IdentityConfig, PartnerConfig, TemplateConfig, TemplateMigrationConfig, LegacyRecommendationConfig, EditorConfig, UIConfig, FeaturesConfig, BlocksConfig, CompilerConfig, DynamicContent, EmailHeader, DefaultBlockType, CustomBlockType, ValidationResult, ValidationError, } from './@types/config';
 export { validateConfig, parseConfig, parseConfigSafe, isValidConfig, getValidationErrors, MessageType, ProductType, } from './@types/config';
 export type { StripoEventType } from './@types/events';
 export type { PositionData, DynamicContentEvent, MergeTagClickEvent, MergeTag, BaseDynamicContent, TooltipOptions, TextValueObject, L10n, } from './@types/generic';

package/dist/src/stores/autosave.d.ts

@@ -0,0 +1,12 @@
+export declare const AUTOSAVE_STATUS: {
+    readonly IDLE: "idle";
+    readonly SAVING: "saving";
+    readonly SAVED: "saved";
+    readonly ERROR: "error";
+};
+export type AutosaveStatus = typeof AUTOSAVE_STATUS[keyof typeof AUTOSAVE_STATUS];
+export declare const useAutosaveStore: import("pinia").StoreDefinition<"guidoAutosave", {
+    isOn: boolean;
+    lastSavedAt: Date | null;
+    status: AutosaveStatus;
+}, {}, {}>;