@streamlayer/feature-gamification 1.6.3 → 1.8.0

package/lib/advertisement/index.d.ts

@@ -7,6 +7,8 @@ export type Advertisement = {
     loading?: boolean;
     hiding?: boolean;
     isViewed?: boolean;
+    isOpened?: boolean;
+    hasNotification?: boolean;
     close?: () => void;
     error?: string;
     ctx?: Record<string, unknown>;
@@ -24,8 +26,11 @@ export type Advertisement = {
  * - we subscribe to $feedSubscription, and show advertisement on activate
  */
 export declare const advertisement: ($slStreamId: GamificationBackground["slStreamId"], $feedSubscription: GamificationBackground["feedSubscription"], instance: StreamLayerContext) => {
+    connect: () => void;
     hide: (notificationId?: string) => void;
     show: (advertisementId: string, data?: Awaited<ReturnType<typeof getPromotionDetail>>) => void;
+    open: () => void;
+    markAsViewed: () => void;
     $store: import("nanostores").MapStore<Advertisement>;
 };
 export {};

package/lib/advertisement/index.js

@@ -18,11 +18,33 @@ import { parsePromotion } from './utils';
  * - we subscribe to $feedSubscription, and show advertisement on activate
  */
 export const advertisement = ($slStreamId, $feedSubscription, instance) => {
+    let connected = false;
     const transport = instance.transport;
     const logger = createLogger('advertisement');
     const storage = new AdvertisementStorage();
     const $store = createMapStore({});
     const $activeAdvertisement = $activePromotionId($slStreamId, transport);
+    const open = () => {
+        $store.setKey('hasNotification', false);
+    };
+    const markAsViewed = () => {
+        const payload = $store.get();
+        const id = payload.data?.question.id;
+        const type = payload.data?.promotion?.type;
+        const isOpened = $store.get()?.isOpened;
+        if (id && !isOpened) {
+            logger.debug({ id }, 'markAsViewed: %o');
+            storage.setShowed(id);
+            $store.setKey('isOpened', true);
+            eventBus.emit('advertisement', {
+                action: 'opened',
+                payload: {
+                    id,
+                    type,
+                },
+            });
+        }
+    };
     /**
      * Show advertisement by id
      */
@@ -34,6 +56,7 @@ export const advertisement = ($slStreamId, $feedSubscription, instance) => {
                 loading: false,
                 error: undefined,
                 data: response,
+                hasNotification: response?.notification?.enabled === NotificationEnabled.NOTIFICATION_ENABLED,
                 close: () => hide(response?.question.id),
                 isViewed: response && !!storage.isViewed(response.question.id),
             }))
@@ -48,78 +71,73 @@ export const advertisement = ($slStreamId, $feedSubscription, instance) => {
                 loading: false,
                 error: undefined,
                 data,
+                hasNotification: data?.notification?.enabled === NotificationEnabled.NOTIFICATION_ENABLED,
                 close: () => hide(data.question.id),
                 isViewed: !!storage.isViewed(data.question.id),
             });
         }
     };
