Merge branch 'master' into bflat-pricing-update

packages/fakeyou/src/data/PriceTiers.js

@@ -1,7 +1,10 @@
 const FAKEYOU_PRICES = {
   //Starter Tier
   starter: {
-    internal_plan_key: null,
+    internal_plan_key: {
+      development: null,
+      production: null,
+    },
     tier: "Starter",
     price: 0,
     tts: {
@@ -32,7 +35,10 @@ const FAKEYOU_PRICES = {
 
   //Basic Tier
   basic: {
-    internal_plan_key: null, // TODO
+    internal_plan_key: {
+      development: null, // TODO
+      production: null, // TODO
+    },
     tier: "Basic",
     price: 3,
     tts: {
@@ -63,7 +69,10 @@ const FAKEYOU_PRICES = {
 
   //Plus Tier
   plus: {
-    internal_plan_key: "development_fakeyou_plus",
+    internal_plan_key: {
+      development: "development_fakeyou_plus",
+      production: "fakeyou_plus",
+    },
     tier: "Plus",
     price: 7,
     tts: {
@@ -94,7 +103,10 @@ const FAKEYOU_PRICES = {
 
   //Pro Tier
   pro: {
-    internal_plan_key: "development_fakeyou_pro",
+    internal_plan_key: {
+      development: "development_fakeyou_pro",
+      production: "fakeyou_pro",
+    },
     tier: "Pro",
     price: 15,
     tts: {
@@ -134,7 +146,10 @@ const FAKEYOU_PRICES = {
 
   //Elite Tier
   elite: {
-    internal_plan_key: "development_fakeyou_elite",
+    internal_plan_key: {
+      development: "development_fakeyou_elite",
+      production: "fakeyou_elite",
+    },
     tier: "Elite",
     price: 25,
     tts: {

packages/fakeyou/src/v2/view/_common/FrontendEnvironment.ts

@@ -0,0 +1,51 @@
+
+enum Environment {
+  Development,
+  Staging,
+  Production,
+}
+
+export class FrontendEnvironment {
+  static instance?: FrontendEnvironment;
+
+  environment: Environment;
+  
+  private constructor() {
+    switch (document.location.host) {
+      case 'fakeyou.com':
+        this.environment = Environment.Production;
+        break;
+      case 'staging.fakeyou.com':
+        this.environment = Environment.Staging;
+        break;
+      case 'dev.fakeyou.com':
+        this.environment = Environment.Development;
+        break;
+      default:
+        this.environment = Environment.Production;
+    }
+  }
+
+  public static getInstance() : FrontendEnvironment {
+    if (FrontendEnvironment.instance === undefined) {
+        FrontendEnvironment.instance = new FrontendEnvironment();
+    }
+    return FrontendEnvironment.instance;
+  }
+
+  public useProductionStripePlans() : boolean {
+    return this.isProduction() || this.isStaging();
+  }
+
+  public isProduction() : boolean {
+    return this.environment === Environment.Production;
+  }
+
+  public isStaging() : boolean {
+    return this.environment === Environment.Staging;
+  }
+
+  public isDevelopment() : boolean {
+    return this.environment === Environment.Development;
+  }
+}

packages/fakeyou/src/v2/view/premium/CheckoutSuccessPage.tsx

@@ -2,7 +2,7 @@
 import React from "react";
 import { Link } from "react-router-dom";
 import { motion } from "framer-motion";
-import { container, item, image, panel } from "../../../data/animation";
+import { container, item, image } from "../../../data/animation";
 import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper";
 
 interface Props {

packages/fakeyou/src/v2/view/premium/PortalSuccessPage.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Link } from "react-router-dom";
 import { motion } from "framer-motion";
-import { container, item, image, panel } from "../../../data/animation";
+import { container, item, image } from "../../../data/animation";
 import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper";
 
 interface Props {

packages/fakeyou/src/v2/view/premium/PricingPage.tsx

@@ -17,6 +17,7 @@ import {
 } from "@storyteller/components/src/api/premium/CreateStripePortalRedirect";
 import { motion } from "framer-motion";
 import { container, item, panel } from "../../../data/animation";
+import { FrontendEnvironment } from "../_common/FrontendEnvironment";
 
 interface Props {
   sessionWrapper: SessionWrapper;
@@ -56,14 +57,17 @@ function PricingPage(props: Props) {
     }
   };
 
-  const hasPaidPremium = props.sessionSubscriptionsWrapper.hasPaidFeatures();
+  const environment = FrontendEnvironment.getInstance();
+  const planKey = environment.useProductionStripePlans() ? "production" : "development";
+
+  const userHasPaidPremium = props.sessionSubscriptionsWrapper.hasPaidFeatures();
 
   let freeButtonText = "Use for free";
   let plusButtonText = "Buy Plus";
   let proButtonText = "Buy Pro";
   let eliteButtonText = "Buy Elite";
 
-  if (hasPaidPremium) {
+  if (userHasPaidPremium) {
     freeButtonText = "Unsubscribe";
     plusButtonText = "Switch to Plus";
     proButtonText = "Switch to Pro";
@@ -258,7 +262,7 @@ function PricingPage(props: Props) {
             <div className="rounded panel p-4 h-100 panel-border">
               <h2 className="text-center my-2 fw-bold mb-4">{FYP.plus.tier}</h2>
               <button
-                onClick={() => beginStripeFlow(FYP.plus.internal_plan_key)}
+                onClick={() => beginStripeFlow(FYP.plus.internal_plan_key[planKey])}
                 className="btn btn-primary w-100 fs-6"
               >
                 {plusButtonText}
@@ -354,7 +358,7 @@ function PricingPage(props: Props) {
             <div className="rounded panel p-4 h-100">
               <h2 className="text-center my-2 fw-bold mb-4">{FYP.pro.tier}</h2>
               <button
-                onClick={() => beginStripeFlow(FYP.pro.internal_plan_key)}
+                onClick={() => beginStripeFlow(FYP.pro.internal_plan_key[planKey])}
                 className="btn btn-primary w-100 fs-6"
               >
                 {proButtonText}
@@ -464,7 +468,7 @@ function PricingPage(props: Props) {
                 {FYP.elite.tier}
               </h2>
               <button
-                onClick={() => beginStripeFlow(FYP.elite.internal_plan_key)}
+                onClick={() => beginStripeFlow(FYP.elite.internal_plan_key[planKey])}
                 className="btn btn-primary w-100 fs-6"
               >
                 {eliteButtonText}