ov25-ui
Version:
A UI configurator for OV25 product visualization
235 lines (234 loc) • 8.78 kB
TypeScript
import { Selection } from '../contexts/ov25-ui-context.js';
import type { ModuleProductImageUrls } from './module-product-image-srcset.js';
export declare const DINING_IFRAME_SHOW_ATTACHMENT_POINTS_QUERY_KEY = "showAttachmentPoints";
/**
* Configuration option type
*/
export type ConfigOption = {
id: string;
name: string;
};
/**
* Selection data structure
*/
export type SelectionItem = {
optionId: string;
groupId?: string;
selectionId: string;
};
export type ConfiguratorSelectionBedMetadata = {
bedSize?: string;
};
/** Reads `metadata.bedSize` from API/configurator selections (e.g. bed catalogue lines). */
export declare function selectionBedSizeFromMetadata(selection: {
metadata?: ConfiguratorSelectionBedMetadata | null;
} | null | undefined): string | undefined;
/**
* Per-group selection order from the iframe: "None" (any case, trimmed) first; stable order otherwise.
*/
export declare function orderConfiguratorSelectionsWithNoneFirst<T extends {
name: string;
metadata?: ConfiguratorSelectionBedMetadata | null;
}>(items: readonly T[]): T[];
/**
* Animation state options
*/
export type AnimationState = 'unavailable' | 'open' | 'close' | 'loop' | 'stop';
export type { ModuleProductImageUrls };
export type Snap2VariableDimensionAxisConfig = {
min: number;
max: number;
increment: number;
};
/**
* Module selection types for Snap2
*/
export type CompatibleModule = {
productId: number;
position: string;
isMovable?: boolean;
variableDimensions?: {
x?: Snap2VariableDimensionAxisConfig;
y?: Snap2VariableDimensionAxisConfig;
z?: Snap2VariableDimensionAxisConfig;
};
product: {
id: number;
name: string;
imageUrl: string;
imageUrls?: ModuleProductImageUrls;
hasImage: boolean;
shortDescription?: string;
longDescription?: string;
cutoutImage?: string;
heroImage?: string;
images?: string[];
dimensionX?: number | null;
dimensionY?: number | null;
dimensionZ?: number | null;
};
model: {
modelPath: string;
modelId: number;
};
dimensions: {
x: number;
y: number;
z: number;
};
};
/**
* Best-effort: CONFIGURATOR_STATE `snap2Objects` rows may expose `productId`/`modelId` at the root
* or under `product` / `model` (iframe payload shapes vary).
*/
export declare function snap2SceneContainsModule(snap2Objects: unknown[] | undefined, productId: number, modelId: number): boolean;
/**
* True when `next` is the same Snap2 compatible-module list as `prev` (order-sensitive),
* comparing only `productId` per row — enough to drop duplicate `COMPATIBLE_MODULES` bursts.
*/
export declare function compatibleModuleListsEqual(prev: CompatibleModule[] | null, next: CompatibleModule[]): boolean;
export type SelectModuleReceivedMessage = {
success: boolean;
modelPath: string;
modelId: number;
};
/**
* Sends a message to the iframe
*/
export declare const sendMessageToIframe: (type: string, payload: any, uniqueId?: string) => void;
/**
* Handle selecting a product
* @param productId - The ID of the product to select
* @param uniqueId - Optional unique ID for multiple configurators
*/
export declare const selectProduct: (productId: number, uniqueId?: string) => void;
/**
* Handle selecting a configuration option
* @param optionId - The ID of the option to select
* @param groupId - The ID of the group the option belongs to
* @param selectionId - The ID of the specific selection
*/
export declare const selectOption: (optionId: string, groupId: string, selectionId: string, uniqueId?: string) => void;
/**
* Update the quantity of the product
* @param quantity - The new quantity value
*/
export declare const updateQuantity: (quantity: number, uniqueId?: string) => void;
/**
* Add the current configured product to the cart
*/
export declare const addToCart: (uniqueId?: string) => void;
/**
* Toggle dimensions visibility in the 3D viewer
* @param canSeeDimensions - Current dimensions visibility state
* @param setCanSeeDimensions - State setter function for dimensions visibility
*/
export declare const toggleDimensions: (canSeeDimensions: boolean, setCanSeeDimensions: React.Dispatch<React.SetStateAction<boolean>>, uniqueId?: string, cssString?: string) => void;
/**
* Toggle mini dimensions in the 3D viewer
*/
export declare const toggleMiniDimensions: (canSeeMiniDimensions: boolean, setCanSeeMiniDimensions: React.Dispatch<React.SetStateAction<boolean>>, uniqueId?: string, cssString?: string) => void;
/**
* Request iframe to save snap2 configuration and return URL info
*/
export declare const requestSnap2Save: (uniqueId?: string) => void;
export type SelectModuleMessagePayload = {
modelPath: string;
modelId: number;
placeMovable?: boolean;
customDimensions?: {
x?: number;
y?: number;
z?: number;
};
} | {
productName: string;
placeMovable?: boolean;
customDimensions?: {
x?: number;
y?: number;
z?: number;
};
};
/**
* Send SELECT_MODULE message to iframe (`{ modelPath, modelId }` or `{ productName }`).
*/
export declare const selectModule: (payload: SelectModuleMessagePayload, uniqueId?: string) => void;
export declare const toggleSnap2ShowFloor: (uniqueId?: string) => void;
export declare const switchSnap2ViewGroup: (groupId: number, uniqueId?: string) => void;
/**
* This will deselect the model and attachment point
*/
export declare const closeModuleSelectMenu: (uniqueId?: string) => void;
/** PNG data URLs returned from iframe after {@link requestSnap2Screenshots}. */
export type Snap2ScreenshotItem = {
label: string;
dataUrl: string;
};
/**
* Ask the OV25 Snap2 iframe to capture the main MSAA view plus optional multi-camera angles.
* Distinct from legacy `CAPTURE_SCREENSHOT` / `ov25-screenshot` (single upload flow).
*/
export declare function requestSnap2Screenshots(uniqueId?: string): Promise<Snap2ScreenshotItem[]>;
/**
* Toggle animation in the 3D viewer
*/
export declare const toggleAnimation: (uniqueId?: string) => void;
/**
* Enter VR mode
*/
export declare const toggleVR: (uniqueId?: string) => void;
/**
* Enter AR mode
*/
export declare const toggleAR: (uniqueId?: string) => void;
/**
* Toggle fullscreen mode for the iframe's container
*/
export declare const toggleFullscreen: (uniqueId?: string) => void;
/**
* Get the animation button text based on the current state
* @param canAnimate - Whether animation is available
* @param animationState - Current animation state
* @returns The appropriate button text
*/
export declare const getAnimationButtonText: (canAnimate: boolean, animationState: AnimationState) => string;
/**
* Generate the iframe source URL based on productLink and apiKey.
* Merges query strings: params on `productLink`, then parent page (missing keys only), then uuid / hex / bedAllowNone.
*/
export declare const getIframeSrc: (apiKey: string | null, productLink: string | null, configurationUuid?: string | null, hexBgColor?: string | null, bedAllowNone?: string | null, diningShowAttachmentPoints?: boolean | null) => string;
/**
* Create a handler for selection of a variant
* @param activeOptionId - The currently active option ID
* @param currentProductId - The currently selected product ID
* @param setSelectedSelections - State setter for selected selections
* @returns A selection handler function
*/
export declare const createSelectionHandler: (activeOptionId: string | null, currentProductId: number | undefined, setSelectedSelections: React.Dispatch<React.SetStateAction<SelectionItem[]>>) => (selection: Selection) => void;
/**
* Navigation handlers interface
*/
export interface OptionNavigationHandlers {
handleNextOption: () => void;
handlePreviousOption: () => void;
}
/**
* Create option navigation handlers
* @param allOptions - Array of available configuration options
* @param activeOptionId - Currently active option ID
* @param setActiveOptionId - State setter for the active option ID
* @returns Object with next and previous option handler functions
*/
export declare const createOptionNavigationHandlers: (allOptions: ConfigOption[], activeOptionId: string | null, setActiveOptionId: React.Dispatch<React.SetStateAction<string | null>>) => OptionNavigationHandlers;
export declare const IFRAME_HEIGHT_RATIO = 0.42;
export declare const DRAWER_HEIGHT_RATIO: number;
/**
* User agent types
*/
export type USER_AGENT = 'ios' | 'android' | 'windows' | 'mac' | 'unknown';
/**
* Detect the user's device/platform
* @returns The detected user agent type
*/
export declare const detectUserAgent: () => USER_AGENT;