Initial commit: Sale packages

odoo-bringout-oca-ocb-website_sale_autocomplete/website_sale_autocomplete/static/src/js/address_form.js

@@ -0,0 +1,112 @@
+/** @odoo-module */
+
+import publicWidget from 'web.public.widget';
+import { DropPrevious } from 'web.concurrency';
+import { debounce } from "@web/core/utils/timing";
+import { qweb as QWeb } from 'web.core';
+
+publicWidget.registry.AddressForm = publicWidget.Widget.extend({
+    selector: '.oe_cart .checkout_autoformat:has(input[name="street"][data-autocomplete-enabled="1"])',
+    events: {
+        'input input[name="street"]': '_onChangeStreet',
+        'click .js_autocomplete_result': '_onClickAutocompleteResult'
+    },
+    init: function() {
+        this.streetAndNumberInput = document.querySelector('input[name="street"]');
+        this.cityInput = document.querySelector('input[name="city"]');
+        this.zipInput = document.querySelector('input[name="zip"]');
+        this.countrySelect = document.querySelector('select[name="country_id"]');
+        this.stateSelect = document.querySelector('select[name="state_id"]');
+        this.dp = new DropPrevious();
+        this.sessionId = this._generateUUID();
+
+        this._onChangeStreet = debounce(this._onChangeStreet, 200);
+        this._super.apply(this, arguments);
+    },
+
+     /**
+      * Used to generate a unique session ID for the places API.
+      *
+      * @private
+      */
+    _generateUUID: function() {
+        return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) {
+        const r = (Math.random() * 16) | 0, v = c == "x" ? r : (r & 0x3) | 0x8;
+        return v.toString(16);
+        });
+    },
+
+    _hideAutocomplete: function (inputContainer) {
+        const dropdown = inputContainer.querySelector('.dropdown-menu');
+        if (dropdown) {
+            dropdown.remove();
+        }
+    },
+
+    _onChangeStreet: async function (ev) {
+        const inputContainer = ev.currentTarget.parentNode;
+        if (ev.currentTarget.value.length >= 5) {
+            this.dp.add(
+                this._rpc({
+                    route: '/autocomplete/address',
+                    params: {
+                        partial_address: ev.currentTarget.value,
+                        session_id: this.sessionId || null
+                    }
+                })).then((response) => {
+                    this._hideAutocomplete(inputContainer);
+                    inputContainer.appendChild($(QWeb.render("website_sale_autocomplete.AutocompleteDropDown", {
+                        results: response.results
+                    }))[0]);
+                    if (response.session_id) {
+                        this.sessionId = response.session_id;
+                    }
+                }
+            );
+        } else {
+            this._hideAutocomplete(inputContainer);
+        }
+    },
+
+    _onClickAutocompleteResult: async function(ev) {
+        const dropDown = ev.currentTarget.parentNode;
+
+        const spinner = document.createElement('div');
+        dropDown.innerText = '';
+        dropDown.classList.add('d-flex', 'justify-content-center', 'align-items-center');
+        spinner.classList.add('spinner-border', 'text-warning', 'text-center', 'm-auto');
+        dropDown.appendChild(spinner);
+
+        const address = await this._rpc({
+            route: '/autocomplete/address_full',
+            params: {
+                address: ev.currentTarget.innerText,
+                google_place_id: ev.currentTarget.dataset.googlePlaceId,
+                session_id: this.sessionId || null
+            }
+        });
+        if (address.formatted_street_number) {
+            this.streetAndNumberInput.value = address.formatted_street_number;
+        }
+        // Text fields, empty if no value in order to avoid the user missing old data.
+        this.zipInput.value = address.zip || '';
+        this.cityInput.value = address.city || '';
+
+        // Selects based on odoo ids
+        if (address.country) {
+            this.countrySelect.value = address.country;
+            // Let the state select know that the country has changed so that it may fetch the correct states or disappear.
+            this.countrySelect.dispatchEvent(new Event('change', {bubbles: true}));
+        }
+        if (address.state) {
+            // Waits for the stateSelect to update before setting the state.
+            new MutationObserver((entries, observer) => {
+                this.stateSelect.value = address.state;
+                observer.disconnect();
+            }).observe(this.stateSelect, {
+                childList: true, // Trigger only if the options change
+            });
+        }
+        dropDown.remove();
+    },
+});

odoo-bringout-oca-ocb-website_sale_autocomplete/website_sale_autocomplete/static/src/xml/autocomplete.xml

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+
+<templates>
+    <t t-name="website_sale_autocomplete.AutocompleteDropDown">
+        <div t-attf-class="dropdown-menu position-relative #{results.length ? 'show' : ''}">
+            <a class="dropdown-item js_autocomplete_result"
+               t-foreach="results" t-as="result"
+               t-att-data-google-place-id="result['google_place_id']">
+                <t t-out="result['formatted_address']"/>
+            </a>
+            <img class="ms-auto pe-1" src="/website_sale_autocomplete/static/src/img/powered_by_google_on_white.png" alt="Powered by Google"/>
+        </div>
+    </t>
+</templates>

odoo-bringout-oca-ocb-website_sale_autocomplete/website_sale_autocomplete/static/tests/autocomplete_tour.js

@@ -0,0 +1,71 @@
+/** @odoo-module */
+
+import tour from 'web_tour.tour';
+import tourUtils from 'website_sale.tour_utils';
+
+
+function fail (errorMessage) {
+    tour._consume_tour(tour.running_tour, errorMessage);
+}
+
+tour.register('autocomplete_tour', {
+    test: true,
+    url: '/shop', // /shop/address is redirected if no sales order
+}, [{
+    content: "search test product",
+    trigger: 'form input[name="search"]',
+    run: "text A test product",
+},{
+    content: 'Go to the product page',
+    trigger: '.dropdown-item:contains("A test product")'
+}, {
+    content: 'Add to cart',
+    trigger: '#add_to_cart'
+},
+    tourUtils.goToCart(),
+{
+    content: 'Go to process checkout',
+    trigger: 'a:contains("Process Checkout")'
+}, { // Actual test
+    content: 'Input in Street & Number field',
+    trigger: 'input[name="street"]',
+    run: 'text This is a test'
+}, {
+    content: 'Check if results have appeared',
+    trigger: '.js_autocomplete_result',
+    run: function () {}
+}, {
+    content: 'Input again in street field',
+    trigger: 'input[name="street"]',
+    run: 'text add more'
+}, {
+    content: 'Click on the first result',
+    trigger: '.js_autocomplete_result'
+}, {
+    content: 'Verify the autocomplete box disappeared',
+    trigger: 'body:not(:has(.js_autocomplete_result))'
+}, { // Verify test data has been input
+    content: 'Check Street & number have been set',
+    trigger: 'input[name="street"]',
+    run: function () {
+        if (this.$anchor.val() !== '42 A fictional Street') {
+            fail('Street value is not correct : ' + this.$anchor.val())
+        }
+    }
+}, {
+    content: 'Check City is not empty anymore',
+    trigger: 'input[name="city"]',
+    run: function () {
+        if (this.$anchor.val() !== 'A Fictional City') {
+            fail('Street value is not correct : ' + this.$anchor.val())
+        }
+    }
+}, {
+    content: 'Check Zip code is not empty anymore',
+    trigger: 'input[name="zip"]',
+    run: function () {
+        if (this.$anchor.val() !== '12345') {
+            fail('Street value is not correct : ' + this.$anchor.val())
+        }
+    }
+}]);