@wf-financing/ui-sdk 0.1.0

package/README.md

@@ -0,0 +1,64 @@
+# Wayflyer Financing UI SDK
+
+Wayflyer provides a `@wf-financing/ui-sdk` package that can be used as a client-side UI SDK to interact with the Embedded Finance API. It provides a single method to mount the CTA banner in the partner UI.
+
+## Installation
+
+Install the package directly from NPM with `npm install @wf-financing/ui-sdk`.  
+To minimize the bundle size and reduce the impact on partners' page load times, the SDK uses dynamic imports to load the main part of the functionality.
+
+## Instantiation
+
+To initialize `WayflyerUiSdk`, call the static method `loadSdk` with the following parameters:
+
+1. `targetId` - The DOM element's ID where the CTA is supposed to be mounted.
+2. `partnerDesignId` - The ID of the partner theme that needs to be applied to the CTA.
+   - **Note**: The partner must request Wayflyer to generate a special theme ID.
+3. `partnerCallback` - A function of type `PartnerCallbackType`, which is also provided by the `@wf-financing/ui-sdk` package.
+4. `companyToken` - The merchant identifier.
+   - **Note**: The `companyToken` should be minted using the Company Token endpoint on the partner's backend. See the Authentication section [here](https://docs.wayflyer.com/embedded-finance/authentication) for more details.
+
+```jsx
+import { type IWayflyerUiCtaSdk, WayflyerUiSdk } from '@wf-financing/ui-sdk';
+
+const wayflyerSdk = (await WayflyerUiSdk.loadSdk(targetId, partnerDesignId, partnerCallback, companyToken)) as IWayflyerUiCtaSdk;
+```
+
+## SDK methods
+### `mountCta()`
+This function mounts the CTA banner once it's called.
+
+```jsx
+wayflyerSdk.mountCta();
+```
+
+## Mocked mode
+To simplify the testing process, the SDK can be initialized in mock mode. To do so, pass a fifth argument of type `MockedModeType`.
+In mock mode, the partner can manually set responses for SDK methods via the `sdkScenario` field in the optional `mockedMode` argument.
+
+```jsx
+import { WayflyerUiSdk, type MockedModeType, SdkScenarios } from '@wf-financing/ui-sdk';
+
+const mockedModeNewApplication: MockedModeType = {
+   isMockedMode: true,
+   sdkScenario: SdkScenarios.INDICATIVE_NEW_APPLICATION,
+};
+
+const mockedModeNewApplication: MockedModeType = {
+   isMockedMode: true,
+   sdkScenario: SdkScenarios.GENERIC_NEW_APPLICATION,
+};
+
+const mockedModeContinueApplication: MockedModeType = {
+   isMockedMode: true,
+   sdkScenario: SdkScenarios.CONTINUE_APPLICATION,
+};
+
+const mockedModeNoCta: MockedModeType = {
+   isMockedMode: true,
+   sdkScenario: SdkScenarios.NO_CTA,
+};
+
+const wayflyerSdk = (await WayflyerUiSdk.loadSdk(targetId, partnerDesignId, partnerCallback, companyToken, mockedMode)) as IWayflyerUiCtaSdk;
+```
+After instantiation with the mockedMode parameter, the CTA banner will behave according to the specified scenario.

package/dist/config/index.d.ts

@@ -0,0 +1,2 @@
+export { WAYFLYER_UI_PACKAGE_ID } from './scriptId';
+export { UI_PACKAGE_URL } from './url';

package/dist/config/scriptId.d.ts

@@ -0,0 +1 @@
+export declare const WAYFLYER_UI_PACKAGE_ID = "wayflyer-ui-package";

package/dist/config/url.d.ts

@@ -0,0 +1 @@
+export declare const UI_PACKAGE_URL = "https://unpkg.com/@wf-financing/ui@1/dist/index.es.js";

package/dist/index.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});var l=(i=>(i.NO_CTA="no_cta",i.CONTINUE_APPLICATION="continue_application",i.GENERIC_NEW_APPLICATION="generic_new_application",i.INDICATIVE_NEW_APPLICATION="indicative_new_application",i))(l||{});const c="wayflyer-ui-package",w="https://unpkg.com/@wf-financing/ui@1/dist/index.es.js",s=(i,e,a,n,o)=>{if(!window.WayflyerUiCtaSdk)throw new Error("Failed to load WayflyerUiCtaSdk from the script.");const t=window.WayflyerUiCtaSdk;return new t(i,e,a,n,o)},d=(i,e,a,n,o,t)=>new Promise((r,y)=>{i.onload=()=>{try{r(s(e,a,n,o,t))}catch(S){y(S)}}}),f=async(i,e,a,n,o)=>{try{const t=document.getElementById(c);if(window.WayflyerUiCtaSdk)return s(i,e,a,n,o);if(t)return d(t,i,e,a,n,o);const r=document.createElement("script");return r.src=w,r.type="module",r.id=c,r.async=!0,document.head.appendChild(r),d(r,i,e,a,n,o)}catch(t){throw console.error("Error in loading headless SDK:",t),new Error("Failed to load script")}};class u{static async loadSdk(e,a,n,o,t){return await f(e,a,n,o,t)}}exports.SdkScenarios=l;exports.WayflyerUiSdk=u;

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export type { IWayflyerUiCtaSdk, PartnerCallbackType, MockedModeType } from '@wf-financing/embedded-types';
+export { SdkScenarios } from '@wf-financing/embedded-types';
+export { WayflyerUiSdk } from './sdk';

