fix: i18n string problems (#6131)

* fix: apply non-json i18n fixes

* fix: pruning

* fix: prepr

* fix: run.mjs

* fix: lint

apps/frontend/src/pages/settings/account.vue

@@ -150,7 +150,13 @@
 		</Modal>
 		<Modal
 			ref="manageTwoFactorModal"
-			:header="`${auth.user.has_totp && twoFactorStep === 0 ? formatMessage(messages.twoFactorRemoveButton) : formatMessage(messages.twoFactorSetupButton)}`"
+			:header="
+				formatMessage(
+					auth.user.has_totp && twoFactorStep === 0
+						? messages.twoFactorRemoveModalHeader
+						: messages.twoFactorSetupModalHeader,
+				)
+			"
 		>
 			<div class="universal-modal">
 				<template v-if="auth.user.has_totp && twoFactorStep === 0">
@@ -649,6 +655,10 @@ const messages = defineMessages({
 		id: 'settings.account.security.two-factor.action.setup',
 		defaultMessage: 'Setup 2FA',
 	},
+	twoFactorSetupModalHeader: {
+		id: 'settings.account.security.two-factor.modal.setup.header',
+		defaultMessage: 'Setup 2FA',
+	},
 	twoFactorEnterCodeLabel: {
 		id: 'settings.account.two-factor.field.code.label',
 		defaultMessage: 'Enter two-factor code',
@@ -669,6 +679,10 @@ const messages = defineMessages({
 		id: 'settings.account.security.two-factor.action.remove',
 		defaultMessage: 'Remove 2FA',
 	},
+	twoFactorRemoveModalHeader: {
+		id: 'settings.account.security.two-factor.modal.remove.header',
+		defaultMessage: 'Remove 2FA',
+	},
 	twoFactorSetupIntro: {
 		id: 'settings.account.two-factor.setup.intro',
 		defaultMessage:

apps/frontend/src/pages/settings/billing/index.vue

@@ -84,11 +84,9 @@
 						>
 							<span class="opacity-70">{{ formatMessage(messages.nextLabel) }}</span>
 							<span class="font-semibold text-contrast">
-								{{ formatPrice(midasCharge.amount, midasCharge.currency_code) }}
-							</span>
-							<span>
 								{{
-									formatMessage(messages.slashInterval, {
+									formatMessage(messages.pricePerInterval, {
+										price: formatPrice(midasCharge.amount, midasCharge.currency_code),
 										interval: getIntervalNounLabel(midasCharge.subscription_interval),
 									})
 								}}
@@ -144,7 +142,7 @@
 							>
 								{{
 									formatMessage(messages.switchesToBillingOn, {
-										interval: getIntervalAdjectiveLabel(midasCharge.subscription_interval),
+										interval: midasCharge.subscription_interval,
 										date: formatDate(midasCharge.due),
 									})
 								}}
@@ -239,10 +237,10 @@
 								{{
 									changingInterval
 										? formatMessage(messages.switchingToInterval, {
-												interval: getIntervalAdjectiveLabel(oppositeInterval),
+												interval: oppositeInterval,
 											})
 										: formatMessage(messages.switchToInterval, {
-												interval: getIntervalAdjectiveLabel(oppositeInterval),
+												interval: oppositeInterval,
 											})
 								}}
 							</button>
@@ -375,22 +373,22 @@
 											<span class="leading-none text-contrast">
 												{{
 													getProductPrice(getPyroProduct(subscription), subscription.interval)
-														? formatPrice(
-																getProductPrice(getPyroProduct(subscription), subscription.interval)
-																	.prices.intervals[subscription.interval],
-																getProductPrice(getPyroProduct(subscription), subscription.interval)
-																	.currency_code,
-															)
+														? formatMessage(messages.pricePerInterval, {
+																price: formatPrice(
+																	getProductPrice(
+																		getPyroProduct(subscription),
+																		subscription.interval,
+																	).prices.intervals[subscription.interval],
+																	getProductPrice(
+																		getPyroProduct(subscription),
+																		subscription.interval,
+																	).currency_code,
+																),
+																interval: getIntervalNounLabel(subscription.interval),
+															})
 														: ''
 												}}
 											</span>
-											<span class="leading-none">
-												{{
-													formatMessage(messages.slashInterval, {
-														interval: getIntervalNounLabel(subscription.interval),
-													})
-												}}
-											</span>
 										</h3>
 										<div
 											v-if="
@@ -407,15 +405,11 @@
 											<span class="opacity-70">{{ formatMessage(messages.nextLabel) }}</span>
 											<span class="font-semibold text-contrast">
 												{{
-													formatPrice(
-														getPyroCharge(subscription).amount,
-														getPyroCharge(subscription).currency_code,
-													)
-												}}
-											</span>
-											<span>
-												{{
-													formatMessage(messages.slashInterval, {
+													formatMessage(messages.pricePerInterval, {
+														price: formatPrice(
+															getPyroCharge(subscription).amount,
+															getPyroCharge(subscription).currency_code,
+														),
 														interval: getIntervalNounLabel(
 															getPyroCharge(subscription).subscription_interval ||
 																subscription.interval,
@@ -453,9 +447,7 @@
 											>
 												{{
 													formatMessage(messages.switchesToBillingOn, {
-														interval: getIntervalAdjectiveLabel(
-															getPyroCharge(subscription).subscription_interval,
-														),
+														interval: getPyroCharge(subscription).subscription_interval,
 														date: formatDate(getPyroCharge(subscription).due),
 													})
 												}}
@@ -847,26 +839,10 @@ const messages = defineMessages({
 		id: 'settings.billing.interval.quarter',
 		defaultMessage: 'quarter',
 	},
-	intervalQuarterly: {
-		id: 'settings.billing.interval.quarterly.adjective',
-		defaultMessage: 'quarterly',
-	},
-	intervalMonthly: {
-		id: 'settings.billing.interval.monthly',
-		defaultMessage: 'monthly',
-	},
-	intervalYearly: {
-		id: 'settings.billing.interval.yearly',
-		defaultMessage: 'yearly',
-	},
 	pricePerInterval: {
 		id: 'settings.billing.price.per-interval',
 		defaultMessage: '{price} / {interval}',
 	},
-	slashInterval: {
-		id: 'settings.billing.price.slash-interval',
-		defaultMessage: '/{interval}',
-	},
 	nextLabel: {
 		id: 'settings.billing.next',
 		defaultMessage: 'Next:',
@@ -930,7 +906,8 @@ const messages = defineMessages({
 	},
 	switchesToBillingOn: {
 		id: 'settings.billing.switches-to-billing-on',
-		defaultMessage: 'Switches to {interval} billing on {date}',
+		defaultMessage:
+			'Switches to {interval, select, monthly {monthly} yearly {yearly} other {{interval}}} billing on {date}',
 	},
 	orYearlySave: {
 		id: 'settings.billing.or-yearly-save',
@@ -942,11 +919,13 @@ const messages = defineMessages({
 	},
 	switchToInterval: {
 		id: 'settings.billing.switch.to-interval',
-		defaultMessage: 'Switch to {interval}',
+		defaultMessage:
+			'Switch to {interval, select, monthly {monthly} yearly {yearly} other {{interval}}}',
 	},
 	switchingToInterval: {
 		id: 'settings.billing.switch.switching-to-interval',
-		defaultMessage: 'Switching to {interval}',
+		defaultMessage:
+			'Switching to {interval, select, monthly {monthly} yearly {yearly} other {{interval}}}',
 	},
 	monthlyBillingAdditionalPerYearTooltip: {
 		id: 'settings.billing.switch.tooltip.monthly-additional-per-year',
@@ -1039,14 +1018,6 @@ function getIntervalNounLabel(interval) {
 			: formatMessage(messages.intervalMonth)
 }
 
-function getIntervalAdjectiveLabel(interval) {
-	return interval === 'yearly'
-		? formatMessage(messages.intervalYearly)
-		: interval === 'quarterly'
-			? formatMessage(messages.intervalQuarterly)
-			: formatMessage(messages.intervalMonthly)
-}
-
 const queryClient = useQueryClient()
 
 const { data: paymentMethods } = useQuery({