@megaads/wm/src/customization/types.ts

To install the library, use npm:

export interface CustomizationOptions {
    template: Template;
    options: (DropdownOption | SwatchOption | TextInputOption | ImageUploadOption | DatePickerOption)[];
    baseUrl: string;
    breadcrumbs: {
        id: number;
        name: string;
        slug: string,
        _lft: number,
        _rgt: number,
        url: string
    }[];
    isAllowReplaceBackground: boolean;
    isShowExcessiveOption?: boolean;
}

export interface Condition {
    combinationOperator: string;
    action: string;
    watchOptionId: string | number;
    desiredValue: string | number | string[] | number[];
}

export interface FunctionItem {
    type: string;
    elementId?: number | string;
    groupUuid?: string;
}

export interface DropdownValue {
    id: number | string;
    selected?: boolean;
    order: number;
    sortId: number;
    valueName: string;
    value: number | string;
    imageId: number | string;
    fontId: number | string;
    colorId: number | string;
    vectorId: number | string;
    templateId: number | string;
    groupId: number | string;
}

export interface SwatchValue {
    id: number | string;
    selected?: boolean;
    order: number;
    sortId: number;
    valueName: string;
    value: number | string;
    thumbColor: string;
    thumbImage: string;
    imageId: number | string;
    fontId: number | string;
    colorId: number | string;
    vectorId: number | string;
    templateId: number | string;
    groupId: number | string;
}

export interface DropdownOption {
    id: number;
    type: string;
    label: string;
    functionItems: FunctionItem[];
    conditions: Condition[];
    variationConditions?: Condition[];
    groupConditions?: Condition[][];
    hideVisually: boolean;
    isCallieHide?: boolean;
    isShow: boolean;
    dropdownValues: DropdownValue[];
    currentValue: number | string;
    groupIds: (string | number)[];
}

export interface SwatchOption {
    id: number;
    type: string;
    label: string;
    functionItems: FunctionItem[];
    conditions: Condition[];
    variationConditions?: Condition[];
    groupConditions?: Condition[][];
    hideVisually: boolean;
    isCallieHide?: boolean;
    isShow: boolean;
    swatchValues: SwatchValue[];
    currentValue: number | string;
    groupIds: (string | number)[];
    valueId?: number | string;
}

export interface TextInputOption {
    id: number;
    type: string;
    label: string;
    showSpotifyPlayer?: boolean;
    functionItems: FunctionItem[];
    conditions: Condition[];
    variationConditions?: Condition[];
    groupConditions?: Condition[][];
    hideVisually: boolean;
    isCallieHide?: boolean;
    config?: {
        placeholder?: string;
        maxLength?: number;
        initialValue?: string;
    };
    isShow: boolean;
    currentValue: number | string;
    groupIds: (string | number)[];
    track?: {name: string; artists: {name: string}[]};
    valueId?: number | string;
}

export interface ImageUploadOption {
    id: number;
    type: string;
    label: string;
    functionItems: FunctionItem[];
    conditions: Condition[];
    variationConditions: Condition[];
    groupConditions?: Condition[][];
    hideVisually: boolean;
    isCallieHide?: boolean;
    config?: {
        buttonText?: string,
        helpText?: string
    };
    fileUploadImageId: string | number;
    isShow: boolean;
    currentValue: number | string;
    groupIds: number[] | string[];
    valueId?: number | string;
}

/**
 * Calendar visual config carried by the placeholder element a Date Picker
 * option points at. Mirrors the Customily editor's `calendarConfig` schema
 * — marker style, fonts, colours, weekday letters, month names — plus
 * `selectedDate` / `selectedYear` / `selectedMonth` / `selectedDay` which
 * the SDK writes onto the element whenever the user picks a date.
 */
export interface CalendarElementConfig {
    markerType?: string;
    markBorderSize?: string | number;
    markBorderColor?: string;
    markFill?: boolean;
    markColor?: string;
    customMarker?: string;
    yearMonthCombined?: boolean;
    yearMonthFontPath?: string;
    yearMonthFontSize?: string | number;
    yearMonthColor?: string;
    yearMonthTopMargin?: string | number;
    yearFontPath?: string;
    yearFontSize?: string | number;
    yearColor?: string;
    yearTopMargin?: string | number;
    monthFontPath?: string;
    monthFontSize?: string | number;
    monthColor?: string;
    monthTopMargin?: string | number;
    daysTopMargin?: string | number;
    daysBottomMargin?: string | number;
    showHorizontalLine?: boolean;
    lineColor?: string;
    showDaysTitles?: boolean;
    daysTitlesFontPath?: string;
    daysTitlesFontSize?: string | number;
    daysTitlesColor?: string;
    dayFontPath?: string;
    dayFontSize?: string | number;
    dayColor?: string;
    sundayFirst?: boolean;
    dayLetters?: string;
    monthNames?: string;
    alignDaysToFirst?: boolean;
    /* Selection state — written by `changeDatePickerValue`. */
    selectedDate?: string;
    selectedYear?: number | null;
    selectedMonth?: number | null;
    selectedDay?: number | null;
}

