add builder i18n

app/javascript/template_builder/area.vue

@@ -149,7 +149,7 @@ export default {
     FieldSubmitter,
     IconX
   },
-  inject: ['template', 'selectedAreaRef', 'save'],
+  inject: ['template', 'selectedAreaRef', 'save', 't'],
   props: {
     area: {
       type: Object,

app/javascript/template_builder/builder.vue

@@ -43,7 +43,7 @@
               class="inline"
             />
             <span class="hidden md:inline">
-              Sign Yourself
+              {{ t('sign_yourself') }}
             </span>
           </a>
           <a
@@ -57,7 +57,7 @@
               class="inline"
             />
             <span class="hidden md:inline">
-              Send
+              {{ t('send') }}
             </span>
           </a>
           <button
@@ -76,7 +76,7 @@
               width="22"
             />
             <span class="hidden md:inline">
-              Save
+              {{ t('save') }}
             </span>
           </button>
         </template>
@@ -214,14 +214,14 @@
         >
           <div class="bg-base-300 rounded-lg p-5 text-center space-y-4">
             <p>
-              Draw {{ drawField.name }} field on the document
+              {{ t('draw_field_on_the_document').replace('{field}', drawField.name) }}
             </p>
             <p>
               <button
                 class="base-button"
                 @click="[drawField = null, drawOption = null]"
               >
-                Cancel
+                {{ t('cancel') }}
               </button>
             </p>
           </div>
@@ -232,6 +232,7 @@
             :fields="template.fields"
             :submitters="template.submitters"
             :selected-submitter="selectedSubmitter"
+            :with-help="withHelp"
             :default-submitters="defaultSubmitters"
             :default-fields="defaultFields"
             :with-sticky-submitters="withStickySubmitters"
@@ -262,6 +263,7 @@ import MobileFields from './mobile_fields'
 import { IconUsersPlus, IconDeviceFloppy, IconWritingSign, IconInnerShadowTop } from '@tabler/icons-vue'
 import { v4 } from 'uuid'
 import { ref, computed } from 'vue'
+import { en as i18nEn } from './i18n'
 
 export default {
   name: 'TemplateBuilder',
@@ -285,6 +287,7 @@ export default {
     return {
       template: this.template,
       save: this.save,
+      t: this.t,
       baseFetch: this.baseFetch,
       backgroundColor: this.backgroundColor,
       withPhone: this.withPhone,
@@ -302,6 +305,11 @@ export default {
       required: false,
       default: false
     },
+    i18n: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    },
     backgroundColor: {
       type: String,
       required: false,
@@ -312,6 +320,11 @@ export default {
       required: false,
       default: true
     },
+    withHelp: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     autosave: {
       type: Boolean,
       required: false,
@@ -475,6 +488,9 @@ export default {
     this.documentRefs = []
   },
   methods: {
+    t (key) {
+      return this.i18n[key] || i18nEn[key] || key
+    },
     startFieldDraw ({ name, type }) {
       const existingField = this.template.fields?.find((f) => f.submitter_uuid === this.selectedSubmitter.uuid && name && name === f.name)
 

app/javascript/template_builder/dropzone.vue

@@ -29,7 +29,7 @@
             {{ message }}
           </div>
           <div class="text-sm">
-            <span class="font-medium">Click to upload</span> or drag and drop files
+            <span class="font-medium">{{ t('click_to_upload') }}</span> {{ t('or_drag_and_drop_files') }}
           </div>
         </div>
       </div>
@@ -61,7 +61,7 @@ export default {
     IconCloudUpload,
     IconInnerShadowTop
   },
-  inject: ['baseFetch'],
+  inject: ['baseFetch', 't'],
   props: {
     templateId: {
       type: [Number, String],
@@ -91,13 +91,13 @@ export default {
     },
     message () {
       if (this.isLoading) {
-        return 'Uploading...'
+        return this.t('uploading')
       } else if (this.isProcessing) {
-        return 'Processing...'
+        return this.t('processing_')
       } else if (this.acceptFileTypes === 'image/*, application/pdf') {
-        return 'Add PDF documents or images'
+        return this.t('add_pdf_documents_or_images')
       } else {
-        return 'Add documents or images'
+        return this.t('add_documents_or_images')
       }
     }
   },

app/javascript/template_builder/field.vue

@@ -47,7 +47,7 @@
               class="label text-xs"
               @click.prevent="field.required = !field.required"
               @mousedown.prevent
-            >Required</label>
+            >{{ t('required') }}</label>
           </template>
         </div>
         <div
@@ -101,7 +101,7 @@
                 <input
                   v-model="field.default_value"
                   type="text"
-                  placeholder="Default value"
+                  :placeholder="t('default_value')"
                   class="input input-bordered input-xs w-full max-w-xs h-7 !outline-0"
                   @blur="save"
                 >
@@ -111,7 +111,7 @@
                   class="absolute -top-1 left-2.5 px-1 h-4"
                   style="font-size: 8px"
                 >
-                  Default value
+                  {{ t('default_value') }}
                 </label>
               </div>
               <div
@@ -121,7 +121,7 @@
               >
                 <select
                   v-model="field.preferences.format"
-                  placeholder="Format"
+                  :placeholder="t('format')"
                   class="select select-bordered select-xs font-normal w-full max-w-xs !h-7 !outline-0"
                   @change="save"
                 >
@@ -138,7 +138,7 @@
                   class="absolute -top-1 left-2.5 px-1 h-4"
                   style="font-size: 8px"
                 >
-                  Format
+                  {{ t('format') }}
                 </label>
               </div>
               <li
@@ -152,7 +152,7 @@
                     class="toggle toggle-xs"
                     @update:model-value="save"
                   >
-                  <span class="label-text">Required</span>
+                  <span class="label-text">{{ t('required') }}</span>
                 </label>
               </li>
               <li
@@ -166,7 +166,7 @@
                     class="toggle toggle-xs"
                     @update:model-value="save"
                   >
-                  <span class="label-text">Read-only</span>
+                  <span class="label-text">{{ t('read_only') }}</span>
                 </label>
               </li>
               <hr class="pb-0.5 mt-0.5">
@@ -183,7 +183,7 @@
                     :width="20"
                     :stroke-width="1.6"
                   />
-                  Page {{ area.page + 1 }}
+                  {{ t('page') }} {{ area.page + 1 }}
                 </a>
               </li>
               <li v-if="!field.areas?.length || !['radio', 'multiple'].includes(field.type)">
@@ -196,7 +196,7 @@
                     :width="20"
                     :stroke-width="1.6"
                   />
-                  Draw New Area
+                  {{ t('draw_new_area') }}
                 </a>
               </li>
               <li v-if="field.areas?.length === 1 && ['date', 'signature', 'initials', 'text', 'cells'].includes(field.type)">
@@ -209,7 +209,7 @@
                     :width="20"
                     :stroke-width="1.6"
                   />
-                  Copy to All Pages
+                  {{ t('copy_to_all_pages') }}
                 </a>
               </li>
             </ul>
@@ -250,7 +250,7 @@
               class="w-full input input-primary input-xs text-sm bg-transparent !pr-7 -mr-6"
               type="text"
               required
-              :placeholder="`Option ${index + 1}`"
+              :placeholder="`${t('option')} ${index + 1}`"
               @blur="save"
             >
             <button
@@ -268,7 +268,7 @@
             v-else
             v-model="option.value"
             class="w-full input input-primary input-xs text-sm bg-transparent"
-            :placeholder="`Option ${index + 1}`"
+            :placeholder="`${t('option')} ${index + 1}`"
             type="text"
             required
             @focus="maybeFocusOnOptionArea(option)"
@@ -287,7 +287,7 @@
           class="text-center text-sm w-full pb-1"
           @click="addOption"
         >
-          + Add option
+          + {{ t('add_option') }}
         </button>
       </div>
     </div>
@@ -313,7 +313,7 @@ export default {
     IconCopy,
     FieldType
   },
-  inject: ['template', 'save', 'backgroundColor', 'selectedAreaRef'],
+  inject: ['template', 'save', 'backgroundColor', 'selectedAreaRef', 't'],
   props: {
     field: {
       type: Object,
@@ -366,7 +366,7 @@ export default {
       } else {
         const typeIndex = this.template.fields.filter((f) => f.type === this.field.type).indexOf(this.field)
 
-        const suffix = { multiple: 'Select', radio: 'Group' }[this.field.type] || 'Field'
+        const suffix = { multiple: this.t('select'), radio: this.t('group') }[this.field.type] || this.t('field')
 
         return `${this.fieldNames[this.field.type]} ${suffix} ${typeIndex + 1}`
       }

app/javascript/template_builder/field_submitter.vue

@@ -78,7 +78,7 @@
                 :stroke-width="1.6"
               />
               <span class="py-1">
-                Add {{ names[submitters.length] }}
+                {{ t('add') }} {{ names[submitters.length] }}
               </span>
             </a>
           </li>
@@ -175,7 +175,7 @@
             :stroke-width="1.6"
           />
           <span class="py-1">
-            Add {{ names[submitters.length] }}
+            {{ t('add') }} {{ names[submitters.length] }}
           </span>
         </a>
       </li>
@@ -197,6 +197,7 @@ export default {
     IconTrashX,
     IconChevronUp
   },
+  inject: ['t'],
   props: {
     submitters: {
       type: Array,
@@ -250,16 +251,16 @@ export default {
     },
     names () {
       return [
-        'First Party',
-        'Second Party',
-        'Third Party',
-        'Fourth Party',
-        'Fifth Party',
-        'Sixth Party',
-        'Seventh Party',
-        'Eighth Party',
-        'Ninth Party',
-        'Tenth Party'
+        this.t('first_party'),
+        this.t('second_party'),
+        this.t('third_party'),
+        this.t('fourth_party'),
+        this.t('fifth_party'),
+        this.t('sixth_party'),
+        this.t('seventh_party'),
+        this.t('eighth_party'),
+        this.t('ninth_party'),
+        this.t('tenth_party')
       ]
     },
     selectedSubmitter () {

app/javascript/template_builder/field_type.vue

@@ -54,7 +54,7 @@ import { IconTextSize, IconWritingSign, IconCalendarEvent, IconPhoto, IconCheckb
 
 export default {
   name: 'FiledTypeDropdown',
-  inject: ['withPhone', 'withPayment'],
+  inject: ['withPhone', 'withPayment', 't'],
   props: {
     modelValue: {
       type: String,
@@ -90,20 +90,20 @@ export default {
   computed: {
     fieldNames () {
       return {
-        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'
+        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')
       }
     },
     fieldIcons () {

app/javascript/template_builder/fields.vue

@@ -120,7 +120,7 @@
     </template>
   </div>
   <div
-    v-if="fields.length < 4 && editable"
+    v-if="fields.length < 4 && editable && withHelp"
     class="text-xs p-2 border border-base-200 rounded"
   >
     <ul class="list-disc list-outside ml-3">
@@ -154,12 +154,17 @@ export default {
     IconDrag,
     IconLock
   },
-  inject: ['save', 'backgroundColor', 'withPhone', 'withPayment'],
+  inject: ['save', 'backgroundColor', 'withPhone', 'withPayment', 't'],
   props: {
     fields: {
       type: Array,
       required: true
     },
+    withHelp: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     editable: {
       type: Boolean,
       required: false,

app/javascript/template_builder/i18n.js

@@ -0,0 +1,56 @@
+const en = {
+  sign_yourself: 'Sign Yourself',
+  send: 'Send',
+  save: 'Save',
+  cancel: 'Cancel',
+  draw_field_on_the_document: 'Draw {field} field on the document',
+  click_to_upload: 'Click to upload',
+  or_drag_and_drop_files: 'or drag and drop files',
+  uploading: 'Uploading',
+  processing_: 'Processing...',
+  add_pdf_documents_or_images: 'Add PDF documents or images',
+  add_documents_or_images: 'Add documents or images',
+  required: 'Required',
+  default_value: 'Default value',
+  format: 'Format',
+  read_only: 'Read-only',
+  page: 'Page',
+  draw_new_area: 'Draw New Area',
+  copy_to_all_pages: 'Copy to All Pages',
+  add_option: 'Add option',
+  option: 'Option',
+  first_party: 'First Party',
+  second_party: 'Second Party',
+  third_party: 'Third Party',
+  fourth_party: 'Fourth Party',
+  fifth_party: 'Fifth Party',
+  sixth_party: 'Sixth Party',
+  seventh_party: 'Seventh Party',
+  eighth_party: 'Eighth Party',
+  ninth_party: 'Ninth Party',
+  tenth_party: 'Tenth Party',
+  add: 'Add',
+  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',
+  field: 'Field',
+  group: 'Group',
+  draw_a_text_field_on_the_page_with_a_mouse: 'Draw a text field on the page with a mouse',
+  draw_field: 'Draw {field} Field',
+  replace: 'Replace',
+  uploading_: 'Uploading...',
+  add_document: 'Add Document'
+}
+
+export { en }

app/javascript/template_builder/mobile_draw_field.vue

@@ -9,14 +9,14 @@
           class="inline"
           :stroke-width="1.6"
         />
-        <span> Draw {{ fieldNames[drawField.type] }} Field </span>
+        <span>{{ t('draw_field').replace('{field}', fieldNames[drawField.type]) }}</span>
       </div>
       <a
         href="#"
         class="link block text-center"
         @click.prevent="$emit('cancel')"
       >
-        Cancel
+        {{ t('cancel') }}
       </a>
     </span>
     <FieldSubmitter
@@ -43,7 +43,7 @@ export default {
     Field,
     FieldSubmitter
   },
-  inject: ['save'],
+  inject: ['save', 't'],
   props: {
     drawField: {
       type: Object,

app/javascript/template_builder/mobile_fields.vue

@@ -78,7 +78,7 @@ export default {
     IconPlus,
     IconX
   },
-  inject: ['withPhone', 'withPayment', 'backgroundColor'],
+  inject: ['withPhone', 'withPayment', 'backgroundColor', 't'],
   props: {
     modelValue: {
       type: String,

app/javascript/template_builder/replace.vue

@@ -26,7 +26,7 @@ import Upload from './upload'
 
 export default {
   name: 'ReplaceDocument',
-  inject: ['baseFetch'],
+  inject: ['baseFetch', 't'],
   props: {
     templateId: {
       type: [Number, String],
@@ -56,11 +56,11 @@ export default {
     },
     message () {
       if (this.isLoading) {
-        return 'Uploading...'
+        return this.t('uploading_')
       } else if (this.isProcessing) {
-        return 'Processing...'
+        return this.t('processing_')
       } else {
-        return 'Replace'
+        return this.t('replace')
       }
     }
   },

app/javascript/template_builder/upload.vue

@@ -15,13 +15,13 @@
         width="20"
       />
       <span v-if="isLoading">
-        Uploading...
+        {{ t('uploading_') }}
       </span>
       <span v-else-if="isProcessing">
-        Processing...
+        {{ t('processing_') }}
       </span>
       <span v-else>
-        Add Document
+        {{ t('add_document') }}
       </span>
     </label>
     <form
@@ -50,7 +50,7 @@ export default {
     IconUpload,
     IconInnerShadowTop
   },
-  inject: ['baseFetch'],
+  inject: ['baseFetch', 't'],
   props: {
     templateId: {
       type: [Number, String],