✨ Use new Pay-Wall Dialog in layout

apps/web/src/app/[locale]/(admin)/layout.tsx

@@ -5,6 +5,7 @@ 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,
@@ -12,6 +13,7 @@ export default async function Layout({
   children: React.ReactNode;
 }) {
   return (
+    <PayWallDialog>
       <div className="flex flex-col pb-16 md:pb-0">
         <div
           className={cn(
@@ -31,5 +33,6 @@ export default async function Layout({
           <MobileNavigation />
         </div>
       </div>
+    </PayWallDialog>
   );
 }

apps/web/src/app/[locale]/(admin)/sidebar.tsx

@@ -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,
@@ -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";
@@ -102,10 +104,9 @@ 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"
-                >
+                <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">
@@ -119,7 +120,9 @@ export function Sidebar() {
                           defaults="Unlock all Pro features."
                         />
                       </span>
-                </Link>
+                    </button>
+                  </DialogTrigger>
+                </PayWallDialog>
               </li>
             </IfFreeUser>
             <IfGuest>

apps/web/src/app/[locale]/poll/[urlId]/duplicate-dialog.tsx

@@ -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";
@@ -30,7 +29,6 @@ export function DuplicateDialog({
   const router = useRouter();
   return (
     <Dialog {...props}>
-      <PayWallDialogContent>
       <DialogContent>
         <DialogHeader>
           <DialogTitle>
@@ -77,7 +75,6 @@ export function DuplicateDialog({
           </Button>
         </DialogFooter>
       </DialogContent>
-      </PayWallDialogContent>
     </Dialog>
   );
 }

apps/web/src/components/pay-wall-dialog.tsx

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

apps/web/src/components/poll/manage-poll.tsx

@@ -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";
@@ -274,7 +274,7 @@ const ManagePoll: React.FunctionComponent<{
         {...duplicateDialog.dialogProps}
       />
       <FinalizePollDialog {...finalizeDialog.dialogProps} />
-      <PayWallDialogContent {...paywallDialog.dialogProps} />
+      <PayWallDialog {...paywallDialog.dialogProps} />
     </>
   );
 };