@blux.ai/web-sdk 1.3.0 → 2.1.0

package/README.md

@@ -17,12 +17,12 @@ yarn add @blux.ai/web-sdk
 
 ---
 
-- 필요 변수 : `클라이언트 ID`, `API 키`
+- 필요 변수 : `Application ID`, `API 키`
 
 ```typescript
 const bluxClient = new BluxClient({
-  applicationId: "{blux_client_id}",
-  bluxApiKey: "{blux_api_key}",
+  bluxApplicationId: "BLUX_APPLICATION_ID",
+  bluxAPIKey: "BLUX_API_KEY",
 });
 bluxClient.setLogLevel("warning");
 ```
@@ -42,7 +42,7 @@ bluxClient.setLogLevel("warning");
 - 회원 유저가 앱을 실행하는 시점에도 `initialize` 메소드 호출 이후에 실행되어야 합니다.
 
 ```typescript
-bluxClient.signIn("USER ID");
+bluxClient.signIn({ userId: "USER ID" });
 ```
 
 ### setUserProperties
@@ -51,8 +51,10 @@ bluxClient.signIn("USER ID");
 
 ```typescript
 bluxClient.setUserProperties({
-  phone_number: "01011112222",
-  email_address: "test@example.com",
+  userProperties: {
+    phone_number: "01011112222",
+    email_address: "test@example.com",
+  },
 });
 ```
 
