Merge from docusealco/wip

Gemfile

@@ -24,7 +24,6 @@ gem 'hexapdf'
 gem 'jwt', require: false
 gem 'lograge'
 gem 'numo-narray-alt', require: false
-gem 'oj'
 gem 'onnxruntime', require: false
 gem 'pagy'
 gem 'pg', require: false

Gemfile.lock

@@ -271,7 +271,7 @@ GEM
       rdoc (>= 4.0.0)
       reline (>= 0.4.2)
     jmespath (1.6.2)
-    json (2.19.7)
+    json (2.19.8)
     jwt (3.2.0)
       base64
     language_server-protocol (3.17.0.5)
@@ -334,9 +334,6 @@ GEM
     nokogiri (1.19.3-x86_64-linux-musl)
       racc (~> 1.4)
     numo-narray-alt (0.10.3)
-    oj (3.16.16)
-      bigdecimal (>= 3.0)
-      ostruct (>= 0.2)
     onnxruntime (0.10.1-aarch64-linux)
       ffi
     onnxruntime (0.10.1-arm64-darwin)
@@ -346,7 +343,6 @@ GEM
     openssl (4.0.1)
     orm_adapter (0.5.0)
     os (1.1.4)
-    ostruct (0.6.3)
     package_json (0.2.0)
     pagy (43.4.4)
       json
@@ -623,7 +619,6 @@ DEPENDENCIES
   letter_opener_web
   lograge
   numo-narray-alt
-  oj
   onnxruntime
   pagy
   pg

app/javascript/template_builder/area.vue

@@ -197,7 +197,8 @@
           v-else-if="!isCheckboxInput"
           width="100%"
           height="100%"
-          class="max-h-10 opacity-50"
+          class="opacity-50"
+          :style="{ maxHeight: isInlineSize ? '4.4cqmin' : '40px' }"
         />
       </span>
     </div>

app/javascript/template_builder/builder.vue

@@ -309,6 +309,8 @@
           :data-document-uuid="item.attachment_uuid"
           :accept-file-types="acceptFileTypes"
           :with-replace-button="withUploadButton"
+          :with-google-drive="withGoogleDrive"
+          :authenticity-token="authenticityToken"
           :editable="editable"
           :dynamic-documents="dynamicDocuments"
           :with-dynamic-documents="withDynamicDocuments"
@@ -355,12 +357,17 @@
       </div>
       <div
         id="pages_container"
-        class="w-full overflow-x-hidden mt-0.5 pt-0.5"
+        ref="pagesContainer"
-        :class="isMobile ? 'overflow-y-auto' : 'overflow-y-hidden md:overflow-y-auto'"
+        class="w-full mt-0.5 pt-0.5"
+        :class="[
+          isMobile ? 'overflow-y-auto' : 'overflow-y-hidden md:overflow-y-auto',
+          zoomLevel > 1 ? 'overflow-x-auto' : 'overflow-x-hidden'
+        ]"
       >
         <div
           ref="documents"
           class="pr-3.5 pl-0.5"
+          :style="zoomLevel > 1 ? { width: `${zoomLevel * 100}%` } : null"
         >
           <template v-if="!sortedDocuments.length && (withUploadButton || withAddPageButton)">
             <Dropzone
@@ -451,6 +458,8 @@
                 :with-arrows="template.schema.length > 1"
                 :item="template.schema.find((item) => item.attachment_uuid === document.uuid)"
                 :with-replace-button="withUploadButton"
+                :with-google-drive="withGoogleDrive"
+                :authenticity-token="authenticityToken"
                 :accept-file-types="acceptFileTypes"
                 :document="document"
                 :template="template"
@@ -633,6 +642,36 @@
         </div>
       </div>
     </Transition>
