chore: enable close button in react-native widget (#1910)

app/javascript/widget/App.vue

@@ -13,7 +13,7 @@
 <script>
 import { mapGetters, mapActions } from 'vuex';
 import { setHeader } from 'widget/helpers/axios';
-import { IFrameHelper } from 'widget/helpers/utils';
+import { IFrameHelper, RNHelper } from 'widget/helpers/utils';
 
 import Router from './views/Router';
 import { getLocale } from './helpers/urlParamsHelper';
@@ -45,6 +45,9 @@ export default {
     isIFrame() {
       return IFrameHelper.isIFrame();
     },
+    isRNWebView() {
+      return RNHelper.isRNWebView();
+    },
   },
   mounted() {
     const { websiteToken, locale } = window.chatwootWebChannel;
@@ -59,15 +62,9 @@ export default {
       this.fetchAvailableAgents(websiteToken);
       this.setLocale(getLocale(window.location.search));
     }
-    // Pass cookie to react native widget
-    if (window.ReactNativeWebView) {
+    if (this.isRNWebView) {
       this.registerListeners();
-      window.ReactNativeWebView.postMessage(
-        JSON.stringify({
-          type: 'auth-token',
-          value: window.authToken,
-        })
-      );
+      this.sendRNWebViewLoadedEvent();
     }
     this.$store.dispatch('conversationAttributes/get');
     this.setWidgetColor(window.chatwootWebChannel);
@@ -196,6 +193,15 @@ export default {
         },
       });
     },
+    sendRNWebViewLoadedEvent() {
+      RNHelper.sendMessage({
+        event: 'loaded',
+        config: {
+          authToken: window.authToken,
+          channelConfig: window.chatwootWebChannel,
+        },
+      });
+    },
   },
 };
 </script>

app/javascript/widget/components/HeaderActions.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="isIframe" class="actions flex items-center">
+  <div v-if="showHeaderActions" class="actions flex items-center">
     <button
       v-if="showPopoutButton"
       class="button transparent compact new-window--button"
@@ -7,13 +7,18 @@
     >
       <span class="ion-android-open"></span>
     </button>
-    <button class="button transparent compact close-button">
+    <button
+      class="button transparent compact close-button"
+      :class="{
+        'rn-close-button': isRNWebView,
+      }"
+    >
       <span class="ion-android-close" @click="closeWindow"></span>
     </button>
   </div>
 </template>
 <script>
-import { IFrameHelper } from 'widget/helpers/utils';
+import { IFrameHelper, RNHelper } from 'widget/helpers/utils';
 import { buildPopoutURL } from '../helpers/urlParamsHelper';
 
 export default {
@@ -28,6 +33,12 @@ export default {
     isIframe() {
       return IFrameHelper.isIFrame();
     },
+    isRNWebView() {
+      return RNHelper.isRNWebView();
+    },
+    showHeaderActions() {
+      return this.isIframe || this.isRNWebView;
+    },
   },
   methods: {
     popoutWindow() {
@@ -56,6 +67,8 @@ export default {
         IFrameHelper.sendMessage({
           event: 'toggleBubble',
         });
+      } else if (RNHelper.isRNWebView) {
+        RNHelper.sendMessage({ type: 'close-widget' });
       }
     },
   },
@@ -81,5 +94,8 @@ export default {
   .close-button {
     display: none;
   }
+  .rn-close-button {
+    display: block !important;
+  }
 }
 </style>

app/javascript/widget/helpers/utils.js

@@ -26,3 +26,11 @@ export const IFrameHelper = {
   },
   getMessage: e => JSON.parse(e.data.replace(WOOT_PREFIX, '')),
 };
+export const RNHelper = {
+  isRNWebView: () => window.ReactNativeWebView,
+  sendMessage: msg => {
+    window.ReactNativeWebView.postMessage(
+      `chatwoot-widget:${JSON.stringify({ ...msg })}`
+    );
+  },
+};