update flow & screen adjust

stores/payment.ts

@@ -7,10 +7,23 @@ export const usePaymentStore = defineStore('payment', {
     patientInfo: {
       name: '',
       amount: '',
-      expiry: '', // Tidak ada di API, bisa dihapus atau diisi null
+      expiry: '',
+    },
+    // Berikan default object instead of null
+    qrData: {
+      qrvalue: null,
+      display_nobill: null,
+      display_name: null,
+      display_amount: null
     },
-    qrData: null, // Properti baru untuk menyimpan data QRIS dari API
   }),
+  
+  getters: {
+    // Tambahkan getter untuk safe access
+    hasQrData: (state) => state.qrData && state.qrData.qrvalue,
+    safeQrValue: (state) => state.qrData?.qrvalue || 'https://www.google.com'
+  },
+  
   actions: {
     nextStep() {
       this.currentStep++;
@@ -25,21 +38,46 @@ export const usePaymentStore = defineStore('payment', {
         amount: '',
         expiry: '',
       };
-      this.qrData = null; // Reset data QR
+      // Reset ke default object, bukan null
+      this.qrData = {
+        qrvalue: null,
+        display_nobill: null,
+        display_name: null,
+        display_amount: null
+      };
     },
-    // Action baru untuk menerima dan memproses data dari backend
     updatePayment(apiResponse) {
-      // Ambil objek data pertama dari array 'data'
+      console.log("API Response:", apiResponse);
+      
+      // Validasi response
+      if (!apiResponse?.data || !Array.isArray(apiResponse.data) || apiResponse.data.length === 0) {
+        console.error("Invalid API response structure");
+        return;
+      }
+      
       const apiData = apiResponse.data[0];
+      console.log("API Data:", apiData);
 
-      // Perbarui state dengan data yang sesuai
-      this.qrData = apiData;
+      // Update qrData dengan validasi
+      this.qrData = {
+        qrvalue: apiData.qrvalue || null,
+        display_nobill: apiData.display_nobill || null,
+        display_name: apiData.display_name || null,
+        display_amount: apiData.display_amount || null,
+        ...apiData // spread untuk properti lain yang mungkin ada
+      };
+      
+      // Update patientInfo
       this.patientInfo = {
-        name: apiData.display_name,
-        amount: apiData.display_amount,
+        name: apiData.display_name || 'Unknown',
+        amount: apiData.display_amount || '0',
+        expiry: this.patientInfo.expiry, // keep existing value
       };
 
-      // Ganti step secara otomatis
+      console.log("Updated qrData:", this.qrData);
+      console.log("Updated patientInfo:", this.patientInfo);
+
+      // Ganti step
       this.currentStep = 2;
     },
   },