From 647dc5fc2d359955ff7afdf2a14d6b51cb60c7f7 Mon Sep 17 00:00:00 2001
From: Konrad <11725227+mKoonrad@users.noreply.github.com>
Date: Tue, 17 Mar 2026 02:05:27 +0100
Subject: [PATCH] fix(i18n): mark billing messages for translation (#2525)

---
 .../o.$orgUrl.settings.billing.tsx            | 81 +++++++++++--------
 1 file changed, 48 insertions(+), 33 deletions(-)

diff --git a/apps/remix/app/routes/_authenticated+/o.$orgUrl.settings.billing.tsx b/apps/remix/app/routes/_authenticated+/o.$orgUrl.settings.billing.tsx
index d309cf166..b548ef777 100644
--- a/apps/remix/app/routes/_authenticated+/o.$orgUrl.settings.billing.tsx
+++ b/apps/remix/app/routes/_authenticated+/o.$orgUrl.settings.billing.tsx
@@ -3,7 +3,7 @@ import { Trans } from '@lingui/react/macro';
 import { SubscriptionStatus } from '@prisma/client';
 import { Loader } from 'lucide-react';
 import type Stripe from 'stripe';
-import { match } from 'ts-pattern';
+import { P, match } from 'ts-pattern';
 
 import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
 import { canExecuteOrganisationAction } from '@documenso/lib/utils/organisations';
@@ -31,7 +31,7 @@ export default function TeamsSettingBillingPage() {
   if (isLoadingSubscription || !subscriptionQuery) {
     return (
       <div className="flex items-center justify-center rounded-lg py-32">
-        <Loader className="text-muted-foreground h-6 w-6 animate-spin" />
+        <Loader className="h-6 w-6 animate-spin text-muted-foreground" />
       </div>
     );
   }
@@ -57,7 +57,7 @@ export default function TeamsSettingBillingPage() {
             <Trans>Billing</Trans>
           </h3>
 
-          <div className="text-muted-foreground mt-2 text-sm">
+          <div className="mt-2 text-sm text-muted-foreground">
             {!organisationSubscription && (
               <p>
                 <Trans>
@@ -70,36 +70,51 @@ export default function TeamsSettingBillingPage() {
               match(organisationSubscription.status)
                 .with('ACTIVE', () => (
                   <p>
-                    {currentProductName ? (
-                      <span>
-                        You are currently subscribed to{' '}
-                        <span className="font-semibold">{currentProductName}</span>
-                      </span>
-                    ) : (
-                      <span>You currently have an active plan</span>
-                    )}
-
-                    {organisationSubscription.periodEnd && (
-                      <span>
-                        {' '}
-                        which is set to{' '}
-                        {organisationSubscription.cancelAtPeriodEnd ? (
-                          <span>
-                            end on{' '}
-                            <span className="font-semibold">
-                              {i18n.date(organisationSubscription.periodEnd)}.
-                            </span>
-                          </span>
+                    {match(organisationSubscription)
+                      .with(
+                        { cancelAtPeriodEnd: true, periodEnd: P.nonNullable },
+                        ({ periodEnd }) =>
+                          currentProductName ? (
+                            <Trans>
+                              You are currently subscribed to{' '}
+                              <span className="font-semibold">{currentProductName}</span> which is
+                              set to end on{' '}
+                              <span className="font-semibold">{i18n.date(periodEnd)}</span>.
+                            </Trans>
+                          ) : (
+                            <Trans>
+                              You currently have an active plan which is set to end on{' '}
+                              <span className="font-semibold">{i18n.date(periodEnd)}</span>.
+                            </Trans>
+                          ),
+                      )
+                      .with(
+                        { cancelAtPeriodEnd: false, periodEnd: P.nonNullable },
+                        ({ periodEnd }) =>
+                          currentProductName ? (
+                            <Trans>
+                              You are currently subscribed to{' '}
+                              <span className="font-semibold">{currentProductName}</span> which is
+                              set to automatically renew on{' '}
+                              <span className="font-semibold">{i18n.date(periodEnd)}</span>.
+                            </Trans>
+                          ) : (
+                            <Trans>
+                              You currently have an active plan which is set to automatically renew
+                              on <span className="font-semibold">{i18n.date(periodEnd)}</span>.
+                            </Trans>
+                          ),
+                      )
+                      .otherwise(() =>
+                        currentProductName ? (
+                          <Trans>
+                            You are currently subscribed to{' '}
+                            <span className="font-semibold">{currentProductName}</span>.
+                          </Trans>
                         ) : (
-                          <span>
-                            automatically renew on{' '}
-                            <span className="font-semibold">
-                              {i18n.date(organisationSubscription.periodEnd)}.
-                            </span>
-                          </span>
-                        )}
-                      </span>
-                    )}
+                          <Trans>You currently have an active plan.</Trans>
+                        ),
+                      )}
                   </p>
                 ))
                 .with('INACTIVE', () => (
@@ -107,7 +122,7 @@ export default function TeamsSettingBillingPage() {
                     {currentProductName ? (
                       <Trans>
                         You currently have an inactive{' '}
-                        <span className="font-semibold">{currentProductName}</span> subscription
+                        <span className="font-semibold">{currentProductName}</span> subscription.
                       </Trans>
                     ) : (
                       <Trans>Your current plan is inactive.</Trans>