3pp-mirror/rallly
1
0
Fork 0
mirror of https://github.com/lukevella/rallly.git synced 2025-07-25 12:17:26 +02:00
Code Issues Projects Releases Packages Wiki Activity

✨ Improved pay-wall copy (#1137)

Browse source
This commit is contained in:
Luke Vella 2024-06-09 10:10:33 +01:00 • committed by GitHub
parent e0917e2fd4
commit ca15461466
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 111 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

10
apps/web/public/locales/en/app.json
View file

@ -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"
}

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

@ -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,22 +36,93 @@ 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 className="space-y-2 text-center">
<h2 className="text-center text-xl font-bold">
<Trans defaults="Pro Feature" i18nKey="proFeature" />
</div>
<div className="space-y-8">
<div>
<h2 className=" text-center text-xl font-bold">
<Trans defaults="Upgrade to Pro" i18nKey="upgradePromptTitle" />
</h2>
<p className="text-muted-foreground mx-auto max-w-xs text-center text-sm leading-relaxed">
<p className="text-muted-foreground text-center text-sm leading-relaxed">
<Trans
i18nKey="upgradeOverlaySubtitle2"
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>
<ul className="grid grid-cols-1 gap-4 text-left">
<li className="flex items-start gap-x-3">
<div>
<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">
@ -59,7 +136,6 @@ export function PayWallDialogContent({
</DialogClose>
</div>
</div>
</div>
</DialogContent>
);
}

4
packages/ui/src/badge.tsx
View file

@ -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: {