Merge pull request #23128 from overleaf/ii-flexible-group-licensing-add-seats-cost-summary

[web] FL cost summary billing info

GitOrigin-RevId: eae6a7f02aa37e304144ccf75b952406567ca5d5

services/web/frontend/extracted-translations.json

@@ -99,7 +99,7 @@
   "address_second_line_optional": "",
   "adjust_column_width": "",
   "advanced_reference_search_mode": "",
-  "after_that_well_bill_you_x_annually_on_date_unless_you_cancel": "",
+  "after_that_well_bill_you_x_total_y_subtotal_z_tax_annually_on_date_unless_you_cancel": "",
   "aggregate_changed": "",
   "aggregate_to": "",
   "agree_with_the_terms": "",

services/web/frontend/js/features/group-management/components/add-seats/cost-summary.tsx

@@ -114,12 +114,20 @@ function CostSummary({ subscriptionChange, totalLicenses }: CostSummaryProps) {
             </div>
             <div>
               {t(
-                'after_that_well_bill_you_x_annually_on_date_unless_you_cancel',
+                'after_that_well_bill_you_x_total_y_subtotal_z_tax_annually_on_date_unless_you_cancel',
                 {
-                  subtotal: formatCurrency(
+                  totalAmount: formatCurrency(
                     subscriptionChange.nextInvoice.total,
                     subscriptionChange.currency
                   ),
+                  subtotalAmount: formatCurrency(
+                    subscriptionChange.nextInvoice.subtotal,
+                    subscriptionChange.currency
+                  ),
+                  taxAmount: formatCurrency(
+                    subscriptionChange.nextInvoice.tax.amount,
+                    subscriptionChange.currency
+                  ),
                   date: formatTime(
                     subscriptionChange.nextInvoice.date,
                     'MMMM D'

services/web/frontend/js/features/group-management/components/upgrade-subscription/upgrade-subscription-upgrade-summary.tsx

@@ -72,13 +72,24 @@ function UpgradeSummary({ subscriptionChange }: UpgradeSummaryProps) {
           )}
         </div>
         <div>
-          {t('after_that_well_bill_you_x_annually_on_date_unless_you_cancel', {
-            subtotal: formatCurrency(
-              subscriptionChange.nextInvoice.subtotal,
-              subscriptionChange.currency
-            ),
-            date: formatTime(subscriptionChange.nextInvoice.date, 'MMMM D'),
-          })}
+          {t(
+            'after_that_well_bill_you_x_total_y_subtotal_z_tax_annually_on_date_unless_you_cancel',
+            {
+              totalAmount: formatCurrency(
+                subscriptionChange.nextInvoice.total,
+                subscriptionChange.currency
+              ),
+              subtotalAmount: formatCurrency(
+                subscriptionChange.nextInvoice.subtotal,
+                subscriptionChange.currency
+              ),
+              taxAmount: formatCurrency(
+                subscriptionChange.nextInvoice.tax.amount,
+                subscriptionChange.currency
+              ),
+              date: formatTime(subscriptionChange.nextInvoice.date, 'MMMM D'),
+            }
+          )}
         </div>
       </Card.Body>
     </Card>

services/web/locales/en.json

@@ -118,7 +118,7 @@
   "administration_and_security": "Administration and security",
   "advanced_reference_search": "Advanced <0>reference search</0>",
   "advanced_reference_search_mode": "Advanced reference search",
-  "after_that_well_bill_you_x_annually_on_date_unless_you_cancel": "After that, we’ll bill you __subtotal__ + applicable taxes annually on __date__, unless you cancel.",
+  "after_that_well_bill_you_x_total_y_subtotal_z_tax_annually_on_date_unless_you_cancel": "After that, we’ll bill you __totalAmount__ (__subtotalAmount__ + __taxAmount__ tax) annually on __date__, unless you cancel.",
   "aggregate_changed": "Changed",
   "aggregate_to": "to",
   "agree_with_the_terms": "I agree with the Overleaf terms",

services/web/test/frontend/features/group-management/components/add-seats.spec.tsx

@@ -246,6 +246,7 @@ describe('<AddSeats />', function () {
             subtotal: 895,
             tax: {
               rate: 0.2,
+              amount: 105,
             },
             total: 1000,
           },
@@ -300,7 +301,7 @@ describe('<AddSeats />', function () {
             /we’ll charge you now for the cost of your additional users based on the remaining months of your current subscription/i
           )
           cy.findByText(
-            /after that, we’ll bill you \$1,000.00 \+ applicable taxes annually on December 1, unless you cancel/i
+            /after that, we’ll bill you \$1,000\.00 \(\$895\.00 \+ \$105\.00 tax\) annually on December 1, unless you cancel/i
           )
         })
       })