qris-bank-jatim/stores/payment.ts

// src/stores/payment.js
import { defineStore } from 'pinia';

// Variabel di luar store untuk menyimpan timer, agar persistensi di luar state Pinia
let autoResetTimer = null; 

export const usePaymentStore = defineStore('payment', {
  state: () => ({
    currentStep: 1, // 1: Menunggu Data, 2: Tampilkan QRIS, 3: Sukses, 4: Gagal
    patientInfo: {
      name: '',
      amount: '',
      expiry: '', // Dibiarkan kosong, waktu kedaluwarsa dihitung dari qrData.created_at
    },
    qrData: {
      qrvalue: null,
      display_nobill: null,
      display_name: null,
      display_amount: null,
      status: null, // Status pembayaran: "1" (Pending), "2" (Sukses), "0" (Gagal/Expired)
      ip: null,
      created_at: null, // Tambahkan ini agar properti ada secara eksplisit
      // ... properti lain dari API akan ditambahkan melalui spread operator
    },
  }),
  
  getters: {
    hasQrData: (state) => state.qrData && state.qrData.qrvalue,
    safeQrValue: (state) => state.qrData?.qrvalue || 'https://www.google.com',
    
    // Getter untuk cek apakah data siap
    isReadyForStatusCheck: (state) => {
      return state.qrData.display_nobill && state.qrData.display_name;
    },
    
    // Getter untuk debug
    debugInfo: (state) => ({
      step: state.currentStep,
      hasIdentifiers: !!(state.qrData.display_nobill && state.qrData.display_name),
      qrData: state.qrData,
      patientInfo: state.patientInfo,
    })
  },
  
  actions: {
    nextStep() {
      this.currentStep++;
    },
    prevStep() {
      this.currentStep--;
    },
    
    setStep(step) {
      console.log(`[STORE] Setting step from ${this.currentStep} to ${step}`);
      this.currentStep = step;
    },

    /**
     * @description Memulai timer untuk reset state kembali ke Step 1 (Home) setelah 20 detik
     */
    startAutoReset() {
       
        if (autoResetTimer) {
            clearTimeout(autoResetTimer);
        }
        console.log('🏠 [STORE] Starting auto return timer (20s) for reset.');
        
        
        autoResetTimer = setTimeout(() => {
            console.log('🏠 [STORE] Auto return to home triggered');
            this.reset();
        }, 20000); 
    },
    
    reset() {
      console.log('--- [STORE] Resetting payment store ---');
      this.currentStep = 1;
      this.patientInfo = {
        name: '',
        amount: '',
        expiry: '',
      };
      this.qrData = {
        qrvalue: null,
        display_nobill: null,
        display_name: null,
        display_amount: null,
        status: null,
        ip: null,
        created_at: null,
      };
        if (autoResetTimer) {
            clearTimeout(autoResetTimer);
            autoResetTimer = null;
        }
    },
    
    updatePayment(apiResponse) {
      console.log("=== [STORE] UPDATE PAYMENT ===");
      
      // Validasi response
      if (!apiResponse?.data || !Array.isArray(apiResponse.data) || apiResponse.data.length === 0) {
        console.error("Invalid API response structure or empty data array");
        return;
      }
      
      const apiData = apiResponse.data[0];
      const oldStatus = this.qrData.status; // Simpan status lama
      
      // Update qrData dengan semua properti dari API
      this.qrData = {
        qrvalue: apiData.qrvalue || apiData.qr_code || this.qrData.qrvalue,
        display_nobill: apiData.display_nobill || this.qrData.display_nobill,
        display_name: apiData.display_name || this.qrData.display_name,
        display_amount: apiData.display_amount || apiData.nominal || this.qrData.display_amount,
        status: apiData.status || this.qrData.status,
        ip: apiData.ip || this.qrData.ip,
        created_at: apiData.created_at || this.qrData.created_at, // Ambil 'created_at'
        // Spread untuk properti lain yang mungkin ada (misal: transaction_id, reason)
        ...apiData
      };
      
      // Update patientInfo
      this.patientInfo = {
        name: this.qrData.display_name || this.patientInfo.name || 'Unknown',
        amount: this.qrData.display_amount || this.patientInfo.amount || '0',
        expiry: this.patientInfo.expiry,
      };

      // --- LOGIKA TRANSISI STATUS OTOMATIS (SUCCESS/FAIL) ---
      const newStatus = this.qrData.status;

      // Log perubahan status (jika ada)
      if (oldStatus !== newStatus) {
        console.log(`[STORE] Status changed: ${oldStatus} -> ${newStatus}`);
      }

      // Proses transisi hanya jika kita berada di Step 2 (Menunggu Pembayaran)
      // DAN status yang diterima berbeda dari status sebelumnya
      if (this.currentStep === 2 && oldStatus !== newStatus) {
          if (newStatus === "2") {
              // Status Sukses
              console.log('🎉 [STORE] Status 2 (SUKSES) diterima. Pindah ke Step 3.');
              this.currentStep = 3;
              this.startAutoReset(); 
          } else if (newStatus === "0") {
              // Status Gagal
              console.log('❌ [STORE] Status 0 (GAGAL) diterima. Pindah ke Step 4.');
              this.currentStep = 4;
              this.startAutoReset(); 
          }
      }
      // ------------------------------------------------------

      console.log("Updated qrData:", this.qrData);
      console.log("Updated patientInfo:", this.patientInfo);
      console.log("===================");
    },
    
    // Method untuk debug
    debugCurrentState() {
      console.log("=== PAYMENT STORE DEBUG ===");
      console.log("Current Step:", this.currentStep);
      console.log("Patient Info:", this.patientInfo);
      console.log("QR Data:", this.qrData);
      console.log("Has QR Data:", this.hasQrData);
      console.log("Ready for Status Check:", this.isReadyForStatusCheck);
      console.log("Safe QR Value:", this.safeQrValue);
      console.log("==========================");
    },
    
    // Method untuk validasi data
    validateData() {
      const issues = [];
      
      if (!this.qrData.display_nobill) {
        issues.push('display_nobill missing');
      }
      
      if (!this.qrData.display_name) {
        issues.push('display_name missing');
      }
      
      if (!this.qrData.qrvalue && !this.qrData.qr_code) {
        issues.push('QR code missing');
      }
      
      if (issues.length > 0) {
        console.warn('Data validation issues:', issues);
        return false;
      }
      
      return true;
    }
  },
});