@uappi/public-sdk 1.5.0 → 1.7.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,6 +2,11 @@
   width: 100%;
 }
 
+.payment-hosted__stage {
+  position: relative;
+  width: 100%;
+}
+
 .payment-hosted__iframe {
   display: block;
   width: 100%;
@@ -10,6 +15,14 @@
   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/modules/Api/endpoints/PromotionalForecastComposable.ts

@@ -0,0 +1,11 @@
+import { usePublicApi } from '..';
+
+import type { PromotionalForecastResponse } from '../types';
+
+export function getPromotionalForecast(productId: number) {
+  return usePublicApi<PromotionalForecastResponse>({
+    endpoint: '/publics/products/promotional-forecast',
+    method: 'GET',
+    params: { productId },
+  });
+}

package/modules/Api/index.ts

@@ -56,6 +56,7 @@ import { createInterest } from './endpoints/InterestComposable';
 import { loggout } from './endpoints/LoggoutComposable';
 import { listMenu } from './endpoints/MenuComposable';
 import { listPairOffers } from './endpoints/PairOfferComposable';
+import { getPromotionalForecast } from './endpoints/PromotionalForecastComposable';
 import { paymentConditions } from './endpoints/PaymentComposable';
 import {
   deleteProductComment,
@@ -190,6 +191,7 @@ const promotional = {
   deleteWallet,
   applyPoint,
   deletePoint,
+  getPromotionalForecast,
 };
 
 const notify = {

package/modules/Api/types/context/api-params.types.ts

@@ -17,6 +17,9 @@ export interface ApiParams<
   targetCountryCode?: string;
   items?: Array<{ productId: number; quantity: number }>;
 
+  // for promotional forecast
+  productId?: number;
+
   variationMap?: Record<string, number>;
 
   loginUrl?: string;

package/modules/Api/types/endpoints/promotional-forecast/promotional-forecast.interfaces.ts

@@ -0,0 +1,11 @@
+export interface PromotionalForecastPointSystem {
+  name: string;
+  pointValue: number;
+  finalAmount: number;
+  finalValue: number;
+}
+
+export interface PromotionalForecastResponse {
+  pointSystem: PromotionalForecastPointSystem | null;
+  promotions: Array<Record<string, unknown>>;
+}

package/modules/Api/types/index.ts

@@ -143,6 +143,10 @@ import type {
   PairOffer,
   PairOfferResponse,
 } from './endpoints/pair-offer/pair-offer.interfaces';
+import type {
+  PromotionalForecastPointSystem,
+  PromotionalForecastResponse,
+} from './endpoints/promotional-forecast/promotional-forecast.interfaces';
 import type {
   Payment,
   PaymentConfiguration,
@@ -354,6 +358,10 @@ export type {
   PairOffer,
   PairOfferResponse,
 
+  // Previsão de promocional/pontos por produto
+  PromotionalForecastPointSystem,
+  PromotionalForecastResponse,
+
   // Avaliaçoes
   ProductReviewRequest,
   CreateProductReviewResponse,

package/package.json

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