set cookie with plan/user id

package.json

@@ -34,6 +34,7 @@
   },
   "dependencies": {
     "@react-spring/types": "^9.7.3",
+    "universal-cookie": "^6.1.1",
     "yarn": "^1.22.19"
   },
   "packageManager": "yarn@3.3.1"

packages/components/src/session/SessionSubscriptionsWrapper.ts

@@ -1,4 +1,9 @@
-import { ActiveSubscription, ListActiveSubscriptions, ListActiveSubscriptionsIsSuccess, ListActiveSubscriptionsSuccessResponse } from "../api/premium/ListActiveSubscriptions";
+import {
+  ActiveSubscription,
+  ListActiveSubscriptions,
+  ListActiveSubscriptionsIsSuccess,
+  ListActiveSubscriptionsSuccessResponse,
+} from "../api/premium/ListActiveSubscriptions";
 import { FakeYouFrontendEnvironment } from "../env/FakeYouFrontendEnvironment";
 
 const FAKEYOU_NAMESPACE = "fakeyou";
@@ -72,8 +77,25 @@ export class SessionSubscriptionsWrapper {
     return maybePlan !== undefined;
   }
 
-  private findActiveSubscription(namespace: string, product_slug: string) : ActiveSubscription | undefined {
-    const subs = this.listActiveSubscriptionResponse?.active_subscriptions || [];
-    return subs.find((sub) => sub.namespace === namespace && sub.product_slug === product_slug);
+  public getActiveProductSlug(): string | undefined {
+    if (this.hasActiveEliteSubscription()) {
+      return "fakeyou_elite";
+    } else if (this.hasActiveProSubscription()) {
+      return "fakeyou_pro";
+    } else if (this.hasActivePlusSubscription()) {
+      return "fakeyou_plus";
+    }
+    return undefined;
   }
-}
+
+  private findActiveSubscription(
+    namespace: string,
+    product_slug: string
+  ): ActiveSubscription | undefined {
+    const subs =
+      this.listActiveSubscriptionResponse?.active_subscriptions || [];
+    return subs.find(
+      (sub) => sub.namespace === namespace && sub.product_slug === product_slug
+    );
+  }
+}

packages/fakeyou.com/src/App.tsx

@@ -3,6 +3,7 @@ import "scss/custom-bootstrap.scss";
 
 import React from "react";
 import { ApiConfig } from "@storyteller/components";
+import Cookies from 'universal-cookie';
 import {
   DetectLocale,
   DetectLocaleIsOk,
@@ -256,6 +257,7 @@ class App extends React.Component<Props, State> {
       voiceConversionModels: [],
       maybeSelectedVoiceConversionModel: undefined,
     };
+
   }
 
   componentWillMount() {
@@ -293,13 +295,18 @@ class App extends React.Component<Props, State> {
   querySession = async () => {
     const sessionWrapper = await SessionWrapper.lookupSession();
     const username = sessionWrapper.getDisplayName();
+    const cookies = new Cookies();
+
     if (username !== undefined) {
       // Track only logged-in users (for now)
       PosthogClient.enablePosthog();
       PosthogClient.setUsername(username);
-        window.dataLayer.push({
-          'user_id': username,
-        });
+      cookies.set('logged_in_username', username, { path: '/', expires: new Date(Date.now()+3 * 86400000) });
+      window.dataLayer.push({
+        'user_id': username,
+      });
+    } else {
+      cookies.remove('logged_in_username', { path: '/' });
     }
     this.setState({
       sessionWrapper: sessionWrapper,
@@ -307,8 +314,18 @@ class App extends React.Component<Props, State> {
   };
 
   querySessionSubscriptions = async () => {
+    const cookies = new Cookies();
+
     const sessionSubscriptionsWrapper =
-      await SessionSubscriptionsWrapper.lookupActiveSubscriptions();
+    await SessionSubscriptionsWrapper.lookupActiveSubscriptions();
+
+    const plan = sessionSubscriptionsWrapper.getActiveProductSlug();
+    if (plan !== undefined) {
+    cookies.set('logged_in_user_plan', plan, { path: '/', expires: new Date(Date.now()+3 * 86400000) });
+    } else {
+      cookies.remove('logged_in_user_plan', { path: '/' });
+    }
+
     this.setState({
       sessionSubscriptionsWrapper: sessionSubscriptionsWrapper,
     });

yarn.lock

@@ -4572,6 +4572,7 @@ __metadata:
     "@react-spring/types": ^9.7.3
     craco: ^0.0.3
     lerna: ^4.0.0
+    universal-cookie: ^6.1.1
     yarn: ^1.22.19
   languageName: unknown
   linkType: soft
@@ -5101,6 +5102,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/cookie@npm:^0.5.1":
+  version: 0.5.3
+  resolution: "@types/cookie@npm:0.5.3"
+  checksum: b785618f6b2fdceb6a20a17e1dfe99651b1e5c2c079f486de76dfb21b508f09d91913755e4a6dbdfe628882ea32466bb2e9318b114ce34efa5e624356494fcab
+  languageName: node
+  linkType: hard
+
 "@types/debounce@npm:*":
   version: 1.2.1
   resolution: "@types/debounce@npm:1.2.1"
@@ -8398,6 +8406,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"cookie@npm:^0.5.0":
+  version: 0.5.0
+  resolution: "cookie@npm:0.5.0"
+  checksum: 1f4bd2ca5765f8c9689a7e8954183f5332139eb72b6ff783d8947032ec1fdf43109852c178e21a953a30c0dd42257828185be01b49d1eb1a67fd054ca588a180
+  languageName: node
+  linkType: hard
+
 "copy-concurrently@npm:^1.0.0":
   version: 1.0.5
   resolution: "copy-concurrently@npm:1.0.5"
@@ -20352,6 +20367,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"universal-cookie@npm:^6.1.1":
+  version: 6.1.1
+  resolution: "universal-cookie@npm:6.1.1"
+  dependencies:
+    "@types/cookie": ^0.5.1
+    cookie: ^0.5.0
+  checksum: 5c4d83f5879c5f133a51dadd080bf7a7a5c3a4b38695bb52ae560564884b84156d3c872abb1ade54a0ee00baf3870a59abc9907a4fa5bcf7a8d2d63af581c8e1
+  languageName: node
+  linkType: hard
+
 "universal-user-agent@npm:^6.0.0":
   version: 6.0.0
   resolution: "universal-user-agent@npm:6.0.0"