Update Sandbox Paywall Copy (#700)

* Update Sandbox Paywall Copy

* Translations

* Fix testid

app/src/components/SandboxWarning.tsx

@@ -6,6 +6,7 @@ import produce from "immer";
 import { Link } from "react-router-dom";
 import { Button2 } from "../ui/Shared";
 import { Trans } from "@lingui/macro";
+import classNames from "classnames";
 
 /**
  * A modal window that appears for people working in the sandbox after 1 minute.
@@ -41,20 +42,42 @@ export function SandboxWarning() {
  maxWidthClass="max-w-lg w-[calc(100%-3rem)]"
  data-testid="sandbox-warning"
  >
- <h2 className="font-bold text-xl leading-normal text-center">
- <Trans>Your Work is Important</Trans>
+ <h2 className="font-bold text-xl leading-tight text-center text-wrap-balance">
+ <Trans>Your Creativity Deserves to be Saved</Trans>
  </h2>
  <P>
  <Trans>
- This is your sandbox. It's a great place for experimentation, but{" "}
- <u className="underline-offset-2">it resets daily</u>.
+ This sandbox is perfect for experimenting, but remember - it
+ resets daily. Upgrade now and keep your current work!
  </Trans>
  </P>
+ <div className="text-sm">
+ <p className="font-semibold mb-2">
+ <Trans>Upgrade to Flowchart Fun Pro and unlock:</Trans>
+ </p>
+ <ul className="list-disc pl-5 space-y-1">
+ <li>
+ <Trans>Unlimited cloud-saved flowcharts</Trans>
+ </li>
+ <li>
+ <Trans>AI-powered editing to supercharge your workflow</Trans>
+ </li>
+ <li>
+ <Trans>Data import feature for complex diagrams</Trans>
+ </li>
+ <li>
+ <Trans>Local saving for offline access</Trans>
+ </li>
+ </ul>
+ </div>
  <P>
  <Trans>
- You can save unlimited flowcharts in the cloud or to your
- computer, as well as get access to features like AI Editing and
- Data Imports for less than the price of a cup of coffee.
+ All this for just $4/month - less than your daily coffee ☕
+ </Trans>
+ </P>
+ <P className="text-sm text-neutral-600 dark:text-neutral-400">
+ <Trans>
+ Join 2000+ professionals who've upgraded their workflow
  </Trans>
  </P>
  <Button2
@@ -63,25 +86,41 @@ export function SandboxWarning() {
  className="mt-3"
  data-testid="sandbox-warning-learn-more"
  data-to-pricing="Sandbox Warning"
+ data-session-activity="SandboxWarning/upgrade"
  onClick={() => {
  useSandboxWarning.setState({ isOpen: false });
  }}
  >
  <Link to="/pricing">
- <Trans>
- Learn about <span>Flowchart Fun Pro</span>
- </Trans>
+ <Trans>Upgrade Now - Save My Work</Trans>
  </Link>
  </Button2>
+ <button
+ className="text-xs text-neutral-400 hover:text-neutral-600 dark:text-neutral-500 dark:hover:text-neutral-300 transition-colors"
+ onClick={() => useSandboxWarning.setState({ isOpen: false })}
+ >
+ <Trans>Continue in Sandbox (Resets daily, work not saved)</Trans>
+ </button>
  </Content>
  </Dialog.Portal>
  </Dialog.Root>
  );
 }
 
-function P({ children }: { children: React.ReactNode }) {
+function P({
+ children,
+ className,
+}: {
+ children: React.ReactNode;
+ className?: string;
+}) {
  return (
- <p className="text-neutral-700 dark:text-neutral-300 leading-normal text-sm">
+ <p
+ className={classNames(
+ "text-neutral-700 dark:text-neutral-300 leading-normal text-sm",
+ className
+ )}
+ >
  {children}
  </p>
  );

app/src/locales/de/messages.po

@@ -49,6 +49,10 @@ msgstr "AI Anforderungslimit erreicht"
 msgid "AI-Powered Flowchart Creation"
 msgstr "KI-unterstützte Erstellung von Flussdiagrammen"
 
+#: src/components/SandboxWarning.tsx:63
+msgid "AI-powered editing to supercharge your workflow"
+msgstr "KI-unterstützte Bearbeitung zur Beschleunigung Ihres Arbeitsablaufs"
+
 #: src/components/Settings.tsx:92
 msgid "About"
 msgstr "Über"
@@ -80,6 +84,10 @@ msgstr "Erweiterte Exportoptionen (PNG, JPG, SVG)"
 msgid "Align Nodes"
 msgstr "Ausrichten von Knoten"
 
+#: src/components/SandboxWarning.tsx:74
+msgid "All this for just $4/month - less than your daily coffee ☕"
+msgstr "All dies für nur $4/Monat - weniger als Ihr täglicher Kaffee ☕"
+
 #: src/pages/Account.tsx:278
 msgid "Amount"
 msgstr "Betrag"
@@ -300,6 +308,10 @@ msgstr "Container sind Knoten, die andere Knoten enthalten. Sie werden mit gesch
 msgid "Continue"
 msgstr "Weiter"
 
+#: src/components/SandboxWarning.tsx:102
+msgid "Continue in Sandbox (Resets daily, work not saved)"
+msgstr "Weiter im Sandbox-Modus (wird täglich zurückgesetzt, Arbeit wird nicht gespeichert)"
+
 #: src/components/AiToolbar.tsx:34
 #: src/components/ConvertOnPasteOverlay.tsx:107
 msgid "Convert"
@@ -422,6 +434,10 @@ msgstr "Dunkelmodus"
 msgid "Data Import (Visio, Lucidchart, CSV)"
 msgstr "Datenimport (Visio, Lucidchart, CSV)"
 
+#: src/components/SandboxWarning.tsx:66
+msgid "Data import feature for complex diagrams"
+msgstr "Datenimportfunktion für komplexe Diagramme"
+
 #: src/pages/Account.tsx:275
 msgid "Date"
 msgstr "Datum"
@@ -808,6 +824,10 @@ msgstr "Ist dies ein Dokument? Möchtest du es in ein Flussdiagramm umwandeln?"
 msgid "JSON Canvas is a JSON representation of your diagram used by <0>Obsidian</0> Canvas and other applications."
 msgstr "JSON Canvas ist eine JSON-Repräsentation Ihres Diagramms, die von <0>Obsidian</0> Canvas und anderen Anwendungen verwendet wird."
 
+#: src/components/SandboxWarning.tsx:79
+msgid "Join 2000+ professionals who've upgraded their workflow"
+msgstr "Werden Sie Teil von über 2000 Fachleuten, die ihren Arbeitsablauf verbessert haben"
+
 #: src/pages/Pricing.tsx:37
 msgid "Keep Things Private"
 msgstr "Halte Dinge privat"
@@ -843,10 +863,6 @@ msgstr "Mehr erfahren"
 msgid "Learn Syntax"
 msgstr "Syntax lernen"
 
-#: src/components/SandboxWarning.tsx:71
-msgid "Learn about <0>Flowchart Fun Pro</0>"
-msgstr "Erfahren Sie mehr über <0>Flowchart Fun Pro</0>"
-
 #: src/pages/Charts.tsx:247
 msgid "Learn about Flowchart Fun Pro"
 msgstr "Erfahren Sie mehr über Flowchart Fun Pro"
@@ -910,6 +926,10 @@ msgstr "Layout und Stile laden"
 msgid "Local File Support"
 msgstr "Lokale Dateiunterstützung"
 
+#: src/components/SandboxWarning.tsx:69
+msgid "Local saving for offline access"
+msgstr "Lokales Speichern für den Offline-Zugriff"
+
 #: src/components/GraphFloatingMenu.tsx:79
 #: src/components/GraphFloatingMenu.tsx:81
 msgid "Lock Zoom to Graph"
@@ -1510,14 +1530,14 @@ msgstr "Diese Aktion kann nicht rückgängig gemacht werden."
 msgid "This feature is only available to pro users. <0>Become a pro user</0> to unlock it."
 msgstr "Diese Funktion ist nur für Pro-Benutzer verfügbar. <0>Werden Sie Pro-Nutzer</0>, um es freizuschalten."
 
-#: src/components/SandboxWarning.tsx:48
-msgid "This is your sandbox. It's a great place for experimentation, but <0>it resets daily</0>."
-msgstr "Das ist dein Sandkasten. Es ist ein großartiger Ort für Experimente, aber <0>er wird täglich zurückgesetzt</0>."
-
 #: src/pages/New.tsx:304
 msgid "This may take between 30 seconds and 2 minutes depending on the length of your input."
 msgstr "Dies kann je nach Länge Ihrer Eingabe zwischen 30 Sekunden und 2 Minuten dauern."
 
+#: src/components/SandboxWarning.tsx:49
+msgid "This sandbox is perfect for experimenting, but remember - it resets daily. Upgrade now and keep your current work!"
+msgstr "Diese Sandbox ist perfekt zum Experimentieren, aber denk daran - sie wird täglich zurückgesetzt. Upgrade jetzt und behalte deine aktuelle Arbeit!"
+
 #: src/components/LoadTemplateDialog.tsx:166
 msgid "This will replace the current content."
 msgstr "Dies ersetzt den aktuellen Inhalt."
@@ -1616,6 +1636,10 @@ msgstr "Unbegrenzte Flowcharts"
 msgid "Unlimited Permanent Flowcharts"
 msgstr "Unbegrenzte permanente Flowcharts"
 
+#: src/components/SandboxWarning.tsx:60
+msgid "Unlimited cloud-saved flowcharts"
+msgstr "Unbegrenzte in der Cloud gespeicherte Flussdiagramme"
+
 #: src/lib/hooks.ts:86
 msgid "Unpaid"
 msgstr "Unbezahlt"
@@ -1624,10 +1648,18 @@ msgstr "Unbezahlt"
 msgid "Update Email"
 msgstr "E-Mail aktualisieren"
 
+#: src/components/SandboxWarning.tsx:95
+msgid "Upgrade Now - Save My Work"
+msgstr "Jetzt upgraden - Meine Arbeit speichern"
+
 #: src/lib/usePromptStore.ts:103
 msgid "Upgrade for Unlimited AI"
 msgstr "Upgrade für unbegrenzte KI"
 
+#: src/components/SandboxWarning.tsx:56
+msgid "Upgrade to Flowchart Fun Pro and unlock:"
+msgstr "Upgrade auf Flowchart Fun Pro und schalte frei:"
+
 #: src/components/DownloadDropdown.tsx:81
 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."
@@ -1775,10 +1807,6 @@ msgstr "Sie sind dabei, {numNodes} Knoten und {numEdges} Kanten zu Ihrem Graphen
 msgid "You can create unlimited permanent flowcharts with <0>Flowchart Fun Pro</0>."
 msgstr "Mit <0>Flowchart Fun Pro</0> können Sie unbegrenzt dauerhafte Flussdiagramme erstellen."
 
-#: src/components/SandboxWarning.tsx:54
-msgid "You can save unlimited flowcharts in the cloud or to your computer, as well as get access to features like AI Editing and Data Imports for less than the price of a cup of coffee."
-msgstr "Du kannst unbegrenzt Flussdiagramme in der Cloud oder auf deinem Computer speichern und Zugang zu Funktionen wie KI-Bearbeitung und Datenimporten erhalten, und das alles für weniger als den Preis einer Tasse Kaffee."
-
 #: src/pages/LogIn.tsx:178
 msgid "You need to log in to access this page."
 msgstr "Sie müssen sich anmelden, um auf diese Seite zuzugreifen."
@@ -1795,14 +1823,14 @@ msgstr "Du hast alle kostenlosen KI-Konvertierungen für heute genutzt. Upgrade
 msgid "Your Charts"
 msgstr "Ihre Diagramme"
 
+#: src/components/SandboxWarning.tsx:46
+msgid "Your Creativity Deserves to be Saved"
+msgstr "Deine Kreativität verdient es, gespeichert zu werden."
+
 #: src/pages/Charts.tsx:295
 msgid "Your Sandbox is a space to freely experiment with our flowchart tools, resetting every day for a fresh start."
 msgstr "Dein Sandkasten ist ein Raum, um frei mit unseren Flussdiagramm-Tools zu experimentieren, die jeden Tag zurückgesetzt werden, damit du einen frischen Start hast."
 
-#: src/components/SandboxWarning.tsx:45
-msgid "Your Work is Important"
-msgstr "Deine Arbeit ist wichtig."
-
 #: src/pages/Charts.tsx:264
 msgid "Your charts are read-only because your account is no longer active. Visit your <0>account</0> page to learn more."
 msgstr "Ihre Diagramme sind schreibgeschützt, da Ihr Konto nicht mehr aktiv ist. Besuchen Sie Ihre <0>Kontoseite</0>, um mehr zu erfahren."