@uappi/public-sdk 1.4.2 → 1.5.0

package/components/PaymentHosted/PaymentHosted.vue

@@ -2,8 +2,10 @@
 import { ref, computed, onMounted, onUnmounted } from 'vue';
 
 import api from '../../modules/Api';
+import { purchaseAction } from '../../modules/Tracking/events/actions/purchase';
 
 import type { Props, Emits, PaymentSuccessData, PaymentRedirectData } from './types';
+import type { CartResponse } from '../../modules/Api/types';
 
 // `PaymentHosted` renderiza o formulário de pagamento via iframe isolado,
 // servido pelo serviço `render.uappi`. Todos os dados sensíveis (número do cartão,
@@ -17,6 +19,14 @@ const iframeEl = ref<HTMLIFrameElement | null>(null);
 const paymentToken = ref<string | null>(null);
 const loadingToken = ref(true);
 const tokenError = ref<string | null>(null);
+const iframeHeight = ref<number | null>(null);
+
+// 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 iframeSrc = computed(() => {
   if (!paymentToken.value) return '';
@@ -58,6 +68,14 @@ async function fetchPaymentToken(): Promise<void> {
   }
 }
 
+async function fetchCartSnapshot(): Promise<void> {
+  try {
+    cartSnapshot.value = await api.cart.listDetail();
+  } catch (err) {
+    console.error('[PaymentHosted] Erro ao buscar carrinho para tracking de compra:', err);
+  }
+}
+
 /**
  * Só processa mensagens cuja origem seja a própria janela do iframe renderizado
  * por este componente, evitando que outra janela/frame na página finja ser o
@@ -66,12 +84,13 @@ async function fetchPaymentToken(): Promise<void> {
 function handleIframeMessage(event: MessageEvent): void {
   if (!iframeEl.value || event.source !== iframeEl.value.contentWindow) return;
 
-  const { type, data, url, errorCode, message } = (event.data ?? {}) as {
+  const { type, data, url, errorCode, message, height } = (event.data ?? {}) as {
     type: string;
     data: PaymentSuccessData & PaymentRedirectData;
     url: string;
     errorCode: string | undefined;
     message: string;
+    height: number | undefined;
   };
 
   switch (type) {
@@ -80,6 +99,11 @@ function handleIframeMessage(event: MessageEvent): void {
       break;
 
     case 'UAPPI_PAYMENT_SUCCESS':
+      if (cartSnapshot.value) {
+        purchaseAction(props.option.paymentType.code, cartSnapshot.value);
+      } else {
+        console.error('[PaymentHosted] Carrinho indisponível: evento de tracking de compra (purchase) não foi disparado.');
+      }
       emit('payment-success', data);
       break;
 
@@ -90,24 +114,29 @@ function handleIframeMessage(event: MessageEvent): void {
     case 'UAPPI_PAYMENT_ERROR':
       emit('payment-error', errorCode, message);
       break;
+
+    case 'UAPPI_PAYMENT_RESIZE':
+      if (typeof height === 'number' && height > 0) iframeHeight.value = height;
+      break;
   }
 }
 
 onMounted(async () => {
   window.addEventListener('message', handleIframeMessage);
-  await fetchPaymentToken();
+  await Promise.all([fetchPaymentToken(), fetchCartSnapshot()]);
 });
 
 onUnmounted(() => {
   window.removeEventListener('message', handleIframeMessage);
 });
+
 </script>
 
 <template>
-  <div class="payment-hosted-fields">
-    <div v-if="loadingToken" class="payment-hosted-fields__skeleton" />
+  <div class="payment-hosted">
+    <div v-if="loadingToken" class="payment-hosted__skeleton" />
 
-    <p v-else-if="tokenError" class="payment-hosted-fields__error">
+    <p v-else-if="tokenError" class="payment-hosted__error">
       {{ tokenError }}
     </p>
 
@@ -115,7 +144,8 @@ onUnmounted(() => {
       v-else-if="iframeSrc"
       ref="iframeEl"
       :src="iframeSrc"
-      class="payment-hosted-fields__iframe"
+      :style="iframeHeight ? { height: `${iframeHeight}px` } : undefined"
+      class="payment-hosted__iframe"
       frameborder="0"
       scrolling="no"
       title="Formulário de pagamento seguro"

package/components/PaymentHosted/styles.scoped.css

@@ -1,16 +1,16 @@
-.payment-hosted-fields {
+.payment-hosted {
   width: 100%;
 }
 
-.payment-hosted-fields__iframe {
+.payment-hosted__iframe {
   display: block;
   width: 100%;
-  height: 100%;
   min-height: 420px;
   border: none;
+  transition: height 0.2s ease;
 }
 
-.payment-hosted-fields__skeleton {
+.payment-hosted__skeleton {
   width: 100%;
   height: 420px;
   border-radius: 4px;
@@ -21,15 +21,15 @@
     var(--neutral-surface-low) 63%
   );
   background-size: 400% 100%;
-  animation: payment-hosted-fields-skeleton 1.4s ease infinite;
+  animation: payment-hosted-skeleton 1.4s ease infinite;
 }
 
-@keyframes payment-hosted-fields-skeleton {
+@keyframes payment-hosted-skeleton {
   0% { background-position: 100% 50%; }
   100% { background-position: 0 50%; }
 }
 
-.payment-hosted-fields__error {
+.payment-hosted__error {
   margin: 0;
   padding: 16px;
   text-align: center;

package/components/README.md

@@ -25,6 +25,8 @@ Renderiza o formulário de pagamento (cartão, etc.) dentro de um `<iframe>` iso
 
 O componente busca um token de pagamento via `api.cart.paymentToken` ao montar, monta a URL do iframe com esse token, e escuta `postMessage` do iframe para emitir eventos de pagamento. Mensagens de janelas que não sejam o `contentWindow` do próprio iframe são ignoradas.
 
+A altura do iframe tem um piso definido em CSS (`min-height`), mas se ajusta automaticamente ao conteúdo quando o `render.uappi` envia `postMessage({ type: 'UAPPI_PAYMENT_RESIZE', height })` (`height` em pixels, número do conteúdo real do formulário). Isso é necessário porque o iframe é cross-origin — o componente não tem acesso ao `contentDocument` para medir a altura sozinho. Sem esse evento, o iframe mantém apenas o `min-height` fixo.
+
 ```vue
 <script setup lang="ts">
 import { PaymentHosted } from '@uappi/public-sdk';

package/package.json

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