Cancel Anytime Note (#722)

* Add cancel anytime copy

* Add translations; Boost rate-limit

api/prompt/_shared.ts

@@ -39,7 +39,7 @@ export async function handleRateLimit(
     redis: kv,
     limiter: isPro
       ? Ratelimit.slidingWindow(3, "1m")
-      : Ratelimit.fixedWindow(1, "30d"),
+      : Ratelimit.fixedWindow(3, "30d"),
   });
 
   const rateLimitKey = isPro ? `pro_${customerId}` : `unauth_${ip}`;

app/src/components/Checkout.tsx

@@ -5,9 +5,8 @@ import { Link } from "react-router-dom";
 import Spinner from "./Spinner";
 import { useMutation } from "react-query";
 import { Trans, t } from "@lingui/macro";
-// import { PlanButton } from "./PlanButton";
-// import { PaymentStepperTitle } from "./PaymentStepperTitle";
 import classNames from "classnames";
+import { LockSimple, CreditCard, ArrowClockwise } from "phosphor-react";
 
 export function Checkout({
   pricing2,
@@ -126,13 +125,12 @@ export function Checkout({
 
   return (
     <div>
-      <h2 className="text-white text-4xl font-bold text-center mb-2 tracking-wide">
-        <Trans>Choose a Plan</Trans>
+      <h2 className="text-white text-5xl font-bold text-center mb-3 tracking-wide">
+        <Trans>Upgrade to Pro</Trans>
       </h2>
-      <p className="text-white text-[24px] text-center mb-8 text-wrap-balance leading-tight opacity-80">
+      <p className="text-white text-[26px] text-center mb-10 text-wrap-balance leading-tight opacity-90">
         <Trans>
-          Gain access to AI Features and never lose your work with a Pro
-          account.
+          Unlock AI Features and never lose your work with a Pro account.
         </Trans>
       </p>
       <div className="grid sm:grid-cols-2 gap-3 mb-8">
@@ -163,7 +161,7 @@ export function Checkout({
       <div className="px-[48px]">
         <button
           className={classNames(
-            "w-full bg-[#FFCD1F] text-black rounded-3xl text-[20px] font-bold py-5 shadow-sm hover:bg-[#FFD63F] hover:shadow",
+            "w-full bg-[#FFCD1F] text-black rounded-3xl text-[22px] font-bold py-6 shadow-md hover:bg-[#FFE063] hover:shadow-lg transition-all duration-300",
             {
               "animate-pulse": createCheckoutSession.isLoading,
             }
@@ -175,10 +173,31 @@ export function Checkout({
         >
           <Trans>
             {createCheckoutSession.isLoading
-              ? "Processing..."
-              : "Upgrade to Pro"}
+              ? t`Processing...`
+              : t`Get Pro Access Now`}
           </Trans>
         </button>
+
+        <div className="mt-8 text-base text-white bg-purple-600 rounded-lg p-5 shadow-md">
+          <div className="flex items-center mb-2">
+            <LockSimple className="mr-2" size={18} />
+            <span>
+              <Trans>Secure payment</Trans>
+            </span>
+          </div>
+          <div className="flex items-center mb-2">
+            <CreditCard className="mr-2" size={18} />
+            <span>
+              <Trans>Cancel anytime</Trans>
+            </span>
+          </div>
+          <div className="flex items-center">
+            <ArrowClockwise className="mr-2" size={18} />
+            <span>
+              <Trans>Satisfaction guaranteed or first payment refunded</Trans>
+            </span>
+          </div>
+        </div>
       </div>
     </div>
   );

app/src/locales/de/messages.po

@@ -151,11 +151,11 @@ msgstr "Werden Sie ein Pro-Benutzer"
 msgid "Begin your journey"
 msgstr "Beginne deine Reise"
 
-#: src/components/Checkout.tsx:144
+#: src/components/Checkout.tsx:142
 msgid "Billed annually at $24"
 msgstr "Jährlich abgerechnet für $24"
 
-#: src/components/Checkout.tsx:156
+#: src/components/Checkout.tsx:154
 msgid "Billed monthly at $4"
 msgstr "Monatlich für $4 berechnet"
 
@@ -198,6 +198,10 @@ msgstr "In die Breite"
 msgid "Cancel"
 msgstr "Abbrechen"
 
+#: src/components/Checkout.tsx:191
+msgid "Cancel anytime"
+msgstr "Jederzeit kündbar"
+
 #: src/pages/Account.tsx:326
 msgid "Cancel your subscription. Your hosted charts will become read-only."
 msgstr "Kündigen Sie Ihr Abonnement. Ihre gehosteten Diagramme werden schreibgeschützt."
@@ -237,10 +241,6 @@ msgstr "Wählen"
 msgid "Choose Template"
 msgstr "Vorlage auswählen"
 
-#: src/components/Checkout.tsx:130
-msgid "Choose a Plan"
-msgstr "Wählen Sie einen Plan"
-
 #: src/components/LearnSyntaxDialog.tsx:327
 msgid "Choose from a variety of arrow shapes for the source and target of an edge. Shapes include triangle, triangle-tee, circle-triangle, triangle-cross, triangle-backcurve, vee, tee, square, circle, diamond, chevron, none. ."
 msgstr "Wählen Sie aus einer Vielzahl von Pfeilformen für die Quelle und das Ziel einer Kante aus. Formen beinhalten Dreieck, Dreieck-Tee, Kreis-Dreieck, Dreieck-Kreuz, Dreieck-Rückbiegung, Vee, Tee, Quadrat, Kreis, Diamant, Chevron und keine."
@@ -692,14 +692,14 @@ msgstr "Kostenlos"
 msgid "Fullscreen"
 msgstr "Vollbild"
 
-#: src/components/Checkout.tsx:133
-msgid "Gain access to AI Features and never lose your work with a Pro account."
-msgstr "Erhalten Sie Zugang zu KI-Funktionen und verlieren Sie nie Ihre Arbeit mit einem Pro-Konto."
-
 #: src/components/Tabs/ThemeTab.tsx:155
 msgid "General"
 msgstr "Allgemein"
 
+#: src/components/Checkout.tsx:177
+msgid "Get Pro Access Now"
+msgstr "Erhalten Sie jetzt Pro-Zugang"
+
 #: src/lib/usePromptStore.ts:99
 msgid "Get Unlimited AI Requests"
 msgstr "Erhalten Sie unbegrenzte KI-Anfragen"
@@ -956,7 +956,7 @@ msgstr "Abmelden"
 msgid "Log in to Save"
 msgstr "Einloggen, um zu speichern"
 
-#: src/components/Checkout.tsx:74
+#: src/components/Checkout.tsx:73
 msgid "Log in to upgrade your account"
 msgstr "Melde dich an, um dein Konto zu aktualisieren"
 
@@ -980,7 +980,7 @@ msgstr "Abrechnung verwalten"
 msgid "Map Data"
 msgstr "Daten abbilden"
 
-#: src/components/Checkout.tsx:155
+#: src/components/Checkout.tsx:153
 msgid "Monthly"
 msgstr "Monatlich"
 
@@ -1149,6 +1149,10 @@ msgstr "Datenschutzerklärung"
 msgid "Processing Data"
 msgstr "Datenverarbeitung"
 
+#: src/components/Checkout.tsx:176
+msgid "Processing..."
+msgstr "Verarbeitung..."
+
 #: src/components/AiToolbar.tsx:32
 msgid "Prompt"
 msgstr "Aufforderung"
@@ -1279,6 +1283,10 @@ msgstr "Label drehen"
 msgid "SVG Export is a Pro Feature"
 msgstr "SVG-Export ist eine Pro-Funktion"
 
+#: src/components/Checkout.tsx:197
+msgid "Satisfaction guaranteed or first payment refunded"
+msgstr "Zufriedenheitsgarantie oder erste Zahlung erstattet"
+
 #: src/components/FlowchartHeader.tsx:123
 #: src/components/FlowchartHeader.tsx:147
 msgid "Save"
@@ -1300,6 +1308,10 @@ msgstr "In Datei speichern"
 msgid "Save your Work"
 msgstr "Speichern Sie Ihre Arbeit"
 
+#: src/components/Checkout.tsx:185
+msgid "Secure payment"
+msgstr "Sichere Zahlung"
+
 #: src/components/Tabs/ThemeTab.tsx:326
 msgid "Set Fixed Node Height"
 msgstr "Fester Knotenhöhe festlegen"
@@ -1650,6 +1662,10 @@ msgstr "Unbegrenzte permanente Flowcharts"
 msgid "Unlimited cloud-saved flowcharts"
 msgstr "Unbegrenzte in der Cloud gespeicherte Flussdiagramme"
 
+#: src/components/Checkout.tsx:132
+msgid "Unlock AI Features and never lose your work with a Pro account."
+msgstr "Entsperren Sie KI-Funktionen und verlieren Sie nie wieder Ihre Arbeit mit einem Pro-Konto."
+
 #: src/lib/hooks.ts:86
 msgid "Unpaid"
 msgstr "Unbezahlt"
@@ -1674,6 +1690,7 @@ msgstr "Upgrade auf Flowchart Fun Pro und schalte frei:"
 msgid "Upgrade to Flowchart Fun Pro to unlock SVG exports and enjoy more advanced features for your diagrams."
 msgstr "Upgrade auf Flowchart Fun Pro, um SVG-Export freizuschalten und mehr fortschrittliche Funktionen für Ihre Diagramme zu nutzen."
 
+#: src/components/Checkout.tsx:129
 #: src/components/Header.tsx:410
 msgid "Upgrade to Pro"
 msgstr "Auf Pro upgraden"
@@ -1808,7 +1825,7 @@ msgstr "Schreiben Sie wie eine Gliederung"
 msgid "Write your prompt here or click to enable the microphone, then press and hold to record."
 msgstr "Schreiben Sie hier Ihre Aufforderung oder klicken Sie auf das Mikrofon, um es zu aktivieren, dann halten Sie es gedrückt, um aufzunehmen."
 
-#: src/components/Checkout.tsx:143
+#: src/components/Checkout.tsx:141
 msgid "Yearly"
 msgstr "Jährlich"
 
@@ -1824,7 +1841,7 @@ msgstr "Mit <0>Flowchart Fun Pro</0> können Sie unbegrenzt dauerhafte Flussdiag
 msgid "You need to log in to access this page."
 msgstr "Sie müssen sich anmelden, um auf diese Seite zuzugreifen."
 
-#: src/components/Checkout.tsx:101
+#: src/components/Checkout.tsx:100
 msgid "You're already a Pro User. <0>Manage Subscription</0><1/>Have questions or feature requests? <2>Let Us Know</2>"
 msgstr "Sie sind bereits ein Pro-Benutzer. <0>Abonnement verwalten</0><1/>Haben Sie Fragen oder Feature-Anfragen? <2>Lassen Sie es uns wissen</2>"
 
@@ -1862,15 +1879,15 @@ msgstr "Vergrößern"
 msgid "Zoom Out"
 msgstr "Verkleinern"
 
-#: src/components/Checkout.tsx:213
+#: src/components/Checkout.tsx:232
 msgid "month"
 msgstr "Monat"
 
 #: src/pages/LogIn.tsx:205
 msgid "or"
 msgstr "oder"
 
-#: src/components/Checkout.tsx:176
+#: src/components/Checkout.tsx:174
 msgid "{0}"
 msgstr "{0}"