Enable pricing (#151)

* Enable Pro plan - WIP

* no pricing page if have no paid plans

* Set pricing ids in env

* views & submissions FREE for all

* extra param for env

* form password FREE for all

* Custom Code is PRO feature

* Replace codeinput prism with codemirror

* Better form Cleaning message

* Added risky user email spam protection

* fix form cleaning

* Pricing page new UI

* form cleaner

* Polish changes

* Fixed tests

---------

Co-authored-by: Julien Nahum <julien@nahum.net>

resources/js/components/pages/forms/show/FormCleanings.vue

@@ -0,0 +1,107 @@
+<template>
+  <v-transition>
+    <div v-if="hasCleanings && !hideWarning" class="border border-gray-300 dark:border-gray-600 rounded-md bg-white p-2"
+         :class="{'hover:bg-yellow-50 dark:hover:bg-yellow-900':!collapseOpened}"
+    >
+      <collapse v-model="collapseOpened">
+        <template #title>
+          <p class="text-yellow-500 dark:text-yellow-400 font-semibold text-sm p-1 pr-4">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                 stroke="currentColor" class="w-6 h-6 inline"
+            >
+              <path stroke-linecap="round" stroke-linejoin="round"
+                    d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"
+              />
+            </svg>
+            Some features that are included in our {{ form.is_pro ? 'Enterprise' : 'Pro' }} plan are disabled when
+            publicly sharing this form<span v-if="specifyFormOwner"> (only owners of this form can see this)</span>.
+          </p>
+        </template>
+
+        <div class="border-t mt-1 p-4 pb-2 -mx-2">
+          <p class="text-gray-500 text-sm" v-html="cleaningContent" />
+          <p class="text-gray-500 text-sm mb-4 font-semibold">
+            <router-link :to="{name:'pricing'}">
+              {{ form.is_pro ? 'Upgrade your OpnForms plan today' : 'Start your free OpnForms trial' }}
+            </router-link>
+            to unlock all of our features and build powerful forms.
+          </p>
+          <div class="flex flex-wrap items-end w-full">
+            <div class="flex-grow flex pr-2">
+              <v-button v-track.upgrade_from_form_cleanings_click size="small" class="inline-block" :to="{name:'pricing'}">
+                {{ form.is_pro ? 'Upgrade plan' : 'Start free trial' }}
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                     stroke="currentColor" class="w-4 h-4 inline -mt-[2px]"
+                >
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
+                </svg>
+              </v-button>
+              <v-button color="white" size="small" class="ml-2" @click.prevent="openCrisp">
+                Contact us
+              </v-button>
+            </div>
+            <v-button v-if="hideable" color="white" size="small" class="mt-2" @click.prevent="hideWarning=true">
+              Hide warning
+            </v-button>
+          </div>
+        </div>
+      </collapse>
+    </div>
+  </v-transition>
+</template>
+<script>
+
+import Collapse from '../../../common/Collapse.vue'
+import VButton from '../../../common/Button.vue'
+import VTransition from '../../../common/transitions/VTransition.vue'
+
+export default {
+  name: 'FormCleanings',
+  components: { VTransition, VButton, Collapse },
+  props: {
+    form: { type: Object, required: true },
+    specifyFormOwner: { type: Boolean, default: false },
+    hideable: { type: Boolean, default: false }
+  },
+  data () {
+    return {
+      collapseOpened: false,
+      hideWarning: false
+    }
+  },
+  computed: {
+    hasCleanings () {
+      return this.form.cleanings && Object.keys(this.form.cleanings).length > 0
+    },
+    cleanings () {
+      return this.form.cleanings
+    },
+    cleaningContent () {
+      let message = ''
+      Object.keys(this.cleanings).forEach((key) => {
+        let fieldName = key.charAt(0).toUpperCase() + key.slice(1)
+        if (fieldName !== 'Form') {
+          fieldName = '"' + fieldName + '" field'
+        }
+        let fieldInfo = '<span class="font-semibold">' + fieldName + '</span><br/><ul class=\'list-disc list-inside\'>'
+        this.cleanings[key].forEach((msg) => {
+          fieldInfo = fieldInfo + '<li>' + msg + '</li>'
+        })
+        if (fieldInfo) {
+          message = message + fieldInfo + '<ul/><br/>'
+        }
+      })
+      return message
+    }
+  },
+  watch: {},
+  mounted () {
+  },
+  methods: {
+    openCrisp () {
+      this.$crisp.push(['do', 'chat:show'])
+      this.$crisp.push(['do', 'chat:open'])
+    }
+  }
+}
+</script>

resources/js/components/pages/forms/show/UrlFormPrefill.vue

@@ -13,7 +13,6 @@
         />
       </svg>
       Url form pre-fill
-      <pro-tag class="ml-2"/>
     </v-button>
 
     <modal :show="showUrlFormPrefillModal" @close="showUrlFormPrefillModal=false">
@@ -26,7 +25,6 @@
       </template>
       <template #title>
         <span>Url Form Prefill</span>
-        <pro-tag class="ml-4 pb-3" />
       </template>
 
       <div class="p-4">