Fix Experiment

app/package.json

@@ -99,7 +99,7 @@
     "papaparse": "^5.4.1",
     "phosphor-react": "^1.3.1",
     "postcss-flexbugs-fixes": "^5.0.2",
-    "posthog-js": "^1.150.0",
+    "posthog-js": "^1.161.3",
     "prettier": "^2.3.1",
     "re-resizable": "^6.9.0",
     "react": "^18.2.0",

app/src/components/ConvertToFlowchart.tsx

@@ -15,7 +15,6 @@ import { AppContext } from "./AppContextProvider";
 import { isError } from "../lib/helpers";
 import { useHasProAccess } from "../lib/hooks";
 import { showPaywall } from "../lib/usePaywallModalStore";
-import { getAIPaywallCopy } from "../lib/getAIPaywallCopy.experiment";
 
 export function ConvertToFlowchart() {
   const convertIsRunning = usePromptStore((s) => s.isRunning);
@@ -34,7 +33,6 @@ export function ConvertToFlowchart() {
           content: t`Uh oh, you're out of free requests! Upgrade to Flowchart Fun Pro for unlimited diagram conversions, and keep transforming text into clear, visual flowcharts as easily as copy and paste.`,
           imgUrl: "/images/ai-convert.png",
           toPricingCode: "ConvertToFlowchart",
-          buttonText: getAIPaywallCopy(),
         });
       } else {
         if (error.message === RATE_LIMIT_EXCEEDED) {

app/src/components/Layout.tsx

@@ -1,6 +1,6 @@
 import cx from "classnames";
 import { X } from "phosphor-react";
-import { memo, ReactNode, Suspense } from "react";
+import { lazy, memo, ReactNode, Suspense } from "react";
 import { Link } from "react-router-dom";
 
 import { useFullscreen, useIsEditorView } from "../lib/hooks";
@@ -10,7 +10,7 @@ import { Header } from "./Header";
 import styles from "./Layout.module.css";
 import Loading from "./Loading";
 import { VersionCheck } from "./VersionCheck";
-import { PaywallModal } from "./PaywallModal";
+const PaywallModal = lazy(() => import("./PaywallModal"));
 
 const Layout = memo(({ children }: { children: ReactNode }) => {
   const isFullscreen = useFullscreen();
@@ -49,7 +49,9 @@ const Layout = memo(({ children }: { children: ReactNode }) => {
         <ColorMode />
       </Box>
       <VersionCheck />
-      <PaywallModal />
+      <Suspense fallback={null}>
+        <PaywallModal />
+      </Suspense>
     </>
   );
 });

app/src/components/PaywallModal.tsx

@@ -5,8 +5,9 @@ import { Trans } from "@lingui/macro";
 import { Button2 } from "../ui/Shared";
 import { useNavigate } from "react-router-dom";
 import { usePaywallModalStore } from "../lib/usePaywallModalStore";
+import { usePostHog } from "posthog-js/react";
 
-export function PaywallModal() {
+export default function PaywallModal() {
   const navigate = useNavigate();
   const open = usePaywallModalStore((s) => s.open);
   const title = usePaywallModalStore((s) => s.title);
@@ -15,6 +16,7 @@ export function PaywallModal() {
   const imgUrl = usePaywallModalStore((s) => s.imgUrl);
   const toPricingCode = usePaywallModalStore((s) => s.toPricingCode);
   const buttonText = usePaywallModalStore((s) => s.buttonText);
+  const posthog = usePostHog();
   return (
     <Dialog.Root
       modal
@@ -64,6 +66,7 @@ export function PaywallModal() {
                   className="mt-4"
                   data-to-pricing={toPricingCode}
                   onClick={() => {
+                    posthog.capture("clicked-paywall-button");
                     navigate("/pricing");
                   }}
                 >

app/src/lib/useGetAIPaywallCopy.experiment.ts

@@ -0,0 +1,38 @@
+import { t } from "@lingui/macro";
+import { usePostHog } from "posthog-js/react";
+import { useCallback } from "react";
+
+type Variant =
+  | "unlimited-yearly"
+  | "join-creators"
+  | "boost-productivity"
+  | "anytime-yearly"
+  | "users-love"
+  | "unlock-unlimited";
+
+/**
+ * Returns the copy for the button on the AI paywall modal
+ */
+export function useGetAIPaywallCopy() {
+  const posthog = usePostHog();
+  return useCallback(() => {
+    const variant = posthog.featureFlags.getFeatureFlag(
+      "ai-paywall-copy-conversion"
+    ) as Variant;
+
+    switch (variant) {
+      case "unlimited-yearly":
+        return t`Unlimited AI Flowcharts: $2/mo (billed yearly)`;
+      case "join-creators":
+        return t`Join 5,000+ AI Flowchart Creators. $4/mo`;
+      case "boost-productivity":
+        return t`Unlimited AI Flowcharts - Boost Productivity Now`;
+      case "anytime-yearly":
+        return t`AI Flowcharts Anytime - $2/mo (billed yearly)`;
+      case "users-love":
+        return t`5,000+ Users Love AI Flowcharts - Join Now`;
+      case "unlock-unlimited":
+        return t`Unlock Unlimited AI Flowcharts`;
+    }
+  }, [posthog.featureFlags]);
+}

app/src/lib/usePromptStore.ts

@@ -10,6 +10,7 @@ import { AppContext } from "../components/AppContextProvider";
 import { unfreezeDoc } from "./useIsFrozen";
 import { useDoc } from "./useDoc";
 import { repairText } from "./repairText";
+import { useGetAIPaywallCopy } from "./useGetAIPaywallCopy.experiment";
 
 export type Mode = "prompt" | "convert" | "edit";
 type PromptStore = {
@@ -90,17 +91,19 @@ export function useRunAiWithStore() {
   const hasProAccess = useHasProAccess();
   const customer = useContext(AppContext).customer;
   const sid = customer?.subscription?.id;
+  const getAIPaywallCopy = useGetAIPaywallCopy();
 
   const handleError = useCallback(
     (error: Error) => {
       if (!hasProAccess && error.message === RATE_LIMIT_EXCEEDED) {
+        const buttonText = getAIPaywallCopy();
         // Show paywall
         showPaywall({
           title: t`Get Unlimited AI Requests`,
           content: t`You've used all your free AI conversions. Upgrade to Pro for unlimited AI use, custom themes, private sharing, and more. Keep creating amazing flowcharts effortlessly!`,
           movieUrl: "/images/ai-convert.mp4",
           toPricingCode: "ConvertToFlowchart",
-          buttonText: t`Upgrade for Unlimited AI`,
+          buttonText,
         });
       } else {
         if (error.message === RATE_LIMIT_EXCEEDED) {
@@ -110,7 +113,7 @@ export function useRunAiWithStore() {
         }
       }
     },
-    [hasProAccess]
+    [getAIPaywallCopy, hasProAccess]
   );
 
   return useCallback(() => {