First Committ

src/components/FormNewsletter/FormNewsletter.scss

@@ -0,0 +1,30 @@
+// Animations
+// slideFromBottom
+.slideFromBottom-enter, .slideFromBottom-leave-to {
+  transform: translate(0px, 10em);
+}
+
+.slideFromBottom-enter-to, .slideFromBottom-leave {
+  transform: translate(0px, 0px);
+}
+
+.slideFromBottom-enter-active {
+  transition: transform .2s ease-out;
+}
+
+.slideFromBottom-leave-active {
+  transition: transform .2s ease-in;
+}
+
+.news_title {
+  color: white;
+  font-size: 1rem;
+}
+
+.news_link {
+  color: gray;
+}
+
+.news_link:hover {
+  color: white;
+}

src/components/FormNewsletter/FormNewsletter.ts

@@ -0,0 +1,125 @@
+import {
+  defineComponent, toRef,
+} from 'vue'
+
+import { useQuasar } from 'quasar'
+import { useI18n } from '@src/boot/i18n'
+import Api from '@api'
+import { serv_constants } from '@store/Modules/serv_constants'
+import { MixinBase } from '../../mixins/mixin-base'
+import { toolsext } from '@src/store/Modules/toolsext'
+
+export default defineComponent({
+  name: 'FormNewsletter',
+  mixins: [MixinBase],
+  props: {
+    name: {
+      required: false,
+      type: String,
+      default: '',
+    },
+    surname: {
+      required: false,
+      type: String,
+      default: '',
+    },
+    email: {
+      required: false,
+      type: String,
+      default: '',
+    },
+    accept: {
+      required: false,
+      type: Boolean,
+      default: false,
+    },
+    idwebsite: {
+      required: false,
+      type: String,
+      default: '',
+    },
+    locale: {
+      required: false,
+      type: String,
+      default: '',
+    },
+  },
+  setup(props) {
+    const $q = useQuasar()
+    const { t } = useI18n();
+    const accept = toRef(props, 'accept')
+    const name = toRef(props, 'name')
+    const surname = toRef(props, 'surname')
+    const email = toRef(props, 'email')
+    const idwebsite = toRef(props, 'idwebsite')
+    const locale = toRef(props, 'locale')
+
+    const onSubmit = async function a2() {
+      if (accept.value !== true) {
+        $q.notify({
+          color: 'red-5',
+          textColor: 'white',
+          icon: 'fas fa-exclamation-triangle',
+          message: t('newsletter.license'),
+        })
+        return null
+      }
+      const usertosend = {
+        email: email.value,
+        firstName: name.value,
+        lastName: surname.value,
+        idwebsite: idwebsite.value,
+        locale: locale.value,
+        settomailchimp: toolsext.getValDb('MAILCHIMP_ON', true, false),
+      }
+      console.log(usertosend)
+
+      return Api.SendReq('/news/signup', 'POST', usertosend, false)
+        .then((res) => {
+          // console.log('res', res)
+          if (res.data.code === serv_constants.RIS_SUBSCRIBED_OK) {
+            $q.notify({
+              color: 'green-4',
+              textColor: 'white',
+              icon: 'fas fa-check-circle',
+              // message: t('newsletter.submitted')
+              message: res.data.msg,
+            })
+          } else if (res.data.code === serv_constants.RIS_SUBSCRIBED_ALREADYEXIST) {
+            $q.notify({
+              color: 'orange-4',
+              textColor: 'white',
+              icon: 'fas fa-check-circle',
+              // message: t('newsletter.submitted')
+              message: res.data.msg,
+            })
+          } else {
+            $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
+        })
+    }
+
+    function onReset() {
+      name.value = ''
+      surname.value = ''
+      email.value = ''
+      accept.value = false
+    }
+
+    return {
+      onSubmit,
+      onReset,
+    }
+  },
+
+})

src/components/FormNewsletter/FormNewsletter.vue

@@ -0,0 +1,66 @@
+<template>
+    <div>
+        <div class="q-pa-md q-gutter-sm text-white">
+            <p class="news_title">{{t('newsletter.title')}}</p>
+            <q-form
+                    @submit="onSubmit"
+                    @reset="onReset"
+                    class="q-gutter-md"
+            >
+                <q-input
+                        filled
+                        name="firstName"
+                        dense
+                        dark standout
+                        v-model="name"
+                        :label="t('newsletter.name') + `*`"
+                        :hint="t('newsletter.namehint')"
+                        lazy-rules
+                        :rules="[ val => val && val.length > 0 || t('newsletter.typesomething')]">
+
+                </q-input>
+
+                <q-input
+                        filled
+                        dense
+                        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
+                        dense
+                        dark standout
+                        v-model="email"
+                        :label="t('newsletter.email') + `*`"
+                        lazy-rules
+                        :rules="[ val => val && val.length > 6 || t('newsletter.typesomething')]">
+
+                </q-input>
+
+                <router-link to="/policy" custom v-slot="{ navigate }">
+                  <span class="news_link" @click="navigate" @keypress.enter="navigate" role="link">{{t('privacy_policy')}}</span></router-link>
+
+                <q-toggle dark v-model="accept" :label="t('newsletter.acceptlicense')"/>
+
+                <div>
+                    <q-btn :label="t('newsletter.submit')" type="submit" color="primary"/>
+                    <q-btn :label="t('newsletter.reset')" type="reset" color="primary" flat class="q-ml-sm"/>
+                </div>
+            </q-form>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" src="./FormNewsletter.ts">
+</script>
+
+<style lang="scss" scoped>
+    @import './FormNewsletter.scss';
+</style>

src/components/FormNewsletter/index.ts

@@ -0,0 +1 @@
+export { default as FormNewsletter } from './FormNewsletter.vue'