Merge pull request #723 from tone-row/dev

v1.56.2
tone-row · Aug 25, 2024 · a7588f4 · a7588f4
2 parents 2621d73 + e9bbaac
commit a7588f4
Show file tree

Hide file tree

Showing 22 changed files with 428 additions and 150 deletions.
diff --git a/api/prompt/_shared.ts b/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}`;

diff --git a/app/package.json b/app/package.json
@@ -1,6 +1,6 @@
 {
  "name": "app",
- "version": "1.56.1",
+ "version": "1.56.2",
  "main": "module/module.js",
  "license": "MIT",
  "scripts": {

diff --git a/app/src/components/Checkout.tsx b/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>
  );

diff --git a/app/src/components/Layout.tsx b/app/src/components/Layout.tsx
@@ -1,6 +1,7 @@
+/* eslint-disable jsx-a11y/no-distracting-elements */
 import cx from "classnames";
 import { X } from "phosphor-react";
-import { memo, ReactNode, Suspense } from "react";
+import { memo, ReactNode, Suspense, useState } from "react";
 import { Link } from "react-router-dom";
 
 import { useFullscreen, useIsEditorView } from "../lib/hooks";
@@ -11,12 +12,15 @@ import styles from "./Layout.module.css";
 import Loading from "./Loading";
 import { VersionCheck } from "./VersionCheck";
 import { PaywallModal } from "./PaywallModal";
+import { Trans } from "@lingui/macro";
 
 const Layout = memo(({ children }: { children: ReactNode }) => {
  const isFullscreen = useFullscreen();
  let [showBanner, message, messageType] = getShowBannerAndMessage();
  const isEditorView = useIsEditorView();
 
+ const [showPHBanner, setShowPHBanner] = useState<boolean>(isPHBannerTime());
+
  // fullscreen disables banners
  if (isFullscreen) {
  showBanner = false;
@@ -29,8 +33,19 @@ const Layout = memo(({ children }: { children: ReactNode }) => {
  className={styles.LayoutWrapper}
  data-showing={isEditorView ? "editor" : undefined}
  data-fullscreen={isFullscreen}
- data-banner={showBanner}
+ data-banner={showBanner || showPHBanner}
  >
+ {showPHBanner ? (
+ <ProductHuntBanner
+ hide={() => {
+ setShowPHBanner(false);
+ // set a cookie to not show the banner again
+ document.cookie = `showPHBanner=false; path=/; max-age=${
+ 60 * 60 * 24 * 30
+ }`;
+ }}
+ />
+ ) : null}
  {showBanner ? (
  <div
  className={cx("flex justify-center items-center w-full gap-2", {
@@ -76,3 +91,56 @@ function getShowBannerAndMessage(): [boolean, string, "error" | "info"] {
  }
  return [false, "", "info"];
 }
+
+/**
+ * Extremely Temporary Producthunt Banner
+ */
+export function ProductHuntBanner({ hide }: { hide: () => void }) {
+ return (
+ <a
+ href="https://www.producthunt.com/posts/flowchart-fun-2?embed=true&utm_source=badge-featured&utm_medium=badge&utm_souce=badge-flowchart-fun-2"
+ target="_blank"
+ rel="noopener noreferrer"
+ className="relative bg-gradient-to-b from-orange-400 to-orange-300/80 text-[#443214] hidden md:flex items-center justify-center group"
+ onClick={hide}
+ >
+ <p className="text-sm font-bold pl-4 z-10">
+ <Trans>
+ Love Flowchart Fun? Support us with a vote on Product Hunt!
+ </Trans>
+ </p>
+ <div className="w-[64px] h-[52px] overflow-hidden relative mix-blend-multiply rounded-full z-10">
+ <div className="absolute -top-px -right-px w-[250px] h-[54px]">
+ <img
+ src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=483202&theme=neutral"
+ alt="Flowchart Fun - Text-to-Flowchart with AI Magic 🪄 | Product Hunt"
+ width={250}
+ height={54}
+ />
+ </div>
+ </div>
+ <div className="absolute top-0 left-0 w-full h-full bg-gradient-to-b from-transparent to-amber-500 hidden group-hover:block animate-pulseIn" />
+ </a>
+ );
+}
+
+/**
+ * This function returns true if it's August 25th, 2024, between 12:00am and 11:59pm PST
+ */
+export function isPHBannerTime() {
+ // check if the cookie exists
+ const cookie = document.cookie
+ .split("; ")
+ .find((row) => row.startsWith("showPHBanner="));
+ if (cookie) {
+ return false;
+ }
+
+ const pstDate = new Date().toLocaleString("en-US", {
+ timeZone: "America/Los_Angeles",
+ });
+ const [date] = pstDate.split(", ");
+ const [month, day, year] = date.split("/").map(Number);
+
+ return year === 2024 && month === 8 && day === 25;
+}
diff --git a/app/src/index.css b/app/src/index.css
@@ -495,3 +495,13 @@ body.dark .convert-on-paste-overlay {
  hsl(265.79, 79.08%, 30%) 100%
  );
 }
+
+.clip-path-rectangle {
+ @apply relative;
+ clip-path: polygon(
+ calc(100% - 64px) 0,
+ 100% 0,
+ 100% 100%,
+ calc(100% - 64px) 100%
+ );
+}
diff --git a/app/src/locales/de/messages.js b/app/src/locales/de/messages.js
diff --git a/app/src/locales/de/messages.po b/app/src/locales/de/messages.po
@@ -147,14 +147,15 @@ msgid "Become a Pro User"
 msgstr "Werden Sie ein Pro-Benutzer"
 
 #: src/lib/getDefaultText.ts:5
+#: src/lib/getDefaultText.ts:14
 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"
 
@@ -197,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."
@@ -236,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."
@@ -691,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"
@@ -955,10 +956,14 @@ 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"
 
+#: src/components/Layout.tsx:108
+msgid "Love Flowchart Fun? Support us with a vote on Product Hunt!"
+msgstr "Liebst du den Flowchart Spaß? Unterstütze uns mit einer Stimme auf Product Hunt!"
+
 #: src/components/Settings.tsx:151
 msgid "Make a One-Time Donation"
 msgstr "Machen Sie eine einmalige Spende"
@@ -975,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"
 
@@ -1144,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"
@@ -1274,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"
@@ -1295,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"
@@ -1645,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"
@@ -1669,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"
@@ -1803,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"
 
@@ -1819,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>"
 
@@ -1857,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}"
 

diff --git a/app/src/locales/en/messages.js b/app/src/locales/en/messages.js