Adding MailChimp Suport Newsletter component (Server Side)

src/components/BannerCookies/BannerCookies.scss

@@ -15,3 +15,9 @@
 .slideFromBottom-leave-active {
   transition: transform .2s ease-in;
 }
+
+.tothebottomfixed {
+  position: fixed;
+  top: 100px;
+  height: 50px;
+}

src/components/BannerCookies/BannerCookies.vue

@@ -1,6 +1,6 @@
 <template>
     <div v-if="isOpen">
-        <div class="q-pa-md q-gutter-sm tothebottomfixed">
+        <div class="q-pa-md q-gutter-sm">
             <transition appear name="slide-up" mode="out-in" :duration="2000">
                 <q-banner class="bg-primary text-white" transition-show="jump-down">
                     Usiamo i Cookie per una migliore prestazione web.

src/components/CImgText/CImgText.scss

@@ -31,6 +31,25 @@
   }
 }
 
+@media (max-width: 1600px) {
+  .myclimg {
+    height: 550px !important;
+  }
+}
+
+@media (max-width: 1000px) {
+  .myclimg {
+    height: 450px !important;
+  }
+}
+
+@media (max-width: 800px) {
+  .myclimg {
+    height: 400px !important;
+  }
+}
+
+
 @media (max-width: 718px) {
   // PER VERSIONE MOBILE
   .landing > section.padding_testo {

src/components/CImgText/CImgText.ts

@@ -25,6 +25,6 @@ import { Screen } from 'quasar'
 })
 export default class CImgText extends Vue {
   @Prop({ required: false, default: '' }) public src: string
-  @Prop({ required: false, default: '' }) public class1: string
+  @Prop({ required: false, default: 'myclimg' }) public class1: string
   @Prop({ required: false, default: '' }) public style1: string
 }

src/components/CImgText/CImgText.vue

@@ -3,7 +3,7 @@
         <section class="padding_testo bg-white text-grey-10 text-justify" >  <!-- v-scroll-reveal.reset -->
             <div class="row items-start q-col-gutter-xs imgtext">
                 <div class="imgtext__img">
-                    <img v-if="src" :src="src" :class="class1" :style="style1">
+                    <img v-if="src" :src="src" class="myclimg" :style="style1">
                     <div class="section_text">
                     <slot></slot>
                     </div>

src/components/Footer/Footer.ts

@@ -23,6 +23,10 @@ export default class Footer extends Vue {
   public $v
   public $q
 
+  get tools() {
+    return tools
+  }
+
   get TelegramSupport() {
     return db_data.TELEGRAM_SUPPORT
   }

src/components/Footer/Footer.vue

@@ -10,7 +10,7 @@
                     <!--</span>-->
 
 
-                    <FormNewsletter v-if="static_data.SHOW_NEWSLETTER">
+                    <FormNewsletter v-if="static_data.SHOW_NEWSLETTER" :idwebsite="tools.appid()" :locale="tools.getLocale()">
                     </FormNewsletter>
 
                     <div class="q-mt-xs copyrights">

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

src/components/index.ts

@@ -6,6 +6,8 @@ export * from './CCard'
 export * from './CBook'
 export * from './CPage'
 export * from './CTitle'
+export * from './CImgText'
+export * from './CImgTitle'
 export * from './CDate'
 export * from './BannerCookies'
 export * from './PagePolicy'