@uappi/public-sdk 1.20.1 → 1.21.0

package/components/PaymentHosted/PaymentHosted.vue

@@ -3,7 +3,9 @@ import { ref, shallowRef, computed, onMounted, onUnmounted } from 'vue';
 
 import api from '../../modules/Api';
 import { purchaseAction } from '../../modules/Tracking/gtm/events/actions/purchase';
+import { purchaseOrderAction } from '../../modules/Tracking/gtm/events/actions/purchaseOrder';
 import { purchaseAction as facebookPurchaseAction } from '../../modules/Tracking/facebook/events/actions/purchase';
+import { purchaseOrderAction as facebookPurchaseOrderAction } from '../../modules/Tracking/facebook/events/actions/purchaseOrder';
 
 import type { Props, Emits, PaymentSuccessData, PaymentRedirectData } from './types';
 import type { CartResponse } from '../../modules/Api/types';
@@ -51,7 +53,10 @@ const iframeSrc = computed(() => {
 });
 
 async function requestPaymentToken(): Promise<string> {
-  const response = await api.cart.paymentToken({ paymentOptionId: props.option.id });
+  const response = await api.cart.paymentToken({
+    paymentOptionId: props.option.id,
+    ...(props.orderGroupPaymentCode ? { orderGroupPaymentCode: props.orderGroupPaymentCode } : {}),
+  });
 
   if (!response?.token) {
     console.error('[PaymentHosted] Token ausente na resposta:', response);
@@ -70,6 +75,7 @@ async function fetchPaymentToken(): Promise<void> {
     paymentToken.value = await requestPaymentToken();
   } catch (err) {
     console.error('[PaymentHosted] Erro ao buscar token de pagamento:', err);
+    emit('token-error', (err as { errorCode?: string })?.errorCode);
     tokenError.value = 'Não foi possível iniciar o formulário de pagamento.';
   } finally {
     loadingToken.value = false;
@@ -96,6 +102,10 @@ async function refreshPaymentToken(): Promise<void> {
 }
 
 async function fetchCartSnapshot(): Promise<void> {
+  // No fluxo de link o carrinho ativo não é a compra: o CartBroker devolveria um
+  // carrinho vazio recém-criado, e o evento sairia com itens que não existem
+  if (props.orderGroupPaymentCode) return;
+
   try {
     cartSnapshot.value = await api.cart.listDetail();
   } catch (err) {
@@ -131,7 +141,10 @@ function handleIframeMessage(event: MessageEvent): void {
       break;
 
     case 'UAPPI_PAYMENT_SUCCESS':
-      if (cartSnapshot.value) {
+      if (props.orderGroup) {
+        purchaseOrderAction(props.option.paymentType.code, props.orderGroup);
+        facebookPurchaseOrderAction(props.orderGroup.id, props.orderGroup.values?.totalValue ?? 0);
+      } else if (cartSnapshot.value) {
         purchaseAction(props.option.paymentType.code, cartSnapshot.value);
         facebookPurchaseAction(data.id, cartSnapshot.value);
       } else {

package/components/PaymentHosted/types.ts

@@ -1,4 +1,4 @@
-import type { PaymentOption, BuyCartResponse } from '../../modules/Api/types';
+import type { PaymentOption, BuyCartResponse, CustomerOrderResponse } from '../../modules/Api/types';
 
 export interface Props {
   /** Opção de pagamento selecionada (ex: item retornado por `api.cart.listPayments`). */
@@ -11,10 +11,15 @@ export interface Props {
   countryCode?: string;
   /** Host do serviço render.uappi. Sobrescreve `VITE_PAYMENT_IFRAME_HOST` quando informado. */
   iframeHost?: string;
+  /** Código do link de pagamento. Informado, o token sai para o pedido do link. */
+  orderGroupPaymentCode?: string;
+  /** Grupo de pedido do link. Obrigatório junto de `orderGroupPaymentCode`. */
+  orderGroup?: CustomerOrderResponse;
 }
 
 export interface Emits {
   (e: 'payment-ready'): void;
+  (e: 'token-error', errorCode: string | undefined): void;
   (e: 'payment-success', data: PaymentSuccessData): void;
   (e: 'payment-redirect', url: string, data: PaymentRedirectData): void;
   (e: 'payment-error', errorCode: string | undefined, message: string): void;

package/modules/Api/endpoints/OrderPaymentCodeComposable.ts

@@ -0,0 +1,10 @@
+import { usePublicApi } from '..';
+
+import type { OrderPaymentCodeDetailResponse } from '../types';
+
+export function detailOrderPaymentCode(code: string) {
+  return usePublicApi<OrderPaymentCodeDetailResponse>({
+    endpoint: `/publics/order/payment-code/${code}`,
+    method: 'GET',
+  });
+}

package/modules/Api/index.ts

@@ -58,6 +58,7 @@ import { listMenu } from './endpoints/MenuComposable';
 import { listPairOffers } from './endpoints/PairOfferComposable';
 import { getPromotionalForecast } from './endpoints/PromotionalForecastComposable';
 import { paymentConditions } from './endpoints/PaymentComposable';
+import { detailOrderPaymentCode } from './endpoints/OrderPaymentCodeComposable';
 import {
   deleteProductComment,
   createProductComment,
@@ -216,6 +217,10 @@ const promotional = {
   getPromotionalForecast,
 };
 
+const order = {
+  detailOrderPaymentCode
+};
+
 const notify = {
   contact
 }
@@ -226,6 +231,7 @@ export {
   customer,
   customization,
   cart,
+  order,
   product,
   promotional,
   notify,
@@ -238,6 +244,7 @@ export default {
   customer,
   customization,
   cart,
+  order,
   product,
   promotional,
   notify,

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

@@ -1,6 +1,11 @@
 import type { Ref } from 'vue';
 
-import type { ApiParams, CustomerErrorCode, CustomerMFAErrorCode } from '..';
+import type {
+  ApiParams,
+  CustomerErrorCode,
+  CustomerMFAErrorCode,
+  OrderPaymentCodeErrorCode,
+} from '..';
 
 export type ApiStatus = 'pending' | 'success' | 'error';
 
@@ -63,6 +68,7 @@ export interface ApiErrorData {
     | 'UAPPI_TOOLS_ITEM_EVALUATED'
     | 'UAPPI_TOOLS_REVIEW_NOT_FOUND'
     | CustomerErrorCode
-    | CustomerMFAErrorCode;
+    | CustomerMFAErrorCode
+    | OrderPaymentCodeErrorCode;
   message: string;
 }

package/modules/Api/types/endpoints/cart/cart.interfaces.ts

@@ -162,6 +162,7 @@ export interface BuyCartResponse {
 
 export interface PaymentTokenCartRequest {
   paymentOptionId: number;
+  orderGroupPaymentCode?: string;
 }
 
 export interface PaymentTokenCartResponse {

package/modules/Api/types/endpoints/order/order-payment-code.interfaces.ts

@@ -0,0 +1,13 @@
+import type { CustomerOrderResponse, PaymentConfiguration, PaymentResponse } from '../..';
+
+export interface OrderPaymentCodeAvailableOption {
+  option: PaymentResponse[number];
+  settings: Array<PaymentConfiguration>;
+}
+
+export interface OrderPaymentCodeDetailResponse {
+  code: string;
+  expiresAt: string;
+  orderGroup: CustomerOrderResponse | null;
+  paymentOptions: Array<OrderPaymentCodeAvailableOption>;
+}

package/modules/Api/types/endpoints/order/order-payment-code.types.ts

@@ -0,0 +1,9 @@
+export type OrderPaymentCodeErrorCode =
+  | 'UAPPI_STORE_ORDER_PAYMENT_CODE_NOT_FOUND'
+  | 'UAPPI_STORE_ORDER_PAYMENT_CODE_EXPIRED'
+  | 'UAPPI_STORE_ORDER_PAYMENT_CODE_INVALID_ORDER_STATUS'
+  | 'UAPPI_STORE_ORDER_PAYMENT_CODE_ALREADY_PAID'
+  | 'UAPPI_STORE_ORDER_INVALID_PAYMENT_OPTION'
+  | 'UAPPI_STORE_ORDER_PAYMENT_FAIL'
+  | 'UAPPI_STORE_ORDER_ANTI_FRAUD_FAIL'
+  | 'UAPPI_RENDER_PAYMENT_EXPIRED_TOKEN';

package/modules/Api/types/index.ts

@@ -137,6 +137,11 @@ import type { Media } from './endpoints/media/media.interfaces';
 import type { Target, Type } from './endpoints/menu/menu.enums';
 import type { Menu, MenuItem } from './endpoints/menu/menu.interfaces';
 import type { Order, OrderItem } from './endpoints/order/order.interfaces';
+import type {
+  OrderPaymentCodeAvailableOption,
+  OrderPaymentCodeDetailResponse,
+} from './endpoints/order/order-payment-code.interfaces';
+import type { OrderPaymentCodeErrorCode } from './endpoints/order/order-payment-code.types';
 import type { Page } from './endpoints/page/page.interfaces';
 import type { Pagination } from './endpoints/pagination/pagination.interfaces';
 import type {
@@ -522,6 +527,9 @@ export type {
   // Order
   Order,
   OrderItem,
+  OrderPaymentCodeAvailableOption,
+  OrderPaymentCodeDetailResponse,
+  OrderPaymentCodeErrorCode,
   Storage,
 
   // COUNTRY TYPES

package/modules/Tracking/facebook/events/actions/purchaseOrder.ts

@@ -0,0 +1,18 @@
+import api from '../../../../Api';
+import { pushFbq } from '../../../utils/pushFbq';
+
+export function purchaseOrderAction(orderGroupId: number, value: number) {
+  if (!window.fbq) return;
+
+  api.thirdParty
+    .facebookPurchase({ orderGroupId })
+    .then(eventId =>
+      pushFbq(
+        'track',
+        'Purchase',
+        { value, currency: 'BRL' },
+        { eventID: eventId },
+      ),
+    )
+    .catch(() => {});
+}

package/modules/Tracking/gtm/events/actions/purchaseOrder.ts

@@ -0,0 +1,49 @@
+import { pushDatalayer } from '../../../utils/pushDatalayer';
+
+import type { CustomerOrderResponse } from '../../../../Api/types';
+
+export function purchaseOrderAction(
+  paymentMethod: string,
+  orderGroup: CustomerOrderResponse,
+) {
+  const coupon =
+    orderGroup.discounts?.find(discount => discount.type === 'coupon')
+      ?.entityId ?? '';
+
+  pushDatalayer({
+    event: 'purchase',
+    ecommerce: {
+      currency: 'BRL',
+      affiliation: 'Loja Virtual',
+
+      payment_status: 'em aberto',
+      payment_type: paymentMethod,
+
+      shipping: orderGroup.values?.shippingValue ?? 0,
+      shipping_tier: orderGroup.orders[0]?.shipping?.label ?? '',
+      tax: 0,
+      transaction_id: orderGroup.code,
+
+      value: orderGroup.values?.totalValue ?? 0,
+      coupon,
+      items: orderGroup.orders
+        .flatMap(order => order.items)
+        .map(item => {
+          return {
+            item_category: '',
+            coupon,
+            // o item do pedido não carrega a marca, diferente do item do carrinho
+            item_brand: '',
+            item_id: item.productId,
+            item_name: item.name,
+            item_variant:
+              item.simpleProduct?.currentAttributes
+                ?.map(attribute => attribute.value.label)
+                .join(', ') ?? '',
+            price: item.unitValue,
+            quantity: item.quantity,
+          };
+        }),
+    },
+  });
+}

package/package.json

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