@useinsider/guido 3.21.1 → 3.21.2-beta.cfc5be2

package/dist/services/displayConditionApi.js

@@ -0,0 +1,39 @@
+import { useHttp as p } from "../composables/useHttp.js";
+import { SavedDisplayConditionSchema as y, DisplayConditionListResponseSchema as S } from "../@types/display-condition.js";
+import { parse as r } from "../node_modules/valibot/dist/index.js";
+const s = "/email-proxy/v1/display-conditions", u = 100, P = () => {
+  const { get: c, post: m, delete: l } = p(), i = async (t, e) => {
+    const o = new URLSearchParams({
+      page: String(e),
+      limit: String(u),
+      sortColumn: "id",
+      sortDirection: "desc",
+      "filter[syntax]": t
+    }), { data: n } = await c(`${s}?${o.toString()}`);
+    return r(S, n);
+  };
+  return { list: async (t) => {
+    const e = await i(t, 1), o = await Promise.all(Array.from(
+      { length: Math.max(e.meta.lastPage - 1, 0) },
+      (a, d) => i(t, d + 2)
+    )), n = [e, ...o].flatMap((a) => a.data);
+    return [...new Map(n.map((a) => [a.id, a])).values()];
+  }, create: async (t, e) => {
+    const { data: o } = await m(s, {
+      name: t.name.trim(),
+      description: t.description.trim() || null,
+      syntax: e,
+      method: "codeOnly",
+      codeBefore: t.codeBefore,
+      codeAfter: t.codeAfter
+    });
+    return r(y, o.data);
+  }, remove: async (t) => {
+    await l(`${s}/${t}`);
+  } };
+};
+export {
+  u as DISPLAY_CONDITIONS_PAGE_LIMIT,
+  s as DISPLAY_CONDITIONS_URL,
+  P as useDisplayConditionApi
+};

package/dist/src/@types/config/schemas.d.ts

@@ -384,6 +384,8 @@ export declare const UISchema: v.ObjectSchema<{
     readonly showHeader: v.OptionalSchema<v.BooleanSchema<undefined>, true>;
     /** Custom label for back button (if shown) */
     readonly backButtonLabel: v.OptionalSchema<v.StringSchema<undefined>, undefined>;
+    /** Replace Stripo's display-condition UI with the Conditions tab and create/select drawers */
+    readonly externalDisplayConditions: v.OptionalSchema<v.BooleanSchema<undefined>, false>;
 }, undefined>;
 /**
  * Features configuration - enable/disable editor features
@@ -804,6 +806,8 @@ export declare const GuidoConfigSchema: v.ObjectSchema<{
         readonly showHeader: v.OptionalSchema<v.BooleanSchema<undefined>, true>;
         /** Custom label for back button (if shown) */
         readonly backButtonLabel: v.OptionalSchema<v.StringSchema<undefined>, undefined>;
