fix: wip

apps/remix/app/components/(dashboard)/layout/app-banner.tsx

@@ -0,0 +1,28 @@
+import { type TSiteSettingsBannerSchema } from '@documenso/lib/server-only/site-settings/schemas/banner';
+
+export type AppBannerProps = {
+  banner: TSiteSettingsBannerSchema;
+};
+
+export const AppBanner = ({ banner }: AppBannerProps) => {
+  if (!banner.enabled) {
+    return null;
+  }
+
+  return (
+    <div className="mb-2" style={{ background: banner.data.bgColor }}>
+      <div
+        className="mx-auto flex h-auto max-w-screen-xl items-center justify-center px-4 py-3 text-sm font-medium"
+        style={{ color: banner.data.textColor }}
+      >
+        <div className="flex items-center">
+          <span dangerouslySetInnerHTML={{ __html: banner.data.content }} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+// Banner
+// Custom Text
+// Custom Text with Custom Icon

apps/remix/app/components/(dashboard)/layout/banner.tsx

@@ -1,29 +0,0 @@
-import { getSiteSettings } from '@documenso/lib/server-only/site-settings/get-site-settings';
-import { SITE_SETTINGS_BANNER_ID } from '@documenso/lib/server-only/site-settings/schemas/banner';
-
-export const Banner = async () => {
-  const banner = await getSiteSettings().then((settings) =>
-    settings.find((setting) => setting.id === SITE_SETTINGS_BANNER_ID),
-  );
-
-  return (
-    <>
-      {banner && banner.enabled && (
-        <div className="mb-2" style={{ background: banner.data.bgColor }}>
-          <div
-            className="mx-auto flex h-auto max-w-screen-xl items-center justify-center px-4 py-3 text-sm font-medium"
-            style={{ color: banner.data.textColor }}
-          >
-            <div className="flex items-center">
-              <span dangerouslySetInnerHTML={{ __html: banner.data.content }} />
-            </div>
-          </div>
-        </div>
-      )}
-    </>
-  );
-};
-
-// Banner
-// Custom Text
-// Custom Text with Custom Icon

apps/remix/app/components/forms/signup.tsx

@@ -13,6 +13,7 @@ import { z } from 'zod';
 
 import communityCardsImage from '@documenso/assets/images/community-cards.png';
 import { authClient } from '@documenso/auth/client';
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import { ZPasswordSchema } from '@documenso/trpc/server/auth-router/schema';
@@ -93,7 +94,7 @@ export const SignUpForm = ({
   const { _ } = useLingui();
   const { toast } = useToast();
 
-  // const analytics = useAnalytics(); // Todo
+  const analytics = useAnalytics();
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
 
@@ -134,11 +135,11 @@ export const SignUpForm = ({
         duration: 5000,
       });
 
-      // analytics.capture('App: User Sign Up', {
-      //   email,
-      //   timestamp: new Date().toISOString(),
-      //   custom_campaign_params: { src: utmSrc },
-      // });
+      analytics.capture('App: User Sign Up', {
+        email,
+        timestamp: new Date().toISOString(),
+        custom_campaign_params: { src: utmSrc },
+      });
     } catch (err) {
       const error = AppError.parseError(err);
 

apps/remix/app/components/general/teams/team-layout-billing-banner.tsx

@@ -0,0 +1,138 @@
+import { useState } from 'react';
+
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+import { AlertTriangle } from 'lucide-react';
+import { match } from 'ts-pattern';
+
+import { canExecuteTeamAction } from '@documenso/lib/utils/teams';
+import type { TeamMemberRole } from '@documenso/prisma/client';
+import { type Subscription, SubscriptionStatus } from '@documenso/prisma/client';
+import { trpc } from '@documenso/trpc/react';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogTitle,
+} from '@documenso/ui/primitives/dialog';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type TeamLayoutBillingBannerProps = {
+  subscription: Subscription;
+  teamId: number;
+  userRole: TeamMemberRole;
+};
+
+export const TeamLayoutBillingBanner = ({
+  subscription,
+  teamId,
+  userRole,
+}: TeamLayoutBillingBannerProps) => {
+  const { _ } = useLingui();
+  const { toast } = useToast();
+
+  const [isOpen, setIsOpen] = useState(false);
+
+  const { mutateAsync: createBillingPortal, isPending } =
+    trpc.team.createBillingPortal.useMutation();
+
+  const handleCreatePortal = async () => {
+    try {
+      const sessionUrl = await createBillingPortal({ teamId });
+
+      window.open(sessionUrl, '_blank');
+
+      setIsOpen(false);
+    } catch (err) {
+      toast({
+        title: _(msg`Something went wrong`),
+        description: _(
+          msg`We are unable to proceed to the billing portal at this time. Please try again, or contact support.`,
+        ),
+        variant: 'destructive',
+        duration: 10000,
+      });
+    }
+  };
+
+  if (subscription.status === SubscriptionStatus.ACTIVE) {
+    return null;
+  }
+
+  return (
+    <>
+      <div
+        className={cn({
+          'bg-yellow-200 text-yellow-900 dark:bg-yellow-400':
+            subscription.status === SubscriptionStatus.PAST_DUE,
+          'bg-destructive text-destructive-foreground':
+            subscription.status === SubscriptionStatus.INACTIVE,
+        })}
+      >
+        <div className="mx-auto flex max-w-screen-xl items-center justify-center gap-x-4 px-4 py-2 text-sm font-medium">
+          <div className="flex items-center">
+            <AlertTriangle className="mr-2.5 h-5 w-5" />
+
+            {match(subscription.status)
+              .with(SubscriptionStatus.PAST_DUE, () => <Trans>Payment overdue</Trans>)
+              .with(SubscriptionStatus.INACTIVE, () => <Trans>Teams restricted</Trans>)
+              .exhaustive()}
+          </div>
+
+          <Button
+            variant="ghost"
+            className={cn({
+              'text-yellow-900 hover:bg-yellow-100 hover:text-yellow-900 dark:hover:bg-yellow-500':
+                subscription.status === SubscriptionStatus.PAST_DUE,
+              'text-destructive-foreground hover:bg-destructive-foreground hover:text-white':
+                subscription.status === SubscriptionStatus.INACTIVE,
+            })}
+            disabled={isPending}
+            onClick={() => setIsOpen(true)}
+            size="sm"
+          >
+            <Trans>Resolve</Trans>
+          </Button>
+        </div>
+      </div>
+
+      <Dialog open={isOpen} onOpenChange={(value) => !isPending && setIsOpen(value)}>
+        <DialogContent>
+          <DialogTitle>
+            <Trans>Payment overdue</Trans>
+          </DialogTitle>
+
+          {match(subscription.status)
+            .with(SubscriptionStatus.PAST_DUE, () => (
+              <DialogDescription>
+                <Trans>
+                  Your payment for teams is overdue. Please settle the payment to avoid any service
+                  disruptions.
+                </Trans>
+              </DialogDescription>
+            ))
+            .with(SubscriptionStatus.INACTIVE, () => (
+              <DialogDescription>
+                <Trans>
+                  Due to an unpaid invoice, your team has been restricted. Please settle the payment
+                  to restore full access to your team.
+                </Trans>
+              </DialogDescription>
+            ))
+            .otherwise(() => null)}
+
+          {canExecuteTeamAction('MANAGE_BILLING', userRole) && (
+            <DialogFooter>
+              <Button loading={isPending} onClick={handleCreatePortal}>
+                <Trans>Resolve payment</Trans>
+              </Button>
+            </DialogFooter>
+          )}
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+};