feat: custom email in Plan migration form

dkrizan · dkrizan · commit 3ea67a411032 · 2025-11-19T12:27:40.000+01:00
diff --git a/backend/data/src/main/kotlin/io/tolgee/component/email/customTemplate/EmailTemplateRenderer.kt b/backend/data/src/main/kotlin/io/tolgee/component/email/customTemplate/EmailTemplateRenderer.kt
@@ -0,0 +1,32 @@
+package io.tolgee.component.email.customTemplate
+
+import io.tolgee.component.email.customTemplate.placeholder.EmailPlaceholdersExtractor
+import org.springframework.stereotype.Component
+import java.text.MessageFormat
+import java.util.Locale
+import kotlin.reflect.KClass
+
+@Component
+class EmailTemplateRenderer(
+  private val placeholderExtractor: EmailPlaceholdersExtractor,
+) {
+
+  fun render(
+    template: String,
+    variables: EmailTemplateVariables,
+  ): String {
+    @Suppress("UNCHECKED_CAST")
+    val entries =
+      placeholderExtractor.getEntries(
+        variables::class as KClass<EmailTemplateVariables>,
+      )
+
+    val parameters =
+      entries.map { entry ->
+        entry.accessor(variables) ?: ""
+      }.toTypedArray()
+
+    return MessageFormat(template, Locale.ENGLISH).format(parameters)
+  }
+}
+
diff --git a/backend/data/src/main/kotlin/io/tolgee/component/email/customTemplate/EmailTemplateVariables.kt b/backend/data/src/main/kotlin/io/tolgee/component/email/customTemplate/EmailTemplateVariables.kt
@@ -0,0 +1,6 @@
+package io.tolgee.component.email.customTemplate
+
+/**
+ * Marker interface for classes that describe email template variables via [io.tolgee.component.email.customTemplate.placeholder.EmailPlaceholder] annotations.
+ */
+interface EmailTemplateVariables
diff --git a/backend/data/src/main/kotlin/io/tolgee/component/email/customTemplate/placeholder/EmailPlaceholder.kt b/backend/data/src/main/kotlin/io/tolgee/component/email/customTemplate/placeholder/EmailPlaceholder.kt
@@ -0,0 +1,10 @@
+package io.tolgee.component.email.customTemplate.placeholder
+
+@Target(AnnotationTarget.PROPERTY)
+@Retention(AnnotationRetention.RUNTIME)
+annotation class EmailPlaceholder(
+  val position: Int,
+  val placeholder: String,
+  val description: String,
+  val exampleValue: String,
+)
diff --git a/backend/data/src/main/kotlin/io/tolgee/component/email/customTemplate/placeholder/EmailPlaceholderDefinition.kt b/backend/data/src/main/kotlin/io/tolgee/component/email/customTemplate/placeholder/EmailPlaceholderDefinition.kt
@@ -0,0 +1,15 @@
+package io.tolgee.component.email.customTemplate.placeholder
+
+import io.tolgee.component.email.customTemplate.EmailTemplateVariables
+
+data class EmailPlaceholderDefinition(
+  val position: Int,
+  val placeholder: String,
+  val description: String,
+  val exampleValue: String,
+)
+
+data class EmailPlaceholderEntry<T : EmailTemplateVariables>(
+  val definition: EmailPlaceholderDefinition,
+  val accessor: (T) -> String?,
+)
diff --git a/backend/data/src/main/kotlin/io/tolgee/component/email/customTemplate/placeholder/EmailPlaceholdersExtractor.kt b/backend/data/src/main/kotlin/io/tolgee/component/email/customTemplate/placeholder/EmailPlaceholdersExtractor.kt
@@ -0,0 +1,50 @@
+package io.tolgee.component.email.customTemplate.placeholder
+
+import io.tolgee.component.email.customTemplate.EmailTemplateVariables
+import org.springframework.stereotype.Component
+import java.util.concurrent.ConcurrentHashMap
+import kotlin.collections.set
+import kotlin.reflect.KClass
+import kotlin.reflect.full.findAnnotation
+import kotlin.reflect.full.memberProperties
+
+@Component
+class EmailPlaceholdersExtractor {
+
+  private val cache =
+    ConcurrentHashMap<KClass<*>, List<EmailPlaceholderEntry<*>>>()
+
+  fun <T : EmailTemplateVariables> getEntries(kClass: KClass<T>): List<EmailPlaceholderEntry<T>> {
+    val existing = cache[kClass]
+    if (existing != null) {
+      @Suppress("UNCHECKED_CAST")
+      return existing as List<EmailPlaceholderEntry<T>>
+    }
+
+    val extracted = extract(kClass)
+    cache[kClass] = extracted
+    return extracted
+  }
+
+  fun <T : EmailTemplateVariables> getDefinitions(kClass: KClass<T>): List<EmailPlaceholderDefinition> {
+    return getEntries(kClass).map { it.definition }
+  }
+
+  private fun <T : EmailTemplateVariables> extract(kClass: KClass<T>): List<EmailPlaceholderEntry<T>> {
+    return kClass.memberProperties.mapNotNull { property ->
+      val annotation = property.findAnnotation<EmailPlaceholder>() ?: return@mapNotNull null
+
+      EmailPlaceholderEntry(
+        definition = EmailPlaceholderDefinition(
+          position = annotation.position,
+          placeholder = annotation.placeholder,
+          description = annotation.description,
+          exampleValue = annotation.exampleValue,
+        ),
+        accessor = { instance: T ->
+          property.get(instance)?.toString()
+        }
+      )
+    }.sortedBy { it.definition.position }
+  }
+}
diff --git a/webapp/src/component/common/form/HtmlTemplateEditor.tsx b/webapp/src/component/common/form/HtmlTemplateEditor.tsx
@@ -11,7 +11,6 @@ import {
   ToggleButtonGroup,
   Tooltip,
   Typography,
-  useTheme,
 } from '@mui/material';
 import { T, useTranslate } from '@tolgee/react';
 import {
@@ -29,7 +28,6 @@ export type TemplatePlaceholder =
 type Props = {
   value: string;
   onChange: (value: string) => void;
-  label?: string;
   disabled?: boolean;
   readOnly?: boolean;
   placeholders?: TemplatePlaceholder[];
@@ -40,19 +38,15 @@ type Mode = 'html' | 'preview';
 export const HtmlTemplateEditor: React.FC<Props> = ({
   value,
   onChange,
-  label,
   disabled,
   readOnly,
   placeholders = [],
 }) => {
   const { t } = useTranslate();
-  const theme = useTheme();
   const [mode, setMode] = useState<Mode>('html');
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const previewRef = useRef<HTMLDivElement>(null);
 
-  const isDark = theme.palette.mode === 'dark';
-
   useEffect(() => {
     if (
       mode === 'preview' &&
@@ -169,11 +163,29 @@ export const HtmlTemplateEditor: React.FC<Props> = ({
     <Card variant="outlined">
       <Box display="grid" gap={1.5} px={2} pb={2}>
         <Box display="flex" justifyContent="space-between" alignItems="center">
-          {label && (
-            <Typography variant="subtitle1" fontWeight={600}>
-              {label}
-            </Typography>
-          )}
+          <ToggleButtonGroup size="small" exclusive>
+            <ToggleButton
+              value="bold"
+              onClick={() => wrapOrUnwrapSelection('b')}
+              disabled={disabled || readOnly}
+            >
+              <Bold01 width={16} height={16} />
+            </ToggleButton>
+            <ToggleButton
+              value="italic"
+              onClick={() => wrapOrUnwrapSelection('i')}
+              disabled={disabled || readOnly}
+            >
+              <Italic01 width={16} height={16} />
+            </ToggleButton>
+            <ToggleButton
+              value="underline"
+              onClick={() => wrapOrUnwrapSelection('u')}
+              disabled={disabled || readOnly}
+            >
+              <Underline01 width={16} height={16} />
+            </ToggleButton>
+          </ToggleButtonGroup>
           <Tabs
             value={mode}
             onChange={handleTabChange}
@@ -202,30 +214,6 @@ export const HtmlTemplateEditor: React.FC<Props> = ({
           </Tabs>
         </Box>
 
-        <ToggleButtonGroup size="small" exclusive>
-          <ToggleButton
-            value="bold"
-            onClick={() => wrapOrUnwrapSelection('b')}
-            disabled={disabled || readOnly}
-          >
-            <Bold01 width={16} height={16} />
-          </ToggleButton>
-          <ToggleButton
-            value="italic"
-            onClick={() => wrapOrUnwrapSelection('i')}
-            disabled={disabled || readOnly}
-          >
-            <Italic01 width={16} height={16} />
-          </ToggleButton>
-          <ToggleButton
-            value="underline"
-            onClick={() => wrapOrUnwrapSelection('u')}
-            disabled={disabled || readOnly}
-          >
-            <Underline01 width={16} height={16} />
-          </ToggleButton>
-        </ToggleButtonGroup>
-
         {mode === 'html' ? (
           <TextField
             inputRef={textareaRef}
@@ -237,31 +225,19 @@ export const HtmlTemplateEditor: React.FC<Props> = ({
             disabled={disabled}
             InputProps={{
               readOnly,
-              sx: {
-                fontFamily: 'Source Code Pro, monospace',
-                backgroundColor: isDark
-                  ? 'rgba(255,255,255,0.05)'
-                  : 'background.paper',
-                color: isDark ? '#fff' : 'inherit',
-              },
             }}
           />
         ) : (
           <Box
             ref={previewRef}
             contentEditable={!readOnly && !disabled}
             suppressContentEditableWarning
+            p={1}
             sx={{
               minHeight: 150,
               border: 1,
               borderColor: 'divider',
               borderRadius: 1,
-              padding: 1,
-              fontFamily: 'inherit',
-              backgroundColor: isDark
-                ? 'rgba(255,255,255,0.05)'
-                : 'background.paper',
-              color: isDark ? '#fff' : 'inherit',
               '&:focus': { outline: 'none' },
             }}
             onInput={() => {
diff --git a/webapp/src/ee/billing/administration/subscriptionPlans/components/migration/CreatePlanMigrationForm.tsx b/webapp/src/ee/billing/administration/subscriptionPlans/components/migration/CreatePlanMigrationForm.tsx
@@ -1,6 +1,5 @@
 import {
   CreatePlanMigrationFormData,
-  EmailTemplateData,
   PlanMigrationForm,
 } from './PlanMigrationForm';
 import { PlanType } from 'tg.ee.module/billing/administration/subscriptionPlans/components/migration/types';
@@ -18,7 +17,6 @@ type Props = {
   onSubmit: (values: CreatePlanMigrationFormData) => void;
   loading?: boolean;
   planType?: PlanType;
-  emailTemplate?: EmailTemplateData;
 };
 
 export const CreatePlanMigrationForm: React.FC<Props> = (props) => {
diff --git a/webapp/src/ee/billing/administration/subscriptionPlans/components/migration/PlanMigrationEmailSection.tsx b/webapp/src/ee/billing/administration/subscriptionPlans/components/migration/PlanMigrationEmailSection.tsx
@@ -7,7 +7,6 @@ import {
 } from 'tg.ee.module/billing/administration/subscriptionPlans/components/migration/PlanMigrationForm';
 import { Box, Typography } from '@mui/material';
 import { HtmlTemplateEditor } from 'tg.component/common/form/HtmlTemplateEditor';
-import { useEffect } from 'react';
 
 type EmailSectionProps = {
   template?: EmailTemplateData;
@@ -19,12 +18,6 @@ export const PlanMigrationEmailSection = ({ template }: EmailSectionProps) => {
     CreatePlanMigrationFormData | PlanMigrationFormData
   >();
 
-  useEffect(() => {
-    if (values.customEmailBody == null && template?.body) {
-      setFieldValue('customEmailBody', null);
-    }
-  }, [setFieldValue, template?.body, values.customEmailBody]);
-
   return (
     <Box mt={1} display="grid" gap={1}>
       <Typography>
@@ -33,8 +26,6 @@ export const PlanMigrationEmailSection = ({ template }: EmailSectionProps) => {
       <HtmlTemplateEditor
         value={values.customEmailBody ?? template?.body ?? ''}
         onChange={(val) => setFieldValue('customEmailBody', val)}
-        label={t('administration_plan_migration_custom_email_label')}
-        readOnly={false}
         disabled={!template}
         placeholders={template?.placeholders ?? []}
       />
diff --git a/webapp/src/ee/billing/administration/subscriptionPlans/components/migration/PlanMigrationForm.tsx b/webapp/src/ee/billing/administration/subscriptionPlans/components/migration/PlanMigrationForm.tsx
@@ -30,11 +30,10 @@ const normalizeCustomBody = (
   body: string | null | undefined,
   template?: EmailTemplateData
 ): string | null | undefined => {
-  const trimmed = body?.trim();
-  if (!trimmed) {
+  if (!body || !body.trim()) {
     return null;
   }
-  if (template && trimmed === template.body) {
+  if (template && body === template.body) {
     return null;
   }
   return body;

Original file line number	Diff line number	Diff line change
`@@ -30,11 +30,10 @@ const normalizeCustomBody = (`
`30`	`30`	`body: string \| null \| undefined,`
`31`	`31`	`template?: EmailTemplateData`
`32`	`32`	`): string \| null \| undefined => {`
`33`		`- const trimmed = body?.trim();`
`34`		`- if (!trimmed) {`
	`33`	`+ if (!body \|\| !body.trim()) {`
`35`	`34`	`return null;`
`36`	`35`	`}`
`37`		`- if (template && trimmed === template.body) {`
	`36`	`+ if (template && body === template.body) {`
`38`	`37`	`return null;`
`39`	`38`	`}`
`40`	`39`	`return body;`