feat: Update Pro pricing from $4/mo to $6/mo ($48/yr)

Update all hardcoded price references across UI components and pricing
pages. New Stripe prices created for dev environment. Old price IDs
added to OTHER_VALID_STRIPE_PRICE_IDS for subscriber grandfathering.
Restores openai@3.2.1 for autotranslations script. All locale files
updated via extract + autotranslations + compile pipeline.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: rob-gordon

.gitignore

@@ -16,3 +16,4 @@ flowchart-fun.feature-reacher.json
 
 speech*.mp4
 .env*.local
+stripe-scripts/

app/package.json

@@ -92,6 +92,7 @@
     "monaco-editor": "0.33.0",
     "moniker": "^0.1.2",
     "notion-to-md": "^2.5.5",
+    "openai": "3.2.1",
     "pako": "^2.1.0",
     "papaparse": "^5.4.1",
     "phosphor-react": "^1.3.1",

app/src/components/Checkout.tsx

@@ -136,9 +136,9 @@ export function Checkout({
             setPlan("yearly");
           }}
           planTitle={t`Yearly`}
-          description={t`Billed annually at $24`}
+          description={t`Billed annually at $48`}
           data-testid="yearly-plan-button"
-          monthlyPrice="2"
+          monthlyPrice="4"
           aria-current={plan === "yearly"}
           data-session-activity="Choose Yearly Plan"
           save
@@ -148,9 +148,9 @@ export function Checkout({
             setPlan("monthly");
           }}
           planTitle={t`Monthly`}
-          description={t`Billed monthly at $4`}
+          description={t`Billed monthly at $6`}
           data-testid="monthly-plan-button"
-          monthlyPrice="4"
+          monthlyPrice="6"
           aria-current={plan === "monthly"}
           data-session-activity="Choose Monthly Plan"
         />
@@ -231,7 +231,7 @@ function PlanButton({
       <span className="opacity-50 text-[15px]">{description}</span>
       {save ? (
         <span className="absolute top-0 right-0 bg-blue-700 text-white font-bold pb-[14px] pt-[8px] pl-[17px] pr-[9px] rounded-tr-2xl rounded-bl-3xl -mr-px">
-          Save 50%
+          Save 33%
         </span>
       ) : null}
     </button>

app/src/components/EditWithAI.tsx

@@ -25,7 +25,7 @@ type GraphForAI = {
 };
 
 const title = t`Edit with AI`;
-const content = t`With Flowchart Fun's Pro version, you can use natural language comamnds to quickly flesh out your flowchart details, ideal for creating diagrams on the go. For $4/month, get the ease of accessible AI editing to enhance your flowcharting experience.`;
+const content = t`With Flowchart Fun's Pro version, you can use natural language comamnds to quickly flesh out your flowchart details, ideal for creating diagrams on the go. For $6/month, get the ease of accessible AI editing to enhance your flowcharting experience.`;
 
 export function EditWithAI() {
   const [message, setMessage] = useState<string | null>(null);

app/src/components/FAQ.tsx

@@ -26,7 +26,7 @@ const faqs: FAQItem[] = [
   },
   {
     question: t`What if I just need it for one project?`,
-    answer: t`The free plan works great for day-to-day use. If you need Pro features, it's month-to-month at $4/mo — cancel anytime with no commitment.`,
+    answer: t`The free plan works great for day-to-day use. If you need Pro features, it's month-to-month at $6/mo — cancel anytime with no commitment.`,
   },
   {
     question: t`Is my data private?`,

app/src/components/ImportDataUnauthenticatedDialog.tsx

@@ -54,7 +54,7 @@ export function ImportDataUnauthenticatedDialog() {
                 </Trans>{" "}
                 <Trans>
                   Importing data is a pro feature. You can upgrade to Flowchart
-                  Fun Pro for just $4/month.
+                  Fun Pro for just $6/month.
                 </Trans>
               </p>
               <Button2

app/src/components/LoadFileButton.tsx

@@ -73,7 +73,7 @@ export function LoadFileButton() {
           if (!hasProAccess) {
             showPaywall({
               title: t`Load Files`,
-              content: t`Experience the efficiency and security of loading local files directly into your flowchart, perfect for managing work-related documents offline. Unlock this exclusive Pro feature and more with Flowchart Fun Pro, available for only $4/month`,
+              content: t`Experience the efficiency and security of loading local files directly into your flowchart, perfect for managing work-related documents offline. Unlock this exclusive Pro feature and more with Flowchart Fun Pro, available for only $6/month`,
               movieUrl:
                 "https://res.cloudinary.com/tone-row/video/upload/v1697510980/b6u3smok1vc2jqb56tb1.mp4",
               toPricingCode: "Local Files",

app/src/components/SandboxWarning.tsx

@@ -72,7 +72,7 @@ export function SandboxWarning() {
           </div>
           <P>
             <Trans>
-              All this for just $4/month - less than your daily coffee ☕
+              All this for just $6/month - less than your daily coffee ☕
             </Trans>
           </P>
           <P className="text-sm text-neutral-600 dark:text-neutral-400">

app/src/lib/paywallCopy.ts

@@ -2,4 +2,4 @@ import { t } from "@lingui/macro";
 
 export const createUnlimitedTitle = () => t`Create Unlimited Flowcharts`;
 export const createUnlimitedContent = () =>
-  t`Flowchart Fun Pro gives you unlimited flowcharts, unlimited collaborators, and unlimited storage for just $4/month.`;
+  t`Flowchart Fun Pro gives you unlimited flowcharts, unlimited collaborators, and unlimited storage for just $6/month.`;