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

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>