+    <Transition
+      enter-active-class="transition-all duration-200 ease-out"
+      enter-from-class="translate-y-4 opacity-0"
+      enter-to-class="translate-y-0 opacity-100"
+      leave-active-class="transition-all duration-200 ease-in"
+      leave-from-class="translate-y-0 opacity-100"
+      leave-to-class="translate-y-4 opacity-0"
+    >
+      <div
+        v-if="zoomLevel > 1"
+        class="sticky bottom-0 z-40 pointer-events-none"
+      >
+        <div class="absolute left-0 right-0 bottom-4 flex justify-center">
+          <div class="join shadow pointer-events-auto">
+            <span class="join-item bg-base-content text-white pl-2 pr-2.5 h-9 items-center text-sm font-medium cursor-default w-16 flex justify-end">
+              <span>
+                {{ Math.round(zoomLevel * 100) }}%
+              </span>
+            </span>
+            <button
+              type="button"
+              class="join-item bg-base-content text-white h-9 pl-2 pr-3 inline-flex items-center justify-center cursor-pointer hover:opacity-90 border-l border-white/20"
+              @click="zoomLevel = 1"
+            >
+              <IconX class="w-4 h-4 stroke-2" />
+            </button>
+          </div>
+        </div>
+      </div>
+    </Transition>
     <div
       id="docuseal_modal_container"
       class="modal-container"
@@ -664,7 +703,7 @@ import DocumentControls from './controls'
 import MobileFields from './mobile_fields'
 import FieldSubmitter from './field_submitter'
 import RevisionsModal from './revisions_modal'
-import { IconPlus, IconUsersPlus, IconDeviceFloppy, IconChevronDown, IconEye, IconWritingSign, IconInnerShadowTop, IconInfoCircle, IconAdjustments, IconDownload, IconHistory } from '@tabler/icons-vue'
+import { IconPlus, IconUsersPlus, IconDeviceFloppy, IconChevronDown, IconEye, IconWritingSign, IconInnerShadowTop, IconInfoCircle, IconAdjustments, IconDownload, IconHistory, IconX } from '@tabler/icons-vue'
 import { v4 } from 'uuid'
 import { ref, computed, toRaw, defineAsyncComponent } from 'vue'
 import * as i18n from './i18n'
@@ -706,6 +745,7 @@ export default {
     IconEye,
     IconHistory,
     IconDeviceFloppy,
+    IconX,
     RevisionsModal
   },
   provide () {
@@ -1063,7 +1103,8 @@ export default {
       isMathLoaded: false,
       isRevisionsModalOpen: false,
       revisions: [],
-      beforeRevisionSnapshot: null
+      beforeRevisionSnapshot: null,
+      zoomLevel: 1
     }
   },
   computed: {
@@ -1313,6 +1354,8 @@ export default {
         this.pendingFieldAttachmentUuids.push(item.attachment_uuid)
       }
     })
