Swiftcomplete BigCommerce Integration: Add Address Autocomplete to Checkout

<script src="<https://unpkg.com/react-trigger-change/dist/react-trigger-change.js>"></script>
<script>
	// BigCommerce SwiftComplete Integration
	// This script integrates the SwiftComplete address finder into the BigCommerce checkout process.
	// It dynamically creates an address finder input field and populates the shipping address fields based on the user's selection.
	// It uses the SwiftComplete API to fetch address suggestions and populate the fields accordingly.
	// The script waits for the page to load, checks for the presence of the shipping address container,
	// and if found, creates the address finder input field. It then initializes the SwiftComplete functionality.
	
	// Variables
  loadedTimeout = null;
  *#########################################
  Insert your API key here to run the demo:
  #########################################*/
  var SWIFTCOMPLETE_API_KEY = "INSERT_KEY_HERE";
  var SWIFTCOMPLETE_SEARCH_FIELD_ID = "INSERT_TEXT_FIELD_ID_HERE";

    !function (e, t, c) {
    e.swiftcomplete = e.swiftcomplete || {};
    var s = t.createElement("script");
    s.async = !0, s.src = c;
    var r = t.getElementsByTagName("script")[0];
    r.parentNode.insertBefore(s, r)
        }(window, document, "https://assets.swiftcomplete.com/js/swiftlookup.js");

window.addEventListener('load', loadSwiftcompleteBigCommerceIntegration);

function loadSwiftcompleteBigCommerceIntegration() {
    var container = document.getElementById('checkoutShippingAddress');

    if (!container) {
        loadedTimeout = setTimeout(loadSwiftcompleteBigCommerceIntegration, 500);
        return;
    }

    var shippingContainers = container.getElementsByClassName('checkout-address');
    var addressLine1Field = null;
    var shippingContainer = null;

    if (shippingContainers.length == 1) {
        addressLine1Field = document.getElementById('addressLine1Input').parentNode.parentNode;
        shippingContainer = shippingContainers[0];
    } else {
        loadedTimeout = setTimeout(loadSwiftcompleteBigCommerceIntegration, 500);
        return;
    }

		var el = document.createElement('div');
    el.className = 'dynamic-form-field floating-form-field';

    var fieldEl = document.createElement('div');
    fieldEl.className = 'form-field';
    
    var searchEl = document.createElement('input');
    searchEl.className = 'form-input optimizedCheckout-form-input floating-input';
    searchEl.id = 'swiftcomplete-shipping-address-finder';
    fieldEl.appendChild(searchEl);
    el.appendChild(fieldEl);

    var labelEl = document.createElement('label');
    labelEl.innerText = 'Address Finder';
    labelEl.className = 'floating-label form-label optimizedCheckout-form-label';
    labelEl.setAttribute('for', 'swiftcomplete-shipping-address-finder');
    fieldEl.appendChild(labelEl);

    shippingContainer.insertBefore(el, addressLine1Field);

    initialiseSwiftcomplete();
}

function initialiseSwiftcomplete() {
    swiftcomplete.runWhenReady(function () {
        // Dynamically find the custom field with a label containing "what3words", "what3words address", or "w3w"
        let w3wField = null;
        const labels = document.querySelectorAll('label.form-label');

        labels.forEach(label => {
            const labelText = label.innerText.toLowerCase().trim();
            if (labelText.includes('what3words') || labelText.includes('w3w')) {
                const inputId = label.getAttribute('for'); // Get the associated input field ID
                w3wField = document.getElementById(inputId); // Find the input field
            }
        });

        // Initialize SwiftComplete with the dynamically found field
        const searchField = document.getElementById(SWIFTCOMPLETE_SEARCH_FIELD_ID);
        swiftcomplete.controls[SWIFTCOMPLETE_SEARCH_FIELD_ID] = new swiftcomplete.SwiftLookup({
            field: searchField,
            key: SWIFTCOMPLETE_API_KEY,
            searchFor: "what3words,address",
            emptyQueryMode: 'prompt',
            promptText: 'Type your address, what3words, or postcode',
            noResultsText: 'No addresses found - click here to enter your address manually',
            manualEntryText: 'Can\'t find your address? Click here to enter manually',
            scrollToFieldOnFocus: true,
            populateLineFormat: [
                { field: document.getElementById("companyInput"), format: "Company" },
                { field: document.getElementById("addressLine1Input"), format: "BuildingName, BuildingNumber SecondaryRoad, Road" },
                { field: document.getElementById("addressLine2Input"), format: "SubBuilding" },
                { field: document.getElementById("cityInput"), format: "TertiaryLocality, SecondaryLocality, PRIMARYLOCALITY" },
                { field: document.getElementById("provinceInput"), format: "" },
                { field: document.getElementById("postCodeInput"), format: "POSTCODE" },
                ...(w3wField ? [{ field: w3wField, format: "what3words" }] : []) // Add the w3w field if found
            ],
        });
        const control = swiftcomplete.controls[SWIFTCOMPLETE_SEARCH_FIELD_ID];
        control.groupBy('road,emptyroad');
        control.setMaxAutocompleteResults(5);
        control.setMaxContainerResults(100);
        control.setCountries('gb');
    });
}