Información del Pedido

La gestión de la información del pedido en Magento permite configurar direcciones de envío, métodos de envío, métodos de pago y finalmente realizar el pedido.

Estructura de datos principal

Los pedidos se manejan a través de dos contextos principales:

• MagentoOrderContext: Para pedidos en proceso (checkout)
• MagentoPlacedOrderContext: Para pedidos ya realizados

Componentes clave para pedidos en proceso

Direcciones de envío

// Establecer dirección de envío por ID (para usuarios registrados)
setShippingAddressById: (id: number) => Promise<Cart|null>

// Establecer dirección de envío por datos (para usuarios nuevos o invitados)
setShippingAddressByData: (address: ShippingAddressInput, saveInAddressBook?: boolean) => Promise<Cart|null>

// Actualizar una dirección existente
updateAddress: (addressId: number, address: CustomerAddressInput) => Promise<CustomerAddress|null>

// Crear una nueva dirección para el usuario
createCustomerAddress: (address: CustomerAddressInput) => Promise<CustomerAddress|null>

Métodos de envío

// Establecer método de envío
setShippingMethod: (carrierCode: string, methodCode: string) => Promise<Cart|null>

// Estimar métodos de envío disponibles según código postal
estimateShippingMethods: (postcode: string) => Promise<any>

Métodos de pago

La integración soporta múltiples métodos de pago:

// Stripe
setStripePaymentMethod: (paymentId: string, selectedPlan?: string) => Promise<Cart|null>
getStripeInstallments: (paymentId: string) => Promise<any>
setStripeMonthsFee: (months: number) => Promise<any>
unsetStripeMonthsFee: () => Promise<any>

// PayPal
setPaypalPaymentMethod: (payerId: string, token: string) => Promise<Cart|null>
createPaypalExpressToken: () => Promise<PaypalExpressTokenOutput|null>

// Conekta
setConektaSpeiPaymentMethod: () => Promise<Cart|null>
setConektaOxxoPaymentMethod: () => Promise<Cart|null>
setConektaCreditCardPaymentMethod: (conektaCard: ConektaCcInput) => Promise<Cart|null>

// MercadoPago
setMercadoPagoPaymentMethod: () => Promise<Cart|null>
getMercadoPagoPreference: (orderId: string|number) => Promise<any>

// Pedidos gratuitos
setFreePaymentMethod: () => Promise<Cart|null>

Finalización del pedido

// Crear el pedido
placeOrder: (cleanQuote?: boolean) => Promise<Order|null>

Componentes clave para pedidos completados

MagentoPlacedOrderConfig

export interface MagentoPlacedOrderConfig {
  incrementId: string|null  // ID del pedido en formato legible
  key?: string|null
  email?: string|null
  postcode?: string|null
  cacheTime?: number
  errors: MagentoPlacedOrderErrors[]
  order?: CustomerOrder|null  // Información completa del pedido

  // Métodos para programación de entrega (GABO)
  getGaboCalendar: () => Promise<GaboOrderCalendar|null>
  getGaboDates: () => Promise<GaboOrderDates|null>
  gaboSchedule: (variables: {date: string, range: number, deliveryTrackingId: number}) => Promise<GaboSchedule|null>
  gaboCancelScheduled: (variables: GaboCancellationScheduleInput & {email: string, postcode: string}) => Promise<GaboSchedule|null>
}

Implementación

Los métodos para gestionar pedidos están implementados en magento-service-provider.ts:

export const placeOrder = async (cartId: string): Promise<Order|null> => {
  const response = await request({
    query: QuotePlaceOrderDocument,
    variables: { cartId }
  }) as QuotePlaceOrderMutation
  return response?.placeOrder?.order
}

export const getOrder = async ({ incrementId, email, postcode }: { incrementId: string, email?: string, postcode?: string }) => {
  const variables = {
    incrementId
  }
  if (email && postcode) {
    variables['email'] = email
    variables['postcode'] = postcode
  }
  const response = await request({
    query: SuccessOrderDocument,
    variables: variables
  }) as SuccessOrderQuery
  return response?.getOrder as CustomerOrder|null
}

Flujo de checkout

1. Configurar dirección de envío con setShippingAddressById o setShippingAddressByData
2. Establecer método de envío con setShippingMethod
3. Configurar método de pago usando la función correspondiente (ej: setStripePaymentMethod)
4. Finalizar pedido con placeOrder
5. Obtener información del pedido completado a través de MagentoPlacedOrderContext

Uso en componentes

import useMagentoOrderContainer from "src/magento/hooks/use-magento-order-container";

const CheckoutComponent = () => {
  const {
    setShippingAddressByData,
    setShippingMethod,
    setStripePaymentMethod,
    placeOrder
  } = useMagentoOrderContainer();

  // Implementación del proceso de checkout
  // ...
}

Para pedidos completados:

import useMagentoPlacedOrderContainer from "src/magento/hooks/use-magento-placed-order-container";

const OrderDetailsComponent = () => {
  const {
    order,
    getGaboCalendar,
    gaboSchedule
  } = useMagentoPlacedOrderContainer();

  // Mostrar detalles del pedido y programar entrega
  // ...
}