update flow & screen adjust

components/Home.vue

@@ -1,50 +1,106 @@
-<!-- eslint-disable vue/multi-word-component-names -->
 <template>
   <div class="contact-page-container">
     <div class="logo-section-contact">
       <div class="logo-group-contact">
-        <v-img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/74/Coat_of_arms_of_East_Java.svg/1456px-Coat_of_arms_of_East_Java.svg.png" width="60" height="60" class="logo-img-contact" contain />
+        <v-img
-        <v-img src="https://static.wikia.nocookie.net/logopedia/images/1/15/Rumah_Sakit_Umum_Daerah_Dr._Saiful_Anwar.png" width="60" height="60" class="logo-img-contact" contain />
+          src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/74/Coat_of_arms_of_East_Java.svg/1456px-Coat_of_arms_of_East_Java.svg.png"
-        <v-img src="https://www.menpan.go.id/site/images/berita_foto_backup/2021/sipanday_berakhlak_bangga-melayani-bangsa/Logo_BerAKHLAK.png" width="60" height="60" class="logo-img-contact" contain />
+          width="60"
-        <v-img src="https://rsusaifulanwar.jatimprov.go.id/v2/img/KARS_RSSA.png" width="60" height="60" class="logo-img-contact" contain />
+          height="60"
+          class="logo-img-contact"
+          contain
+        />
+        <v-img
+          src="https://static.wikia.nocookie.net/logopedia/images/1/15/Rumah_Sakit_Umum_Daerah_Dr._Saiful_Anwar.png"
+          width="60"
+          height="60"
+          class="logo-img-contact"
+          contain
+        />
+        <v-img
+          src="https://www.menpan.go.id/site/images/berita_foto_backup/2021/sipanday_berakhlak_bangga-melayani-bangsa/Logo_BerAKHLAK.png"
+          width="60"
+          height="60"
+          class="logo-img-contact"
+          contain
+        />
+        <v-img
+          src="https://rsusaifulanwar.jatimprov.go.id/v2/img/KARS_RSSA.png"
+          width="60"
+          height="60"
+          class="logo-img-contact"
+          contain
+        />
       </div>
     </div>
 
     <div class="content-section-contact">
       <div class="title-section-contact">
         <h1 class="main-title-contact">With Love We Serve</h1>
-        <p class="subtitle-contact">Kami Menyediakan Layanan Medis yang Dapat Anda Percayai</p>
+        <p class="subtitle-contact">
+          Kami Menyediakan Layanan Medis yang Dapat Anda Percayai
+        </p>
       </div>
-      
+
-      <!-- Enhanced Banner Carousel -->
       <div class="banner-carousel-container">
         <v-carousel
           v-model="currentSlide"
           :show-arrows="true"
           :hide-delimiters="false"
-          height="500"
+          :cycle="false"
-          cycle
+          :interval="0"
-          interval="5000"
           class="banner-carousel"
+          height="450"
+          :continuous="false"
         >
           <v-carousel-item
             v-for="(item, index) in carouselItems"
             :key="index"
-            :src="item.src"
-            :alt="item.alt"
-            cover
             class="carousel-item"
           >
-            <div class="carousel-overlay">
+            <template v-if="item.isImage">
-              <div class="overlay-content">
+              <v-img :src="item.src" :alt="item.alt" cover class="fill-height">
-                <h3 class="overlay-title">{{ item.title }}</h3>
+                <div class="carousel-overlay">
-                <p class="overlay-description">{{ item.description }}</p>
+                  <div class="overlay-content">
+                    <h3 class="overlay-title">{{ item.title }}</h3>
+                    <p class="overlay-description">{{ item.description }}</p>
+                  </div>
+                </div>
+              </v-img>
+            </template>
+            <template v-else>
+              <div class="video-container">
+                <iframe
+                  v-if="currentSlide === index"
+                  :src="getYouTubeEmbedUrl(item.videoId)"
+                  width="100%"
+                  height="100%"
+                  frameborder="0"
+                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                  allowfullscreen
+                  class="youtube-iframe"
+                  @load="onVideoLoad"
+                  @error="onVideoError"
+                ></iframe>
+
+                <div
+                  v-else
+                  class="video-thumbnail"
+                  @click="currentSlide = index"
+                >
+                  <img
+                    :src="`https://img.youtube.com/vi/${item.videoId}/maxresdefault.jpg`"
+                    alt="Video thumbnail"
+                    class="thumbnail-img"
+                  />
+                  <div class="play-button-overlay">
+                    <v-icon color="white" size="64">mdi-play-circle</v-icon>
+                  </div>
+                </div>
               </div>
