https://ruthforchrist.com/wp-content/plugins/wp-express-checkout/assets/js/wpec-manual-checkout.js?ver=2.4.8

1/* global ppecFrontVars, wpec_manual_checkout_frontend_vars */
2
3class WPECManualCheckout {
4
5    constructor(btnData, wpecHandler) {
6        this.wpecHandler = wpecHandler;
7        this.buttonId = btnData.id;
8        this.mcProceedBtn = document.getElementById('wpec-proceed-manual-checkout-'+ this.buttonId);
9        this.mcForm = document.getElementById( 'wpec-manual-checkout-form-' + this.buttonId );
10
11        this.mcFormSubmitBtn = this.mcForm.querySelector('button.wpec-place-order-btn');
12
13        // TODO: May not required any more.
14        // this.tosCheckbox = document.getElementById( 'wpec-tos-' + this.buttonId );
15        // this.customQuantityInput = document.querySelector( '#wp-ppec-custom-quantity[data-ppec-button-id="' + this.buttonId + '"]' );
16        // this.customAmountInput = document.querySelector( '#wp-ppec-custom-amount[data-ppec-button-id="' + this.buttonId + '"]' );
17        // document.addEventListener('wpec_validate_order', (e) => {
18        //     this.wpecHandler.toggleVisibility(
19        //         document.getElementById( 'wpec-manual-checkout-section-'+ this.buttonId ),
20        //         'block',
21        //         !this.wpecHandler.isElementVisible(document.getElementById( 'place-order-' + wpecHandler.data.id ))
22        //     );
23        // })
24
25        document.dispatchEvent(
26            new CustomEvent('wpec_before_render_manual_checkout_button', {
27                detail: {
28                    handler: this,
29                }
30            })
31        );
32
33        this.init();
34    }
35
36    init(){
37        this.mcForm?.querySelector( '.wpec_same_billing_shipping_enable' )?.addEventListener( 'change', () => {
38            const wpec_address_wrap = this.mcForm?.querySelector( '.wpec_address_wrap' );
39            this.wpecHandler.toggleVisibility(wpec_address_wrap?.querySelector( '.wpec_shipping_address_container' ), 'inherit');
40            this.mcForm?.querySelector( '.wpec_address_wrap' )?.classList.toggle('shipping_enabled');
41        } );
42
43        // TODO: May not required any more.
44        // this.wpecHandler.validateInput( this.tosCheckbox, this.wpecHandler.ValidatorTos );
45        // this.wpecHandler.validateInput( this.customQuantityInput, this.wpecHandler.ValidatorQuantity );
46        // this.wpecHandler.validateInput( this.customAmountInput, this.wpecHandler.ValidatorAmount );
47        this.mcForm?.querySelectorAll( '.wpec_required' ).forEach( (element) => {
48            this.wpecHandler.validateInput( element, this.wpecHandler.ValidatorBilling );
49        } );
50
51        this.mcForm?.addEventListener('submit', (e) => {
52            e.preventDefault();
53
54            this.mcForm.setAttribute("disabled", true);
55
56            const formData = new FormData( this.mcForm);
57
58            this.wpecHandler.displayErrors();
59
60            if (this.mcFormSubmitBtn){
61                this.mcFormSubmitBtn.querySelector("svg").style.display = 'inline';
62                this.mcFormSubmitBtn.setAttribute("disabled", true);
63            }
64
65            // Get first error input if there is any.
66            if (this.hasInputErrors()){
67                this.mcForm.removeAttribute("disabled");
68                if (this.mcFormSubmitBtn) {
69                    this.mcFormSubmitBtn.querySelector("svg").style.display = 'none';
70                    this.mcFormSubmitBtn.removeAttribute("disabled");
71                }
72                return;
73            }
74
75            const billing_address = {
76                address_line_1: formData.get('wpec_billing_address'),
77                admin_area_1: formData.get('wpec_billing_city'),
78                admin_area_2: formData.get('wpec_billing_country'),
79                postal_code: formData.get('wpec_billing_state'),
80                country_code: formData.get('wpec_billing_postal_code'),
81            };
82            const shipping_address = formData.get('wpec_same_billing_shipping_enable') ? billing_address : {
83                address_line_1: formData.get('wpec_shipping_address'),
84                admin_area_1: formData.get('wpec_shipping_city'),
85                admin_area_2: formData.get('wpec_shipping_country'),
86                postal_code: formData.get('wpec_shipping_state'),
87                country_code: formData.get('wpec_shipping_postal_code'),
88            };
89
90            const paymentData = {
91                payer: {
92                    name: {
93                        given_name: formData.get('wpec_billing_first_name'),
94                        surname: formData.get('wpec_billing_last_name'),
95                    },
96                    email_address: formData.get('wpec_billing_email'),
97                    phone: formData.get('wpec_billing_phone'),
98                    address: billing_address,
99                    shipping_address: shipping_address,
100                },
101            }
102
103            document.dispatchEvent(new CustomEvent('wpec_process_manual_checkout', {
104                detail: {
105                    paymentData,
106                    handler: this,
107                }
108            }));
109
110            this.wpecHandler.processPayment(paymentData, 'wpec_process_manual_checkout' );
111        } );
112
113        this.mcForm?.addEventListener('reset', (e)=>{
114            const form = e.target;
115            form.removeAttribute("disabled");
116            if (this.mcFormSubmitBtn){
117                this.mcFormSubmitBtn.querySelector("svg").style.display = 'none';
118                this.mcFormSubmitBtn.removeAttribute("disabled");
119            }
120
121            this.toggleManualCheckout();
122        })
123
124        this.mcProceedBtn?.addEventListener('click',  (e) =>{
125            this.toggleManualCheckout();
126        });
127    }
128
129    hasInputErrors(){
130        const errInput = this.wpecHandler.getScCont().querySelector('.hasError');
131
132        if ( errInput ) {
133            errInput.focus();
134            errInput.dispatchEvent( new Event('change') );
135
136            return true;
137        }
138
139        return false;

140    }
141
142    toggleManualCheckout(){
143        this.wpecHandler.toggleVisibility(this.mcForm, 'inherit');
144        this.wpecHandler.toggleVisibility(this.mcProceedBtn, 'inherit');
145
146        // this.parent = this.wpecHandler; // TODO: For BPCFT support, need to fix this later
147        document.dispatchEvent(new CustomEvent('wpec_toggle_manual_checkout_form', {
148            detail: {
149                handler: this,
150            }
151        }));
152    }
153
154}