effendy/qris_bank_jatim
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update komponen

Browse Source
This commit is contained in:
bagus-arie05
2025-10-17 15:12:20 +07:00
parent f3a5e8935e
commit fa2d439ea4
15 changed files with 747 additions and 307 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
stores/payment.ts
View File

@@ -1,21 +1,26 @@
// 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,
currentStep: 1, // 1: Menunggu Data, 2: Tampilkan QRIS, 3: Sukses, 4: Gagal
patientInfo: {
name: '',
amount: '',
expiry: '',
expiry: '', // Dibiarkan kosong, waktu kedaluwarsa dihitung dari qrData.created_at
},
qrData: {
qrvalue: null,
display_nobill: null,
display_name: null,
display_amount: null,
status: null, // Tambahkan status untuk tracking
ip: null, // Tambahkan IP untuk reference
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
},
}),
@@ -23,12 +28,12 @@ export const usePaymentStore = defineStore('payment', {
hasQrData: (state) => state.qrData && state.qrData.qrvalue,
safeQrValue: (state) => state.qrData?.qrvalue || 'https://www.google.com',
// Getter untuk cek apakah data siap untuk polling status
// Getter untuk cek apakah data siap
isReadyForStatusCheck: (state) => {
return state.qrData.display_nobill && state.qrData.display_name;
},
// Getter untuk informasi debug
// Getter untuk debug
debugInfo: (state) => ({
step: state.currentStep,
hasIdentifiers: !!(state.qrData.display_nobill && state.qrData.display_name),
@@ -46,12 +51,29 @@ export const usePaymentStore = defineStore('payment', {
},
setStep(step) {
console.log(`Setting step from ${this.currentStep} to ${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('Resetting payment store');
console.log('--- [STORE] Resetting payment store ---');
this.currentStep = 1;
this.patientInfo = {
name: '',
@@ -65,25 +87,26 @@ export const usePaymentStore = defineStore('payment', {
display_amount: null,
status: null,
ip: null,
created_at: null,
};
if (autoResetTimer) {
clearTimeout(autoResetTimer);
autoResetTimer = null;
}
},
updatePayment(apiResponse) {
console.log("=== UPDATE PAYMENT ===");
console.log("API Response:", 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");
console.error("Invalid API response structure or empty data array");
return;
}
const apiData = apiResponse.data[0];
console.log("API Data:", apiData);
// Simpan data lama untuk comparison
const oldQrData = { ...this.qrData };
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,
@@ -92,22 +115,43 @@ export const usePaymentStore = defineStore('payment', {
display_amount: apiData.display_amount || apiData.nominal || this.qrData.display_amount,
status: apiData.status || this.qrData.status,
ip: apiData.ip || this.qrData.ip,
// Spread untuk properti lain yang mungkin ada
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: apiData.display_name || this.patientInfo.name || 'Unknown',
amount: apiData.display_amount || apiData.nominal || this.patientInfo.amount || '0',
name: this.qrData.display_name || this.patientInfo.name || 'Unknown',
amount: this.qrData.display_amount || this.patientInfo.amount || '0',
expiry: this.patientInfo.expiry,
};
// Log changes
if (oldQrData.status !== this.qrData.status) {
console.log(`Status changed: ${oldQrData.status} -> ${this.qrData.status}`);
// --- 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("===================");