@streamlayer/feature-gamification 1.2.2 → 1.3.0

package/lib/advertisement/index.d.ts

@@ -1,7 +1,8 @@
 import { createMapStore } from '@streamlayer/sdk-web-interfaces';
 import { PromotionOptions } from '@streamlayer/sdk-web-types';
-import type { Transport } from '@streamlayer/sdk-web-api';
+import { type Transport } from '@streamlayer/sdk-web-api';
 import { type GamificationBackground } from '../background';
+import { getPromotionDetail } from '../queries';
 type AdvertisementData = {
     loading?: boolean;
     error?: unknown;
@@ -29,10 +30,10 @@ export type Advertisement = {
  * - we subscribe to $feedList, and show last advertisement from list
  * - we subscribe to $feedSubscription, and show advertisement on activate
  */
-export declare const advertisement: ($feedList: GamificationBackground["feedList"], $feedSubscription: GamificationBackground["feedSubscription"], transport: Transport) => {
+export declare const advertisement: ($slStreamId: GamificationBackground["slStreamId"], $feedSubscription: GamificationBackground["feedSubscription"], transport: Transport) => {
     hide: (notificationId: string) => void;
-    show: (advertisementId: string, skipCheck?: boolean) => void;
+    show: (advertisementId: string, data?: Awaited<ReturnType<typeof getPromotionDetail>>) => void;
     $list: import("nanostores").WritableAtom<Map<string, Advertisement> | undefined>;
-    getActiveAdvertisement: () => Advertisement | null;
+    getActiveAdvertisement: (persistent?: boolean) => Advertisement | null;
 };
 export {};

package/lib/advertisement/index.js

@@ -1,8 +1,8 @@
-import { createComputedStore, createMapStore, eventBus } from '@streamlayer/sdk-web-interfaces';
-import { QuestionStatus, QuestionType } from '@streamlayer/sdk-web-types';
+import { ApiStore, createMapStore, eventBus } from '@streamlayer/sdk-web-interfaces';
+import { QuestionStatus } from '@streamlayer/sdk-web-types';
 import { createLogger } from '@streamlayer/sdk-web-logger';
 import { onMount } from 'nanostores';
-import { getPromotionDetail } from '../queries';
+import { $promotionList, getPromotionDetail } from '../queries';
 import { AdvertisementStorage } from './storage';
 import { AdvertisementsQueue } from './queue';
 /**
@@ -17,20 +17,22 @@ import { AdvertisementsQueue } from './queue';
  * - we subscribe to $feedList, and show last advertisement from list
  * - we subscribe to $feedSubscription, and show advertisement on activate
  */
-export const advertisement = ($feedList, $feedSubscription, transport) => {
+export const advertisement = ($slStreamId, $feedSubscription, transport) => {
     const logger = createLogger('advertisement_queue');
     const queue = new AdvertisementsQueue({ concurrency: 1, animationDelay: 1000 });
     const storage = new AdvertisementStorage();
-    const $advertisementList = createComputedStore($feedList.getStore(), (feedList) => {
-        return feedList.data?.filter((item) => item.type === 'promotion');
-    });
+    const $advertisementList = new ApiStore($promotionList($slStreamId, transport), 'gamification:promotionList');
     /**
      * Show advertisement by id, if it was not showed before.
      */
-    const show = (advertisementId, skipCheck) => {
-        if (storage.isShowed(advertisementId) && !skipCheck) {
-            return;
-        }
+    const show = (advertisementId, data) => {
+        eventBus.emit('advertisement', {
+            action: 'received',
+            payload: {
+                advertisementId,
+                advertisementType: data?.type,
+            },
+        });
         queue.addToQueue({
             id: advertisementId,
             autoHideDuration: Infinity,
@@ -38,7 +40,7 @@ export const advertisement = ($feedList, $feedSubscription, transport) => {
             promise: async function () {
                 this.data.setKey('loading', true);
                 try {
-                    const response = await getPromotionDetail(advertisementId, transport);
+                    const response = data || (await getPromotionDetail(advertisementId, transport));
                     if (!response) {
                         this.data.setKey('error', new Error('No promotion found'));
                     }
@@ -63,48 +65,57 @@ export const advertisement = ($feedList, $feedSubscription, transport) => {
         queue.closeAdvertisement(notificationId);
         markAsViewed(notificationId);
     };
-    const getActiveAdvertisement = () => {
+    const getActiveAdvertisement = (persistent) => {
         const advertisements = queue.advertisementList.get();
         if (!advertisements?.size) {
             return null;
         }
         const advertisement = advertisements.values().next().value;
         const advertisementData = advertisement.data.get();
+        if (!persistent && storage.isShowed(advertisement.id)) {
+            return getActiveAdvertisement(persistent);
+        }
         if (!advertisementData.data && !advertisementData.error && !advertisementData.loading) {
             void advertisement.promise();
-            eventBus.emit('poll', {
-                action: 'opened',
-                payload: {
-                    questionId: advertisement.id,
-                    questionType: QuestionType.PROMOTION,
-                    questionOpenedFrom: 'notification', // ToDo: add openedFrom to notification
-                },
-            });
-            markAsViewed(advertisement.id);
         }
+        eventBus.emit('advertisement', {
+            action: 'opened',
+            payload: {
+                advertisementId: advertisement.id,
+                advertisementType: advertisementData.data?.type,
+            },
+        });
+        markAsViewed(advertisement.id);
         return advertisement;
     };
     onMount(queue.advertisementList, () => {
         $advertisementList.subscribe((list) => {
-            if (list) {
-                const last = list[list.length - 1];
-                show(last.id);
+            if (list.data) {
+                const last = list.data[list.data.length - 1];
+                if (last) {
+                    show(last.id);
+                }
             }
         });
         $feedSubscription.addListener('promotion', (response) => {
-            const feedItem = response.data?.attributes?.feedItem;
-            if (feedItem?.attributes?.attributes.case !== 'promotion') {
+            const feedItem = response.data?.attributes?.feedItem?.attributes?.attributes?.case === 'promotion'
+                ? response.data.attributes.feedItem.attributes
+                : undefined;
+            const promotionItem = response.data?.attributes?.question?.options?.options.case === 'promotion'
+                ? response.data.attributes.question.options.options.value
+                : undefined;
+            if (feedItem === undefined || promotionItem === undefined) {
                 logger.debug('not promotion');
                 return;
             }
-            if (feedItem.attributes.status === QuestionStatus.RESOLVED) {
+            if (feedItem.status === QuestionStatus.RESOLVED) {
                 hide(feedItem.id);
                 logger.debug({ feedItem }, 'resolved: %o');
                 return;
             }
-            if (feedItem.attributes.status === QuestionStatus.ACTIVE) {
+            if (feedItem.status === QuestionStatus.ACTIVE) {
                 logger.debug({ feedItem }, 'active: %o');
-                show(feedItem.id);
+                show(feedItem.id, promotionItem);
                 return;
             }
             logger.debug({ feedItem }, 'skip: %o');

package/lib/background.js

@@ -1,6 +1,6 @@
 import { ApiStore, SingleStore, createSingleStore } from '@streamlayer/sdk-web-interfaces';
 import { createLogger } from '@streamlayer/sdk-web-logger';
-import { QuestionStatus } from '@streamlayer/sdk-web-types';
+import { QuestionStatus, QuestionType } from '@streamlayer/sdk-web-types';
 import '@streamlayer/sdk-web-core/store';
 import * as queries from './queries';
 import { detail } from './detail';
@@ -81,7 +81,7 @@ export class GamificationBackground {
         this.cancels.add(this.feedSubscription.addListener('feed-subscription-active-question', (response) => {
             const activeQuestionId = this.activeQuestionId.get().data?.question?.id;
             const question = response.data?.attributes?.question;
-            if (!question) {
+            if (!question || question.type === QuestionType.PROMOTION) {
                 return;
             }
             // skip update question, avoid race condition
@@ -120,7 +120,7 @@ export class GamificationBackground {
                 }
             };
         });
-        this.advertisement = advertisement(this.feedList, this.feedSubscription, instance.transport);
+        this.advertisement = advertisement(this.slStreamId, this.feedSubscription, instance.transport);
     }
     /**
      * Get id for notifications and link with current session

package/lib/gamification.d.ts

@@ -66,6 +66,7 @@ export declare class Gamification extends AbstractFeature<'games', PlainMessage<
     openQuestion: (questionId?: string, question?: FeedItem & {
         openedFrom?: "list" | "notification";
     }) => void | (() => void);
+    isOpenedQuestion: (questionId: string) => string | undefined;
     closeQuestion: (questionId?: string) => void;
     openUser: (friendId: string) => Promise<void>;
     closeUser: () => void;

package/lib/gamification.js

@@ -3,6 +3,7 @@ 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';
@@ -87,16 +88,18 @@ export class Gamification extends AbstractFeature {
                 this.leaderboardList.invalidate(); // verified, it's necessary
             }
         }));
-        /**
-         * listen for active question and show in-app notification
-         */
-        this.cancels.add(this.background.activeQuestionId.listen(this.showInApp));
         /**
          * listen for onboarding status, moderation onboarding changes and opt-in settings
          */
         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);
+        });
         instance.sdk.onMount({ name: 'gamification', clear: true }, () => {
             return () => {
                 for (const cancel of this.cancels) {
@@ -279,7 +282,6 @@ export class Gamification extends AbstractFeature {
             }
             if (questionIndex === -1) {
                 feedList.unshift(feedItem);
-                console.log('feedItem', feedItem);
                 eventBus.emit('poll', {
                     action: 'received',
                     payload: {
@@ -395,6 +397,9 @@ export class Gamification extends AbstractFeature {
         });
         return this.background.openQuestion(questionId, question);
     };
+    isOpenedQuestion = (questionId) => {
+        return this.notifications.isViewed(questionId);
+    };
     closeQuestion = (questionId) => {
         return this.background.closeQuestion(questionId);
     };

package/lib/queries/friends.js

@@ -9,8 +9,13 @@ export const $friends = ($userId, transport) => {
             if (!userId) {
                 return [];
             }
-            const res = await client.getFriends({});
-            return res.data;
+            try {
+                const res = await client.getFriends({});
+                return res.data;
+            }
+            catch (_err) {
+                return [];
+            }
         },
     });
 };

package/lib/queries/index.d.ts

@@ -1,4 +1,5 @@
 import type { Transport } from '@streamlayer/sdk-web-api';
+import { QuestionStatus, QuestionType } from '@streamlayer/sdk-web-types';
 import { ReadableAtom } from 'nanostores';
 import type { SubscriptionRequest, SubscriptionResponse, VotingSubscriptionRequest, VotingSubscriptionResponse, QuestionSubscriptionRequest, QuestionSubscriptionResponse } from '@streamlayer/sl-eslib/interactive/feed/interactive.feed_pb';
 import { InteractiveAllowed } from '../background';
@@ -333,6 +334,13 @@ export declare const $questionByUser: ($questionId: ReadableAtom<string | undefi
 export declare const getPromotionDetail: (promoId: string, transport: Transport) => Promise<import("@streamlayer/sl-eslib/interactive/interactive.common_pb").QuestionOptions_PromotionOptions | undefined>;
 export declare const $pickHistory: (slStreamId: ReadableAtom<string | undefined>, transport: Transport) => import("@nanostores/query").FetcherStore<(import("@streamlayer/sl-eslib/interactive/feed/interactive.feed_pb").PickHistory | undefined)[], any>;
 export declare const $feedList: ($slStreamId: ReadableAtom<string | undefined>, $interactiveAllowed: ReadableAtom<InteractiveAllowed>, transport: Transport) => import("@nanostores/query").FetcherStore<import("@streamlayer/sl-eslib/interactive/feed/interactive.feed_pb").FeedItem[], any>;
+export declare const $promotionList: ($slStreamId: ReadableAtom<string | undefined>, transport: Transport) => import("@nanostores/query").FetcherStore<({
+    attributes: import("@streamlayer/sl-eslib/interactive/feed/interactive.feed_pb").PromotionHistory;
+    id: string;
+    type: QuestionType;
+    status: QuestionStatus;
+    created: string;
+} | undefined)[], any>;
 export { $userSummary, $leaderboardList } from './leaderboard';
 export { $friends } from './friends';
 export { $moderation } from './moderation';

package/lib/queries/index.js

@@ -21,7 +21,6 @@ export const $activeQuestion = (slStreamId, transport) => {
     });
 };
 export const feedSubscription = ($slStreamId, transport) => {
-    console.log('feedSubscription', $slStreamId);
     const { client } = transport.createStreamClient(Feed);
     const params = atom({ eventId: $slStreamId.get() || '', feedId: '' });
     $slStreamId.subscribe((eventId = '') => {
@@ -118,6 +117,39 @@ export const $feedList = ($slStreamId, $interactiveAllowed, transport) => {
         refetchInterval: 0,
     });
 };
+export const $promotionList = ($slStreamId, transport) => {
+    const { client, queryKey } = transport.createPromiseClient(Feed, {
+        method: 'list',
+        params: [$slStreamId],
+    });
+    return transport.nanoquery.createFetcherStore(queryKey, {
+        fetcher: async (_, __, slStreamId) => {
+            if (!slStreamId) {
+                return [];
+            }
+            const res = await client.list({
+                eventId: slStreamId,
+                filter: {
+                    types: [QuestionType.PROMOTION],
+                    statuses: [QuestionStatus.ACTIVE],
+                },
+            });
+            return res.data
+                .map(({ attributes }) => {
+                if (!attributes || attributes.attributes.case !== 'promotion') {
+                    return undefined;
+                }
+                return {
+                    ...attributes,
+                    attributes: attributes.attributes.value,
+                };
+            })
+                .filter(Boolean);
+        },
+        dedupeTime: 0,
+        refetchInterval: 0,
+    });
+};
 export { $userSummary, $leaderboardList } from './leaderboard';
 export { $friends } from './friends';
 export { $moderation } from './moderation';

package/package.json

@@ -1,21 +1,21 @@
 {
   "name": "@streamlayer/feature-gamification",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "peerDependencies": {
     "@bufbuild/protobuf": "^1.10.0",
     "@fastify/deepmerge": "^2.0.0",
-    "@streamlayer/sl-eslib": "^5.104.1",
+    "@streamlayer/sl-eslib": "^5.117.0",
     "nanostores": "^0.10.3",
-    "@streamlayer/sdk-web-api": "^1.1.3",
-    "@streamlayer/sdk-web-core": "^1.0.4",
-    "@streamlayer/sdk-web-interfaces": "^1.0.4",
-    "@streamlayer/sdk-web-logger": "^1.0.4",
-    "@streamlayer/sdk-web-notifications": "^1.0.4",
-    "@streamlayer/sdk-web-storage": "^1.0.4",
-    "@streamlayer/sdk-web-types": "^1.1.3"
+    "@streamlayer/sdk-web-api": "^1.2.0",
+    "@streamlayer/sdk-web-core": "^1.1.0",
+    "@streamlayer/sdk-web-interfaces": "^1.1.0",
+    "@streamlayer/sdk-web-logger": "^1.0.5",
+    "@streamlayer/sdk-web-notifications": "^1.1.0",
+    "@streamlayer/sdk-web-storage": "^1.0.5",
+    "@streamlayer/sdk-web-types": "^1.2.0"
   },
   "devDependencies": {
-    "tslib": "^2.6.3"
+    "tslib": "^2.7.0"
   },
   "type": "module",
   "main": "./lib/index.js",