/**
 * Option emitted by Customily for a Date Picker. Customer-facing UI captures
 * a date (typically an ISO `YYYY-MM-DD` string written to `currentValue`)
 * and the SDK marks that day on the calendar element referenced by the
 * option's `functionItems[i]` of type `calendar`.
 */
export interface DatePickerOption {
    id: number;
    type: string;
    label: string;
    functionItems: FunctionItem[];
    conditions: Condition[];
    variationConditions?: Condition[];
    groupConditions?: Condition[][];
    hideVisually: boolean;
    isCallieHide?: boolean;
    config?: {
        /** Optional minimum date in ISO `YYYY-MM-DD` form. */
        minDate?: string;
        /** Optional maximum date in ISO `YYYY-MM-DD` form. */
        maxDate?: string;
        /** Optional default date (ISO `YYYY-MM-DD`) used when nothing is set. */
        defaultDate?: string;
        /** Optional display format (currently informational — UI is owned by
         *  the host app). */
        format?: string;
    };
    isShow: boolean;
    currentValue: number | string;
    groupIds: (string | number)[];
    valueId?: number | string;
}

/**
 * Calendar element — an image placeholder whose Customily config has the
 * `calendar: true` flag and a populated `calendarConfig`. Carries enough
 * detail to render a month grid at the placeholder's centre/size without a
 * second round-trip.
 */
export interface CalendarElement {
    id: number | string;
    uid: string;
    source?: string;
    elementId: string;
    name: string;
    type: string;
    order: number;
    isShow: boolean;
    groupId: string;
    config: {
        sWidth: number;
        sHeight: number;
        centerX: number;
        centerY: number;
        rotation: number;
        locked: boolean;
        maskPath: string | null;
        childElementIds: string | number[];
        dependentElementId: string | number | null;
        editable: boolean;
        calendar: true;
        calendarConfig: CalendarElementConfig;
    };
    childElementIds: string | number[];
    dependentElementId: string | number | null;
    visible: boolean;
    isChange?: boolean;
    opacity: number;
}

export interface DynamicImageElement {
    id: number | string;
    uid: string;
    source?: string;
    elementId: string;
    name: string;
    type: string;
    order: number;
    isShow: boolean;
    groupId: string;
    config: {
        sWidth: number;
        sHeight: number;
        centerX: number;
        centerY: number;
        rotation: number;
        locked: boolean;
        scale: number;
        maskPath: string | null;
        images: {
            order: number;
            value: string
        }[];
        libraryId: string | number;
        librarySegmentId: string | number;
        imageId: string | number;
        fontId: string | number;
        colorId: string | number;
        vectorId: string | number;
        childElementIds: string|number[];
        dependentElementId: string | number | null;
        grading: boolean;
        fullColor: boolean;
        imageUrl: string;
        editable: boolean;
        staticPath: string;
        coverMaskArea: boolean;
        evented: boolean;
    };
    grading: boolean;
    fullColor: boolean;
    templateId: number;
    childElementIds: string|number[];
    dependentElementId: string | number | null;
    visible: boolean;
    isChange?: boolean;
    opacity: number;
    valueId?: number | string;
}

export interface TextInputElement {
    id: number | string;
    uid: string;
    source?: string;
    elementId: string;
    name: string;
    type: string;
    order: number;
    isShow: boolean;
    groupId: string;
    config: {
        sWidth: number;
        sHeight: number;
        centerX: number;
        centerY: number;
        rotation: number;
        locked: boolean;
        scale: number;
        colors: {
            order: number;
            value: string
        }[];
        fonts: {
            order: number;
            value: string
        }[];
        colorLibraryId: string | number;
        fontLibraryId: string | number;
        childElementIds: string|number[];
        dependentElementId: string | number | null;
        imageId: string | number;
        fontId: string | number;
        colorId: string | number;
        vectorId: string | number;
        textConfig: {
            "text": string,
            "textAlign": string,
            "fill": string,
            "fontSize": number,
            "minFontSize": number,
            "multiline": boolean,
            "tracking": number,
            "outlineWidth": number,
            "outlineColor": {
                "alpha": number,
                "hex": string,
                "cmyk": string
            } | null,
            "prefix": string | null,
            "suffix": string | null,
            "caps": boolean,
            font?: string
            fontFamily: string;
            fontFamilyDownload: string;
        };
        imageUrl: string;
        editable: boolean;
        multiline: boolean;
        breakWords: boolean
    };
    childElementIds: string|number[];
    dependentElementId: string | number | null;
    visible: boolean;
    isChange?: boolean;
    opacity: number;
}

