apply first submission modal changes (#584)

* apply first submission modal changes

* Apply changes

* fix submiussions url

* fix lint

* Fix nuxt versions issues

* Add fixed version of nitropack

* Attempt to fix build

---------

Co-authored-by: Julien Nahum <julien@nahum.net>

client/components/open/forms/OpenCompleteForm.vue

@@ -179,6 +179,11 @@
         </p>
       </div>
     </v-transition>
+    <FirstSubmissionModal
+      :show="showFirstSubmissionModal"
+      :form="form"
+      @close="showFirstSubmissionModal=false"
+    />
   </div>
 </template>
 
@@ -191,9 +196,10 @@ import VTransition from '~/components/global/transitions/VTransition.vue'
 import {pendingSubmission} from "~/composables/forms/pendingSubmission.js"
 import clonedeep from "clone-deep"
 import ThemeBuilder from "~/lib/forms/themes/ThemeBuilder.js"
+import FirstSubmissionModal from '~/components/open/forms/components/FirstSubmissionModal.vue'
 
 export default {
-  components: { VTransition, OpenFormButton, OpenForm, FormCleanings, FormTimer },
+  components: { VTransition, OpenFormButton, OpenForm, FormCleanings, FormTimer, FirstSubmissionModal },
 
   props: {
     form: { type: Object, required: true },
@@ -207,7 +213,10 @@ export default {
   },
 
   setup(props) {
+    const authStore = useAuthStore()
     return {
+      authStore,
+      authenticated: computed(() => authStore.check),
       isIframe: useIsIframe(),
       pendingSubmission: pendingSubmission(props.form),
       confetti: useConfetti()
@@ -222,7 +231,8 @@ export default {
         password: null
       }),
       hidePasswordDisabledMsg: false,
-      submissionId: false
+      submissionId: false,
+      showFirstSubmissionModal: false
     }
   },
 
@@ -246,6 +256,9 @@ export default {
       if(!this.form || !this.form.font_family) return null
       const family = this.form?.font_family.replace(/ /g, '+')
       return `https://fonts.googleapis.com/css?family=${family}:wght@400,500,700,800,900&display=swap`
+    },
+    isFormOwner() {
+      return this.authenticated && this.form && this.form.creator_id === this.authStore.user.id
     }
   },
 
@@ -291,7 +304,9 @@ export default {
         if (data.submission_id) {
           this.submissionId = data.submission_id
         }
-
+        if (this.isFormOwner && !this.isIframe && data?.is_first_submission) {
+          this.showFirstSubmissionModal = true
+        }
         this.loading = false
         this.submitted = true
         this.$emit('submitted', true)

client/components/open/forms/components/FirstSubmissionModal.vue

@@ -12,22 +12,29 @@
     </template>
     <div class="">
       <div class="text-sm text-gray-500">
-        Congratulations on creating your form and receiving your first submission! Your form is now live and ready for action. You can now <span class="font-semibold">share your form</span> with others, or <span class="font-semibold">open your Notion database</span> to view the submitted data.
+        Congratulations on creating your form and receiving your first submission! Your form is now live and ready for action. You can now <span class="font-semibold">share your form</span> with others, or <span class="font-semibold">open your Form submission page</span> to view the submitted data.
       </div>
 
       <div class="flex gap-2 items-center max-w-full">
+        <p class="text-sm w-48 text-gray-500">
+          Share form URL:
+        </p>
         <ShareFormUrl
           class="flex-grow my-4"
           :form="form"
         />
+      </div>
+      <div class="flex py-2 items-center max-w-full">
+        <p class="text-sm w-48 text-gray-500">
+          Check your submissions:
+        </p>
         <UButton
-          v-track.form_first_submission_modal_open_db_click
           color="white"
-          icon="i-logos-notion-icon"
-          :to="form.notion_database_url"
+          icon="i-heroicons-document"
           target="_blank"
+          @click="trackOpenDbClick"
         >
-          See  Notion database
+          See Submissions
         </UButton>
       </div>
 
@@ -39,11 +46,11 @@
           v-for="(item, i) in helpLinks"
           :key="i"
           role="button"
-          class="bg-white shadow border border-gray-200 rounded-lg p-4 pb-2 items-center justify-center flex flex-col relative hover:bg-gray-50 group transition-colors"
+          class="bg-white shadow border border-gray-200 rounded-lg p-4 pb-2 items-center justify-center flex flex-col relative hover:bg-gray-50 dark:hover:bg-gray-800 group transition-colors"
           @click="item.action"
         >
           <div class="flex justify-center">
-            <div class="h-8 w-8 text-gray-600 group-hover:text-gray-800 transition-colors flex items-center">
+            <div class="h-8 w-8 text-gray-600 group-hover:text-gray-800 dark:group-hover:text-white transition-colors flex items-center">
               <Icon
                 :name="item.icon"
                 class=""
@@ -51,7 +58,7 @@
               />
             </div>
           </div>
-          
+
           <p class="text-gray-500 font-medium text-xs text-center my-2">
             {{ item.label }}
           </p>
@@ -62,36 +69,23 @@
 </template>
 
 <script setup>
-import ShareFormUrl from '~/components/notion/forms/components/ShareFormUrl.vue'
-
+import ShareFormUrl from '~/components/open/forms/components/ShareFormUrl.vue'
 const props = defineProps({
   show: { type: Boolean, required: true },
   form: { type: Object, required: true }
 })
-
 const emit = defineEmits(['close'])
 const confetti = useConfetti()
 const crisp = useCrisp()
-
+const amplitude = useAmplitude()
 watch(() => props.show, () => {
   if (props.show) {
     confetti.play()
     useAmplitude().logEvent('form_first_submission_modal_viewed')
   }
 })
-
 const helpLinks = computed(() => {
   return [
-    {
-      'label': 'Embed form on your website',
-      'icon': 'heroicons:code-bracket',
-      'action': () => crisp.openHelpdeskArticle('how-to-embed-your-form-on-your-website-yqa6i')
-    },
-    {
-      'label': 'Embed form in Notion',
-      'icon': 'ri:notion-fill',
-      'action': () => crisp.openHelpdeskArticle('can-i-embed-my-form-in-a-notion-page-or-site-11iroj9')
-    },
     {
       'label': 'Help Center',
       'icon': 'heroicons:book-open',
@@ -105,4 +99,10 @@ const helpLinks = computed(() => {
   ]
 })
 
-</script>
+const trackOpenDbClick = () => {
+  const submissionsUrl = props.form.submissions_url
+  window.open(submissionsUrl, '_blank')
+  amplitude.logEvent('form_first_submission_modal_open_db_click')
+}
+
+</script>

client/components/open/forms/components/ShareFormUrl.vue

@@ -0,0 +1,70 @@
+<template>
+    <div
+      class="border border-nt-blue-light bg-blue-50 dark:bg-notion-dark-light rounded-md p-2 overflow-hidden"
+    >
+      <div class="flex items-center w-full gap-2">
+        <p class="select-all text-nt-blue flex-grow truncate overflow-hidden">
+          <a
+            v-if="link"
+            :href="share_url"
+            target="_blank"
+          >
+            {{ share_url }}
+          </a>
+          <span v-else>
+            {{ share_url }}
+          </span>
+        </p>
+        <UButton
+          class="shrink-0"
+          size="sm" 
+          icon="i-heroicons-clipboard-document"
+          label="Copy"
+          @click="copyToClipboard"
+        />
+      </div>
+    </div>
+  </template>
+  
+  <script setup>
+  import { computed, defineProps } from 'vue'
+  
+  const props = defineProps({
+    form: {
+      type: Object,
+      required: true,
+    },
+    link: {
+      type: Boolean,
+      default: false,
+    },
+    extraQueryParam: {
+      type: String,
+      default: '',
+    },
+  })
+  
+  const { copy } = useClipboard()
+  
+  const share_url = computed(() => {
+    if (props.extraQueryParam) {
+        return `${props.form.share_url}?${props.extraQueryParam}`
+    }
+    return props.form.share_url
+  })
+  
+  function copyToClipboard() {
+    if (import.meta.server)
+      return
+    copy(share_url.value)
+    if (props.form.visibility == 'draft') {
+      useAlert().warning(
+        'Copied! But other people won\'t be able to see the form since it\'s currently in draft mode',
+      )
+    }
+    else {
+      useAlert().success('Copied!')
+    }
+  }
+  </script>
+