From 193ad3e11583db45c6a92441375e735e14645f6d Mon Sep 17 00:00:00 2001
From: Daniil Lohvinov <nsblnr@gmail.com>
Date: Thu, 7 Mar 2024 21:49:33 +0200
Subject: [PATCH 1/4] feat: working on recaptcha in progress [WTEL-4251]

---
 .../wt-omni-widget-window.vue                 | 62 +++++++++++++++++--
 src/app/css/_main.scss                        |  4 ++
 2 files changed, 62 insertions(+), 4 deletions(-)

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 1b423ae..5f956d2 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
@@ -5,10 +5,16 @@
       :channel="channel"
       @close="$emit('close')"
     ></wt-omni-widget-header>
-    <component
-      :is="`${channel}-wrapper`"
-      :namespace="namespace"
-    ></component>
+    <!--    <component-->
+    <!--      :is="`${channel}-wrapper`"-->
+    <!--      :namespace="namespace"-->
+    <!--    ></component>-->
+
+    <button id="cptch" type="button">click me</button>
+
+    <div id="g-recaptcha-v2"></div>
+    <button id="cptch2" type="button">click me v2</button>
+    {{ state }}
   </section>
 </template>
 
@@ -18,6 +24,13 @@ import CallWrapper from '../../../modules/call/components/wt-omni-widget-call-wr
 import WidgetChannel from '../../enums/WidgetChannel.enum';
 import WtOmniWidgetHeader from './wt-omni-widget-window-header/wt-omni-widget-window-header.vue';
 
