import { IAnalyticProvider } from "./analytics"; import { ICommerceProvider, ItemSize } from "./commerce"; import { AccessoryReference, Awaitable, FallbackGarments, ReferenceData, TopBottomPosition } from "./common"; import { IShareState, ISharingProvider } from "./sharing"; /** * @group Collection Assets */ export interface Outfit { id: string; garments: Array; accessories?: Array; avatar: AssetReference; scene: AssetReference; preview?: AssetReference; } /** * @group Collection Assets */ export type AssetReference = (ReferenceData & { name?: string; price?: { price: number; currency: string; }; garmentLink?: string; }); /** * @group Collection Assets */ export type AvatarInformation = { heightInCm: number; displayName: string; gender: "female" | "male"; }; /** * @group Collection Assets */ export type AvatarVariantInformation = { shoe: string; shoe_color?: string; }; /** * @group Collection Assets */ export type AvatarAssetReference = AssetReference & { belongsTo?: string; additionalInformation?: AvatarInformation; variant?: AvatarVariantInformation; }; /** @hidden */ export type ShoeOption = { name: string; translationKey?: string; image?: string; }; /** * A collection descripes everything that is shown in a PICTOFiT Virtual Styling Component. * * It contains the available avatars, the available scenes, all available garments, * as well as the predefined outfits. * * Reactive Reality is creating these collections and will provide a reference, to * allow fetching of these collections via a centralized system. * * {@link IVirtualStylingBuilder.getCollection} can be used to fetch such a collection * from this centralized system. * * During the build a json schema for this interface it generated and available in the * location `src/schema/collection.schema.json` of the npm package. * * @group Collection Assets */ export interface Collection { /** * Holds all outfit assets, these are precalculated outfit assets, that * are shown in the initial carusel. */ outfits?: Array; /** * Holds all garments that are available for the virtual tryon in this collection */ garments?: Array; /** * Holds all accessories that are available for the virtual tryon in this collection */ accessories?: Array; /** * Holds all avatars that are available for the virtual tryon in this collection */ avatars?: Array; /** * Holds all scenes that are available for the virtual tryon in this collection */ scenes?: Array; /** * This object holds generic information on the collection, like the name, * a link to the collection (for example a PLP), and a logo url to represent * the collection. */ info?: { name: string; /** * @deprecated This is not supported anymore */ collectionLink?: string; imageUrl: string; }; /** * These garments are dressed for certain garment groups (shirts, etc.) in case * currently no other garment is selected in this group. With this setting * it can be prevented to show avatars in half-naked states in the virtual dressing * room, by falling back to the garments in this list. */ fallbackGarments?: FallbackGarments; /** * These settings enable customization of the VSC behaviour based on the collection. */ settings?: { /** * @deprecated This is not supported anymore */ carouselTimeout?: number; style?: string; /** @hidden */ shoeOptions?: Array; }; } /** * The Garment Information Provider is used to retrieve detailed information * about garments, such as their name, brand, availability, and more. * * @remarks * To improve loading times, the `preLoad` function of the IGarmentInformationProvider * will be called with a list of all required garments. This allows a custom * implementation to fetch information for multiple garments in a single batch * request from a remote system *such as a server* and cache the results for * efficient reuse. * * @group VSC * @group Host Providers */ export interface IGarmentInformationProvider { /** * The name of the garment * * @param reference The garment in question */ getName(reference: AssetReference): Awaitable; /** * The name of the brand of the garment * * @param reference The garment in question */ getBrand?(reference: AssetReference): Awaitable; /** * The price of the garment, in case no price is provided in the commerce * provider. This acts as fallback. * * @param reference The garment in question */ getPrice(reference: AssetReference): Awaitable<{ price: number; strikePrice?: number; currency: string; } | undefined>; /** * The link to the garments PDP. * * @param reference The garment in question */ getDetailLink(reference: AssetReference): Awaitable; /** * If this methods is defined, it can be used to determine if a garment should * be used in the expirience. If this methods returns false, that garment is * removed from the garment selection AND all outfits that reference this * garment are also removed and not available! * * @param reference The garment in question */ isAvailable?(reference: AssetReference): Awaitable; /** * Returns the available sizes for a garment with the given ID. * @param id Unique ID of the garment */ getSizes?(id: ReferenceData): Awaitable>; /** * Allows the provider to preload and batch load garment information. * @param items The array of references that should be preloaded */ preLoad?(items: Array): Awaitable; } /** * This type provides backwards compatible type. * * @deprecated Use the new {@link IGarmentInformationProvider} interface instead. * @group VSC * @group Host Providers */ export type GarmentInformationProvider = IGarmentInformationProvider; /** * The virtual styling API, that is provided by the Virtual Styling Builder * * @group VSC */ export interface IVirtualStylingApi { /** * Show the VSC. * * @param collection A promise that resolves to a collection * @param collectionReference A reference to the collection * @param options Optional options to customize the VSC */ show(collection: Promise, collectionReference: AssetReference, options?: { fullscreen?: boolean; closeable?: boolean; useAvatarPlatform?: boolean; noInternalAnalytics?: boolean; allowRRGATracking?: boolean; analytics?: Array>; informationProvider?: Promise>; sharedState?: IShareState; commerceProvider?: ICommerceProvider; consent?: ConsentState; customStyle?: string; layoutAlignment?: "left" | "right"; translationSettings?: TranslationSettings; }): void; /** * Hide the VSC fromthe host application, this is usually not necessary to be * called, since the user will close the VSC by clicking the `X` symbol. */ hide(): void; } /** * This type provides backwards compatible type. * * @deprecated Use the new {@link IVirtualStylingApi} interface instead. * * @group VSC */ export type VirtualStylingApi = IVirtualStylingApi; /** /** * Configuration settings for i18n translation * * @group VSC */ export interface TranslationSettings { /** * The fallback language to use when a translation is not available * @default 'en' */ fallbackLng?: string; /** * The order of detection methods for determining the user's language * @default ["querystring", "htmlTag", "navigator"] */ detection?: { order?: Array<"querystring" | "htmlTag" | "navigator" | "localStorage" | "sessionStorage" | "cookie" | "path" | "subdomain">; }; } /** * A builder interface for the VSC component. This allows to set up default settings * for the VSC instance. * * For the full documentation on the VSC component please take a look into our docs {@link https://docs.pictofit.com/web-components/latest/virtual-styling | VSC documentation} * * See {@link IGarmentInformationProvider} on how to provide garment information to the VSC component. * * See {@link ICommerceProvider} on how to provide e-commerce information and actions to the VSC component. * * See {@link hostAdaptors.SharingProvider} on how to implement sharing functionality in the VSC component. * * @group VSC */ export interface IVirtualStylingBuilder { /** * Sets the default organization or customer id (these are the same) * @param org The organization or customer id */ forOrganisation(org: string): IVirtualStylingBuilder; /** * Fetch a collection based in the received reference id and organization id * * @param collectionId The collection reference * @param organizationId The organization id */ getCollection(collectionId: string, organizationId?: string): Promise; /** * Sets the default information provider. * * @param informationProvider The information provider */ setGarmentInformationProvider(informationProvider: Partial): IVirtualStylingBuilder; /** * Sets an Array of analytic providers * * @param informationProvider The array of analytic providers */ setAnalytics(analytics: Array>): IVirtualStylingBuilder; /** * Sets the default e-commerce provider. * * @param commerceProvider The e-commerce provider */ setECommerceProvider(commerceProvider: ICommerceProvider): IVirtualStylingBuilder; /** * Set up an integration with GA as analytics proider. * * @param ga measurement id */ addGoogleAnalytics(ga?: string): IVirtualStylingBuilder; /** * The custom css style to be used to customize the VSC look and feel. * * @param style CSS style */ setCustomStyle(style: string): IVirtualStylingBuilder; /** * Set the avatar position * * @param position The position */ setAvatarPosition(position: TopBottomPosition): IVirtualStylingBuilder; /** * Set the sharing provider. * * @param provider The sharing provider that should be used. */ setSharingProvider(provider: ISharingProvider): IVirtualStylingBuilder; /** * Set if the avatar platform should be used. * * @param useAvatarPlatform The flag to use the avatar platform */ setUseAvatarPlatform(useAvatarPlatform: boolean): IVirtualStylingBuilder; /** * Configure translation settings for i18n. * * @param settings The translation settings including fallback language and detection order */ setTranslationSettings(settings: TranslationSettings): IVirtualStylingBuilder; /** * Add a consent callback that can be used to query the consent state of the user. * * @param cb The callback */ addConsentCallback(cb: () => { consent?: ConsentState; internalAnalytics?: boolean; }): void; /** * Construct the VSC component. This will always return the same instance, and * doesn't allow for new configurations to be set after this call. * * But further customizations can still be done using the options argument in * the {@link IVirtualStylingApi} show function. */ build(): Promise<{ api: IVirtualStylingApi; opened: boolean; }>; } /** * This type provides backwards compatible type. * * @deprecated Use the new {@link IVirtualStylingBuilder} interface instead. */ export type VirtualStylingBuilder = IVirtualStylingBuilder; /** * These are internal actions, that are not relevent for the public API * @hidden */ export type FairytaleActions = { "pictofit::fairytale::show": { collection: Promise; collectionReference: AssetReference; informationProvider?: Promise>; sharingProvider: ISharingProvider | undefined; commerceProvider?: ICommerceProvider; closeable?: boolean; sharedState?: IShareState; fullscreen?: boolean; useAvatarPlatform?: boolean; noInternalAnalytics?: boolean; analytics?: Array>; allowRRGATracking?: boolean; consent?: ConsentState; customStyle?: string; avatarPosition?: TopBottomPosition; layoutAlignment?: "left" | "right"; translationSettings?: TranslationSettings; }; "pictofit::fairytale::hide": undefined; "pictofit::fairytale::setConsent": { analytics: ConsentState; }; }; /** * This defines the consent state * * *granted* means the user grants consent for tracking * * *denied* means the user denied consent for tracking * * *unknown* means the user was not asked about consent for tracking purposes * * @group VSC */ export type ConsentState = "granted" | "denied" | "unknown";