apply first submission modal changes

api/app/Http/Controllers/Forms/PublicFormController.php

@@ -87,6 +87,7 @@ public function showAsset($assetFileName)
     public function answer(AnswerFormRequest $request)
     {
         $form = $request->form;
+        $isFirstSubmission = ($form->submissions_count === 0);
         $submissionId = false;
 
         $submissionData = $request->validated();
@@ -104,6 +105,7 @@ public function answer(AnswerFormRequest $request)
         return $this->success(array_merge([
             'message' => 'Form submission saved.',
             'submission_id' => $submissionId,
+            'is_first_submission' => $isFirstSubmission
         ], $request->form->is_pro && $request->form->redirect_url ? [
             'redirect' => true,
             'redirect_url' => $request->form->redirect_url,

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,7 +12,7 @@
     </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">
@@ -23,11 +23,13 @@
         <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"
+          :to="{ name: 'forms-slug-show-submissions',
+                 params: { slug: form.slug }
+               }"
           target="_blank"
         >
-          See  Notion database
+          See Submissions
         </UButton>
       </div>
 
@@ -39,19 +41,19 @@
           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=""
                 size="40px"
               />
             </div>
           </div>
-          
+
           <p class="text-gray-500 font-medium text-xs text-center my-2">
             {{ item.label }}
           </p>
@@ -62,35 +64,26 @@
 </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()
-
 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')
+      'action': () => crisp.openHelpdeskArticle('https://help.opnform.com/en/article/can-i-embed-my-form-in-a-notion-page-or-site-x7guph/')
     },
     {
       'label': 'Help Center',
@@ -104,5 +97,4 @@ const helpLinks = computed(() => {
     },
   ]
 })
-
-</script>
+</script>

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

@@ -0,0 +1,69 @@
+<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(() => {
+    return props.extraQueryParam
+      ? `${props.form.share_url}?${props.extraQueryParam}`
+      : props.form.share_url + props.extraQueryParam
+  })
+  
+  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>
+