@namiml/web-sdk/dist/types/components/containers.d.ts

Nami Web SDK makes subscriptions & in-app purchases easy, with powerful built-in paywalls and A/B testing

import { NamiSKU } from "../../types/externals/sku";
import { TBaseComponent, TComponent, TContainer, TTestObject } from ".";
import { TConditionalComponent, TImageComponent, TSpacerComponent, TSymbolComponent, TTextComponent, TTextListComponent } from "./elements";
export type TVariablePattern = `\${var.${string}}`;
export type THeaderFooter = (TContainer | TButtonContainer | TSpacerComponent | TTextComponent | TConditionalComponent)[] | null;
type Button = TBaseComponent & {
    id?: string;
    sku?: NamiSKU;
    url?: string;
    components: Array<TTextComponent | TTextListComponent | TSpacerComponent | TImageComponent | TContainer | TConditionalComponent | TSymbolComponent>;
    screenreaderText?: string;
    screenreaderHint?: string;
    text?: string | null;
    actionTap?: string | null;
};
export type TButtonContainer = Button & {
    component: "button";
    focused?: boolean;
};
export type TPlayPauseButton = Button & {
    component: "playPauseButton";
    pausedOnTap: UserAction;
    playingOnTap: UserAction;
    pausedComponents: TComponent[];
    playingComponents: TComponent[];
};
export type TVolumeButton = Button & {
    component: "volumeButton";
    mutedComponents: TComponent[];
    volumeComponents: TComponent[];
    mutedOnTap: UserAction;
    volumeOnTap: UserAction;
};
export type UserAction = {
    function: string;
    parameters?: UserActionParameters;
};
export type UserActionParameters = {
    partialState?: Record<string, any>;
    url?: string;
    screen?: string;
    promo?: string;
    confirmationMessage?: string;
    confirmBeforePurchase?: TTestObject[];
};
export type SKUActionHandler = (sku: NamiSKU) => void;
export type DeepLinkUrlHandler = (url: string) => void;
export type CloseHandler = (body?: any) => void;
export type Callback = () => void;
type CarouselIndicator = {
    width: number;
    height: number;
    borderRadius: number;
    fillColor: string;
    component: "container";
};
export type TCarouselContainer = Omit<TContainer, "component"> & {
    component: "carouselContainer";
    indicatorColor: string;
    activeIndicatorColor: string;
    autoplay: boolean;
    autoplaySeconds: number;
    loopSource?: string | TCarouselSlide[];
    loopVariable?: string;
    loopSourceConditions?: TTestObject[];
    showIndicators?: boolean;
    inactiveSlideScale?: number;
    nextSlidePadding?: number;
    previousSlidePadding?: number;
    slideSpacing?: number;
    onChange?: UserAction;
    indicator?: CarouselIndicator;
    activeIndicator?: CarouselIndicator;
};
export type TCarouselSlidesState = {
    [groupId: string]: {
        [carouselName: string]: TCarouselSlide[];
    };
};
export type TCarouselSlide = {
    id: string;
    title?: string;
    [slideAttr: string]: any;
};
export type TFlexProductContainer = Omit<TContainer, "component"> & {
    component: "flexProductContainer";
    products: "all" | "subset";
    flexDirection: FlexDirectionObject;
    subsetGroup?: string;
    productFeaturedComponents?: TContainer[];
    productBaseComponents?: TContainer[];
};
export type FlexDirectionObject = {
    small: "vertical" | "horizontal";
    medium: "vertical" | "horizontal";
    large: "vertical" | "horizontal";
    xlarge: "vertical" | "horizontal";
};
export type TProductContainer = Omit<TContainer, "component"> & {
    component: "productContainer";
    products: "all" | "subset";
    subsetGroup?: string;
    productFeaturedComponents?: TContainer[];
    productBaseComponents?: TContainer[];
};
export type TStack = Omit<TContainer, "component"> & {
    component: "stack";
};
export type TCollapseContainer = TBaseComponent & {
    component: "collapseContainer";
    collapseHeader: TContainer;
    components: TComponent[];
    open: "collapse" | "open";
    backgroundBlur?: number | null;
};
export type TResponsiveGrid = TBaseComponent & {
    component: "responsiveGrid";
    components: any;
    loopVariable?: string;
    loopSource?: string;
    loopSourceConditions: TTestObject[];
};
export type TToggleSwitch = TBaseComponent & {
    component: 'toggleSwitch';
    checked?: boolean;
    innerPadding?: TVariablePattern | number;
    activeHandleFillColor?: string;
    activeHandleBorderColor?: string;
    activeHandleBorderWidth?: number;
    activePlateFillColor?: string;
    activePlateBorderColor?: string;
    activePlateBorderWidth?: number;
    activePlateBorderRadius?: number;
    inactiveHandleFillColor?: string;
    inactiveHandleBorderColor?: string;
    inactiveHandleBorderWidth?: number;
    inactivePlateFillColor?: string;
    inactivePlateBorderColor?: string;
    inactivePlateBorderWidth?: number;
    inactivePlateBorderRadius?: number;
    disabled?: boolean;
};
export type TRadioButton = TBaseComponent & {
    component: 'radio';
    components: TComponent[];
    active?: boolean;
    innerPadding?: TVariablePattern | number;
    activeFillColor?: string;
    activeBorderColor?: string;
    activeBorderWidth?: number;
    activeDropShadow?: string;
    inactiveFillColor?: string;
    inactiveBorderColor?: string;
    inactiveBorderWidth?: number;
    inactiveDropShadow?: string;
    sku?: NamiSKU;
};
export {};