2024-08-20 14:19:41 +02:00
|
|
|
import { GooglePayStorage } from '../Helper/GooglePayStorage';
|
2024-08-21 13:52:11 +02:00
|
|
|
import {
|
|
|
|
getWooCommerceCustomerDetails,
|
|
|
|
setPayerData,
|
|
|
|
} from '../../../../ppcp-button/resources/js/modules/Helper/PayerData';
|
2024-08-20 14:19:41 +02:00
|
|
|
|
|
|
|
const CHECKOUT_FORM_SELECTOR = 'form.woocommerce-checkout';
|
|
|
|
|
|
|
|
export class CheckoutBootstrap {
|
|
|
|
/**
|
|
|
|
* @type {GooglePayStorage}
|
|
|
|
*/
|
|
|
|
#storage;
|
|
|
|
|
|
|
|
/**
|
2024-08-27 12:34:50 +02:00
|
|
|
* @type {HTMLFormElement|null}
|
2024-08-20 14:19:41 +02:00
|
|
|
*/
|
2024-08-27 12:34:50 +02:00
|
|
|
#checkoutForm;
|
2024-08-20 14:19:41 +02:00
|
|
|
|
2024-08-27 12:34:50 +02:00
|
|
|
/**
|
|
|
|
* @param {GooglePayStorage} storage
|
|
|
|
*/
|
2024-08-20 14:19:41 +02:00
|
|
|
constructor( storage ) {
|
|
|
|
this.#storage = storage;
|
2024-08-27 12:34:50 +02:00
|
|
|
this.#checkoutForm = CheckoutBootstrap.getCheckoutForm();
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Indicates if the current page contains a checkout form.
|
|
|
|
*
|
|
|
|
* @return {boolean} True if a checkout form is present.
|
|
|
|
*/
|
|
|
|
static isPageWithCheckoutForm() {
|
|
|
|
return null !== CheckoutBootstrap.getCheckoutForm();
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Retrieves the WooCommerce checkout form element.
|
|
|
|
*
|
|
|
|
* @return {HTMLFormElement|null} The form, or null if not a checkout page.
|
|
|
|
*/
|
|
|
|
static getCheckoutForm() {
|
|
|
|
return document.querySelector( CHECKOUT_FORM_SELECTOR );
|
2024-08-20 14:19:41 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Returns the WooCommerce checkout form element.
|
|
|
|
*
|
|
|
|
* @return {HTMLFormElement|null} The form, or null if not a checkout page.
|
|
|
|
*/
|
|
|
|
get checkoutForm() {
|
|
|
|
return this.#checkoutForm;
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
2024-08-27 12:34:50 +02:00
|
|
|
* Initializes the checkout process.
|
2024-08-20 14:19:41 +02:00
|
|
|
*
|
2024-08-27 12:34:50 +02:00
|
|
|
* @throws {Error} If called on a page without a checkout form.
|
2024-08-20 14:19:41 +02:00
|
|
|
*/
|
|
|
|
init() {
|
2024-08-27 12:34:50 +02:00
|
|
|
if ( ! this.#checkoutForm ) {
|
|
|
|
throw new Error(
|
|
|
|
'Checkout form not found. Cannot initialize CheckoutBootstrap.'
|
|
|
|
);
|
2024-08-20 14:19:41 +02:00
|
|
|
}
|
|
|
|
|
2024-08-21 13:52:11 +02:00
|
|
|
this.#populateCheckoutFields();
|
|
|
|
}
|
|
|
|
|
2024-08-27 12:34:50 +02:00
|
|
|
/**
|
|
|
|
* Populates checkout fields with stored or customer data.
|
|
|
|
*/
|
2024-08-21 13:52:11 +02:00
|
|
|
#populateCheckoutFields() {
|
|
|
|
const loggedInData = getWooCommerceCustomerDetails();
|
|
|
|
|
|
|
|
if ( loggedInData ) {
|
2024-08-27 12:34:50 +02:00
|
|
|
// If customer is logged in, we use the details from the customer profile.
|
2024-08-21 13:52:11 +02:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2024-08-20 14:19:41 +02:00
|
|
|
const billingData = this.#storage.getPayer();
|
|
|
|
|
2024-08-21 14:21:45 +02:00
|
|
|
if ( ! billingData ) {
|
|
|
|
return;
|
2024-08-20 14:19:41 +02:00
|
|
|
}
|
2024-08-21 14:21:45 +02:00
|
|
|
|
|
|
|
setPayerData( billingData, true );
|
2024-08-27 12:34:50 +02:00
|
|
|
this.checkoutForm.addEventListener(
|
|
|
|
'submit',
|
|
|
|
this.#onFormSubmit.bind( this )
|
2024-08-21 14:21:45 +02:00
|
|
|
);
|
2024-08-20 14:19:41 +02:00
|
|
|
}
|
|
|
|
|
2024-08-27 12:34:50 +02:00
|
|
|
/**
|
|
|
|
* Clean-up when checkout form is submitted.
|
|
|
|
*
|
|
|
|
* Immediately removes the payer details from the localStorage.
|
|
|
|
*/
|
2024-08-21 13:52:11 +02:00
|
|
|
#onFormSubmit() {
|
2024-08-20 14:19:41 +02:00
|
|
|
this.#storage.clearPayer();
|
|
|
|
}
|
|
|
|
}
|