-    $activeAdvertisement.subscribe((active, prevActive) => {
-        if (active.data) {
+    $store.subscribe((active, prevActive) => {
+        // skip update on open
+        if (active.data && !active.isOpened) {
             eventBus.emit('advertisement', {
                 action: 'received',
                 payload: {
-                    advertisementId: active.data.question.id,
-                    advertisementType: active.data?.promotion?.type,
+                    id: active.data.question.id,
+                    type: active.data?.promotion?.type,
+                    hasNotification: !!active.hasNotification,
+                    isViewed: !!storage.isViewed(active.data.question.id),
                 },
+                skipAnalytics: active.data.question.id === prevActive?.data?.question.id,
             });
-            if (!prevActive?.data || active.data.id !== prevActive.data.id) {
-                show(active.data.question.id, active.data);
-            }
         }
-    });
-    $store.subscribe((active, prevActive) => {
-        if (active.data) {
-            instance.sdk.onAdvertisementActivate({
-                stage: 'activate',
-                id: active.data.question.id,
-                hasNotification: active.data.notification?.enabled === NotificationEnabled.NOTIFICATION_ENABLED,
-                isViewed: !!storage.isViewed(active.data.question.id),
-            });
+        if (!active?.data && prevActive?.data) {
             eventBus.emit('advertisement', {
-                action: 'opened',
+                action: 'closed',
                 payload: {
-                    advertisementId: active.data.question.id,
-                    advertisementType: active.data?.promotion?.type,
+                    id: prevActive.data.question.id,
+                    type: prevActive.data.promotion?.type,
+                    hasNotification: !!prevActive.hasNotification,
+                    isViewed: !!storage.isViewed(prevActive.data.question.id),
                 },
             });
         }
-        if (!active?.data && prevActive?.data) {
-            instance.sdk.onAdvertisementActivate({
-                stage: 'deactivate',
-                id: prevActive.data.question.id,
-                isViewed: !!storage.isViewed(prevActive.data.question.id),
-            });
-        }
     });
-    const markAsViewed = (notificationId) => {
-        logger.debug({ notificationId }, 'markAsViewed: %o');
-        storage.setShowed(notificationId);
-    };
     const hide = (notificationId) => {
         if (!notificationId || $store.get()?.data?.question.id === notificationId) {
             $store.set({});
         }
-        if (notificationId) {
-            markAsViewed(notificationId);
-        }
     };
-    $feedSubscription.addListener('promotion', (response) => {
-        const promotion = parsePromotion(response);
-        if (!promotion) {
-            return;
-        }
-        if (promotion.question.status === QuestionStatus.RESOLVED) {
-            hide(promotion.question.id);
-            logger.debug({ promotion }, 'resolved: %o');
+    const connect = () => {
+        if (connected) {
             return;
         }
-        if (promotion.question.status === QuestionStatus.ACTIVE) {
-            logger.debug({ promotion }, 'active: %o');
-            show(promotion.question.id, promotion);
+        connected = true;
+        $activeAdvertisement.subscribe((active, prevActive) => {
+            if (active.data) {
+                if (!prevActive?.data || active.data.id !== prevActive.data.id) {
+                    show(active.data.question.id, active.data);
+                }
+            }
+        });
+        $feedSubscription.addListener('promotion', (response) => {
+            const promotion = parsePromotion(response);
+            if (!promotion) {
+                return;
+            }
+            if (promotion.question.status === QuestionStatus.RESOLVED) {
+                hide(promotion.question.id);
+                logger.debug({ promotion }, 'resolved: %o');
+                return;
+            }
+            if (promotion.question.status === QuestionStatus.ACTIVE) {
+                logger.debug({ promotion }, 'active: %o');
+                show(promotion.question.id, promotion);
+                return;
+            }
+            logger.debug({ promotion }, 'skip: %o');
             return;
-        }
-        logger.debug({ promotion }, 'skip: %o');
-        return;
-    });
-    return { hide, show, $store };
+        });
+    };
+    return { connect, hide, show, open, markAsViewed, $store };
 };

package/lib/background.js

@@ -90,7 +90,9 @@ export class GamificationBackground {
                 }
                 return;
             }
-            this.activeQuestionId.mutate(response.data?.attributes);
+            window.requestAnimationFrame(() => {
+                this.activeQuestionId.mutate(response.data?.attributes);
+            });
         }));
         // refresh moderation if question empty, it`s mean that moderation was changed
         this.cancels.add(this.feedSubscription.addListener('moderation update', (response) => {
@@ -103,20 +105,26 @@ export class GamificationBackground {
             });
         }));
         this.cancels.add(this.activeQuestionId.subscribe((item, prevItem) => {
-            if (item.data?.feedItem) {
-                instance.sdk.onQuestionActivate({
+            if (item.data?.feedItem && item.data?.feedItem?.id !== prevItem?.data?.feedItem?.id) {
+                instance.onQuestionActivate({
                     stage: 'activate',
                     id: item.data.feedItem.id,
-                    isViewed: !!this.notifications.isViewed(item.data.feedItem.id),
+                    isViewed: !!this.notifications.isViewed(this.getCurrentSessionId({
+                        prefix: 'notification',
+                        entity: item.data.feedItem.id,
+                    })),
                     hasNotification: true,
                     type: item.data.feedItem.type,
                 });
             }
             if (!item.data?.feedItem && prevItem?.data?.feedItem) {
-                instance.sdk.onQuestionActivate({
+                instance.onQuestionActivate({
                     stage: 'deactivate',
                     id: prevItem.data.feedItem.id,
-                    isViewed: !!this.notifications.isViewed(prevItem.data.feedItem.id),
+                    isViewed: !!this.notifications.isViewed(this.getCurrentSessionId({
+                        prefix: 'notification',
+                        entity: prevItem.data.feedItem.id,
+                    })),
                     hasNotification: true,
                     type: prevItem.data.feedItem.type,
                 });

package/lib/gamification.d.ts

@@ -43,12 +43,13 @@ export declare class Gamification extends AbstractFeature<'games', PlainMessage<
     currentUserId: GamificationBackground['userId'];
     /** pinned leaderboard id */
     openedUser: WritableAtom<LeaderboardItem | undefined>;
-    closeFeature: () => void;
+    closeFeature: (destroy?: boolean) => void;
     openFeature: () => void;
     feedSubscription: GamificationBackground['feedSubscription'];
     activeQuestionId: GamificationBackground['activeQuestionId'];
     openedQuestionId: GamificationBackground['openedQuestionId'];
     advertisement: GamificationBackground['advertisement'];
+    onboardingProcessed: WritableAtom<boolean>;
     private notifications;
     private transport;
     /** gamification background class, handle subscriptions and notifications for closed overlay */
@@ -57,6 +58,7 @@ export declare class Gamification extends AbstractFeature<'games', PlainMessage<
     private storage;
     private submitAnswerTimeout;
     private cancels;
+    private onQuestionActivate;
     constructor(config: FeatureProps, source: FeatureSource, instance: StreamLayerContext);
     get isInteractiveAllowed(): boolean;
     checkInteractiveFlag: () => void;

package/lib/gamification.js

@@ -3,7 +3,6 @@ import { AbstractFeature, ApiStore, SingleStore, createSingleStore, eventBus, }
 import { QuestionStatus, QuestionType, FeatureType, SilenceSetting, PickHistoryStatus, } from '@streamlayer/sdk-web-types';
 import { NotificationType } from '@streamlayer/sdk-web-notifications';
 import '@streamlayer/sdk-web-core/store';
-import { onMount } from 'nanostores';
 import * as queries from './queries';
 import * as actions from './queries/actions';
 import { GamificationStorage } from './storage';
@@ -12,7 +11,7 @@ import { deepLink } from './deepLink';
 import { OnboardingStatus, onboarding } from './onboarding';
 import { GamificationBackground, InteractiveAllowed } from './background';
 import { ERROR } from './constants';
-import { $questionByUser } from './queries';
+import { $questionByUser, questionByUser } from './queries';
 import { summary } from './userSummary';
 import { friendSummary } from './friendSummary';
 const InteractiveQuestionTypes = new Set([QuestionType.POLL, QuestionType.PREDICTION, QuestionType.TRIVIA]);
@@ -51,6 +50,7 @@ export class Gamification extends AbstractFeature {
     activeQuestionId;
     openedQuestionId;
     advertisement;
+    onboardingProcessed;
     notifications;
     transport;
     /** gamification background class, handle subscriptions and notifications for closed overlay */
@@ -59,10 +59,12 @@ export class Gamification extends AbstractFeature {
     storage;
     submitAnswerTimeout;
     cancels = new Set();
+    onQuestionActivate;
     constructor(config, source, instance) {
         super(config, source);
         this.background = new GamificationBackground(instance);
         this.advertisement = this.background.advertisement;
+        this.onQuestionActivate = instance.onQuestionActivate;
         this.feedSubscription = this.background.feedSubscription;
         this.activeQuestionId = this.background.activeQuestionId;
         this.openedQuestionId = this.background.openedQuestionId;
@@ -71,11 +73,12 @@ export class Gamification extends AbstractFeature {
         this.friends = new ApiStore(queries.$friends(this.background.userId, instance.transport), 'gamification:friends');
         this.currentUserId = this.background.userId;
         this.openedUser = createSingleStore(undefined);
+        this.onboardingProcessed = createSingleStore(false);
         this.leaderboardId = new SingleStore(createSingleStore(this.settings.getValue('pinnedLeaderboardId')), 'pinnedLeaderboardId').getStore();
         this.onboardingStatus = onboarding(this, this.background, instance.transport, instance.notifications);
         this.notifications = instance.notifications;
         this.transport = instance.transport;
-        this.closeFeature = () => instance.sdk.closeFeature(true);
+        this.closeFeature = (destroy = true) => instance.sdk.closeFeature(destroy);
         this.openFeature = () => instance.sdk.openFeature(FeatureType.GAMES);
         this.openedQuestion = this.background.openedQuestion;
         this.deepLink = deepLink(this.transport, this.background.slStreamId, instance.stores.providerStreamId.getStore(), this.background.userId);
@@ -94,12 +97,12 @@ export class Gamification extends AbstractFeature {
         this.cancels.add(this.onboardingStatus.$store.listen(this.checkInteractiveFlag));
         this.cancels.add(this.background.moderation.getStore().listen(this.checkInteractiveFlag));
         this.cancels.add(this.settings.subscribe(this.checkInteractiveFlag));
-        onMount(this.background.activeQuestionId, () => {
-            /**
-             * listen for active question and show in-app notification
-             */
-            this.background.activeQuestionId.listen(this.showInApp);
-        });
+        this.cancels.add(this.onboardingStatus.$store.listen((status, prevStatus) => {
+            if (prevStatus === undefined || status !== OnboardingStatus.Unset) {
+                this.background.activeQuestionId.invalidate();
+            }
+        }));
+        this.background.activeQuestionId.listen(this.showInApp);
         instance.sdk.onMount({ name: 'gamification', clear: true }, () => {
             return () => {
                 for (const cancel of this.cancels) {
@@ -121,6 +124,11 @@ export class Gamification extends AbstractFeature {
         this.background.interactiveAllowed.set(allowed ? InteractiveAllowed.ALLOWED : InteractiveAllowed.DISALLOWED);
     };
     connect = () => {
+        this.onboardingProcessed.subscribe((status) => {
+            if (status) {
+                this.advertisement.connect();
+            }
+        });
         this.cancels.add(this.background.feedSubscription.addListener('feed-subscription-prediction-close', async (response) => {
             if (!this.isInteractiveAllowed) {
                 return;
@@ -145,7 +153,11 @@ export class Gamification extends AbstractFeature {
                 // order of operations is important here
                 const cancel = data.subscribe(() => { });
                 await data.get().promise;
-                const extendedQuestion = data.get().data;
+                // if question is not in the feed list, get extended question data from the server
+                let extendedQuestion = data.get().data;
+                if (!extendedQuestion) {
+                    extendedQuestion = await questionByUser(id, this.transport);
+                }
                 cancel();
                 window.requestAnimationFrame(() => {
                     data.invalidate();
@@ -404,6 +416,16 @@ export class Gamification extends AbstractFeature {
         return !!this.notifications.isViewed(questionId);
     };
     closeQuestion = (questionId) => {
+        if (questionId) {
+            this.onQuestionActivate({
+                stage: 'deactivate',
+                id: questionId,
+                isViewed: !!this.notifications.isViewed(this.background.getCurrentSessionId({
+                    prefix: 'notification',
+                    entity: questionId,
+                })),
+            });
+        }
         return this.background.closeQuestion(questionId);
     };
     openUser = async (friendId) => {

package/lib/onboarding.js

@@ -28,6 +28,9 @@ const showOnboardingInApp = (service, background, notifications, storage) => {
             type: NotificationType.ONBOARDING,
             id: notificationId,
             action: service.openFeature,
+            close: () => {
+                service.onboardingProcessed.set(true);
+            },
             persistent: true,
             autoHideDuration: 1000000,
             data: {
@@ -112,6 +115,9 @@ export const onboarding = (service, background, transport, notifications) => {
                 onboardingShowed = true;
             }
         }
+        else {
+            service.onboardingProcessed.set(true);
+        }
         if (onboardingStatus === OnboardingStatus.Completed) {
             background.activeQuestionId.invalidate(); // verified, it's necessary
         }

package/lib/queries/index.d.ts

@@ -349,6 +349,7 @@ export declare const questionSubscription: (questionId: string, transport: Trans
 }, QuestionSubscriptionRequest, QuestionSubscriptionResponse, "subscription" | "votingSubscription" | "questionSubscription" | "feedSubscription", ((request: import("@bufbuild/protobuf").PartialMessage<SubscriptionRequest>, options?: import("@connectrpc/connect").CallOptions) => AsyncIterable<SubscriptionResponse>) | ((request: import("@bufbuild/protobuf").PartialMessage<VotingSubscriptionRequest>, options?: import("@connectrpc/connect").CallOptions) => AsyncIterable<VotingSubscriptionResponse>) | ((request: import("@bufbuild/protobuf").PartialMessage<QuestionSubscriptionRequest>, options?: import("@connectrpc/connect").CallOptions) => AsyncIterable<QuestionSubscriptionResponse>) | ((request: import("@bufbuild/protobuf").PartialMessage<import("@streamlayer/sl-eslib/interactive/feed/interactive.feed_pb").FeedSubscriptionRequest>, options?: import("@connectrpc/connect").CallOptions) => AsyncIterable<import("@streamlayer/sl-eslib/interactive/feed/interactive.feed_pb").FeedSubscriptionResponse>)>;
 export declare const getQuestionByUser: (questionId: string, transport: Transport) => Promise<import("@streamlayer/sl-eslib/interactive/interactive.common_pb").ExtendedQuestion | undefined>;
 export declare const getQuestionDetail: (questionId: string, transport: Transport) => Promise<import("@streamlayer/sl-eslib/interactive/interactive.common_pb").Question | undefined>;
+export declare const questionByUser: ($questionId: string, transport: Transport) => Promise<import("@bufbuild/protobuf").PlainMessage<import("@streamlayer/sl-eslib/interactive/interactive.common_pb").ExtendedQuestion>>;
 export declare const $questionByUser: ($questionId: ReadableAtom<string | undefined> | string, transport: Transport) => import("@nanostores/query").FetcherStore<import("@bufbuild/protobuf").PlainMessage<import("@streamlayer/sl-eslib/interactive/interactive.common_pb").ExtendedQuestion>, any>;
 export declare const getPromotionDetail: (promoId: string, transport: Transport) => Promise<{
     id: string;

package/lib/queries/index.js

@@ -14,6 +14,9 @@ export const $activeQuestion = (slStreamId, transport) => {
                     eventId: id,
                 },
             });
+            if (res.data?.attributes?.question?.type === QuestionType.PROMOTION) {
+                return undefined;
+            }
             return res.data?.attributes;
         },
         dedupeTime: 1000 * 60 * 10, // 10 minutes
@@ -60,6 +63,13 @@ export const getQuestionDetail = async (questionId, transport) => {
     });
     return res.data?.attributes;
 };
+export const questionByUser = async ($questionId, transport) => {
+    const { client } = transport.createPromiseClient(Feed, { method: 'questionByUser', params: [$questionId] });
+    const res = await client.questionByUser({
+        questionId: $questionId,
+    });
+    return res.data?.attributes?.question;
+};
 export const $questionByUser = ($questionId, transport) => {
     const { client, queryKey } = transport.createPromiseClient(Feed, { method: 'questionByUser', params: [$questionId] });
     return transport.nanoquery.createFetcherStore(queryKey, {

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "@streamlayer/feature-gamification",
-  "version": "1.6.3",
+  "version": "1.8.0",
   "peerDependencies": {
     "@bufbuild/protobuf": "^1.10.0",
     "@fastify/deepmerge": "^2.0.0",
-    "@streamlayer/sl-eslib": "^5.123.1",
+    "@streamlayer/sl-eslib": "^5.130.0",
     "nanostores": "^0.10.3",
-    "@streamlayer/sdk-web-api": "^1.5.3",
-    "@streamlayer/sdk-web-core": "^1.4.3",
-    "@streamlayer/sdk-web-interfaces": "^1.1.15",
-    "@streamlayer/sdk-web-logger": "^1.0.20",
-    "@streamlayer/sdk-web-notifications": "^1.1.15",
-    "@streamlayer/sdk-web-storage": "^1.0.20",
-    "@streamlayer/sdk-web-types": "^1.6.3"
+    "@streamlayer/sdk-web-api": "^1.6.1",
+    "@streamlayer/sdk-web-core": "^1.6.0",
+    "@streamlayer/sdk-web-interfaces": "^1.2.1",
+    "@streamlayer/sdk-web-logger": "^1.0.22",
+    "@streamlayer/sdk-web-storage": "^1.0.22",
+    "@streamlayer/sdk-web-notifications": "^1.2.1",
+    "@streamlayer/sdk-web-types": "^1.7.1"
   },
   "devDependencies": {
     "tslib": "^2.7.0"