update flow & screen adjust

pages/index.vue

@@ -23,10 +23,10 @@
 import { usePaymentStore } from '~/stores/payment';
 import Home from '~/components/Home.vue';
 import QRISPayment from '~/components/QRISPayment.vue';
-import Success from '~/components/Success.vue';
+import Success from '~/components/PembayaranSukses.vue';
 
 const paymentStore = usePaymentStore();
-const apiURL = 'http://10.10.150.188:8084/api/v1/qris';
+const apiURL = 'http://10.10.150.37:8084/api/v1/qris';
 
 const paymentSteps = {
   1: Home,
@@ -38,34 +38,29 @@ const activeComponent = computed(() => {
   return paymentSteps[paymentStore.currentStep] || Home;
 });
 
-// useFetch untuk pengambilan data dari API
 const { data: apiData, refresh } = await useFetch(apiURL, {
   server: false,
+  immediate: false,
 });
 
 watch(apiData, (newData) => {
   if (newData && newData.data && newData.data.length > 0) {
-    const loketIP = '10.10.150.106'; 
-    const relevantData = newData.data.find(item => item.ip === loketIP);
-
+    const relevantData = newData.data[0];
     if (relevantData) {
-      paymentStore.updatePayment(newData);
-      // Data ditemukan, hentikan polling
+      paymentStore.updatePayment({ data: [relevantData] });
       clearInterval(pollingInterval);
-      console.log('Polling stopped. Data received via useFetch.');
+      console.log('Polling stopped. Data received from API.');
     }
   }
 });
 
 let pollingInterval = null;
 
-// refresh setiap 5 detik untuk mengecek data
 onMounted(() => {
   if (paymentStore.currentStep === 1) {
-    refresh();
     pollingInterval = setInterval(() => {
       refresh();
-    }, 5000);
+    }, 500000);
   }
 });
 
@@ -78,7 +73,6 @@ onUnmounted(() => {
 
 watch(() => paymentStore.currentStep, (newStep, oldStep) => {
   if (newStep === 1 && oldStep !== 1) {
-    refresh();
     pollingInterval = setInterval(() => {
       refresh();
     }, 5000);