tf-checkout-react 1.7.7-beta.9 → 1.7.8

package/src/types/api/payment.d.ts

@@ -1,6 +1,3 @@
-import { PaymentType } from '../../components/paymentContainer'
-import { PaymentStatuses } from '../../components/process-redirect-container'
-
 interface IPaymentCartData {
   cartName: string;
   options: {
@@ -34,15 +31,6 @@ interface IPaymentOrderDetails {
 }
 
 interface IPaymentMethodData {
-  type?: string;
-}
-
-interface IMercadoPagoProPaymentMethodData extends IPaymentMethodData {
-  public_key?: string
-  preference_id?: string
-}
-
-interface IStripePaymentMethodData {
   id: string;
   name: string;
   stripe_client_secret: string;
@@ -75,7 +63,7 @@ interface IPaymentData {
   expires_at: number;
   cart: IPaymentCartData[];
   order_details: IPaymentOrderDetails;
-  payment_method: IPaymentMethodData | IMercadoPagoProPaymentMethodData | IStripePaymentMethodData;
+  payment_method: IPaymentMethodData;
   shipping_info: IShippingBillingInfoData;
   billing_info: IShippingBillingInfoData;
   event_details: IEventDetails;
@@ -190,22 +178,3 @@ interface ICheckoutCompleteDataResponse extends IAxiosResponseData {
     type: string;
   };
 }
-
-interface ICheckoutMercadoPagoProPaymentData {
-  publicKey?: string;
-  paymentId?: string
-  preferenceId?: string
-}
-
-interface ICheckoutProcessPaymentData {
-  returnUrl: string
-  status: PaymentStatuses
-  paymentType: PaymentType
-  mercadoPagoInformation?: ICheckoutMercadoPagoProPaymentData
-}
-
-interface ICheckoutProcessPaymentResponse extends IAxiosResponseData {
-  data: {
-    attributes: ICheckoutProcessPaymentData;
-  };
-}

package/dist/components/process-redirect-container/index.d.ts

@@ -1,18 +0,0 @@
-import { AxiosError } from 'axios';
-import React from 'react';
-import { ICheckoutProcessPaymentData } from '../../types/api/payment';
-export declare enum PaymentStatuses {
-    INCOMPLETE = "incomplete",
-    COMPLETE = "complete",
-    PENDING = "pending",
-    CANCELLED = "cancelled"
-}
-export interface IProcessRedirectContainer {
-    orderHash?: string;
-    onPaymentProcessed: (status: string, paymentData: ICheckoutProcessPaymentData, orderHash: string) => void;
-    onProcessError?: (error: AxiosError) => void;
-    loadingMessage?: string;
-    renderProcessing?: () => React.ReactNode;
-    renderCompleted?: (status: string, paymentData: ICheckoutProcessPaymentData, orderHash: string) => React.ReactNode | void;
-}
-export declare const ProcessRedirectContainer: ({ orderHash: orderHashProp, onPaymentProcessed, onProcessError, loadingMessage, renderProcessing, renderCompleted, }: IProcessRedirectContainer) => JSX.Element | null;

package/src/components/process-redirect-container/index.tsx

@@ -1,180 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import CircularProgress from '@mui/material/CircularProgress'
-import { initMercadoPago, StatusScreen } from '@mercadopago/sdk-react'
-import { AxiosError } from 'axios'
-import _identity from 'lodash/identity'
-import React, { useEffect, useState } from 'react'
-
-import { processPayment } from '../../api/payment'
-import { PaymentType } from '../../components/paymentContainer'
-import { isBrowser } from '../../utils'
-import { ICheckoutProcessPaymentData } from '../../types/api/payment'
-
-export enum PaymentStatuses {
-  INCOMPLETE = 'incomplete',
-  COMPLETE = 'complete',
-  PENDING = 'pending',
-  CANCELLED = 'cancelled',
-}
-
-export interface IProcessRedirectContainer {
-  orderHash?: string;
-  onPaymentProcessed: (
-    status: string,
-    paymentData: ICheckoutProcessPaymentData,
-    orderHash: string
-  ) => void;
-  onProcessError?: (error: AxiosError) => void;
-  loadingMessage?: string;
-  renderProcessing?: () => React.ReactNode;
-  renderCompleted?: (
-    status: string,
-    paymentData: ICheckoutProcessPaymentData,
-    orderHash: string
-  ) => React.ReactNode | void;
-}
-
-export const ProcessRedirectContainer = ({
-  orderHash: orderHashProp = undefined,
-  onPaymentProcessed = _identity,
-  onProcessError = _identity,
-  loadingMessage = 'Processing your payment...',
-  renderProcessing,
-  renderCompleted,
-}: IProcessRedirectContainer) => {
-  const [isProcessing, setIsProcessing] = useState(true)
-  const [error, setError] = useState<string | null>(null)
-  const [completedData, setCompletedData] = useState<{
-    status: string;
-    paymentData: ICheckoutProcessPaymentData;
-    orderHash: string;
-  } | null>(null)
-
-  useEffect(() => {
-    const processRedirect = async () => {
-      if (!isBrowser) return
-
-      try {
-        // Extract order hash from URL path if not provided as prop
-        // Expected URL format: /processing-payment/:order_hash
-        let orderHash = orderHashProp
-        if (!orderHash) {
-          const pathParts = window.location.pathname.split('/')
-          const orderHashIndex = pathParts.indexOf('processing-payment')
-          if (orderHashIndex !== -1 && pathParts[orderHashIndex + 1]) {
-            orderHash = pathParts[orderHashIndex + 1]
-          }
-        }
-
-        if (!orderHash) {
-          throw new Error('Order hash not found in URL or props')
-        }
-
-        // Extract all query parameters from the URL
-        const urlParams = new URLSearchParams(window.location.search)
-        const params: Record<string, string> = {}
-
-        urlParams.forEach((value, key) => {
-          params[key] = value
-        })
-
-        // Call the processPayment API with orderHash and query params
-        const paymentData = await processPayment(orderHash, params)
-
-        // Store completed data for rendering
-        setCompletedData({
-          status: paymentData.status,
-          paymentData,
-          orderHash,
-        })
-
-        // Trigger the callback with payment status, data, and orderHash
-        onPaymentProcessed(paymentData.status, paymentData, orderHash)
-      } catch (err) {
-        const axiosError = err as AxiosError
-        setError(axiosError.message || 'Failed to process payment')
-        onProcessError(axiosError)
-      } finally {
-        setIsProcessing(false)
-      }
-    }
-
-    processRedirect()
-  }, [orderHashProp, onPaymentProcessed, onProcessError])
-
-  if (error) {
-    return (
-      <div style={{ padding: '20px', textAlign: 'center' }}>
-        <p style={{ color: 'red' }}>Error: {error}</p>
-      </div>
-    )
-  }
-
-  if (isProcessing) {
-    // Use custom processing render if provided
-    if (renderProcessing) {
-      return <>{renderProcessing()}</>
-    }
-
-    // Default processing UI
-    return (
-      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: '40px' }}>
-        <CircularProgress />
-        {loadingMessage && (
-          <p style={{ marginTop: '20px', fontSize: '16px' }}>{loadingMessage}</p>
-        )}
-      </div>
-    )
-  }
-
-  // Payment processing completed
-  if (completedData) {
-    const { status, paymentData, orderHash } = completedData
-
-    // Use custom completed render if provided
-    if (renderCompleted) {
-      const customContent = renderCompleted(status, paymentData, orderHash)
-      if (customContent) {
-        return <>{customContent}</>
-      }
-    }
-
-    // Check if it's a Mercado Pago payment
-    const isMercadoPago = paymentData.paymentType === PaymentType.MERCADO_PAGO_PRO
-
-    if (
-      isMercadoPago &&
-      paymentData.mercadoPagoInformation?.paymentId &&
-      paymentData.mercadoPagoInformation?.publicKey
-    ) {
-      // Show StatusScreen for Mercado Pago payments
-      initMercadoPago(paymentData.mercadoPagoInformation?.publicKey)
-      return (
-        <StatusScreen
-          initialization={{ paymentId: paymentData.mercadoPagoInformation.paymentId }}
-        />
-      )
-    }
-
-    // Default: Show simple text with payment status
-    const statusMessages = {
-      [PaymentStatuses.COMPLETE]: 'Your payment has been completed successfully!',
-      [PaymentStatuses.PENDING]: 'Your payment is being processed.',
-      [PaymentStatuses.INCOMPLETE]: 'Your payment is incomplete. Please try again.',
-      [PaymentStatuses.CANCELLED]: 'Your payment has been cancelled.',
-    }
-
-    const message = statusMessages[status as PaymentStatuses] || `Payment status: ${status}`
-
-    return (
-      <div style={{ padding: '40px', textAlign: 'center' }}>
-        <h2>{message}</h2>
-        <p style={{ marginTop: '20px', fontSize: '14px', color: '#666' }}>
-          Order: {orderHash}
-        </p>
-      </div>
-    )
-  }
-
-  return null
-}