OpnForm launch feedback (#41)

* OpnForm launch feedback

* Restyle change style dropdown

Co-authored-by: Julien Nahum <jhumanj@MacBook-Pro-de-Julien.local>

config/links.php

@@ -6,7 +6,7 @@ return [
     'changelog_url' => 'https://opnform.canny.io/changelog',
     'github_url' => 'https://github.com/JhumanJ/OpnForm',
     'github_forum_url' => 'https://github.com/JhumanJ/OpnForm/discussions',
-    'facebook_group' => 'www.facebook.com/groups/opnform/',
+    'facebook_group' => 'https://www.facebook.com/groups/opnform/',
     'twitter' => 'https://twitter.com/OpnForm',
     'zapier_integration' => 'https://zapier.com/developer/public-invite/146950/58db583730cc46b821614468d94c35de/',
     'book_onboarding' => 'https://zcal.co/i/YQVGEULQ',

resources/js/components/open/forms/fields/FormFieldOptionsModal.vue

@@ -5,11 +5,14 @@
         <h2 class="text-2xl font-semibold z-10 truncate mb-5 text-gray-900 flex-grow">
           Configure "<span class="truncate">{{ field.name }}</span>" block
         </h2>
-        <div class="flex mr-6">
+        <div class="flex flex-wrap justify-end mr-6">
           <div>
             <v-button color="light-gray" size="small" @click="removeBlock">
-            <svg class="h-4 w-4 text-red-600 inline mr-1 -mt-1" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <svg class="h-4 w-4 text-red-600 inline mr-1 -mt-1" viewBox="0 0 24 24" fill="none"
-              <path d="M3 6H5M5 6H21M5 6V20C5 20.5304 5.21071 21.0391 5.58579 21.4142C5.96086 21.7893 6.46957 22 7 22H17C17.5304 22 18.0391 21.7893 18.4142 21.4142C18.7893 21.0391 19 20.5304 19 20V6H5ZM8 6V4C8 3.46957 8.21071 2.96086 8.58579 2.58579C8.96086 2.21071 9.46957 2 10 2H14C14.5304 2 15.0391 2.21071 15.4142 2.58579C15.7893 2.96086 16 3.46957 16 4V6M10 11V17M14 11V17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                   xmlns="http://www.w3.org/2000/svg">
+                <path
+                  d="M3 6H5M5 6H21M5 6V20C5 20.5304 5.21071 21.0391 5.58579 21.4142C5.96086 21.7893 6.46957 22 7 22H17C17.5304 22 18.0391 21.7893 18.4142 21.4142C18.7893 21.0391 19 20.5304 19 20V6H5ZM8 6V4C8 3.46957 8.21071 2.96086 8.58579 2.58579C8.96086 2.21071 9.46957 2 10 2H14C14.5304 2 15.0391 2.21071 15.4142 2.58579C15.7893 2.96086 16 3.46957 16 4V6M10 11V17M14 11V17"
+                  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
               </svg>
 
               Remove
@@ -17,12 +20,16 @@
           </div>
           <div class="ml-1">
             <v-button size="small" color="light-gray" @click="duplicateBlock">
-            <svg class="h-4 w-4 text-blue-600 inline mr-1 -mt-1" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <svg class="h-4 w-4 text-blue-600 inline mr-1 -mt-1" viewBox="0 0 24 24" fill="none"
-              <path d="M5 15H4C3.46957 15 2.96086 14.7893 2.58579 14.4142C2.21071 14.0391 2 13.5304 2 13V4C2 3.46957 2.21071 2.96086 2.58579 2.58579C2.96086 2.21071 3.46957 2 4 2H13C13.5304 2 14.0391 2.21071 14.4142 2.58579C14.7893 2.96086 15 3.46957 15 4V5M11 9H20C21.1046 9 22 9.89543 22 11V20C22 21.1046 21.1046 22 20 22H11C9.89543 22 9 21.1046 9 20V11C9 9.89543 9.89543 9 11 9Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                   xmlns="http://www.w3.org/2000/svg">
+                <path
+                  d="M5 15H4C3.46957 15 2.96086 14.7893 2.58579 14.4142C2.21071 14.0391 2 13.5304 2 13V4C2 3.46957 2.21071 2.96086 2.58579 2.58579C2.96086 2.21071 3.46957 2 4 2H13C13.5304 2 14.0391 2.21071 14.4142 2.58579C14.7893 2.96086 15 3.46957 15 4V5M11 9H20C21.1046 9 22 9.89543 22 11V20C22 21.1046 21.1046 22 20 22H11C9.89543 22 9 21.1046 9 20V11C9 9.89543 9.89543 9 11 9Z"
+                  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
               </svg>
               Duplicate
             </v-button>
           </div>
+          <change-field-type class="my-1" :field="field" @changeType="onChangeType"/>
         </div>
       </div>
 
@@ -188,7 +195,8 @@
         >
           Simple date input
         </v-checkbox>
-        <select-input v-if="field.simple_date_input" v-model="field.simple_date_input_format" name="simple_date_input_format"
+        <select-input v-if="field.simple_date_input" v-model="field.simple_date_input_format"
+                      name="simple_date_input_format"
                       class="mt-4" :form="field" :options="dateFormatOptions"
                       label="Date format"
         />
@@ -303,7 +311,8 @@
         />
 
         <template v-if="['text','number','url','email','phone_number'].includes(field.type)">
-          <text-input v-model="field.max_char_limit" name="max_char_limit" native-type="number" :min="1" :max="2000" :form="field"
+          <text-input v-model="field.max_char_limit" name="max_char_limit" native-type="number" :min="1" :max="2000"
+                      :form="field"
                       label="Max character limit"
                       help="Maximum character limit of 2000"
                       :required="false"
@@ -362,11 +371,13 @@
 
 import timezones from '../../../../../data/timezones.json'
 import ProTag from "../../../common/ProTag"
+
 const FormBlockLogicEditor = () => import('../components/form-logic-components/FormBlockLogicEditor')
+import ChangeFieldType from "./components/ChangeFieldType"
 
 export default {
   name: 'FormFieldOptionsModal',
-  components: { ProTag, FormBlockLogicEditor },
+  components: {ProTag, FormBlockLogicEditor, ChangeFieldType},
   props: {
     field: {
       type: Object,
@@ -445,6 +456,9 @@ export default {
   },
 
   methods: {
+    onChangeType(newType) {
+      this.$set(this.field, 'type', newType)
+    },
     close() {
       this.$emit('close')
     },

resources/js/components/open/forms/fields/components/ChangeFieldType.vue

@@ -0,0 +1,79 @@
+<template>
+  <dropdown dusk="nav-dropdown" v-if="changeTypeOptions.length > 0">
+    <template #trigger="{toggle}">
+      <v-button class="relative" size="small" color="light-gray" @click="toggle">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-4 w-4 text-blue-600 inline mr-1 -mt-1">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M7.5 21L3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5" />
+        </svg>
+
+        Change Field Type
+      </v-button>
+    </template>
+
+    <a href="#" v-for="(op, index) in changeTypeOptions" :key="index"
+       class="block px-4 py-2 text-md text-gray-700 dark:text-white hover:bg-gray-100 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white dark:hover:bg-gray-600 flex items-center"
+       @click.prevent="changeType(op.value)"
+    >
+      {{ op.name }}
+    </a>
+  </dropdown>
+</template>
+
+<script>
+import Dropdown from '../../../../common/Dropdown'
+
+export default {
+  name: 'ChangeFieldType',
+  components: {Dropdown},
+  props: {
+    field: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {}
+  },
+
+  computed: {
+    changeTypeOptions() {
+      var newTypes = []
+      if (['text', 'email', 'phone', 'number'].includes(this.field.type)) {
+        newTypes = [
+          {'name': 'Text Input', 'value': 'text'},
+          {'name': 'Email Input', 'value': 'email'},
+          {'name': 'Phone Input', 'value': 'phone'},
+          {'name': 'Number Input', 'value': 'number'}
+        ]
+      }
+      if (['select', 'multi_select'].includes(this.field.type)) {
+        newTypes = [
+          {'name': 'Select Input', 'value': 'select'},
+          {'name': 'Multi-Select Input', 'value': 'multi_select'}
+        ]
+      }
+      return newTypes.filter((item) => {
+        return item.value !== this.field.type
+      }).map((item) => {
+        return {
+          name: item.name,
+          value: item.value
+        }
+      })
+    }
+  },
+
+  watch: {},
+
+  mounted() {
+  },
+
+  methods: {
+    changeType(newType) {
+      if (newType) {
+        this.$emit('changeType', newType)
+      }
+    }
+  }
+}
+</script>

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

@@ -24,19 +24,20 @@
         },
         {
           title: 'Share',
-          description: 'Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.\n',
+          description: 'Your form has a unique link that you can share everywhere. Send the link, or even embed the form on your website.',
           features: [
-            'Build a simple form in minutes.',
+            'Share the link to your form',
-            'No coding needed.'
+            'Embed the form on your website'
           ],
           img: 'img/pages/welcome/step-2.jpg'
         },
         {
           title: 'Get Results',
-          description: 'Create a form in 2 minutes. More than 10 input types, images, logic and much more.',
+          description: 'Receive your form submissions. Receive notifications, send confirmations. Export submissions and check your form analytics.',
           features: [
-            'Build a simple form in minutes.',
+            'Unlimited form submissions for free',
-            'No coding needed.'
+            'Easily export submissions as CSV',
+            'Views & Submissions Analytics'
           ],
           img: 'img/pages/welcome/step-3.jpg'
         }

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

@@ -6,7 +6,7 @@
           <p class="w-full mt-2 mb-8">
             OpnForm makes form building easy and comes with powerful features.
           </p>
-          <div class="grid md:grid-cols-3 mt-10 mb-5">
+          <div class="grid grid-cols-2 md:grid-cols-3 mt-10 mb-5 ml-5 md:ml-0">
             <div class="flex font-semibold my-3">
               <svg class="w-5 h-5 mr-2 text-nt-blue" viewBox="0 0 23 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path d="M10.5 3.5H17.8C18.9201 3.5 19.4802 3.5 19.908 3.71799C20.2843 3.90973 20.5903 4.21569 20.782 4.59202C21 5.01984 21 5.57989 21 6.7V8C21 8.93188 21 9.39783 20.8478 9.76537C20.6448 10.2554 20.2554 10.6448 19.7654 10.8478C19.3978 11 18.9319 11 18 11M12.5 18.5H5.2C4.0799 18.5 3.51984 18.5 3.09202 18.282C2.71569 18.0903 2.40973 17.7843 2.21799 17.408C2 16.9802 2 16.4201 2 15.3V14C2 13.0681 2 12.6022 2.15224 12.2346C2.35523 11.7446 2.74458 11.3552 3.23463 11.1522C3.60218 11 4.06812 11 5 11M9.8 13.5H13.2C13.48 13.5 13.62 13.5 13.727 13.4455C13.8211 13.3976 13.8976 13.3211 13.9455 13.227C14 13.12 14 12.98 14 12.7V9.3C14 9.01997 14 8.87996 13.9455 8.773C13.8976 8.67892 13.8211 8.60243 13.727 8.5545C13.62 8.5 13.48 8.5 13.2 8.5H9.8C9.51997 8.5 9.37996 8.5 9.273 8.5545C9.17892 8.60243 9.10243 8.67892 9.0545 8.773C9 8.87996 9 9.01997 9 9.3V12.7C9 12.98 9 13.12 9.0545 13.227C9.10243 13.3211 9.17892 13.3976 9.273 13.4455C9.37996 13.5 9.51997 13.5 9.8 13.5ZM17.3 21H20.7C20.98 21 21.12 21 21.227 20.9455C21.3211 20.8976 21.3976 20.8211 21.4455 20.727C21.5 20.62 21.5 20.48 21.5 20.2V16.8C21.5 16.52 21.5 16.38 21.4455 16.273C21.3976 16.1789 21.3211 16.1024 21.227 16.0545C21.12 16 20.98 16 20.7 16H17.3C17.02 16 16.88 16 16.773 16.0545C16.6789 16.1024 16.6024 16.1789 16.5545 16.273C16.5 16.38 16.5 16.52 16.5 16.8V20.2C16.5 20.48 16.5 20.62 16.5545 20.727C16.6024 20.8211 16.6789 20.8976 16.773 20.9455C16.88 21 17.02 21 17.3 21ZM2.3 6H5.7C5.98003 6 6.12004 6 6.227 5.9455C6.32108 5.89757 6.39757 5.82108 6.4455 5.727C6.5 5.62004 6.5 5.48003 6.5 5.2V1.8C6.5 1.51997 6.5 1.37996 6.4455 1.273C6.39757 1.17892 6.32108 1.10243 6.227 1.0545C6.12004 1 5.98003 1 5.7 1H2.3C2.01997 1 1.87996 1 1.773 1.0545C1.67892 1.10243 1.60243 1.17892 1.5545 1.273C1.5 1.37996 1.5 1.51997 1.5 1.8V5.2C1.5 5.48003 1.5 5.62004 1.5545 5.727C1.60243 5.82108 1.67892 5.89757 1.773 5.9455C1.87996 6 2.01997 6 2.3 6Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>

resources/js/pages/welcome.vue

@@ -78,17 +78,17 @@
           </v-button>
         </div>
         <div class="flex justify-center mt-6">
-          <a target="_blank" href="" class="mr-4">
+          <a target="_blank" :href="configLinks.twitter" class="mr-4">
             <svg class="w-6 h-6 text-white" viewBox="0 0 24 20" fill="none" xmlns="http://www.w3.org/2000/svg">
               <path d="M7.55016 19.7502C16.6045 19.7502 21.5583 12.2469 21.5583 5.74211C21.5583 5.53117 21.5536 5.31554 21.5442 5.1046C22.5079 4.40771 23.3395 3.5445 24 2.55554C23.1025 2.95484 22.1496 3.21563 21.1739 3.32898C22.2013 2.71315 22.9705 1.74572 23.3391 0.606011C22.3726 1.1788 21.3156 1.58286 20.2134 1.80085C19.4708 1.01181 18.489 0.48936 17.4197 0.314295C16.3504 0.13923 15.2532 0.321295 14.2977 0.832341C13.3423 1.34339 12.5818 2.15495 12.1338 3.14156C11.6859 4.12816 11.5754 5.23486 11.8195 6.29054C9.86249 6.19233 7.94794 5.68395 6.19998 4.79834C4.45203 3.91274 2.90969 2.66968 1.67297 1.14976C1.0444 2.23349 0.852057 3.51589 1.13503 4.73634C1.418 5.95678 2.15506 7.02369 3.19641 7.72023C2.41463 7.69541 1.64998 7.48492 0.965625 7.10617V7.1671C0.964925 8.30439 1.3581 9.40683 2.07831 10.287C2.79852 11.1672 3.80132 11.7708 4.91625 11.9952C4.19206 12.1934 3.43198 12.2222 2.69484 12.0796C3.00945 13.0577 3.62157 13.9131 4.44577 14.5266C5.26997 15.14 6.26512 15.4808 7.29234 15.5015C5.54842 16.8714 3.39417 17.6144 1.17656 17.6109C0.783287 17.6103 0.390399 17.5861 0 17.5387C2.25286 18.984 4.87353 19.7516 7.55016 19.7502Z" fill="currentColor"/>
             </svg>
           </a>
-          <a target="_blank" href="" class="mr-4">
+          <a target="_blank" :href="configLinks.facebook_group" class="mr-4">
             <svg class="w-6 h-6 text-white" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
               <path d="M24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 17.9895 4.3882 22.954 10.125 23.8542V15.4688H7.07812V12H10.125V9.35625C10.125 6.34875 11.9166 4.6875 14.6576 4.6875C15.9701 4.6875 17.3438 4.92188 17.3438 4.92188V7.875H15.8306C14.34 7.875 13.875 8.80008 13.875 9.75V12H17.2031L16.6711 15.4688H13.875V23.8542C19.6118 22.954 24 17.9895 24 12Z" fill="currentColor"/>
             </svg>
           </a>
-          <a target="_blank" href="" class="mr-4">
+          <a target="_blank" :href="configLinks.github_url" class="mr-4">
             <svg class="w-6 h-6 text-white" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
               <path fill-rule="evenodd" clip-rule="evenodd" d="M12 0C5.3724 0 0 5.3808 0 12.0204C0 17.3304 3.438 21.8364 8.2068 23.4252C8.8068 23.5356 9.0252 23.1648 9.0252 22.8456C9.0252 22.5612 9.0156 21.804 9.0096 20.802C5.6712 21.528 4.9668 19.1904 4.9668 19.1904C4.422 17.8008 3.6348 17.4312 3.6348 17.4312C2.5452 16.6872 3.7176 16.7016 3.7176 16.7016C4.9212 16.7856 5.5548 17.94 5.5548 17.94C6.6252 19.776 8.364 19.2456 9.0468 18.9384C9.1572 18.162 9.4668 17.6328 9.81 17.3328C7.146 17.0292 4.344 15.9972 4.344 11.3916C4.344 10.08 4.812 9.006 5.5788 8.166C5.4552 7.8624 5.0436 6.6396 5.6964 4.986C5.6964 4.986 6.7044 4.662 8.9964 6.2172C9.97532 5.95022 10.9853 5.81423 12 5.8128C13.02 5.8176 14.046 5.9508 15.0048 6.2172C17.2956 4.662 18.3012 4.9848 18.3012 4.9848C18.9564 6.6396 18.5436 7.8624 18.4212 8.166C19.1892 9.006 19.6548 10.08 19.6548 11.3916C19.6548 16.0092 16.848 17.0256 14.1756 17.3232C14.6064 17.694 14.9892 18.4272 14.9892 19.5492C14.9892 21.1548 14.9748 22.452 14.9748 22.8456C14.9748 23.1672 15.1908 23.5416 15.8004 23.424C18.19 22.6225 20.2672 21.0904 21.7386 19.0441C23.2099 16.9977 24.001 14.5408 24 12.0204C24 5.3808 18.6264 0 12 0Z" fill="currentColor"/>
             </svg>
@@ -136,7 +136,8 @@ export default {
   computed: {
     ...mapGetters({
       authenticated: 'auth/check'
-    })
+    }),
+    configLinks: () => window.config.links
   }
 }
 </script>