Merge branch 'main' into vue-3

resources/js/components/pages/pricing/CustomPlan.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="border relative max-w-5xl mx-auto mt-4 lg:mt-10">
+    <div class="w-full">
+      <div class="rounded-lg bg-gray-50 dark:bg-gray-800 px-6 py-8 sm:p-10 lg:flex lg:items-center">
+        <div class="flex-1">
+          <h3 class="inline-flex px-4 py-1 rounded-full text-md font-bold tracking-wide uppercase bg-white text-gray-800">Custom plan</h3>
+          <div class="mt-4 text-md text-gray-600 dark:text-gray-400">Get a custom file upload limit, enterprise-level support, custom contract, payment via invoice/PO etc.</div>
+        </div>
+        <div class="mt-6 rounded-md lg:mt-0 lg:ml-10 lg:flex-shrink-0">
+          <v-button color="white" class="w-full mt-4" @click.prevent="customPlanClick">
+            Contact us
+          </v-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CustomPlan',
+  components: {},
+  props: {},
+
+  data: () => ({}),
+
+  computed: {},
+
+  methods: {
+    customPlanClick () {
+      window.$crisp.push(['do', 'chat:show'])
+      window.$crisp.push(['do', 'chat:open'])
+      window.$crisp.push(['do', 'message:send', ['text', 'Hi, I would like to discuss about a custom plan']])
+    }
+  }
+}
+</script>

resources/js/components/pages/pricing/PricingTable.vue

@@ -98,6 +98,8 @@
       </div>
     </section>
 
+    <custom-plan v-if="!homePage" />
+
     <checkout-details-modal :show="showDetailsModal" :yearly="isYearly" :plan="selectedPlan"
                             @close="showDetailsModal=false"
     />
@@ -109,13 +111,15 @@ import { mapGetters } from 'vuex'
 import axios from 'axios'
 import MonthlyYearlySelector from './MonthlyYearlySelector.vue'
 import CheckoutDetailsModal from './CheckoutDetailsModal.vue'
+import CustomPlan from './CustomPlan.vue'
 
 MonthlyYearlySelector.compatConfig = { MODE: 3 }
 
 export default {
   components: {
     MonthlyYearlySelector,
-    CheckoutDetailsModal
+    CheckoutDetailsModal,
+    CustomPlan
   },
   props: {
     homePage: {

resources/js/components/pages/templates/TemplatesList.vue

@@ -1,37 +1,81 @@
 <template>
-  <section class="bg-white py-12">
-    <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>
+    <section class="bg-white py-12">
+      <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 sm:flex-none">
-            <select-input v-model="selectedIndustry" name="industry"
-                          :options="industriesOptions" class="w-full sm:w-auto md:w-56"
-            />
+          <div class="flex-1 w-full md:max-w-xs">
+            <text-input name="search" :form="searchTemplate" placeholder="Search..." />
           </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 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>
+    </section>
+
+    <template v-if="!onlyMy">
+      <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="flex items-center justify-between">
+            <h4 class="text-xl font-bold tracking-tight text-gray-900 sm:text-2xl">
+              All Types
+            </h4>
+          </div>
+
+          <div class="grid grid-cols-1 gap-8 mt-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+            <router-link v-for="row in types" :key="row.slug" 
+                        :to="{params:{slug:row.slug}, name:'templates.types.show'}" 
+                        :title="row.name"
+                        class="text-gray-600 dark:text-gray-400 transition-colors duration-300 hover:text-nt-blue"
+            >
+              {{ row.name }}
+            </router-link>
+          </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="flex items-center justify-between">
+            <h4 class="text-xl font-bold tracking-tight text-gray-900 sm:text-2xl">
+              All Industries
+            </h4>
+          </div>
+
+          <div class="grid grid-cols-1 gap-8 mt-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+            <router-link v-for="row in industries" :key="row.slug" 
+                        :to="{params:{slug:row.slug}, name:'templates.industries.show'}" 
+                        :title="row.name"
+                        class="text-gray-600 dark:text-gray-400 transition-colors duration-300 hover:text-nt-blue"
+            >
+              {{ row.name }}
+            </router-link>
+          </div>
+        </div>
+      </section>
+    </template>
+  </div>
 </template>
 
 <script>
@@ -41,11 +85,12 @@ import Form from 'vform'
 import Fuse from 'fuse.js'
 import SingleTemplate from './SingleTemplate.vue'
 
-const loadTemplates = function () {
-  store.commit('open/templates/startLoading')
-  store.dispatch('open/templates/loadIfEmpty').then(() => {
-    store.commit('open/templates/stopLoading')
-  })
+const loadTemplates = function (onlyMy) {
+  if(onlyMy){
+    store.dispatch('open/templates/loadAll', {'onlymy':true})
+  } else {
+    store.dispatch('open/templates/loadIfEmpty')
+  }
 }
 
 export default {
@@ -70,7 +115,7 @@ export default {
   watch: {},
 
   mounted () {
-    loadTemplates()
+    loadTemplates(this.onlyMy)
   },
 
   computed: {

resources/js/components/pages/welcome/TemplatesSlider.vue

@@ -27,7 +27,7 @@
          class="w-full inline-flex flex-nowrap overflow-hidden [mask-image:_linear-gradient(to_right,transparent_0,_black_128px,_black_calc(100%-128px),transparent_100%)]"
     >
       <ul ref="templates-slider" class="flex justify-center md:justify-start animate-infinite-scroll">
-        <li v-for="(template, i) in templates" :key="template.id" class="mx-4 w-72 h-auto">
+        <li v-for="(template, i) in sliderTemplates" :key="template.id" class="mx-4 w-72 h-auto">
           <single-template :slug="template.slug" />
         </li>
       </ul>
@@ -48,7 +48,10 @@ export default {
   computed: {
     ...mapState({
       templates: state => state['open/templates'].content
-    })
+    }),
+    sliderTemplates () {
+      return this.templates.slice(0, 20)
+    }
   },
 
   watch: {
@@ -62,8 +65,8 @@ export default {
     }
   },
 
-  mounted () {
-    store.dispatch('open/templates/loadWithLimit', 10)
+  mounted() {
+    store.dispatch('open/templates/loadAll', { limit: 20 })
   },
 
   methods: {