@uappi/public-sdk 1.6.0 → 1.8.0

package/components/PaymentHosted/PaymentHosted.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted } from 'vue';
+import { ref, shallowRef, computed, onMounted, onUnmounted } from 'vue';
 
 import api from '../../modules/Api';
 import { purchaseAction } from '../../modules/Tracking/events/actions/purchase';
@@ -20,13 +20,16 @@ const paymentToken = ref<string | null>(null);
 const loadingToken = ref(true);
 const tokenError = ref<string | null>(null);
 const iframeHeight = ref<number | null>(null);
+// Controla o skeleton: só sai quando o iframe termina de carregar e emite
+// UAPPI_PAYMENT_READY, não apenas quando o token foi obtido.
+const paymentReady = ref(false);
 
 // Snapshot do carrinho anterior à compra, usado apenas para disparar o evento
 // `purchase` do GTM quando o `UAPPI_PAYMENT_SUCCESS` chegar. É necessário buscar
 // esse dado antes do pagamento porque, após o sucesso, o carrinho já foi
 // consumido pelo `/cart/buy` (chamado internamente pelo iframe) e não reflete
 // mais os itens/frete/descontos da compra que acabou de ser feita.
-const cartSnapshot = ref<CartResponse | null>(null);
+const cartSnapshot = shallowRef<CartResponse | null>(null);
 
 const iframeSrc = computed(() => {
   if (!paymentToken.value) return '';
@@ -46,20 +49,24 @@ const iframeSrc = computed(() => {
   return url.toString();
 });
 
+async function requestPaymentToken(): Promise<string> {
+  const response = await api.cart.paymentToken({ paymentOptionId: props.option.id });
+
+  if (!response?.token) {
+    console.error('[PaymentHosted] Token ausente na resposta:', response);
+    throw new Error('UAPPI_PAYMENT_TOKEN_MISSING');
+  }
+
+  return response.token;
+}
+
 async function fetchPaymentToken(): Promise<void> {
   loadingToken.value = true;
   tokenError.value = null;
+  paymentReady.value = false;
 
   try {
-    const response = await api.cart.paymentToken({ paymentOptionId: props.option.id });
-
-    if (!response?.token) {
-      console.error('[PaymentHosted] Token ausente na resposta:', response);
-      tokenError.value = 'Não foi possível iniciar o formulário de pagamento.';
-      return;
-    }
-
-    paymentToken.value = response.token;
+    paymentToken.value = await requestPaymentToken();
   } catch (err) {
     console.error('[PaymentHosted] Erro ao buscar token de pagamento:', err);
     tokenError.value = 'Não foi possível iniciar o formulário de pagamento.';
@@ -68,6 +75,25 @@ async function fetchPaymentToken(): Promise<void> {
   }
 }
 
+/**
+ * Chamado quando o iframe avisa (UAPPI_PAYMENT_TOKEN_EXPIRING) que o token atual
+ * está perto de expirar. Busca um novo token e o injeta direto no formulário via
+ * postMessage (UAPPI_UPDATE_PAYMENT_TOKEN), sem trocar o `src` do iframe — preserva
+ * os dados que o usuário já preencheu no cartão.
+ */
+async function refreshPaymentToken(): Promise<void> {
+  if (!iframeEl.value?.contentWindow) return;
+
+  try {
+    const token = await requestPaymentToken();
+    const targetOrigin = new URL(iframeSrc.value).origin;
+
+    iframeEl.value.contentWindow.postMessage({ type: 'UAPPI_UPDATE_PAYMENT_TOKEN', token }, targetOrigin);
+  } catch (err) {
+    console.error('[PaymentHosted] Erro ao renovar token de pagamento:', err);
+  }
+}
+
 async function fetchCartSnapshot(): Promise<void> {
   try {
     cartSnapshot.value = await api.cart.listDetail();
@@ -95,9 +121,14 @@ function handleIframeMessage(event: MessageEvent): void {
 
   switch (type) {
     case 'UAPPI_PAYMENT_READY':
+      paymentReady.value = true;
       emit('payment-ready');
       break;
 
+    case 'UAPPI_PAYMENT_TOKEN_EXPIRING':
+      refreshPaymentToken();
+      break;
+
     case 'UAPPI_PAYMENT_SUCCESS':
       if (cartSnapshot.value) {
         purchaseAction(props.option.paymentType.code, cartSnapshot.value);
@@ -134,23 +165,25 @@ onUnmounted(() => {
 
 <template>
   <div class="payment-hosted">
-    <div v-if="loadingToken" class="payment-hosted__skeleton" />
-
-    <p v-else-if="tokenError" class="payment-hosted__error">
+    <p v-if="tokenError" class="payment-hosted__error">
       {{ tokenError }}
     </p>
 
-    <iframe
-      v-else-if="iframeSrc"
-      ref="iframeEl"
-      :src="iframeSrc"
-      :style="iframeHeight ? { height: `${iframeHeight}px` } : undefined"
-      class="payment-hosted__iframe"
-      frameborder="0"
-      scrolling="no"
-      title="Formulário de pagamento seguro"
-      allow="payment"
-    />
+    <div v-else class="payment-hosted__stage">
+      <div v-if="!paymentReady" class="payment-hosted__skeleton" />
+
+      <iframe
+        v-if="iframeSrc"
+        ref="iframeEl"
+        :src="iframeSrc"
+        :style="iframeHeight ? { height: `${iframeHeight}px` } : undefined"
+        :class="['payment-hosted__iframe', { 'payment-hosted__iframe--hidden': !paymentReady }]"
+        frameborder="0"
+        scrolling="no"
+        title="Formulário de pagamento seguro"
+        allow="payment"
+      />
+    </div>
   </div>
 </template>
 

package/components/PaymentHosted/styles.scoped.css

@@ -2,14 +2,26 @@
   width: 100%;
 }
 
+.payment-hosted__stage {
+  position: relative;
+  width: 100%;
+}
+
 .payment-hosted__iframe {
   display: block;
   width: 100%;
-  min-height: 420px;
   border: none;
   transition: height 0.2s ease;
 }
 
+.payment-hosted__iframe--hidden {
+  position: absolute;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+
 .payment-hosted__skeleton {
   width: 100%;
   height: 420px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uappi/public-sdk",
-  "version": "1.6.0",
+  "version": "1.8.0",
   "description": "Pacotes públicos para desenvolvimento do ecossistema Uappi",
   "main": "main.ts",
   "scripts": {