fix: apply ESLint rule vue/component-tags-order

app/javascript/dashboard/modules/widget-preview/components/Widget.vue

@@ -1,52 +1,3 @@
-<template>
-  <div class="widget-preview-container">
-    <div v-if="isWidgetVisible" class="screen-selector">
-      <input-radio-group
-        name="widget-screen"
-        :items="widgetScreens"
-        :action="handleScreenChange"
-      />
-    </div>
-    <div v-if="isWidgetVisible" class="widget-wrapper">
-      <WidgetHead :config="getWidgetHeadConfig" />
-      <div>
-        <WidgetBody :config="getWidgetBodyConfig" />
-        <WidgetFooter :config="getWidgetFooterConfig" />
-        <div class="branding">
-          <a class="branding-link">
-            <img class="branding-image" :src="globalConfig.logoThumbnail" />
-            <span>
-              {{
-                useInstallationName(
-                  $t('INBOX_MGMT.WIDGET_BUILDER.BRANDING_TEXT'),
-                  globalConfig.installationName
-                )
-              }}
-            </span>
-          </a>
-        </div>
-      </div>
-    </div>
-    <div class="widget-bubble" :style="getBubblePositionStyle">
-      <button
-        class="bubble"
-        :class="getBubbleTypeClass"
-        :style="{ background: color }"
-        @click="toggleWidget"
-      >
-        <img
-          v-if="!isWidgetVisible"
-          src="~dashboard/assets/images/bubble-logo.svg"
-          alt=""
-        />
-        <div>
-          {{ getWidgetBubbleLauncherTitle }}
-        </div>
-      </button>
-    </div>
-  </div>
-</template>
-
 <script>
 import WidgetHead from './WidgetHead.vue';
 import WidgetBody from './WidgetBody.vue';
@@ -198,6 +149,55 @@ export default {
 };
 </script>
 
