Improve Templates (#183)

* Improve Templates

* Fix test case

* Update AI GenerateTemplate

* update openai client and GPT completer

* composer.lock

* Update types and list json with script

* Template changes

* fix on draft template

* Finish opnform templates

---------

Co-authored-by: Forms Dev <chirag+new@notionforms.io>
Co-authored-by: Julien Nahum <julien@nahum.net>

resources/js/pages/templates/show.vue

@@ -1,50 +1,191 @@
 <template>
-  <div class="flex flex-col min-h-full mt-6">
-    <div class="w-full flex-grow md:w-4/5 lg:w-2/3 md:mx-auto md:max-w-4xl px-4">
-
-      <breadcrumb :path="breadcrumbs"/>
-      <div v-if="templatesLoading" class="text-center">
-        <loader class="h-6 w-6 text-nt-blue mx-auto"/>
-      </div>
-      <p v-else-if="template === null || !template">
-        Template does not exist.
-      </p>
-      <div v-else>
-        <div class="flex flex-wrap items-center mt-6 mb-4">
-          <h2 class="text-nt-blue text-3xl font-bold flex-grow">
-            {{ template.name }}
-          </h2>
+  <div class="flex flex-col min-h-full">
+    <breadcrumb :path="breadcrumbs">
+      <template #left>
+        <div v-if="user && (user.admin || user.template_editor)" class="ml-5">
+          <v-button color="gray" size="small" @click.prevent="showFormTemplateModal=true">
+            Edit Template
+          </v-button>
+          <form-template-modal v-if="form" :form="form" :template="template" :show="showFormTemplateModal"
+                               @close="showFormTemplateModal=false"
+          />
         </div>
-        <div class="mb-10">
-          <div class="w-full shadow-xl rounded-lg my-5 max-h-72 flex items-center justify-center overflow-hidden">
-            <img :src="template.image_url" alt="Template cover image" class="w-full object-cover"/>
-          </div>
-          <div v-html="template.description"></div>
-          <div class="mt-5 text-center">
-            <v-button v-if="authenticated" class="mt-4 sm:mt-0" :to="{path:'/forms/create?template='+template.slug}">
-              Use this template
-            </v-button>
-            <v-button v-else class="mt-4 sm:mt-0" :to="{path:'/forms/create/guest?template='+template.slug}">
-              Use this template
-            </v-button>
-          </div>
+      </template>
+      <template #right>
+        <v-button v-track.use_template_button_clicked size="small" class="mr-5"
+                  :to="{path: createFormWithTemplateUrl}"
+        >
+          Use this template
+        </v-button>
+      </template>
+    </breadcrumb>
 
-          <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"/>
+    <div v-if="templatesLoading" class="text-center my-4">
+      <loader class="h-6 w-6 text-nt-blue mx-auto" />
+    </div>
+    <p v-else-if="template === null || !template" class="text-center my-4">
+      We could not find this template.
+    </p>
+    <template v-else>
+      <section class="pt-12 bg-gray-50 sm:pt-16 border-b pb-[250px] relative">
+        <div class="px-4 mx-auto sm:px-6 lg:px-8 max-w-7xl">
+          <div class="flex flex-col items-center justify-center max-w-4xl gap-8 mx-auto md:gap-12 md:flex-row">
+            <div class="aspect-[4/3] shrink-0 rounded-lg shadow-sm overflow-hidden group max-w-xs">
+              <img class="object-cover w-full h-full transition-all duration-200 group-hover:scale-110"
+                   :src="template.image_url" alt="Template cover image"
+              >
+            </div>
 
-          <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 text-gray-700 font-semibold">{{ ques.question }}</h5>
-                <p class="p-2 text-gray-600" v-html="ques.answer"></p>
+            <div class="flex-1 text-center md:text-left relative">
+              <h1 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
+                {{ template.name }}
+              </h1>
+              <p class="mt-2 text-lg font-normal text-gray-600">
+                {{ cleanQuotes(template.short_description) }}
+              </p>
+              <template-tags :slug="template.slug" :display-all="true"
+                             class="flex flex-wrap items-center justify-center gap-3 mt-4 md:justify-start"
+              />
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section class="relative px-4 mx-auto sm:px-6 lg:px-8 -mt-[210px]">
+        <div class="max-w-7xl">
+          <div
+            class="max-w-2xl p-4 mx-auto bg-white shadow-lg sm:p-6 lg:p-8 rounded-xl ring-1 ring-inset ring-gray-200 isolate"
+          >
+            <p class="text-sm font-medium text-center text-gray-500 -mt-2 mb-2">
+              Template Preview
+            </p>
+            <open-complete-form ref="open-complete-form" :form="form" :creating="true"
+                                  class="mb-4 p-4 bg-gray-50 border border-gray-200 border-dashed rounded-lg"
+            />
+          </div>
+        </div>
+
+        <div class="absolute bottom-0 translate-y-full inset-x-0">
+          <div class="px-4 mx-auto sm:px-6 lg:px-8 max-w-7xl -mt-[20px]">
+            <div class="flex items-center justify-center">
+              <v-button v-track.use_template_button_clicked class="mx-auto w-full max-w-[300px]" :to="{path: createFormWithTemplateUrl}">
+                Use this template
+              </v-button>
+            </div>
+            <div class="flex items-center justify-center">
+              <div class="text-left mx-auto text-gray-500 text-xs mt-4">
+                ✓ Core features 100% free<br>
+                ✓ No credit card required<br>
+                ✓ No submissions limit on Free plan
               </div>
             </div>
           </div>
         </div>
-      </div>
-    </div>
+      </section>
+
+      <section class="pt-20 pb-12 bg-white sm:pb-16">
+        <div class="px-4 mx-auto sm:px-6 lg:px-8 max-w-7xl">
+          <div class="max-w-2xl mx-auto mt-16 space-y-12 sm:mt-16 sm:space-y-16">
+            <div class="nf-text" v-html="template.description" />
+
+            <template v-if="template.questions.length > 0">
+              <hr class="mt-12 border-gray-200">
+              <div>
+                <div class="text-center">
+                  <h3 class="text-xl font-bold tracking-tight text-gray-900 sm:text-2xl">
+                    Frequently asked questions
+                  </h3>
+                  <p class="mt-2 text-base font-normal text-gray-600">
+                    Everything you need to know about this template.
+                  </p>
+                </div>
+                <dl class="mt-12 space-y-10">
+                  <div v-for="(ques,ques_key) in template.questions" :key="ques_key" class="space-y-4">
+                    <dt class="font-semibold text-gray-900 dark:text-gray-100">
+                      {{ ques.question }}
+                    </dt>
+                    <dd class="mt-2 leading-6 text-gray-600 dark:text-gray-400" v-html="ques.answer" />
+                  </div>
+                </dl>
+              </div>
+            </template>
+          </div>
+        </div>
+      </section>
+
+      <section v-if="template.related_templates.length > 0" class="py-12 bg-white border-t border-gray-200 sm:py-16">
+        <div class="px-4 mx-auto sm:px-6 lg:px-8 max-w-7xl">
+          <div class="flex items-center justify-between">
+            <h4 class="text-xl font-bold tracking-tight text-gray-900 sm:text-2xl">
+              Related templates
+            </h4>
+            <v-button :to="{name:'templates'}" color="white" size="small" :arrow="true">
+              View All
+            </v-button>
+          </div>
+
+          <div class="grid grid-cols-1 gap-8 mt-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 sm:gap-y-12">
+            <single-template v-for="related in template.related_templates" :key="related" :slug="related" />
+          </div>
+        </div>
+      </section>
+
+      <section class="py-12 bg-white border-t border-gray-200 sm:py-16">
+        <div class="px-4 mx-auto sm:px-6 lg:px-8 max-w-7xl">
+          <div class="text-center">
+            <h4 class="text-xl font-bold tracking-tight text-gray-900 sm:text-2xl">
+              How OpnForm works
+            </h4>
+          </div>
+
+          <div class="grid grid-cols-1 mt-12 md:grid-cols-2 gap-x-8 gap-y-12">
+            <div
+              class="flex flex-col items-center gap-4 text-center lg:items-start sm:text-left sm:items-start xl:flex-row"
+            >
+              <div
+                class="inline-flex items-center justify-center w-10 h-10 text-base font-bold bg-white rounded-full shadow-sm ring-1 ring-inset ring-gray-200 text-blue-500 shrink-0"
+              >
+                1
+              </div>
+              <div>
+                <h5 class="text-base font-bold leading-tight text-gray-900">
+                  Copy the template and change it the way you like
+                </h5>
+                <p class="mt-2 text-sm font-normal text-gray-600">
+                  <router-link :to="{path:createFormWithTemplateUrl}">
+                    Click here to copy this template
+                  </router-link>
+                  and start customizing it. Change the questions, add new ones, choose colors and
+                  more.
+                </p>
+              </div>
+            </div>
+
+            <div
+              class="flex flex-col items-center gap-4 text-center lg:items-start sm:text-left sm:items-start xl:flex-row"
+            >
+              <div
+                class="inline-flex items-center justify-center w-10 h-10 text-base font-bold bg-white rounded-full shadow-sm ring-1 ring-inset ring-gray-200 text-blue-500 shrink-0"
+              >
+                2
+              </div>
+              <div>
+                <h5 class="text-base font-bold leading-tight text-gray-900">
+                  Embed the form or share it via a link
+                </h5>
+                <p class="mt-2 text-sm font-normal text-gray-600">
+                  You can directly share your form link, or embed the form on your website. It's magic! 🪄
+                </p>
+              </div>
+            </div>
+          </div>
+
+          <!-- add video here -->
+          <!--          <div class="max-w-5xl mx-auto mt-12 shadow-sm rounded-xl bg-blue-50 aspect-video" />-->
+        </div>
+      </section>
+    </template>
+
     <open-form-footer class="mt-8 border-t"/>
   </div>
 </template>
@@ -52,61 +193,110 @@
 <script>
 import store from '~/store'
 import Form from 'vform'
-import {mapGetters, mapState} from 'vuex'
-import Fuse from 'fuse.js'
+import { mapGetters, mapState } from 'vuex'
 import OpenFormFooter from '../../components/pages/OpenFormFooter.vue'
 import OpenCompleteForm from '../../components/open/forms/OpenCompleteForm.vue'
-import Breadcrumb from "../../components/common/Breadcrumb.vue";
-import SeoMeta from "../../mixins/seo-meta";
-
-const loadTemplates = function () {
-  store.commit('open/templates/startLoading')
-  store.dispatch('open/templates/loadIfEmpty').then(() => {
-    store.commit('open/templates/stopLoading')
-  })
-}
+import Breadcrumb from '../../components/common/Breadcrumb.vue'
+import SeoMeta from '../../mixins/seo-meta.js'
+import TemplateTags from '../../components/pages/templates/TemplateTags.vue'
+import SingleTemplate from '../../components/pages/templates/SingleTemplate.vue'
+import FormTemplateModal from '../../components/open/forms/components/templates/FormTemplateModal.vue'
 
 export default {
+
+  components: { Breadcrumb, OpenFormFooter, OpenCompleteForm, TemplateTags, SingleTemplate, FormTemplateModal },
   mixins: [SeoMeta],
 
-  components: {Breadcrumb, OpenFormFooter, OpenCompleteForm},
-
-  beforeRouteEnter(to, from, next) {
-    loadTemplates()
+  beforeRouteEnter (to, from, next) {
+    if (to.params?.slug) {
+      store.dispatch('open/templates/loadTemplate', to.params?.slug)
+      store.dispatch('open/templates/loadTypesAndIndustries')
+    }
     next()
   },
 
-  data() {
-    return {}
+  data () {
+    return {
+      showFormTemplateModal: false
+    }
   },
 
-  mounted() {
+  mounted () {
   },
 
-  methods: {},
+  methods: {
+    cleanQuotes (str) {
+      // Remove starting and ending quotes if any
+      return (str) ? str.replace(/^"/, '').replace(/"$/, '') : ''
+    }
+  },
 
   computed: {
     ...mapGetters({
-      authenticated: 'auth/check'
+      authenticated: 'auth/check',
+      user: 'auth/user'
     }),
     ...mapState({
       templatesLoading: state => state['open/templates'].loading
     }),
-    breadcrumbs() {
+    breadcrumbs () {
       if (!this.template) {
-        return [{route: {name: 'templates'}, label: 'Templates'}]
+        return [{ route: { name: 'templates' }, label: 'Templates' }]
       }
-      return [{route: {name: 'templates'}, label: 'Templates'}, {label: this.template.name}]
+      return [{ route: { name: 'templates' }, label: 'Templates' }, { label: this.template.name }]
     },
-    template() {
+    template () {
       return this.$store.getters['open/templates/getBySlug'](this.$route.params.slug)
     },
-    form() {
+    form () {
       return new Form(this.template.structure)
     },
     metaTitle () {
-      return this.template ? this.template.name : 'Template'
+      return this.template ? this.template.name : 'Form Template'
     },
+    metaDescription () {
+      if (!this.template) return null
+      // take the first 140 characters of the description
+      return this.template.short_description?.substring(0, 140) + '... | Customize any template and create your own form in minutes.'
+    },
+    metaImage () {
+      if (!this.template) return null
+      return this.template.image_url
+    },
+    metaTags () {
+      return (this.template && this.template.publicly_listed) ? [] : [{ name: 'robots', content: 'noindex' }]
+    },
+    createFormWithTemplateUrl () {
+      if(this.authenticated) {
+        return '/forms/create?template=' + this.template?.slug  
+      }
+      return '/forms/create/guest?template=' + this.template?.slug
+    }
   }
 }
 </script>
+
+<style lang='scss'>
+.nf-text {
+  @apply space-y-4;
+  h2 {
+    @apply text-sm font-normal tracking-widest text-gray-500 uppercase;
+  }
+
+  p {
+    @apply font-normal leading-7 text-gray-900 dark:text-gray-100;
+  }
+
+  ol {
+    @apply list-decimal list-inside;
+  }
+
+  ul {
+    @apply list-disc list-inside;
+  }
+}
+
+.aspect-video {
+  aspect-ratio: 16/9;
+}
+</style>

resources/js/pages/templates/templates.vue

@@ -1,94 +1,160 @@
 <template>
-  <div class="flex flex-col min-h-full mt-6">
-    <div class="w-full flex-grow md:w-4/5 lg:w-2/3 md:mx-auto md:max-w-4xl px-4">
-      <div>
-        <div class="flex flex-wrap items-center mt-6 mb-4">
-          <h2 class="text-nt-blue text-3xl font-bold flex-grow">
-            Templates
-          </h2>
+  <div class="flex flex-col min-h-full border-t">
+    <section class="py-12 sm:py-16 bg-gray-50 border-b border-gray-200">
+      <div class="px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
+        <div class="text-center max-w-xl mx-auto">
+          <h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold tracking-tight text-gray-900">
+            Form Templates
+          </h1>
+          <p class="text-gray-600 mt-4 text-lg font-normal">
+            Our collection of beautiful templates to create your own forms!
+          </p>
         </div>
-        <div v-if="templatesLoading" class="text-center">
-          <loader class="h-6 w-6 text-nt-blue mx-auto"/>
-        </div>
-        <p v-else-if="templates.length === 0">
-          No any templates found.
-        </p>
-        <div v-else class="mb-4">
-          <div v-if="templates && templates.length"
-               class="grid max-w-3xl grid-cols-1 mx-auto text-center sm:text-left sm:grid-cols-2 gap-y-8 gap-x-8 lg:gap-x-20">
-            <div class="relative group" v-for="(template, index) in templates" :key="template.id">
-              <div class="overflow-hidden rounded-lg aspect-w-16 aspect-h-9">
-                <img class="object-cover w-full h-full transition-all duration-300 transform group-hover:scale-125"
-                     :src="template.image_url" alt=""/>
-              </div>
-              <p class="mt-3 mb-2 text-sm font-normal text-gray-600 font-pj">
-                {{ formatCreatedDate(template.created_at) }}</p>
-              <p class="text-xl font-bold text-gray-900 font-pj">{{ template.name }}</p>
-              <router-link :to="{params:{slug:template.slug},name:'templates.show'}" title="">
-                <span class="absolute inset-0" aria-hidden="true"></span>
-              </router-link>
+      </div>
+    </section>
+
+    <section class="bg-white py-12 sm:py-16">
+      <div class="px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
+        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 sm:gap-6 relative z-20">
+          <div class="flex items-center gap-4">
+            <div class="flex-1 sm:flex-none">
+              <select-input v-model="selectedType" name="type"
+                            :options="typesOptions" class="w-full sm:w-auto md:w-56"
+              />
             </div>
+            <div class="flex-1 sm:flex-none">
+              <select-input v-model="selectedIndustry" name="industry"
+                            :options="industriesOptions" class="w-full sm:w-auto md:w-56"
+              />
+            </div>
+          </div>
+          <div class="flex-1 w-full md:max-w-xs">
+            <text-input name="search" :form="searchTemplate" placeholder="Search..." />
+          </div>
+        </div>
+
+        <div v-if="templatesLoading" class="text-center mt-4">
+          <loader class="h-6 w-6 text-nt-blue mx-auto" />
+        </div>
+        <p v-else-if="enrichedTemplates.length === 0" class="text-center mt-4">
+          No templates found.
+        </p>
+        <div v-else class="relative z-10">
+          <div class="grid grid-cols-1 mt-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8 sm:gap-y-12">
+            <single-template v-for="template in enrichedTemplates" :key="template.id" :slug="template.slug" />
           </div>
         </div>
       </div>
-    </div>
+    </section>
+
     <open-form-footer class="mt-8 border-t"/>
   </div>
 </template>
 
 <script>
 import store from '~/store'
-import {mapGetters, mapState} from 'vuex'
+import { mapGetters, mapState } from 'vuex'
+import Form from 'vform'
 import Fuse from 'fuse.js'
+import SeoMeta from '../../mixins/seo-meta.js'
 import OpenFormFooter from '../../components/pages/OpenFormFooter.vue'
-import SeoMeta from "../../mixins/seo-meta";
+import SingleTemplate from '../../components/pages/templates/SingleTemplate.vue'
 
 const loadTemplates = function () {
   store.commit('open/templates/startLoading')
-  store.dispatch('open/templates/load').then(() => {
+  store.dispatch('open/templates/loadIfEmpty').then(() => {
     store.commit('open/templates/stopLoading')
   })
 }
 
 export default {
+
+  components: { OpenFormFooter, SingleTemplate },
   mixins: [SeoMeta],
 
-  components: {OpenFormFooter},
-
-  beforeRouteEnter(to, from, next) {
+  beforeRouteEnter (to, from, next) {
     loadTemplates()
     next()
   },
 
   props: {
-    metaTitle: {type: String, default: 'Templates'},
-    metaDescription: {type: String, default: 'Our collection of beautiful templates to create your own forms!'}
+    metaTitle: { type: String, default: 'Templates' },
+    metaDescription: { type: String, default: 'Our collection of beautiful templates to create your own forms!' }
   },
 
-  data() {
-    return {}
-  },
-
-  mounted() {
-  },
-
-  methods: {
-    formatCreatedDate(createdDate) {
-      const date = new Date(createdDate)
-      const dateTimeFormat = new Intl.DateTimeFormat('en', {
-        year: 'numeric',
-        month: 'long',
-        day: 'numeric',
+  data () {
+    return {
+      selectedType: 'all',
+      selectedIndustry: 'all',
+      searchTemplate: new Form({
+        search: ''
       })
-      return dateTimeFormat.format(date)
     }
   },
 
+  mounted () {
+  },
+
   computed: {
     ...mapState({
       templates: state => state['open/templates'].content,
-      templatesLoading: state => state['open/templates'].loading
+      templatesLoading: state => state['open/templates'].loading,
+      industries: state => state['open/templates'].industries,
+      types: state => state['open/templates'].types
     }),
-  }
+    industriesOptions () {
+      return [{ name: 'All Industries', value: 'all' }].concat(Object.values(this.industries).map((industry) => {
+        return {
+          name: industry.name,
+          value: industry.slug
+        }
+      }))
+    },
+    typesOptions () {
+      return [{ name: 'All Types', value: 'all' }].concat(Object.values(this.types).map((type) => {
+        return {
+          name: type.name,
+          value: type.slug
+        }
+      }))
+    },
+    enrichedTemplates () {
+      let enrichedTemplates = this.templates
+
+      // Filter by Selected Type
+      if (this.selectedType && this.selectedType !== 'all') {
+        enrichedTemplates = enrichedTemplates.filter((item) => {
+          return (item.types && item.types.length > 0) ? item.types.includes(this.selectedType) : false
+        })
+      }
+
+      // Filter by Selected Industry
+      if (this.selectedIndustry && this.selectedIndustry !== 'all') {
+        enrichedTemplates = enrichedTemplates.filter((item) => {
+          return (item.industries && item.industries.length > 0) ? item.industries.includes(this.selectedIndustry) : false
+        })
+      }
+
+      if (this.searchTemplate.search === '' || this.searchTemplate.search === null) {
+        return enrichedTemplates
+      }
+
+      // Fuze search
+      const fuzeOptions = {
+        keys: [
+          'name',
+          'slug',
+          'description',
+          'short_description'
+        ]
+      }
+      const fuse = new Fuse(enrichedTemplates, fuzeOptions)
+      return fuse.search(this.searchTemplate.search).map((res) => {
+        return res.item
+      })
+    }
+  },
+
+  methods: {}
 }
 </script>