refactor(ui): migrate BillingIcon to script setup syntax

Author: luizhf42

ui/src/components/Billing/BillingIcon.vue

@@ -8,53 +8,37 @@
 
   <v-icon
     v-else
-    :icon="['fa:fab', icon()].join(' ')"
+    :icon="['fa:fab', getIcon()].join(' ')"
     :style="{ fontSize: size }"
     data-test="type-icon"
   />
 
 </template>
 
-<script lang="ts">
-/* eslint-disable */
-import { defineComponent, ref } from "vue";
+<script setup lang="ts">
+import { ref } from "vue";
 
-export default defineComponent({
-  props: {
-    iconName: {
-      type: String,
-      required: true,
-    },
-  },
-  setup(props) {
-    const cardIcon = ref({
-      amex: "fa-cc-amex",
-      dinersClub: "fa-cc-diners-club",
-      discover: "fa-cc-discover",
-      jcb: "fa-cc-jcb",
-      mastercard: "fa-cc-mastercard",
-      visa: "fa-cc-visa",
-    });
-
-    const size = ref("1.5rem");
-
-    const isDefaultIcon = () =>
-      cardIcon.value[convertIconName()] === undefined;
-    const icon = () =>
-      cardIcon.value[convertIconName()] || "credit-card";
-    const convertIconName = () => {
-      props.iconName === "diners-club" ? "dinersClub" : props.iconName
-
-      return props.iconName;
-    };
-
-    return {
-      cardIcon,
-      size,
-      isDefaultIcon,
-      icon,
-      convertIconName,
-    };
+const { iconName } = defineProps({
+  iconName: {
+    type: String,
+    required: true,
   },
 });
+
+const cardIcon = ref({
+  amex: "fa-cc-amex",
+  dinersClub: "fa-cc-diners-club",
+  discover: "fa-cc-discover",
+  jcb: "fa-cc-jcb",
+  mastercard: "fa-cc-mastercard",
+  visa: "fa-cc-visa",
+});
+
+const size = ref("1.5rem");
+
+const getFormattedIconName = () => iconName === "diners-club" ? "dinersClub" : iconName;
+
+const isDefaultIcon = () => cardIcon.value[getFormattedIconName()] === undefined;
+
+const getIcon = () => cardIcon.value[getFormattedIconName()] || "credit-card";
 </script>