Skip to content

Commit

Permalink
✨ Use new Pay-Wall Dialog in layout (#1358)
Browse files Browse the repository at this point in the history
  • Loading branch information
@lukevella
lukevella committed Sep 20, 2024
1 parent 92f294f commit 806df18
Show file tree
Hide file tree
Showing 5 changed files with 101 additions and 89 deletions.
37 changes: 20 additions & 17 deletions apps/web/src/app/[locale]/(admin)/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,31 +5,34 @@ import { MobileNavigation } from "@/app/[locale]/(admin)/mobile-navigation";
import { ProBadge } from "@/app/[locale]/(admin)/pro-badge";
import { Sidebar } from "@/app/[locale]/(admin)/sidebar";
import { LogoLink } from "@/app/components/logo-link";
import { PayWallDialog } from "@/components/pay-wall-dialog";

export default async function Layout({
children,
}: {
children: React.ReactNode;
}) {
return (
<div className="flex flex-col pb-16 md:pb-0">
<div
className={cn(
"fixed inset-y-0 z-50 hidden w-72 shrink-0 flex-col gap-y-4 overflow-y-auto p-6 md:flex",
)}
>
<div className="flex w-full items-center justify-between gap-4">
<LogoLink />
<ProBadge />
<PayWallDialog>
<div className="flex flex-col pb-16 md:pb-0">
<div
className={cn(
"fixed inset-y-0 z-50 hidden w-72 shrink-0 flex-col gap-y-4 overflow-y-auto p-6 md:flex",
)}
>
<div className="flex w-full items-center justify-between gap-4">
<LogoLink />
<ProBadge />
</div>
<Sidebar />
</div>
<div className={cn("grow space-y-4 p-3 md:ml-72 md:p-4 lg:p-6")}>
<div className="max-w-5xl">{children}</div>
</div>
<div className="fixed bottom-0 z-20 flex h-16 w-full flex-col justify-center bg-gray-100/90 backdrop-blur-md md:hidden">
<MobileNavigation />
</div>
<Sidebar />
</div>
<div className={cn("grow space-y-4 p-3 md:ml-72 md:p-4 lg:p-6")}>
<div className="max-w-5xl">{children}</div>
</div>
<div className="fixed bottom-0 z-20 flex h-16 w-full flex-col justify-center bg-gray-100/90 backdrop-blur-md md:hidden">
<MobileNavigation />
</div>
</div>
</PayWallDialog>
);
}
39 changes: 21 additions & 18 deletions apps/web/src/app/[locale]/(admin)/sidebar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@

import { cn } from "@rallly/ui";
import { Button } from "@rallly/ui/button";
import { DialogTrigger } from "@rallly/ui/dialog";
import { Icon } from "@rallly/ui/icon";
import {
ArrowUpRightIcon,
Expand All @@ -19,6 +20,7 @@ import Link from "next/link";
import { usePathname } from "next/navigation";

import { CurrentUserAvatar } from "@/components/current-user-avatar";
import { PayWallDialog } from "@/components/pay-wall-dialog";
import { ProBadge } from "@/components/pro-badge";
import { Trans } from "@/components/trans";
import { IfGuest, useUser } from "@/components/user-provider";
Expand Down Expand Up @@ -102,24 +104,25 @@ export function Sidebar() {
<ul role="list" className="-mx-2 space-y-1">
<IfFreeUser>
<li>
<Link
href="/settings/billing"
className="mb-4 grid rounded-md border bg-gray-50 px-4 py-3 focus:border-gray-300 focus:bg-gray-200"
>
<span className="mb-2 flex items-center gap-x-2">
<SparklesIcon className="size-5 text-gray-400" />
<span className="text-sm font-bold">
<Trans i18nKey="upgrade" />
</span>
<ProBadge />
</span>
<span className="text-sm leading-relaxed text-gray-500">
<Trans
i18nKey="unlockFeatures"
defaults="Unlock all Pro features."
/>
</span>
</Link>
<PayWallDialog>
<DialogTrigger asChild>
<button className="mb-4 flex w-full flex-col rounded-md border bg-gray-50 px-4 py-3 focus:border-gray-300 focus:bg-gray-200">
<span className="mb-2 flex items-center gap-x-2">
<SparklesIcon className="size-5 text-gray-400" />
<span className="text-sm font-bold">
<Trans i18nKey="upgrade" />
</span>
<ProBadge />
</span>
<span className="text-sm leading-relaxed text-gray-500">
<Trans
i18nKey="unlockFeatures"
defaults="Unlock all Pro features."
/>
</span>
</button>
</DialogTrigger>
</PayWallDialog>
</li>
</IfFreeUser>
<IfGuest>
Expand Down
91 changes: 44 additions & 47 deletions apps/web/src/app/[locale]/poll/[urlId]/duplicate-dialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ import {
import { useRouter } from "next/navigation";

import { DuplicateForm } from "@/app/[locale]/poll/[urlId]/duplicate-form";
import { PayWallDialogContent } from "@/app/[locale]/poll/[urlId]/pay-wall-dialog-content";
import { trpc } from "@/app/providers";
import { Trans } from "@/components/trans";
import { usePostHog } from "@/utils/posthog";
Expand All @@ -30,54 +29,52 @@ export function DuplicateDialog({
const router = useRouter();
return (
<Dialog {...props}>
<PayWallDialogContent>
<DialogContent>
<DialogHeader>
<DialogTitle>
<Trans i18nKey="duplicate" />
</DialogTitle>
<DialogDescription>
<Trans i18nKey="duplicateDescription" />
</DialogDescription>
</DialogHeader>
<DuplicateForm
name={formName}
defaultValues={{
title: pollTitle,
}}
onSubmit={(data) => {
duplicate.mutate(
{ pollId, newTitle: data.title },
{
onSuccess: async (res) => {
posthog?.capture("duplicate poll", {
pollId,
newPollId: res.id,
});
queryClient.invalidate();
router.push(`/poll/${res.id}`);
},
<DialogContent>
<DialogHeader>
<DialogTitle>
<Trans i18nKey="duplicate" />
</DialogTitle>
<DialogDescription>
<Trans i18nKey="duplicateDescription" />
</DialogDescription>
</DialogHeader>
<DuplicateForm
name={formName}
defaultValues={{
title: pollTitle,
}}
onSubmit={(data) => {
duplicate.mutate(
{ pollId, newTitle: data.title },
{
onSuccess: async (res) => {
posthog?.capture("duplicate poll", {
pollId,
newPollId: res.id,
});
queryClient.invalidate();
router.push(`/poll/${res.id}`);
},
);
}}
/>
<DialogFooter>
<DialogClose asChild>
<Button>
<Trans i18nKey="cancel" />
</Button>
</DialogClose>
<Button
type="submit"
loading={duplicate.isLoading}
variant="primary"
form={formName}
>
<Trans i18nKey="duplicate" />
},
);
}}
/>
<DialogFooter>
<DialogClose asChild>
<Button>
<Trans i18nKey="cancel" />
</Button>
</DialogFooter>
</DialogContent>
</PayWallDialogContent>
</DialogClose>
<Button
type="submit"
loading={duplicate.isLoading}
variant="primary"
form={formName}
>
<Trans i18nKey="duplicate" />
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
);
}
19 changes: 14 additions & 5 deletions .../poll/[urlId]/pay-wall-dialog-content.tsx → apps/web/src/components/pay-wall-dialog.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,18 @@
"use client";

import { pricingData } from "@rallly/billing/pricing";
import { Badge } from "@rallly/ui/badge";
import { Dialog, DialogContent, DialogProps } from "@rallly/ui/dialog";
import {
Dialog,
DialogContent,
DialogProps,
useDialog,
} from "@rallly/ui/dialog";
import { RadioGroup, RadioGroupItem } from "@rallly/ui/radio-group";
import { m } from "framer-motion";
import { CheckIcon } from "lucide-react";
import Link from "next/link";
import { useState } from "react";
import React from "react";

import { Trans } from "@/components/trans";
import { UpgradeButton } from "@/components/upgrade-button";
Expand All @@ -22,11 +29,13 @@ const monthlyPriceAnnualRate = (pricingData.yearly.amount / 100 / 12).toFixed(
2,
);

export function PayWallDialogContent(props: DialogProps) {
const [period, setPeriod] = useState("yearly");
export function PayWallDialog({ children, ...forwardedProps }: DialogProps) {
const dialog = useDialog();
const [period, setPeriod] = React.useState("yearly");

return (
<Dialog {...props}>
<Dialog {...dialog.dialogProps} {...forwardedProps}>
{children}
<DialogContent className="w-[600px] p-4">
<div className="space-y-6">
<header className="pt-4">
Expand Down
4 changes: 2 additions & 2 deletions apps/web/src/components/poll/manage-poll.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,8 @@ import Link from "next/link";
import * as React from "react";

import { DuplicateDialog } from "@/app/[locale]/poll/[urlId]/duplicate-dialog";
import { PayWallDialogContent } from "@/app/[locale]/poll/[urlId]/pay-wall-dialog-content";
import { trpc } from "@/app/providers";
import { PayWallDialog } from "@/components/pay-wall-dialog";
import { FinalizePollDialog } from "@/components/poll/manage-poll/finalize-poll-dialog";
import { ProFeatureBadge } from "@/components/pro-feature-badge";
import { Trans } from "@/components/trans";
Expand Down Expand Up @@ -274,7 +274,7 @@ const ManagePoll: React.FunctionComponent<{
{...duplicateDialog.dialogProps}
/>
<FinalizePollDialog {...finalizeDialog.dialogProps} />
<PayWallDialogContent {...paywallDialog.dialogProps} />
<PayWallDialog {...paywallDialog.dialogProps} />
</>
);
};
Expand Down

0 comments on commit 806df18

Please sign in to comment.