-            </div>
+            </template>
           </v-carousel-item>
         </v-carousel>
-        
+
-        <!-- Custom Navigation Dots -->
         <div class="custom-indicators">
           <span
             v-for="(item, index) in carouselItems"
@@ -55,31 +111,26 @@
         </div>
       </div>
 
-      <div class="cta-section-contact">
+      <!-- <div class="cta-section-contact">
-        <!-- <v-btn
+        <v-btn
-          color="primary"
+          @click="navigateToQrisPayment"
-          size="large"
+          color="#FF9248"
-          variant="flat"
+          class="cta-button"
-          rounded="xl"
+          x-large
-            class="cta-button-contact"
-            @click="paymentStore.nextStep"
         >
-          Lanjut ke Pembayaran
+          <span class="button-text">LANJUT KE PEMBAYARAN</span>
-        </v-btn> -->
+        </v-btn>
-        
+        <v-btn
-        <!-- <v-btn
+          @click="navigateToDebugPage"
-          color="secondary"
+          color="#FF9248"
-          size="large"
+          class="cta-button debug-button"
-          variant="outlined"
+          x-large
-          rounded="xl"
-          class="cta-button-contact mt-4"
-          @click="triggerDummyData"
         >
-          Debug ke Step 2
+          <span class="button-text">DEBUG KE STEP 2</span>
-        </v-btn> -->
+        </v-btn>
-      </div>
+      </div> -->
     </div>
-    
+
     <div class="orange-background-contact">
       <div class="contact-info-section-contact">
         <div class="contact-item-contact">
@@ -112,60 +163,88 @@
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { ref, watch, nextTick } from "vue";
-import { usePaymentStore } from '~/stores/payment';
+import { usePaymentStore } from "~/stores/payment";
 
 const paymentStore = usePaymentStore();
 const currentSlide = ref(0);
+const videoLoaded = ref({});
 
-// Carousel items - you can add more images/videos here
 const carouselItems = ref([
   {
     src: "https://i.ytimg.com/vi/4LRCHhepGmw/maxresdefault.jpg",
     alt: "RSUD Dr. Saiful Anwar Main Building",
     title: "Fasilitas Modern",
-    description: "Rumah sakit dengan teknologi medis terdepan"
+    description: "Rumah sakit dengan teknologi medis terdepan",
+    isImage: true,
+  },
+  {
+    videoId: "KQZFfRtMHe0",
+    isImage: false,
+    loaded: false,
   },
   {
     src: "https://rsusaifulanwar.jatimprov.go.id/v2/img/slider/slide1.jpg",
     alt: "Medical Services",
     title: "Pelayanan Terbaik",
-    description: "Tim medis profesional siap melayani 24 jam"
+    description: "Tim medis profesional siap melayani 24 jam",
+    isImage: true,
   },
-  {
-    src: "https://rsusaifulanwar.jatimprov.go.id/v2/img/slider/slide2.jpg",
-    alt: "Emergency Services",
-    title: "Unit Gawat Darurat",
-    description: "Layanan emergency yang cepat dan tepat"
-  },
-  {
-    src: "https://rsusaifulanwar.jatimprov.go.id/v2/img/slider/slide3.jpg",
-    alt: "Medical Equipment",
-    title: "Peralatan Canggih",
-    description: "Teknologi medis terkini untuk diagnosis akurat"
-  }
 ]);
 
+const getYouTubeEmbedUrl = (videoId) => {
+  const baseUrl = 'https://www.youtube.com/embed/';
+  const params = new URLSearchParams({
+    autoplay: '1',
+    mute: '0',
+    controls: '1',
+    modestbranding: '1',
+    rel: '0',
+    showinfo: '0',
+    fs: '1',
+    cc_load_policy: '0',
+    iv_load_policy: '3',
+    autohide: '0'
+  });
+  return `${baseUrl}${videoId}?${params.toString()}`;
+};
+
+const onVideoLoad = () => {
+  console.log('Video iframe loaded successfully');
+};
+
+const onVideoError = (error) => {
+  console.error('Video iframe error:', error);
+};
+
+const navigateToQrisPayment = () => {
+  console.log("Navigating to QRIS Payment...");
+
+};
+
+const navigateToDebugPage = () => {
+  console.log("Navigating to Debug Page...");
+
+};
+
+watch(currentSlide, (newSlide, oldSlide) => {
+
+});
 </script>
 
 <style scoped>
