Adding MailChimp Suport Newsletter component (Server Side)

src/components/FormNewsletter/FormNewsletter.ts

@@ -1,11 +1,13 @@
 import Vue from 'vue'
 import Component from 'vue-class-component'
 
-import { tools } from '../../store/Modules/tools'
+import { tools } from '@src/store/Modules/tools'
 import { toolsext } from '@src/store/Modules/toolsext'
 
 import Quasar, { Screen } from 'quasar'
 import { Prop } from 'vue-property-decorator'
+import { Api } from '../../store'
+import { serv_constants } from '../../store/Modules/serv_constants'
 
 @Component({
   name: 'FormNewsletter'
@@ -15,12 +17,20 @@ export default class FormNewsletter extends Vue {
   public $t
   public $q
   public name: string = null
+  public surname: string = null
   public email: string = null
   public accept: boolean = false
 
-  public onSubmit() {
+  @Prop() public idwebsite: string
+  @Prop() public locale: string
+
+  get tools() {
+    return tools
+  }
+
+  public async onSubmit() {
+
     if (this.accept !== true) {
-      
       this.$q.notify({
         color: 'red-5',
         textColor: 'white',
@@ -29,19 +39,58 @@ export default class FormNewsletter extends Vue {
       })
     }
     else {
-      this.$q.notify({
-        color: 'green-4',
-        textColor: 'white',
-        icon: 'fas fa-check-circle',
-        message: this.$t('newsletter.submitted')
-      })
+      const usertosend = {
+        email: this.email,
+        firstName: this.name,
+        lastName: this.surname,
+        idwebsite: this.idwebsite,
+        locale: this.locale
+      }
+      console.log(usertosend)
+
+      return await Api.SendReq('/signup_news', 'POST', usertosend, false)
+        .then((res) => {
+
+          if (res.data.result === serv_constants.RIS_SUBSCRIBED_OK) {
+            this.$q.notify({
+              color: 'green-4',
+              textColor: 'white',
+              icon: 'fas fa-check-circle',
+              // message: this.$t('newsletter.submitted')
+              message: res.data.msg
+            })
+          } else if (res.data.result === serv_constants.RIS_SUBSCRIBED_ALREADYEXIST) {
+            this.$q.notify({
+              color: 'orange-4',
+              textColor: 'white',
+              icon: 'fas fa-check-circle',
+              // message: this.$t('newsletter.submitted')
+              message: res.data.msg
+            })
+          } else {
+            this.$q.notify({
+              color: 'red-5',
+              textColor: 'white',
+              icon: 'fas fa-exclamation-triangle',
+              message: res.data.msg
+            })
+          }
+
+        })
+        .catch((error) => {
+          console.error(error)
+          // UserStore.mutations.setErrorCatch(error)
+          return false
+        })
     }
   }
 
   public onReset() {
     this.name = null
+    this.surname = null
     this.email = null
     this.accept = false
   }
 
+
 }

src/components/FormNewsletter/FormNewsletter.vue

@@ -9,6 +9,7 @@
             >
                 <q-input
                         filled
+                        name="firstName"
                         dark standout
                         v-model="name"
                         :label="$t('newsletter.name') + `*`"
@@ -18,6 +19,18 @@
 
                 </q-input>
 
+                <q-input
+                        filled
+                        dark standout
+                        v-model="surname"
+                        name="lastName"
+                        :label="$t('newsletter.surname') + `*`"
+                        :hint="$t('newsletter.surnamehint')"
+                        lazy-rules
+                        :rules="[ val => val && val.length > 0 || $t('newsletter.typesomething')]">
+
+                </q-input>
+
                 <q-input
                         filled
                         dark standout