Before you start

TypeScript types

If you are using TypeScript before you start we recommend including following types to your project. Create .ts file and paste code below:

export type TokenCallbackReturn =
    | { status: 'eligible'; token: string }
    | { status: 'notEligible' }
    | { status: 'notLoggedIn' }
    | { status: 'error' };
export type TokenCallback = () => Promise<TokenCallbackReturn> | TokenCallbackReturn;

export type LoginCallback = () => void;

export type TogglerView =
    | 'wide'
    | 'narrow';

export type TogglerSide =
    | 'bottomLeft'
    | 'bottomRight'
    | 'topLeft'
    | 'topRight';

export type PushNotificationsConfig = {
    enabled: boolean;
};

export type GuestModeConfig = {
    enabled: boolean;
    anonymous?: boolean;
};

export type BaseOptions = {
    clientId: number;
    view?: TogglerView;
    side?: TogglerSide;
    locale: string;
    tokenCallback?: TokenCallback;
    loginCallback?: LoginCallback;
    guestMode?: GuestModeConfig;
    pushNotifications?: PushNotificationsConfig;
    colors?: Partial<Record<Color, string>>;
    plugins?: Plugin[];
    entryAnimationDuration?: number;
    onQuestionAnimationDuration?: number;
    togglerLogoUrl?: string;
    togglerTitleText?: string;
    togglerSubtitleText?: string;
    notificationSoundUrl?: string;
};

export type StaticWidgetOptions = BaseOptions & {
    container: HTMLElement;
};

export type FloatingWidgetOptions = BaseOptions;

export type Color =
    | 'background'
    | 'backgroundFont'
    | 'card'
    | 'primary'
    | 'primaryFont'
    | 'highlight'
    | 'won'
    | 'lost';

export type OnDestroyedCallback = () => void;
export type OffDestroyedCallback = () => void;

export type TogglerContentPositioning = 
    | 'static'
    | 'absolute';

export type TogglerTestAnimation =
    | 'NARROW_ON_LOAD'
    | 'NARROW_NOTIFICATION'
    | 'WIDE_NOTIFICATION';


export type Widget = {
    setColor(color: Color, value: string): void;
    refreshToken(): void;
    destroy(): void;
    onDestroyed(callback: OnDestroyedCallback): void;
    offDestroyed(callback: OffDestroyedCallback): void;
    setZIndex(zIndex: number): void;
    runTogglerAnimation(animationName: TogglerTestAnimation): void;
};

export type StaticWidget = Widget & {
    setContentPositioning(position: TogglerContentPositioning): void;
};

export type FloatingWidget = Widget & {
    setPadding(paddingX: number, paddingY: number): void;
};

export type Embedder = {
    createStaticWidget(options: StaticWidgetOptions): StaticWidget;
    createFloatingWidget(options: FloatingWidgetOptions): FloatingWidget;
};

type BetsPluginBaseMarket = {
    id: string;
    name: string;
    view: 'tiles' | 'list';
    bets: BetsPluginBet[];
};

export type BetsPluginPrematchMarket = BetsPluginBaseMarket & {
    type: 'prematch';
    code: BetsPluginPrematchMarketCode;
};

export type BetsPluginLiveMarket = BetsPluginBaseMarket & {
    type: 'live';
    code: BetsPluginLiveMarketCode;
};
export type BetsPluginMarket = BetsPluginPrematchMarket | BetsPluginLiveMarket;

export type BetsPluginBet = {
    id: string;
    odds: string;
    name: string;
    isActive: boolean;
};

export type BetsPluginPrematchMarketCode =
    | '1x2'
    | '1x2Halftime'
    | 'DoubleChance'
    | 'UnderOverGoals'
    | 'UnderOverCorners'
    | 'UnderOverCards'
    | 'FirstTeamToScore'
    | 'PlayerToScore'
    | 'BothTeamsToScore'
    | 'HomeUnderOverGoals'
    | 'AwayUnderOverGoals';

export type BetsPluginLiveMarketCode =
    | '1x2'
    | 'DoubleChance'
    | 'UnderOverGoals'
    | 'UnderOverCorners'
    | 'UnderOverCards'
    | 'UnderOverOffsides'
    | 'FirstTeamToScore'
    | 'PlayerToScore'
    | 'BothTeamsToScore'
    | 'NextGoal';

export type BetsPluginEventMapping = { providerId: number; clientEventId: string };

export type BetsPluginForEachAttachedMatchCallback = (match: BetsPluginMatch) => void;

export type BetsPluginOnMatchesAttachedData = { matches: BetsPluginMatch[] };
export type BetsPluginOnMatchesAttachedCallback = (data: BetsPluginOnMatchesAttachedData) => void;

export type BetsPluginOnMatchesDetachedData = { matches: BetsPluginMatch[] };
export type BetsPluginOnMatchesDetachedCallback = (data: BetsPluginOnMatchesDetachedData) => void;

export type BetsPluginOnBetClickData = {
    bet: BetsPluginBet;
    market: BetsPluginMarket;
    match: BetsPluginMatch;
};
export type BetsPluginOnBetClickCallback = (data: BetsPluginOnBetClickData) => void;

export type BetsPlugin = {
    forEachAttachedMatch(callback: BetsPluginForEachAttachedMatchCallback): void;
    onMatchesAttached(listener: BetsPluginOnMatchesAttachedCallback): void;
    offMatchesAttached(listener: BetsPluginOnMatchesAttachedCallback): void;
    onMatchesDetached(listener: BetsPluginOnMatchesDetachedCallback): void;
    offMatchesDetached(listener: BetsPluginOnMatchesDetachedCallback): void;
    onBetClick(listener: BetsPluginOnBetClickCallback): void;
    offBetClick(listener: BetsPluginOnBetClickCallback): void;
};

export type BetsPluginMatch = {
    getStatscoreEventId(): number;
    getClientEventMappings(): BetsPluginEventMapping[];
    setMarkets(markets: BetsPluginMarket[]): void;
    clearMarkets(): void;
};

type Plugin = BetsPlugin;

type CreateBetsPluginFn = () => BetsPlugin;

declare global {
    interface Window {
        PointsInPlay: {
            onceLoad(callback: (library: { embedder: Embedder; createBetsPlugin: CreateBetsPluginFn }) => void): void;
            onceError(callback: (err: any) => void): void;
        };
    }
}

To initialize types and have proper syntax highlighting available simply import created file, preferably in entry point of your application:

import './PointsInPlayTypes';

Further down in the project you can import type you need:

import { Color } from './PointsInPlayTypes';

If you cannot use them directly in your project you still can use them for referrence when integrating PointsInPlay.