@subiz/widget-v4 4.1.19 → 4.1.20

package/assets/img/loading_static.svg

@@ -1,10 +1,10 @@
 <svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M50.6405 31.0668C50.3123 31.1559 49.8798 31.1851 49.5292 31.192C47.2397 31.1957 45.3018 29.2499 45.3778 26.9338L45.4448 14.2026C45.4386 11.9089 47.3787 9.96953 49.6906 10.0481C51.9801 10.0444 53.918 11.9902 53.842 14.3062L53.775 27.0375C53.6695 28.9201 52.3635 30.599 50.6405 31.0668Z" fill="#0C5CEB"/>
-<path d="M49.8863 84.419C49.6402 84.4859 49.4761 84.5304 49.2076 84.515C47.8056 84.5426 46.6876 83.3453 46.6586 81.9406L46.7256 69.2094C46.6966 67.8047 47.8905 66.686 49.2925 66.6585C50.6946 66.6309 51.8125 67.8282 51.8416 69.2329L51.7746 81.9641C51.7589 83.2043 50.953 84.1294 49.8863 84.419Z" fill="#97BAFA"/>
-<path d="M64.6962 34.4895C64.286 34.6009 63.8087 34.4656 63.451 34.1213C62.9665 33.6348 62.9297 32.8503 63.4967 32.3432L72.5108 23.3626C72.9958 22.8777 73.7789 22.8417 74.2857 23.4103C74.7702 23.8968 74.807 24.6813 74.2399 25.1885L65.2259 34.1691C65.0841 34.2959 64.9423 34.4226 64.6962 34.4895Z" fill="#EFF4FE"/>
-<path d="M26.1317 74.8013C25.1471 75.0686 24.0286 74.8426 23.2684 73.9896C22.1505 72.7923 22.0919 70.9542 23.2857 69.8355L32.2998 60.8549C33.4937 59.7361 35.3283 59.6794 36.4463 60.8767C37.5642 62.074 37.6228 63.9121 36.4289 65.0308L27.4149 74.0114C27.0716 74.3695 26.624 74.6676 26.1317 74.8013Z" fill="#699DF8"/>
-<path d="M83.682 49.9048C83.5179 49.9494 83.3538 49.9939 83.2494 49.934L70.5416 49.8531C69.5721 49.8515 68.8342 49.0807 68.8571 48.1916C68.8577 47.2204 69.6262 46.482 70.5137 46.5059L83.2215 46.5867C84.191 46.5883 84.9289 47.3591 84.906 48.2482C84.8831 49.1373 84.3384 49.7266 83.682 49.9048Z" fill="#EFF4FE"/>
-<path d="M29.1731 51.2862C28.9269 51.353 28.5987 51.4421 28.2482 51.449L15.5404 51.3681C13.6835 51.3426 12.2077 49.8011 12.1491 47.963C12.1726 46.1026 13.7097 44.6258 15.5443 44.5691L28.2522 44.65C30.1091 44.6755 31.5848 46.2171 31.6434 48.0551C31.6127 49.5643 30.5679 50.9074 29.1731 51.2862Z" fill="#367BF5"/>
-<path d="M73.727 74.2379C72.9886 74.4384 72.2206 74.2055 71.6317 73.6591L62.6579 64.6187C61.8156 63.788 61.809 62.4656 62.6372 61.6227C63.4655 60.7798 64.7855 60.7745 65.6278 61.6052L74.6016 70.6456C75.4439 71.4763 75.4505 72.7988 74.6223 73.6417C74.4431 73.9552 74.0552 74.1488 73.727 74.2379Z" fill="#C3D7FC"/>
-<path d="M35.5354 36.7576C34.2227 37.114 32.8134 36.7904 31.8221 35.7353L22.8483 26.6949C21.3949 25.2355 21.3441 22.7773 22.8812 21.3005C24.3363 19.846 26.7899 19.7978 28.2656 21.3394L37.2395 30.3798C38.6929 31.8391 38.7437 34.2973 37.2065 35.7741C36.7215 36.2589 36.1098 36.6016 35.5354 36.7576Z" fill="#367BF5"/>
+<path d="M50.6405 31.0668C50.3123 31.1559 49.8798 31.1851 49.5292 31.192C47.2397 31.1957 45.3018 29.2499 45.3778 26.9338L45.4448 14.2026C45.4386 11.9089 47.3787 9.96953 49.6906 10.0481C51.9801 10.0444 53.918 11.9902 53.842 14.3062L53.775 27.0375C53.6695 28.9201 52.3635 30.599 50.6405 31.0668Z" fill="#00000011"/>
+<path d="M49.8863 84.419C49.6402 84.4859 49.4761 84.5304 49.2076 84.515C47.8056 84.5426 46.6876 83.3453 46.6586 81.9406L46.7256 69.2094C46.6966 67.8047 47.8905 66.686 49.2925 66.6585C50.6946 66.6309 51.8125 67.8282 51.8416 69.2329L51.7746 81.9641C51.7589 83.2043 50.953 84.1294 49.8863 84.419Z" fill="#00000033"/>
+<path d="M64.6962 34.4895C64.286 34.6009 63.8087 34.4656 63.451 34.1213C62.9665 33.6348 62.9297 32.8503 63.4967 32.3432L72.5108 23.3626C72.9958 22.8777 73.7789 22.8417 74.2857 23.4103C74.7702 23.8968 74.807 24.6813 74.2399 25.1885L65.2259 34.1691C65.0841 34.2959 64.9423 34.4226 64.6962 34.4895Z" fill="#00000000"/>
+<path d="M26.1317 74.8013C25.1471 75.0686 24.0286 74.8426 23.2684 73.9896C22.1505 72.7923 22.0919 70.9542 23.2857 69.8355L32.2998 60.8549C33.4937 59.7361 35.3283 59.6794 36.4463 60.8767C37.5642 62.074 37.6228 63.9121 36.4289 65.0308L27.4149 74.0114C27.0716 74.3695 26.624 74.6676 26.1317 74.8013Z" fill="#00000055"/>
+<path d="M83.682 49.9048C83.5179 49.9494 83.3538 49.9939 83.2494 49.934L70.5416 49.8531C69.5721 49.8515 68.8342 49.0807 68.8571 48.1916C68.8577 47.2204 69.6262 46.482 70.5137 46.5059L83.2215 46.5867C84.191 46.5883 84.9289 47.3591 84.906 48.2482C84.8831 49.1373 84.3384 49.7266 83.682 49.9048Z" fill="#00000000"/>
+<path d="M29.1731 51.2862C28.9269 51.353 28.5987 51.4421 28.2482 51.449L15.5404 51.3681C13.6835 51.3426 12.2077 49.8011 12.1491 47.963C12.1726 46.1026 13.7097 44.6258 15.5443 44.5691L28.2522 44.65C30.1091 44.6755 31.5848 46.2171 31.6434 48.0551C31.6127 49.5643 30.5679 50.9074 29.1731 51.2862Z" fill="#00000044"/>
+<path d="M73.727 74.2379C72.9886 74.4384 72.2206 74.2055 71.6317 73.6591L62.6579 64.6187C61.8156 63.788 61.809 62.4656 62.6372 61.6227C63.4655 60.7798 64.7855 60.7745 65.6278 61.6052L74.6016 70.6456C75.4439 71.4763 75.4505 72.7988 74.6223 73.6417C74.4431 73.9552 74.0552 74.1488 73.727 74.2379Z" fill="#00000033"/>
+<path d="M35.5354 36.7576C34.2227 37.114 32.8134 36.7904 31.8221 35.7353L22.8483 26.6949C21.3949 25.2355 21.3441 22.7773 22.8812 21.3005C24.3363 19.846 26.7899 19.7978 28.2656 21.3394L37.2395 30.3798C38.6929 31.8391 38.7437 34.2973 37.2065 35.7741C36.7215 36.2589 36.1098 36.6016 35.5354 36.7576Z" fill="#00000022"/>
 </svg>

