@subiz/widget-v4 4.1.125 → 4.1.129

package/assets/less/avatar.less

@@ -14,9 +14,6 @@
 	border-radius: 35px;
 }
 
-.group-avatar--secondary {
-}
-
 .group-avatar--secondary .avatar {
 	position: relative;
 	width: 35px;
@@ -24,6 +21,13 @@
 	border-radius: 35px;
 }
 
+.avatar.avatar__account {
+	width: 38px;
+	height: 38px;
+	border-radius: 8px;
+	margin-right: @spacer2;
+}
+
 .group-avatar--primary .group-avatar--agent-middle {
 	width: 50px;
 	height: 50px;

package/assets/less/chatbox.less

@@ -133,10 +133,34 @@ body div#sbz92 {
 	.align-items-end {
 		align-items: flex-end;
 	}
-
+	.justify-content-center {
+		justify-content: center;
+	}
+	.h-full {
+		height: 100%;
+	}
+	.w-full {
+		width: 100%;
+	}
 	.text-muted {
 		.color(@text-muted);
 	}
+  .text-lg {
+    font-size: 18px;
+  }
+  .text-xl {
+    font-size: 20px;
+  }
+  .text-center {
+    text-align: center;
+  }
+  .text-danger {
+    color: #ea3d2f;
+  }
+
+	.text-italic {
+		font-style: italic;
+	}
 
 	// display utils
 	.d-none {
@@ -200,7 +224,6 @@ body div#sbz92 {
 	.mb-3 {
 		margin-bottom: @spacer3;
 	}
-
 	.mb-2 {
 		margin-bottom: @spacer2;
 	}

package/assets/less/form.less

@@ -116,7 +116,10 @@ select.form-control.input--error:focus {
 		display: block;
 		position: relative;
 		width: 100%;
-		height: 25px;
+		margin-top: 5px;
+	}
+	.radio:first-of-type {
+		margin-top: 0;
 	}
 
 	input[type='radio'] {
@@ -180,7 +183,10 @@ select.form-control.input--error:focus {
 		display: block;
 		position: relative;
 		width: 100%;
-		height: 25px;
+		margin-top: 5px;
+	}
+	.checkbox:first-of-type {
+		margin-top: 0;
 	}
 
 	input[type='checkbox'] {
@@ -417,3 +423,72 @@ select {
 	d: path('M 7 9.5 L 12 14.5 L 17 9.5 H 7 Z');
 	fill: black;
 }
+
+// css for form page
+.form-component {
+	margin-bottom: 15px;
+	&:last-child {
+		margin-bottom: 0;
+	}
+
+  &.submitted {
+    margin-bottom: 8px;
+  }
+}
+
+.form-wrapper.form {
+	padding: 20px;
+}
+
+.form-page {
+	max-width: 700px;
+	width: 100%;
+	margin: 0 auto;
+	padding: 40px 20px;
+}
+
+.form-page-header {
+	margin-bottom: 30px;
+	font-size: 18px;
+	font-weight: 500;
+	color: #ccc;
+}
+
+.form-wrapper.form-wrapper-attachment.form {
+	padding: 12px 15px;
+	margin-top: 5px;
+
+	input[type='text'].form-control,
+	input[type='number'].form-control,
+	input[type='date'].form-control,
+	select.form-control,
+	textarea.form-control {
+		padding: 6px 15px;
+	}
+
+	.form-component {
+		margin-bottom: 12px;
+		&:last-child {
+			margin-bottom: 0;
+		}
+
+		&.submitted {
+			margin-bottom: 5px;
+			&:last-child {
+				margin-bottom: 0;
+			}
+		}
+	}
+
+	.label {
+		padding-bottom: 4px;
+	}
+
+	.form-control--valid-input--error {
+		padding-top: 3px;
+	}
+
+	.btn--start-convo {
+		height: 36px;
+	}
+}

package/assets/less/message.less

@@ -768,6 +768,10 @@ a.product_attachment__title {
 .agent-convo-event-wrapper {
 	max-width: 85%;
 	margin-top: 5px;
+
+	&.full {
+		max-width: 100%;
+	}
 }
 
 .agent-convo-event-inner {

package/assets/less/widget.less

@@ -541,3 +541,23 @@
 	.color(@primary-color);
 	margin: 0;
 }
+
+.widget-internet-status {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  font-size: 14px;
+  z-index: 10;
+  text-align: center;
+  padding: 6px 5px;
+
+  &.negative {
+    background-color: #212325;
+    color: #fff;
+  }
+  &.positive {
+    background-color: #19b600;
+    color: #fff;
+  }
+}

package/assets/less/widget_header.less

@@ -44,7 +44,7 @@
 
 	.widget-header--description {
 		font-size: 14px;
-		white-space: pre-wrap;
+		overflow: hidden;
 		opacity: 0.7;
 		flex: 1;
 		.color(@text-color);
@@ -167,23 +167,43 @@
 	height: 24px;
 	display: block;
 	position: relative;
+}
+
+/*
+.widget-header--button-close {
+	display: flex;
+	border-radius: 6px;
+	justify-self: flex-end;
+	align-items: center;
+	align-self: flex-start;
 
-	cursor: pointer;
-	scale: 1;
-	transition:
-		scale 0.15s ease,
-		filter 0.15s ease;
 	filter: brightness(0.95);
 	&:hover {
+		opacity: 1;
 		filter: brightness(1.1);
 		scale: 1.1;
 	}
 }
-
+*/
 .widget-header--wrap-button-back {
 	display: flex;
 	position: relative;
 	margin-right: @spacer1;
+
+	cursor: pointer;
+	scale: 1;
+	opacity: 0.6;
+
+	transition:
+		opacity 0.15s ease,
+		scale 0.15s ease,
+		filter 0.15s ease;
+	filter: brightness(0.95);
+	&:hover {
+		opacity: 1;
+		filter: brightness(1.1);
+		scale: 1.1;
+	}
 }
 
 .fade-enter-active,

package/compiled_src/chatbox/ChatButton.js

@@ -33,9 +33,15 @@ class ChatButton extends _common.Com {
           isquickreplies = true;
         }
       });
-      if (isquickreplies) return;
-      var tags = _index.default.filter(_index.default.map(this.renderMessagePreview(ev), tag => _index.default.trim(tag)), a => a);
-      if (_index.default.size(tags) > 0) this.setState({
+      let format = _index.default.get(ev, 'data.message.format');
+      let block = _index.default.get(ev, 'data.message.block');
+      if (block || format == 'block') {
+        if (_index.default.isBlockEmpty(block) && isquickreplies) return;
+      } else {
+        let message = _index.default.get(ev, 'data.message.text') || '';
+        if (!message && isquickreplies) return;
+      }
+      this.setState({
         displayPreview: true,
         previewEvent: ev
       });
@@ -349,11 +355,20 @@ class ChatButton extends _common.Com {
   }
   renderMessagePreview(ev, defmsg) {
     defmsg = defmsg || this.props.t('sent_you_a_message');
-    var format = _index.default.get(ev, 'data.message.format');
+    let format = _index.default.get(ev, 'data.message.format');
     let block = _index.default.get(ev, 'data.message.block');
-    if (block || format == 'block') return (0, _preact.h)(_block.default, {
-      block: block
-    });
+    if (block || format == 'block') {
+      if (_index.default.isBlockEmpty(block)) {
+        let attachments = _index.default.get(ev, 'data.message.attachments');
+        if (_index.default.size(attachments) > 0) {
+          return (0, _preact.h)("div", null, `${this.props.t('send')} ${_index.default.size(attachments)} ${_index.default.size(attachments) > 1 ? this.props.t('attachments') : this.props.t('attachment')}`);
+        }
+        return defmsg;
+      }
+      return (0, _preact.h)(_block.default, {
+        block: block
+      });
+    }
     let message = _index.default.get(ev, 'data.message.text', defmsg);
     if (!message && _index.default.size(_index.default.get(ev, 'data.message.attachments')) > 0) message = defmsg;
     if (!message) return null;

package/compiled_src/chatbox/ConnectionStatus.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _index = _interopRequireDefault(require("../util/index.js"));
+var _common = require("../common.js");
+var _preact = require("preact");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+class ConnectionStatus extends _common.Com {
+  constructor(props) {
+    super(props);
+    _defineProperty(this, "onChangeConnectionStatus", () => {
+      let newstatus = this.props.store.getConnectionStatus();
+      let currentstatus = this.state.status;
+      this.setState({
+        status: newstatus
+      });
+      if (currentstatus !== 'active' && newstatus === 'active') this.changeStatusFailedToSuccess();
+    });
+    _defineProperty(this, "changeStatusFailedToSuccess", () => {
+      this.setState({
+        status: 'just_active'
+      });
+      if (this.props.cid) this.props.store.fetchMoreEvents(this.props.cid);
+      if (this._timeout) clearTimeout(this._timeout);
+      this._timeout = setTimeout(() => {
+        this.setState({
+          status: 'active'
+        });
+      }, 2000);
+    });
+    this.props.store.onConnection(this, this.onChangeConnectionStatus);
+    this.state = {
+      status: this.props.store.getConnectionStatus()
+    };
+  }
+  render() {
+    if (this.state.status === 'active') return;
+    let cls = 'widget-internet-status';
+    let text = '';
+    if (this.state.status !== 'just_active') {
+      cls += ' negative';
+      text = `${this.props.t('network_error')}. ${this.props.t('try_reconnecting')}...`;
+    } else {
+      cls += ' positive';
+      text = this.props.t('reconnect_successfully');
+    }
+    return (0, _preact.h)("div", {
+      class: cls
+    }, text);
+  }
+}
+exports.default = ConnectionStatus;

package/compiled_src/chatbox/Event.js

@@ -9,7 +9,7 @@ var _AudioAttachments = _interopRequireDefault(require("./AudioAttachments.js"))
 var _FileAttachments = _interopRequireDefault(require("./FileAttachments.js"));
 var _ButtonAttachments = _interopRequireDefault(require("./ButtonAttachments.js"));
 var _QuickReplies = _interopRequireDefault(require("./QuickReplies.js"));
-var _FormAttachments = _interopRequireDefault(require("./FormAttachments.js"));
+var _FormAttachment = _interopRequireDefault(require("./FormAttachment2.js"));
 var _FormSubmitAttachments = _interopRequireDefault(require("./FormSubmitAttachments.js"));
 var _GenericTemplateAttachments = _interopRequireDefault(require("./GenericTemplateAttachments.js"));
 var _ProductAttachments = _interopRequireDefault(require("./ProductAttachments.js"));
@@ -245,6 +245,9 @@ class Event extends _common.Com {
   }
   renderMessageSent() {
     let ev = this.props.event.ev;
+    let attachments = _index.default.get(ev, 'data.message.attachments');
+    let hasForm = _index.default.find(attachments, att => att.type === 'form');
+    if (ev.id === 'evshpgaeetsplfqprzmynrvrl') hasForm = true;
     this.tryLoadOrder(ev);
     let t = new _index.default.Date(ev.created).toLocaleString();
     if (_index.default.get(ev, 'by.type') !== 'user') {
@@ -252,10 +255,12 @@ class Event extends _common.Com {
       if (this.props.event.mode === 'lead') $sender = this.renderAgentAvatar(ev);
       let innercls = 'agent-convo-event-inner';
       if (this.props.isLast) innercls += ' last';
+      let wrappercls = 'agent-convo-event-wrapper';
+      if (hasForm) wrappercls += ' full';
       return (0, _preact.h)("div", {
         class: "convo-event agent-message"
       }, $sender, (0, _preact.h)("div", {
-        class: "agent-convo-event-wrapper"
+        class: wrappercls
       }, (0, _preact.h)("div", {
         class: innercls
       }, (0, _preact.h)(_TextMessage.default, {
@@ -280,10 +285,8 @@ class Event extends _common.Com {
         store: this.props.store,
         ev: ev,
         t: this.props.t
-      }), (0, _preact.h)(_FormAttachments.default, {
+      }), (0, _preact.h)(_FormAttachment.default, {
         store: this.props.store,
-        onSubmit: this.props.onFormSubmit,
-        ref: this.refForm,
         ev: ev,
         t: this.props.t
       }), (0, _preact.h)(_FormSubmitAttachments.default, {
@@ -367,10 +370,9 @@ class Event extends _common.Com {
       store: this.props.store,
       ev: ev,
       t: this.props.t
-    }), (0, _preact.h)(_FormAttachments.default, {
+    }), (0, _preact.h)(_FormAttachment.default, {
       store: this.props.store,
-      onSubmit: this.props.onFormSubmit,
-      ref: this.refForm,
+      t: this.props.t,
       ev: ev
     }), (0, _preact.h)(_ProductAttachments.default, {
       t: this.props.t,

package/compiled_src/chatbox/FormAttachment2.js

@@ -0,0 +1,80 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _index = _interopRequireDefault(require("../util/index.js"));
+var _common = require("../common.js");
+var _preact = require("preact");
+var _Form = _interopRequireDefault(require("../form/Form.js"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+class FormAttachment extends _common.Com {
+  constructor(props) {
+    super(props);
+    _defineProperty(this, "onChangeFormValues", values => {
+      this.setState({
+        submission: {
+          values
+        }
+      });
+    });
+    _defineProperty(this, "onSubmit", async () => {
+      this.setState({
+        errorMessage: ''
+      });
+      if (this.state.submiting) return;
+      this.setState({
+        submiting: true
+      });
+      let res = await this.props.store.submitForm2(this.props.token, this.state.submission);
+      if (res.error) {
+        this.setState({
+          submiting: false,
+          errorMessage: _index.default.get(res, 'error.code')
+        });
+        return;
+      }
+      this.setState({
+        submiting: false,
+        isSubmited: true
+      });
+    });
+    this.state = {
+      submission: {},
+      submiting: false,
+      errorMessage: '',
+      isSubmited: false
+    };
+  }
+  render() {
+    let attachments = _index.default.get(this.props.ev, 'data.message.attachments') || [];
+    let formAttachment = _index.default.find(attachments, att => att.type === 'form');
+    if (!formAttachment) return;
+    const {
+      submission,
+      errorMessage,
+      isSubmited,
+      submiting
+    } = this.state;
+    let formSetting = formAttachment.form || {};
+    return (0, _preact.h)("div", {
+      onClick: e => e.stopPropagation()
+    }, (0, _preact.h)(_Form.default, {
+      store: this.props.store,
+      formSetting: formSetting,
+      mode: "attachment",
+      t: this.props.t,
+      submission: submission,
+      errorMessage: errorMessage,
+      isSubmited: isSubmited,
+      submiting: submiting,
+      onChangeFormValues: this.onChangeFormValues,
+      onSubmit: this.onSubmit
+    }));
+  }
+}
+exports.default = FormAttachment;

package/compiled_src/chatbox/Header.js

@@ -14,6 +14,17 @@ class Header extends _common.Com {
   constructor(props) {
     super(props);
   }
+  renderAccountAvatar() {
+    let acc = this.props.store.matchAccount() || {};
+    if (!acc.logo_url) return null;
+    return (0, _preact.h)("img", {
+      width: 38,
+      height: 38,
+      alt: acc.name,
+      class: "avatar avatar__account",
+      src: this.props.store.replaceFileUrl(acc.logo_url) || require('../../assets/img/image_default.png')
+    });
+  }
   render() {
     let headerMode = 'collapsed';
     let cls = 'widget-header';
@@ -49,7 +60,7 @@ class Header extends _common.Com {
     return (0, _preact.h)("div", {
       class: cls,
       style: style
-    }, $back, (0, _preact.h)("div", {
+    }, $back, this.renderAccountAvatar(), (0, _preact.h)("div", {
       class: "widget-header--title-container"
     }, (0, _preact.h)("div", {
       class: "widget-header--title"

package/compiled_src/chatbox/Widget.js

@@ -12,6 +12,7 @@ var _Header = _interopRequireDefault(require("./Header.js"));
 var _MessageInput = _interopRequireDefault(require("./MessageInput.js"));
 var _Events = _interopRequireDefault(require("./Events.js"));
 var _Rating = _interopRequireDefault(require("./Rating.js"));
+var _ConnectionStatus = _interopRequireDefault(require("./ConnectionStatus.js"));
 var _ListField = _interopRequireDefault(require("./ListField.js"));
 var _time = _interopRequireDefault(require("./time.js"));
 var _common = require("../common.js");
@@ -834,6 +835,10 @@ class Widget extends _common.Com {
       onPostback: e => this.createPostback(e),
       t: this.props.t,
       plugin: this.props.plugin
+    }), (0, _preact.h)(_ConnectionStatus.default, {
+      cid: this.props.cid,
+      store: this.props.store,
+      t: this.props.t
     })), (0, _preact.h)(_Rating.default, {
       forceView: this.props.view,
       plugin: this.props.plugin,