Merge pull request #22330 from overleaf/jdt-split-preview-charges

feat: splitting immediate charges into pre and post tax
GitOrigin-RevId: 67c96e7dbc4dbf0d73f62242b9710532f633dbef

services/web/frontend/extracted-translations.json

@@ -1585,7 +1585,6 @@
   "the_following_folder_already_exists_in_this_project_plural": "",
   "the_next_payment_will_be_collected_on": "",
   "the_original_text_has_changed": "",
-  "the_payment_method_used_is": "",
   "the_target_folder_could_not_be_found": "",
   "the_width_you_choose_here_is_based_on_the_width_of_the_text_in_your_document": "",
   "their_projects_will_be_transferred_to_another_user": "",
@@ -1612,6 +1611,7 @@
   "this_project_will_appear_in_your_dropbox_folder_at": "",
   "this_tool_helps_you_insert_figures": "",
   "this_tool_helps_you_insert_simple_tables_into_your_project_without_writing_latex_code_give_feedback": "",
+  "this_total_reflects_the_amount_due_until": "",
   "this_was_helpful": "",
   "this_wasnt_helpful": "",
   "timedout": "",
@@ -1688,6 +1688,7 @@
   "total_due_today": "",
   "total_per_month": "",
   "total_per_year": "",
+  "total_today": "",
   "total_with_subtotal_and_tax": "",
   "total_words": "",
   "track_any_change_in_real_time": "",
@@ -1851,6 +1852,7 @@
   "we_sent_new_code": "",
   "we_will_charge_you_now_for_the_cost_of_your_additional_users_based_on_remaining_months": "",
   "we_will_charge_you_now_for_your_new_plan_based_on_the_remaining_months_of_your_current_subscription": "",
+  "we_will_use_your_existing_payment_method": "",
   "webinars": "",
   "website_status": "",
   "wed_love_you_to_stay": "",

services/web/frontend/js/features/subscription/components/preview-subscription-change/root.tsx

@@ -5,6 +5,7 @@ import { useTranslation, Trans } from 'react-i18next'
 import {
   SubscriptionChangePreview,
   AddOnPurchase,
+  PremiumSubscriptionChange,
 } from '../../../../../../types/subscription/subscription-change-preview'
 import getMeta from '@/utils/meta'
 import { formatCurrencyLocalized } from '@/shared/utils/currency'
@@ -35,9 +36,15 @@ function PreviewSubscriptionChange() {
       .catch(debugConsole.error)
   }, [location, payNowTask, preview])
 
-  const addOnChange = preview.change.type === 'add-on-purchase'
   const aiAddOnChange =
-    addOnChange && (preview.change as AddOnPurchase).addOn.code === 'assistant'
+    preview.change.type === 'add-on-purchase' &&
+    preview.change.addOn.code === 'assistant'
+
+  // the driver of the change, which we can display as the immediate charge
+  const changeName =
+    preview.change.type === 'add-on-purchase'
+      ? (preview.change as AddOnPurchase).addOn.name
+      : (preview.change as PremiumSubscriptionChange).plan.name
 
   return (
     <Grid>
@@ -89,11 +96,35 @@ function PreviewSubscriptionChange() {
             )}
 
             <div className="payment-summary-card mt-5">
-              <h3>{t('payment_summary')}</h3>
+              <h3>{t('due_today')}:</h3>
               <Row>
-                <Col xs={9}>
-                  <strong>{t('due_today')}:</strong>
+                <Col xs={9}>{changeName}</Col>
+                <Col xs={3} className="text-right">
+                  <strong>
+                    {formatCurrencyLocalized(
+                      preview.immediateCharge.subtotal,
+                      preview.currency
+                    )}
+                  </strong>
                 </Col>