+
 .contact-page-container {
-  position: relative;
+  min-height: 100vh;
   width: 100%;
-  height: 100vh;
   background: white;
-  overflow: hidden;
   display: flex;
   flex-direction: column;
 }
 
 .orange-background-contact {
-  position: absolute;
+  width: 100%;
-  bottom: 0;
+  height: clamp(120px, 15vh, 200px);
-  left: 0;
-  right: 0;
-  height: 15%;
-  min-height: 120px;
   background: #ff9248;
   border-top-left-radius: 60px;
   border-top-right-radius: 60px;
@@ -174,6 +253,7 @@ const carouselItems = ref([
   align-items: center;
   justify-content: center;
   padding-bottom: 20px;
+  margin-top: 2rem;
 }
 
 .logo-section-contact {
@@ -186,12 +266,16 @@ const carouselItems = ref([
 
 .logo-group-contact {
   display: flex;
-  gap: 40px;
+  gap: 2rem;
   align-items: center;
+  flex-wrap: wrap;
+  justify-content: center;
 }
 
 .logo-img-contact {
   transition: transform 0.3s ease;
+  width: clamp(40px, 6vw, 60px) !important;
+  height: clamp(40px, 6vw, 60px) !important;
 }
 
 .logo-img-contact:hover {
@@ -201,13 +285,12 @@ const carouselItems = ref([
 .content-section-contact {
   position: relative;
   z-index: 2;
-  flex: 1;
+  flex-grow: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: flex-start;
   padding: 10px 20px;
-  padding-bottom: 140px;
 }
 
 .title-section-contact {
@@ -218,7 +301,7 @@ const carouselItems = ref([
 .main-title-contact {
   color: #ff9248;
   font-size: clamp(2.2rem, 5vw, 3.5rem);
-  font-family: 'Roboto', sans-serif;
+  font-family: "Roboto", sans-serif;
   font-weight: 800;
   margin-bottom: 12px;
   line-height: 1.2;
@@ -227,15 +310,14 @@ const carouselItems = ref([
 .subtitle-contact {
   color: black;
   font-size: clamp(0.9rem, 2vw, 1.1rem);
-  font-family: 'Roboto', sans-serif;
+  font-family: "Roboto", sans-serif;
   font-weight: 500;
   margin: 0;
   max-width: 600px;
 }
 
-/* Enhanced Banner Carousel Styles */
 .banner-carousel-container {
-  width: 100%;
+  width: 90%;
   max-width: 900px;
   margin-bottom: 30px;
   position: relative;
@@ -247,11 +329,63 @@ const carouselItems = ref([
 .banner-carousel {
   border-radius: 20px;
   overflow: hidden;
+  height: 450px;
 }
 
 .carousel-item {
   position: relative;
-  height: 500px !important;
+  width: 100%;
+  height: 450px;
+}
+
+.video-container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  background: #000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.youtube-iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+  border-radius: 20px;
+}
+
+.video-thumbnail {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.thumbnail-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 20px;
+}
+
+.play-button-overlay {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: rgba(0, 0, 0, 0.7);
+  border-radius: 50%;
+  padding: 20px;
+  transition: all 0.3s ease;
+}
+
+.play-button-overlay:hover {
+  background: rgba(0, 0, 0, 0.9);
+  transform: translate(-50%, -50%) scale(1.1);
 }
 
 .carousel-overlay {
@@ -270,21 +404,20 @@ const carouselItems = ref([
 }
 
 .overlay-title {
-  font-size: 1.8rem;
+  font-size: clamp(1.4rem, 2vw, 1.8rem);
   font-weight: 700;
   margin-bottom: 8px;
   text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
 }
 
 .overlay-description {
-  font-size: 1.1rem;
+  font-size: clamp(0.9rem, 1.5vw, 1.1rem);
   font-weight: 400;
   margin: 0;
   opacity: 0.9;
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
 }
 
-/* Custom Indicators */
 .custom-indicators {
   position: absolute;
   bottom: 15px;
@@ -313,10 +446,9 @@ const carouselItems = ref([
   background: rgba(255, 255, 255, 0.8);
 }
 
-/* Contact Info Styles */
 .contact-info-section-contact {
   display: flex;
-  gap: 60px; 
+  gap: 2rem;
   align-items: center;
   justify-content: center;
   flex-wrap: wrap;
@@ -331,8 +463,8 @@ const carouselItems = ref([
 }
 
 .contact-icon-contact {
-  width: 50px;
+  width: clamp(40px, 8vw, 50px);
-  height: 50px;
+  height: clamp(40px, 8vw, 50px);
   border-radius: 50%;
   background: white;
   display: flex;
@@ -348,8 +480,8 @@ const carouselItems = ref([
 
 .contact-text-contact {
   color: white;
-  font-size: 14px;
+  font-size: clamp(12px, 2vw, 14px);
-  font-family: 'Roboto', sans-serif;
+  font-family: "Roboto", sans-serif;
   font-weight: 500;
   white-space: nowrap;
 }
@@ -362,194 +494,22 @@ const carouselItems = ref([
   margin-top: 20px;
 }
 
-.cta-button-contact {
+.cta-button {
-  padding: 12px 40px !important;
+  width: 100%;
-  font-size: 1.1rem !important;
+  max-width: 300px;
-  font-weight: 600 !important;
+  font-weight: 700;
-  letter-spacing: 0.5px;
+  letter-spacing: 1px;
-  transition: all 0.3s ease;
-  background: linear-gradient(135deg, #ff9800 0%, #ff5722 100%) !important;
 }
 
-.cta-button-contact:hover {
+.debug-button {
-  transform: translateY(-2px);
+  background: #808080 !important;
-  box-shadow: 0 12px 30px rgba(255, 152, 0, 0.4);
 }
 
-/* Responsive Design */
-@media (max-width: 768px) {
-  .banner-carousel-container {
-    max-width: 100%;
-    margin: 0 -20px 20px -20px;
-    border-radius: 0;
-  }
-  
-  .banner-carousel {
-    border-radius: 0;
-  }
-  
-  .carousel-item {
-    height: 300px !important;
-  }
-  
-  .overlay-title {
-    font-size: 1.4rem;
-  }
-  
-  .overlay-description {
-    font-size: 0.95rem;
-  }
-  
-  .carousel-overlay {
-    padding: 20px 20px 20px;
-  }
-  
-  .contact-info-section-contact {
-    gap: 30px;
-  }
-  
-  .logo-group-contact {
-    gap: 20px;
-  }
-  
-  .logo-img-contact {
-    width: 45px !important;
-    height: 45px !important;
-  }
-}
-
-/* Tablet Landscape Optimizations */
-@media (orientation: landscape) and (min-width: 768px) {
-  .carousel-item {
-    height: 400px !important;
-  }
-  
-  .main-title-contact { 
-    font-size: 2.8rem; 
-  }
-  
-  .subtitle-contact { 
-    font-size: 1.05rem; 
-  }
-  
-  .contact-info-section-contact { 
-    gap: 40px; 
-  }
-  
-  .logo-group-contact { 
-    gap: 30px; 
-  }
-  
-  .logo-img-contact {
-    width: 50px !important;
-    height: 50px !important;
-  }
-  
-  .contact-text-contact { 
-    font-size: 12px; 
-  }
-  
-  .contact-icon-contact { 
-    width: 40px; 
-    height: 40px; 
-  }
-  
-  @media (min-width: 900px) and (max-width: 1200px) {
-    .content-section-contact {
-      padding-bottom: 140px;
-    }
-    
-    .orange-background-contact {
-      height: 150px;
-      padding-bottom: 10px;
-    }
-    
-    .carousel-item {
-      height: 450px !important;
-    }
-  }
-}
-
-/* Small tablet adjustments */
-@media (max-width: 900px) and (orientation: landscape) {
-  .main-title-contact { 
-    font-size: 2.2rem; 
-  }
-  
-  .contact-info-section-contact { 
-    gap: 25px; 
-  }
-  
-  .logo-group-contact { 
-    gap: 20px; 
-  }
-  
-  .content-section-contact {
-    padding-bottom: 120px;
-  }
-  
-  .orange-background-contact {
-    height: 140px;
-  }
-  
-  .carousel-item {
-    height: 350px !important;
-  }
-}
-
-/* Very small tablet landscape */
-@media (max-width: 768px) and (orientation: landscape) {
-  .logo-group-contact { 
-    gap: 15px; 
-  }
-  
-  .logo-img-contact {
-    width: 35px !important;
-    height: 35px !important;
-  }
-  
-  .main-title-contact { 
-    font-size: 1.8rem; 
-  }
-  
-  .contact-info-section-contact { 
-    gap: 20px; 
-  }
-  
-  .contact-text-contact { 
-    font-size: 10px; 
-  }
-  
-  .contact-icon-contact { 
-    width: 35px; 
-    height: 35px; 
-  }
-  
-  .content-section-contact {
-    padding-bottom: 100px;
-  }
-  
-  .orange-background-contact {
-    height: 120px;
-  }
-  
-  .carousel-item {
-    height: 250px !important;
-  }
-}
-
-/* Hide Vuetify default carousel navigation */
 :deep(.v-carousel__controls) {
   display: none;
 }
 
-/* Style Vuetify carousel arrows */
+:deep(.v-carousel__controls--bottom) {
-:deep(.v-btn--icon.v-carousel__controls__item) {
+  bottom: 50px !important;
-  background: rgba(255, 146, 72, 0.8) !important;
-  color: white !important;
-}
-
-:deep(.v-btn--icon.v-carousel__controls__item:hover) {
-  background: rgba(255, 146, 72, 1) !important;
 }
 </style>

components/PembayaranGagal.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="payment-step">
+    <v-card-text class="pa-8 text-center">
+      <div class="failure-container">
+        <v-icon icon="mdi-close-circle" size="80" class="text-red mb-4" />
+        <h2 class="text-h4 mb-4 font-weight-bold text-dark">Pembayaran Gagal</h2>
+        <p class="text-h6 text-grey-darken-1 mb-6">
+          Terjadi kesalahan saat memproses<br />pembayaran Anda.
+        </p>
+        <div class="button-group">
+          <v-btn color="primary" size="large" variant="flat" rounded="xl" @click="retryPayment" class="mb-3">
+            Coba Lagi
+          </v-btn>
+          <v-btn color="grey-darken-1" size="large" variant="outlined" rounded="xl" @click="paymentStore.reset">
+            Kembali ke Awal
+          </v-btn>
+        </div>
+      </div>
+    </v-card-text>
+  </div>
+</template>
+
+<script setup>
+import { usePaymentStore } from '~/stores/payment';
+const paymentStore = usePaymentStore();
+
+const retryPayment = () => {
+  // Logika untuk mencoba lagi pembayaran
+  // Misalnya, memanggil API backend untuk mendapatkan tagihan baru
+  // Untuk saat ini, kita bisa mensimulasikannya
+  console.log("Mencoba pembayaran lagi...");
+  paymentStore.setPaymentStatus('aktif');
+};
+</script>
+
+<style scoped>
+.failure-container {
+  padding: 40px 20px;
+}
+.text-red {
+  color: #f44336 !important;
+}
+.text-dark {
+  color: #424242 !important;
+}
+.button-group {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+</style>

components/QRISPayment.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="payment-step">
     <v-card-text class="pa-8 text-center">
-      <div class="mb-4">
+      <div class="mb-2">
         <v-img
-          src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/79/QRIS_logo.svg/1200px-QRIS_logo.svg.png"
+          src="https://iconlogovector.com/uploads/images/2024/03/lg-65ffda68a47ee-QRIS.webp"
-          height="35"
+          height="100"
           class="mx-auto"
           contain
         />
@@ -19,11 +19,7 @@
           height="280"
           elevation="0"
         >
-          <NuxtQrcode
+          <img ref="qrCodeImage" alt="QR Code" width="280" height="280" />
-            :value="paymentStore.qrData.qrvalue"
-            tag="svg"
-            :options="{ width: 280 }"
-          />
         </v-card>
       </div>
 
@@ -54,14 +50,12 @@
             {{ paymentStore.qrData.display_nobill }}
           </v-col>
         </v-row>
-        
+
         <v-row dense class="mb-4">
           <v-col cols="5" class="text-left">
             <strong>BERLAKU SAMPAI:</strong>
           </v-col>
-          <v-col cols="7" class="text-left text-red">
+          <v-col cols="7" class="text-left text-red"> N/A </v-col>
-            N/A
-          </v-col>
         </v-row>
       </div>
 
@@ -79,11 +73,36 @@
 
 <script setup>
 import { usePaymentStore } from "~/stores/payment";
+import QRCode from 'qrcode';
+import { ref, onMounted, watch } from 'vue';
+
 const paymentStore = usePaymentStore();
+const qrCodeImage = ref(null);
+
+const generateQRCode = async () => {
+    const qrValue = paymentStore.qrData.qrvalue;
+    if (qrValue) {
+        try {
+            const dataUrl = await QRCode.toDataURL(qrValue);
+            if (qrCodeImage.value) {
+                qrCodeImage.value.src = dataUrl;
+            }
+        } catch (error) {
+            console.error('Failed to generate QR Code:', error);
+        }
+    }
+};
+
+onMounted(() => {
+    generateQRCode();
+});
+
+watch(() => paymentStore.qrData, () => {
+    generateQRCode();
+});
 </script>
 
 <style scoped>
-/* Style tetap sama */
 .payment-step {
   background: rgb(233, 233, 233);
 }

nuxt.config.ts

@@ -12,6 +12,7 @@ export default defineNuxtConfig({
     '@nuxt/test-utils',
     '@nuxt/ui',
     'nuxt-qrcode',
+    
     '@pinia/nuxt',
     (_options, nuxt) => {
       nuxt.hooks.hook('vite:extendConfig', (config) => {
@@ -28,6 +29,10 @@ export default defineNuxtConfig({
   build: {
     transpile: ['vuetify'],
   },
+  devServer: {
+    host: "10.10.150.114",
+    port: 3000,
+  },
   app: {
     head: {
       viewport: 'width=device-width,initial-scale=1',

package.json

@@ -22,12 +22,15 @@
     "eslint": "^9.34.0",
     "nuxt": "^3.19.0",
     "pinia": "^3.0.3",
+    "qrcode": "^1.5.4",
     "typescript": "^5.9.2",
     "vue": "^3.5.20",
     "vue-router": "^4.5.1",
-    "vuetify": "^3.4.0"
+    "vuetify": "^3.4.0",
+    "youtube-vue3": "^0.1.15"
   },
   "devDependencies": {
+    "@types/qrcode": "^1.5.5",
     "nuxt-qrcode": "^0.4.8",
     "sass-embedded": "^1.92.1",
     "vite-plugin-vuetify": "^2.1.2",

pages/index.vue

@@ -23,10 +23,10 @@
 import { usePaymentStore } from '~/stores/payment';
 import Home from '~/components/Home.vue';
 import QRISPayment from '~/components/QRISPayment.vue';
-import Success from '~/components/Success.vue';
+import Success from '~/components/PembayaranSukses.vue';
 
 const paymentStore = usePaymentStore();
-const apiURL = 'http://10.10.150.188:8084/api/v1/qris';
+const apiURL = 'http://10.10.150.37:8084/api/v1/qris';
 
 const paymentSteps = {
   1: Home,
@@ -38,34 +38,29 @@ const activeComponent = computed(() => {
   return paymentSteps[paymentStore.currentStep] || Home;
 });
 
-// useFetch untuk pengambilan data dari API
 const { data: apiData, refresh } = await useFetch(apiURL, {
   server: false,
+  immediate: false,
 });
 
 watch(apiData, (newData) => {
   if (newData && newData.data && newData.data.length > 0) {
-    const loketIP = '10.10.150.106'; 
+    const relevantData = newData.data[0];
-    const relevantData = newData.data.find(item => item.ip === loketIP);
-
     if (relevantData) {
-      paymentStore.updatePayment(newData);
+      paymentStore.updatePayment({ data: [relevantData] });
-      // Data ditemukan, hentikan polling
       clearInterval(pollingInterval);
-      console.log('Polling stopped. Data received via useFetch.');
+      console.log('Polling stopped. Data received from API.');
     }
   }
 });
 
 let pollingInterval = null;
 
-// refresh setiap 5 detik untuk mengecek data
 onMounted(() => {
   if (paymentStore.currentStep === 1) {
-    refresh();
     pollingInterval = setInterval(() => {
       refresh();
-    }, 5000);
+    }, 500000);
   }
 });
 
@@ -78,7 +73,6 @@ onUnmounted(() => {
 
 watch(() => paymentStore.currentStep, (newStep, oldStep) => {
   if (newStep === 1 && oldStep !== 1) {
-    refresh();
     pollingInterval = setInterval(() => {
       refresh();
     }, 5000);

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
+      // Update qrData dengan validasi
-      this.qrData = apiData;
+      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,
+        name: apiData.display_name || 'Unknown',
-        amount: apiData.display_amount,
+        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;
     },
   },