From 979e3f3e71367cc8e8f32ba0448abf3a297eb6c9 Mon Sep 17 00:00:00 2001
From: David Nguyen <davidngu28@gmail.com>
Date: Fri, 15 Nov 2024 21:34:39 +0700
Subject: [PATCH 1/2] fix: always allow access to billing (#1476)

---
 .../billing/billing-portal-button.tsx         |   5 +-
 .../app/(dashboard)/settings/billing/page.tsx | 112 ++++++++++--------
 2 files changed, 66 insertions(+), 51 deletions(-)

diff --git a/apps/web/src/app/(dashboard)/settings/billing/billing-portal-button.tsx b/apps/web/src/app/(dashboard)/settings/billing/billing-portal-button.tsx
index da230908a..c8ab8c132 100644
--- a/apps/web/src/app/(dashboard)/settings/billing/billing-portal-button.tsx
+++ b/apps/web/src/app/(dashboard)/settings/billing/billing-portal-button.tsx
@@ -12,9 +12,10 @@ import { createBillingPortal } from './create-billing-portal.action';
 
 export type BillingPortalButtonProps = {
   buttonProps?: React.ComponentProps<typeof Button>;
+  children?: React.ReactNode;
 };
 
-export const BillingPortalButton = ({ buttonProps }: BillingPortalButtonProps) => {
+export const BillingPortalButton = ({ buttonProps, children }: BillingPortalButtonProps) => {
   const { _ } = useLingui();
   const { toast } = useToast();
 
@@ -63,7 +64,7 @@ export const BillingPortalButton = ({ buttonProps }: BillingPortalButtonProps) =
       onClick={async () => handleFetchPortalUrl()}
       loading={isFetchingPortalUrl}
     >
-      <Trans>Manage Subscription</Trans>
+      {children || <Trans>Manage Subscription</Trans>}
     </Button>
   );
 };
diff --git a/apps/web/src/app/(dashboard)/settings/billing/page.tsx b/apps/web/src/app/(dashboard)/settings/billing/page.tsx
index e60698818..05be0c6cb 100644
--- a/apps/web/src/app/(dashboard)/settings/billing/page.tsx
+++ b/apps/web/src/app/(dashboard)/settings/billing/page.tsx
@@ -68,60 +68,74 @@ export default async function BillingSettingsPage() {
 
   return (
     <div>
-      <h3 className="text-2xl font-semibold">
-        <Trans>Billing</Trans>
-      </h3>
+      <div className="flex flex-row items-end justify-between">
+        <div>
+          <h3 className="text-2xl font-semibold">
+            <Trans>Billing</Trans>
+          </h3>
 
-      <div className="text-muted-foreground mt-2 text-sm">
-        {isMissingOrInactiveOrFreePlan && (
-          <p>
-            <Trans>
-              You are currently on the <span className="font-semibold">Free Plan</span>.
-            </Trans>
-          </p>
-        )}
-
-        {/* Todo: Translation */}
-        {!isMissingOrInactiveOrFreePlan &&
-          match(subscription.status)
-            .with('ACTIVE', () => (
-              <p>
-                {subscriptionProduct ? (
-                  <span>
-                    You are currently subscribed to{' '}
-                    <span className="font-semibold">{subscriptionProduct.name}</span>
-                  </span>
-                ) : (
-                  <span>You currently have an active plan</span>
-                )}
-
-                {subscription.periodEnd && (
-                  <span>
-                    {' '}
-                    which is set to{' '}
-                    {subscription.cancelAtPeriodEnd ? (
-                      <span>
-                        end on{' '}
-                        <span className="font-semibold">{i18n.date(subscription.periodEnd)}.</span>
-                      </span>
-                    ) : (
-                      <span>
-                        automatically renew on{' '}
-                        <span className="font-semibold">{i18n.date(subscription.periodEnd)}.</span>
-                      </span>
-                    )}
-                  </span>
-                )}
-              </p>
-            ))
-            .with('PAST_DUE', () => (
+          <div className="text-muted-foreground mt-2 text-sm">
+            {isMissingOrInactiveOrFreePlan && (
               <p>
                 <Trans>
-                  Your current plan is past due. Please update your payment information.
+                  You are currently on the <span className="font-semibold">Free Plan</span>.
                 </Trans>
               </p>
-            ))
-            .otherwise(() => null)}
+            )}
+
+            {/* Todo: Translation */}
+            {!isMissingOrInactiveOrFreePlan &&
+              match(subscription.status)
+                .with('ACTIVE', () => (
+                  <p>
+                    {subscriptionProduct ? (
+                      <span>
+                        You are currently subscribed to{' '}
+                        <span className="font-semibold">{subscriptionProduct.name}</span>
+                      </span>
+                    ) : (
+                      <span>You currently have an active plan</span>
+                    )}
+
+                    {subscription.periodEnd && (
+                      <span>
+                        {' '}
+                        which is set to{' '}
+                        {subscription.cancelAtPeriodEnd ? (
+                          <span>
+                            end on{' '}
+                            <span className="font-semibold">
+                              {i18n.date(subscription.periodEnd)}.
+                            </span>
+                          </span>
+                        ) : (
+                          <span>
+                            automatically renew on{' '}
+                            <span className="font-semibold">
+                              {i18n.date(subscription.periodEnd)}.
+                            </span>
+                          </span>
+                        )}
+                      </span>
+                    )}
+                  </p>
+                ))
+                .with('PAST_DUE', () => (
+                  <p>
+                    <Trans>
+                      Your current plan is past due. Please update your payment information.
+                    </Trans>
+                  </p>
+                ))
+                .otherwise(() => null)}
+          </div>
+        </div>
+
+        {isMissingOrInactiveOrFreePlan && (
+          <BillingPortalButton>
+            <Trans>Manage billing</Trans>
+          </BillingPortalButton>
+        )}
       </div>
 
       <hr className="my-4" />

From f15f9ecdd1ea4069ef35391d3a28b34a87868b3d Mon Sep 17 00:00:00 2001
From: David Nguyen <davidngu28@gmail.com>
Date: Fri, 15 Nov 2024 21:47:22 +0700
Subject: [PATCH 2/2] chore: update docs

---
 packages/api/v1/contract.ts | 3 +++
 packages/api/v1/schema.ts   | 5 ++++-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/api/v1/contract.ts b/packages/api/v1/contract.ts
index cd90c31c4..c21358c28 100644
--- a/packages/api/v1/contract.ts
+++ b/packages/api/v1/contract.ts
@@ -168,6 +168,9 @@ export const ApiContractV1 = c.router(
         500: ZUnsuccessfulResponseSchema,
       },
       summary: 'Send a document for signing',
+      // I'm aware this should be in the variable itself, which it is, however it's difficult for users to find in our current UI.
+      description:
+        'Notes\n\n`sendEmail` - Whether to send an email to the recipients asking them to action the document. If you disable this, you will need to manually distribute the document to the recipients using the generated signing links. Defaults to true',
     },
 
     resendDocument: {
diff --git a/packages/api/v1/schema.ts b/packages/api/v1/schema.ts
index a4fab1089..87e17ba8b 100644
--- a/packages/api/v1/schema.ts
+++ b/packages/api/v1/schema.ts
@@ -67,7 +67,10 @@ export type TSuccessfulDocumentResponseSchema = z.infer<typeof ZSuccessfulDocume
 
 export const ZSendDocumentForSigningMutationSchema = z
   .object({
-    sendEmail: z.boolean().optional().default(true),
+    sendEmail: z.boolean().optional().default(true).openapi({
+      description:
+        'Whether to send an email to the recipients asking them to action the document. If you disable this, you will need to manually distribute the document to the recipients using the generated signing links.',
+    }),
   })
   .or(z.literal('').transform(() => ({ sendEmail: true })));