From e1eb265d38f1c9af1c5bf3e344915faeef394d89 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Gon=C3=A7alves?= Date: Fri, 26 Jan 2024 18:44:48 +0000 Subject: [PATCH] Add allow to pass config on initialize --- README.md | 44 +++++++++++++++++++++++++++------------- src/enums/index.ts | 1 + src/enums/themes.ts | 4 ++++ src/index.ts | 1 + src/interfaces/config.ts | 3 ++- src/topper-web-sdk.ts | 15 +++++++++++++- 6 files changed, 52 insertions(+), 16 deletions(-) create mode 100644 src/enums/themes.ts diff --git a/README.md b/README.md index d7a6d5f..7b6e224 100644 --- a/README.md +++ b/README.md @@ -24,35 +24,51 @@ import { TopperWebSdk } from '@uphold/topper-web-sdk'; const topper = new TopperWebSdk(); ``` -### Initiate Topper +Where a `config` object can be passed to the constructor: -You can initiate Topper on a new tab (default), iframe or same tab. The default environment is `production`, and `sandbox` is available. +| Property | Default Value | Values | +| -------------- | ------------- | ---------------------------------- | +| environment | 'production' | 'production', 'sandbox' | +| is_android_app | false | true, false | +| is_ios_app | false | true, false | +| theme | 'dark' | 'dark', 'light' | +| variant | 'new-tab' | 'new-tab', 'same-tab', 'iframe' | -Example: +### Initiate Topper ```javascript import { TOPPER_ENVIRONMENTS, TOPPER_VARIANTS, TopperWebSdk } from '@uphold/topper-web-sdk'; +// Open in a new tab (default). const topper = new TopperWebSdk(); -// Open in a new tab (default). topper.initialize({ bootstrapToken: 'XXXX' }); // Open in an iframe. -const topper = new TopperWebSdk({ variant: TOPPER_VARIANTS.iframe }); +const topper = new TopperWebSdk({ variant: TOPPER_VARIANTS.IFRAME }); const topperIframe = document.getElementById('topper-iframe'); topper.initialize({ bootstrapToken: 'XXXX', iframeElement: topperIframe }); // Open in the same tab. -const topper = new TopperWebSdk({ variant: TOPPER_VARIANTS.sameTab }); +const topper = new TopperWebSdk({ variant: TOPPER_VARIANTS.SAME_TAB }); topper.initialize({ bootstrapToken: 'XXXX' }); // Open sandbox environment. -const topper = new TopperWebSdk({ environment: TOPPER_ENVIRONMENTS.sandbox }); +const topper = new TopperWebSdk({ environment: TOPPER_ENVIRONMENTS.SANDBOX }); + +topper.initialize({ bootstrapToken: 'XXXX' }); + +// Open with light theme. +const topper = new TopperWebSdk({ theme: TOPPER_THEMES.LIGHT }); topper.initialize({ bootstrapToken: 'XXXX' }); + +// Override initial config if needed. +const topper = new TopperWebSdk(); + +topper.initialize({ bootstrapToken: 'XXXX', config: { variant: TOPPER_VARIANTS.SAME_TAB } }); ``` ### Event Handling @@ -61,10 +77,10 @@ Listen to single events like order placed or all events: ```javascript // Single event. -topper.on(TOPPER_EVENTS.orderPlaced, ({ data }) => {}); +topper.on(TOPPER_EVENTS.ORDER_PLACED, ({ data }) => {}); // All events. -topper.on(TOPPER_EVENTS.all, ({ data, name }) => {}); +topper.on(TOPPER_EVENTS.ALL, ({ data, name }) => {}); ``` ### Multiple instances @@ -72,8 +88,8 @@ topper.on(TOPPER_EVENTS.all, ({ data, name }) => {}); You can initiate Topper on multiple instances, and listen to events like: ```javascript -const topperIframe1 = new TopperWebSdk({ variant: TOPPER_VARIANTS.iframe }); -const topperIframe2 = new TopperWebSdk({ variant: TOPPER_VARIANTS.iframe }); +const topperIframe1 = new TopperWebSdk({ variant: TOPPER_VARIANTS.IFRAME }); +const topperIframe2 = new TopperWebSdk({ variant: TOPPER_VARIANTS.IFRAME }); const topperIframe1Element = document.getElementById('topper-iframe-1'); const topperIframe2Element = document.getElementById('topper-iframe-2'); @@ -81,8 +97,8 @@ const topperIframe2Element = document.getElementById('topper-iframe-2'); topperIframe1.initialize({ bootstrapToken: 'XXXX', iframeElement: topperIframe1Element }); topperIframe2.initialize({ bootstrapToken: 'XXXX', iframeElement: topperIframe2Element }); -topperIframe1.on(TOPPER_WEB_SDK_EVENTS.orderPlaced, ({ data }) => {}); -topperIframe2.on(TOPPER_WEB_SDK_EVENTS.orderPlaced, ({ data }) => {}); +topperIframe1.on(TOPPER_WEB_SDK_EVENTS.ORDER_PLACED, ({ data }) => {}); +topperIframe2.on(TOPPER_WEB_SDK_EVENTS.ORDER_PLACED, ({ data }) => {}); ``` ### Triggering Events @@ -92,7 +108,7 @@ Used by `@uphold/topper-web` to trigger events: Trigger events: ```javascript -TopperWebSdk.triggerEvent(EVENTS.orderPlaced, data); +TopperWebSdk.triggerEvent(TOPPER_EVENTS.ORDER_PLACED, data); ``` ## Additional Information diff --git a/src/enums/index.ts b/src/enums/index.ts index c2c138d..1a30b47 100644 --- a/src/enums/index.ts +++ b/src/enums/index.ts @@ -1,4 +1,5 @@ export * from './environments'; export * from './events'; +export * from './themes'; export * from './urls'; export * from './variants'; diff --git a/src/enums/themes.ts b/src/enums/themes.ts new file mode 100644 index 0000000..76eb708 --- /dev/null +++ b/src/enums/themes.ts @@ -0,0 +1,4 @@ +export enum Themes { + DARK = 'dark', + LIGHT = 'light' +} diff --git a/src/index.ts b/src/index.ts index b5b8f8c..39d5eff 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,6 +1,7 @@ export { Environments as TOPPER_ENVIRONMENTS, Events as TOPPER_EVENTS, + Themes as TOPPER_THEMES, Urls as TOPPER_URLS, Variants as TOPPER_VARIANTS } from './enums'; diff --git a/src/interfaces/config.ts b/src/interfaces/config.ts index 1931dd0..5b717d7 100644 --- a/src/interfaces/config.ts +++ b/src/interfaces/config.ts @@ -1,10 +1,11 @@ import { Environments } from '../enums/environments'; +import { Themes } from '../enums/themes'; import { Variants } from '../enums/variants'; export interface Config { environment?: Environments; is_android_app?: boolean; is_ios_app?: boolean; - theme?: string; + theme?: Themes; variant?: Variants; } diff --git a/src/topper-web-sdk.ts b/src/topper-web-sdk.ts index 13eab29..d8a29eb 100644 --- a/src/topper-web-sdk.ts +++ b/src/topper-web-sdk.ts @@ -46,6 +46,10 @@ class TopperWebSdk { this.eventHandlers[name]?.forEach(handler => handler({ data: payload })); } + private setConfig(config: Config): void { + this.config = { ...this.config, ...config }; + } + private initializeMessageListener(): void { this.handleMessage = (event: MessageEvent) => { const allowedOrigins = [Urls.PRODUCTION, Urls.SANDBOX]; @@ -67,12 +71,21 @@ class TopperWebSdk { this.eventHandlers = {}; } - initialize({ bootstrapToken, iframeElement }: { bootstrapToken: string; iframeElement?: HTMLIFrameElement }): void { + initialize({ + bootstrapToken, + config = {}, + iframeElement + }: { + bootstrapToken: string; + iframeElement?: HTMLIFrameElement; + config?: Config; + }): void { if (this.isInitialized) { throw new Error('This TopperWebSdk instance was already initialized.'); } this.isInitialized = true; + this.setConfig(config); const baseUrl = this.config.environment === Environments.SANDBOX ? Urls.SANDBOX : Urls.PRODUCTION; const isTopperSelfEmbed = window.location.href === Urls.WEBSITE;