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

app/javascript/survey/components/Banner.vue

@@ -1,16 +1,3 @@
-<template>
-  <div class="flex items-center">
-    <i
-      v-if="showSuccess"
-      class="ion-checkmark-circled text-3xl text-green-500 mr-1"
-    />
-    <i v-if="showError" class="ion-android-alert text-3xl text-red-600 mr-1" />
-    <label class="text-base font-medium text-black-800 mt-4 mb-4">
-      {{ message }}
-    </label>
-  </div>
-</template>
-
 <script>
 export default {
   props: {
@@ -29,3 +16,16 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="flex items-center">
+    <i
+      v-if="showSuccess"
+      class="ion-checkmark-circled text-3xl text-green-500 mr-1"
+    />
+    <i v-if="showError" class="ion-android-alert text-3xl text-red-600 mr-1" />
+    <label class="text-base font-medium text-black-800 mt-4 mb-4">
+      {{ message }}
+    </label>
+  </div>
+</template>

app/javascript/survey/components/Feedback.vue

@@ -1,22 +1,3 @@
-<template>
-  <div class="mt-6">
-    <label class="text-base font-medium text-black-800">
-      {{ $t('SURVEY.FEEDBACK.LABEL') }}
-    </label>
-    <text-area
-      v-model="feedback"
-      class="my-5"
-      :placeholder="$t('SURVEY.FEEDBACK.PLACEHOLDER')"
-    />
-    <div class="flex items-center font-medium float-right">
-      <custom-button @click="onClick">
-        <spinner v-if="feedback" class="p-0" />
-        {{ $t('SURVEY.FEEDBACK.BUTTON_TEXT') }}
-      </custom-button>
-    </div>
-  </div>
-</template>
-
 <script>
 import CustomButton from 'shared/components/Button.vue';
 import TextArea from 'shared/components/TextArea.vue';
@@ -52,3 +33,22 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="mt-6">
+    <label class="text-base font-medium text-black-800">
+      {{ $t('SURVEY.FEEDBACK.LABEL') }}
+    </label>
+    <text-area
+      v-model="feedback"
+      class="my-5"
+      :placeholder="$t('SURVEY.FEEDBACK.PLACEHOLDER')"
+    />
+    <div class="flex items-center font-medium float-right">
+      <custom-button @click="onClick">
+        <spinner v-if="feedback" class="p-0" />
+        {{ $t('SURVEY.FEEDBACK.BUTTON_TEXT') }}
+      </custom-button>
+    </div>
+  </div>
+</template>

app/javascript/survey/components/Rating.vue

@@ -1,18 +1,3 @@
-<template>
-  <div class="customer-satisfcation mb-2">
-    <div class="ratings flex py-5 px-0">
-      <button
-        v-for="rating in ratings"
-        :key="rating.key"
-        :class="buttonClass(rating)"
-        @click="onClick(rating)"
-      >
-        {{ rating.emoji }}
-      </button>
-    </div>
-  </div>
-</template>
-
 <script>
 import { CSAT_RATINGS } from 'shared/constants/messages';
 
@@ -45,6 +30,21 @@ export default {
 };
 </script>
 
+<template>
+  <div class="customer-satisfcation mb-2">
+    <div class="ratings flex py-5 px-0">
+      <button
+        v-for="rating in ratings"
+        :key="rating.key"
+        :class="buttonClass(rating)"
+        @click="onClick(rating)"
+      >
+        {{ rating.emoji }}
+      </button>
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .emoji-button {
   filter: grayscale(100%);