✨ Improved pay-wall copy (#1137)

apps/web/public/locales/en/app.json

@@ -252,5 +252,13 @@
   "deleteAccountInstruction": "Please confirm your email address to delete your account",
   "emailMismatch": "Email does not match the account email",
   "dangerZone": "Danger Zone",
-  "dangerZoneAccount": "Delete your account permanently. This action cannot be undone."
+  "dangerZoneAccount": "Delete your account permanently. This action cannot be undone.",
+  "upgradePromptTitle": "Upgrade to Pro",
+  "upgradeOverlaySubtitle3": "Unlock these feature by upgrading to a Pro plan.",
+  "finalizeFeatureDescription": "Select a final date for your event and notify participants.",
+  "duplicateTitle": "Duplicate",
+  "duplicateFeatureDescription": "Reuse dates and settings of a poll to create a new one.",
+  "advancedSettingsTitle": "Advanced Settings",
+  "advancedSettingsDescription": "Hide participants, hide scores, require participant email address.",
+  "keepPollsIndefinitely": "Keep Polls Indefinitely"
 }

apps/web/src/app/[locale]/poll/[urlId]/pay-wall-dialog-content.tsx

@@ -2,6 +2,12 @@ import { Badge } from "@rallly/ui/badge";
 import { Button } from "@rallly/ui/button";
 import { DialogClose, DialogContent } from "@rallly/ui/dialog";
 import { m } from "framer-motion";
+import {
+  CalendarCheck2Icon,
+  ClockIcon,
+  CopyIcon,
+  Settings2Icon,
+} from "lucide-react";
 import Link from "next/link";
 
 import { Trans } from "@/components/trans";
@@ -30,34 +36,104 @@ export function PayWallDialogContent({
             className="text-center"
             aria-hidden="true"
           >
-            <Badge variant="primary">
+            <Badge size="lg" variant="primary">
               <Trans i18nKey="planPro" />
             </Badge>
           </m.div>
-          <div className="mt-4 space-y-6">
+        </div>
-            <div className="space-y-2 text-center">
+        <div className="space-y-8">
-              <h2 className="text-center text-xl font-bold">
+          <div>
-                <Trans defaults="Pro Feature" i18nKey="proFeature" />
+            <h2 className=" text-center text-xl font-bold">
-              </h2>
+              <Trans defaults="Upgrade to Pro" i18nKey="upgradePromptTitle" />
-              <p className="text-muted-foreground mx-auto max-w-xs text-center text-sm leading-relaxed">
+            </h2>
-                <Trans
+            <p className="text-muted-foreground text-center text-sm leading-relaxed">
-                  i18nKey="upgradeOverlaySubtitle2"
+              <Trans
-                  defaults="Please upgrade to a paid plan to use this feature. This is how we keep the lights on :)"
+                i18nKey="upgradeOverlaySubtitle3"
-                />
+                defaults="Unlock these feature by upgrading to a Pro plan."
-              </p>
+              />
-            </div>
+            </p>
-            <div className="grid gap-2.5">
+          </div>
-              <Button variant="primary" asChild>
+          <ul className="grid grid-cols-1 gap-4 text-left">
-                <Link href="/settings/billing">
+            <li className="flex items-start gap-x-3">
-                  <Trans i18nKey="upgrade" defaults="Upgrade" />
+              <div>
-                </Link>
+                <CalendarCheck2Icon className="size-5 text-purple-600" />
+              </div>
+              <div>
+                <h3 className="text-sm font-semibold">
+                  <Trans defaults="Finalize" i18nKey="finalize" />
+                </h3>
+                <p className="text-muted-foreground mt-0.5 text-pretty text-sm">
+                  <Trans
+                    i18nKey="finalizeFeatureDescription"
+                    defaults="Select a final date for your event and notify participants."
+                  />
+                </p>
+              </div>
+            </li>
+            <li className="flex items-start gap-x-3">
+              <CopyIcon className="size-5 text-purple-600" />
+              <div>
+                <h3 className="text-sm font-semibold">
+                  <Trans defaults="Duplicate" i18nKey="duplicateTitle" />
+                </h3>
+                <p className="text-muted-foreground mt-0.5 text-pretty text-sm">
+                  <Trans
+                    i18nKey="duplicateFeatureDescription"
+                    defaults="Reuse dates and settings of a poll to create a new one."
+                  />
+                </p>
+              </div>
+            </li>
+            <li className="flex items-start gap-x-3">
+              <div>
+                <Settings2Icon className="size-5 text-purple-600" />
+              </div>
+              <div>
+                <h3 className="text-sm font-semibold">
+                  <Trans
+                    defaults="Advanced Settings"
+                    i18nKey="advancedSettingsTitle"
+                  />
+                </h3>
+                <p className="text-muted-foreground mt-0.5 text-pretty text-sm">
+                  <Trans
+                    i18nKey="advancedSettingsDescription"
+                    defaults="Hide participants, hide scores, require participant email address."
+                  />
+                </p>
+              </div>
+            </li>
+            <li className="flex items-start gap-x-3">
+              <div>
+                <ClockIcon className="size-5 text-purple-600" />
+              </div>
+              <div>
+                <h3 className="text-sm font-semibold">
+                  <Trans
+                    defaults="Keep Polls Indefinitely"
+                    i18nKey="keepPollsIndefinitely"
+                  />
+                </h3>
+                <p className="text-muted-foreground mt-0.5 text-pretty text-sm">
+                  <Trans
+                    i18nKey="keepPollsIndefinitely"
+                    defaults="Polls will not be auto-deleted due to inactivity."
+                  />
+                </p>
+              </div>
+            </li>
+          </ul>
+          <div className="grid gap-2.5">
+            <Button variant="primary" asChild>
+              <Link href="/settings/billing">
+                <Trans i18nKey="upgrade" defaults="Upgrade" />
+              </Link>
+            </Button>
+            <DialogClose asChild>
+              <Button>
+                <Trans i18nKey="notToday" defaults="Not Today" />
               </Button>
-              <DialogClose asChild>
+            </DialogClose>
-                <Button>
-                  <Trans i18nKey="notToday" defaults="Not Today" />
-                </Button>
-              </DialogClose>
-            </div>
           </div>
         </div>
       </DialogContent>

packages/ui/src/badge.tsx

@@ -4,7 +4,7 @@ import * as React from "react";
 import { cn } from "./lib/utils";
 
 const badgeVariants = cva(
-  "inline-flex group whitespace-nowrap items-center rounded-full border justify-center text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  "inline-flex group whitespace-nowrap items-center rounded-full border justify-center font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
   {
     variants: {
       variant: {
@@ -17,7 +17,7 @@ const badgeVariants = cva(
       },
       size: {
         md: "h-5 min-w-5 text-xs px-1.5",
-        lg: "h-7 min-w-7 px-2.5",
+        lg: "h-7 text-sm min-w-7 px-2.5",
       },
     },
     defaultVariants: {