3pp-mirror/rallly
1
0
Fork 0
mirror of https://github.com/lukevella/rallly.git synced 2025-08-06 09:59:00 +02:00
Code Issues Projects Releases Packages Wiki Activity

✨ Add more paywall triggers

Browse source
This commit is contained in:
Luke Vella 2024-09-21 14:51:51 +01:00
parent 9ff5d907a0
commit 0b808259ab
No known key found for this signature in database
GPG key ID: 469CAD687F0D784C
1 changed files with 149 additions and 127 deletions
Download patch file Download diff file Expand all files Collapse all files

56
apps/web/src/components/forms/poll-settings.tsx
View file

@ -6,6 +6,7 @@ import {
CardHeader,
CardTitle,
} from "@rallly/ui/card";
import { useDialog } from "@rallly/ui/dialog";
import { FormField } from "@rallly/ui/form";
import { Switch } from "@rallly/ui/switch";
import { AtSignIcon, EyeIcon, MessageCircleIcon, VoteIcon } from "lucide-react";
@ -13,8 +14,10 @@ import React from "react";
import { useFormContext } from "react-hook-form";
import { Trans } from "react-i18next";
import { PayWallDialog } from "@/components/pay-wall-dialog";
import { ProFeatureBadge } from "@/components/pro-feature-badge";
import { usePlan } from "@/contexts/plan";
import { usePostHog } from "@/utils/posthog";
export type PollSettingsFormData = {
requireParticipantEmail: boolean;
@ -46,33 +49,29 @@ const SettingTitle = ({
);
};
const Setting = ({
children,
disabled,
}: React.PropsWithChildren<{ disabled?: boolean }>) => {
const Component = disabled ? "div" : "label";
const Setting = ({ children }: React.PropsWithChildren) => {
return (
<Component
<label
className={cn(
disabled
? "bg-muted-background text-muted-foreground"
: "cursor-pointer bg-white hover:bg-gray-50 active:bg-gray-100",
"cursor-pointer bg-white hover:bg-gray-50 active:bg-gray-100",
"flex select-none justify-between gap-x-4 gap-y-2.5 rounded-md border p-3 sm:flex-row ",
)}
>
{children}
</Component>
</label>
);
};
export const PollSettingsForm = ({ children }: React.PropsWithChildren) => {
const form = useFormContext<PollSettingsFormData>();
const posthog = usePostHog();
const paywallDialog = useDialog();
const plan = usePlan();
const isFree = plan === "free";
return (
<>
<Card>
<CardHeader>
<div className="flex justify-between gap-x-4">
@ -118,7 +117,7 @@ export const PollSettingsForm = ({ children }: React.PropsWithChildren) => {
control={form.control}
name="requireParticipantEmail"
render={({ field }) => (
<Setting disabled={isFree}>
<Setting>
<AtSignIcon className="size-5 shrink-0 translate-y-0.5" />
<SettingContent>
<SettingTitle pro>
@ -129,10 +128,17 @@ export const PollSettingsForm = ({ children }: React.PropsWithChildren) => {
</SettingTitle>
</SettingContent>
<Switch
disabled={isFree}
checked={field.value}
onCheckedChange={(checked) => {
if (isFree) {
paywallDialog.trigger();
posthog?.capture("trigger paywall", {
setting: "require-participant-email",
from: "poll-settings",
});
} else {
field.onChange(checked);
}
}}
/>
</Setting>
@ -142,7 +148,7 @@ export const PollSettingsForm = ({ children }: React.PropsWithChildren) => {
control={form.control}
name="hideParticipants"
render={({ field }) => (
<Setting disabled={isFree}>
<Setting>
<EyeIcon className="size-5 shrink-0 translate-y-0.5" />
<SettingContent>
<SettingTitle pro>
@ -153,10 +159,17 @@ export const PollSettingsForm = ({ children }: React.PropsWithChildren) => {
</SettingTitle>
</SettingContent>
<Switch
disabled={isFree}
checked={field.value}
onCheckedChange={(checked) => {
if (isFree) {
paywallDialog.trigger();
posthog?.capture("trigger paywall", {
setting: "hide-participants",
from: "poll-settings",
});
} else {
field.onChange(checked);
}
}}
/>
</Setting>
@ -166,7 +179,7 @@ export const PollSettingsForm = ({ children }: React.PropsWithChildren) => {
control={form.control}
name="hideScores"
render={({ field }) => (
<Setting disabled={isFree}>
<Setting>
<VoteIcon className="size-5 shrink-0 translate-y-0.5" />
<SettingContent>
<SettingTitle htmlFor={field.name} pro>
@ -178,10 +191,17 @@ export const PollSettingsForm = ({ children }: React.PropsWithChildren) => {
</SettingContent>
<Switch
id={field.name}
disabled={isFree}
checked={field.value}
onCheckedChange={(checked) => {
if (isFree) {
paywallDialog.trigger();
posthog?.capture("trigger paywall", {
setting: "hide-scores",
from: "poll-settings",
});
} else {
field.onChange(checked);
}
}}
/>
</Setting>
@ -191,5 +211,7 @@ export const PollSettingsForm = ({ children }: React.PropsWithChildren) => {
</CardContent>
{children}
</Card>
<PayWallDialog {...paywallDialog.dialogProps} />
</>
);
};