+<template>
+  <div class="widget-preview-container">
+    <div v-if="isWidgetVisible" class="screen-selector">
+      <input-radio-group
+        name="widget-screen"
+        :items="widgetScreens"
+        :action="handleScreenChange"
+      />
+    </div>
+    <div v-if="isWidgetVisible" class="widget-wrapper">
+      <WidgetHead :config="getWidgetHeadConfig" />
+      <div>
+        <WidgetBody :config="getWidgetBodyConfig" />
+        <WidgetFooter :config="getWidgetFooterConfig" />
+        <div class="branding">
+          <a class="branding-link">
+            <img class="branding-image" :src="globalConfig.logoThumbnail" />
+            <span>
+              {{
+                useInstallationName(
+                  $t('INBOX_MGMT.WIDGET_BUILDER.BRANDING_TEXT'),
+                  globalConfig.installationName
+                )
+              }}
+            </span>
+          </a>
+        </div>
+      </div>
+    </div>
+    <div class="widget-bubble" :style="getBubblePositionStyle">
+      <button
+        class="bubble"
+        :class="getBubbleTypeClass"
+        :style="{ background: color }"
+        @click="toggleWidget"
+      >
+        <img
+          v-if="!isWidgetVisible"
+          src="~dashboard/assets/images/bubble-logo.svg"
+          alt=""
+        />
+        <div>
+          {{ getWidgetBubbleLauncherTitle }}
+        </div>
+      </button>
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .screen-selector {
   display: flex;

app/javascript/dashboard/modules/widget-preview/components/WidgetBody.vue

@@ -1,3 +1,42 @@
+<script>
+import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
+export default {
+  name: 'WidgetBody',
+  components: {
+    Thumbnail,
+  },
+  props: {
+    config: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  computed: {
+    getStatusText() {
+      return this.config.isOnline
+        ? this.$t('INBOX_MGMT.WIDGET_BUILDER.BODY.TEAM_AVAILABILITY.ONLINE')
+        : this.$t('INBOX_MGMT.WIDGET_BUILDER.BODY.TEAM_AVAILABILITY.OFFLINE');
+    },
+    getWidgetBodyClass() {
+      return {
+        'with-chat-view': !this.config.isDefaultScreen,
+        'with-heading-or-title':
+          this.config.isDefaultScreen &&
+          (this.config.welcomeHeading || this.config.welcomeTagline),
+        'with-heading-or-title-without-logo':
+          this.config.isDefaultScreen &&
+          (this.config.welcomeHeading || this.config.welcomeTagline) &&
+          !this.config.logo,
+        'without-heading-and-title':
+          this.config.isDefaultScreen &&
+          !this.config.welcomeHeading &&
+          !this.config.welcomeTagline,
+      };
+    },
+  },
+};
+</script>
+
 <template>
   <div class="widget-body-container">
     <div v-if="config.isDefaultScreen" class="availability-content">
@@ -46,45 +85,6 @@
   </div>
 </template>
 
-<script>
-import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
-export default {
-  name: 'WidgetBody',
-  components: {
-    Thumbnail,
-  },
-  props: {
-    config: {
-      type: Object,
-      default: () => {},
-    },
-  },
-  computed: {
-    getStatusText() {
-      return this.config.isOnline
-        ? this.$t('INBOX_MGMT.WIDGET_BUILDER.BODY.TEAM_AVAILABILITY.ONLINE')
-        : this.$t('INBOX_MGMT.WIDGET_BUILDER.BODY.TEAM_AVAILABILITY.OFFLINE');
-    },
-    getWidgetBodyClass() {
-      return {
-        'with-chat-view': !this.config.isDefaultScreen,
-        'with-heading-or-title':
-          this.config.isDefaultScreen &&
-          (this.config.welcomeHeading || this.config.welcomeTagline),
-        'with-heading-or-title-without-logo':
-          this.config.isDefaultScreen &&
-          (this.config.welcomeHeading || this.config.welcomeTagline) &&
-          !this.config.logo,
-        'without-heading-and-title':
-          this.config.isDefaultScreen &&
-          !this.config.welcomeHeading &&
-          !this.config.welcomeTagline,
-      };
-    },
-  },
-};
-</script>
-
 <style scoped lang="scss">
 .widget-body-container {
   .availability-content {

app/javascript/dashboard/modules/widget-preview/components/WidgetFooter.vue

@@ -1,3 +1,21 @@
+<script>
+import CustomButton from 'dashboard/components/buttons/Button.vue';
+import ResizableTextArea from 'shared/components/ResizableTextArea.vue';
+export default {
+  name: 'WidgetFooter',
+  components: {
+    CustomButton,
+    ResizableTextArea,
+  },
+  props: {
+    config: {
+      type: Object,
+      default: () => {},
+    },
+  },
+};
+</script>
+
 <template>
   <div class="footer-wrap">
     <custom-button
@@ -26,24 +44,6 @@
   </div>
 </template>
 
-<script>
-import CustomButton from 'dashboard/components/buttons/Button.vue';
-import ResizableTextArea from 'shared/components/ResizableTextArea.vue';
-export default {
-  name: 'WidgetFooter',
-  components: {
-    CustomButton,
-    ResizableTextArea,
-  },
-  props: {
-    config: {
-      type: Object,
-      default: () => {},
-    },
-  },
-};
-</script>
-
 <style scoped lang="scss">
 @import '~dashboard/assets/scss/variables.scss';
 .footer-wrap {

app/javascript/dashboard/modules/widget-preview/components/WidgetHead.vue

@@ -1,3 +1,25 @@
+<script>
+export default {
+  props: {
+    config: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  computed: {
+    isDefaultScreen() {
+      return (
+        this.config.isDefaultScreen &&
+        ((this.config.welcomeHeading &&
+          this.config.welcomeHeading.length !== 0) ||
+          (this.config.welcomeTagLine &&
+            this.config.welcomeTagline.length !== 0))
+      );
+    },
+  },
+};
+</script>
+
 <template>
   <div class="header-wrapper">
     <div class="header-branding">
@@ -24,28 +46,6 @@
   </div>
 </template>
 
-<script>
-export default {
-  props: {
-    config: {
-      type: Object,
-      default: () => {},
-    },
-  },
-  computed: {
-    isDefaultScreen() {
-      return (
-        this.config.isDefaultScreen &&
-        ((this.config.welcomeHeading &&
-          this.config.welcomeHeading.length !== 0) ||
-          (this.config.welcomeTagLine &&
-            this.config.welcomeTagline.length !== 0))
-      );
-    },
-  },
-};
-</script>
-
 <style lang="scss" scoped>
 .header-wrapper {
   background-color: var(--white);