Add place order logic (WIP)

This commit is contained in:
Emili Castells Guasch 2024-05-20 16:37:11 +02:00
parent 4b3cd53f73
commit e93e9db3be
6 changed files with 115 additions and 20 deletions

View file

@ -1,3 +1,5 @@
import {useEffect, useState} from '@wordpress/element';
import {
PayPalScriptProvider,
PayPalCardFieldsProvider,
@ -7,9 +9,11 @@ import {
import {CheckoutHandler} from "./checkout-handler";
export function CardFields({config, eventRegistration, emitResponse}) {
const {onPaymentSetup, onCheckoutFail, onCheckoutValidation} = eventRegistration;
const {onPaymentSetup} = eventRegistration;
const {responseTypes} = emitResponse;
const [cardFieldsForm, setCardFieldsForm] = useState();
async function createOrder() {
return fetch(config.scriptData.ajax.create_order.endpoint, {
method: "POST",
@ -20,7 +24,6 @@ export function CardFields({config, eventRegistration, emitResponse}) {
nonce: config.scriptData.ajax.create_order.nonce,
context: config.scriptData.context,
payment_method: 'ppcp-credit-card-gateway',
createaccount: false
}),
})
.then((response) => response.json())
@ -46,15 +49,53 @@ export function CardFields({config, eventRegistration, emitResponse}) {
.then((response) => response.json())
.then((data) => {
console.log(data)
return {
type: responseTypes.SUCCESS,
};
})
.catch((err) => {
console.error(err);
});
}
const getCardFieldsForm = (cardFieldsForm) => {
setCardFieldsForm(cardFieldsForm)
}
const wait = (milliseconds) => {
return new Promise((resolve) => {
console.log('start...')
setTimeout(() => {
console.log('resolve')
resolve()
}, milliseconds)
})
}
useEffect(
() =>
onPaymentSetup(() => {
async function handlePaymentProcessing() {
await cardFieldsForm.submit();
// TODO temporary workaround to wait for PayPal order in the session
await wait(3000)
const response = await fetch(config.scriptData.ajax.get_paypal_order_from_session.endpoint)
const result = await response.json()
return {
type: responseTypes.SUCCESS,
meta: {
paymentMethodData: {
'paypal_order_id': result.data,
},
},
};
}
return handlePaymentProcessing();
}),
[onPaymentSetup, cardFieldsForm]
);
return (
<>
<PayPalScriptProvider
@ -72,7 +113,7 @@ export function CardFields({config, eventRegistration, emitResponse}) {
}}
>
<PayPalCardFieldsForm/>
<CheckoutHandler onPaymentSetup={onPaymentSetup} responseTypes={responseTypes}/>
<CheckoutHandler getCardFieldsForm={getCardFieldsForm}/>
</PayPalCardFieldsProvider>
</PayPalScriptProvider>
</>

View file

@ -1,23 +1,12 @@
import {useEffect} from '@wordpress/element';
import {usePayPalCardFields} from "@paypal/react-paypal-js";
export const CheckoutHandler = ({onPaymentSetup, responseTypes}) => {
export const CheckoutHandler = ({getCardFieldsForm}) => {
const {cardFieldsForm} = usePayPalCardFields();
useEffect(() => {
const unsubscribe = onPaymentSetup(async () => {
await cardFieldsForm.submit()
.catch((error) => {
console.error(error)
return {
type: responseTypes.ERROR,
}
});
})
return unsubscribe
}, [onPaymentSetup, cardFieldsForm]);
getCardFieldsForm(cardFieldsForm)
}, []);
return null
}

View file

@ -9,6 +9,7 @@ declare(strict_types=1);
namespace WooCommerce\PayPalCommerce\Blocks;
use WooCommerce\PayPalCommerce\Blocks\Endpoint\GetPayPalOrderFromSession;
use WooCommerce\PayPalCommerce\Blocks\Endpoint\UpdateShippingEndpoint;
use WooCommerce\PayPalCommerce\Vendor\Psr\Container\ContainerInterface;
use WooCommerce\PayPalCommerce\Button\Assets\SmartButtonInterface;
@ -72,6 +73,11 @@ return array(
$container->get( 'woocommerce.logger.woocommerce' )
);
},
'blocks.endpoint.get-paypal-order-from-session' => static function ( ContainerInterface $container ): GetPayPalOrderFromSession {
return new GetPayPalOrderFromSession(
$container->get( 'session.handler' )
);
},
'blocks.add-place-order-method' => function ( ContainerInterface $container ) : bool {
/**

View file

@ -10,6 +10,7 @@ declare(strict_types=1);
namespace WooCommerce\PayPalCommerce\Blocks;
use Automattic\WooCommerce\Blocks\Payments\PaymentMethodRegistry;
use WooCommerce\PayPalCommerce\Blocks\Endpoint\GetPayPalOrderFromSession;
use WooCommerce\PayPalCommerce\Blocks\Endpoint\UpdateShippingEndpoint;
use WooCommerce\PayPalCommerce\Button\Assets\SmartButtonInterface;
use WooCommerce\PayPalCommerce\Vendor\Dhii\Container\ServiceProvider;
@ -90,6 +91,16 @@ class BlocksModule implements ModuleInterface {
}
);
add_action(
'wc_ajax_' . GetPayPalOrderFromSession::ENDPOINT,
static function () use ( $c ) {
$endpoint = $c->get( 'blocks.endpoint.get-paypal-order-from-session' );
assert( $endpoint instanceof GetPayPalOrderFromSession );
$endpoint->handle_request();
}
);
// Enqueue frontend scripts.
add_action(
'wp_enqueue_scripts',

View file

@ -0,0 +1,43 @@
<?php
/**
* Get PayPal order from the current session.
*
* @package WooCommerce\PayPalCommerce\Button\Endpoint
*/
declare(strict_types=1);
namespace WooCommerce\PayPalCommerce\Blocks\Endpoint;
use WooCommerce\PayPalCommerce\Button\Endpoint\EndpointInterface;
use WooCommerce\PayPalCommerce\Session\SessionHandler;
class GetPayPalOrderFromSession implements EndpointInterface
{
const ENDPOINT = 'ppc-get-paypal-order-from-session';
/**
* The session handler.
*
* @var SessionHandler
*/
private $session_handler;
public function __construct(SessionHandler $session_handler)
{
$this->session_handler = $session_handler;
}
public static function nonce(): string
{
return self::ENDPOINT;
}
public function handle_request(): bool
{
$order = $this->session_handler->order();
wp_send_json_success($order->id());
return true;
}
}

View file

@ -19,6 +19,7 @@ use WooCommerce\PayPalCommerce\ApiClient\Entity\Money;
use WooCommerce\PayPalCommerce\ApiClient\Entity\PaymentToken;
use WooCommerce\PayPalCommerce\ApiClient\Factory\PayerFactory;
use WooCommerce\PayPalCommerce\ApiClient\Helper\DccApplies;
use WooCommerce\PayPalCommerce\Blocks\Endpoint\GetPayPalOrderFromSession;
use WooCommerce\PayPalCommerce\Blocks\Endpoint\UpdateShippingEndpoint;
use WooCommerce\PayPalCommerce\Button\Endpoint\ApproveOrderEndpoint;
use WooCommerce\PayPalCommerce\Button\Endpoint\ApproveSubscriptionEndpoint;
@ -1159,6 +1160,10 @@ document.querySelector("#payment").before(document.querySelector(".ppcp-messages
'wp_rest_nonce' => wp_create_nonce( 'wc_store_api' ),
'update_shipping_method' => \WC_AJAX::get_endpoint( 'update_shipping_method' ),
),
'get_paypal_order_from_session' => array(
'endpoint' => \WC_AJAX::get_endpoint( GetPayPalOrderFromSession::ENDPOINT ),
'nonce' => wp_create_nonce( GetPayPalOrderFromSession::nonce() ),
),
),
'cart_contains_subscription' => $this->subscription_helper->cart_contains_subscription(),
'subscription_plan_id' => $this->subscription_helper->paypal_subscription_id(),