npm - @streamlayer/feature-gamification - Versions diffs - 0.21.2 → 0.23.0 - Mend

@streamlayer/feature-gamification 0.21.2 → 0.23.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/lib/gamification.d.ts CHANGED Viewed

@@ -6,23 +6,9 @@ import type { PlainMessage } from '@bufbuild/protobuf';
 import { WritableAtom } from 'nanostores';
 import * as queries from './queries';
 import { leaderboard } from './leaderboard';
+import { OnboardingStatus } from './onboarding';
 import { LeaderboardItem } from './queries/leaderboard';
 import { GamificationBackground } from './';
-/**
- * Required: in-app should be displayed and questions not available
- * Optional: in-app should be displayed but questions are available
- * Completed: user completed onboarding, cached in browser. Linked by eventId, organizationId and userId
- * Disabled: no in-app but questions are available
- * Unavailable: no in-app and questions not available [behavior is discussed]
- */
-export declare enum OnboardingStatus {
-    Unset = "unset",
-    Required = "required",
-    Optional = "optional",
-    Completed = "completed",
-    Disabled = "disabled",
-    Unavailable = "unavailable"
-}
 /**
  * Gamification (Games) Overlay
  * Includes:
@@ -42,29 +28,25 @@ export declare class Gamification extends AbstractFeature<'games', PlainMessage<
     /** leaderboard list */
     leaderboardList: ReturnType<typeof leaderboard>;
     /** onboarding status */
-    onboardingStatus: WritableAtom<OnboardingStatus | undefined>;
+    onboardingStatus: {
+        $store: WritableAtom<OnboardingStatus | undefined>;
+        submitInplay: () => Promise<void>;
+    };
     /** opened question */
     openedQuestion: GamificationBackground['openedQuestion'];
     /** pinned leaderboard id */
     openedUser: WritableAtom<LeaderboardItem | undefined>;
+    closeFeature: () => void;
+    openFeature: () => void;
     private notifications;
     private transport;
-    private closeFeature;
-    private openFeature;
     /** gamification background class, handle subscriptions and notifications for closed overlay */
     private background;
     /** Browser cache */
     private storage;
     constructor(config: FeatureProps, source: FeatureSource, instance: StreamLayerContext);
-    /**
-     * check onboarding status, sync with browser cache
-     * retrieve onboarding settings from api
-     */
-    onboardingProcess: () => Promise<void>;
-    showOnboardingInApp: () => void;
     connect: (transport: StreamLayerContext['transport']) => void;
     disconnect: () => void;
-    submitInplay: () => Promise<void>;
     submitAnswer: (questionId: string, answerId: string) => Promise<void>;
     skipQuestion: (questionId: string) => Promise<void>;
     openQuestion: (questionId: string) => void;

package/lib/gamification.js CHANGED Viewed

@@ -6,24 +6,9 @@ import * as queries from './queries';
 import * as actions from './queries/actions';
 import { GamificationStorage } from './storage';
 import { leaderboard } from './leaderboard';
+import { onboarding } from './onboarding';
 import { gamificationBackground } from './';
 const GamificationQuestionTypes = new Set([QuestionType.POLL, QuestionType.PREDICTION, QuestionType.TRIVIA]);
-/**
- * Required: in-app should be displayed and questions not available
- * Optional: in-app should be displayed but questions are available
- * Completed: user completed onboarding, cached in browser. Linked by eventId, organizationId and userId
- * Disabled: no in-app but questions are available
- * Unavailable: no in-app and questions not available [behavior is discussed]
- */
-export var OnboardingStatus;
-(function (OnboardingStatus) {
-    OnboardingStatus["Unset"] = "unset";
-    OnboardingStatus["Required"] = "required";
-    OnboardingStatus["Optional"] = "optional";
-    OnboardingStatus["Completed"] = "completed";
-    OnboardingStatus["Disabled"] = "disabled";
-    OnboardingStatus["Unavailable"] = "unavailable";
-})(OnboardingStatus || (OnboardingStatus = {}));
 /**
  * Gamification (Games) Overlay
  * Includes:
@@ -48,10 +33,10 @@ export class Gamification extends AbstractFeature {
     openedQuestion;
     /** pinned leaderboard id */
     openedUser;
-    notifications;
-    transport;
     closeFeature;
     openFeature;
+    notifications;
+    transport;
     /** gamification background class, handle subscriptions and notifications for closed overlay */
     background;
     /** Browser cache */
