From 92e396020bbeaa8eb4e09ad42da9391dde57bb34 Mon Sep 17 00:00:00 2001
From: Rob Gordon <rob.gordon@tone-row.com>
Date: Sun, 15 Sep 2024 22:21:31 -0400
Subject: [PATCH] Update Button Text Wrapping

---
 app/src/components/PaywallModal.tsx | 2 +-
 app/src/lib/usePaywallModalStore.ts | 7 ++++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/app/src/components/PaywallModal.tsx b/app/src/components/PaywallModal.tsx
index 486d5e5d..e1bbf16f 100644
--- a/app/src/components/PaywallModal.tsx
+++ b/app/src/components/PaywallModal.tsx
@@ -63,7 +63,7 @@ export default function PaywallModal() {
               <Dialog.Close asChild>
                 <Button2
                   color="blue"
-                  className="mt-4"
+                  className="mt-4 !whitespace-normal !leading-tight"
                   data-to-pricing={toPricingCode}
                   onClick={() => {
                     posthog.capture("clicked-paywall-button");
diff --git a/app/src/lib/usePaywallModalStore.ts b/app/src/lib/usePaywallModalStore.ts
index 5aebea3d..c101a9c2 100644
--- a/app/src/lib/usePaywallModalStore.ts
+++ b/app/src/lib/usePaywallModalStore.ts
@@ -1,3 +1,4 @@
+import { t } from "@lingui/macro";
 import { create } from "zustand";
 
 type PaywallModalStore = {
@@ -34,8 +35,12 @@ export function showPaywall({
   movieUrl,
   imgUrl = paywallImageUrl,
   toPricingCode,
-  buttonText = "Learn More", // New parameter with default value
+  buttonText,
 }: Omit<PaywallModalStore, "open">) {
+  if (!buttonText) {
+    buttonText = t`Learn More`;
+  }
+
   // If there is no movie URL, we will preload the image
   if (!movieUrl) {
     // Pre-load the paywall image