From c713592b90a1baa00fc3f820531ff3d15bb8fe2c Mon Sep 17 00:00:00 2001
From: Daniil Lohvinov <nsblnr@gmail.com>
Date: Tue, 12 Mar 2024 15:50:36 +0200
Subject: [PATCH] refactor: complete captcha refactor [WTEL-4251]

---
 src/app/components/utils/index.js             |   2 +
 src/app/components/utils/wt-snack-bar.vue     | 141 ++++++++++++++++++
 .../wt-omni-widget-popup.vue                  |   7 +
 .../wt-omni-widget-window.vue                 |   2 +
 src/app/locale/en/en.js                       |   5 +
 src/app/locale/ru/ru.js                       |   5 +
 src/app/locale/ua/ua.js                       |   5 +
 src/install.js                                |  19 ++-
 src/main.js                                   |   3 +-
 .../components/wt-omni-widget-appointment.vue |  15 +-
 .../components/wt-omni-widget-call-start.vue  |  10 +-
 .../wt-omni-widget-chat-wrapper.vue           |  55 +++----
 .../reCAPTCHA-verification/api/reCAPTCHA.js   |  18 ++-
 13 files changed, 244 insertions(+), 43 deletions(-)
 create mode 100644 src/app/components/utils/wt-snack-bar.vue

