update VA

.env.example

@@ -1,3 +1,3 @@
 FOLDER_PATH="public/content"
-URL_BASE="ws://10.10.150.222:8080/api/v1/ws"
+URL_BASE="ws://10.10.150.239:8080/api/v1/ws"
 QUERY="user_id=QRIS&room=BANKJATIM"

components/QRISPayment.vue

@@ -23,7 +23,7 @@
                 <v-img
                   src="/bankjatimlogo.png"
                   :height="isPortrait ? 50 : 30"
-                  class="qris-logo"
+                  class="jatim-logo"
                   contain
                 />
               </div>
@@ -47,7 +47,22 @@
 
               <div class="scan-line" v-if="qrLoaded"></div>
               <div>
+                <!-- Tampilkan text jika invoice number sama dengan qrvalue -->
+                <div v-if="isInvoiceMatchQR" class="detail-column">
+                  <div class="detail-label">
+                    <v-icon size="18" class="mr-2" color="primary"
+                      >mdi-credit-card-outline</v-icon
+                    >
+                    No Virtual Account
+                  </div>
+                  <div class="detail-value">
+                    {{ paymentStore.qrData.qrvalue }}
+                  </div>
+                </div>
+
+                <!-- Tampilkan logo QRIS jika berbeda -->
                 <v-img
+                  v-else
                   src="/qrislogo.png"
                   :height="isPortrait ? 70 : 50"
                   class="qris-logo mb-n3 mt-n2"
@@ -211,6 +226,13 @@ const windowHeight = ref(window.innerHeight);
 const isPortrait = computed(() => windowHeight.value > windowWidth.value);
 const qrSize = computed(() => (isPortrait.value ? 280 : 240));
 
+// Computed untuk mengecek apakah invoice number sama dengan qrvalue
+const isInvoiceMatchQR = computed(() => {
+  const invoiceNumber = paymentStore.qrData.invoice_number;
+  const qrValue = paymentStore.qrData.qrvalue;
+  return invoiceNumber && qrValue && invoiceNumber === qrValue;
+});
+
 const expiryDisplayTime = ref("Menghitung...");
 let countdownInterval = null;
 
@@ -407,7 +429,7 @@ watch(isPortrait, () => {
   justify-content: center;
 }
 
-.qris-logo {
+.jatim-logo {
   filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.1));
   transition: transform 0.3s ease;
   align-items: baseline;
@@ -520,6 +542,20 @@ watch(isPortrait, () => {
   animation: scanning 2s ease-in-out infinite;
 }
 
+.qris-logo {
+  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.1));
+  transition: transform 0.3s ease;
+  align-items: baseline;
+  margin-right: 5px;
+}
+
+.invoice-text {
+  color: #1a1a1a;
+  font-weight: 700;
+  font-size: 1.2rem;
+  margin-left: 1.5rem;
+}
+
 @keyframes scanning {
   0% {
     top: 2rem;
@@ -795,6 +831,11 @@ watch(isPortrait, () => {
     margin-right: 20px;
   }
 
+  .invoice-text {
+    font-size: 2rem;
+    padding: 1rem 1.5rem;
+  }
+
   .scan-line {
     top: 2.5rem;
   }

stores/payment.ts

@@ -35,6 +35,7 @@ export const usePaymentStore = defineStore("payment", {
       expiry: "",
     },
     qrData: {
+      invoice_number: null,
       qrvalue: null,
       display_nobill: null,
       display_name: null,