initial commit 2

6 files changed, 486 insertions, 0 deletions

diff --git a/addons/website_livechat/static/src/components/discuss/discuss.js b/addons/website_livechat/static/src/components/discuss/discuss.js
new file mode 100644
index 00000000..778b1513
--- /dev/null
+++ b/addons/website_livechat/static/src/components/discuss/discuss.js
@@ -0,0 +1,31 @@
+odoo.define('website_livechat/static/src/components/discuss/discuss.js', function (require) {
+'use strict';
+
+const components = {
+    Discuss: require('mail/static/src/components/discuss/discuss.js'),
+    VisitorBanner: require('website_livechat/static/src/components/visitor_banner/visitor_banner.js'),
+};
+
+components.Discuss.patch('website_livechat/static/src/components/discuss/discuss.js', T =>
+    class extends T {
+
+        /**
+         * @override
+         */
+        _useStoreSelector(props) {
+            const res = super._useStoreSelector(...arguments);
+            const thread = res.thread;
+            const visitor = thread && thread.visitor;
+            return Object.assign({}, res, {
+                visitor,
+            });
+        }
+
+    }
+);
+
+Object.assign(components.Discuss.components, {
+    VisitorBanner: components.VisitorBanner,
+});
+
+});
diff --git a/addons/website_livechat/static/src/components/discuss/discuss.xml b/addons/website_livechat/static/src/components/discuss/discuss.xml
new file mode 100644
index 00000000..af5a1469
--- /dev/null
+++ b/addons/website_livechat/static/src/components/discuss/discuss.xml
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+    <t t-inherit="mail.Discuss.content" t-inherit-mode="extension">
+        <xpath expr="//*[hasclass('o_Discuss_thread')]" position="before">
+            <t t-if="discuss.thread.visitor">
+                <VisitorBanner
+                    visitorLocalId="discuss.thread.visitor.localId"
+                />
+            </t>
+        </xpath>
+    </t>
+</templates>
diff --git a/addons/website_livechat/static/src/components/discuss/discuss_tests.js b/addons/website_livechat/static/src/components/discuss/discuss_tests.js
new file mode 100644
index 00000000..153e55e4
--- /dev/null
+++ b/addons/website_livechat/static/src/components/discuss/discuss_tests.js
@@ -0,0 +1,269 @@
+odoo.define('website_livechat/static/src/components/discuss/discuss_tests.js', function (require) {
+'use strict';
+
+const {
+    afterEach,
+    beforeEach,
+    start,
+} = require('mail/static/src/utils/test_utils.js');
+
+QUnit.module('website_livechat', {}, function () {
+QUnit.module('components', {}, function () {
+QUnit.module('discuss', {}, function () {
+QUnit.module('discuss_tests.js', {
+    beforeEach() {
+        beforeEach(this);
+
+        this.start = async params => {
+            const { env, widget } = await start(Object.assign({}, params, {
+                autoOpenDiscuss: true,
+                data: this.data,
+                hasDiscuss: true,
+            }));
+            this.env = env;
+            this.widget = widget;
+        };
+    },
+    afterEach() {
+        afterEach(this);
+    },
+});
+
+QUnit.test('rendering of visitor banner', async function (assert) {
+    assert.expect(13);
+
+    this.data['res.country'].records.push({
+        id: 11,
+        code: 'FAKE',
+    });
+    this.data['website.visitor'].records.push({
+        id: 11,
+        country_id: 11,
+        display_name: 'Visitor #11',
+        history: 'Home → Contact',
+        is_connected: true,
+        lang: "English",
+        website: "General website",
+    });
+    this.data['mail.channel'].records.push({
+        channel_type: 'livechat',
+        id: 11,
+        livechat_operator_id: this.data.currentPartnerId,
+        livechat_visitor_id: 11,
+        members: [this.data.currentPartnerId, this.data.publicPartnerId],
+    });
+    await this.start({
+        discuss: {
+            context: {
+                active_id: 'mail.channel_11',
+            },
+        },
+    });
+    assert.containsOnce(
+        document.body,
+        '.o_VisitorBanner',
+        "should have a visitor banner",
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_VisitorBanner_avatar',
+        "should show the visitor avatar in the banner",
+    );
+    assert.strictEqual(
+        document.querySelector('.o_VisitorBanner_avatar').dataset.src,
+        "/mail/static/src/img/smiley/avatar.jpg",
+        "should show the default avatar",
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_VisitorBanner_onlineStatusIcon',
+        "should show the visitor online status icon on the avatar",
+    );
+    assert.strictEqual(
+        document.querySelector('.o_VisitorBanner_country').dataset.src,
+        "/base/static/img/country_flags/FAKE.png",
+        "should show the flag of the country of the visitor",
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_VisitorBanner_visitor',
+        "should show the visitor name in the banner",
+    );
+    assert.strictEqual(
+        document.querySelector('.o_VisitorBanner_visitor').textContent,
+        "Visitor #11",
+        "should have 'Visitor #11' as visitor name",
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_VisitorBanner_language',
+        "should show the visitor language in the banner",
+    );
+    assert.strictEqual(
+        document.querySelector('.o_VisitorBanner_language').textContent,
+        "English",
+        "should have 'English' as language of the visitor",
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_VisitorBanner_website',
+        "should show the visitor website in the banner",
+    );
+    assert.strictEqual(
+        document.querySelector('.o_VisitorBanner_website').textContent,
+        "General website",
+        "should have 'General website' as website of the visitor",
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_VisitorBanner_history',
+        "should show the visitor history in the banner",
+    );
+    assert.strictEqual(
+        document.querySelector('.o_VisitorBanner_history').textContent,
+        "Home → Contact",
+        "should have 'Home → Contact' as history of the visitor",
+    );
+});
+
+QUnit.test('livechat with non-logged visitor should show visitor banner', async function (assert) {
+    assert.expect(1);
+
+    this.data['res.country'].records.push({
+        id: 11,
+        code: 'FAKE',
+    });
+    this.data['website.visitor'].records.push({
+        id: 11,
+        country_id: 11,
+        display_name: 'Visitor #11',
+        history: 'Home → Contact',
+        is_connected: true,
+        lang: "English",
+        website: "General website",
+    });
+    this.data['mail.channel'].records.push({
+        channel_type: 'livechat',
+        id: 11,
+        livechat_operator_id: this.data.currentPartnerId,
+        livechat_visitor_id: 11,
+        members: [this.data.currentPartnerId, this.data.publicPartnerId],
+    });
+    await this.start({
+        discuss: {
+            context: {
+                active_id: 'mail.channel_11',
+            },
+        },
+    });
+    assert.containsOnce(
+        document.body,
+        '.o_VisitorBanner',
+        "should have a visitor banner",
+    );
+});
+
+QUnit.test('livechat with logged visitor should show visitor banner', async function (assert) {
+    assert.expect(2);
+
+    this.data['res.country'].records.push({
+        id: 11,
+        code: 'FAKE',
+    });
+    this.data['res.partner'].records.push({
+        id: 12,
+        name: 'Partner Visitor',
+    });
+    this.data['website.visitor'].records.push({
+        id: 11,
+        country_id: 11,
+        display_name: 'Visitor #11',
+        history: 'Home → Contact',
+        is_connected: true,
+        lang: "English",
+        partner_id: 12,
+        website: "General website",
+    });
+    this.data['mail.channel'].records.push({
+        channel_type: 'livechat',
+        id: 11,
+        livechat_operator_id: this.data.currentPartnerId,
+        livechat_visitor_id: 11,
+        members: [this.data.currentPartnerId, 12],
+    });
+    await this.start({
+        discuss: {
+            context: {
+                active_id: 'mail.channel_11',
+            },
+        },
+    });
+    assert.containsOnce(
+        document.body,
+        '.o_VisitorBanner',
+        "should have a visitor banner",
+    );
+    assert.strictEqual(
+        document.querySelector('.o_VisitorBanner_visitor').textContent,
+        "Partner Visitor",
+        "should have partner name as display name of logged visitor on the visitor banner"
+    );
+});
+
+QUnit.test('livechat without visitor should not show visitor banner', async function (assert) {
+    assert.expect(2);
+
+    this.data['res.partner'].records.push({ id: 11 });
+    this.data['mail.channel'].records.push({
+        channel_type: 'livechat',
+        id: 11,
+        livechat_operator_id: this.data.currentPartnerId,
+        members: [this.data.currentPartnerId, 11],
+    });
+    await this.start({
+        discuss: {
+            context: {
+                active_id: 'mail.channel_11',
+            },
+        },
+    });
+    assert.containsOnce(
+        document.body,
+        '.o_MessageList',
+        "should have a message list",
+    );
+    assert.containsNone(
+        document.body,
+        '.o_VisitorBanner',
+        "should not have any visitor banner",
+    );
+});
+
+QUnit.test('non-livechat channel should not show visitor banner', async function (assert) {
+    assert.expect(2);
+
+    this.data['mail.channel'].records.push({ id: 11, name: "General" });
+    await this.start({
+        discuss: {
+            context: {
+                active_id: 'mail.channel_11',
+            },
+        },
+    });
+    assert.containsOnce(
+        document.body,
+        '.o_MessageList',
+        "should have a message list",
+    );
+    assert.containsNone(
+        document.body,
+        '.o_VisitorBanner',
+        "should not have any visitor banner",
+    );
+});
+
+});
+});
+});
+
+});
diff --git a/addons/website_livechat/static/src/components/visitor_banner/visitor_banner.js b/addons/website_livechat/static/src/components/visitor_banner/visitor_banner.js
new file mode 100644
index 00000000..4d0b95a8
--- /dev/null
+++ b/addons/website_livechat/static/src/components/visitor_banner/visitor_banner.js
@@ -0,0 +1,47 @@
+odoo.define('website_livechat/static/src/components/visitor_banner/visitor_banner.js', function (require) {
+'use strict';
+
+const useStore = require('mail/static/src/component_hooks/use_store/use_store.js');
+
+const { Component } = owl;
+
+class VisitorBanner extends Component {
+
+    /**
+     * @override
+     */
+    constructor(...args) {
+        super(...args);
+        useStore(props => {
+            const visitor = this.env.models['website_livechat.visitor'].get(props.visitorLocalId);
+            const country = visitor && visitor.country;
+            return {
+                country: country && country.__state,
+                visitor: visitor ? visitor.__state : undefined,
+            };
+        });
+    }
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    /**
+     * @returns {website_livechat.visitor}
+     */
+    get visitor() {
+        return this.env.models['website_livechat.visitor'].get(this.props.visitorLocalId);
+    }
+
+}
+
+Object.assign(VisitorBanner, {
+    props: {
+        visitorLocalId: String,
+    },
+    template: 'website_livechat.VisitorBanner',
+});
+
+return VisitorBanner;
+
+});
diff --git a/addons/website_livechat/static/src/components/visitor_banner/visitor_banner.scss b/addons/website_livechat/static/src/components/visitor_banner/visitor_banner.scss
new file mode 100644
index 00000000..9f042d2a
--- /dev/null
+++ b/addons/website_livechat/static/src/components/visitor_banner/visitor_banner.scss
@@ -0,0 +1,90 @@
+// -----------------------------------------------------------------------------
+// Layout
+// -----------------------------------------------------------------------------
+
+.o_VisitorBanner {
+    border-bottom-width: $border-width;
+    border-bottom-style: solid;
+    display: flex;
+    flex: 0 0 auto;
+    padding: map-get($spacers, 4) map-get($spacers, 2);
+}
+
+.o_VisitorBanner_avatar {
+    height: map-get($sizes, 100);
+    width: map-get($sizes, 100);
+    object-fit: cover;
+}
+
+.o_VisitorBanner_avatarContainer {
+    height: $o-mail-thread-avatar-size;
+    width: $o-mail-thread-avatar-size;
+    margin-left: map-get($spacers, 1);
+    margin-right: map-get($spacers, 1);
+    position: relative;
+}
+
+.o_VisitorBanner_country {
+    margin-inline-end: map-get($spacers, 1);
+}
+
+.o_VisitorBanner_history {
+    margin-top: map-get($spacers, 1);
+}
+
+.o_VisitorBanner_historyIcon {
+    margin-inline-end: map-get($spacers, 1);
+}
+
+.o_VisitorBanner_language {
+    margin-inline-end: map-get($spacers, 3);
+}
+
+.o_VisitorBanner_languageIcon {
+    margin-inline-end: map-get($spacers, 1);
+}
+
+.o_VisitorBanner_onlineStatusIcon {
+    @include o-position-absolute($bottom: 0, $right: 0);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-flow: column;
+    width: 1.2em;
+    height: 1.2em;
+    line-height: 1.3em;
+    font-size: x-small;
+}
+
+.o_VisitorBanner_sidebar {
+    display: flex;
+    flex: 0 0 $o-mail-message-sidebar-width;
+    justify-content: center;
+    margin-inline-end: map-get($spacers, 2);
+    max-width: $o-mail-message-sidebar-width;
+}
+
+.o_VisitorBanner_visitor {
+    margin-inline-end: map-get($spacers, 3);
+}
+
+.o_VisitorBanner_websiteIcon {
+    margin-inline-end: map-get($spacers, 1);
+}
+
+// ------------------------------------------------------------------
+// Style
+// ------------------------------------------------------------------
+
+.o_VisitorBanner {
+    background: $white;
+    border-bottom-color: gray('400');
+}
+
+.o_VisitorBanner_onlineStatusIcon {
+    color: $o-enterprise-primary-color;
+}
+
+.o_VisitorBanner_visitor {
+    font-weight: $font-weight-bold;
+}
diff --git a/addons/website_livechat/static/src/components/visitor_banner/visitor_banner.xml b/addons/website_livechat/static/src/components/visitor_banner/visitor_banner.xml
new file mode 100644
index 00000000..b1dc4bd3
--- /dev/null
+++ b/addons/website_livechat/static/src/components/visitor_banner/visitor_banner.xml
@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="website_livechat.VisitorBanner" owl="1">
+        <div class="o_VisitorBanner">
+            <div class="o_VisitorBanner_sidebar">
+                <div class="o_VisitorBanner_avatarContainer">
+                    <img class="o_VisitorBanner_avatar rounded-circle" t-att-src="visitor.avatarUrl" alt="Avatar"/>
+                    <t t-if="visitor.is_connected">
+                        <i class="o_VisitorBanner_onlineStatusIcon fa fa-circle" title="Online" role="img" aria-label="Visitor is online"/>
+                    </t>
+                </div>
+            </div>
+            <div class="o_VisitorBanner_content">
+                <t t-if="visitor.country">
+                    <img class="o_VisitorBanner_country o_country_flag" t-att-src="visitor.country.flagUrl" t-att-alt="visitor.country.code or visitor.country.name"/>
+                </t>
+                <span class="o_VisitorBanner_visitor" t-esc="visitor.nameOrDisplayName"/>
+                <span class="o_VisitorBanner_language">
+                    <i class="o_VisitorBanner_languageIcon fa fa-comment-o" aria-label="Lang"/>
+                    <t t-esc="visitor.lang"/>
+                </span>
+                <t t-if="visitor.website">
+                    <span class="o_VisitorBanner_website">
+                        <i class="o_VisitorBanner_websiteIcon fa fa-globe" aria-label="Website"/>
+                        <span t-esc="visitor.website"/>
+                    </span>
+                </t>
+                <div class="o_VisitorBanner_history">
+                    <i class="o_VisitorBanner_historyIcon fa fa-history" aria-label="History"/>
+                    <span t-esc="visitor.history"/>
+                </div>
+            </div>
+        </div>
+    </t>
+
+</templates>