[IMP] website, *: move all google map options to left panel

*: web_editor

-> Introduce the we-gpspicker widget and improve the way the gmap lib
    is loaded (for Odoo / multiple snippets / ...).

Part of https://github.com/odoo/odoo/pull/49101
task-2091396

1 files changed, 35 insertions, 57 deletions

diff --git a/addons/website/static/src/snippets/s_google_map/options.js b/addons/website/static/src/snippets/s_google_map/options.js
index 9b27d815a66..6aad46f12ad 100644
--- a/addons/website/static/src/snippets/s_google_map/options.js
+++ b/addons/website/static/src/snippets/s_google_map/options.js
@@ -1,78 +1,56 @@
 odoo.define('options.s_google_map_options', function (require) {
 'use strict';
 
-const {Dialog} = require('web_editor.widget');
-const {_t, qweb} = require('web.core');
+const {_t} = require('web.core');
 const options = require('web_editor.snippets.options');
-const {googleScriptLoaded} = require('website.s_google_map');
 
 options.registry.GoogleMap = options.Class.extend({
-    xmlDependencies: ['/website/static/src/xml/s_google_map_modal.xml'],
-    defaultLocation: '(50.854975,4.3753899)',
-
-    /**
-     * @override
-     */
-    onBuilt() {
-        this._super(...arguments);
-
-        let widget = null;
-        this.trigger_up('user_value_widget_request', {
-            name: 'map_options_opt',
-            onSuccess: _widget => widget = _widget,
-        });
-        widget.$el.click();
-    },
 
     //--------------------------------------------------------------------------
     // Options
     //--------------------------------------------------------------------------
 
     /**
-     * Opens the customization dialog.
-     *
      * @see this.selectClass for parameters
      */
-    async map(previewMode, widgetValue, params) {
-        await new Promise(resolve => {
-            this.dialog = new Dialog(this, {
-                size: 'medium',
-                title: _t("Customize your map"),
-                buttons: [
-                    {text: _t("Save"), classes: 'btn-primary', close: true, click: () => {
-                        if (!this.dialog.$('#placeBk').val()) {
-                            this.dialog.$('#placeBk').val(this.defaultLocation);
-                        }
-                        this.$target[0].dataset.mapGps = this.dialog.$('#placeBk').val();
-                        this.$target[0].dataset.pinStyle = this.dialog.$('#pin_style').val();
-                        this.$target[0].dataset.pinAddress = this.dialog.$('#pin_address').val();
-                    }},
-                    {text: _t("Cancel"), close: true}
-                ],
-                $content: $(qweb.render('website.s_google_map_modal'))
-            });
-
-            this.dialog.opened().then(() => {
-                this.dialog.$('#pin_address').val(this.$target[0].dataset.pinAddress);
-                this.dialog.$('#pin_style').val(this.$target[0].dataset.pinStyle);
-                this.dialog.$('#placeBk').val(this.$target[0].dataset.mapGps);
-                const autocomplete = new google.maps.places.Autocomplete(this.dialog.$('#pin_address').get(0), {types: ['geocode']});
-                google.maps.event.addListener(autocomplete, 'place_changed', () => {
-                    const place = autocomplete.getPlace();
-                    this.dialog.$('#placeBk').val(place.geometry ? place.geometry.location : this.defaultLocation);
-                });
-            });
-
-            this.dialog.on('closed', this, () => resolve());
-
-            googleScriptLoaded.then(() => this.dialog.open());
-        });
+    resetMapColor(previewMode, widgetValue, params) {
+        this.$target[0].dataset.mapColor = '';
     },
     /**
      * @see this.selectClass for parameters
      */
-    resetMapColor(previewMode, widgetValue, params) {
-        this.$target[0].dataset.mapColor = '';
+    setFormattedAddress(previewMode, widgetValue, params) {
+        this.$target[0].dataset.pinAddress = params.gmapPlace.formatted_address;
+    },
+    /**
+     * @see this.selectClass for parameters
+     */
+    async showDescription(previewMode, widgetValue, params) {
+        const descriptionEl = this.$target[0].querySelector('.description');
+        if (widgetValue && !descriptionEl) {
+            this.$target.append($(`
+                <div class="description">
+                    <font>${_t('Visit us:')}</font>
+                    <span>${_t('Our office is located in the northeast of Brussels. TEL (555) 432 2365')}</span>
+                </div>`)
+            );
+        } else if (!widgetValue && descriptionEl) {
+            descriptionEl.remove();
+        }
+    },
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * @override
+     */
+    _computeWidgetState(methodName, params) {
+        if (methodName === 'showDescription') {
+            return this.$target[0].querySelector('.description') ? 'true' : '';
+        }
+        return this._super(...arguments);
     },
 });
 });