update flow final

2025-09-17 15:40:54 +07:00
parent 4e30edeaf8
commit 3ef6f38f2e
8 changed files with 440 additions and 187 deletions
@@ -0,0 +1,98 @@
+<template>
+  <div class="setup-container">
+    <v-card class="setup-card" elevation="4">
+      <v-card-title class="text-h5 text-center font-weight-bold">
+        Setup Loket Pembayaran
+      </v-card-title>
+      <v-card-text>
+        <div v-if="currentIp" class="mb-4 text-center">
+          <p class="text-subtitle-1 text-grey-darken-1">IP Loket Saat Ini:</p>
+          <p class="text-h5 font-weight-bold">{{ currentIp }}</p>
+          <v-btn
+            color="red"
+            variant="text"
+            size="small"
+            class="mt-2"
+            @click="clearIp"
+          >
+            Hapus IP
+          </v-btn>
+        </div>
+
+        <v-text-field
+          v-model="loketIp"
+          label="Masukkan IP Address Baru"
+          variant="outlined"
+          :rules="[rules.required, rules.ipAddress]"
+          hide-details="auto"
+          class="mt-4"
+        ></v-text-field>
+      </v-card-text>
+      <v-card-actions class="justify-center">
+        <v-btn
+          color="primary"
+          @click="saveIpAddress"
+          :disabled="!isValidIp"
+          variant="flat"
+        >
+          Simpan dan Lanjutkan
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue';
+import { useRouter } from 'vue-router';
+
+const loketIp = ref('');
+const currentIp = ref(null);
+const router = useRouter();
+
+const rules = {
+  required: value => !!value || 'IP Address wajib diisi.',
+  ipAddress: value => {
+    const pattern = /^(?:[0-9]{1,3}\.){3}[0-9]{1,3}$/;
+    return pattern.test(value) || 'Format IP Address tidak valid.';
+  }
+};
+
+const isValidIp = computed(() => {
+  return loketIp.value && rules.ipAddress(loketIp.value) === true;
+});
+
+const saveIpAddress = () => {
+  if (isValidIp.value) {
+    localStorage.setItem('loketIp', loketIp.value);
+    console.log('IP Address disimpan:', loketIp.value);
+    router.push('/');
+  }
+};
+
+const clearIp = () => {
+  localStorage.removeItem('loketIp');
+  currentIp.value = null;
+  loketIp.value = '';
+};
+
+onMounted(() => {
+  currentIp.value = localStorage.getItem('loketIp');
+});
+</script>
+
+<style scoped>
+.setup-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  background: linear-gradient(135deg, #ffd7b5 20%, #ff9248 100%);
+}
+.setup-card {
+  max-width: 400px;
+  width: 100%;
+  padding: 20px;
+  border-radius: 12px;
+}
+</style>
@@ -11,7 +11,11 @@
              'payment-centered': paymentStore.currentStep !== 1,
            }"
          >
-            <component :is="activeComponent" />
+            <component :is="activeComponent" v-if="hasIpAddress" />
+            <div v-else class="text-center pa-10">
+              <v-progress-circular indeterminate color="primary"></v-progress-circular>
+              <p class="mt-4">Memeriksa konfigurasi...</p>
+            </div>
          </v-card>
        </v-col>
      </v-row>
@@ -24,83 +28,180 @@ import { usePaymentStore } from '~/stores/payment';
 import Home from '~/components/Home.vue';
 import QRISPayment from '~/components/QRISPayment.vue';
 import Success from '~/components/PembayaranSukses.vue';
+import Gagal from '~/components/PembayaranGagal.vue';
+import { onMounted, onUnmounted, ref, computed, watch } from 'vue';

 const paymentStore = usePaymentStore();
-const apiURL = 'http://10.10.150.37:8084/api/v1/qris';
+const router = useRouter();
+const localIpAddress = ref(null);
+const pollingInterval = ref(null);
+
+const hasIpAddress = computed(() => !!localIpAddress.value);
+const apiURL = 'http://10.10.150.68:8084/api/v1/qris/allstatus';

 const paymentSteps = {
  1: Home,
  2: QRISPayment,
  3: Success,
+  4: Gagal,
 };

 const activeComponent = computed(() => {
  return paymentSteps[paymentStore.currentStep] || Home;
 });

-const { data: apiData, refresh } = await useFetch(apiURL, {
-  server: false,
-  immediate: false,
-});
+// Watch untuk debugging perubahan step
+watch(() => paymentStore.currentStep, (newStep, oldStep) => {
+  console.log(`Step berubah dari ${oldStep} ke ${newStep}`);
+}, { immediate: true });

