Custom Plan

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

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