ov25-ui/dist/contexts/ov25-ui-context.d.ts

A UI configurator for OV25 product visualization

import React from 'react';
export type DrawerSizes = 'closed' | 'small' | 'large';
export type AnimationState = 'unavailable' | 'open' | 'close' | 'loop' | 'stop';
export interface ProductFilters {
    [optionName: string]: {
        [filterKey: string]: Array<{
            value: string;
            checked: boolean;
        }>;
    };
}
export interface Product {
    id: string;
    name: string;
    price: number;
    discount: number;
    lowestPrice: number;
    metadata: any;
}
export interface Selection {
    id: string;
    name: string;
    thumbnail?: string;
    miniThumbnails?: {
        small: string;
        medium: string;
        large: string;
    };
    price: number;
    blurHash: string;
    groupId?: string;
    filter?: {
        [key: string]: string[];
    };
    swatch?: Swatch;
}
export interface Group {
    id: string;
    name: string;
    selections: Selection[];
}
export interface Option {
    id: string;
    name: string;
    groups: Group[];
    hasNonOption?: boolean;
}
export interface ConfiguratorState {
    options: Option[];
    selectedSelections: Array<{
        optionId: string;
        groupId: string;
        selectionId: string;
    }>;
    configuratorSettings: {
        swatchSettings: SwatchRulesData;
        availableProductFilters: {
            [key: string]: string[];
        };
    };
}
export interface SizeOption {
    id: 'size';
    name: 'size';
    groups: [
        {
            id: 'size-group';
            name: 'Size Options';
            selections: Array<{
                id: string;
                name: string;
                price: number;
                thumbnail?: string;
            }>;
        }
    ];
    hasNonOption?: boolean;
}
export interface Discount {
    percentage: number;
    amount: number;
    formattedAmount: string;
}
export interface Swatch {
    name: string;
    option: string;
    manufacturerId: string;
    description: string;
    thumbnail: {
        blurHash: string;
        thumbnail: string;
        miniThumbnails: {
            large: string;
            medium: string;
            small: string;
        };
    };
}
export type SwatchRulesData = {
    freeSwatchLimit: number;
    canExeedFreeLimit: boolean;
    pricePerSwatch: number;
    minSwatches: number;
    maxSwatches: number;
    enabled: boolean;
};
interface OV25UIContextType {
    shadowDOMs?: {
        mobileDrawer?: ShadowRoot;
        configuratorViewControls?: ShadowRoot;
        popoverPortal?: ShadowRoot;
        swatchbookPortal?: ShadowRoot;
    };
    products: Product[];
    currentProductId?: string;
    configuratorState?: ConfiguratorState;
    selectedSelections: Array<{
        optionId: string;
        groupId?: string;
        selectionId: string;
    }>;
    activeOptionId: string | null;
    quantity: number;
    price: number;
    subtotal: number;
    formattedPrice: string;
    formattedSubtotal: string;
    discount: Discount;
    galleryIndex: number;
    currentSku: any;
    range: any;
    drawerSize: DrawerSizes;
    isVariantsOpen: boolean;
    isDrawerOrDialogOpen: boolean;
    arPreviewLink: string | null;
    error: Error | null;
    canAnimate: boolean;
    animationState: AnimationState;
    iframeRef: React.RefObject<HTMLIFrameElement>;
    isMobile: boolean;
    hasSwitchedAfterDefer: boolean;
    deferThreeD: boolean;
    showOptional: boolean;
    productLink: string | null;
    apiKey: string;
    buyNowFunction: () => void;
    addToBasketFunction: () => void;
    addSwatchesToCartFunction: () => void;
    images?: string[];
    logoURL?: string;
    isProductGalleryStacked: boolean;
    mobileLogoURL?: string;
    currentProduct?: Product;
    sizeOption: SizeOption;
    activeOption?: Option;
    availableProductFilters?: ProductFilters;
    showFilters?: boolean;
    allOptions: (Option | SizeOption)[];
    galleryIndexToUse: number;
    filteredActiveOption?: Option | null;
    searchQueries: {
        [optionId: string]: string;
    };
    selectedSwatches: Swatch[];
    swatchRulesData: SwatchRulesData;
    isSwatchBookOpen: boolean;
    availableCameras: string[];
    setProducts: React.Dispatch<React.SetStateAction<Product[]>>;
    setCurrentProductId: React.Dispatch<React.SetStateAction<string | undefined>>;
    setConfiguratorState: React.Dispatch<React.SetStateAction<ConfiguratorState | undefined>>;
    setSelectedSelections: React.Dispatch<React.SetStateAction<Array<{
        optionId: string;
        groupId?: string;
        selectionId: string;
    }>>>;
    setActiveOptionId: React.Dispatch<React.SetStateAction<string | null>>;
    setQuantity: React.Dispatch<React.SetStateAction<number>>;
    setPrice: React.Dispatch<React.SetStateAction<number>>;
    setSubtotal: React.Dispatch<React.SetStateAction<number>>;
    setDiscount: React.Dispatch<React.SetStateAction<Discount>>;
    setGalleryIndex: React.Dispatch<React.SetStateAction<number>>;
    setCurrentSku: React.Dispatch<React.SetStateAction<any>>;
    setRange: React.Dispatch<React.SetStateAction<any>>;
    setDrawerSize: React.Dispatch<React.SetStateAction<DrawerSizes>>;
    setIsVariantsOpen: React.Dispatch<React.SetStateAction<boolean>>;
    setIsDrawerOrDialogOpen: React.Dispatch<React.SetStateAction<boolean>>;
    setArPreviewLink: React.Dispatch<React.SetStateAction<string | null>>;
    setError: React.Dispatch<React.SetStateAction<Error | null>>;
    setCanAnimate: React.Dispatch<React.SetStateAction<boolean>>;
    setAnimationState: React.Dispatch<React.SetStateAction<AnimationState>>;
    setHasSwitchedAfterDefer: React.Dispatch<React.SetStateAction<boolean>>;
    setAvailableProductFilters: React.Dispatch<React.SetStateAction<ProductFilters>>;
    setSearchQuery: (optionId: string, query: string) => void;
    setSelectedSwatches: React.Dispatch<React.SetStateAction<Swatch[]>>;
    setSwatchRulesData: React.Dispatch<React.SetStateAction<SwatchRulesData>>;
    toggleSwatch: (swatch: Swatch) => void;
    isSwatchSelected: (swatch: Swatch) => boolean;
    setIsSwatchBookOpen: React.Dispatch<React.SetStateAction<boolean>>;
    setAvailableCameras: React.Dispatch<React.SetStateAction<string[]>>;
    selectCamera: (cameraId: string) => void;
    handleSelectionSelect: (selection: Selection) => void;
    handleOptionClick: (optionId: string) => void;
    handleNextOption: () => void;
    handlePreviousOption: () => void;
    getSelectedValue: (option: Option | SizeOption) => string;
    toggleAR: () => void;
}
export declare const OV25UIProvider: React.FC<{
    children: React.ReactNode;
    productLink: string | null;
    apiKey: string;
    buyNowFunction: () => void;
    addToBasketFunction: () => void;
    addSwatchesToCartFunction: () => void;
    images?: string[];
    deferThreeD?: boolean;
    showOptional?: boolean;
    logoURL?: string;
    isProductGalleryStacked: boolean;
    mobileLogoURL?: string;
    shadowDOMs?: {
        mobileDrawer?: ShadowRoot;
        configuratorViewControls?: ShadowRoot;
        popoverPortal?: ShadowRoot;
        swatchbookPortal?: ShadowRoot;
    };
}>;
export declare const useOV25UI: () => OV25UIContextType;
export {};