Merge pull request #76 from webitel/feat/recaptcha

Feat/recaptcha

src/app/components/utils/index.js

@@ -4,13 +4,15 @@ import WtIconBtn from './wt-icon-btn.vue';
 import WtInput from './wt-input.vue';
 import WtLabel from './wt-label.vue';
 import WtTextarea from './wt-textarea.vue';
+import WtSnackBar from './wt-snack-bar.vue';
 
 const Components = {
   WtButton,
   WtIconBtn,
   WtInput,
   WtLabel,
   WtTextarea,
+  WtSnackBar,
 };
 
 Object.keys(Components).forEach((name) => {

src/app/components/utils/wt-snack-bar.vue

@@ -0,0 +1,141 @@
+<template>
+  <aside
+    class="wt-snack-bar"
+  >
+    <transition-group name="snack-pop-up">
+      <article
+        class="wt-snack-bar-item"
+        v-for="({ type, text, id }) of stack"
+        :key="id"
+        :class="`wt-snack-bar-item--${type}`"
+      >
+        <p
+          class="wt-snack-bar-item-text"
+        >
+          {{ text || type }}
+        </p>
+        <wt-icon-btn
+          icon="close"
+          size="sm"
+          @click="close(id)"
+        ></wt-icon-btn>
+      </article>
+    </transition-group>
+  </aside>
+</template>
+
+<script>
+import eventBus from '@webitel/ui-sdk/src/scripts/eventBus';
+import { v4 as uuid } from 'uuid';
+
+export default {
+  name: 'wt-snack-bar',
+  data: () => ({
+    stack: [],
+  }),
+  methods: {
+    close(id) {
+      const newStack = [...this.stack];
+      const index = newStack.findIndex((item) => item.id === id);
+      newStack.splice(index, 1);
+      this.stack = newStack;
+    },
+
+    addSnack({
+               type,
+               title,
+               text,
+             }) {
+      const newItem = {
+        id: uuid(),
+        type,
+        title,
+        text,
+      };
+
+      this.stack.push(newItem);
+
+      setTimeout(() => {
+        this.close(newItem.id);
+      }, 3000);
+    },
+  },
+  mounted() {
+    eventBus.$on('snack', this.addSnack);
+  },
+  destroyed() {
+    eventBus.$off('snack', this.addSnack);
+  },
+};
+</script>
+
+<style scoped lang="scss">
+#wt-omni-widget {
+  .wt-snack-bar {
+    position: absolute;
+    z-index: 1111;
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
+
+  .wt-snack-bar-item {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    align-content: center;
+    justify-content: space-between;
+    gap: 5px;
+    padding: 15px;
+    border-radius: 0 0 var(--border-radius--square) var(--border-radius--square);
+    background: var(--negative-color);
+
+    &--error {
+      background: var(--negative-color);
+    }
+  }
+
+  .wt-snack-bar-item-text {
+    @extend %typo-body-md;
+    color: var(--main-color);
+  }
+
+  .wt-snack-bar-item {
+    &--error {
+      .wt-snack-bar-item-header {
+        color: var(--main-color);
+      }
+
+      .wt-snack-bar-item-text {
+        color: var(--main-color);
+      }
+    }
+  }
+
+  &.wt-omni-widget--rounded {
+    .wt-snack-bar-item {
+      border-radius: 0 0 var(--border-radius--rounded) var(--border-radius--rounded);
+    }
+  }
+
+  .snack-pop-up-enter-active,
+  .snack-pop-up-leave-active {
+    transition: all 0.2s ease;
+  }
+
+  .snack-pop-up-enter,
+  .snack-pop-up-leave-to {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+
+  .snack-pop-up-enter-to,
+  .snack-pop-up-leave {
+    transform: translateY(0);
+    opacity: 1;
+  }
+
+}
+</style>

src/app/components/wt-omni-widget-popup/wt-omni-widget-popup.vue

@@ -2,23 +2,29 @@
   <aside class="wt-omni-widget-popup">
     <section class="wt-omni-widget-popup__popup">
       <wt-omni-widget-header
+        :channel="WidgetChannel.APPOINTMENT"
         @close="close"
       ></wt-omni-widget-header>
       <article class="wt-omni-widget-popup__main">
         <slot name="main">
           <the-appointment></the-appointment>
         </slot>
       </article>
+      <wt-snack-bar />
     </section>
   </aside>
 </template>
 
 <script>
 import TheAppointment from '../../../modules/appointment/components/wt-omni-widget-appointment.vue';
+import WidgetChannel from '../../enums/WidgetChannel.enum';
 import WtOmniWidgetHeader from '../wt-omni-widget-window/wt-omni-widget-window-header/wt-omni-widget-window-header.vue';
 
 export default {
   name: 'wt-omni-widget-popup',
+  data: () => ({
+    WidgetChannel,
+  }),
   components: {
     WtOmniWidgetHeader,
     TheAppointment,
@@ -53,6 +59,7 @@ export default {
   }
 
   .wt-omni-widget-popup__popup {
+    position: relative;
     z-index: 1;
     display: flex;
     flex-direction: column;

src/app/components/wt-omni-widget-window/wt-omni-widget-window.vue

@@ -9,6 +9,7 @@
       :is="`${channel}-wrapper`"
       :namespace="namespace"
     ></component>
+    <wt-snack-bar />
   </section>
 </template>
 
@@ -62,6 +63,7 @@ export default {
     border-radius: var(--border-radius--square);
     background: var(--background-color);
     box-shadow: var(--morf-style-font);
+    position: relative;
 
     ::v-deep .wt-omni-widget-window-content-wrapper {
       flex-grow: 1;

src/app/css/_main.scss

@@ -4,6 +4,10 @@
 @import 'variables/scroll';
 @import 'styleguide/placeholder/placeholder';
 
+// https://developers.google.com/recaptcha/docs/faq#id-like-to-hide-the-recaptcha-badge.-what-is-allowed
+.grecaptcha-badge {
+  visibility: hidden;
+}
 
 .wt-omni-widget--reset-styles,
 .wt-omni-widget--reset-styles * {

src/app/locale/en/en.js

@@ -4,6 +4,11 @@ export default {
     close: 'Close',
     ok: 'Ok',
   },
+  captcha: {
+    error: {
+      text: 'Oops! Something went wrong. Please, try again.',
+    },
+  },
   chat: {
     inputPlaceholder: 'Message',
     events: {

src/app/locale/ru/ru.js

@@ -4,6 +4,11 @@ export default {
     close: 'Закрыть',
     ok: 'Oк',
   },
+  captcha: {
+    error: {
+      text: 'Йоой! Что-то пошло не так. Пожалуйста, попробуйте позже.',
+    },
+  },
   chat: {
     inputPlaceholder: 'Сообщение',
     events: {

src/app/locale/ua/ua.js

@@ -4,6 +4,11 @@ export default {
     close: 'Закрити',
     ok: 'Oк',
   },
+  captcha: {
+    error: {
+      text: 'Йоой! Щось пішло не так. Будь ласка, спробуйте пізніше.',
+    },
+  },
   chat: {
     inputPlaceholder: 'Повідомлення',
     events: {

src/install.js

@@ -11,6 +11,10 @@ import eventBus from '@webitel/ui-sdk/src/scripts/eventBus';
 
 import globalConfigMixin from './app/mixins/globalConfigMixin';
 
+import {
+  initializeReCAPTCHA,
+} from './modules/reCAPTCHA-verification/api/reCAPTCHA';
+
 import './app/assets/icons/sprite';
 import './app/css/fonts/_fonts.scss';
 
@@ -51,11 +55,21 @@ const defaultConfig = merge(devConfig, {
 export default class WtOmniWidget {
   constructor(selector, _config = {}) {
     const config = merge(defaultConfig, _config);
-    this.mountApp({ selector, config });
+    this.mountApp({
+      selector,
+      config,
+    });
   }
 
-  async mountApp({ selector, config }) {
+  async mountApp({
+                   selector,
+                   config,
+                 }) {
     await this.setConfig(config);
+    await initializeReCAPTCHA({
+      sitekey: config.reCAPTCHA.sitekey,
+      verifyUrl: config.reCAPTCHA.verifyUrl,
+    });
     Instance.$mount(selector);
   }
 

src/main.js

@@ -23,4 +23,8 @@ export default new WtOmniWidget('#wt-omni-widget', {
     url: 'wss://dev.webitel.com/sip',
     id: 'dania-webchat',
   },
+  reCAPTCHA: {
+    sitekey: '6LdTJJUpAAAAAFlzlOqs3mtaPhEnr0MOgBlc3W4N',
+    verifyUrl: 'https://dev.webitel.com/chat/dania-webchat/captcha',
+  },
 });

src/modules/appointment/components/wt-omni-widget-appointment.vue

@@ -10,8 +10,10 @@
 </template>
 
 <script>
+import eventBus from '@webitel/ui-sdk/src/scripts/eventBus';
 import { mapActions, mapState } from 'vuex';
 import getNamespacedState from '@webitel/ui-sdk/src/store/helpers/getNamespacedState';
+import reCAPTCHify from '../../reCAPTCHA-verification/scripts/reCAPTCHify';
 import AppointmentList from './list/wt-omni-widget-appointment-list.vue';
 import AppointmentSuccess from './success/wt-omni-widget-appointment-success.vue';
 import AppointmentState from '../enum/AppointmentState.enum';
@@ -39,8 +41,17 @@ export default {
       loadAppointmentData: 'LOAD_APPOINTMENT_DATA',
     }),
   },
-  created() {
-    this.loadAppointmentData();
+  async created() {
+    try {
+      (await reCAPTCHify(() => {
+        this.loadAppointmentData();
+      }))();
+    } catch (err) {
+      eventBus.$emit('snack', {
+        type: 'error',
+        text: this.$t('captcha.error.text'),
+      });
+    }
   },
 };
 </script>

src/modules/call/components/wt-omni-widget-call-start.vue

@@ -22,7 +22,7 @@
         icon="call"
         icon-size="sm"
         color="success"
-        @click="() => makeCall({ initWithMuted })"
+        @click="call"
       ></wt-icon-btn>
     </call-actions-wrapper>
   </section>
@@ -31,6 +31,8 @@
 <script>
 import getNamespacedState from '@webitel/ui-sdk/src/store/helpers/getNamespacedState';
 import { mapActions, mapState } from 'vuex';
+import eventBus from '@webitel/ui-sdk/src/scripts/eventBus';
+import reCAPTCHify from '../../reCAPTCHA-verification/scripts/reCAPTCHify';
 import CallActionsWrapper from './utils/wt-omni-widget-call-actions-wrapper.vue';
 import CallTitleWrapper from './utils/wt-omni-widget-call-title-wrapper.vue';
 
@@ -62,6 +64,19 @@ export default {
         return dispatch(`${this.namespace}/MAKE_CALL`, payload);
       },
     }),
+    async call() {
+      try {
+        await reCAPTCHify(() => {
+          this.makeCall({ initWithMuted: this.initWithMuted });
+        });
+      } catch (err) {
+        eventBus.$emit('snack', {
+          type: 'error',
+          text: this.$t('captcha.error.text'),
+        });
+        throw err;
+      }
+    },
   },
 };
 </script>