package/dist/index.es.js

@@ -0,0 +1,43 @@
+var w = /* @__PURE__ */ ((i) => (i.NO_CTA = "no_cta", i.CONTINUE_APPLICATION = "continue_application", i.GENERIC_NEW_APPLICATION = "generic_new_application", i.INDICATIVE_NEW_APPLICATION = "indicative_new_application", i))(w || {});
+const c = "wayflyer-ui-package", S = "https://unpkg.com/@wf-financing/ui@1/dist/index.es.js", s = (i, e, a, n, o) => {
+  if (!window.WayflyerUiCtaSdk)
+    throw new Error("Failed to load WayflyerUiCtaSdk from the script.");
+  const t = window.WayflyerUiCtaSdk;
+  return new t(i, e, a, n, o);
+}, d = (i, e, a, n, o, t) => new Promise((r, l) => {
+  i.onload = () => {
+    try {
+      r(s(e, a, n, o, t));
+    } catch (y) {
+      l(y);
+    }
+  };
+}), f = async (i, e, a, n, o) => {
+  try {
+    const t = document.getElementById(c);
+    if (window.WayflyerUiCtaSdk)
+      return s(i, e, a, n, o);
+    if (t)
+      return d(
+        t,
+        i,
+        e,
+        a,
+        n,
+        o
+      );
+    const r = document.createElement("script");
+    return r.src = S, r.type = "module", r.id = c, r.async = !0, document.head.appendChild(r), d(r, i, e, a, n, o);
+  } catch (t) {
+    throw console.error("Error in loading headless SDK:", t), new Error("Failed to load script");
+  }
+};
+class C {
+  static async loadSdk(e, a, n, o, t) {
+    return await f(e, a, n, o, t);
+  }
+}
+export {
+  w as SdkScenarios,
+  C as WayflyerUiSdk
+};

package/dist/sdk/index.d.ts

@@ -0,0 +1,5 @@
+import { PartnerCallbackType, MockedModeType } from '@wf-financing/embedded-types';
+
+export declare class WayflyerUiSdk {
+    static loadSdk(targetId: string, partnerDesignId: string, partnerCallback: PartnerCallbackType, companyToken: string, mockedMode?: MockedModeType): Promise<void | import('@wf-financing/embedded-types').IWayflyerUiCtaSdk>;
+}

package/dist/sdk-mode/index.d.ts

@@ -0,0 +1 @@
+export { loadUiSdkMode } from './loadSdkUiMode';

package/dist/sdk-mode/loadSdkUiMode.d.ts

@@ -0,0 +1,5 @@
+import { IWayflyerUiCtaSdk, PartnerCallbackType, MockedModeType } from '@wf-financing/embedded-types';
+
+type LoadUiSdkModeType = (targetId: string, partnerDesignId: string, partnerCallback: PartnerCallbackType, companyToken: string, mockedMode?: MockedModeType) => Promise<IWayflyerUiCtaSdk | void>;
+export declare const loadUiSdkMode: LoadUiSdkModeType;
+export {};

package/dist/utils/index.d.ts

@@ -0,0 +1,2 @@
+export { initializeUiSdk } from './initializeUiSdk';
+export { loadScriptAndInitializeSdk } from './loadScriptAndInitializeSdk';

package/dist/utils/initializeUiSdk.d.ts

@@ -0,0 +1,3 @@
+import { IWayflyerUiCtaSdk, PartnerCallbackType, MockedModeType } from '@wf-financing/embedded-types';
+
+export declare const initializeUiSdk: (targetId: string, partnerDesignId: string, partnerCallback: PartnerCallbackType, companyToken: string, mockedMode?: MockedModeType) => IWayflyerUiCtaSdk;

package/dist/utils/loadScriptAndInitializeSdk.d.ts

@@ -0,0 +1,3 @@
+import { IWayflyerUiCtaSdk, PartnerCallbackType, MockedModeType } from '@wf-financing/embedded-types';
+
+export declare const loadScriptAndInitializeSdk: (script: HTMLScriptElement, targetId: string, partnerDesignId: string, partnerCallback: PartnerCallbackType, companyToken: string, isMockedMode?: MockedModeType) => Promise<IWayflyerUiCtaSdk>;

package/dist/vite.config.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vite').UserConfig;
+export default _default;

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@wf-financing/ui-sdk",
+  "version": "0.1.0",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.es.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.es.js",
+      "types": "./dist/index.d.ts",
+      "require": "./dist/index.cjs.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@wf-financing/embedded-types": "0.2.6"
+  },
+  "devDependencies": {
+    "vite": "^6.3.5",
+    "vite-plugin-dts": "^3.4.0",
+    "typescript": "^5.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "clean": "rm -rf dist",
+    "build": "vite build",
+    "prepare-sdk-cta": "pnpm clean && pnpm build && pnpm pack",
+    "publish-sdk-cta": "pnpm clean && pnpm build && pnpm publish --access public --no-git-checks",
+    "test": "vitest",
+    "test:coverage": "vitest --coverage"
+  }
+}