@@ -64,131 +49,76 @@ export class Gamification extends AbstractFeature {
         this.feedList = this.background.feedList;
         this.openedUser = createSingleStore(undefined);
         this.leaderboardId = new SingleStore(createSingleStore(this.settings.getValue('pinnedLeaderboardId')), 'pinnedLeaderboardId').getStore();
-        this.onboardingStatus = new SingleStore(createSingleStore(OnboardingStatus.Unset), 'onboardingStatus').getStore();
+        this.onboardingStatus = onboarding(this, this.background, instance.transport, instance.notifications);
         this.notifications = instance.notifications;
         this.transport = instance.transport;
         this.closeFeature = instance.sdk.closeFeature;
         this.openFeature = () => instance.sdk.openFeature(FeatureType.GAMES);
         this.openedQuestion = this.background.openedQuestion;
         this.leaderboardList = leaderboard(this.transport, this.background.slStreamId);
-        this.onboardingStatus.subscribe((onboardingStatus) => {
-            if (onboardingStatus === OnboardingStatus.Optional || OnboardingStatus.Required) {
-                this.showOnboardingInApp();
-            }
-        });
         this.status.subscribe((status) => {
             if (status === FeatureStatus.Ready) {
-                this.notifications.close(this.background.getCurrentSessionId({ prefix: 'onboarding' }));
                 this.connect(instance.transport);
             }
             else {
                 this.disconnect();
             }
         });
-        this.onboardingStatus.subscribe((onboardingStatus) => {
-            if (onboardingStatus) {
-                this.background.activeQuestionId.invalidate();
-            }
-        });
+        /**
+         * listen for active question and show in-app notification
+         */
         this.background.activeQuestionId.listen((question) => {
-            if (question && question.data && this.onboardingStatus.get()) {
+            if (question && question.data && this.onboardingStatus.$store.get()) {
                 if (question.data.question?.id !== undefined &&
                     question.data.question.notification !== undefined &&
                     question.data.moderation?.bypassNotifications?.inAppSilence !== SilenceSetting.ON &&
-                    GamificationQuestionTypes.has(question.data.question.type) &&
                     question.data.question.status === QuestionStatus.ACTIVE) {
-                    this.notifications.add({
-                        type: NotificationType.QUESTION,
-                        action: () => question.data?.question && this.openQuestion(question.data.question.id),
-                        close: () => question.data?.question && this.closeQuestion(question.data.question.id),
-                        autoHideDuration: +(question.data.moderation?.question?.appearance?.autoHideInterval || '1000'),
-                        id: this.background.getCurrentSessionId({ prefix: 'notification', entity: question.data.question.id }),
-                        data: {
-                            title: question.data.question.notification.title,
-                            color: question.data.question.notification.indicatorColor,
-                            icon: question.data.question.notification.image,
-                            imageMode: question.data.question.notification.imageMode,
-                            imagePosition: question.data.question.notification.imagePosition,
-                        },
-                    });
+                    if (GamificationQuestionTypes.has(question.data.question.type)) {
+                        this.notifications.add({
+                            type: NotificationType.QUESTION,
+                            action: () => question.data?.question && this.openQuestion(question.data.question.id),
+                            close: () => question.data?.question && this.closeQuestion(question.data.question.id),
+                            autoHideDuration: 1000 * +(question.data.question?.appearance?.autoHideInterval || '5'),
+                            id: this.background.getCurrentSessionId({ prefix: 'notification', entity: question.data.question.id }),
+                            data: {
+                                questionType: question.data.question.type,
+                                question: {
+                                    title: question.data.question.notification.title,
+                                },
+                            },
+                        });
+                    }
+                    else if (question.data.question.type === QuestionType.FACTOID) {
+                        const instantView = {
+                            heading: '',
+                            body: '',
+                            image: '',
+                            video: {
+                                id: '',
+                                url: '',
+                                thumbnailUrl: '',
+                            },
+                            webLink: {
+                                label: '',
+                                url: '',
+                            },
+                        };
+                        this.notifications.add({
+                            type: NotificationType.QUESTION,
+                            action: () => question.data?.question && this.openQuestion(question.data.question.id),
+                            close: () => question.data?.question && this.closeQuestion(question.data.question.id),
+                            autoHideDuration: 1000 * +(question.data.question?.appearance?.autoHideInterval || '5'),
+                            id: this.background.getCurrentSessionId({ prefix: 'notification', entity: question.data.question.id }),
+                            data: {
+                                questionType: question.data.question.type,
+                                insight: instantView,
+                            },
+                        });
+                    }
                 }
             }
         });
-        void this.onboardingProcess();
-        this.background.userId.subscribe((userId) => {
-            if (userId) {
-                void this.onboardingProcess();
-            }
-        });
-        this.background.moderation.subscribe((value) => {
-            if (value.data) {
-                void this.onboardingProcess();
-            }
-        });
     }
-    /**
-     * check onboarding status, sync with browser cache
-     * retrieve onboarding settings from api
-     */
-    onboardingProcess = async () => {
-        const userId = this.background.userId.get();
-        if (!userId) {
-            return;
-        }
-        const onboardingStatus = this.storage.getOnboardingStatus({
-            userId,
-            organizationId: this.background.organizationId.get() || '',
-            eventId: this.background.slStreamId.get() || '',
-        });
-        if (onboardingStatus === OnboardingStatus.Completed) {
-            this.onboardingStatus.set(OnboardingStatus.Completed);
-        }
-        const moderation = await this.background.moderation.getValue();
-        if (this.onboardingStatus.get() === OnboardingStatus.Completed) {
-            return;
-        }
-        const onboardingEnabled = !!(moderation?.options?.onboardingEnabled && this.featureSettings.get().inplayGame?.onboarding?.completed);
-        const optIn = !!this.featureSettings.get().inplayGame?.titleCard?.optIn;
-        if (onboardingEnabled) {
-            if (optIn) {
-                this.onboardingStatus.set(OnboardingStatus.Required);
-            }
-            else {
-                this.onboardingStatus.set(OnboardingStatus.Optional);
-            }
-        }
-        else {
-            if (optIn) {
-                this.onboardingStatus.set(OnboardingStatus.Unavailable);
-            }
-            else {
-                this.onboardingStatus.set(OnboardingStatus.Disabled);
-            }
-        }
-    };
-    showOnboardingInApp = () => {
-        const { inplayGame } = this.featureSettings.get();
-        if (!inplayGame) {
-            return;
-        }
-        const { titleCard, overview } = inplayGame;
-        this.notifications.add({
-            type: NotificationType.ONBOARDING,
-            id: this.background.getCurrentSessionId({ prefix: 'onboarding' }),
-            action: this.openFeature,
-            close: this.closeFeature,
-            autoHideDuration: 100000,
-            data: {
-                header: titleCard?.header,
-                title: titleCard?.title,
-                subtitle: titleCard?.subtitle,
-                graphicBg: titleCard?.appearance?.graphic,
-                icon: titleCard?.media?.icon,
-                sponsorLogo: titleCard?.media?.sponsorLogo,
-                primaryColor: overview?.appearance?.primaryColor,
-            },
-        });
-    };
     connect = (transport) => {
         this.userSummary.invalidate();
         this.leaderboardList.invalidate();
@@ -207,15 +137,18 @@ export class Gamification extends AbstractFeature {
                     const question = await queries.getQuestionByUser(id, transport);
                     const correctAnswer = question?.answers.find(({ correct }) => correct);
                     this.notifications.add({
-                        type: NotificationType.ONBOARDING,
+                        type: NotificationType.QUESTION_RESOLVED,
                         action: () => this.openQuestion(id),
                         close: () => this.closeQuestion(id),
                         autoHideDuration: 5000,
                         id: notificationId,
                         data: {
-                            title: correctAnswer?.youVoted
-                                ? `Congratulations! You answered correctly! You won ${correctAnswer.points} pts!`
-                                : `Better luck next time! Correct: ${correctAnswer?.text}!`,
+                            questionType: QuestionType.PREDICTION,
+                            question: {
+                                title: correctAnswer?.youVoted
+                                    ? `Congratulations! You answered correctly! You won ${correctAnswer.points} pts!`
+                                    : `Better luck next time! Correct: ${correctAnswer?.text}!`,
+                            },
                         },
                     });
                 }
@@ -230,19 +163,6 @@ export class Gamification extends AbstractFeature {
     disconnect = () => {
         this.background.feedSubscription.removeListener('feed-subscription-questions-list');
     };
-    // onboarding
-    submitInplay = async () => {
-        const eventId = this.background.slStreamId.get();
-        if (eventId) {
-            await actions.submitInplay(this.transport, eventId);
-            this.onboardingStatus.set(OnboardingStatus.Completed);
-            this.storage.saveOnboardingStatus({
-                organizationId: this.background.organizationId.get() || '',
-                userId: this.background.userId.get() || '',
-                eventId,
-            }, OnboardingStatus.Completed);
-        }
-    };
     submitAnswer = async (questionId, answerId) => {
         await actions.submitAnswer(this.transport, { questionId, answerId });
         // Todo: add invalidate openedQuestion

package/lib/highlights.js CHANGED Viewed

@@ -37,14 +37,13 @@ export class Highlights extends AbstractFeature {
                     type: NotificationType.QUESTION,
                     action: () => question.data?.question && this.openHighlight(question.data.question.id),
                     close: () => question.data?.question && this.closeHighlight(question.data.question.id),
-                    autoHideDuration: +(question.data.moderation?.question?.appearance?.autoHideInterval || '1000'),
+                    autoHideDuration: 1000 * +(question.data.question?.appearance?.autoHideInterval || '5'),
                     id: this.background.getCurrentSessionId({ prefix: 'notification', entity: question.data.question.id }),
                     data: {
-                        title: question.data.question.notification.title,
-                        color: question.data.question.notification.indicatorColor,
-                        icon: question.data.question.notification.image,
-                        imageMode: question.data.question.notification.imageMode,
-                        imagePosition: question.data.question.notification.imagePosition,
+                        questionType: question.data.question.type,
+                        question: {
+                            title: question.data.question.notification.title,
+                        },
                     },
                 });
             }

package/lib/onboarding.d.ts ADDED Viewed

@@ -0,0 +1,23 @@
+import { Transport } from '@streamlayer/sdk-web-api';
+import { type Notifications } from '@streamlayer/sdk-web-notifications';
+import { GamificationBackground } from './background';
+import { Gamification } from './';
+/**
+ * Required: in-app should be displayed and questions not available
+ * Optional: in-app should be displayed but questions are available
+ * Completed: user completed onboarding, cached in browser. Linked by eventId, organizationId and userId
+ * Disabled: no in-app but questions are available
+ * Unavailable: no in-app and questions not available [behavior is discussed]
+ */
+export declare enum OnboardingStatus {
+    Unset = "unset",
+    Required = "required",
+    Optional = "optional",
+    Completed = "completed",
+    Disabled = "disabled",
+    Unavailable = "unavailable"
+}
+export declare const onboarding: (service: Gamification, background: GamificationBackground, transport: Transport, notifications: Notifications) => {
+    $store: import("nanostores").WritableAtom<OnboardingStatus>;
+    submitInplay: () => Promise<void>;
+};

package/lib/onboarding.js ADDED Viewed

@@ -0,0 +1,116 @@
+import { createSingleStore } from '@streamlayer/sdk-web-interfaces';
+import { NotificationType } from '@streamlayer/sdk-web-notifications';
+import { QuestionType } from '@streamlayer/sdk-web-types';
+import { GamificationStorage } from './storage';
+import { submitInplay as submitInplayApi } from './queries/actions';
+/**
+ * Required: in-app should be displayed and questions not available
+ * Optional: in-app should be displayed but questions are available
+ * Completed: user completed onboarding, cached in browser. Linked by eventId, organizationId and userId
+ * Disabled: no in-app but questions are available
+ * Unavailable: no in-app and questions not available [behavior is discussed]
+ */
+export var OnboardingStatus;
+(function (OnboardingStatus) {
+    OnboardingStatus["Unset"] = "unset";
+    OnboardingStatus["Required"] = "required";
+    OnboardingStatus["Optional"] = "optional";
+    OnboardingStatus["Completed"] = "completed";
+    OnboardingStatus["Disabled"] = "disabled";
+    OnboardingStatus["Unavailable"] = "unavailable";
+})(OnboardingStatus || (OnboardingStatus = {}));
+export const onboarding = (service, background, transport, notifications) => {
+    const storage = new GamificationStorage();
+    const $store = createSingleStore(OnboardingStatus.Unset);
+    const showOnboardingInApp = () => {
+        const { inplayGame = {} } = service.featureSettings.get();
+        const notificationId = background.getCurrentSessionId({ prefix: 'onboarding' });
+        notifications.add({
+            type: NotificationType.ONBOARDING,
+            id: notificationId,
+            action: service.openFeature,
+            close: () => {
+                notifications.markAsViewed(notificationId);
+            },
+            autoHideDuration: 1000000,
+            data: {
+                questionType: QuestionType.UNSET,
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore
+                onboarding: { ...inplayGame },
+            },
+        });
+    };
+    $store.subscribe((onboardingStatus) => {
+        if (onboardingStatus === OnboardingStatus.Optional || OnboardingStatus.Required) {
+            showOnboardingInApp();
+        }
+        if (onboardingStatus === OnboardingStatus.Completed) {
+            background.activeQuestionId.invalidate();
+        }
+    });
+    /**
+     * check onboarding status, sync with browser cache
+     * retrieve onboarding settings from api
+     */
+    const onboardingProcess = async () => {
+        const userId = background.userId.get();
+        if (!userId) {
+            return;
+        }
+        const onboardingStatus = storage.getOnboardingStatus({
+            userId,
+            organizationId: background.organizationId.get() || '',
+            eventId: background.slStreamId.get() || '',
+        });
+        if (onboardingStatus === OnboardingStatus.Completed) {
+            $store.set(OnboardingStatus.Completed);
+        }
+        const moderation = await background.moderation.getValue();
+        if ($store.get() === OnboardingStatus.Completed) {
+            return;
+        }
+        const onboardingEnabled = !!(moderation?.options?.onboardingEnabled && service.featureSettings.get().inplayGame?.onboarding?.completed);
+        const optIn = !!service.featureSettings.get().inplayGame?.titleCard?.optIn;
+        if (onboardingEnabled) {
+            if (optIn) {
+                $store.set(OnboardingStatus.Required);
+            }
+            else {
+                $store.set(OnboardingStatus.Optional);
+            }
+        }
+        else {
+            if (optIn) {
+                $store.set(OnboardingStatus.Unavailable);
+            }
+            else {
+                $store.set(OnboardingStatus.Disabled);
+            }
+        }
+    };
+    void onboardingProcess();
+    background.userId.subscribe((userId) => {
+        if (userId) {
+            void onboardingProcess();
+        }
+    });
+    background.moderation.subscribe((value) => {
+        if (value.data) {
+            void onboardingProcess();
+        }
+    });
+    const submitInplay = async () => {
+        const eventId = background.slStreamId.get();
+        if (eventId) {
+            await submitInplayApi(transport, eventId);
+            $store.set(OnboardingStatus.Completed);
+            storage.saveOnboardingStatus({
+                organizationId: background.organizationId.get() || '',
+                userId: background.userId.get() || '',
+                eventId,
+            }, OnboardingStatus.Completed);
+        }
+    };
+    return { $store, submitInplay };
+};

package/lib/storage.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import { Storage } from '@streamlayer/sdk-web-storage';
-import { OnboardingStatus } from './gamification';
+import { OnboardingStatus } from './onboarding';
 type UserProps = {
     userId: string;
     eventId: string;

package/package.json CHANGED Viewed

@@ -1,18 +1,18 @@
 {
   "name": "@streamlayer/feature-gamification",
-  "version": "0.21.2",
+  "version": "0.23.0",
   "peerDependencies": {
     "@bufbuild/protobuf": "^1.4.2",
     "@streamlayer/sl-eslib": "^5.53.6",
     "@fastify/deepmerge": "*",
     "nanostores": "^0.9.5",
     "@streamlayer/sdk-web-api": "^0.0.1",
-    "@streamlayer/sdk-web-core": "^0.17.5",
-    "@streamlayer/sdk-web-interfaces": "^0.18.12",
-    "@streamlayer/sdk-web-logger": "^0.0.2",
-    "@streamlayer/sdk-web-notifications": "^0.10.11",
-    "@streamlayer/sdk-web-storage": "^0.0.2",
-    "@streamlayer/sdk-web-types": "^0.18.2"
+    "@streamlayer/sdk-web-interfaces": "^0.18.14",
+    "@streamlayer/sdk-web-logger": "^0.0.3",
+    "@streamlayer/sdk-web-core": "^0.17.7",
+    "@streamlayer/sdk-web-notifications": "^0.12.0",
+    "@streamlayer/sdk-web-storage": "^0.0.3",
+    "@streamlayer/sdk-web-types": "^0.20.0"
   },
   "devDependencies": {
     "tslib": "^2.6.2"