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/open/forms/components/FormFieldsEditor.vue

@@ -52,11 +52,6 @@
               </p>
             </template>
           </div>
-          <!-- Field options -->
-
-          <!--          <div class="flex-grow" v-if="['files'].includes(field.type) || field.type.startsWith('nf-')">-->
-          <!--            <pro-tag/>-->
-          <!--          </div>-->
 
           <template v-if="removing == field.id">
             <div class="flex text-sm items-center">

resources/js/components/open/forms/components/FormStats.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="border border-nt-blue-light bg-blue-50 dark:bg-notion-dark-light rounded-md p-4 mb-5 w-full mx-auto mt-4 select-all">
-    <div v-if="!form.is_pro" class="relative">
+    <div v-if="false" class="relative">
       <div class="absolute inset-0 z-10">
         <div class="p-5 max-w-md mx-auto mt-5">
           <p class="text-center">
@@ -102,7 +102,7 @@ export default {
   },
   methods: {
     getChartData () {
-      if (!this.form || !this.form.is_pro) { return null }
+      if (!this.form) { return null }
       this.isLoading = true
       axios.get('/api/open/workspaces/' + this.form.workspace_id + '/form-stats/' + this.form.id).then((response) => {
         const statsData = response.data

resources/js/components/open/forms/components/form-components/FormAboutSubmission.vue

@@ -21,8 +21,13 @@
     />
 
     <toggle-switch-input name="editable_submissions" :form="form" class="mt-4"
-                label="Allow users to edit their submission"
-    />
+                help="Gives user a unique url to update their submission"
+    >
+      <template #label>
+        Editable submissions
+        <pro-tag class="ml-1" />
+      </template>
+    </toggle-switch-input>
     <text-input v-if="form.editable_submissions" name="editable_submissions_button_text"
                 :form="form"
                 label="Text of editable submissions button"
@@ -111,7 +116,6 @@
       />
     </template>
     <template v-else>
-      <pro-tag class="float-right"/>
       <toggle-switch-input name="re_fillable" :form="form" class="mt-4"
                       label="Allow users to fill the form again"
       />

resources/js/components/open/forms/components/form-components/FormCustomCode.vue

@@ -12,10 +12,7 @@
       </h3>
     </template>
     <p class="mt-4">
-      The code will be injected in the <span class="font-semibold">head</span> section of your form page. <a href="#" class="text-gray-500"
-                                                                                 @click.prevent="$crisp.push(['do', 'helpdesk:article:open', ['en', 'how-to-inject-custom-code-in-my-form-1amadj3']])"
-      >Click
-        here to get an example CSS code.</a>
+      The code will be injected in the <span class="font-semibold">head</span> section of your form page.
     </p>
     <code-input name="custom_code" class="mt-4"
                 :form="form" help="Custom code cannot be previewed in our editor. Please test your code using

resources/js/components/open/forms/components/form-components/FormCustomization.vue

@@ -10,7 +10,6 @@
         </svg>
 
         Customization
-        <pro-tag />
       </h3>
     </template>
 
@@ -62,9 +61,12 @@
     <toggle-switch-input name="hide_title" :form="form" class="mt-4"
                     label="Hide Title"
     />
-    <toggle-switch-input name="no_branding" :form="form" class="mt-4"
-                    label="Remove OpnForm Branding"
-    />
+    <toggle-switch-input name="no_branding" :form="form" class="mt-4">
+      <template #label>
+        Remove OpnForm Branding
+        <pro-tag class="ml-1" />
+      </template>
+    </toggle-switch-input>
     <toggle-switch-input name="uppercase_labels" :form="form" class="mt-4"
                     label="Uppercase Input Labels"
     />

resources/js/components/open/forms/components/form-components/FormSecurityPrivacy.vue

@@ -17,7 +17,6 @@
                     label="Protect your form with a Captcha"
                     help="If enabled we will make sure respondant is a human"
     />
-    <pro-tag class="float-right" />
     <text-input name="password" :form="form" class="mt-4"
                     label="Form Password" help="Leave empty to disable password"
     />

resources/js/components/open/forms/components/form-logic-components/FormBlockLogicEditor.vue

@@ -2,7 +2,6 @@
   <div v-if="logic" :key="resetKey" class="-mx-4 sm:-mx-6 p-5 border-b">
     <h3 class="font-semibold block text-lg">
       Logic
-      <pro-tag/>
     </h3>
     <p class="text-gray-400 text-xs mb-5">
       Add some logic to this block. Start by adding some conditions, and then add some actions.