+        /** Replace Stripo's display-condition UI with the Conditions tab and create/select drawers */
+        readonly externalDisplayConditions: v.OptionalSchema<v.BooleanSchema<undefined>, false>;
     }, undefined>, {}>;
     /** Feature toggles */
     readonly features: v.OptionalSchema<v.ObjectSchema<{

package/dist/src/@types/display-condition.d.ts

@@ -0,0 +1,59 @@
+import * as v from 'valibot';
+export declare const DisplayConditionSyntaxSchema: v.PicklistSchema<["liquid", "pongo"], undefined>;
+export declare const DisplayConditionMethodSchema: v.PicklistSchema<["codeOnly", "logicBuilder"], undefined>;
+export declare const SavedDisplayConditionSchema: v.ObjectSchema<{
+    readonly id: v.NumberSchema<undefined>;
+    readonly name: v.StringSchema<undefined>;
+    readonly description: v.NullishSchema<v.StringSchema<undefined>, "">;
+    readonly syntax: v.PicklistSchema<["liquid", "pongo"], undefined>;
+    readonly method: v.PicklistSchema<["codeOnly", "logicBuilder"], undefined>;
+    readonly codeBefore: v.StringSchema<undefined>;
+    readonly codeAfter: v.NullishSchema<v.StringSchema<undefined>, "">;
+    readonly createdAt: v.OptionalSchema<v.StringSchema<undefined>, undefined>;
+}, undefined>;
+export declare const DisplayConditionListResponseSchema: v.ObjectSchema<{
+    readonly data: v.ArraySchema<v.ObjectSchema<{
+        readonly id: v.NumberSchema<undefined>;
+        readonly name: v.StringSchema<undefined>;
+        readonly description: v.NullishSchema<v.StringSchema<undefined>, "">;
+        readonly syntax: v.PicklistSchema<["liquid", "pongo"], undefined>;
+        readonly method: v.PicklistSchema<["codeOnly", "logicBuilder"], undefined>;
+        readonly codeBefore: v.StringSchema<undefined>;
+        readonly codeAfter: v.NullishSchema<v.StringSchema<undefined>, "">;
+        readonly createdAt: v.OptionalSchema<v.StringSchema<undefined>, undefined>;
+    }, undefined>, undefined>;
+    readonly meta: v.ObjectSchema<{
+        readonly totalCount: v.NumberSchema<undefined>;
+        readonly perPage: v.NumberSchema<undefined>;
+        readonly currentPage: v.NumberSchema<undefined>;
+        readonly lastPage: v.NumberSchema<undefined>;
+    }, undefined>;
+}, undefined>;
+export type DisplayConditionSyntax = v.InferOutput<typeof DisplayConditionSyntaxSchema>;
+export type DisplayConditionMethod = v.InferOutput<typeof DisplayConditionMethodSchema>;
+export type SavedDisplayCondition = v.InferOutput<typeof SavedDisplayConditionSchema>;
+export type DisplayConditionListResponse = v.InferOutput<typeof DisplayConditionListResponseSchema>;
+export interface DisplayConditionDraft {
+    name: string;
+    description: string;
+    codeBefore: string;
+    codeAfter: string;
+}
+export type DisplayConditionSource = 'inline' | 'saved';
+/** Mirrors Stripo's `DisplayCondition`; kept local so Vue code does not import the Stripo package. */
+export interface AppliedDisplayCondition {
+    id: number;
+    name: string;
+    description: string;
+    beforeScript: string;
+    afterScript: string;
+    extraData?: string;
+}
+export type DisplayConditionOpenMode = 'select' | 'create' | 'edit';
+export interface DisplayConditionOpenDetail {
+    mode: DisplayConditionOpenMode;
+    current: AppliedDisplayCondition | null;
+}
+export interface DisplayConditionApplyDetail {
+    condition: AppliedDisplayCondition | null;
+}

package/dist/src/components/organisms/display-conditions/CodeEditorField.vue.d.ts

@@ -0,0 +1,43 @@
+type __VLS_Props = {
+    id: string;
+    label: string;
+    value: string;
+    placeholder?: string;
+    error?: string;
+    disabled?: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<__VLS_Props>, {
+    placeholder: string;
+    error: string;
+    disabled: boolean;
+}>, {
+    read: () => string;
+}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {
+    input: (value: string) => void;
+}, string, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<__VLS_Props>, {
+    placeholder: string;
+    error: string;
+    disabled: boolean;
+}>>>, {
+    error: string;
+    placeholder: string;
+    disabled: boolean;
+}>;
+export default _default;
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_PrettifyLocal<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/src/components/organisms/display-conditions/DisplayConditionCreateDrawer.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+export default _default;

package/dist/src/components/organisms/display-conditions/DisplayConditionSelectDrawer.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+export default _default;

package/dist/src/components/organisms/display-conditions/DisplayConditionsHost.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+export default _default;

package/dist/src/composables/useConfig.d.ts

@@ -89,6 +89,7 @@ export declare const useConfig: () => {
         ui: {
             showHeader: boolean;
             backButtonLabel?: string | undefined;
+            externalDisplayConditions: boolean;
         };
         features: {
             dynamicContent: boolean;
@@ -228,6 +229,7 @@ export declare const useConfig: () => {
     ui: import("vue").ComputedRef<{
         showHeader: boolean;
         backButtonLabel?: string | undefined;
+        externalDisplayConditions: boolean;
     } | null>;
     features: import("vue").ComputedRef<{
         dynamicContent: boolean;

package/dist/src/composables/useDisplayConditions.d.ts

@@ -0,0 +1,16 @@
+import type { DisplayConditionDraft, DisplayConditionOpenDetail, SavedDisplayCondition } from '@@/Types/display-condition';
+export type DraftField = keyof DisplayConditionDraft;
+export type DraftErrors = Partial<Record<DraftField, string>>;
+export type CreateIntent = 'inline' | 'save';
+export declare const useDisplayConditions: () => {
+    syntax: import("vue").ComputedRef<"liquid" | "pongo">;
+    handleOpen: (detail: DisplayConditionOpenDetail) => void;
+    cancel: () => void;
+    loadList: () => Promise<void>;
+    validate: (draft: DisplayConditionDraft) => DraftErrors;
+    notifyInvalid: () => void;
+    createInline: (draft: DisplayConditionDraft) => void;
+    createAndSave: (draft: DisplayConditionDraft) => Promise<DraftErrors | null>;
+    select: (row: SavedDisplayCondition) => void;
+    deleteSaved: (row: SavedDisplayCondition) => Promise<void>;
+};

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

@@ -8,6 +8,7 @@ export declare const ACADEMY_LINKS: {
     readonly EMAIL_EDITOR: "https://academy.insiderone.com/docs/email-drag-and-drop-editor";
     readonly GLOBAL_UNSUBSCRIBE: "https://academy.insiderone.com/docs/global-unsubscribe-preference-center";
     readonly AMP_FOR_EMAILS: "https://academy.insiderone.com/docs/amp-for-emails";
+    readonly EMAIL_DISPLAY_CONDITIONS: "https://academy.insiderone.com/docs/new-editor-add-display-conditions-to-an-email";
     readonly EMAIL_RECOMMENDATION_BLOCK: "https://academy.insiderone.com/docs/new-editor-email-recommendation-block";
 };
 export type AcademyLinkKey = keyof typeof ACADEMY_LINKS;

package/dist/src/enums/display-condition.d.ts

@@ -0,0 +1,15 @@
+export declare enum DisplayConditionEvent {
+    OPEN = "display-condition:open",
+    APPLY = "display-condition:apply",
+    CANCEL = "display-condition:cancel"
+}
+export declare enum DisplayConditionSourceType {
+    INLINE = "inline",
+    SAVED = "saved"
+}
+export declare const DISPLAY_CONDITION_LIMITS: {
+    readonly NAME_MIN: 2;
+    readonly NAME_MAX: 40;
+    readonly DESCRIPTION_MAX: 200;
+    readonly CODE_MAX: 65535;
+};

package/dist/src/extensions/Blocks/Recommendation/block.d.ts

@@ -64,6 +64,8 @@ export declare class RecommendationBlock extends Block {
      * @param node - The block node being deleted
      */
     onDelete(node: ImmutableHtmlNode): void;
+    private _ensureMobileFitRule;
+    private _syncHeightBound;
     /**
      * Warns (dark advisory toaster) when the design holds more than one live
      * recommendation block. Triggered from the user-add paths only (fresh drop

package/dist/src/extensions/Blocks/Recommendation/controls/image/index.d.ts

@@ -3,35 +3,49 @@
  *
  * Controls for styling the product image element in recommendation cards.
  */
+import type { CssNodeModifier, HtmlNodeModifier, ImmutableCssNode, ImmutableHtmlNode, TemplateModifier } from '@stripoinc/ui-editor-extensions';
+import { ModificationDescription } from '@stripoinc/ui-editor-extensions';
+interface FitRuleApi {
+    getDocumentRootCssNode: () => ImmutableCssNode | null;
+    getDocumentModifier: () => TemplateModifier<HtmlNodeModifier, CssNodeModifier>;
+}
+export declare function ensureMobileFitRule(api: FitRuleApi, block: ImmutableHtmlNode): void;
+export declare function syncHeightBound(api: Pick<FitRuleApi, 'getDocumentModifier'>, block: ImmutableHtmlNode): void;
+declare const SizeControl_base: {
+    new (): {
+        getId(): string;
+        getTargetNodes(root: ImmutableHtmlNode): ImmutableHtmlNode[];
+        getParentControlId(): string;
+        api: import("@stripoinc/ui-editor-extensions").ControlApi;
+        getLabels(): import("@stripoinc/ui-editor-extensions").ControlLabels | undefined;
+        getModificationDescription(): ModificationDescription | undefined;
+        getAdditionalModifications(_root: ImmutableHtmlNode): TemplateModifier<HtmlNodeModifier, CssNodeModifier> | undefined;
+        isVisible(_node: ImmutableHtmlNode): boolean;
+        getElementLockCategory(): import("@stripoinc/ui-editor-extensions").ElementLockCategory | undefined;
+    };
+};
+declare class SizeControl extends SizeControl_base {
+    getAdditionalModifications(root: ImmutableHtmlNode): TemplateModifier<HtmlNodeModifier, CssNodeModifier> | undefined;
+    private getFitStyles;
+}
 /**
  * Grouped Image Controls
  * Use this object for cleaner imports in extension.ts
  */
 export declare const ImageControls: {
-    readonly size: {
-        new (): {
-            getId(): string;
-            getTargetNodes(root: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode[];
-            getParentControlId(): string;
-            api: import("@stripoinc/ui-editor-extensions").ControlApi;
-            getLabels(): import("@stripoinc/ui-editor-extensions").ControlLabels | undefined;
-            getModificationDescription(): import("@stripoinc/ui-editor-extensions").ModificationDescription | undefined;
-            getAdditionalModifications(_root: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").TemplateModifier<import("@stripoinc/ui-editor-extensions").HtmlNodeModifier, import("@stripoinc/ui-editor-extensions").CssNodeModifier> | undefined;
-            isVisible(_node: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): boolean;
-            getElementLockCategory(): import("@stripoinc/ui-editor-extensions").ElementLockCategory | undefined;
-        };
-    };
+    readonly size: typeof SizeControl;
     readonly margins: {
         new (): {
             getId(): string;
-            getTargetNodes(root: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode[];
+            getTargetNodes(root: ImmutableHtmlNode): ImmutableHtmlNode[];
             getParentControlId(): string;
             api: import("@stripoinc/ui-editor-extensions").ControlApi;
             getLabels(): import("@stripoinc/ui-editor-extensions").ControlLabels | undefined;
-            getModificationDescription(): import("@stripoinc/ui-editor-extensions").ModificationDescription | undefined;
-            getAdditionalModifications(_root: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").TemplateModifier<import("@stripoinc/ui-editor-extensions").HtmlNodeModifier, import("@stripoinc/ui-editor-extensions").CssNodeModifier> | undefined;
-            isVisible(_node: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): boolean;
+            getModificationDescription(): ModificationDescription | undefined;
+            getAdditionalModifications(_root: ImmutableHtmlNode): TemplateModifier<HtmlNodeModifier, CssNodeModifier> | undefined;
+            isVisible(_node: ImmutableHtmlNode): boolean;
             getElementLockCategory(): import("@stripoinc/ui-editor-extensions").ElementLockCategory | undefined;
         };
     };
 };
+export {};

package/dist/src/extensions/DisplayConditions/bridge.d.ts

@@ -0,0 +1,6 @@
+import type { AppliedDisplayCondition, DisplayConditionOpenDetail } from '@@/Types/display-condition';
+export interface ConditionRequestHandlers {
+    onApply: (condition: AppliedDisplayCondition | null) => void;
+    onCancel?: () => void;
+}
+export declare const requestDisplayCondition: (detail: DisplayConditionOpenDetail, handlers: ConditionRequestHandlers) => void;

package/dist/src/extensions/DisplayConditions/constants.d.ts

@@ -0,0 +1,14 @@
+import { BlockType } from '@stripoinc/ui-editor-extensions';
+export declare const CONDITIONS_TAB_ID = "conditions";
+export declare const CONDITIONS_CONTROL_ID = "guido-display-conditions-control";
+export declare const MAX_COLLAPSED_LINES = 10;
+export declare const CONDITION_BLOCK_TYPES: readonly [BlockType.STRIPE, BlockType.STRUCTURE, BlockType.CONTAINER];
+export declare const CONDITION_ICONS: {
+    readonly PLUS: "guido-display-condition-plus";
+    readonly EDIT: "guido-display-condition-edit";
+    readonly TRASH: "guido-display-condition-trash";
+    readonly CHEVRON: "guido-display-condition-chevron";
+};
+export declare const BUILT_IN_CONDITION_CONTROLS: string[];
+export declare const EMPTY_DESCRIPTION: string;
+export declare const APPLIED_DESCRIPTION: string;

package/dist/src/extensions/DisplayConditions/control.d.ts

@@ -0,0 +1,23 @@
+import type { ImmutableHtmlNode } from '@stripoinc/ui-editor-extensions';
+import { CommonControl } from '@@/Extensions/Blocks/common-control';
+export declare class DisplayConditionsControl extends CommonControl {
+    private expanded;
+    private listeners;
+    private resizeObserver;
+    private detachOutsideClick;
+    getId(): string;
+    getTemplate(): string;
+    onRender(): void;
+    onTemplateNodeUpdated(node: ImmutableHtmlNode): void;
+    onDestroy(): void;
+    private getCondition;
+    private toggleMenu;
+    private listenOutsideClick;
+    private openDrawer;
+    private applyCondition;
+    private wire;
+    private teardown;
+    private observeCodeSize;
+    private paint;
+    private collapsedHeight;
+}

package/dist/src/extensions/DisplayConditions/extension.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("@stripoinc/ui-editor-extensions").Extension;
+export default _default;

package/dist/src/extensions/DisplayConditions/iconsRegistry.d.ts

@@ -0,0 +1,4 @@
+import { IconsRegistry } from '@stripoinc/ui-editor-extensions';
+export declare class DisplayConditionsIconsRegistry extends IconsRegistry {
+    registerIconsSvg(iconsMap: Record<string, string>): void;
+}

package/dist/src/extensions/DisplayConditions/library.d.ts

@@ -0,0 +1,8 @@
+import type { DisplayCondition, ExternalDisplayConditionSelectedCB } from '@stripoinc/ui-editor-extensions';
+import { ExternalDisplayConditionsLibrary } from '@stripoinc/ui-editor-extensions';
+export declare class DisplayConditionsLibrary extends ExternalDisplayConditionsLibrary {
+    getCategoryName(): string;
+    openExternalDisplayConditionsDialog(currentCondition: DisplayCondition, successCallback: ExternalDisplayConditionSelectedCB, cancelCallback: () => void): void;
+    getIsContextActionEnabled(): boolean;
+    getContextActionIndex(): number;
+}

package/dist/src/extensions/DisplayConditions/settingsPanel.d.ts

@@ -0,0 +1,5 @@
+import type { SettingsPanelTab as SettingsPanelTabType } from '@stripoinc/ui-editor-extensions';
+import { SettingsPanelRegistry } from '@stripoinc/ui-editor-extensions';
+export declare class DisplayConditionsSettingsPanel extends SettingsPanelRegistry {
+    registerBlockControls(blockControlsMap: Record<string, SettingsPanelTabType[]>): void;
+}

package/dist/src/mock/api/display-conditions.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("msw").HttpHandler[];
+export default _default;

package/dist/src/services/displayConditionApi.d.ts

@@ -0,0 +1,8 @@
+import type { DisplayConditionDraft, DisplayConditionSyntax, SavedDisplayCondition } from '@@/Types/display-condition';
+export declare const DISPLAY_CONDITIONS_URL = "/email-proxy/v1/display-conditions";
+export declare const DISPLAY_CONDITIONS_PAGE_LIMIT = 100;
+export declare const useDisplayConditionApi: () => {
+    list: (syntax: DisplayConditionSyntax) => Promise<SavedDisplayCondition[]>;
+    create: (draft: DisplayConditionDraft, syntax: DisplayConditionSyntax) => Promise<SavedDisplayCondition>;
+    remove: (id: number) => Promise<void>;
+};