Merge branch 'ai-forms'

resources/js/pages/forms/create.vue

@@ -2,6 +2,8 @@
   <div class="flex flex-wrap flex-col">
     <transition v-if="stateReady" name="fade" mode="out-in">
       <div key="2">
+        <create-form-base-modal @form-generated="formGenerated" :show="showInitialFormModal"
+                                @close="showInitialFormModal=false"/>
         <form-editor v-if="!workspacesLoading" ref="editor"
                      class="w-full flex flex-grow"
                      :style="{
@@ -23,6 +25,7 @@ import Form from 'vform'
 import {mapState, mapActions} from 'vuex'
 import initForm from "../../mixins/form_editor/initForm.js";
 import SeoMeta from '../../mixins/seo-meta.js'
+import CreateFormBaseModal from "../../components/pages/forms/create/CreateFormBaseModal.vue"
 
 const loadTemplates = function () {
   store.commit('open/templates/startLoading')
@@ -35,7 +38,7 @@ export default {
   name: 'CreateForm',
 
   mixins: [initForm, SeoMeta],
-  components: {},
+  components: {CreateFormBaseModal},
 
   beforeRouteEnter(to, from, next) {
     loadTemplates()
@@ -50,7 +53,8 @@ export default {
       stateReady: false,
       loading: false,
       error: '',
-      editorMaxHeight: 500
+      editorMaxHeight: 500,
+      showInitialFormModal: false
     }
   },
 
@@ -92,6 +96,9 @@ export default {
       if (template && template.structure) {
         this.form = new Form({...this.form.data(), ...template.structure})
       }
+    } else {
+      // No template loaded, ask how to start
+      this.showInitialFormModal = true
     }
     this.closeAlert()
     this.loadWorkspaces()
@@ -117,6 +124,9 @@ export default {
       if (this.$refs.editor) {
         this.editorMaxHeight = window.innerHeight - this.$refs.editor.$el.offsetTop
       }
+    },
+    formGenerated(form) {
+      this.form = new Form({...this.form.data(), ...form})
     }
   }
 }

resources/js/pages/templates/show.vue

@@ -31,14 +31,14 @@
 
           <h3 class="text-center text-gray-500 mt-8 mb-2">Template Preview</h3>
           <open-complete-form ref="open-complete-form" :form="form" :creating="true"
-                              class="mb-4 p-4 bg-gray-50 rounded-lg overflow-hidden"/>
+                              class="mb-4 p-4 bg-gray-50 rounded-lg"/>
 
           <div v-if="template.questions.length > 0" id="questions">
             <h3 class="text-xl font-semibold mt-8">Frequently asked questions</h3>
             <div class="pt-2">
               <div v-for="(ques,ques_key) in template.questions" :key="ques_key" class="my-3 border rounded-lg">
-                <h5 class="border-b p-2">{{ ques.question }}</h5>
-                <div class="p-2" v-html="ques.answer"></div>
+                <h5 class="border-b p-2 text-gray-700 font-semibold">{{ ques.question }}</h5>
+                <p class="p-2 text-gray-600" v-html="ques.answer"></p>
               </div>
             </div>
           </div>

resources/js/pages/welcome.vue

@@ -16,7 +16,10 @@
             >it's free</span>.
             </h3>
             <div class="mt-6 flex justify-center">
-              <v-button class="mr-1" :to="{ name: 'forms.create.guest' }" :arrow="true">
+              <v-button v-if="!authenticated" class="mr-1" :to="{ name: 'forms.create.guest' }" :arrow="true">
+                Create a form for FREE
+              </v-button>
+              <v-button v-else class="mr-1" :to="{ name: 'forms.create' }" :arrow="true">
                 Create a form for FREE
               </v-button>
             </div>