diff --git a/src/app/components/utils/index.js b/src/app/components/utils/index.js
index 68a6332..9cacc81 100644
--- a/src/app/components/utils/index.js
+++ b/src/app/components/utils/index.js
@@ -4,6 +4,7 @@ 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,
@@ -11,6 +12,7 @@ const Components = {
   WtInput,
   WtLabel,
   WtTextarea,
+  WtSnackBar,
 };
 
 Object.keys(Components).forEach((name) => {
diff --git a/src/app/components/utils/wt-snack-bar.vue b/src/app/components/utils/wt-snack-bar.vue
new file mode 100644
index 0000000..874304a
--- /dev/null
+++ b/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>
diff --git a/src/app/components/wt-omni-widget-popup/wt-omni-widget-popup.vue b/src/app/components/wt-omni-widget-popup/wt-omni-widget-popup.vue
index 54c236c..fa13160 100644
--- a/src/app/components/wt-omni-widget-popup/wt-omni-widget-popup.vue
+++ b/src/app/components/wt-omni-widget-popup/wt-omni-widget-popup.vue
@@ -2,6 +2,7 @@
   <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">
@@ -9,16 +10,21 @@
           <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;
diff --git a/src/app/components/wt-omni-widget-window/wt-omni-widget-window.vue b/src/app/components/wt-omni-widget-window/wt-omni-widget-window.vue
index 863d4a8..cf914a9 100644
--- a/src/app/components/wt-omni-widget-window/wt-omni-widget-window.vue
+++ b/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>
 
@@ -65,6 +66,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;
diff --git a/src/app/locale/en/en.js b/src/app/locale/en/en.js
index 8022519..e6376b1 100644
--- a/src/app/locale/en/en.js
+++ b/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: {
diff --git a/src/app/locale/ru/ru.js b/src/app/locale/ru/ru.js
index b2ff22c..4f8da8a 100644
--- a/src/app/locale/ru/ru.js
+++ b/src/app/locale/ru/ru.js
@@ -4,6 +4,11 @@ export default {
     close: 'Закрыть',
     ok: 'Oк',
   },
+  captcha: {
+    error: {
+      text: 'Йоой! Что-то пошло не так. Пожалуйста, попробуйте позже.',
+    },
+  },
   chat: {
     inputPlaceholder: 'Сообщение',
     events: {
diff --git a/src/app/locale/ua/ua.js b/src/app/locale/ua/ua.js
index 565faa8..d667b3e 100644
--- a/src/app/locale/ua/ua.js
+++ b/src/app/locale/ua/ua.js
@@ -4,6 +4,11 @@ export default {
     close: 'Закрити',
     ok: 'Oк',
   },
+  captcha: {
+    error: {
+      text: 'Йоой! Щось пішло не так. Будь ласка, спробуйте пізніше.',
+    },
+  },
   chat: {
     inputPlaceholder: 'Повідомлення',
     events: {
diff --git a/src/install.js b/src/install.js
index 6b819e5..b2b8842 100644
--- a/src/install.js
+++ b/src/install.js
@@ -11,7 +11,9 @@ import eventBus from '@webitel/ui-sdk/src/scripts/eventBus';
 
 import globalConfigMixin from './app/mixins/globalConfigMixin';
 
-import { initializeReCAPTCHA } from './modules/reCAPTCHA-verification/api/reCAPTCHA';
+import {
+  initializeReCAPTCHA,
+} from './modules/reCAPTCHA-verification/api/reCAPTCHA';
 
 import './app/assets/icons/sprite';
 import './app/css/fonts/_fonts.scss';
@@ -53,12 +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(config.reCAPTCHA.sitekey);
+    await initializeReCAPTCHA({
+      sitekey: config.reCAPTCHA.sitekey,
+      verifyUrl: config.reCAPTCHA.verifyUrl,
+    });
     Instance.$mount(selector);
   }
 
diff --git a/src/main.js b/src/main.js
index 22cf631..1500db9 100644
--- a/src/main.js
+++ b/src/main.js
@@ -24,6 +24,7 @@ export default new WtOmniWidget('#wt-omni-widget', {
     id: 'dania-webchat',
   },
   reCAPTCHA: {
-    sitekey: '',
+    sitekey: '6LdTJJUpAAAAAFlzlOqs3mtaPhEnr0MOgBlc3W4N',
+    verifyUrl: 'https://dev.webitel.com/chat/dania-webchat/captcha',
   },
 });
diff --git a/src/modules/appointment/components/wt-omni-widget-appointment.vue b/src/modules/appointment/components/wt-omni-widget-appointment.vue
index 4cffbb2..4dd304b 100644
--- a/src/modules/appointment/components/wt-omni-widget-appointment.vue
+++ b/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>
diff --git a/src/modules/call/components/wt-omni-widget-call-start.vue b/src/modules/call/components/wt-omni-widget-call-start.vue
index afa708d..db116f5 100644
--- a/src/modules/call/components/wt-omni-widget-call-start.vue
+++ b/src/modules/call/components/wt-omni-widget-call-start.vue
@@ -24,7 +24,6 @@
         color="success"
         @click="call"
       ></wt-icon-btn>
-      err: {{ err }}
     </call-actions-wrapper>
   </section>
 </template>
@@ -32,6 +31,7 @@
 <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';
@@ -50,7 +50,6 @@ export default {
   },
   data: () => ({
     initWithMuted: false,
-    err: null,
   }),
   computed: {
     ...mapState({
@@ -71,8 +70,11 @@ export default {
           this.makeCall({ initWithMuted: this.initWithMuted });
         });
       } catch (err) {
-        console.error(err);
-        this.err = err;
+        eventBus.$emit('snack', {
+          type: 'error',
+          text: this.$t('captcha.error.text'),
+        });
+        throw err;
       }
     },
   },
diff --git a/src/modules/chat/components/wt-omni-widget-chat-wrapper.vue b/src/modules/chat/components/wt-omni-widget-chat-wrapper.vue
index d537518..d7fa0d1 100644
--- a/src/modules/chat/components/wt-omni-widget-chat-wrapper.vue
+++ b/src/modules/chat/components/wt-omni-widget-chat-wrapper.vue
@@ -10,7 +10,6 @@ why there's d: contents; and this weird wrapper?
     <footer-wrapper>
       <chat-footer :namespace="namespace"></chat-footer>
     </footer-wrapper>
-    err: {{ err }}
   </div>
 </template>
 
@@ -42,9 +41,6 @@ export default {
       required: true,
     },
   },
-  data: () => ({
-    err: null,
-  }),
   computed: {
     ...mapState('chat', {
       client: (state) => state.messageClient,
@@ -59,15 +55,30 @@ export default {
       listenOnMessage: 'LISTEN_ON_MESSAGE',
       onMessage: 'ON_MESSAGE',
     }),
-    initSession() {
+    async initSession() {
       if (this.client) return; // prevent reinitialization, but should be refactored
-      const workerSupport = false && !!window.SharedWorker && !!window.BroadcastChannel; // FIXME
-      const messageClient = new MessageClient({
-        url: this.config.chat.url,
-        workerSupport,
-      });
-      this.initializeSession({ messageClient });
-      this.setOnMessageListener();
+      try {
+        (await reCAPTCHify(() => {
+          const workerSupport = false && !!window.SharedWorker && !!window.BroadcastChannel; // FIXME
+          const messageClient = new MessageClient({
+            url: this.config.chat.url,
+            workerSupport,
+          });
+          this.initializeSession({ messageClient });
+          this.setOnMessageListener();
+
+          window.addEventListener('beforeunload', async (e) => {
+            await this.closeSession();
+            delete e.returnValue; // page will always reload
+          });
+        }))();
+      } catch (err) {
+        eventBus.$emit('snack', {
+          type: 'error',
+          text: this.$t('captcha.error.text'),
+        });
+        throw err;
+      }
     },
     initPreviewMode() {
       const messages = [
@@ -94,24 +105,18 @@ export default {
     },
   },
 
-  async created() {
+  created() {
     if (this.isPreviewMode) {
       this.initPreviewMode();
-    } else {
-      try {
-        await reCAPTCHify(() => {
-          this.initSession();
-          window.addEventListener('beforeunload', async (e) => {
-            await this.closeSession();
-            delete e.returnValue; // page will always reload
-          });
-        });
-      } catch (err) {
-        this.err = err;
-      }
+    }
+  },
+  activated() {
+    if (!this.isPreviewMode) {
+      this.initSession(); // try to init, if didn't init on created (note: initSession() has this.client check!!!)
     }
   },
 };
+
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/modules/reCAPTCHA-verification/api/reCAPTCHA.js b/src/modules/reCAPTCHA-verification/api/reCAPTCHA.js
index a0145e0..b4c3146 100644
--- a/src/modules/reCAPTCHA-verification/api/reCAPTCHA.js
+++ b/src/modules/reCAPTCHA-verification/api/reCAPTCHA.js
@@ -1,9 +1,11 @@
 import instance from '../../../app/api/instance.axios';
 
 let sitekey = null;
+let verifyUrl = null;
 
-export const initializeReCAPTCHA = async (_sitekey) => {
+export const initializeReCAPTCHA = async ({ sitekey: _sitekey, verifyUrl: _verifyUrl }) => {
   sitekey = _sitekey;
+  verifyUrl = _verifyUrl;
 
   const script = document.createElement('script');
   script.src = `https://www.google.com/recaptcha/api.js?render=${sitekey}`;
@@ -13,13 +15,15 @@ export const initializeReCAPTCHA = async (_sitekey) => {
 
 const executeReCAPTCHA = ({ action }) => window.grecaptcha.execute(sitekey, { action });
 
-const verifyReCAPTCHA = (token) => {
-  const url = 'https://dev.webitel.com/api/recaptcha'; // FIXME
+const verifyReCAPTCHA = async (token) => {
+  throw Error('test');
+  const url = `${verifyUrl}?response=${token}`;
   // if throws error, then isn't verified
-  return instance.post(url, {
-    response: token,
-    version: '3',
-  });
+  const result = await instance.get(url);
+  if (!result.success) {
+    throw new Error('reCAPTCHA verification failed');
+  }
+  return result;
 };
 
 const reCAPTCHA = {