How to detect button press on shipping information page

FutureAndAHope
Shopify Partner
32 1 16

We are building a checkout extension that sends data to our shipping server to return better quotes when the shipping step is initiated. We need to post the address the customer is entering to our server with email and whether it is a B2B address. The problem we are having is there appears to be no event triggered when the information on the address page is about to be submitted, i.e. no way to detect button press. Because the checkout extension runs in an I frame, I can't read the button press directly. This is a problem for us because we don't want to send the address to our server until it is finalized. It is no good to send partial addresses or the wrong address. It must be the address the customer submitted. Below is the code so far to give an idea of what we are trying to achieve.

 

 

import {useState, useEffect} from 'React';
import {
    reactExtension,
    useBuyerJourneyIntercept,
    useShippingAddress,
    usePurchasingCompany,
    useEmail,
    Banner
} from '@shopify/ui-extensions-react/checkout';
// 1. Choose an extension target
export default reactExtension(
    'purchase.checkout.delivery-address.render-before',
    () => <Extension />,
);

function FreeShippingClub() {
    this.data = {'email': '', 'addressess': [], 'cart': ''};
    this.currentAddress = {};
}

FreeShippingClub.prototype.updateAddressFromValues = function(shippingAddress){
    this.currentAddress['address1'] = shippingAddress.address1;
    this.currentAddress['address2'] = shippingAddress.address2;
    this.currentAddress['city'] = shippingAddress.city;
    this.currentAddress['province'] = shippingAddress.provinceCode;
    this.currentAddress['postal_code'] = shippingAddress.zip;
    this.currentAddress['country_code'] = shippingAddress.countryCode;
}

FreeShippingClub.prototype.updateEmail = function(email){
    this.data.email = email;
}

FreeShippingClub.prototype.IsFreeShippingClubMessage = function(freeShippingClubMemberData, b2b){
    if(!b2b){
        let email_field = this.data['email'];
        if(email_field || email_field.length > 0){

            fetch('https://validate.com?&email=' + encodeURIComponent(email_field))
                .then(response => response.json())
                .then(data => {

                    if(data.data.member === 'Yes'){
                        freeShippingClubMemberData(data);
                    }
                });
        }
    }
}

FreeShippingClub.prototype.sendBeforeCheckout = (b2b) => {
    if(b2b){
        let b2b_formData = new FormData();
        let b2b_data = {};

        b2b_data['address1'] = this.currentAddress['address1'];
        b2b_data['address2'] = this.currentAddress['address2']
        b2b_data['city'] = this.currentAddress['city'];
        b2b_data['country_code'] = this.currentAddress['country_code'];
        b2b_data['province_code'] = this.currentAddress['province'];
        b2b_data['zip'] = this.currentAddress['postal_code'];

        b2b_formData.append('data', JSON.stringify(b2b_data))

        fetch('https://shipping.com/addb2baddress', {
            method: 'POST',
            body: b2b_formData
        });
    } else {
        let fd = new FormData();
        let data = this.data;
        data['addressess'][data['addressess'].length] = this.currentAddress;

        fd.append('data', JSON.stringify(data))
        fetch('https://ourquotes.com/customers.php', {
            method: 'POST',
            body: fd
        });
    }



}

window.freeShippingClubInstance = new FreeShippingClub();

function Extension() {

    const customerEmail = useEmail();
    const shippingAddress = useShippingAddress();
    const purchasingCompany = usePurchasingCompany();
    const [dataFSC, setDataFSC] = useState({});
    const b2b = !(!purchasingCompany);

    useEffect(() => {

        window.freeShippingClubInstance.updateEmail(customerEmail);
        window.freeShippingClubInstance.IsFreeShippingClubMessage(setDataFSC, b2b);

    }, [customerEmail]);

    useEffect(() => {

        window.freeShippingClubInstance.updateAddressFromValues(shippingAddress);

    }, [shippingAddress]);

    useBuyerJourneyIntercept(
        ({canBlockProgress}) => {


            if(shippingAddress.address1.length > 0 && shippingAddress.city.length > 0 && shippingAddress.zip.length > 0){
                window.freeShippingClubInstance.updateAddressFromValues(shippingAddress);
                window.freeShippingClubInstance.sendBeforeCheckout(b2b);
            }

            return {
                    behavior: 'allow',
            };
        },
    );



    // 2. Render a UI
    return (typeof dataFSC['data'] !== 'undefined' ? <Banner status={"info"} title={"FREE SHIPPING CLUB MEMBER &#128293; You have " + dataFSC['data'].number_of_ships_free + " Free Shipping Credit Left."}></Banner> : <></>
    );


}

 

 

Replies 0 (0)