feat(email): add remove language templates (#2846) (#305)

* feat(email): add remove language templates

* Update EmailTemplateEditor.tsx

* Update EmailTemplateEditor.tsx

public/locales/de-DE/dashboard.json

@@ -572,6 +572,9 @@
     "setAsPreferredLanguageDes": "Wenn die Sprache des Benutzers nicht festgelegt ist, wird diese bevorzugte Sprache verwendet.",
     "alreadyAsPreferredLanguageDes": "Die aktuelle Sprache ist bereits als bevorzugte Sprache festgelegt. Wenn die Sprache des Benutzers nicht festgelegt ist, wird diese bevorzugte Sprache verwendet.",
     "addLanguage": "Sprache hinzufügen",
+    "removeLanguage": "Sprache entfernen",
+    "removeLanguageBtn": "Sprache entfernen",
+    "cannotRemovePreferredLanguageDes": "Die bevorzugte Sprache kann nicht entfernt werden. Bitte legen Sie eine andere Sprache als bevorzugte Sprache fest und versuchen Sie es erneut.",
     "languageCodeDes": "Bitte wählen Sie die Sprache aus, die Sie hinzufügen möchten.",
     "emailSubject": "E-Mail-Betreff",
     "emailSubjectDes": "Die Betreffzeile der E-Mail. Sie können <0>magische Variablen</0> verwenden, um den E-Mail-Betreff anzupassen.",

public/locales/en-US/dashboard.json

@@ -571,6 +571,9 @@
     "setAsPreferredLanguageDes": "This language will be used as the default email template if the user's language preference cannot be determined.",
     "alreadyAsPreferredLanguageDes": "This language is already set as the preferred language. If the user's language preference cannot be determined, this email template will be used.",
     "addLanguage": "Add language",
+    "removeLanguage": "Remove language",
+    "removeLanguageBtn": "Remove language",
+    "cannotRemovePreferredLanguageDes": "Cannot remove the preferred language. Please set another language as the preferred language and try again.",
     "languageCodeDes": "Please select the language you want to add.",
     "emailSubject": "Email saveChanges",
     "emailSubjectDes": "The subject line of the email. You can use <0>magic variables</0> to customize the email subject.",

public/locales/es-ES/dashboard.json

@@ -572,6 +572,9 @@
     "setAsPreferredLanguageDes": "Si no se puede obtener la preferencia de idioma del usuario, se utilizará la plantilla de correo electrónico del idioma preferido.",
     "alreadyAsPreferredLanguageDes": "El idioma actual ya está establecido como preferido. Si no se puede obtener la preferencia de idioma del usuario, se utilizará esta plantilla de correo electrónico.",
     "addLanguage": "Agregar idioma",
+    "removeLanguage": "Eliminar idioma",
+    "removeLanguageBtn": "Eliminar idioma",
+    "cannotRemovePreferredLanguageDes": "No se puede eliminar el idioma preferido. Por favor establece otro idioma como preferido e inténtalo de nuevo.",
     "languageCodeDes": "Por favor selecciona el idioma que quieres agregar.",
     "emailSubject": "Asunto del email",
     "emailSubjectDes": "La línea de asunto del email. Puedes usar <0>variables mágicas</0> para personalizar el asunto del email.",

public/locales/fr-FR/dashboard.json

@@ -572,6 +572,9 @@
     "setAsPreferredLanguageDes": "Si la préférence de langue de l'utilisateur ne peut pas être obtenue, le modèle d'e-mail de la langue préférée sera utilisé.",
     "alreadyAsPreferredLanguageDes": "La langue actuelle est déjà définie comme langue préférée. Si la préférence de langue de l'utilisateur ne peut pas être obtenue, ce modèle d'e-mail sera utilisé.",
     "addLanguage": "Ajouter une langue",
+    "removeLanguage": "Supprimer la langue",
+    "removeLanguageBtn": "Supprimer la langue",
+    "cannotRemovePreferredLanguageDes": "Impossible de supprimer la langue préférée. Veuillez définir une autre langue comme langue préférée et réessayer.",
     "languageCodeDes": "Veuillez sélectionner la langue que vous souhaitez ajouter.",
     "emailSubject": "Sujet de l'e-mail",
     "emailSubjectDes": "La ligne d'objet de l'e-mail. Vous pouvez utiliser des <0>variables magiques</0> pour personnaliser le sujet de l'e-mail.",

public/locales/it-IT/dashboard.json

@@ -572,6 +572,9 @@
     "setAsPreferredLanguageDes": "Se non è possibile ottenere le preferenze linguistiche dell'utente, verrà utilizzato il template email della lingua preferita.",
     "alreadyAsPreferredLanguageDes": "La lingua corrente è già impostata come preferita. Se non è possibile ottenere le preferenze linguistiche dell'utente, verrà utilizzato il template email della lingua corrente.",
     "addLanguage": "Aggiungi lingua",
+    "removeLanguage": "Rimuovi lingua",
+    "removeLanguageBtn": "Rimuovi lingua",
+    "cannotRemovePreferredLanguageDes": "Impossibile rimuovere la lingua preferita. Imposta un'altra lingua come preferita e riprova.",
     "languageCodeDes": "Seleziona la lingua che vuoi aggiungere.",
     "emailSubject": "Oggetto email",
     "emailSubjectDes": "L'oggetto dell'email. Puoi usare <0>variabili magiche</0> per personalizzare l'oggetto dell'email.",

public/locales/ja-JP/dashboard.json

@@ -571,6 +571,9 @@
     "setAsPreferredLanguageDes": "ユーザーの言語設定が取得できない場合、優先言語のメールテンプレートが使用されます。",
     "alreadyAsPreferredLanguageDes": "現在の言語は既に優先言語として設定されています。ユーザーの言語設定が取得できない場合、優先言語のメールテンプレートが使用されます。",
     "addLanguage": "言語を追加",
+    "removeLanguage": "言語を削除",
+    "removeLanguageBtn": "言語を削除",
+    "cannotRemovePreferredLanguageDes": "優先言語は削除できません。別の言語を優先言語に設定してから再試行してください。",
     "languageCodeDes": "追加する言語を選択してください。",
     "emailSubject": "メール件名",
     "emailSubjectDes": "メールの件名。<0>魔法変数</0> を使用して件名をカスタマイズできます。",

public/locales/ko-KR/dashboard.json

@@ -571,6 +571,9 @@
     "setAsPreferredLanguageDes": "사용자의 언어 선호도를 가져올 수 없는 경우 선호 언어의 이메일 템플릿이 사용됩니다.",
     "alreadyAsPreferredLanguageDes": "현재 언어가 선호 언어로 설정되어 있습니다. 사용자의 언어 선호도를 가져올 수 없는 경우 이 이메일 템플릿이 사용됩니다.",
     "addLanguage": "언어 추가",
+    "removeLanguage": "언어 제거",
+    "removeLanguageBtn": "언어 제거",
+    "cannotRemovePreferredLanguageDes": "선호 언어는 제거할 수 없습니다. 다른 언어를 선호 언어로 설정한 후 다시 시도해 주세요.",
     "languageCodeDes": "추가할 언어를 선택해 주세요.",
     "emailSubject": "이메일 제목",
     "emailSubjectDes": "이메일의 제목. <0>매직 변수</0>를 사용하여 사용자 정의할 수 있습니다.",

public/locales/pt-BR/dashboard.json

@@ -572,6 +572,9 @@
     "setAsPreferredLanguageDes": "Se o idioma preferido do usuário não puder ser obtido, o modelo de email deste idioma será usado.",
     "alreadyAsPreferredLanguageDes": "O idioma atual já está definido como preferido. Se o idioma preferido do usuário não puder ser obtido, o modelo de email deste idioma será usado.",
     "addLanguage": "Adicionar idioma",
+    "removeLanguage": "Remover idioma",
+    "removeLanguageBtn": "Remover idioma",
+    "cannotRemovePreferredLanguageDes": "Não é possível remover o idioma preferido. Defina outro idioma como preferido e tente novamente.",
     "languageCodeDes": "Selecione o idioma que deseja adicionar.",
     "emailSubject": "Assunto do email",
     "emailSubjectDes": "A linha de assunto do email. Você pode usar <0>variáveis mágicas</0> para personalizar o assunto do email.",

public/locales/ru-RU/dashboard.json

@@ -572,6 +572,9 @@
     "setAsPreferredLanguageDes": "Если язык пользователя не может быть определен, будет использоваться предпочитаемый язык.",
     "alreadyAsPreferredLanguageDes": "Этот язык уже установлен как предпочитаемый. Если язык пользователя не может быть определен, будет использоваться этот шаблон письма.",
     "addLanguage": "Добавить язык",
+    "removeLanguage": "Удалить язык",
+    "removeLanguageBtn": "Удалить язык",
+    "cannotRemovePreferredLanguageDes": "Нельзя удалить предпочитаемый язык. Пожалуйста, установите другой язык в качестве предпочитаемого и попробуйте снова.",
     "languageCodeDes": "Пожалуйста, выберите язык для добавления.",
     "emailSubject": "Тема письма",
     "emailSubjectDes": "Тема электронного письма. Вы можете использовать <0>магические переменные</0> для настройки темы письма.",

public/locales/zh-CN/dashboard.json

@@ -571,6 +571,9 @@
     "setAsPreferredLanguageDes": "如果无法获取用户的语言偏好，将使用首选语言的邮件模板。",
     "alreadyAsPreferredLanguageDes": "当前语言已设为首选语言。如果无法获取用户的语言偏好，将使用此邮件模板。",
     "addLanguage": "添加语言",
+    "removeLanguage": "移除语言",
+    "removeLanguageBtn": "移除语言",
+    "cannotRemovePreferredLanguageDes": "无法移除首选语言。请设置其他语言为首选语言后重试。",
     "languageCodeDes": "请选择要添加的语言。",
     "emailSubject": "邮件主题",
     "emailSubjectDes": "邮件的主题。你可以使用 <0>魔法变量</0> 来定制邮件主题。",

public/locales/zh-TW/dashboard.json

@@ -571,6 +571,9 @@
     "setAsPreferredLanguageDes": "如果無法獲取使用者的語言偏好，將使用首選語言的郵件模板。",
     "alreadyAsPreferredLanguageDes": "當前語言已設為首選語言。如果無法獲取使用者的語言偏好，將使用此郵件模板。",
     "addLanguage": "新增語言",
+    "removeLanguage": "移除語言",
+    "removeLanguageBtn": "移除語言",
+    "cannotRemovePreferredLanguageDes": "無法移除首選語言。請設定其他語言為首選語言後重試。",
     "languageCodeDes": "請選擇要新增的語言。",
     "emailSubject": "郵件主題",
     "emailSubjectDes": "郵件的主題。你可以使用 <0>魔法變數</0> 來定製郵件主題。",

src/component/Admin/Settings/Email/EmailTemplateEditor.tsx

@@ -1,3 +1,4 @@
+import { Delete } from "@mui/icons-material";
 import {
   Box,
   Button,
@@ -117,6 +118,16 @@ const EmailTemplateEditor: React.FC<EmailTemplateEditorProps> = ({ value, onChan
     setCurrentTab(templates.length);
   };
 
+  const removeLanguage = (index: number) => {
+    isUpdatingFromProp.current = false; // Ensure this is a user interaction
+    const updatedTemplates = templates.filter((_, i) => i !== index);
+    setTemplates(updatedTemplates);
+
+    if (currentTab >= updatedTemplates.length) {
+      setCurrentTab(updatedTemplates.length - 1); // Move to the last tab if current is out of range
+    }
+  };
+
   const setPreferredLanguage = (index: number) => {
     isUpdatingFromProp.current = false; // Ensure this is a user interaction
     setTemplates([templates[index], ...templates.filter((_, i) => i !== index)]);
@@ -164,7 +175,7 @@ const EmailTemplateEditor: React.FC<EmailTemplateEditorProps> = ({ value, onChan
           {currentTab === index && (
             <Box>
               <FormControl fullWidth sx={{ mb: 2 }}>
-                <Typography variant="subtitle2" sx={{ mb: 1 }}>
+                <Typography variant="subtitle2" sx={{ mb: index === 0 ? 0 : 1 }}>
                   {t("settings.preferredLanguage")}
                 </Typography>
                 {index != 0 && (
@@ -189,7 +200,7 @@ const EmailTemplateEditor: React.FC<EmailTemplateEditorProps> = ({ value, onChan
                 <DenseFilledTextField
                   fullWidth
                   value={template.title}
-                  onChange={(e) => updateTemplate(index, "title", e.target.value)}
+                  onChange={(e) => updateTemplate(index, "title", e.target.value || "")}
                 />
                 <NoMarginHelperText>
                   <Trans
@@ -220,13 +231,36 @@ const EmailTemplateEditor: React.FC<EmailTemplateEditorProps> = ({ value, onChan
                   />
                 </Suspense>
               </Box>
-              <NoMarginHelperText>
+              <NoMarginHelperText sx={{ mb: 2 }}>
                 <Trans
                   i18nKey={"settings.emailBodyDes"}
                   ns={"dashboard"}
                   components={[<Link onClick={openMagicVar} href={"#"} />]}
                 />
               </NoMarginHelperText>
+
+              <FormControl fullWidth>
+                <Typography variant="subtitle2" sx={{ mb: index === 0 ? 0 : 1 }}>
+                  {t("settings.removeLanguage")}
+                </Typography>
+                {index != 0 && (
+                  <Box>
+                    <Button
+                      startIcon={<Delete />}
+                      variant="contained"
+                      color="error"
+                      onClick={() => removeLanguage(index)}
+                    >
+                      {t("settings.removeLanguageBtn")}
+                    </Button>
+                  </Box>
+                )}
+                {index === 0 && (
+                  <NoMarginHelperText>
+                    {t("settings.cannotRemovePreferredLanguageDes")}
+                  </NoMarginHelperText>
+                )}
+              </FormControl>
             </Box>
           )}
         </Box>