export interface CircularTextInputElement {
    id: number | string;
    uid: string;
    source?: string;
    elementId: string;
    name: string;
    type: string;
    order: number;
    isShow: boolean;
    groupId: string;
    config: {
        sWidth: number;
        sHeight: number;
        centerX: number;
        centerY: number;
        rotation: number;
        locked: boolean;
        scale: number;
        colors: {
            order: number;
            value: string
        }[];
        fonts: {
            order: number;
            value: string;
            id: number|string;
        }[];
        colorLibraryId: string | number;
        fontLibraryId: string | number;
        childElementIds: string|number[];
        dependentElementId: string | number | null;
        imageId: string | number;
        fontId: string | number;
        colorId: string | number;
        vectorId: string | number;
        textConfig: {
            "text": string,
            "textAlign": string,
            "fill": string,
            "fontSize": number,
            "minFontSize": number,
            "multiline": boolean,
            "tracking": number,
            "outlineWidth": number,
            "outlineColor": {
                "alpha": number,
                "hex": string,
                "cmyk": string
            } | null,
            "prefix": string | null,
            "suffix": string | null,
            "caps": boolean,
            font?: string;
            horizontalDiameter: number;
            verticalDiameter: number;
            startAngle: number;
            endAngle: number;
            convex: number;
            fontFamily: string;
            fontFamilyDownload: string;
            angle: number
        };
        imageUrl: string;
        editable: boolean;
        library: any;
    };
    childElementIds: string|number[];
    dependentElementId: string | number | null;
    visible: boolean;
    isChange?: boolean;
    opacity: number;
}

export interface ImagePlaceHolderElement {
    id: number | string;
    uid: string;
    source?: string;
    elementId: string;
    name: string;
    type: string;
    order: number;
    isShow: boolean;
    groupId: string;
    config: {
        sWidth: number;
        sHeight: number;
        centerX: number;
        centerY: number;
        rotation: number;
        locked: boolean;
        groupId: string | number;
        maskPath: string | null;
        childElementIds: string|number[];
        dependentElementId: string | number | null;
        grading: boolean;
        fullColor: boolean;
        imageUrl: string;
        imageId: string | number;
        fontId: string | number;
        colorId: string | number;
        vectorId: string | number;
        editable: boolean;
        staticPath: string;
        coverMaskArea: boolean;
        evented: boolean;
    };
    grading: boolean;
    fullColor: boolean;
    templateId: number;
    childElementIds: string|number[];
    dependentElementId: string | number | null;
    isChange?: boolean;
    opacity: number;

}

export interface VectorElement {
    id: number | string;
    uid: string;
    source?: string;
    elementId: string;
    name: string;
    type: string;
    order: number;
    groupId: string;
    isShow: boolean;
    config: {
        sWidth: number;
        sHeight: number;
        centerX: number;
        centerY: number;
        rotation: number;
        locked: boolean;
        scale: number;
        imageId: string | number;
        fontId: string | number;
        colorId: string | number;
        vectorId: string | number;
        vectors: {
            order: number;
            value: string
        }[];
        libraryId: string | number;
        librarySegmentId: string | number;
        imageUrl: string;
        childElementIds: string|number[];
        dependentElementId: string | number | null;
        grading: boolean;
        fullColor: boolean;
        editable: boolean;
        staticPath: string;
        evented: boolean;
    };
    grading: boolean;
    fullColor: boolean;
    templateId: number;
    childElementIds: string|number[];
    dependentElementId: string | number | null;
    opacity: number;
}

export interface Template {
    id: number,
    uuid: string,
    name: string,
    width: number,
    height: number,
    baseFileWidth: number,
    baseFileHeight: number,
    unit: string,
    baseFile: string | null,
    type: string,
    createdAt: string,
    updatedAt: string,
    groups: string | null,
    elements: (DynamicImageElement | TextInputElement | ImagePlaceHolderElement | VectorElement | CircularTextInputElement | CalendarElement)[],
}