diff --git a/services/web/frontend/extracted-translations.json b/services/web/frontend/extracted-translations.json index 0807c32ac5..3c50ef96ef 100644 --- a/services/web/frontend/extracted-translations.json +++ b/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": "", diff --git a/services/web/frontend/js/features/subscription/components/preview-subscription-change/root.tsx b/services/web/frontend/js/features/subscription/components/preview-subscription-change/root.tsx index 451412a11e..04d8de4d74 100644 --- a/services/web/frontend/js/features/subscription/components/preview-subscription-change/root.tsx +++ b/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 ( @@ -89,11 +96,35 @@ function PreviewSubscriptionChange() { )}
-

{t('payment_summary')}

+

{t('due_today')}:

- - {t('due_today')}: + {changeName} + + + {formatCurrencyLocalized( + preview.immediateCharge.subtotal, + preview.currency + )} + + + + {preview.immediateCharge.tax > 0 && ( + + + {t('vat')} {preview.nextInvoice.tax.rate * 100}% + + + {formatCurrencyLocalized( + preview.immediateCharge.tax, + preview.currency + )} + + + )} + + + {t('total_today')} {formatCurrencyLocalized( @@ -103,13 +134,38 @@ function PreviewSubscriptionChange() { +
-
+
+ }} + shouldUnescape + tOptions={{ interpolation: { escapeValue: true } }} + />{' '} + }} + shouldUnescape + tOptions={{ interpolation: { escapeValue: true } }} + /> +
-
- {t('future_payments')}: -
+
+ +
+
+

{t('future_payments')}:

{preview.nextInvoice.plan.name} @@ -168,26 +224,8 @@ function PreviewSubscriptionChange() { components={{ strong: }} shouldUnescape tOptions={{ interpolation: { escapeValue: true } }} - />{' '} - }} - shouldUnescape - tOptions={{ interpolation: { escapeValue: true } }} />
- -
- -
diff --git a/services/web/locales/en.json b/services/web/locales/en.json index 3a1b73bda6..41d8cf144f 100644 --- a/services/web/locales/en.json +++ b/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 __date__.", "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 __paymentMethod__.", "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 and look out for additional functionality coming soon.", + "this_total_reflects_the_amount_due_until": "This total reflects the amount due from today until __date__, 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__ (__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 __paymentMethod__.", "webinars": "Webinars", "website_status": "Website status", "wed_love_you_to_stay": "We’d love you to stay", diff --git a/services/web/types/subscription/subscription-change-preview.ts b/services/web/types/subscription/subscription-change-preview.ts index 79328545c0..669df0d19c 100644 --- a/services/web/types/subscription/subscription-change-preview.ts +++ b/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