+
+    this.$refs.pagesContainer.addEventListener('wheel', this.onPagesWheel, { passive: false })
   },
   unmounted () {
     document.removeEventListener('keyup', this.onKeyUp)
@@ -1320,6 +1363,8 @@ export default {
 
     window.removeEventListener('resize', this.onWindowResize)
     window.removeEventListener('dragleave', this.onWindowDragLeave)
+
+    this.$refs.pagesContainer.removeEventListener('wheel', this.onPagesWheel)
   },
   beforeUpdate () {
     this.documentRefs = []
@@ -2018,6 +2063,30 @@ export default {
 
       this.isBreakpointLg = this.$el.getRootNode().querySelector('div[data-v-app]').offsetWidth < breakpointLg
     },
+    onPagesWheel (event) {
+      if (!event.ctrlKey && !event.metaKey) return
+
+      event.preventDefault()
+
+      const oldZoom = this.zoomLevel
+      const nextZoom = Math.max(1, Math.min(3, oldZoom - event.deltaY * 0.006))
+
+      if (nextZoom === oldZoom) return
+
+      const rect = this.$refs.pagesContainer.getBoundingClientRect()
+      const cursorX = event.clientX - rect.left
+      const cursorY = event.clientY - rect.top
+      const ratio = nextZoom / oldZoom
+      const nextScrollLeft = (this.$refs.pagesContainer.scrollLeft + cursorX) * ratio - cursorX
+      const nextScrollTop = (this.$refs.pagesContainer.scrollTop + cursorY) * ratio - cursorY
+
+      this.zoomLevel = nextZoom
+
+      this.$nextTick(() => {
+        this.$refs.pagesContainer.scrollLeft = nextScrollLeft
+        this.$refs.pagesContainer.scrollTop = nextScrollTop
+      })
+    },
     setDocumentRefs (el) {
       if (el) {
         this.documentRefs.push(el)

app/javascript/template_builder/controls.vue

@@ -10,6 +10,9 @@
       v-if="withReplaceButton"
       :template-id="template.id"
       :accept-file-types="acceptFileTypes"
+      :authenticity-token="authenticityToken"
+      :with-google-drive="withGoogleDrive"
+      :google-drive-file-id="item.google_drive_file_id"
       @click.stop
       @success="$emit('replace', { replaceSchemaItem: item, ...$event })"
     />
@@ -73,6 +76,16 @@ export default {
       required: true,
       default: true
     },
+    withGoogleDrive: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    authenticityToken: {
+      type: String,
+      required: false,
+      default: ''
+    },
     withArrows: {
       type: Boolean,
       required: false,

app/javascript/template_builder/dropzone.vue

@@ -62,7 +62,7 @@
           name="files[]"
           :accept="acceptFileTypes"
           multiple
-          @change="upload"
+          @change="upload()"
         >
       </form>
     </label>

app/javascript/template_builder/google_drive_picker_modal.vue

@@ -0,0 +1,165 @@
+<template>
+  <Teleport :to="modalContainerEl">
+    <div
+      class="modal modal-open items-start !animate-none overflow-y-auto"
+    >
+      <div
+        class="absolute top-0 bottom-0 right-0 left-0"
+        @click.prevent="$emit('close')"
+      />
+      <div class="modal-box pt-4 pb-6 px-6 mt-20 max-h-none w-full max-w-xl">
+        <div class="flex justify-between items-center border-b pb-2 mb-2 font-medium">
+          <span class="modal-title">
+            Google Drive
+          </span>
+          <a
+            href="#"
+            class="text-xl modal-close-button"
+            @click.prevent="$emit('close')"
+          >&times;</a>
+        </div>
+        <div>
+          <form
+            v-if="showOauthButton"
+            method="post"
+            :action="oauthPath"
+            @submit="isConnectClicked = true"
+          >
+            <input
+              type="hidden"
+              name="authenticity_token"
+              :value="authenticityToken"
+              autocomplete="off"
+            >
+            <button
+              class="btn bg-white btn-outline w-full text-base font-medium mt-4"
+              data-turbo="false"
+              type="submit"
+              :disabled="isConnectClicked"
+            >
+              <span v-if="isConnectClicked">
+                <span class="flex items-center justify-center space-x-2">
+                  <IconInnerShadowTop class="animate-spin" />
+                  <span>{{ t('submitting') }}...</span>
+                </span>
+              </span>
+              <span v-else>
+                <span class="flex items-center justify-center space-x-2">
+                  <IconBrandGoogleDrive />
+                  <span>{{ t('connect_google_drive') }}</span>
+                </span>
+              </span>
+            </button>
+          </form>
+          <div
+            v-else
+            class="relative"
+          >
+            <iframe
+              class="border border-base-300 rounded-lg"
+              style="width: 100%; height: 440px; background: white;"
+              src="/template_google_drive"
+            />
+            <div v-if="loading">
+              <div
+                class="bg-white absolute top-0 bottom-0 left-0 right-0 opacity-80 rounded-lg"
+                style="margin: 1px"
+              />
+              <div class="absolute top-0 bottom-0 left-0 right-0 flex items-center justify-center">
+                <IconInnerShadowTop class="animate-spin" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script>
+import { IconBrandGoogleDrive, IconInnerShadowTop } from '@tabler/icons-vue'
+
+export default {
+  name: 'GoogleDrivePickerModal',
+  components: {
+    IconBrandGoogleDrive,
+    IconInnerShadowTop
+  },
+  inject: ['t'],
+  props: {
+    templateId: {
+      type: [Number, String],
+      required: true
+    },
+    authenticityToken: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    reopenAfterAuth: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    modalContainerEl: {
+      type: [Object, String],
+      required: true
+    },
+    loading: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  emits: ['close', 'picked', 'update:loading'],
+  data () {
+    return {
+      isConnectClicked: false,
+      showOauthButton: false
+    }
+  },
+  computed: {
+    oauthPath () {
+      const redir = this.reopenAfterAuth
+        ? `/templates/${this.templateId}/edit?google_drive_open=1`
+        : `/templates/${this.templateId}/edit`
+
+      const params = {
+        access_type: 'offline',
+        include_granted_scopes: 'true',
+        prompt: 'consent',
+        scope: [
+          'https://www.googleapis.com/auth/userinfo.email',
+          'https://www.googleapis.com/auth/drive.file'
+        ].join(' '),
+        oauth_data: new URLSearchParams({ redir }).toString()
+      }
+
+      return `/auth/google_oauth2?${new URLSearchParams(params).toString()}`
+    }
+  },
+  mounted () {
+    window.addEventListener('message', this.messageHandler)
+  },
+  beforeUnmount () {
+    window.removeEventListener('message', this.messageHandler)
+  },
+  methods: {
+    messageHandler (event) {
+      if (event.data.type === 'google-drive-files-picked') {
+        const files = event.data.files || []
+
+        if (!files.length) return
+
+        this.$emit('update:loading', true)
+        this.$emit('picked', files)
+      } else if (event.data.type === 'google-drive-picker-loaded') {
+        this.$emit('update:loading', false)
+      } else if (event.data.type === 'google-drive-picker-request-oauth') {
+        this.showOauthButton = true
+        this.$emit('update:loading', false)
+      }
+    }
+  }
+}
+</script>

app/javascript/template_builder/i18n.js

@@ -219,7 +219,9 @@ const en = {
   revisions: 'Revisions',
   apply: 'Apply',
   no_revisions_yet: 'No revisions yet',
-  viewing_revision_from: 'Viewing revision from {date}'
+  viewing_revision_from: 'Viewing revision from {date}',
+  connect_google_drive: 'Connect Google Drive',
+  submitting: 'Submitting'
 }
 
 const es = {
@@ -443,7 +445,9 @@ const es = {
   revisions: 'Revisiones',
   apply: 'Aplicar',
   no_revisions_yet: 'Aún no hay revisiones',
-  viewing_revision_from: 'Viendo revisión del {date}'
+  viewing_revision_from: 'Viendo revisión del {date}',
+  connect_google_drive: 'Conectar Google Drive',
+  submitting: 'Enviando'
 }
 
 const it = {
@@ -667,7 +671,9 @@ const it = {
   revisions: 'Revisioni',
   apply: 'Applica',
   no_revisions_yet: 'Nessuna revisione ancora',
-  viewing_revision_from: 'Visualizzazione revisione del {date}'
+  viewing_revision_from: 'Visualizzazione revisione del {date}',
+  connect_google_drive: 'Connetti Google Drive',
+  submitting: 'Invio'
 }
 
 const pt = {
@@ -891,7 +897,9 @@ const pt = {
   revisions: 'Revisões',
   apply: 'Aplicar',
   no_revisions_yet: 'Nenhuma revisão ainda',
-  viewing_revision_from: 'Visualizando revisão de {date}'
+  viewing_revision_from: 'Visualizando revisão de {date}',
+  connect_google_drive: 'Conectar Google Drive',
+  submitting: 'Enviando'
 }
 
 const fr = {
@@ -1115,7 +1123,9 @@ const fr = {
   revisions: 'Révisions',
   apply: 'Appliquer',
   no_revisions_yet: 'Aucune révision pour le moment',
-  viewing_revision_from: 'Affichage de la révision du {date}'
+  viewing_revision_from: 'Affichage de la révision du {date}',
+  connect_google_drive: 'Connecter Google Drive',
+  submitting: 'Soumission'
 }
 
 const de = {
@@ -1339,7 +1349,9 @@ const de = {
   revisions: 'Revisionen',
   apply: 'Anwenden',
   no_revisions_yet: 'Noch keine Revisionen',
-  viewing_revision_from: 'Ansicht der Revision vom {date}'
+  viewing_revision_from: 'Ansicht der Revision vom {date}',
+  connect_google_drive: 'Google Drive verbinden',
+  submitting: 'Übermittlung'
 }
 
 const nl = {
@@ -1563,7 +1575,9 @@ const nl = {
   revisions: 'Revisies',
   apply: 'Toepassen',
   no_revisions_yet: 'Nog geen revisies',
-  viewing_revision_from: 'Revisie van {date} bekijken'
+  viewing_revision_from: 'Revisie van {date} bekijken',
+  connect_google_drive: 'Verbind Google Drive',
+  submitting: 'Indienen'
 }
 
 export { en, es, it, pt, fr, de, nl }

app/javascript/template_builder/page.vue

@@ -11,7 +11,7 @@
       :src="image.url"
       :width="width"
       :height="height"
-      class="rounded"
+      class="w-full h-full rounded"
       @load="onImageLoad"
     >
     <div

app/javascript/template_builder/preview.vue

@@ -36,7 +36,10 @@
               v-if="withReplaceButton"
               :template-id="template.id"
               :accept-file-types="acceptFileTypes"
-              class="opacity-0 group-hover:opacity-100"
+              :authenticity-token="authenticityToken"
+              :with-google-drive="withGoogleDrive"
+              :google-drive-file-id="item.google_drive_file_id"
+              class="opacity-0 group-hover:opacity-100 has-[label:focus]:opacity-100"
               @click.stop
               @success="$emit('replace', { replaceSchemaItem: item, ...$event })"
             />
@@ -232,6 +235,16 @@ export default {
       required: true,
       default: true
     },
+    withGoogleDrive: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    authenticityToken: {
+      type: String,
+      required: false,
+      default: ''
+    },
     dynamicDocuments: {
       type: Array,
       required: true

app/javascript/template_builder/replace.vue

@@ -1,37 +1,106 @@
 <template>
-  <label
+  <div class="inline-flex items-stretch replace-document-control">
-    :for="inputId"
+    <label
-    class="btn btn-neutral btn-xs text-white transition-none replace-document-button"
+      :for="inputId"
-    :class="{ 'opacity-100': isLoading }"
+      class="btn btn-neutral btn-xs transition-none replace-document-button"
-  >
+      :class="{ 'opacity-100': isLoading, 'pr-0': showGoogleDriveDropdown && !isLoading }"
-    {{ message }}
+    >
+      <div class="flex items-center justify-between w-full h-full">
+        <span class="flex items-center space-x-2 w-full justify-center text-white">
+          {{ message }}
+        </span>
+        <span
+          v-if="showGoogleDriveDropdown && !isLoading"
+          class="dropdown dropdown-end inline h-full"
+          style="width: 30px"
+        >
+          <label
+            tabindex="0"
+            class="flex items-center h-full cursor-pointer text-white"
+          >
+            <IconChevronDown class="w-4 h-4 flex-shrink-0" />
+          </label>
+          <ul
+            tabindex="0"
+            :style="{ backgroundColor }"
+            class="dropdown-content p-2 mt-2 shadow menu text-base mb-1 rounded-box text-right !text-base-content"
+          >
+            <li>
+              <button
+                type="button"
+                @click.prevent="openGoogleDriveModal"
+              >
+                <IconBrandGoogleDrive class="w-4 h-4 flex-shrink-0" />
+                <span class="whitespace-nowrap text-sm normal-case font-medium">Google Drive</span>
+              </button>
+            </li>
+          </ul>
+        </span>
+      </div>
+    </label>
     <form
       ref="form"
       class="hidden"
     >
+      <input
+        v-if="googleDriveFile"
+        name="google_drive_file_ids[]"
+        :value="googleDriveFile.id"
+      >
       <input
         :id="inputId"
         ref="input"
         name="files[]"
         type="file"
         :accept="acceptFileTypes"
-        @change="upload"
+        @change="upload()"
       >
     </form>
-  </label>
+    <GoogleDrivePickerModal
+      v-if="showGoogleDriveModal"
+      v-model:loading="isLoadingGoogleDrive"
+      :template-id="templateId"
+      :authenticity-token="authenticityToken"
+      :modal-container-el="modalContainerEl"
+      @close="showGoogleDriveModal = false"
+      @picked="onGoogleDrivePicked"
+    />
+  </div>
 </template>
 
 <script>
 import Upload from './upload'
+import GoogleDrivePickerModal from './google_drive_picker_modal'
+import { IconChevronDown, IconBrandGoogleDrive } from '@tabler/icons-vue'
 
 export default {
   name: 'ReplaceDocument',
-  inject: ['baseFetch', 't'],
+  components: {
+    IconChevronDown,
+    IconBrandGoogleDrive,
+    GoogleDrivePickerModal
+  },
+  inject: ['baseFetch', 't', 'backgroundColor'],
   props: {
     templateId: {
       type: [Number, String],
       required: true
     },
+    authenticityToken: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    googleDriveFileId: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    withGoogleDrive: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     acceptFileTypes: {
       type: String,
       required: false,
@@ -41,16 +110,25 @@ export default {
   emits: ['success'],
   data () {
     return {
-      isLoading: false
+      isLoading: false,
+      isLoadingGoogleDrive: true,
+      googleDriveFile: null,
+      showGoogleDriveModal: false
     }
   },
   computed: {
     inputId () {
       return 'el' + Math.random().toString(32).split('.')[1]
     },
+    showGoogleDriveDropdown () {
+      return this.withGoogleDrive && !!this.googleDriveFileId
+    },
     uploadUrl () {
       return `/templates/${this.templateId}/documents`
     },
+    modalContainerEl () {
+      return this.$el.getRootNode().querySelector('#docuseal_modal_container')
+    },
     message () {
       if (this.isLoading) {
         return this.t('uploading_')
@@ -60,7 +138,27 @@ export default {
     }
   },
   methods: {
-    upload: Upload.methods.upload
+    upload: Upload.methods.upload,
+    openGoogleDriveModal () {
+      this.showGoogleDriveModal = true
+      this.isLoadingGoogleDrive = true
+      this.googleDriveFile = null
+      this.$el.getRootNode().activeElement?.blur()
+    },
+    onGoogleDrivePicked (files) {
+      this.googleDriveFile = files[0]
+
+      this.$nextTick(() => {
+        this.upload({ path: `/templates/${this.templateId}/google_drive_documents` }).then((resp) => {
+          if (resp.ok) {
+            this.showGoogleDriveModal = false
+          }
+        }).finally(() => {
+          this.isLoadingGoogleDrive = false
+          this.googleDriveFile = null
+        })
+      })
+    }
   }
 }
 </script>

app/javascript/template_builder/upload.vue

@@ -61,87 +61,16 @@
         </span>
       </div>
     </label>
-    <Teleport
+    <GoogleDrivePickerModal
       v-if="showGoogleDriveModal"
-      :to="modalContainerEl"
+      v-model:loading="isLoadingGoogleDrive"
-    >
+      :template-id="templateId"
-      <div
+      :authenticity-token="authenticityToken"
-        class="modal modal-open items-start !animate-none overflow-y-auto"
+      :modal-container-el="modalContainerEl"
-      >
+      :reopen-after-auth="true"
-        <div
+      @close="showGoogleDriveModal = false"
-          class="absolute top-0 bottom-0 right-0 left-0"
+      @picked="onGoogleDrivePicked"
-          @click.prevent="showGoogleDriveModal = false"
+    />
-        />
-        <div class="modal-box pt-4 pb-6 px-6 mt-20 max-h-none w-full max-w-xl">
-          <div class="flex justify-between items-center border-b pb-2 mb-2 font-medium">
-            <span class="modal-title">
-              Google Drive
-            </span>
-            <a
-              href="#"
-              class="text-xl modal-close-button"
-              @click.prevent="showGoogleDriveModal = false"
-            >&times;</a>
-          </div>
-          <div>
-            <form
-              v-if="showGoogleDriveOauthButton"
-              method="post"
-              :action="googleDriveOauthPath"
-              @submit="isConnectGoogleDriveClicked = true"
-            >
-              <input
-                type="hidden"
-                name="authenticity_token"
-                :value="authenticityToken"
-                autocomplete="off"
-              >
-              <button
-                id="gdrive_oauth_button"
-                class="btn bg-white btn-outline w-full text-base font-medium mt-4"
-                data-turbo="false"
-                type="submit"
-                :disabled="isConnectGoogleDriveClicked"
-              >
-                <span v-if="isConnectGoogleDriveClicked">
-                  <span class="flex items-center justify-center space-x-2">
-                    <IconInnerShadowTop class="animate-spin" />
-                    <span class="">Submitting...</span>
-                  </span>
-                </span>
-                <span
-                  v-else
-                >
-                  <span class="flex items-center justify-center space-x-2">
-                    <IconBrandGoogleDrive />
-                    <span>Connect Google Drive</span>
-                  </span>
-                </span>
-              </button>
-            </form>
-            <div
-              v-else
-              class="relative"
-            >
-              <iframe
-                class="border border-base-300 rounded-lg"
-                style="width: 100%; height: 440px; background: white;"
-                src="/template_google_drive"
-              />
-              <div v-if="isLoadingGoogleDrive">
-                <div
-                  class="bg-white absolute top-0 bottom-0 left-0 right-0 opacity-80 rounded-lg"
-                  style="margin: 1px"
-                />
-                <div class="absolute top-0 bottom-0 left-0 right-0 flex items-center justify-center">
-                  <IconInnerShadowTop class="animate-spin" />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </Teleport>
     <form
       ref="form"
       class="hidden"
@@ -159,7 +88,7 @@
         type="file"
         :accept="acceptFileTypes"
         multiple
-        @change="upload"
+        @change="upload()"
       >
     </form>
   </div>
@@ -167,6 +96,7 @@
 
 <script>
 import { IconUpload, IconInnerShadowTop, IconChevronDown, IconBrandGoogleDrive } from '@tabler/icons-vue'
+import GoogleDrivePickerModal from './google_drive_picker_modal'
 
 function convertImage (sourceFile, targetType, quality) {
   return new Promise((resolve, reject) => {
@@ -233,7 +163,8 @@ export default {
     IconUpload,
     IconInnerShadowTop,
     IconChevronDown,
-    IconBrandGoogleDrive
+    IconBrandGoogleDrive,
+    GoogleDrivePickerModal
   },
   inject: ['baseFetch', 't', 'backgroundColor'],
   props: {
@@ -261,11 +192,9 @@ export default {
   data () {
     return {
       isLoading: false,
-      isConnectGoogleDriveClicked: false,
+      isLoadingGoogleDrive: true,
-      isLoadingGoogleDrive: false,
       googleDriveFiles: [],
-      showGoogleDriveModal: false,
+      showGoogleDriveModal: false
-      showGoogleDriveOauthButton: false
     }
   },
   computed: {
@@ -278,65 +207,35 @@ export default {
     uploadUrl () {
       return `/templates/${this.templateId}/documents`
     },
-    googleDriveOauthPath () {
-      const params = {
-        access_type: 'offline',
-        include_granted_scopes: 'true',
-        prompt: 'consent',
-        scope: [
-          'https://www.googleapis.com/auth/userinfo.email',
-          'https://www.googleapis.com/auth/drive.file'
-        ].join(' '),
-        oauth_data: new URLSearchParams({
-          redir: `/templates/${this.templateId}/edit?google_drive_open=1`
-        }).toString()
-      }
-
-      const query = new URLSearchParams(params).toString()
-
-      return `/auth/google_oauth2?${query}`
-    },
     modalContainerEl () {
       return this.$el.getRootNode().querySelector('#docuseal_modal_container')
     }
   },
   mounted () {
-    window.addEventListener('message', this.messageHandler)
-
     if (this.queryParams.get('google_drive_open') === '1') {
       this.openGoogleDriveModal()
 
       window.history.replaceState({}, document.title, window.location.pathname)
     }
   },
-  beforeUnmount () {
-    window.removeEventListener('message', this.messageHandler)
-  },
   methods: {
     openGoogleDriveModal () {
       this.showGoogleDriveModal = true
       this.isLoadingGoogleDrive = true
     },
-    messageHandler (event) {
+    onGoogleDrivePicked (files) {
-      if (event.data.type === 'google-drive-files-picked') {
+      this.googleDriveFiles = files
-        this.googleDriveFiles = event.data.files || []
 
-        this.$nextTick(() => {
+      this.$nextTick(() => {
-          this.isLoadingGoogleDrive = true
+        this.upload({ path: `/templates/${this.templateId}/google_drive_documents` }).then((resp) => {
-
+          if (resp.ok) {
-          this.upload({ path: `/templates/${this.templateId}/google_drive_documents` }).then((resp) => {
+            this.showGoogleDriveModal = false
-            if (resp.ok) {
+          }
-              this.showGoogleDriveModal = false
+        }).finally(() => {
-            }
+          this.isLoadingGoogleDrive = false
-          }).finally(() => {
+          this.googleDriveFiles = []
-            this.isLoadingGoogleDrive = false
-          })
         })
-      } else if (event.data.type === 'google-drive-picker-loaded') {
+      })
-        this.isLoadingGoogleDrive = false
-      } else if (event.data.type === 'google-drive-picker-request-oauth') {
-        this.showGoogleDriveOauthButton = true
-      }
     },
     async upload ({ path } = {}) {
       this.isLoading = true

app/views/submissions/show.html.erb

@@ -227,7 +227,7 @@
               <div class="flex items-center space-x-1 mt-1">
                 <span>
                   <%= t('reason') %>:
-                  <%= simple_format(h(submitter.submission_events.find_by(event_type: :decline_form).data['reason'])) %>
+                  <%= simple_format(h(submitter.submission_events.find_by(event_type: :decline_form).data['reason']), {}, sanitize: false) %>
                 </span>
               </div>
             <% end %>

app/views/submitter_mailer/declined_email.html.erb

@@ -1,4 +1,4 @@
 <p><%= t('hi_there') %>,</p>
 <p><%= t('name_declined_by_submitter_with_the_following_reason', name: @submitter.submission.name || @submitter.submission.template.name, submitter: @submitter.name || @submitter.email || @submitter.phone) %></p>
-<%= simple_format(h(@submitter.submission_events.find_by(event_type: :decline_form).data['reason'])) %>
+<%= simple_format(h(@submitter.submission_events.find_by(event_type: :decline_form).data['reason']), {}, sanitize: false) %>
 <p><%= link_to submission_url(@submitter.submission), submission_url(@submitter.submission) %></p>

config/initializers/oj.rb

@@ -1,3 +0,0 @@
-# frozen_string_literal: true
-
-Oj.optimize_rails

lib/html_to_plain_text.rb

@@ -10,7 +10,7 @@ module HtmlToPlainText
 
     doc = Nokogiri::HTML.fragment(cleaned)
 
-    doc.css('script').each(&:remove)
+    doc.xpath('.//script').each(&:remove)
 
     result = process_nodes(doc, line_length)
 
@@ -33,12 +33,9 @@ module HtmlToPlainText
     result = +''
 
     node.children.each do |child|
-      case child
+      if child.text? || child.cdata?
-      when Nokogiri::XML::Text
         result << child.text
-      when Nokogiri::XML::Comment
+      elsif child.element?
-        next
-      when Nokogiri::XML::Element
         result << process_element(child, line_length)
       end
     end

lib/submissions/generate_audit_trail.rb

@@ -347,6 +347,13 @@ module Submissions
 
           field_name = grouped_value_field_names[value].presence || field['title'].presence || field['name'].to_s
 
+          field_type = field['type']
+
+          if field_type == 'image' &&
+             submitter.attachments.find { |a| a.uuid == value }.then { |a| !a.image? || a.content_type == 'image/heic' }
+            field_type = 'file'
+          end
+
           [
             composer.formatted_text_box(
               [
@@ -359,7 +366,7 @@ module Submissions
               text_align: field_name.to_s.match?(RTL_REGEXP) ? :right : :left,
               line_spacing: 1.3, padding: [0, 0, 2, 0]
             ),
-            if field['type'].in?(%w[image signature initials stamp kba]) &&
+            if field_type.in?(%w[image signature initials stamp kba]) &&
                (attachment = submitter.attachments.find { |a| a.uuid == value }) &&
                attachment.image?
 
@@ -394,7 +401,7 @@ module Submissions
 
               composer.image(io, width:, height:, margin: [5, 0, 10, 0])
               composer.formatted_text_box([{ text: '' }])
-            elsif field['type'].in?(%w[file payment image])
+            elsif field_type.in?(%w[file payment image])
               if field['type'] == 'payment'
                 unit = CURRENCY_SYMBOLS[field['preferences']['currency']] || field['preferences']['currency']
 
@@ -419,7 +426,7 @@ module Submissions
                 end,
                 padding: [0, 0, 10, 0]
               )
-            elsif field['type'] == 'checkbox'
+            elsif field_type == 'checkbox'
               composer.formatted_text_box([{ text: value.to_s.titleize }], padding: [0, 0, 10, 0])
             else
               if field['type'] == 'date'

lib/submissions/generate_result_attachments.rb

@@ -294,8 +294,11 @@ module Submissions
           canvas.font(FONT_NAME, size: font_size)
 
           field_type = field['type']
-          field_type = 'file' if field_type == 'image' &&
+
-                                 !submitter.attachments.find { |a| a.uuid == value }.image?
+          if field_type == 'image' &&
+             submitter.attachments.find { |a| a.uuid == value }.then { |a| !a.image? || a.content_type == 'image/heic' }
+            field_type = 'file'
+          end
 
           if field_type == 'signature' && field.dig('preferences', 'with_signature_id').in?([true, false])
             with_signature_id = field['preferences']['with_signature_id']

spec/system/template_builder_spec.rb

@@ -20,7 +20,7 @@ RSpec.describe 'Template Builder' do
 
       expect do
         doc.find('.replace-document-button').click
-        doc.find('.replace-document-button input[type="file"]', visible: false)
+        doc.find('.replace-document-control input[type="file"]', visible: false)
            .attach_file(Rails.root.join('spec/fixtures/sample-image.png'))
 
         page.driver.wait_for_network_idle