Adding MailChimp Suport Newsletter component (Server Side)

package.json

@@ -28,7 +28,7 @@
   "dependencies": {
     "@babel/plugin-transform-runtime": "^7.4.0",
     "@babel/runtime": "^7.0.0",
-    "@quasar/extras": "^1.2.0",
+    "@quasar/extras": "^1.3.1",
     "@types/vuelidate": "^0.7.0",
     "@vue/eslint-config-standard": "^4.0.0",
     "acorn": "^6.0.0",
@@ -50,7 +50,7 @@
     "normalize.css": "^8.0.0",
     "npm": "^6.10.1",
     "nprogress": "^0.2.0",
-    "quasar": "^1.0.4",
+    "quasar": "^1.1.0",
     "quasar-extras": "^2.0.8",
     "register-service-worker": "^1.0.0",
     "vee-validate": "^2.1.2",
@@ -85,7 +85,7 @@
     "@babel/plugin-syntax-dynamic-import": "^7.2.0",
     "@babel/plugin-syntax-import-meta": "^7.2.0",
     "@babel/preset-env": "^7.4.2",
-    "@quasar/app": "^1.0.4",
+    "@quasar/app": "^1.0.6",
     "@quasar/quasar-app-extension-typescript": "^1.0.0-alpha.11",
     "@types/dotenv": "^4.0.3",
     "@types/jest": "^23.1.4",

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
-    if (this.accept !== true) {
+  @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({
+      const usertosend = {
-        color: 'green-4',
+        email: this.email,
-        textColor: 'white',
+        firstName: this.name,
-        icon: 'fas fa-check-circle',
+        lastName: this.surname,
-        message: this.$t('newsletter.submitted')
+        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'

src/model/GlobalStore.ts

@@ -149,3 +149,19 @@ export interface IGallery {
   width?: number
   height?: number
 }
+
+export interface IColl {
+  title: IAllLang
+  date: string
+  subtitle?: IAllLang
+  img: string
+  linkagg?: string
+  linkagg_type?: number
+  width?: number
+  height?: number
+}
+
+export interface ICollaborations {
+  withwhom_title: IAllLang
+  list: IColl[]
+}

src/statics/i18n.js

@@ -167,7 +167,9 @@ const msgglobal = {
     },
     newsletter: {
       name: 'Il tuo Nome',
-      namehint: 'Nome e Cognome',
+      surname: 'Il tuo Cognome',
+      namehint: 'Nome',
+      surnamehint: 'Cognome',
       email: 'La tua Email',
       submit: 'Iscriviti',
       reset: 'Cancella',
@@ -337,7 +339,9 @@ const msgglobal = {
     },
     newsletter: {
       name: 'Tu Nombre',
-      namehint: 'Nombre y Apellido',
+      surname: 'Tu Apellido',
+      namehint: 'Nombre',
+      surnamehint: 'Apellido',
       email: 'tu correo',
       submit: 'Subscribete',
       reset: 'Reiniciar',
@@ -506,7 +510,9 @@ const msgglobal = {
     },
     newsletter: {
       name: 'Ton nom',
-      namehint: 'Nom et prénom',
+      surname: 'Tu prénom',
+      namehint: 'Nom',
+      surnamehint: 'Prénom',
       email: 'votre e-mail',
       submit: 'S\'abonner',
       reset: 'Redémarrer',
@@ -674,7 +680,9 @@ const msgglobal = {
     },
     newsletter: {
       name: 'Your name',
-      namehint: 'Name and surname',
+      surname: 'Your surname',
+      namehint: 'Name',
+      surnamehint: 'Surname',
       email: 'Your email',
       submit: 'Subscribe',
       reset: 'Reset',
@@ -844,7 +852,9 @@ const msgglobal = {
     },
     newsletter: {
       name: 'Your name',
-      namehint: 'Name and surname',
+      surname: 'Your surname',
+      namehint: 'Name',
+      surnamehint: 'Surname',
       email: 'Your email',
       submit: 'Subscribe',
       reset: 'Reset',

src/store/Modules/GlobalStore.ts

@@ -341,6 +341,10 @@ namespace Actions {
       return
     }
 
+    if (UserStore.state.userId === undefined) {
+      return
+    }
+
     // console.log('saveSubscriptionToServer: ', newSub)
     // console.log('context', context)
 

src/store/Modules/serv_constants.ts

@@ -11,6 +11,10 @@ export const serv_constants = {
   RIS_CODE_OK: 1,
   RIS_CODE_LOGIN_OK: 1,
 
-  RIS_CODE__HTTP_FORBIDDEN_INVALID_TOKEN: 403
+  RIS_CODE__HTTP_FORBIDDEN_INVALID_TOKEN: 403,
+
+  RIS_SUBSCRIBED_OK: 1,
+  RIS_SUBSCRIBED_ALREADYEXIST: 2,
+  RIS_SUBSCRIBED_ERR: -1
 
 }

src/store/Modules/tools.ts

@@ -4,13 +4,14 @@ import { costanti } from './costanti'
 import { toolsext } from './toolsext'
 import { translation } from './translation'
 import Quasar, { date, Screen } from 'quasar'
-import { IListRoutes, IMenuList, IProject, ITodo, Privacy } from '@src/model'
+import { ICollaborations, IListRoutes, IMenuList, IProject, ITodo, Privacy } from '@src/model'
 import * as ApiTables from '@src/store/Modules/ApiTables'
 import translate from '@src/globalroutines/util'
 import { RouteNames } from '@src/router/route-names'
 
 import { lists } from './lists'
 import { static_data } from '@src/db/static_data'
+import { IColl, ITimeLineEntry, ITimeLineMain } from '@src/model/GlobalStore'
 
 export interface INotify {
   color?: string | 'primary'
@@ -30,6 +31,8 @@ export const tools = {
   DUPLICATE_EMAIL_ID: 11000,
   DUPLICATE_USERNAME_ID: 11100,
 
+  TYPE_AUDIO: 1,
+
   NUMSEC_CHECKUPDATE: 20000,
 
   FIRST_PROJ: '5ca8f17fcd40dc5012f53346',
@@ -1735,13 +1738,21 @@ export const tools = {
     }
   },
 
-  myheight_imgtitle() {
+  myheight_imgtitle(myheight?) {
+    if (!!myheight) {
+      if (myheight > 0)
+        return myheight
+    }
     if (Screen.width < 400) {
-      return '250'
+      return 350
     } else if (Screen.width < 600) {
-      return '350'
+      return 400
+    } else if (Screen.width < 800) {
+      return 450
+    } else if (Screen.width < 1000) {
+      return 500
     } else {
-      return '350'
+      return 500
     }
   },
 
@@ -1843,8 +1854,77 @@ export const tools = {
 
   addDays(mydate, days) {
     return date.addToDate(mydate, { days })
+  },
+
+  gettitlemain(datamain: ITimeLineMain) {
+    if (datamain.titlemain[toolsext.getLocale()])
+      return datamain.titlemain[toolsext.getLocale()]
+    else {
+      return datamain.titlemain[static_data.arrLangUsed[0]]
+    }
+
+  },
+  getwwithwhocoll(datamain: ICollaborations) {
+    if (datamain.withwhom_title[toolsext.getLocale()])
+      return datamain.withwhom_title[toolsext.getLocale()]
+    else {
+      return datamain.withwhom_title[static_data.arrLangUsed[0]]
+    }
+
+  },
+  gettextcoll(data: IColl) {
+    if (data.subtitle[toolsext.getLocale()])
+      return data.subtitle[toolsext.getLocale()]
+    else {
+      return data.subtitle[static_data.arrLangUsed[0]]
+    }
+  },
+  gettitlecoll(data: IColl) {
+    if (data.title[toolsext.getLocale()])
+      return data.title[toolsext.getLocale()]
+    else {
+      return data.title[static_data.arrLangUsed[0]]
+    }
+  },
+  gettextdescr(data: ITimeLineEntry, numdescr = 'description') {
+    if (!!data[numdescr]) {
+      if (data[numdescr][toolsext.getLocale()])
+        return data[numdescr][toolsext.getLocale()]
+      else {
+        return data[numdescr][static_data.arrLangUsed[0]]
+      }
+    } else {
+      return ''
+    }
+  },
+
+  getlink(data: ITimeLineEntry) {
+    if (data.link_text[toolsext.getLocale()])
+      return data.link_text[toolsext.getLocale()]
+    else {
+      return data.link_text[static_data.arrLangUsed[0]]
+    }
+
+  },
+
+  getlinkurl(data: ITimeLineEntry) {
+    if (data.link_url_lang) {
+      if (data.link_url_lang[toolsext.getLocale()]) {
+        return data.link_url_lang[toolsext.getLocale()]
+      } else {
+        return data.link_url
+      }
+    } else {
+      return data.link_url
+    }
+
+  },
+
+  appid() {
+    return process.env.APP_ID
   }
 
+
 // getLocale() {
   //   if (navigator.languages && navigator.languages.length > 0) {
   //     return navigator.languages[0]