+              </Row>
+
+              {preview.immediateCharge.tax > 0 && (
+                <Row className="mt-1">
+                  <Col xs={9}>
+                    {t('vat')} {preview.nextInvoice.tax.rate * 100}%
+                  </Col>
+                  <Col xs={3} className="text-right">
+                    {formatCurrencyLocalized(
+                      preview.immediateCharge.tax,
+                      preview.currency
+                    )}
+                  </Col>
+                </Row>
+              )}
+
+              <Row>
+                <Col xs={9}>{t('total_today')}</Col>
                 <Col xs={3} className="text-right">
                   <strong>
                     {formatCurrencyLocalized(
@@ -103,13 +134,38 @@ function PreviewSubscriptionChange() {
                   </strong>
                 </Col>
               </Row>
+            </div>
 
-              <hr />
+            <div className="mt-5">
+              <Trans
+                i18nKey="this_total_reflects_the_amount_due_until"
+                values={{ date: moment(preview.nextInvoice.date).format('LL') }}
+                components={{ strong: <strong /> }}
+                shouldUnescape
+                tOptions={{ interpolation: { escapeValue: true } }}
+              />{' '}
+              <Trans
+                i18nKey="we_will_use_your_existing_payment_method"
+                values={{ paymentMethod: preview.paymentMethod }}
+                components={{ strong: <strong /> }}
+                shouldUnescape
+                tOptions={{ interpolation: { escapeValue: true } }}
+              />
+            </div>
 
-              <div>
-                <strong>{t('future_payments')}:</strong>
-              </div>
+            <div className="mt-5">
+              <Button
+                bsStyle="primary"
+                bsSize="large"
+                onClick={handlePayNowClick}
+                disabled={payNowTask.isLoading || payNowTask.isSuccess}
+              >
+                {t('pay_now')}
+              </Button>
+            </div>
 
+            <div className="payment-summary-card mt-5">
+              <h3>{t('future_payments')}:</h3>
               <Row className="mt-1">
                 <Col xs={9}>{preview.nextInvoice.plan.name}</Col>
                 <Col xs={3} className="text-right">
@@ -168,26 +224,8 @@ function PreviewSubscriptionChange() {
                 components={{ strong: <strong /> }}
                 shouldUnescape
                 tOptions={{ interpolation: { escapeValue: true } }}
-              />{' '}
-              <Trans
-                i18nKey="the_payment_method_used_is"
-                values={{ paymentMethod: preview.paymentMethod }}
-                components={{ strong: <strong /> }}
-                shouldUnescape
-                tOptions={{ interpolation: { escapeValue: true } }}
               />
             </div>
-
-            <div className="mt-5">
-              <Button
-                bsStyle="primary"
-                bsSize="large"
-                onClick={handlePayNowClick}
-                disabled={payNowTask.isLoading || payNowTask.isSuccess}
-              >
-                {t('pay_now')}
-              </Button>
-            </div>
           </div>
         </Col>
       </Row>

services/web/locales/en.json

@@ -2185,7 +2185,6 @@
   "the_following_folder_already_exists_in_this_project_plural": "The following folders already exist in this project:",
   "the_next_payment_will_be_collected_on": "The next payment will be collected on <strong>__date__</strong>.",
   "the_original_text_has_changed": "The original text has changed, so this suggestion can’t be applied",
-  "the_payment_method_used_is": "The payment method used is <strong>__paymentMethod__</strong>.",
   "the_project_that_contains_this_file_is_not_shared_with_you": "The project that contains this file is not shared with you",
   "the_requested_conversion_job_was_not_found": "The link to open this content on Overleaf specified a conversion job that could not be found. It’s possible that the job has expired and needs to be run again. If this keeps happening for links on a particular site, please report this to them.",
   "the_requested_publisher_was_not_found": "The link to open this content on Overleaf specified a publisher that could not be found. If this keeps happening for links on a particular site, please report this to them.",
@@ -2222,6 +2221,7 @@
   "this_project_will_appear_in_your_dropbox_folder_at": "This project will appear in your Dropbox folder at ",
   "this_tool_helps_you_insert_figures": "This tool helps you insert figures into your project without needing to write the LaTeX code. The following information explains more about the options in the tool and how to further customize your figures.",
   "this_tool_helps_you_insert_simple_tables_into_your_project_without_writing_latex_code_give_feedback": "This tool helps you insert simple tables into your project without writing LaTeX code. This tool is new, so please <0>give us feedback</0> and look out for additional functionality coming soon.",
+  "this_total_reflects_the_amount_due_until": "This total reflects the amount due from today until <strong>__date__</strong>, the end of the billing period of your existing plan.",
   "this_was_helpful": "This was helpful",
   "this_wasnt_helpful": "This wasn’t helpful",
   "thousands_templates": "Thousands of templates",
@@ -2305,6 +2305,7 @@
   "total_per_year": "Total per year",
   "total_per_year_for_x_users": "total per year for __licenseSize__ users",
   "total_per_year_lowercase": "total per year",
+  "total_today": "Total today",
   "total_with_subtotal_and_tax": "Total: <0>__total__</0> (__subtotal__ + __tax__ tax) per year",
   "total_words": "Total Words",
   "tr": "Turkish",
@@ -2496,6 +2497,7 @@
   "we_sent_new_code": "We’ve sent a new code. If it doesn’t arrive, make sure to check your spam and any promotions folders.",
   "we_will_charge_you_now_for_the_cost_of_your_additional_users_based_on_remaining_months": "We’ll charge you now for the cost of your additional users based on the remaining months of your current subscription.",
   "we_will_charge_you_now_for_your_new_plan_based_on_the_remaining_months_of_your_current_subscription": "We’ll charge you now for your new plan based on the remaining months of your current subscription.",
+  "we_will_use_your_existing_payment_method": "We’ll use your existing payment method <strong>__paymentMethod__</strong>.",
   "webinars": "Webinars",
   "website_status": "Website status",
   "wed_love_you_to_stay": "We’d love you to stay",

services/web/types/subscription/subscription-change-preview.ts

@@ -37,8 +37,8 @@ type AddOn = {
 export type SubscriptionChangeDescription =
   | AddOnPurchase
   | AddOnUpdate
-  | PremiumSubscription
   | GroupPlanUpgrade
+  | PremiumSubscriptionChange
 
 export type AddOnPurchase = {
   type: 'add-on-purchase'
@@ -59,7 +59,7 @@ export type GroupPlanUpgrade = {
   }
 }
 
-type PremiumSubscription = {
+export type PremiumSubscriptionChange = {
   type: 'premium-subscription'
   plan: {
     code: string