import { ICommerceProvider, IInventoryProvider } from "./commerce"; import { Awaitable, FallbackGarments, ReferenceData, RenderMode } from "./common"; import { IShareState, ISharingProvider } from "./sharing"; export type MDRC_EVENTS = "closed" | "open"; /** * The MDRC api */ export interface IDressingRoomApi { /** * This methods opens the MDRC * * @param hostAdaptor The hostadaptor implementation * @param sharedState The shared state receveived using the {@link hostAdaptors.defaultSharingProvider} * @returns */ show: (hostAdaptor?: HostAdaptor, sharedState?: IShareState) => void; /** * This methods hides the MDRC instance * @returns */ hide: () => void; /** * The host application can listen on certain MDRC events. * * @param type The MDRC event to listen for * @param cb The callback that should be executed * @returns */ on: (type: MDRC_EVENTS, cb: () => void) => void; } /** * This type provides backwards compatible type. * * @deprecated Use the new {@link IDressingRoomApi} interface instead. * * @group MDRC */ export type DressingRoomApi = IDressingRoomApi; /** * The MDRC builder interface to construct an MDRC instance. * * For the full documentation on the MDRC component please take a look into our docs {@link https://docs.pictofit.com/web-components/latest/modal-dressing-room | MDRC documentation} * * @group MDRC */ export interface IDressingRoomBuilder { /** * Sets the default organization or customer id (these are the same) * @param org The organization or customer id */ forOrganisation(org: string): IDressingRoomBuilder; /** * Fetch the MDRC setting from the central asset platform * * @param collectionId The reference id * @param organizationId The organization id */ getSetting(collectionId: string, organizationId?: string): Promise; /** * Register a host adaptor for the MDRC instance that is constructed here. * * @param hostAdaptor The host adaptor */ withHostAdaptor(hostAdaptor: HostAdaptor): IDressingRoomBuilder; /** * Build the MDRC instance */ build(): Promise<{ api: IDressingRoomApi; }>; } /** * This type provides backwards compatible type. * * @deprecated Use the new {@link IDressingRoomBuilder} interface instead. * * @group MDRC */ export type DressingRoomBuilder = IDressingRoomBuilder; /** * @group utils */ export declare namespace Core { /** * @group utils */ type Gender = "Male" | "Female"; /** * @group utils */ type AssetInfo = string | { [key: string]: string | { blob: string; }; }; /** * @group utils */ type AssetType = "Avatar" | "Scene" | "Garment" | "Animation"; } /** * The MDRC providers * * @group MDRC */ export declare namespace Providers { /** * Provides the available ids as well as the asset bundles for a specific resource type. * * @group MDRC */ interface IAssetProvider { /** * Returns a list of ids for the available resources for this provider. */ getIds(): Awaitable>; /** * Returns the asset bundle for a specific resource * @param id Unique ID if the garment as used in your systems */ getById(id: ReferenceData): Awaitable; } /** * @group MDRC * @deprecated Use {@link IAssetProvider} instead */ type AssetProvider = IAssetProvider; /** * Provides information about the garments in the dressing room * * @group MDRC */ export interface IGarmentProvider extends IAssetProvider { /** * Return the date at which the garment was added to the MDRC. * @param id Unique ID if the garment as used in your systems * @returns The date the garment as added */ getAddedAt?: (id: ReferenceData) => Awaitable; /** * Return the display name of a garment as string. This will be shown for example below * the garment tile and in the details drawer. * @param id Unique ID if the garment as used in your systems */ getName(id: ReferenceData): Awaitable; /** * Returns an url to the thumbnail image of a garment. This will be shown for example below * the garment tile and in the details drawer. */ getThumbnail(id: ReferenceData): Awaitable; /** * Removes the given garment from the dressing room. * Is called when someone clicks "Remove from dressing room" on a garment tile. * @param id Unique ID if the garment as used in your systems */ removeById(id: ReferenceData): Awaitable; /** * Callback to add a garments from a shared look into the current dressing room / garment provider. * @param id Unique ID if the garment as used in your systems * */ addById?: (id: ReferenceData) => void; } /** * @group MDRC * @deprecated Use {@link IGarmentProvider} instead */ export type GarmentProvider = IGarmentProvider; /** * Provides information & assets for the avatars available in the dressing room. * * @group MDRC */ export interface IAvatarProvider extends IAssetProvider { /** * Returns the display name of the avatar as string. This will be shown in the avatar selection drawer. * @param id Unique ID of the avatar * */ getName(id: ReferenceData): Awaitable; /** * Returns an url to the thumbail image of the avatar. This will be shown in the avater selection drawer. * Thumbnails should ideally be square. * @param id Unique ID of the avatar */ getThumbnail(id: ReferenceData): Awaitable; /** * Returns the gender of an avatar as enum. * @param id Unique ID of the avatar */ getGender(id: ReferenceData): Awaitable; } /** * @group MDRC * @deprecated Use {@link IAvatarProvider} instead */ export type AvatarProvider = IAvatarProvider; /** * Provides information & assest for the scenes available in the dressing room. * * @group MDRC */ export interface ISceneProvider extends IAssetProvider { /** * Returns the display name of the scene as string. This will be shown in the scene selection drawer. * @param id Unique ID of the scene */ getName(id: ReferenceData): Awaitable; /** * Returns an url to the thumbail image for the scene. This will be shown in the scene selection drawer. * Thumbnails should ideally be square. * @param id */ getThumbnail(id: ReferenceData): Awaitable; } /** * @group MDRC * @deprecated Use {@link ISceneProvider} instead */ export type SceneProvider = ISceneProvider; /** * Provides information & assest for the animation available in the dressing room. * * A user shouldn't need this. * @hidden * @group MDRC */ export interface IAnimationProvider extends AssetProvider { getName(id: ReferenceData): Awaitable; } /** * @hidden * @group MDRC * @deprecated Use {@link IAnimationProvider} instead */ export type AnimationProvider = IAnimationProvider; export {}; } /** * Namespace for mannequin creation related providers * * @group MDRC */ export declare namespace MannequinCreation { /** * Provider for custom mannequins. The methods defined by this interface are used to store the * data for the avatar. How you store the data is completely up to you. * * @group MDRC */ interface IMutableAvatarProvider extends Providers.IAvatarProvider { /** * Deletes the avatar with the given id * @param id Unique ID auf the avatar */ deleteById(id: ReferenceData): Awaitable; /** * Stores the avatar's assets persistently for the given ID. How you actually store them is up to you. * @param id Unique ID of the avatar * @param asset Asset container object */ storeById(id: ReferenceData, asset: Core.AssetInfo): Awaitable; /** * Sets the name for the avatar with the given ID. * @param id Unique ID of the avatar * @param name Name of the avatar */ setName(id: ReferenceData, name: string): Awaitable; /** * Sets the gender of the avatar with the given ID. * @param id Unique ID of the avatar * @param gender Genderof the avatar */ setGender(id: ReferenceData, gender: Core.Gender): Awaitable; /** * Sets the thumbnail for the avatar encoded as base64 string. * @param id Unique ID of the avatar * @param thumbnail Thumbnail png in base64 format */ setThumbnail(id: ReferenceData, thumbnail: string): Awaitable; } /** * @group MDRC * @deprecated Use {@link IMutableAvatarProvider} instead */ type MutableAvatarProvider = IMutableAvatarProvider; } /** * Namespace for logging facilities * * @group MDRC * @group Logging */ export declare namespace Logging { /** * The Logging interface * * @group MDRC * @group Logging */ interface ILoggingProvider { debug(...args: unknown[]): void; info(...args: unknown[]): void; warn(...args: unknown[]): void; err(...args: unknown[]): void; } /** * @group MDRC * @group Logging * @deprecated Please use {@link ILoggingProvider} */ type LoggingProvider = ILoggingProvider; } /** * This interface describes how MDRC settings should look like. * * * @group MDRC */ export interface IMDRCSettingV1 { renderMode: RenderMode; avatars?: Array; scenes?: Array; defaultGarments?: Array; includeStockGarments?: boolean; fallbackGarments?: FallbackGarments; } /** * The MDRC Analytics namespace * * @group MDRC */ export declare namespace Analytics { /** * An MDRC metric representation * * @group MDRC */ interface Metrics { RenderTryOn: { render_time: number; avatar: string; scene: string; garments: { id: string; title: string; }[]; }; Navigate: "TryOn" | "GarmentDetails" | "AvatarSelect" | "AvatarCreate" | "AvatarEdit" | "EditLook" | "ShareLook" | "SceneSelect" | "AvatarGenderSelect" | "AvatarHeightSelect" | "AvatarPantsSelect" | "AvatarChestSelect" | "AvatarReady" | "AvatarEditExpert" | "Onboarding"; } /** * An MDRC page representation * * @group MDRC */ type Pages = Metrics["Navigate"]; /** * An MDRC collectable metric representation * * @group MDRC */ type CollectableMetric = { type: "Metric"; key: K; value: O[K]; }; /** * An MDRC render event * * @group MDRC */ type RenderEvent = CollectableMetric; /** * An MDRC navigate event * * @group MDRC */ type NavigateEvent = CollectableMetric; /** * An MDRC collectable metrics representation * * @group MDRC */ type CollectableMetrics = RenderEvent | NavigateEvent; /** * An MDRC collectable * * @group MDRC */ type Collectable = { id: string; timestamp: number; attributes: Record; } & ({ type: "Log"; args: Array; } | CollectableMetrics); /** * An MDRC collect function * * @group MDRC */ type CollectFunction = (data: Collectable) => Awaitable; /** * An MDRC analytic configuration * * @group MDRC */ type AnalyticsConfig = { enableTelemetry: true; collector: CollectFunction; } | { enableTelemetry: false; }; } /** * The MDRC performance metrics namespace * * @group MDRC */ export declare namespace PerformanceMetrics { /** * An MDRC performance metrics provider * * @group MDRC */ interface IPerformanceMetricsProvider { getCustomLabels(): Promise<{ [key: string]: string | number; }>; } /** * @group MDRC * @deprecated Use {@link IPerformanceMetricsProvider} instead */ type PerformanceMetricsProvider = IPerformanceMetricsProvider; } /** * The MDRC translator namespace * * @group MDRC */ export declare namespace Translator { /** * An MDRC translator provider * * @group MDRC */ interface ITranslator { transform_key?(key: string): string | undefined; translate?(key: string): string | undefined; } /** * @group MDRC * @deprecated Use {@link ITranslator} instead */ type Translator = ITranslator; } /** * A type helper * * @group MDRC */ export type ByMode = { [mode in RenderMode]?: T; }; /** * MDRC dressing room options * * @group MDRC */ export interface IDressingRoomOptions { enablePhysicsSimulation?: boolean; } /** * @deprecated Please use {@link IDressingRoomOptions} */ export type DressingRoomOptions = IDressingRoomOptions; /** * MDRC analytics context * * @group MDRC */ export type AnalyticsContext = { id?: string; attributes?: Record; }; /** * MDRC analytics builder * * @group MDRC */ export type AnalyticsBuilder = { id: string; sendMetric: (metric: Omit) => AnalyticsBuilder; sendLog: (...args: unknown[]) => AnalyticsBuilder; timeAction: () => (callback: (duration: number) => void) => void; }; /** * MDRC Analytics provider * * @group MDRC */ export interface IAnalytics { sendMetric: (context: AnalyticsContext, metric: Omit) => void; sendLog: (context: AnalyticsContext, ...args: unknown[]) => void; withContext: (context?: AnalyticsContext) => AnalyticsBuilder; } /** * The host adaptor type for internal use * * @hidden */ export type IHostAdaptor = Omit & { dressingRoom: { mode: RenderMode; options: Required; }; logger: Logging.ILoggingProvider; analytics: IAnalytics; }; /** * Interface for providing callbacks into the hosting web site */ export interface IHostCallbacks { /** * This is called when the Modal Dressing Room Component (MDRC) is opened, but no * garments are selected and the user presses a button to add products. * * This should redirect the user to some browsing page to select garments. */ addProductsClicked?: () => void; } /** * @deprecated Use {@link IHostCallbacks} instead */ export type HostCallbacks = IHostCallbacks; /** * Interface for connecting the Modal Dressing Room Component (MDRC) with the host website. THe adaptor is responsible * for providing information about the content in the dressing room. This covers garments, avatars and scenes. Furthermore, * it provides (optional) functionality for further functionality like add to cart, looking sharing or custom avatars. */ export interface HostAdaptor { dressingRoom: { mode: RenderMode; options?: IDressingRoomOptions; }; /** * Mandatory provider to populate the dressing room with garments. */ garments: ByMode; /** * Mandatory provider to populate the dressing room with avatars. */ avatars: ByMode; /** * Mandatory provider to populate the dressing room with scenes. */ scenes: ByMode; animations?: Providers.IAnimationProvider; commerce?: ICommerceProvider; inventory?: IInventoryProvider; customAvatars?: ByMode; sharing?: ISharingProvider; logger?: Logging.ILoggingProvider; analytics?: Analytics.AnalyticsConfig; performanceMetrics?: PerformanceMetrics.IPerformanceMetricsProvider; translator?: Translator.ITranslator; callbacks?: IHostCallbacks; } /** * @hidden */ export type MdrcActions = { "pictofit::mdrc::show": { hostAdaptor?: HostAdaptor; }; "pictofit::mdrc::hide": undefined; "pictofit::mdrc::setConsent": Record; "pictofit::mdrc::loadSharedLook": { state: IShareState; }; "pictofit::mdrc::registerEvent": { type: MDRC_EVENTS; callback: () => void; }; }; /** * The MDRC ready event * * @group MDRC */ export declare const MDRCReadyEvent = "pictofit::mdrc::ready";