+const script = document.createElement('script');
+script.src = `https://www.google.com/recaptcha/api.js?render=${sitekey}`;
+// script.async = true;
+document.head.appendChild(script);
+
+import axios from 'axios';
+
 export default {
   name: 'wt-omni-widget-window',
   components: {
@@ -25,6 +38,10 @@ export default {
     ChatWrapper,
     CallWrapper,
   },
+  data: () => ({
+    state: 'empty',
+    sitekeyv2,
+  }),
   props: {
     channel: {
       type: String, // WidgetChannel.enum
@@ -43,6 +60,43 @@ export default {
       }
     },
   },
+  methods: {
+    onVerify(state, response) {
+      // console.info('response', state, response);
+      // this.state = state;
+    },
+  },
+  mounted() {
+    const button = document.getElementById('cptch');
+    button.addEventListener('click', () => {
+      window.grecaptcha.ready(() => {
+        window.grecaptcha.execute(sitekey, { action: 'homepage' })
+        .then(async (token) => {
+          this.onVerify('verified', token);
+          const res = await axios.post('https://dev.webitel.com/api/recaptcha', {
+            response: token,
+            version: '3',
+          });
+          console.info(res.data.success, res.data.score);
+        });
+      });
+    });
+
+    const button2 = document.getElementById('cptch2');
+    button2.addEventListener('click', () => {
+      window.grecaptcha.render(document.getElementById('g-recaptcha-v2'), {
+        sitekey: sitekeyv2,
+        callback: async (response) => {
+          this.onVerify('verified v2', response);
+          const res = await axios.post('https://dev.webitel.com/api/recaptcha', {
+            version: '2',
+            response,
+          });
+          console.info(res.data);
+        },
+      });
+    });
+  },
 };
 </script>
 
diff --git a/src/app/css/_main.scss b/src/app/css/_main.scss
index e6bfa09..18caf08 100644
--- a/src/app/css/_main.scss
+++ b/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 * {

From 43a9fc71195011e42c46c8466b49dc24a9814cbc Mon Sep 17 00:00:00 2001
From: Daniil Lohvinov <nsblnr@gmail.com>
Date: Fri, 8 Mar 2024 21:54:43 +0200
Subject: [PATCH 2/4] refactor: reCAPTCHA refactor [WTEL-4251]

---
 .../wt-omni-widget-window.vue                 | 59 ++-----------------
 src/install.js                                |  3 +
 src/main.js                                   |  3 +
 .../components/wt-omni-widget-call-start.vue  | 15 ++++-
 .../wt-omni-widget-chat-wrapper.vue           | 25 +++++---
 .../reCAPTCHA-verification/api/reCAPTCHA.js   | 30 ++++++++++
 .../scripts/reCAPTCHify.js                    | 15 +++++
 7 files changed, 87 insertions(+), 63 deletions(-)
 create mode 100644 src/modules/reCAPTCHA-verification/api/reCAPTCHA.js
 create mode 100644 src/modules/reCAPTCHA-verification/scripts/reCAPTCHify.js

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 5f956d2..863d4a8 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
@@ -5,16 +5,10 @@
       :channel="channel"
       @close="$emit('close')"
     ></wt-omni-widget-header>
-    <!--    <component-->
-    <!--      :is="`${channel}-wrapper`"-->
-    <!--      :namespace="namespace"-->
-    <!--    ></component>-->
-
-    <button id="cptch" type="button">click me</button>
-
-    <div id="g-recaptcha-v2"></div>
-    <button id="cptch2" type="button">click me v2</button>
-    {{ state }}
+    <component
+      :is="`${channel}-wrapper`"
+      :namespace="namespace"
+    ></component>
   </section>
 </template>
 
@@ -24,13 +18,6 @@ import CallWrapper from '../../../modules/call/components/wt-omni-widget-call-wr
 import WidgetChannel from '../../enums/WidgetChannel.enum';
 import WtOmniWidgetHeader from './wt-omni-widget-window-header/wt-omni-widget-window-header.vue';
 
-const script = document.createElement('script');
-script.src = `https://www.google.com/recaptcha/api.js?render=${sitekey}`;
-// script.async = true;
-document.head.appendChild(script);
-
-import axios from 'axios';
-
 export default {
   name: 'wt-omni-widget-window',
   components: {
@@ -40,7 +27,6 @@ export default {
   },
   data: () => ({
     state: 'empty',
-    sitekeyv2,
   }),
   props: {
     channel: {
@@ -60,43 +46,6 @@ export default {
       }
     },
   },
-  methods: {
-    onVerify(state, response) {
-      // console.info('response', state, response);
-      // this.state = state;
-    },
-  },
-  mounted() {
-    const button = document.getElementById('cptch');
-    button.addEventListener('click', () => {
-      window.grecaptcha.ready(() => {
-        window.grecaptcha.execute(sitekey, { action: 'homepage' })
-        .then(async (token) => {
-          this.onVerify('verified', token);
-          const res = await axios.post('https://dev.webitel.com/api/recaptcha', {
-            response: token,
-            version: '3',
-          });
-          console.info(res.data.success, res.data.score);
-        });
-      });
-    });
-
-    const button2 = document.getElementById('cptch2');
-    button2.addEventListener('click', () => {
-      window.grecaptcha.render(document.getElementById('g-recaptcha-v2'), {
-        sitekey: sitekeyv2,
-        callback: async (response) => {
-          this.onVerify('verified v2', response);
-          const res = await axios.post('https://dev.webitel.com/api/recaptcha', {
-            version: '2',
-            response,
-          });
-          console.info(res.data);
-        },
-      });
-    });
-  },
 };
 </script>
 
diff --git a/src/install.js b/src/install.js
index e916e2c..6b819e5 100644
--- a/src/install.js
+++ b/src/install.js
@@ -11,6 +11,8 @@ 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';
 
@@ -56,6 +58,7 @@ export default class WtOmniWidget {
 
   async mountApp({ selector, config }) {
     await this.setConfig(config);
+    await initializeReCAPTCHA(config.reCAPTCHA.sitekey);
     Instance.$mount(selector);
   }
 
diff --git a/src/main.js b/src/main.js
index 80d611c..22cf631 100644
--- a/src/main.js
+++ b/src/main.js
@@ -23,4 +23,7 @@ export default new WtOmniWidget('#wt-omni-widget', {
     url: 'wss://dev.webitel.com/sip',
     id: 'dania-webchat',
   },
+  reCAPTCHA: {
+    sitekey: '',
+  },
 });
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 da8281f..afa708d 100644
--- a/src/modules/call/components/wt-omni-widget-call-start.vue
+++ b/src/modules/call/components/wt-omni-widget-call-start.vue
@@ -22,8 +22,9 @@
         icon="call"
         icon-size="sm"
         color="success"
-        @click="() => makeCall({ initWithMuted })"
+        @click="call"
       ></wt-icon-btn>
+      err: {{ err }}
     </call-actions-wrapper>
   </section>
 </template>
@@ -31,6 +32,7 @@
 <script>
 import getNamespacedState from '@webitel/ui-sdk/src/store/helpers/getNamespacedState';
 import { mapActions, mapState } from 'vuex';
+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';
 
@@ -48,6 +50,7 @@ export default {
   },
   data: () => ({
     initWithMuted: false,
+    err: null,
   }),
   computed: {
     ...mapState({
@@ -62,6 +65,16 @@ export default {
         return dispatch(`${this.namespace}/MAKE_CALL`, payload);
       },
     }),
+    async call() {
+      try {
+        await reCAPTCHify(() => {
+          this.makeCall({ initWithMuted: this.initWithMuted });
+        });
+      } catch (err) {
+        console.error(err);
+        this.err = err;
+      }
+    },
   },
 };
 </script>
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 0abccea..d537518 100644
--- a/src/modules/chat/components/wt-omni-widget-chat-wrapper.vue
+++ b/src/modules/chat/components/wt-omni-widget-chat-wrapper.vue
@@ -10,6 +10,7 @@ why there's d: contents; and this weird wrapper?
     <footer-wrapper>
       <chat-footer :namespace="namespace"></chat-footer>
     </footer-wrapper>
+    err: {{ err }}
   </div>
 </template>
 
@@ -25,6 +26,7 @@ import WidgetChannel from '../../../app/enums/WidgetChannel.enum';
 import MessageClient from '../../../app/websocket/MessageClient';
 import ChatContent from './wt-omni-widget-chat-content/wt-omni-widget-window-content.vue';
 import ChatFooter from './wt-omni-widget-chat-footer/wt-omni-widget-window-footer.vue';
+import reCAPTCHify from '../../reCAPTCHA-verification/scripts/reCAPTCHify';
 
 export default {
   name: 'wt-omni-widget-chat-wrapper',
@@ -40,9 +42,12 @@ export default {
       required: true,
     },
   },
+  data: () => ({
+    err: null,
+  }),
   computed: {
     ...mapState('chat', {
-      client: state => state.messageClient,
+      client: (state) => state.messageClient,
     }),
   },
   methods: {
@@ -89,15 +94,21 @@ export default {
     },
   },
 
-  created() {
+  async created() {
     if (this.isPreviewMode) {
       this.initPreviewMode();
     } else {
-      this.initSession();
-      window.addEventListener('beforeunload', async (e) => {
-        await this.closeSession();
-        delete e.returnValue; // page will always reload
-      });
+      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;
+      }
     }
   },
 };
diff --git a/src/modules/reCAPTCHA-verification/api/reCAPTCHA.js b/src/modules/reCAPTCHA-verification/api/reCAPTCHA.js
new file mode 100644
index 0000000..a0145e0
--- /dev/null
+++ b/src/modules/reCAPTCHA-verification/api/reCAPTCHA.js
@@ -0,0 +1,30 @@
+import instance from '../../../app/api/instance.axios';
+
+let sitekey = null;
+
+export const initializeReCAPTCHA = async (_sitekey) => {
+  sitekey = _sitekey;
+
+  const script = document.createElement('script');
+  script.src = `https://www.google.com/recaptcha/api.js?render=${sitekey}`;
+  script.async = true;
+  document.head.appendChild(script);
+};
+
+const executeReCAPTCHA = ({ action }) => window.grecaptcha.execute(sitekey, { action });
+
+const verifyReCAPTCHA = (token) => {
+  const url = 'https://dev.webitel.com/api/recaptcha'; // FIXME
+  // if throws error, then isn't verified
+  return instance.post(url, {
+    response: token,
+    version: '3',
+  });
+};
+
+const reCAPTCHA = {
+  executeReCAPTCHA,
+  verifyReCAPTCHA,
+};
+
+export default reCAPTCHA;
diff --git a/src/modules/reCAPTCHA-verification/scripts/reCAPTCHify.js b/src/modules/reCAPTCHA-verification/scripts/reCAPTCHify.js
new file mode 100644
index 0000000..b40b5b5
--- /dev/null
+++ b/src/modules/reCAPTCHA-verification/scripts/reCAPTCHify.js
@@ -0,0 +1,15 @@
+import reCAPTCHA from '../api/reCAPTCHA';
+
+const reCAPTCHify = async (callback, {
+  action = 'default_action',
+} = {}) => {
+  try {
+    const token = await reCAPTCHA.executeReCAPTCHA({ action });
+    const response = await reCAPTCHA.verifyReCAPTCHA(token);
+    return callback(response);
+  } catch (err) {
+    throw err || new Error('unknown reCAPTCHA error');
+  }
+};
+
+export default reCAPTCHify;

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 3/4] 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 = {

From 5a97d8a20e6561ba2c612af87461bd66d2513348 Mon Sep 17 00:00:00 2001
From: Daniil Lohvinov <nsblnr@gmail.com>
Date: Tue, 12 Mar 2024 15:52:32 +0200
Subject: [PATCH 4/4] fix: cleanup [WTEL-4251]

---
 .../components/wt-omni-widget-window/wt-omni-widget-window.vue | 3 ---
 1 file changed, 3 deletions(-)

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 cf914a9..3fecc16 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
@@ -26,9 +26,6 @@ export default {
     ChatWrapper,
     CallWrapper,
   },
-  data: () => ({
-    state: 'empty',
-  }),
   props: {
     channel: {
       type: String, // WidgetChannel.enum