@@ -62,10 +64,11 @@ bluxClient.setUserProperties({
 
 ```typescript
 bluxClient.setCustomUserProperties({
-  custom_key1: "any_value",
-  custom_key2: true,
-  custom_key3: null,
-  custom_key4: 3,
+  customUserProperties: {
+    custom_key1: "any_value",
+    custom_key2: true,
+    custom_key4: 3,
+  },
 });
 ```
 
@@ -89,7 +92,7 @@ bluxClient.signOut();
 ```typescript
 bluxClient.sendEvent(
   new AddProductDetailViewEvent({
-    item_id: "ITEM_ID",
+    itemId: "ITEM_ID",
   }),
 );
 ```
@@ -103,7 +106,7 @@ bluxClient.sendEvent(
 ```typescript
 bluxClient.sendEvent(
   new AddLikeEvent({
-    item_id: "ITEM_ID",
+    itemId: "ITEM_ID",
   }),
 );
 ```
@@ -117,41 +120,53 @@ bluxClient.sendEvent(
 ```typescript
 bluxClient.sendEvent(
   new AddCartaddEvent({
-    item_id: "ITEM_ID",
+    itemId: "ITEM_ID",
   }),
 );
 ```
 
 #### 상품 구매
 
-: 유저가 제품을 구매했을 때 사용 가능한 이벤트입니다. 추가 인풋으로 `price`가 요구되며, 제품의 구매 당시 가격을 기록하면 됩니다.
+: 유저가 제품을 구매했을 때 사용 가능한 이벤트입니다. paidAmount 파라미터의 경우, 캠페인을 통한 성과 집계에 사용되는 값입니다.
 
 ---
 
-- **_동일 상품 복수 구매_**
-  - price 파라미터의 경우, 해당 상품 판매를 통한 총 매출을 계산할 때 활용됩니다. 추천에 의한 매출 기여액 지표를 보여드릴 때 사용되는 값으로 만약 5,000원짜리 상품을 5개 구매하였다면, 25,000 을 입력하시면 됩니다.
-- **_복수 상품 구매_**
-  - `AddPurchaseEvent` 객체를 각 상품 구매건에 맞춰서 생성한 후 list 형태로 넘겨주시면 됩니다.
-
 ```typescript
 bluxClient.sendEvent(
-  new AddPurchaseEvent({
-    item_id: "ITEM_ID",
-    price: 1000,
+  new AddOrderEvent({
+    orderId: "ORDER_ID",
+    paidAmount: 1200,
+    orderAmount: 2000,
+    items: [
+      {
+        id: "ITEM_ID_1",
+        price: 1000,
+        quantity: 1,
+      },
+    ],
   }),
 );
 ```
 
 ```typescript
 // 복수 상품을 구매한 경우
-bluxClient.sendEvent([
-  new AddPurchaseEvent({
-    item_id: "ITEM_ID_1",
-    price: 1000,
-  }),
-  new AddPurchaseEvent({
-    item_id: "ITEM_ID_2",
-    price: 2000,
+bluxClient.sendEvent(
+  new AddOrderEvent({
+    orderId: "ORDER_ID",
+    paidAmount: 1200,
+    orderAmount: 2000,
+    items: [
+      {
+        id: "ITEM_ID_1",
+        price: 1000,
+        quantity: 1,
+      },
+      {
+        id: "ITEM_ID_2",
+        price: 2000,
+        quantity: 2,
+      },
+    ],
   }),
-]);
+);
 ```

package/dist/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@blux.ai/web-sdk",
-    "version": "1.3.0",
+    "version": "2.1.0",
     "description": "The official Blux JavaScript browser client library",
     "main": "dist/src/index.js",
     "module": "dist/src/index.js",

package/dist/src/BluxClient.d.ts

@@ -1,16 +1,16 @@
 import { BehaviorSubject } from "rxjs";
-import type { LogLevel } from "./utils/Logger";
-import type { EventRequest } from "./events/types";
+import { DevicePlatform, type APIs } from "./apis/APIs";
 import type { Event as BluxEvent } from "./events/Event";
-import { type APIs } from "./apis/APIs";
+import type { EventRequest } from "./events/types";
 import type { CategoryRec, ItemRec, ItemsRec, UserRec } from "./recs";
+import type { LogLevel } from "./utils/Logger";
 export type SdkInfo = {
-    type: string;
+    type: DevicePlatform;
     version: string;
 };
 type BluxUser = {
     id: string;
-    bluxApiKey: string;
+    bluxAPIKey: string;
     applicationId: string;
     deviceId?: string;
     userId?: string;
@@ -20,31 +20,48 @@ export declare class BluxClient {
     private readonly sdkInfo;
     readonly bluxUser$: BehaviorSubject<BluxUser | undefined>;
     readonly requestQueue$: BehaviorSubject<EventRequest[]>;
-    private readonly applicationId;
-    private readonly bluxApiKey;
+    readonly inappQueue$: BehaviorSubject<APIs.inappsDispatcher.ResponseData | undefined>;
+    private readonly bluxApplicationId;
+    private readonly bluxAPIKey;
     private impressedElements;
     private intersectionObservingElements;
     private readonly intersectionObserver;
     private readonly intersectionEntry$;
     private hitElements;
-    constructor({ applicationId, bluxApiKey, }: {
-        applicationId: string;
-        bluxApiKey: string;
+    private postMessageToRN;
+    constructor({ bluxApplicationId, bluxAPIKey, }: {
+        bluxApplicationId: string;
+        bluxAPIKey: string;
     }, completionCallback?: (args: {
         errorMessage?: string;
         success: boolean;
     }) => void);
     private generateApiHeader;
+    private handleSendRequest;
+    private handleInappEvent;
+    private displayInapp;
     private init;
     setLogLevel(logLevel: LogLevel): void;
     private getBluxUserWithTimeout;
-    signIn(userId: string): Promise<void>;
+    signIn({ userId }: {
+        userId: string;
+    }): Promise<void>;
     signOut(): Promise<void>;
-    setUserProperties(userProperties: {
-        phone_number?: string;
-        email_address?: string;
+    setUserProperties({ userProperties, }: {
+        userProperties: {
+            phone_number?: string;
+            email_address?: string;
+            marketing_notification_consent?: boolean;
+            nighttime_notification_consent?: boolean;
+            marketing_notification_sms_consent?: boolean;
+            marketing_notification_email_consent?: boolean;
+            marketing_notification_push_consent?: boolean;
+            marketing_notification_kakao_consent?: boolean;
+        };
+    }): Promise<void>;
+    setCustomUserProperties({ customUserProperties, }: {
+        customUserProperties: Record<string, string | boolean | number | null>;
     }): Promise<void>;
-    setCustomUserProperties(customUserProperties: Record<string, string | boolean | number | null>): Promise<void>;
     sendEvent(event: BluxEvent | BluxEvent[]): void;
     private urlAndRef$;
     private handleUrlAndRef;

package/dist/src/BluxClient.js

@@ -1,32 +1,35 @@
-import packageJson from "../package.json";
-import { asyncScheduler, BehaviorSubject, catchError, combineLatest, debounceTime, exhaustMap, filter, firstValueFrom, groupBy, map, mergeMap, observeOn, Subject, throwError, timeout, } from "rxjs";
-import { LocalStorage } from "./utils/LocalStorage";
-import { Logger } from "./utils/Logger";
 import axios from "axios";
-import { filterNullable } from "./utils/operators";
+import dayjs from "dayjs";
+import { asyncScheduler, BehaviorSubject, catchError, combineLatest, concatMap, debounceTime, exhaustMap, filter, firstValueFrom, from, groupBy, map, mergeMap, NEVER, observeOn, Subject, switchMap, throwError, timeout, timer, withLatestFrom, } from "rxjs";
+import packageJson from "../package.json";
+import { DevicePlatform } from "./apis/APIs";
+import { createCrmEvent } from "./apis/createCrmEvent";
+import { collectEvent } from "./apis/createEvent";
+import { getItemRecommendations } from "./apis/getItemRecommendations";
+import { inappsDispatch } from "./apis/inappsDispatch";
 import { initialize } from "./apis/initialize";
 import { signIn } from "./apis/signIn";
 import { signOut } from "./apis/signOut";
-import { updateUserProperties } from "./apis/updateUserProperties";
 import { updateCustomUserProperties } from "./apis/updateCustomUserProperties";
-import { collectEvent } from "./apis/createEvent";
-import { DevicePlatform } from "./apis/APIs";
-import { SessionStorage } from "./utils/SessionStorage";
-import { AddClickEvent, AddPageVisitEvent, AddSectionViewEvent, VisitEvent, } from "./events";
+import { updateUserProperties } from "./apis/updateUserProperties";
 import { BLUX_ATTRIBUTES } from "./constants/BLUX_ATTRIBUTES";
-import { getItemRecommendations } from "./apis/getItemRecommendations";
+import { AddClickEvent, AddPageVisitEvent, AddSectionViewEvent, VisitEvent, } from "./events";
+import { LocalStorage } from "./utils/LocalStorage";
+import { Logger } from "./utils/Logger";
+import { onlineAndVisible$ } from "./utils/observables";
+import { filterNullable } from "./utils/operators";
+import { SessionStorage } from "./utils/SessionStorage";
 export class BluxClient {
-    api = axios.create({
-        baseURL: "https://api.blux.ai/prod",
-    });
+    api = axios.create();
     sdkInfo = {
-        type: "browser",
+        type: DevicePlatform.browser,
         version: packageJson.version,
     };
     bluxUser$ = new BehaviorSubject(undefined);
     requestQueue$ = new BehaviorSubject([]);
-    applicationId;
-    bluxApiKey;
+    inappQueue$ = new BehaviorSubject(undefined);
+    bluxApplicationId;
+    bluxAPIKey;
     // Impression 관련 변수
     impressedElements = [];
     intersectionObservingElements = [];
@@ -38,39 +41,47 @@ export class BluxClient {
     intersectionEntry$ = new Subject();
     // Hit 관련 변수
     hitElements = [];
-    constructor({ applicationId, bluxApiKey, }, completionCallback) {
-        this.applicationId = applicationId;
-        this.bluxApiKey = bluxApiKey;
+    // RN 브릿지 함수를 위한 함수
+    postMessageToRN(action, payload) {
+        if (typeof window !== "undefined" &&
+            window.ReactNativeWebView?.postMessage) {
+            window.ReactNativeWebView.postMessage(JSON.stringify({ action, payload }));
+            return true;
+        }
+        return false;
+    }
+    constructor({ bluxApplicationId, bluxAPIKey, }, completionCallback) {
+        this.bluxApplicationId = bluxApplicationId;
+        this.bluxAPIKey = bluxAPIKey;
+        const baseUrl = window?._BLUX_SDK_?.baseUrl ?? "https://api.blux.ai/prod";
+        this.api.defaults.baseURL = baseUrl;
+        onlineAndVisible$
+            .pipe(switchMap((active) => (active ? timer(0, 5000) : NEVER)), withLatestFrom(this.bluxUser$), map(([_, bluxUser]) => bluxUser), filterNullable(), exhaustMap((bluxUser) => this.handleInappEvent(bluxUser)))
+            .subscribe();
         combineLatest([this.requestQueue$, this.bluxUser$.pipe(filterNullable())])
             .pipe(filter(([requests]) => requests.length > 0), exhaustMap(async ([requests, bluxUser]) => {
-            try {
-                await collectEvent(this.api, {
-                    blux_user_id: bluxUser.id,
-                    application_id: bluxUser.applicationId,
-                }, {
-                    events: requests.map((request) => ({
-                        ...request,
-                        internal_event_properties: {
-                            ...request.internal_event_properties,
-                            url: `${this.urlAndRef$.value?.url ?? null}`,
-                            ref: `${this.urlAndRef$.value?.ref ?? null}`,
-                        },
-                        blux_id: bluxUser.id,
-                        device_id: bluxUser.deviceId,
-                    })),
-                }, this.generateApiHeader(bluxUser));
-            }
-            catch (error) {
-                // todo : retry
-                Logger.error(error, { tags: { from: "request-events-api" } });
-            }
-            return requests.map((r) => r.id); // todo: return successed requests only
+            const events = requests.map((request) => ({
+                ...request,
+                internal_event_properties: {
+                    ...request.internal_event_properties,
+                    url: `${this.urlAndRef$.value?.url ?? null}`,
+                    ref: `${this.urlAndRef$.value?.ref ?? null}`,
+                },
+                blux_id: bluxUser.id,
+                device_id: bluxUser.deviceId,
+            }));
+            await this.handleSendRequest({ bluxUser, events });
+            return requests.map((r) => r.id); // TODO: @all return successed requests only
         }), map((requestIdsSucceeded) => this.requestQueue$.value.filter((request) => !requestIdsSucceeded.includes(request.id))), observeOn(asyncScheduler))
             .subscribe(this.requestQueue$);
         this.bluxUser$.subscribe((bluxUser) => {
             if (bluxUser)
                 SessionStorage.setBluxUserId(bluxUser.id);
         });
+        this.inappQueue$
+            .pipe(filterNullable())
+            .pipe(concatMap((inapp) => from(this.displayInapp(inapp))))
+            .subscribe();
         this.init()
             .then(() => {
             completionCallback?.({ success: true });
@@ -79,17 +90,123 @@ export class BluxClient {
             completionCallback?.({ success: false, errorMessage: error.message });
         });
     }
-    generateApiHeader({ bluxApiKey }) {
+    generateApiHeader({ bluxAPIKey }) {
         return {
-            Authorization: bluxApiKey,
+            Authorization: bluxAPIKey,
         };
     }
+    async handleSendRequest({ bluxUser, events, }) {
+        try {
+            await collectEvent(this.api, {
+                blux_user_id: bluxUser.id,
+                application_id: bluxUser.applicationId,
+            }, {
+                events,
+            }, this.generateApiHeader(bluxUser));
+        }
+        catch (error) {
+            Logger.error(error, { tags: { from: "request-events-api" } });
+        }
+    }
+    async handleInappEvent(bluxUser) {
+        try {
+            const { data } = await inappsDispatch(this.api, {
+                application_id: bluxUser.applicationId,
+            }, {
+                blux_user_id: bluxUser.id,
+                device_id: bluxUser.deviceId ?? "",
+                platform: this.sdkInfo.type,
+            }, this.generateApiHeader(bluxUser));
+            this.inappQueue$.next(data);
+        }
+        catch (error) {
+            Logger.error(error, { tags: { from: "request-inapps-api" } });
+        }
+    }
+    async displayInapp(inapp) {
+        return new Promise((resolve) => {
+            if (!inapp.shouldDisplay)
+                return resolve(true);
+            const hideTimestamp = LocalStorage.getInappHideTimestamp(inapp.inappId);
+            const isShouldSkip = hideTimestamp !== null && dayjs().isBefore(dayjs(hideTimestamp));
+            if (isShouldSkip)
+                return resolve(true);
+            const iframeElement = document.createElement("iframe");
+            const params = new URLSearchParams({
+                inapp_id: inapp.inappId,
+                application_id: this.bluxApplicationId,
+                stage: "prod",
+            });
+            iframeElement.src = `${inapp.baseUrl}?${params.toString()}`;
+            iframeElement.style.position = "fixed";
+            iframeElement.style.width = `${window.innerWidth}px`;
+            iframeElement.style.height = `${window.innerHeight}px`;
+            iframeElement.style.top = "0";
+            iframeElement.style.left = "0";
+            iframeElement.style.zIndex = "9999";
+            iframeElement.id = `blux-inapp-${inapp.inappId}`;
+            document.body.appendChild(iframeElement);
+            const handleViewportChange = () => {
+                const width = window.visualViewport?.width ?? window.innerWidth;
+                const height = window.visualViewport?.height ?? window.innerHeight;
+                const left = window.visualViewport?.offsetLeft ?? 0;
+                const top = window.visualViewport?.offsetTop ?? 0;
+                iframeElement.style.width = `${width}px`;
+                iframeElement.style.height = `${height}px`;
+                iframeElement.style.left = `${left}px`;
+                iframeElement.style.top = `${top}px`;
+            };
+            const handleMessage = (event) => {
+                const message = event.data;
+                if (message.action === "hide") {
+                    const { days_to_hide } = message.data;
+                    if (days_to_hide !== 0) {
+                        const expiresAt = dayjs().add(days_to_hide, "days").valueOf();
+                        LocalStorage.setInappHideTimestamp(inapp.inappId, expiresAt);
+                    }
+                }
+                else if (message.action === "link") {
+                    const bluxUser = this.bluxUser$.getValue();
+                    if (bluxUser) {
+                        createCrmEvent(this.api, {
+                            application_id: this.bluxApplicationId,
+                        }, {
+                            notification_id: inapp.notificationId,
+                            crm_event_type: "inapp_opened",
+                            captured_at: new Date().toISOString(),
+                        }, this.generateApiHeader(bluxUser));
+                    }
+                    if (message.data.is_blux_landing) {
+                        // TODO: @all 스키마상에는 개인화 랜딩이 존재하나, 콘솔에는 필드가 없음 -> 추후 이에 따른 핸들링이 필요함
+                    }
+                    else {
+                        window.open(message.data.url, "_blank");
+                    }
+                }
+                iframeElement.remove();
+                window.removeEventListener("message", handleMessage);
+                window.visualViewport?.removeEventListener("resize", handleViewportChange);
+                window.visualViewport?.removeEventListener("scroll", handleViewportChange);
+                resolve(inapp.inappId);
+            };
+            window.visualViewport?.addEventListener("resize", handleViewportChange);
+            window.visualViewport?.addEventListener("scroll", handleViewportChange);
+            window.addEventListener("message", handleMessage);
+        });
+    }
     async init() {
+        // React Native에서 처리하도록 요청을 보냈다면 웹에서는 API 호출하지 않음
+        if (this.postMessageToRN("initialize", {
+            bluxApplicationId: this.bluxApplicationId,
+            bluxAPIKey: this.bluxAPIKey,
+        })) {
+            return;
+        }
         const blux_user_id = new URLSearchParams(window.location.search).get("blux_user_id");
         const isBluxUserIdExistInSessionStorage = SessionStorage.getBluxUserId();
         if (!isBluxUserIdExistInSessionStorage)
             this.sendEvent(new VisitEvent({}));
-        Logger.debug(`Init with application id: ${this.applicationId}`);
+        Logger.debug(`Init with application id: ${this.bluxApplicationId}`);
         const deviceId = LocalStorage.getDeviceId();
         if (!deviceId) {
             Logger.debug("No saved Device ID, register a new one.");
@@ -129,7 +246,7 @@ export class BluxClient {
             }));
             this.impressedElements.push(entry.target);
         });
-        const { data } = await initialize(this.api, { application_id: this.applicationId }, {
+        const { data } = await initialize(this.api, { application_id: this.bluxApplicationId }, {
             isVisitHandlingInSdk: true,
             device_id: deviceId ?? undefined,
             country_code: navigator.language.split("-")[1],
@@ -142,14 +259,14 @@ export class BluxClient {
             timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
             blux_user_id: blux_user_id ?? undefined,
         }, this.generateApiHeader({
-            bluxApiKey: this.bluxApiKey,
+            bluxAPIKey: this.bluxAPIKey,
         }));
         if (data.device_id)
             LocalStorage.setDeviceId(data.device_id);
         this.bluxUser$.next({
             id: data.blux_user_id,
-            bluxApiKey: this.bluxApiKey,
-            applicationId: this.applicationId,
+            bluxAPIKey: this.bluxAPIKey,
+            applicationId: this.bluxApplicationId,
             deviceId: data.device_id,
         });
     }
@@ -164,7 +281,12 @@ export class BluxClient {
         })));
         return bluxUser;
     }
-    async signIn(userId) {
+    async signIn({ userId }) {
+        // React Native에서 처리하도록 요청을 보냈다면 웹에서는 API 호출하지 않음
+        if (this.postMessageToRN("signIn", { userId })) {
+            return;
+        }
+        // React Native WebView가 아닌 경우 웹에서 직접 처리
         try {
             const bluxUser = await this.getBluxUserWithTimeout();
             const { data: { blux_user_id: bluxIdInResponse }, } = await signIn(this.api, { application_id: bluxUser.applicationId, blux_user_id: bluxUser.id }, { user_id: userId, device_id: bluxUser.deviceId }, this.generateApiHeader(bluxUser));
@@ -181,6 +303,11 @@ export class BluxClient {
         }
     }
     async signOut() {
+        // React Native에서 처리하도록 요청을 보냈다면 웹에서는 API 호출하지 않음
+        if (this.postMessageToRN("signOut")) {
+            return;
+        }
+        // React Native WebView가 아닌 경우 웹에서 직접 처리
         try {
             const bluxUser = await this.getBluxUserWithTimeout();
             const { data: { blux_user_id: bluxIdInResponse }, } = await signOut(this.api, { application_id: bluxUser.applicationId, blux_user_id: bluxUser.id }, { device_id: bluxUser.deviceId }, this.generateApiHeader(bluxUser));
@@ -194,7 +321,12 @@ export class BluxClient {
             Logger.error(error, { tags: { from: "signOut" } });
         }
     }
-    async setUserProperties(userProperties) {
+    async setUserProperties({ userProperties, }) {
+        // React Native에서 처리하도록 요청을 보냈다면 웹에서는 API 호출하지 않음
+        if (this.postMessageToRN("setUserProperties", { userProperties })) {
+            return;
+        }
+        // React Native WebView가 아닌 경우 웹에서 직접 처리
         try {
             const bluxUser = await this.getBluxUserWithTimeout();
             await updateUserProperties(this.api, { application_id: bluxUser.applicationId, blux_user_id: bluxUser.id }, { properties: userProperties }, this.generateApiHeader(bluxUser));
@@ -203,7 +335,12 @@ export class BluxClient {
             Logger.error(error, { tags: { from: "setUserProperties" } });
         }
     }
-    async setCustomUserProperties(customUserProperties) {
+    async setCustomUserProperties({ customUserProperties, }) {
+        // React Native에서 처리하도록 요청을 보냈다면 웹에서는 API 호출하지 않음
+        if (this.postMessageToRN("setCustomUserProperties", { customUserProperties })) {
+            return;
+        }
+        // React Native WebView가 아닌 경우 웹에서 직접 처리
         try {
             const bluxUser = await this.getBluxUserWithTimeout();
             await updateCustomUserProperties(this.api, { application_id: bluxUser.applicationId, blux_user_id: bluxUser.id }, { properties: customUserProperties }, this.generateApiHeader(bluxUser));
@@ -214,6 +351,11 @@ export class BluxClient {
     }
     sendEvent(event) {
         const requests = (Array.isArray(event) ? event : [event]).map((event) => event.request);
+        // React Native에서 처리하도록 요청을 보냈다면 웹에서는 API 호출하지 않음
+        if (this.postMessageToRN("sendEvent", { requests })) {
+            return;
+        }
+        // React Native WebView가 아닌 경우 웹에서 직접 처리
         this.requestQueue$.next([
             ...this.requestQueue$.value,
             ...requests.filter((request) => !this.requestQueue$.value.map((r) => r.id).includes(request.id)),
@@ -276,7 +418,7 @@ export class BluxClient {
             }
             if (!this.hitElements.includes(targetItemElement)) {
                 this.sendEvent(new AddClickEvent({
-                    item_id: itemId,
+                    itemId,
                     tracking: {
                         id: trackingId,
                         type: "hit",