initial commit 2

3 files changed, 174 insertions, 0 deletions

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>