@streamlayer/feature-gamification 0.22.0 → 0.23.0

package/lib/gamification.d.ts

@@ -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

@@ -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,37 +49,26 @@ 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 &&
@@ -144,84 +118,7 @@ export class Gamification extends AbstractFeature {
                 }
             }
         });
-        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: {
-                questionType: QuestionType.UNSET,
-                onboarding: {
-                    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();
@@ -266,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/onboarding.d.ts

@@ -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

@@ -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

@@ -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

@@ -1,18 +1,18 @@
 {
   "name": "@streamlayer/feature-gamification",
-  "version": "0.22.0",
+  "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.6",
-    "@streamlayer/sdk-web-interfaces": "^0.18.13",
-    "@streamlayer/sdk-web-logger": "^0.0.2",
-    "@streamlayer/sdk-web-notifications": "^0.11.0",
-    "@streamlayer/sdk-web-storage": "^0.0.2",
-    "@streamlayer/sdk-web-types": "^0.19.0"
+    "@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"