From 4b2f9ff306c227eff7856b61913f60e67761f9bd Mon Sep 17 00:00:00 2001
From: Pete Matsyburka <pete.matsy@gmail.com>
Date: Fri, 26 Jan 2024 16:45:32 +0200
Subject: [PATCH] improve form i18n

---
 app/javascript/submission_form/area.vue       |  28 +--
 .../submission_form/attachment_step.vue       |   3 +-
 app/javascript/submission_form/form.vue       |  14 +-
 app/javascript/submission_form/i18n.js        | 235 ++++++++++++++----
 app/javascript/submission_form/image_step.vue |   4 +-
 5 files changed, 210 insertions(+), 74 deletions(-)

diff --git a/app/javascript/submission_form/area.vue b/app/javascript/submission_form/area.vue
index b18f17a1..9c2b96ab 100644
--- a/app/javascript/submission_form/area.vue
+++ b/app/javascript/submission_form/area.vue
@@ -236,20 +236,20 @@ export default {
   computed: {
     fieldNames () {
       return {
-        text: 'Text',
-        cells: 'Text',
-        signature: 'Signature',
-        date: 'Date',
-        image: 'Image',
-        stamp: 'Stamp',
-        initials: 'Initials',
-        file: 'File',
-        select: 'Select',
-        checkbox: 'Checkbox',
-        radio: 'Radio',
-        multiple: 'Multiple Select',
-        phone: 'Phone',
-        payment: 'Payment'
+        text: this.t('text'),
+        signature: this.t('signature'),
+        initials: this.t('initials'),
+        date: this.t('date'),
+        image: this.t('image'),
+        file: this.t('file'),
+        select: this.t('select'),
+        checkbox: this.t('checkbox'),
+        multiple: this.t('multiple'),
+        radio: this.t('radio'),
+        cells: this.t('cells'),
+        stamp: this.t('stamp'),
+        payment: this.t('payment'),
+        phone: this.t('phone')
       }
     },
     option () {
diff --git a/app/javascript/submission_form/attachment_step.vue b/app/javascript/submission_form/attachment_step.vue
index c70279b9..419394c1 100644
--- a/app/javascript/submission_form/attachment_step.vue
+++ b/app/javascript/submission_form/attachment_step.vue
@@ -42,7 +42,7 @@
       >
     </template>
     <FileDropzone
-      :message="`Upload ${field.name || 'Attachments'}${field.required ? '' : ' (optional)'}`"
+      :message="`${t('upload')} ${field.name || t('files')}${field.required ? '' : ` (${t('optional')})`}`"
       :submitter-slug="submitterSlug"
       :is-direct-upload="isDirectUpload"
       :multiple="true"
@@ -62,6 +62,7 @@ export default {
     IconPaperclip,
     IconTrashX
   },
+  inject: ['t'],
   props: {
     field: {
       type: Object,
diff --git a/app/javascript/submission_form/form.vue b/app/javascript/submission_form/form.vue
index 441cfb09..c5263a01 100644
--- a/app/javascript/submission_form/form.vue
+++ b/app/javascript/submission_form/form.vue
@@ -397,7 +397,7 @@ import DateStep from './date_step'
 import FormCompleted from './completed'
 import { IconInnerShadowTop, IconArrowsDiagonal, IconArrowsDiagonalMinimize2 } from '@tabler/icons-vue'
 import AppearsOn from './appears_on'
-import { t } from './i18n'
+import i18n from './i18n'
 
 export default {
   name: 'SubmissionForm',
@@ -508,6 +508,11 @@ export default {
       required: false,
       default: true
     },
+    language: {
+      type: String,
+      required: false,
+      default: ''
+    },
     values: {
       type: Object,
       required: false,
@@ -549,6 +554,9 @@ export default {
     currentStepFields () {
       return this.stepFields[this.currentStep]
     },
+    browserLanguage () {
+      return (navigator.language || navigator.userLanguage || 'en').split('-')[0]
+    },
     queryParams () {
       return new URLSearchParams(window.location.search)
     },
@@ -666,7 +674,9 @@ export default {
     })
   },
   methods: {
-    t,
+    t (key) {
+      return i18n[this.language?.toLowerCase()]?.[key] || i18n[this.browserLanguage]?.[key] || i18n.en[key] || key
+    },
     maybeTrackEmailClick () {
       const { queryParams } = this
 
diff --git a/app/javascript/submission_form/i18n.js b/app/javascript/submission_form/i18n.js
index 3d6f41ad..7c913305 100644
--- a/app/javascript/submission_form/i18n.js
+++ b/app/javascript/submission_form/i18n.js
@@ -1,4 +1,18 @@
 const en = {
+  text: 'Text',
+  signature: 'Signature',
+  initials: 'Initials',
+  date: 'Date',
+  image: 'Image',
+  file: 'File',
+  select: 'Select',
+  checkbox: 'Checkbox',
+  multiple: 'Multiple',
+  radio: 'Radio',
+  cells: 'Cells',
+  stamp: 'Stamp',
+  payment: 'Payment',
+  phone: 'Phone',
   submit_form: 'Submit Form',
   type_here_: 'Type here...',
   optional: 'optional',
@@ -13,11 +27,8 @@ const en = {
   or_drag_and_drop_files: 'or drag and drop files',
   send_copy_via_email: 'Send copy via email',
   download: 'Download',
-  signature: 'Signature',
-  initials: 'Initials',
   clear: 'Clear',
   redraw: 'Redraw',
-  image: 'Image',
   draw_initials: 'Draw initials',
   type_signature_here: 'Type signature here',
   type_initial_here: 'Type initials here',
@@ -41,13 +52,29 @@ const en = {
   draw: 'Draw',
   type: 'Type',
   type_text: 'Type text',
-  date: 'Date',
   email_has_been_sent: 'Email has been sent',
   processing: 'Processing',
-  pay_with_strip: 'Pay with Stripe'
+  pay_with_strip: 'Pay with Stripe',
+  reupload: 'Reupload',
+  upload: 'Upload',
+  files: 'Files'
 }
 
 const es = {
+  text: 'Texto',
+  signature: 'Firma',
+  initials: 'Iniciales',
+  date: 'Fecha',
+  image: 'Imagen',
+  file: 'Archivo',
+  select: 'Seleccionar',
+  checkbox: 'Casilla',
+  multiple: 'Múltiple',
+  radio: 'Radio',
+  cells: 'Celdas',
+  stamp: 'Sello',
+  payment: 'Pago',
+  phone: 'Teléfono',
   submit_form: 'Enviar Formulario',
   type_here_: 'Escribe aquí...',
   optional: 'opcional',
@@ -61,11 +88,8 @@ const es = {
   or_drag_and_drop_files: 'o arrastra y suelta archivos',
   send_copy_via_email: 'Enviar copia por correo electrónico',
   download: 'Descargar',
-  signature: 'Firma',
-  initials: 'Iniciales',
   clear: 'Borrar',
   redraw: 'Redibujar',
-  image: 'Imagen',
   draw_initials: 'Dibujar iniciales',
   type_signature_here: 'Escribe la firma aquí',
   type_initial_here: 'Escribe las iniciales aquí',
@@ -83,7 +107,6 @@ const es = {
   verification_code_has_been_resent: 'El código de verificación ha sido reenviado por SMS',
   please_fill_all_required_fields: 'Por favor, complete todos los campos obligatorios',
   set_today: 'Establecer Hoy',
-  date: 'Fecha',
   toggle_multiline_text: 'Alternar Texto Multilínea',
   draw_signature: 'Dibujar firma',
   type_initial: 'Escribir iniciales',
@@ -92,10 +115,27 @@ const es = {
   type_text: 'Escribir texto',
   email_has_been_sent: 'El correo electrónico ha sido enviado',
   processing: 'Procesando',
-  pay_with_strip: 'Pagar con Stripe'
+  pay_with_strip: 'Pagar con Stripe',
+  reupload: 'Volver a subir',
+  upload: 'Subir',
+  files: 'Archivos'
 }
 
 const it = {
+  text: 'Testo',
+  signature: 'Firma',
+  initials: 'Iniziali',
+  date: 'Data',
+  image: 'Immagine',
+  file: 'File',
+  select: 'Seleziona',
+  checkbox: 'Casella di controllo',
+  multiple: 'Multiplo',
+  radio: 'Radio',
+  cells: 'Celle',
+  stamp: 'Timbro',
+  payment: 'Pagamento',
+  phone: 'Telefono',
   submit_form: 'Invia Modulo',
   type_here_: 'Digita qui...',
   optional: 'opzionale',
@@ -109,11 +149,8 @@ const it = {
   or_drag_and_drop_files: 'oppure trascina e rilascia i file',
   send_copy_via_email: 'Invia copia via email',
   download: 'Scarica',
-  signature: 'Firma',
-  initials: 'Iniziali',
   clear: 'Cancella',
   redraw: 'Ridisegna',
-  image: 'Immagine',
   draw_initials: 'Disegna iniziali',
   type_signature_here: 'Scrivi la firma qui',
   type_initial_here: 'Scrivi le iniziali qui',
@@ -131,7 +168,6 @@ const it = {
   verification_code_has_been_resent: 'Il codice di verifica è stato rinviato tramite SMS',
   please_fill_all_required_fields: 'Si prega di compilare tutti i campi obbligatori',
   set_today: 'Imposta Oggi',
-  date: 'Data',
   draw_signature: 'Disegna firma',
   type_initial: 'Inserisci iniziali',
   draw: 'Disegna',
@@ -140,10 +176,27 @@ const it = {
   toggle_multiline_text: 'Attiva Testo Multilinea',
   email_has_been_sent: "L'email è stata inviata",
   processing: 'Elaborazione',
-  pay_with_strip: 'Paga con Stripe'
+  pay_with_strip: 'Paga con Stripe',
+  reupload: 'Ricarica',
+  upload: 'Carica',
+  files: 'File'
 }
 
 const de = {
+  text: 'Text',
+  signature: 'Unterschrift',
+  initials: 'Initialen',
+  date: 'Datum',
+  image: 'Bild',
+  file: 'Datei',
+  select: 'Auswählen',
+  checkbox: 'Checkbox',
+  multiple: 'Mehrere',
+  radio: 'Radio',
+  cells: 'Zellen',
+  stamp: 'Stempel',
+  payment: 'Zahlung',
+  phone: 'Telefon',
   submit_form: 'Formular absenden',
   type_here_: 'Hier eingeben...',
   optional: 'optional',
@@ -157,11 +210,8 @@ const de = {
   or_drag_and_drop_files: 'oder Dateien hierher ziehen und ablegen',
   send_copy_via_email: 'Kopie per E-Mail senden',
   download: 'Herunterladen',
-  signature: 'Unterschrift',
-  initials: 'Initialen',
   clear: 'Löschen',
   redraw: 'Neu zeichnen',
-  image: 'Bild',
   draw_initials: 'Initialen zeichnen',
   type_signature_here: 'Unterschrift hier eingeben',
   type_initial_here: 'Initialen hier eingeben',
@@ -179,7 +229,6 @@ const de = {
   verification_code_has_been_resent: 'Die Verifizierungscode wurde erneut per SMS gesendet',
   please_fill_all_required_fields: 'Bitte füllen Sie alle erforderlichen Felder aus',
   set_today: 'Heute einstellen',
-  date: 'Datum',
   draw_signature: 'Unterschrift zeichnen',
   type_initial: 'Initialen eingeben',
   draw: 'Zeichnen',
@@ -188,10 +237,27 @@ const de = {
   toggle_multiline_text: 'Mehrzeiligen Text umschalten',
   email_has_been_sent: 'Die E-Mail wurde gesendet',
   processing: 'Verarbeitung',
-  pay_with_strip: 'Mit Stripe bezahlen'
+  pay_with_strip: 'Mit Stripe bezahlen',
+  reupload: 'Erneut hochladen',
+  upload: 'Hochladen',
+  files: 'Dateien'
 }
 
 const fr = {
+  text: 'Texte',
+  signature: 'Signature',
+  initials: 'Initiales',
+  date: 'Date',
+  image: 'Image',
+  file: 'Fichier',
+  select: 'Choisir',
+  checkbox: 'Coche',
+  multiple: 'Multiple',
+  radio: 'Radio',
+  cells: 'Cellules',
+  stamp: 'Tampon',
+  payment: 'Paiement',
+  phone: 'Téléphone',
   submit_form: 'Envoyer le Formulaire',
   type_here_: 'Tapez ici...',
   optional: 'facultatif',
@@ -205,11 +271,8 @@ const fr = {
   or_drag_and_drop_files: 'ou faites glisser-déposer les fichiers',
   send_copy_via_email: 'Envoyer une copie par e-mail',
   download: 'Télécharger',
-  signature: 'Signature',
-  initials: 'Initiales',
   clear: 'Effacer',
   redraw: 'Redessiner',
-  image: 'Image',
   draw_initials: 'Dessiner les initiales',
   type_signature_here: 'Tapez la signature ici',
   type_initial_here: 'Tapez les initiales ici',
@@ -227,7 +290,6 @@ const fr = {
   verification_code_has_been_resent: 'Le code de vérification a été renvoyé par SMS',
   please_fill_all_required_fields: 'Veuillez remplir tous les champs obligatoires',
   set_today: "Définir Aujourd'hui",
-  date: 'Date',
   draw_signature: 'Dessiner une signature',
   type_initial: 'Saisir les initiales',
   draw: 'Dessiner',
@@ -236,10 +298,27 @@ const fr = {
   toggle_multiline_text: 'Basculer le Texte Multiligne',
   email_has_been_sent: "L'email a été envoyé",
   processing: 'Traitement',
-  pay_with_strip: 'Paiement avec Stripe'
+  pay_with_strip: 'Paiement avec Stripe',
+  reupload: 'Recharger',
+  upload: 'Télécharger',
+  files: 'Fichiers'
 }
 
 const pl = {
+  text: 'Tekst',
+  signature: 'Podpis',
+  initials: 'Inicjały',
+  date: 'Data',
+  image: 'Obraz',
+  file: 'Plik',
+  select: 'Wybierz',
+  checkbox: 'Pole wyboru',
+  multiple: 'Wielokrotne',
+  radio: 'Radio',
+  cells: 'Komórki',
+  stamp: 'Pieczątka',
+  payment: 'Płatność',
+  phone: 'Telefon',
   submit_form: 'Wyślij Formularz',
   type_here_: 'Wpisz tutaj...',
   optional: 'opcjonalny',
@@ -253,11 +332,8 @@ const pl = {
   or_drag_and_drop_files: 'lub przeciągnij i upuść pliki',
   send_copy_via_email: 'Wyślij kopię drogą mailową',
   download: 'Pobierz',
-  signature: 'Podpis',
-  initials: 'Inicjały',
   clear: 'Wyczyść',
   redraw: 'Przerysuj',
-  image: 'Obraz',
   draw_initials: 'Narysuj inicjały',
   type_signature_here: 'Wpisz podpis tutaj',
   type_initial_here: 'Wpisz inicjały tutaj',
@@ -275,7 +351,6 @@ const pl = {
   verification_code_has_been_resent: 'Kod weryfikacyjny został ponownie wysłany',
   please_fill_all_required_fields: 'Proszę wypełnić wszystkie wymagane pola',
   set_today: 'Ustaw Dziś',
-  date: 'Data',
   draw_signature: 'Rysuj podpis',
   type_initial: 'Wprowadź inicjały',
   draw: 'Rysuj',
@@ -284,10 +359,27 @@ const pl = {
   toggle_multiline_text: 'Przełącz Tekst Wielolinijkowy',
   email_has_been_sent: 'E-mail został wysłany',
   processing: 'Przetwarzanie',
-  pay_with_strip: 'Płatność za pomocą Stripe'
+  pay_with_strip: 'Płatność za pomocą Stripe',
+  reupload: 'Ponowne przesłanie',
+  upload: 'Przesyłanie',
+  files: 'Pliki'
 }
 
 const uk = {
+  text: 'Текст',
+  signature: 'Підпис',
+  initials: 'Ініціали',
+  date: 'Дата',
+  image: 'Зображення',
+  file: 'Файл',
+  select: 'Вибрати',
+  checkbox: 'Прапорець',
+  multiple: 'Множинний',
+  radio: 'Радіо',
+  cells: 'Клітинки',
+  stamp: 'Штамп',
+  payment: 'Платіж',
+  phone: 'Телефон',
   submit_form: 'Надіслати Форму',
   type_here_: 'Введіть тут',
   optional: 'необов’язково',
@@ -301,11 +393,8 @@ const uk = {
   or_drag_and_drop_files: 'або перетягніть файли сюди',
   send_copy_via_email: 'Надіслати копію електронною поштою',
   download: 'Завантажити',
-  signature: 'Підпис',
-  initials: 'Ініціали',
   clear: 'Очистити',
   redraw: 'Перемалювати',
-  image: 'Зображення',
   draw_initials: 'Намалювати ініціали',
   type_signature_here: 'Введіть підпис тут',
   type_initial_here: 'Введіть ініціали тут',
@@ -323,7 +412,6 @@ const uk = {
   verification_code_has_been_resent: 'Код підтвердження був повторно надісланий',
   please_fill_all_required_fields: "Будь ласка, заповніть всі обов'язкові поля",
   set_today: 'Задати Сьогодні',
-  date: 'Дата',
   draw_signature: 'Намалюйте підпис',
   type_initial: 'Введіть ініціали',
   draw: 'Підпис',
@@ -332,10 +420,27 @@ const uk = {
   toggle_multiline_text: 'Перемкнути Багаторядковий Текст',
   email_has_been_sent: 'Електронний лист був відправлений',
   processing: 'Обробка',
-  pay_with_strip: 'Сплатити за допомогою Stripe'
+  pay_with_strip: 'Сплатити за допомогою Stripe',
+  reupload: 'Перезавантажити',
+  upload: 'Завантажити',
+  files: 'Файли'
 }
 
 const cs = {
+  text: 'Text',
+  signature: 'Podpis',
+  initials: 'Iniciály',
+  date: 'Datum',
+  image: 'Obrázek',
+  file: 'Soubor',
+  select: 'Vybrat',
+  checkbox: 'Zaškrtávací políčko',
+  multiple: 'Více možností',
+  radio: 'Rádio',
+  cells: 'Buňky',
+  stamp: 'Razítko',
+  payment: 'Platba',
+  phone: 'Telefon',
   submit_form: 'Odeslat formulář',
   type_here_: 'Zadejte zde',
   optional: 'volitelné',
@@ -349,11 +454,8 @@ const cs = {
   or_drag_and_drop_files: 'nebo přetáhněte soubory sem',
   send_copy_via_email: 'Odeslat kopii e-mailem',
   download: 'Stáhnout',
-  signature: 'Podpis',
-  initials: 'Iniciály',
   clear: 'Smazat',
   redraw: 'Překreslit',
-  image: 'Obrázek',
   draw_initials: 'Nakreslit iniciály',
   type_signature_here: 'Sem zadejte podpis',
   type_initial_here: 'Sem zadejte iniciály',
@@ -371,7 +473,6 @@ const cs = {
   verification_code_has_been_resent: 'Ověřovací kód byl znovu odeslán',
   please_fill_all_required_fields: 'Prosím vyplňte všechny povinné položky',
   set_today: 'Nastavit Dnes',
-  date: 'Datum',
   draw_signature: 'Nakreslit podpis',
   type_initial: 'Zadat iniciály',
   draw: 'Kreslit',
@@ -380,10 +481,27 @@ const cs = {
   toggle_multiline_text: 'Přepnout Víceřádkový Text',
   email_has_been_sent: 'E-mail byl odeslán',
   processing: 'Zpracování',
-  pay_with_strip: 'Zaplacení přes Stripe'
+  pay_with_strip: 'Zaplacení přes Stripe',
+  reupload: 'Znovu nahrát',
+  upload: 'Nahrát',
+  files: 'Soubory'
 }
 
 const pt = {
+  text: 'Texto',
+  signature: 'Assinatura',
+  initials: 'Iniciais',
+  date: 'Data',
+  image: 'Imagem',
+  file: 'Arquivo',
+  select: 'Selecionar',
+  checkbox: 'Caixa',
+  multiple: 'Múltiplo',
+  radio: 'Rádio',
+  cells: 'Células',
+  stamp: 'Carimbo',
+  payment: 'Pagamento',
+  phone: 'Telefone',
   submit_form: 'Enviar Formulário',
   type_here_: 'Digite aqui',
   optional: 'opcional',
@@ -397,11 +515,8 @@ const pt = {
   or_drag_and_drop_files: 'ou arraste e solte arquivos',
   send_copy_via_email: 'Enviar cópia por e-mail',
   download: 'Baixar',
-  signature: 'Assinatura',
-  initials: 'Iniciais',
   clear: 'Limpar',
   redraw: 'Redesenhar',
-  image: 'Imagem',
   draw_initials: 'Desenhar iniciais',
   type_signature_here: 'Digite a assinatura aqui',
   type_initial_here: 'Digite as iniciais aqui',
@@ -419,7 +534,6 @@ const pt = {
   verification_code_has_been_resent: 'O código de verificação foi reenviado via SMS',
   please_fill_all_required_fields: 'Por favor, preencha todos os campos obrigatórios',
   set_today: 'Definir Hoje',
-  date: 'Data',
   draw_signature: 'Desenhar assinatura',
   type_initial: 'Inserir iniciais',
   draw: 'Desenhar',
@@ -428,10 +542,27 @@ const pt = {
   toggle_multiline_text: 'Alternar Texto Multilinha',
   email_has_been_sent: 'Email enviado',
   processing: 'Processamento',
-  pay_with_strip: 'Pagar com Stripe'
+  pay_with_strip: 'Pagar com Stripe',
+  reupload: 'Reenviar',
+  upload: 'Carregar',
+  files: 'Arquivos'
 }
 
 const he = {
+  text: 'טקסט',
+  signature: 'חתימה',
+  initials: 'ראשי תיקיות',
+  date: 'תאריך',
+  image: 'תמונה',
+  file: 'קובץ',
+  select: 'בחר',
+  checkbox: 'תיק בחירה',
+  multiple: 'רב ערכים',
+  radio: 'רדיו',
+  cells: 'תאים',
+  stamp: 'חותמת',
+  payment: 'תשלום',
+  phone: 'טלפון',
   submit_form: 'שלח טופס',
   type_here_: 'הקלד כאן',
   optional: 'אופציונלי',
@@ -446,11 +577,8 @@ const he = {
   or_drag_and_drop_files: 'או גרור ושחרר קבצים',
   send_copy_via_email: 'שלח עותק באמצעות אימייל',
   download: 'הורדה',
-  signature: 'חתימה',
-  initials: 'ציוני ראשי תיבות',
   clear: 'נקה',
   redraw: 'צייר מחדש',
-  image: 'תמונה',
   draw_initials: 'צייר ציוני ראשי תיבות',
   type_signature_here: 'הקלד חתימה כאן',
   type_initial_here: 'הקלד ציוני ראשי תיבות כאן',
@@ -474,17 +602,14 @@ const he = {
   draw: 'צייר',
   type: 'הקלד',
   type_text: 'הקלד טקסט',
-  date: 'תאריך',
   email_has_been_sent: 'האימייל נשלח',
   processing: 'מעבד',
-  pay_with_strip: 'שלם עם סטרייפ'
+  pay_with_strip: 'שלם עם סטרייפ',
+  reupload: 'העלה שוב',
+  upload: 'העלאה',
+  files: 'קבצים'
 }
 
 const i18n = { en, es, it, de, fr, pl, uk, cs, pt, he }
 
-const browserLanguage = (navigator.language || navigator.userLanguage || 'en').split('-')[0]
-
-const t = (key) => i18n[browserLanguage]?.[key] || i18n.en[key] || key
-
 export default i18n
-export { t }
diff --git a/app/javascript/submission_form/image_step.vue b/app/javascript/submission_form/image_step.vue
index c9784c4f..faed6dac 100644
--- a/app/javascript/submission_form/image_step.vue
+++ b/app/javascript/submission_form/image_step.vue
@@ -9,7 +9,7 @@
         @click.prevent="remove"
       >
         <IconReload :width="16" />
-        Reupload
+        {{ t('reupload') }}
       </button>
     </div>
     <div>
@@ -27,7 +27,7 @@
   <div>
     <FileDropzone
       v-if="!modelValue"
-      :message="`Upload ${field.name || 'Image'}${field.required ? '' : ' (optional)'}`"
+      :message="`${t('upload')} ${field.name || t('image')}${field.required ? '' : ` (${t('optional')})`}`"
       :submitter-slug="submitterSlug"
       :accept="'image/*'"
       :is-direct-upload="isDirectUpload"