3pp-mirror/rallly
1
0
Fork 0
mirror of https://github.com/lukevella/rallly.git synced 2025-04-29 18:26:34 +02:00
Code Issues Projects Releases Packages Wiki Activity

💄Update pay wall dialog

Browse source 
- Select monthly by default
- Change order to monthly first
This commit is contained in:
Luke Vella 2025-03-31 21:09:52 +01:00
parent 7bad10fd19
commit 61e0281f39
No known key found for this signature in database
GPG key ID: 469CAD687F0D784C
1 changed files with 15 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
apps/web/src/components/pay-wall-dialog.tsx
View file

@ -27,7 +27,7 @@ const monthlyPriceAnnualRate = (pricingData.yearly.amount / 100 / 12).toFixed(
export function PayWallDialog({ children, ...forwardedProps }: DialogProps) { export function PayWallDialog({ children, ...forwardedProps }: DialogProps) {
const dialog = useDialog(); const dialog = useDialog();
const [period, setPeriod] = React.useState("yearly"); const [period, setPeriod] = React.useState("monthly");
return ( return (
<Dialog {...dialog.dialogProps} {...forwardedProps}> <Dialog {...dialog.dialogProps} {...forwardedProps}>
@ -90,6 +90,19 @@ export function PayWallDialog({ children, ...forwardedProps }: DialogProps) {
</header> </header>
<section> <section>
<RadioGroup value={period} onValueChange={setPeriod}> <RadioGroup value={period} onValueChange={setPeriod}>
<li className="focus-within:ring-primary relative flex items-center justify-between rounded-lg border bg-gray-50 p-4 focus-within:ring-2">
<div className="flex items-center gap-4">
<RadioGroupItem id="monthly" value="monthly" />
<label className="text-base font-semibold" htmlFor="monthly">
<span role="presentation" className="absolute inset-0" />
<Trans defaults="1 month" i18nKey="1month" />
</label>
</div>
<p className="flex items-baseline gap-1">
<span className="text-xl font-semibold">${monthlyPrice}</span>
<span className="text-muted-foreground text-sm">/ mo</span>
</p>
</li>
<li className="focus-within:ring-primary relative flex items-center justify-between rounded-lg border bg-gray-50 p-4 focus-within:ring-2"> <li className="focus-within:ring-primary relative flex items-center justify-between rounded-lg border bg-gray-50 p-4 focus-within:ring-2">
<div className="space-y-1"> <div className="space-y-1">
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
@ -106,7 +119,7 @@ export function PayWallDialog({ children, ...forwardedProps }: DialogProps) {
/> />
</Badge> </Badge>
</div> </div>
<p className="text-muted-foreground flex items-baseline gap-1.5 pl-8 text-sm"> <p className="text-muted-foreground pointer-events-none flex items-baseline gap-1.5 pl-8 text-sm">
<span>${yearlyPrice}</span> <span>${yearlyPrice}</span>
<span className="line-through opacity-50"> <span className="line-through opacity-50">
${((pricingData.monthly.amount * 12) / 100).toFixed(2)} ${((pricingData.monthly.amount * 12) / 100).toFixed(2)}
@ -120,19 +133,6 @@ export function PayWallDialog({ children, ...forwardedProps }: DialogProps) {
<span className="text-muted-foreground text-sm">/ mo</span> <span className="text-muted-foreground text-sm">/ mo</span>
</p> </p>
</li> </li>
<li className="focus-within:ring-primary relative flex items-center justify-between rounded-lg border bg-gray-50 p-4 focus-within:ring-2">
<div className="flex items-center gap-4">
<RadioGroupItem id="monthly" value="monthly" />
<label className="text-base font-semibold" htmlFor="monthly">
<span role="presentation" className="absolute inset-0" />
<Trans defaults="1 month" i18nKey="1month" />
</label>
</div>
<p className="flex items-baseline gap-1">
<span className="text-xl font-semibold">${monthlyPrice}</span>
<span className="text-muted-foreground text-sm">/ mo</span>
</p>
</li>
</RadioGroup> </RadioGroup>
</section> </section>
<footer className="space-y-4"> <footer className="space-y-4">