Deduplicate common strings in translation (#5085)

* deduplicate common strings, part 1

* deduplicate common strings, part 2

* typo and general import mess fixes

* detail common string

* fix lint

* fix lint TWO

* adress review concerns + lint

* app lint too

* actually leave privateLabel untouched

* lint fix THREE

* fix: broken msg

* fix: lint

---------

Co-authored-by: Calum H. <contact@cal.engineer>
Co-authored-by: Prospector <6166773+Prospector@users.noreply.github.com>

packages/ui/src/components/affiliate/AffiliateLinkCreateModal.vue

@@ -3,7 +3,7 @@
 		<div class="flex flex-col">
 			<label v-if="showUserField" class="contents" for="create-affiliate-user-input">
 				<span class="text-lg font-semibold text-contrast mb-1">
-					{{ formatMessage(messages.createUserLabel) }}
+					{{ formatMessage(commonMessages.usernameLabel) }}
 				</span>
 				<span class="text-secondary mb-2">{{ formatMessage(messages.createUserDescription) }}</span>
 			</label>
@@ -67,6 +67,7 @@ import { AffiliateIcon, PlusIcon, SpinnerIcon, UserIcon, XIcon } from '@modrinth
 import { computed, ref, useTemplateRef } from 'vue'
 
 import { defineMessages, useVIntl } from '../../composables/i18n'
+import { commonMessages } from '../../utils/common-messages'
 import { AutoBrandIcon, Button, ButtonStyled, NewModal } from '../index'
 export type CreateAffiliateProps = { sourceName: string; username?: string }
 
@@ -141,10 +142,6 @@ const messages = defineMessages({
 		id: 'affiliate.create.title.placeholder',
 		defaultMessage: 'e.g. YouTube',
 	},
-	createUserLabel: {
-		id: 'affiliate.create.user.label',
-		defaultMessage: 'Username',
-	},
 	createUserDescription: {
 		id: 'affiliate.create.user.description',
 		defaultMessage: 'The username of the user to create the affiliate code for',

packages/ui/src/components/billing/FormattedPaymentMethod.vue

@@ -2,7 +2,7 @@
 import type Stripe from 'stripe'
 
 import { useVIntl } from '../../composables/i18n'
-import { commonMessages, getPaymentMethodIcon, paymentMethodMessages } from '../../utils'
+import { getPaymentMethodIcon, paymentMethodMessages } from '../../utils'
 
 const { formatMessage } = useVIntl()
 defineProps<{
@@ -15,7 +15,7 @@ defineProps<{
 		<component :is="getPaymentMethodIcon(method.type)" class="size-[1.5em]" />
 		<span v-if="method.type === 'card' && 'card' in method && method.card">
 			{{
-				formatMessage(commonMessages.paymentMethodCardDisplay, {
+				formatMessage(paymentMethodMessages.paymentMethodCardDisplay, {
 					card_brand:
 						formatMessage(paymentMethodMessages[method.card.brand]) ??
 						formatMessage(paymentMethodMessages.unknown),

packages/ui/src/components/billing/PurchaseModal.vue

@@ -345,18 +345,18 @@
 
 							<span v-if="props.option.type === 'card'">
 								{{
-									formatMessage(messages.paymentMethodCardDisplay, {
+									formatMessage(paymentMethodMessages.paymentMethodCardDisplay, {
 										card_brand:
-											formatMessage(paymentMethodTypes[props.option.card.brand]) ??
-											formatMessage(paymentMethodTypes.unknown),
+											formatMessage(paymentMethodMessages[props.option.card.brand]) ??
+											formatMessage(paymentMethodMessages.unknown),
 										last_four: props.option.card.last4,
 									})
 								}}
 							</span>
 							<template v-else>
 								{{
-									formatMessage(paymentMethodTypes[props.option.type]) ??
-									formatMessage(paymentMethodTypes.unknown)
+									formatMessage(paymentMethodMessages[props.option.type]) ??
+									formatMessage(paymentMethodMessages.unknown)
 								}}
 							</template>
 
@@ -382,18 +382,18 @@
 
 								<span v-if="props.option.type === 'card'">
 									{{
-										formatMessage(messages.paymentMethodCardDisplay, {
+										formatMessage(paymentMethodMessages.paymentMethodCardDisplay, {
 											card_brand:
-												formatMessage(paymentMethodTypes[props.option.card.brand]) ??
-												formatMessage(paymentMethodTypes.unknown),
+												formatMessage(paymentMethodMessages[props.option.card.brand]) ??
+												formatMessage(paymentMethodMessages.unknown),
 											last_four: props.option.card.last4,
 										})
 									}}
 								</span>
 								<template v-else>
 									{{
-										formatMessage(paymentMethodTypes[props.option.type]) ??
-										formatMessage(paymentMethodTypes.unknown)
+										formatMessage(paymentMethodMessages[props.option.type]) ??
+										formatMessage(paymentMethodMessages.unknown)
 									}}
 								</template>
 
@@ -546,7 +546,8 @@ import dayjs from 'dayjs'
 import { computed, nextTick, reactive, ref, watch } from 'vue'
 import { Multiselect } from 'vue-multiselect'
 
-import { defineMessages, useVIntl } from '../../composables/i18n'
+import { useVIntl } from '../../composables/i18n'
+import { paymentMethodMessages } from '../../utils/common-messages'
 import Admonition from '../base/Admonition.vue'
 import Checkbox from '../base/Checkbox.vue'
 import Slider from '../base/Slider.vue'
@@ -646,61 +647,6 @@ const props = defineProps({
 
 const productType = computed(() => (props.customServer ? 'pyro' : props.product.metadata.type))
 
-const messages = defineMessages({
-	paymentMethodCardDisplay: {
-		id: 'omorphia.component.purchase_modal.payment_method_card_display',
-		defaultMessage: '{card_brand} ending in {last_four}',
-	},
-})
-
-const paymentMethodTypes = defineMessages({
-	visa: {
-		id: 'omorphia.component.purchase_modal.payment_method_type.visa',
-		defaultMessage: 'Visa',
-	},
-	amex: {
-		id: 'omorphia.component.purchase_modal.payment_method_type.amex',
-		defaultMessage: 'American Express',
-	},
-	diners: {
-		id: 'omorphia.component.purchase_modal.payment_method_type.diners',
-		defaultMessage: 'Diners Club',
-	},
-	discover: {
-		id: 'omorphia.component.purchase_modal.payment_method_type.discover',
-		defaultMessage: 'Discover',
-	},
-	eftpos: {
-		id: 'omorphia.component.purchase_modal.payment_method_type.eftpos',
-		defaultMessage: 'EFTPOS',
-	},
-	jcb: { id: 'omorphia.component.purchase_modal.payment_method_type.jcb', defaultMessage: 'JCB' },
-	mastercard: {
-		id: 'omorphia.component.purchase_modal.payment_method_type.mastercard',
-		defaultMessage: 'MasterCard',
-	},
-	unionpay: {
-		id: 'omorphia.component.purchase_modal.payment_method_type.unionpay',
-		defaultMessage: 'UnionPay',
-	},
-	paypal: {
-		id: 'omorphia.component.purchase_modal.payment_method_type.paypal',
-		defaultMessage: 'PayPal',
-	},
-	cashapp: {
-		id: 'omorphia.component.purchase_modal.payment_method_type.cashapp',
-		defaultMessage: 'Cash App',
-	},
-	amazon_pay: {
-		id: 'omorphia.component.purchase_modal.payment_method_type.amazon_pay',
-		defaultMessage: 'Amazon Pay',
-	},
-	unknown: {
-		id: 'omorphia.component.purchase_modal.payment_method_type.unknown',
-		defaultMessage: 'Unknown payment method',
-	},
-})
-
 let stripe = null
 let elements = null
 

packages/ui/src/components/project/ProjectSidebarDetails.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="flex flex-col gap-3">
-		<h2 class="text-lg m-0">{{ formatMessage(messages.title) }}</h2>
+		<h2 class="text-lg m-0">{{ formatMessage(commonMessages.detailsLabel) }}</h2>
 		<div class="flex flex-col gap-3 font-semibold [&>div]:flex [&>div]:gap-2 [&>div]:items-center">
 			<div>
 				<BookTextIcon aria-hidden="true" />
@@ -70,6 +70,7 @@ import { computed } from 'vue'
 
 import { useRelativeTime } from '../../composables'
 import { defineMessages, useVIntl } from '../../composables/i18n'
+import { commonMessages } from '../../utils/common-messages'
 
 const { formatMessage } = useVIntl()
 const formatRelativeTime = useRelativeTime()
@@ -117,10 +118,6 @@ const licenseIdDisplay = computed(() => {
 })
 
 const messages = defineMessages({
-	title: {
-		id: 'project.about.details.title',
-		defaultMessage: 'Details',
-	},
 	licensed: {
 		id: 'project.about.details.licensed',
 		defaultMessage: 'Licensed {license}',

packages/ui/src/components/servers/backups/BackupItem.vue

@@ -175,10 +175,6 @@ const messages = defineMessages({
 		id: 'servers.backups.item.manual-backup',
 		defaultMessage: 'Manual backup',
 	},
-	retry: {
-		id: 'servers.backups.item.retry',
-		defaultMessage: 'Retry',
-	},
 })
 </script>
 <template>
@@ -270,7 +266,7 @@ const messages = defineMessages({
 				<ButtonStyled>
 					<button @click="() => emit('retry')">
 						<RotateCounterClockwiseIcon class="size-5" />
-						{{ formatMessage(messages.retry) }}
+						{{ formatMessage(commonMessages.retryButton) }}
 					</button>
 				</ButtonStyled>
 				<ButtonStyled>