package/assets/less/chatbox.less

@@ -237,6 +237,15 @@ body div#sbz92 {
 		flex-shrink: 0;
 	}
 
+	.loading {
+		flex: 1;
+		align-items: center;
+		justify-content: center;
+		display: flex;
+		flex-direction: column;
+		background: white
+	}
+
 	@import 'avatar.less';
 	@import 'widget_header.less';
 	@import 'message_input.less';
@@ -246,7 +255,6 @@ body div#sbz92 {
 	@import 'emoji.less';
 	@import 'widget.less';
 	@import 'rating.less';
-	@import 'spinner.less';
 	@import 'order.less';
 	@import 'dropdown_select.less';
 }

package/assets/less/message.less

@@ -57,7 +57,7 @@
 }
 
 .file-attachment--agent .file-attachment--filename {
-	.color(@white);
+	.color(@text-color);
 	text-decoration: underline;
 	text-overflow: ellipsis;
 	white-space: nowrap;
@@ -82,7 +82,7 @@
 }
 
 .file-attachment--agent .file-attachment--download {
-	background: @white;
+	background: @text-color;
 	background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiMwMjY1RkYiIHN0cm9rZS13aWR0aD0iMyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0iZmVhdGhlciBmZWF0aGVyLWFycm93LWRvd24iPjxsaW5lIHgxPSIxMiIgeTE9IjUiIHgyPSIxMiIgeTI9IjE5Ij48L2xpbmU+PHBvbHlsaW5lIHBvaW50cz0iMTkgMTIgMTIgMTkgNSAxMiI+PC9wb2x5bGluZT48L3N2Zz4K');
 	background-size: 15px 15px;
 	background-repeat: no-repeat;
@@ -111,7 +111,7 @@
 	margin: 5px 0 0;
 	display: inline-block;
 	background-color: @primary-color;
-	.color(@white);
+	.color(@text-color);
 	padding: 10px 14px 10px 14px;
 }
 
