update async dan interface

stores/payment.ts

@@ -1,31 +1,46 @@
-import { defineStore } from 'pinia'
+// src/stores/payment.js
+import { defineStore } from 'pinia';
 
 export const usePaymentStore = defineStore('payment', {
   state: () => ({
-    currentStep: 1, // 1: info, 2: qr, 3: success
+    currentStep: 1,
     patientInfo: {
-      name: 'ALDY GUSTINARA',
-      amount: 'Rp 1.520.000',
-      expiry: '2025-08-24 12:30:00'
+      name: '',
+      amount: '',
+      expiry: '', // Tidak ada di API, bisa dihapus atau diisi null
     },
-    qrCode: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgZmlsbD0iIzAwMCIvPjxyZWN0IHg9IjEwIiB5PSIxMCIgd2lkdGg9IjE4MCIgaGVpZ2h0PSIxODAiIGZpbGw9IiNmZmYiLz48L3N2Zz4='
+    qrData: null, // Properti baru untuk menyimpan data QRIS dari API
   }),
-  
   actions: {
     nextStep() {
-      if (this.currentStep < 3) {
-        this.currentStep++
-      }
+      this.currentStep++;
     },
-    
     prevStep() {
-      if (this.currentStep > 1) {
-        this.currentStep--
-      }
+      this.currentStep--;
     },
-    
     reset() {
-      this.currentStep = 1
-    }
-  }
-})
+      this.currentStep = 1;
+      this.patientInfo = {
+        name: '',
+        amount: '',
+        expiry: '',
+      };
+      this.qrData = null; // Reset data QR
+    },
+    // Action baru untuk menerima dan memproses data dari backend
+    updatePayment(apiResponse) {
+      // Ambil objek data pertama dari array 'data'
+      const apiData = apiResponse.data[0];
+
+      // Perbarui state dengan data yang sesuai
+      this.qrData = apiData;
+      this.patientInfo = {
+        name: apiData.display_name,
+        amount: apiData.display_amount,
+      };
+
+      // Ganti step secara otomatis
+      this.currentStep = 2;
+    },
+  },
+});

stores/payment1.ts

@@ -0,0 +1,37 @@
+// src/stores/payment.js
+import { defineStore } from 'pinia';
+
+export const usePaymentStore = defineStore('payment', {
+  state: () => ({
+    currentStep: 1,
+    patientInfo: {
+      name: '',
+      amount: '',
+      expiry: '',
+    },
+    paymentData: null, // Tambahkan state ini untuk menyimpan data dari backend
+  }),
+  actions: {
+    nextStep() {
+      this.currentStep++;
+    },
+    prevStep() {
+      this.currentStep--;
+    },
+    reset() {
+      this.currentStep = 1;
+      this.patientInfo = {};
+      this.paymentData = null; // Reset data pembayaran
+    },
+    // Tambahkan action baru untuk menerima data dari WebSocket
+    updatePayment(data: { patientName: any; amount: any; expiryDate: any; } | null) {
+      this.paymentData = data;
+      this.patientInfo = {
+        name: data.patientName,
+        amount: data.amount,
+        expiry: data.expiryDate,
+      };
+      this.currentStep = 2; // Pindah ke step 2 secara otomatis
+    },
+  },
+});