-watch(apiData, (newData) => {
-  if (newData && newData.data && newData.data.length > 0) {
-    const relevantData = newData.data[0];
-    if (relevantData) {
-      paymentStore.updatePayment({ data: [relevantData] });
-      clearInterval(pollingInterval);
-      console.log('Polling stopped. Data received from API.');
-    }
+const startPolling = () => {
+  if (pollingInterval.value) {
+    clearInterval(pollingInterval.value);
+    console.log('🛑 Stopping previous polling');
  }
-});

-let pollingInterval = null;
+  pollingInterval.value = setInterval(async () => {
+    try {
+      console.log(`🔄 POLLING - Step: ${paymentStore.currentStep}`);
+      const response = await $fetch(apiURL);
+      
+      if (response?.data?.length > 0) {
+        
+        if (paymentStore.currentStep === 1) {
+          // Step 1: Find data by IP address (original logic)
+          console.log('🔍 Step 1: Looking for IP:', localIpAddress.value);
+          const relevantData = response.data.find(item => item.ip === localIpAddress.value);
+          
+          if (relevantData) {
+            console.log('✅ Data found for IP:', relevantData);
+            paymentStore.updatePayment({ data: [relevantData] });
+            paymentStore.currentStep = 2;
+          } else {
+            console.log('⏳ No data found for IP:', localIpAddress.value);
+          }
+        } 
+        
+        else if (paymentStore.currentStep === 2) {
+          // Step 2: Monitor payment status for THE SAME PATIENT
+          console.log('🔍 Step 2: Monitoring payment status...');
+          
+          // Get patient identifiers from store (data yang sudah di-load di step 1)
+          const currentPatientBill = paymentStore.qrData.display_nobill;
+          const currentPatientName = paymentStore.qrData.display_name;
+          
+          console.log('👤 Current patient:', {
+            name: currentPatientName,
+            bill: currentPatientBill
+          });
+          
+          if (!currentPatientBill || !currentPatientName) {
+            console.warn('⚠️ Patient data incomplete in store');
+            return;
+          }
+          
+          // Find ALL records for this same patient (same name + bill)
+          const samePatientRecords = response.data.filter(item => {
+            const sameBill = item.display_nobill === currentPatientBill;
+            const sameName = item.display_name === currentPatientName;
+            
+            console.log(`🔄 Checking record: ${item.display_name} (${item.display_nobill}) status=${item.status}`);
+            console.log(`   → Same patient? ${sameBill && sameName}`);
+            
+            return sameBill && sameName;
+          });
+          
+          console.log(`📊 Found ${samePatientRecords.length} records for same patient:`, 
+            samePatientRecords.map(r => `status: ${r.status}`));
+          
+          // Now look for final status (success or fail) among same patient records
+          const successRecord = samePatientRecords.find(record => record.status === "2");
+          const failRecord = samePatientRecords.find(record => record.status === "0");
+          
+          if (successRecord) {
+            console.log('🎉 SUCCESS STATUS FOUND!', successRecord);
+            paymentStore.updatePayment({ data: [successRecord] });
+            paymentStore.currentStep = 3;
+            clearInterval(pollingInterval.value);
+            
+            // Auto return to home after 5 seconds
+            setTimeout(() => {
+              console.log('🏠 Auto return to home');
+              paymentStore.reset();
+              startPolling();
+            }, 10000);
+            
+          } else if (failRecord) {
+            console.log('❌ FAIL STATUS FOUND!', failRecord);
+            paymentStore.updatePayment({ data: [failRecord] });
+            paymentStore.currentStep = 4;
+            clearInterval(pollingInterval.value);
+            
+            // Auto return to home after 5 seconds
+            setTimeout(() => {
+              console.log('🏠 Auto return to home');
+              paymentStore.reset();
+              startPolling();
+            }, 10000);
+            
+          } else {
+            console.log('⏳ Still waiting for final status...');
+            console.log('Current statuses for this patient:', 
+              samePatientRecords.map(r => r.status));
+          }
+        }
+      } else {
+        console.log('📭 No data in API response');
+      }
+    } catch (error) {
+      console.error("❌ Polling error:", error);
+    }
+  }, 10000);
+  
+  console.log(`🚀 Polling started - IP-based patient detection`);
+};
+
+const checkAndRedirect = () => {
+  const savedIp = localStorage.getItem('loketIp');
+  if (!savedIp) {
+    console.warn('IP Address belum diatur. Mengarahkan ke halaman setup.');
+    router.push('/setup-ip');
+  } else {
+    localIpAddress.value = savedIp;
+    console.log('IP Address ditemukan:', savedIp);
+    startPolling();
+  }
+};

 onMounted(() => {
-  if (paymentStore.currentStep === 1) {
-    pollingInterval = setInterval(() => {
-      refresh();
-    }, 500000);
-  }
+  console.log('Component mounted, step saat ini:', paymentStore.currentStep);
+  checkAndRedirect();
 });

 onUnmounted(() => {
-  if (pollingInterval) {
-    clearInterval(pollingInterval);
-    console.log('Polling stopped on unmount.');
-  }
-});
-
-watch(() => paymentStore.currentStep, (newStep, oldStep) => {
-  if (newStep === 1 && oldStep !== 1) {
-    pollingInterval = setInterval(() => {
-      refresh();
-    }, 5000);
-  } else if (newStep !== 1 && pollingInterval) {
-    clearInterval(pollingInterval);
+  if (pollingInterval.value) {
+    clearInterval(pollingInterval.value);
+    console.log('Polling dihentikan saat unmount.');
  }
 });
 </script>

 <style scoped>
 .medical-payment-app {
-  min-height: 100vh;
-  background: linear-gradient(135deg, #ffd7b5 20%, #ff9248 100%);
+  background: linear-gradient(135deg, #ff9248 20%, #ff9248 100%);
 }
-
 .contact-fullscreen {
-  height: 100vh !important;
  max-width: none !important;
  border-radius: 0 !important;
 }
 .payment-centered {
  max-width: 500px !important;
  margin-top: 2rem !important;
+  margin-bottom: 2rem !important;
  border-radius: 16px !important;
 }
-
 .payment-card {
-  background: white;
+  background: rgb(224, 224, 224);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
 }
 </style>