@@ -323,7 +323,7 @@ a.message_error {
 
 .form-attachment--submit-btn {
 	background-color: @primary-color;
-	.color(@white);
+	.color(@text-color);
 	width: 100%;
 	margin-top: 10px;
 	border-radius: 7px;
@@ -331,7 +331,7 @@ a.message_error {
 	text-align: center;
 	font-size: 15px;
 	&:hover {
-		.color(@white);
+		.color(@text-color);
 	}
 }
 

package/assets/less/widget.less

@@ -234,7 +234,7 @@
 	padding-left: 32px;
 	padding-right: 32px;
 	height: 40px;
-	.color(@white);
+	.color(@text-color);
 	font-size: 16px;
 	line-height: 20px;
 	text-align: center;
@@ -243,6 +243,7 @@
 	align-items: center;
 	margin-left: auto;
 	margin-right: auto;
+	margin-bottom: @spacer3;
 	&::after {
 		display: none;
 	}

package/assets/less/widget_header.less

@@ -4,7 +4,7 @@
 	// transition: height 0.2s;
 	border-radius: 15px 15px 0px 0px;
 	background: @background;
-	.color(@white);
+	.color(@text-color);
 	width: 100%;
 
 	.widget-header--total-unread-convo {
@@ -38,7 +38,7 @@
 		overflow: hidden;
 		text-overflow: ellipsis;
 		font-size: 16px;
-		.color(@white);
+		.color(@text-color);
 	}
 
 	.widget-header--description {
@@ -46,7 +46,7 @@
 		white-space: pre-wrap;
 		opacity: 0.8;
 		flex: 1;
-		.color(@white);
+		.color(@text-color);
 		margin-top: 2.5px;
 		position: relative;
 	}
@@ -219,7 +219,7 @@
 }
 
 .social__introduction {
-	.color(@white);
+	.color(@text-color);
 	max-height: 72px;
 	overflow: hidden;
   display: -webkit-box;

package/compiled_src/chatbox/Events.js

@@ -68,7 +68,7 @@ class Events extends _common.Com {
     if (this.state.loading || this.props.creating) {
       $loading = (0, _preact.h)(_spinner.default, {
         static: true,
-        mode: "blue",
+        mode: _index.default.get(this.props.chatbox, 'primary_color', 'dark'),
         size: "120",
         center: true
       });

package/compiled_src/chatbox/spinner.js

@@ -10,37 +10,23 @@ const loadingimg = require('../../assets/img/loading_static.svg');
 class Spinner extends _common.Com {
   render() {
     let mode = (this.props.mode + '').toLowerCase();
-    let mainColor = mode === 'dark' ? '#000000dd' : mode === 'blue' ? 'rgba(52, 152, 220, .8)' : '#ffffffdd';
-    let borderColor = mode === 'dark' ? '#00000055' : mode === 'blue' ? 'rgba(52, 152, 220, .15)' : '#ffffff55';
+    let mainColor = mode === 'dark' ? '#000000dd' : mode === 'blue' ? 'rgba(52, 152, 220, .8)' : mode;
     let size = this.props.size || 14;
     let borderWidth = Math.ceil(size / 14);
-    let style = `width: ${size}px !important;height: ${size}px!important;color: ${borderColor} !important;border-width: ${borderWidth}px !important;
-    border-left-color: ${borderColor} !important;border-top-color: ${borderColor} !important;
-    border-bottom-color: ${borderColor} !important;border-right-color: ${mainColor} !important;`;
-    if (this.props.static) {
-      let style = `width: ${size}px !important;height: ${size}px !important;`;
-      if (size < 40) return (0, _preact.h)(LoaderIcon, {
-        size: size + '',
-        style: `stroke:${mainColor}`
-      });
-      if (this.props.center) {
-        return (0, _preact.h)("div", {
-          class: "loading"
-        }, (0, _preact.h)("img", {
-          alt: "loading",
-          style: style,
-          src: loadingimg
-        }));
-      }
-      return (0, _preact.h)("img", {
+    let style = `width: ${size}px !important;height: ${size}px !important;`;
+    if (this.props.center) {
+      return (0, _preact.h)("div", {
+        class: "loading"
+      }, (0, _preact.h)("img", {
         alt: "loading",
         style: style,
         src: loadingimg
-      });
+      }));
     }
-    return (0, _preact.h)("div", {
-      class: "spinner1",
-      style: style
+    return (0, _preact.h)("img", {
+      alt: "loading",
+      style: style,
+      src: loadingimg
     });
   }
 }

package/compiled_src/util/common.js

@@ -156,10 +156,7 @@ function getMsgField(ev, fieldName) {
 function isObject(item) {
   return item && typeof item === 'object' && !Array.isArray(item);
 }
-function merge(target) {
-  for (var _len = arguments.length, sources = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-    sources[_key - 1] = arguments[_key];
-  }
+function merge(target, ...sources) {
   if (!sources.length) return target;
   const source = sources.shift();
   if (isObject(target) && isObject(source)) {

package/compiled_src/util/order.js

@@ -14,8 +14,7 @@ op.map = common.map;
 op.each = common.each;
 op.size = common.size;
 op.find = common.find;
-function getProductPropName(product) {
-  let seperator = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ' - ';
+function getProductPropName(product, seperator = ' - ') {
   let options = op.get(product, 'options', []);
   let props = op.get(product, 'props', []);
   let multiPropsOptions = op.filter(options, option => op.size(option.values) > 1);
@@ -26,8 +25,7 @@ function getProductPropName(product) {
   });
   return names.join(seperator);
 }
-function getOrderDisplayName() {
-  let order = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+function getOrderDisplayName(order = {}) {
   return order.number || order.id || '';
 }
 function displayOrderShippingAddress(order, isShorten) {

package/compiled_src/util/pubsub.js

@@ -14,12 +14,9 @@ class Pubsub {
   }
   publish(topic, payload, payload2, payload3) {
     this.listeners[topic] = filter(this.listeners[topic], sub => sub.obj._isMounted);
-    map(this.listeners[topic], _ref => {
-      let {
-        cb
-      } = _ref;
-      return cb(payload, payload2, payload3);
-    });
+    map(this.listeners[topic], ({
+      cb
+    }) => cb(payload, payload2, payload3));
   }
   on2(obj, topic, cb) {
     if (!this.listeners[topic]) this.listeners[topic] = [];