@subiz/widget-v4 4.1.100 → 4.1.102

package/assets/img/subiz-mono.svg

@@ -1,3 +1,3 @@
 <svg width="21" height="15" viewBox="0 0 21 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M20.2176 15C18.4857 15 16.7537 15 15.0379 15C13.0955 15 11.1693 15 9.22689 15C8.35282 15 7.49492 14.8374 6.65322 14.6259C5.87626 14.4308 5.11549 14.1543 4.38709 13.7802C3.62632 13.3898 2.93029 12.9182 2.29901 12.3489C1.60298 11.7309 1.03645 11.0153 0.631786 10.2021C0.227119 9.38886 0.0166929 8.51059 0.000506273 7.58354C-0.0156804 6.29867 0.356612 5.14391 1.06882 4.103C1.73248 3.09463 2.62274 2.31395 3.6425 1.67964C4.67845 1.02908 5.81151 0.606207 6.99314 0.329716C7.6406 0.183339 8.28807 0.0857536 8.96791 0.0369611C9.37257 0.020697 9.77724 -0.0118315 10.1819 0.00443267C11.0236 0.0206968 11.8653 0.118282 12.6908 0.313452C13.6782 0.541151 14.6332 0.882698 15.5397 1.35436C16.2519 1.7447 16.9156 2.2001 17.5306 2.75308C18.2752 3.43617 18.8579 4.23312 19.2626 5.16018C19.4892 5.68063 19.6349 6.23361 19.7158 6.81912C19.8453 7.86003 19.6997 8.83588 19.3112 9.79547C19.0684 10.3972 18.7285 10.934 18.3238 11.4381C18.1943 11.6008 18.0648 11.7472 17.9353 11.8773C17.8706 11.9423 17.8544 11.9911 17.8867 12.0887C18.1457 12.9019 18.5504 13.6338 19.1817 14.2193C19.4245 14.447 19.6997 14.6585 20.0072 14.8048C20.0881 14.8374 20.1691 14.9024 20.25 14.9349C20.2338 14.9675 20.2338 14.9837 20.2176 15ZM12.8365 8.70576C13.2736 8.70576 13.7268 8.6895 14.1638 8.70576C14.3581 8.70576 14.3904 8.64071 14.3904 8.4618C14.3742 7.81124 14.3742 7.16067 14.3904 6.49384C14.3904 6.31493 14.3419 6.26614 14.1638 6.26614C13.2736 6.2824 12.3995 6.26614 11.5092 6.2824C11.2988 6.2824 11.2664 6.21735 11.2664 6.02218C11.2826 5.14391 11.2664 4.28191 11.2664 3.40364C11.2664 3.241 11.234 3.19221 11.056 3.19221C10.3761 3.20847 9.68012 3.20847 9.00028 3.19221C8.82223 3.19221 8.78986 3.25727 8.78986 3.40364C8.78986 4.28191 8.78986 5.16018 8.78986 6.03844C8.78986 6.21735 8.74129 6.26614 8.56324 6.26614C7.68916 6.24988 6.83127 6.26614 5.95719 6.24988C5.74677 6.24988 5.71439 6.31493 5.71439 6.5101C5.73058 7.16067 5.73058 7.79497 5.71439 8.44554C5.71439 8.62444 5.76295 8.6895 5.94101 8.6895C6.7989 8.67324 7.65679 8.6895 8.51468 8.67324C8.72511 8.67324 8.77367 8.73829 8.77367 8.93346C8.75748 9.81173 8.77367 10.6737 8.75748 11.552C8.75748 11.6984 8.78986 11.7472 8.95172 11.7472C9.63156 11.7309 10.3276 11.7309 11.0074 11.7472C11.1855 11.7472 11.2179 11.6821 11.2179 11.5195C11.2017 10.6412 11.2179 9.76294 11.2179 8.88467C11.2179 8.72203 11.2502 8.67324 11.4283 8.67324C11.9463 8.72203 12.3995 8.70576 12.8365 8.70576Z" fill="#ccc"/>
+<path d="M20.2176 15C18.4857 15 16.7537 15 15.0379 15C13.0955 15 11.1693 15 9.22689 15C8.35282 15 7.49492 14.8374 6.65322 14.6259C5.87626 14.4308 5.11549 14.1543 4.38709 13.7802C3.62632 13.3898 2.93029 12.9182 2.29901 12.3489C1.60298 11.7309 1.03645 11.0153 0.631786 10.2021C0.227119 9.38886 0.0166929 8.51059 0.000506273 7.58354C-0.0156804 6.29867 0.356612 5.14391 1.06882 4.103C1.73248 3.09463 2.62274 2.31395 3.6425 1.67964C4.67845 1.02908 5.81151 0.606207 6.99314 0.329716C7.6406 0.183339 8.28807 0.0857536 8.96791 0.0369611C9.37257 0.020697 9.77724 -0.0118315 10.1819 0.00443267C11.0236 0.0206968 11.8653 0.118282 12.6908 0.313452C13.6782 0.541151 14.6332 0.882698 15.5397 1.35436C16.2519 1.7447 16.9156 2.2001 17.5306 2.75308C18.2752 3.43617 18.8579 4.23312 19.2626 5.16018C19.4892 5.68063 19.6349 6.23361 19.7158 6.81912C19.8453 7.86003 19.6997 8.83588 19.3112 9.79547C19.0684 10.3972 18.7285 10.934 18.3238 11.4381C18.1943 11.6008 18.0648 11.7472 17.9353 11.8773C17.8706 11.9423 17.8544 11.9911 17.8867 12.0887C18.1457 12.9019 18.5504 13.6338 19.1817 14.2193C19.4245 14.447 19.6997 14.6585 20.0072 14.8048C20.0881 14.8374 20.1691 14.9024 20.25 14.9349C20.2338 14.9675 20.2338 14.9837 20.2176 15ZM12.8365 8.70576C13.2736 8.70576 13.7268 8.6895 14.1638 8.70576C14.3581 8.70576 14.3904 8.64071 14.3904 8.4618C14.3742 7.81124 14.3742 7.16067 14.3904 6.49384C14.3904 6.31493 14.3419 6.26614 14.1638 6.26614C13.2736 6.2824 12.3995 6.26614 11.5092 6.2824C11.2988 6.2824 11.2664 6.21735 11.2664 6.02218C11.2826 5.14391 11.2664 4.28191 11.2664 3.40364C11.2664 3.241 11.234 3.19221 11.056 3.19221C10.3761 3.20847 9.68012 3.20847 9.00028 3.19221C8.82223 3.19221 8.78986 3.25727 8.78986 3.40364C8.78986 4.28191 8.78986 5.16018 8.78986 6.03844C8.78986 6.21735 8.74129 6.26614 8.56324 6.26614C7.68916 6.24988 6.83127 6.26614 5.95719 6.24988C5.74677 6.24988 5.71439 6.31493 5.71439 6.5101C5.73058 7.16067 5.73058 7.79497 5.71439 8.44554C5.71439 8.62444 5.76295 8.6895 5.94101 8.6895C6.7989 8.67324 7.65679 8.6895 8.51468 8.67324C8.72511 8.67324 8.77367 8.73829 8.77367 8.93346C8.75748 9.81173 8.77367 10.6737 8.75748 11.552C8.75748 11.6984 8.78986 11.7472 8.95172 11.7472C9.63156 11.7309 10.3276 11.7309 11.0074 11.7472C11.1855 11.7472 11.2179 11.6821 11.2179 11.5195C11.2017 10.6412 11.2179 9.76294 11.2179 8.88467C11.2179 8.72203 11.2502 8.67324 11.4283 8.67324C11.9463 8.72203 12.3995 8.70576 12.8365 8.70576Z" fill="#aaa"/>
 </svg>

package/assets/less/form.less

@@ -1,4 +1,5 @@
-.form-label { // todo: remove this
+.form-label {
+	// todo: remove this
 	margin-top: 15px;
 }
 
@@ -19,7 +20,7 @@ textarea.form-control {
 }
 
 input.form-control[disabled] {
-	background: #F9F9F9;
+	background: #f9f9f9;
 }
 .form-control--container {
 	.form-control--check {
@@ -39,27 +40,39 @@ input.form-control[disabled] {
 	.color(@red);
 }
 
-input[type='text'].form-control.input--error, input[type='number'].form-control.input--error,input[type='date'].form-control.input--error,
-textarea.form-control.input--error, select.form-control.input--error{
+input[type='text'].form-control.input--error,
+input[type='number'].form-control.input--error,
+input[type='date'].form-control.input--error,
+textarea.form-control.input--error,
+select.form-control.input--error {
 	border: 1px solid red;
 }
 
-input[type='text'].form-control, input[type='number'].form-control,input[type='date'].form-control,
-textarea.form-control, select.form-control {
+input[type='text'].form-control,
+input[type='number'].form-control,
+input[type='date'].form-control,
+textarea.form-control,
+select.form-control {
 	width: 100%;
 
 	border: 1px solid #d8d8d8;
 	border-radius: 5px;
 
 	padding: 8px;
+	&:hover {
+		border: 1px solid #888;
+	}
 }
 
 // Fix select display not fully text on Safari iOs
 select.form-control {
-  padding: 1px 8px;
+	padding: 1px 8px;
 }
-input[type='text'].form-control:focus, input[type='number'].form-control:focus,input[type='date'].form-control:focus,
-textarea.form-control:focus, select.form-control:focus {
+input[type='text'].form-control:focus,
+input[type='number'].form-control:focus,
+input[type='date'].form-control:focus,
+textarea.form-control:focus,
+select.form-control:focus {
 	border: 1px solid @primary-color;
 }
 
@@ -89,12 +102,12 @@ textarea.form-control:focus, select.form-control:focus {
 		height: 25px;
 	}
 
-	input[type=radio]{
+	input[type='radio'] {
 		position: absolute;
 		visibility: hidden;
 	}
 
-	.radio--label{
+	.radio--label {
 		padding-left: 22px;
 		display: block;
 		position: relative;
@@ -102,7 +115,7 @@ textarea.form-control:focus, select.form-control:focus {
 		cursor: pointer;
 	}
 
-	.radio--check{
+	.radio--check {
 		display: block;
 		position: absolute;
 		border: 1px solid #aaa;
@@ -112,8 +125,8 @@ textarea.form-control:focus, select.form-control:focus {
 		top: 0px;
 		left: 0px;
 		z-index: 5;
-		transition: border .15s linear;
-		-webkit-transition: border .15s linear;
+		transition: border 0.15s linear;
+		-webkit-transition: border 0.15s linear;
 	}
 
 	.radio--check:hover {
@@ -134,11 +147,11 @@ textarea.form-control:focus, select.form-control:focus {
 		-webkit-transition: background 0.15s linear;
 	}
 
-	input[type=radio]:checked ~ .radio--check {
+	input[type='radio']:checked ~ .radio--check {
 		border: 1px solid @primary-color;
 	}
 
-	input[type=radio]:checked ~ .radio--check::before {
+	input[type='radio']:checked ~ .radio--check::before {
 		background: @primary-color;
 	}
 }
@@ -153,7 +166,7 @@ textarea.form-control:focus, select.form-control:focus {
 		height: 25px;
 	}
 
-	input[type=checkbox] {
+	input[type='checkbox'] {
 		position: absolute;
 		visibility: hidden;
 	}
@@ -176,8 +189,8 @@ textarea.form-control:focus, select.form-control:focus {
 		top: 0px;
 		left: 0px;
 		z-index: 5;
-		transition: border .15s linear;
-		-webkit-transition: border .15s linear;
+		transition: border 0.15s linear;
+		-webkit-transition: border 0.15s linear;
 	}
 
 	.checkbox--check:hover {
@@ -192,14 +205,14 @@ textarea.form-control:focus, select.form-control:focus {
 		width: 100%;
 		margin: auto;
 		transition: background 0.15s linear;
-		-webkit-transition: background .15s linear;
+		-webkit-transition: background 0.15s linear;
 	}
 
-	input[type=checkbox]:checked ~ .checkbox--check {
+	input[type='checkbox']:checked ~ .checkbox--check {
 		border: 1px solid @primary-color;
 	}
 
-	input[type=checkbox]:checked ~ .checkbox--check::before {
+	input[type='checkbox']:checked ~ .checkbox--check::before {
 		background: @primary-color;
 	}
 }
@@ -207,7 +220,7 @@ textarea.form-control:focus, select.form-control:focus {
 
 .form {
 	.select .form-control {
-		padding-right: 20px ;
+		padding-right: 20px;
 	}
 	select {
 		/*background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik00LjQxMDU4IDYuOTExMDdDNC43MzYwMiA2LjU4NTYzIDUuMjYzNjYgNi41ODU2MyA1LjU4OTA5IDYuOTExMDdMOS45OTk4NCAxMS4zMjE4TDE0LjQxMDYgNi45MTEwN0MxNC43MzYgNi41ODU2MyAxNS4yNjM3IDYuNTg1NjMgMTUuNTg5MSA2LjkxMTA3QzE1LjkxNDUgNy4yMzY1MSAxNS45MTQ1IDcuNzY0MTQgMTUuNTg5MSA4LjA4OTU4TDEwLjU4OTEgMTMuMDg5NkMxMC4yNjM3IDEzLjQxNSA5LjczNjAyIDEzLjQxNSA5LjQxMDU4IDEzLjA4OTZMNC40MTA1OCA4LjA4OTU4QzQuMDg1MTQgNy43NjQxNCA0LjA4NTE0IDcuMjM2NTEgNC40MTA1OCA2LjkxMTA3WiIgZmlsbD0iYmxhY2siLz4KPC9zdmc+") no-repeat right;*/
@@ -235,7 +248,7 @@ textarea.form-control:focus, select.form-control:focus {
 	cursor: pointer;
 	background: #e0e0e0;
 }
-input[type="checkbox"] {
+input[type='checkbox'] {
 	background-color: initial;
 	cursor: default;
 	-webkit-appearance: checkbox;
@@ -245,7 +258,7 @@ input[type="checkbox"] {
 	border: initial;
 }
 
-input[type="radio"] {
+input[type='radio'] {
 	background-color: initial;
 	cursor: default;
 	-webkit-appearance: radio;
@@ -292,7 +305,7 @@ select {
 select {
 	position: relative;
 	display: inline-block;
-	border: 2px #CCCC solid;
+	border: 2px #cccc solid;
 	border-radius: 5px;
 	height: 36px;
 	line-height: 34px;
@@ -333,8 +346,8 @@ select {
 	justify-items: center;
 	font-size: 12px;
 	margin-left: 5px;
-	opacity: .5;
-	content: "\2715";
+	opacity: 0.5;
+	content: '\2715';
 }
 
 .custom-select--wrap-options {
@@ -344,8 +357,8 @@ select {
 	left: 0;
 	top: 100%;
 	border: 1px solid #dadce0;
-	-webkit-box-shadow: 0 4px 16px rgba(0,0,0,.1);
-	box-shadow: 0 4px 16px rgba(0,0,0,.1);
+	-webkit-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
 	border-radius: 5px;
 	width: 100%;
 	background: #fff;
@@ -384,6 +397,6 @@ select {
 }
 
 .custom-select--icon-dropdown path {
-	d: path("M 7 9.5 L 12 14.5 L 17 9.5 H 7 Z");
+	d: path('M 7 9.5 L 12 14.5 L 17 9.5 H 7 Z');
 	fill: black;
 }

package/assets/less/widget.less

@@ -9,7 +9,7 @@
 
 	padding-left: @spacer3;
 	padding-right: @spacer3;
-	padding-bottom: @spacer3;
+	// padding-bottom: @spacer3;
 }
 
 .convo-list--list {
@@ -183,7 +183,9 @@
 	.widget-container.widget-container--hide {
 		top: -100vh;
 		opacity: 0;
-		transition: opacity 0.15s cubic-bezier(1, 0.5, 0.8, 1), bottom 0.15s cubic-bezier(1, 0.5, 0.8, 1);
+		transition:
+			opacity 0.15s cubic-bezier(1, 0.5, 0.8, 1),
+			bottom 0.15s cubic-bezier(1, 0.5, 0.8, 1);
 	}
 }
 
@@ -236,7 +238,9 @@
 .widget-container.widget-container--hide {
 	opacity: 0;
 	visibility: hidden;
-	transition: opacity 0.1s cubic-bezier(1, 0.5, 0.8, 1), visibility 0.1s cubic-bezier(1, 0.5, 0.8, 1);
+	transition:
+		opacity 0.1s cubic-bezier(1, 0.5, 0.8, 1),
+		visibility 0.1s cubic-bezier(1, 0.5, 0.8, 1);
 }
 
 .btn--start-convo {
@@ -299,23 +303,23 @@
 
 	& .poweredby--text {
 		text-decoration: none;
-		padding-left: 12px;
-		padding-right: 12px;
-		padding-top: 5px;
-		padding-bottom: 5px;
-		border-radius: 20px;
-		font-size: 12px;
+		font-size: 13px;
 		.color(#7c7c7c);
 		vertical-align: baseline;
+		.poweredby--subiz-logo {
+			opacity: 0.7;
+			margin-top: -1px;
+			height: 12px;
+		}
+
 		&:hover {
 			.color(#333);
+			.poweredby--subiz-logo {
+				opacity: 1;
+			}
 		}
 
-		.poweredby--subiz-logo {
-			opacity: 1;
-			margin-top: -3px;
-			height: 10px;
-		}
+
 	}
 }
 

package/assets/less/widget_header.less

@@ -45,7 +45,7 @@
 	.widget-header--description {
 		font-size: 15px;
 		white-space: pre-wrap;
-		opacity: 0.7;
+		opacity: 0.8;
 		flex: 1;
 		.color(@text-color);
 		margin-top: 2.5px;

package/compiled_src/chatbox/PoweredBy.js

@@ -18,8 +18,8 @@ function PoweredBy(props) {
     target: "_blank",
     title: "Subiz"
   }, (0, _preact.h)("img", {
-    width: "14",
-    height: "10",
+    width: "17",
+    height: "12",
     class: "poweredby--subiz-logo",
     src: logo,
     alt: "powerred by subiz"

package/compiled_src/chatbox/Widget.js

@@ -36,13 +36,6 @@ class Widget extends _common.Com {
     _defineProperty(this, "msgInput", (0, _preact.createRef)());
     _defineProperty(this, "formMounted", form => {
       let formData = this.fillForm(form);
-      formData['question'] = {
-        key: 'question',
-        is_required: true,
-        label: this.props.t.i18n(_index.default.get(form, `i18n_question_label`, {})) || form.question_label,
-        type: 'text',
-        value: this.state.quickReplyMessage.text
-      };
       this.setState({
         formData
       });
@@ -272,7 +265,7 @@ class Widget extends _common.Com {
       key: 'lead_source',
       text: 'widget'
     });
-    let firstmsg = _index.default.get(data, 'question.value');
+    let firstmsg = _index.default.get(data, 'question.value', this.props.t('get_started'));
     let groupid = _index.default.get(data, 'group.value', '');
     this._creating = (this._creating || 0) + 1;
     let _creating = this._creating;
@@ -365,6 +358,11 @@ class Widget extends _common.Com {
       formData
     });
   }
+  onKeywordField(e, form, formName, key) {
+    if (e.code == 'Enter') {
+      this.submitPrechatForm(form, formName);
+    }
+  }
   onInputChange(key, val) {
     this.wasFormInputed = true;
     let formData = _index.default.cloneDeep(this.state.formData);
@@ -488,7 +486,7 @@ class Widget extends _common.Com {
       value: item.value
     }, this.props.t.i18n(item.i18n_label) || item.label || item.value)));
   }
-  renderFields() {
+  renderFields(form, formName) {
     if (_index.default.size(this.state.formData) === 0) return null;
     let $fields = _index.default.map(this.state.formData, (field, key) => {
       if (this.state.quickReplyMessage.text && key === 'question') return null;
@@ -520,6 +518,7 @@ class Widget extends _common.Com {
             value: field.value || '',
             onInput: e => this.onInputChange(key, e.target.value),
             onChange: e => this.onInputChange(key, e.target.value),
+            onKeyDown: e => this.onKeywordField(e, form, formName, key),
             ref: ref => {
               this['form_' + encode(key)] = ref;
             },
@@ -631,7 +630,7 @@ class Widget extends _common.Com {
       class: "flex-grow-1"
     }, (0, _preact.h)("div", {
       class: "form mt-3 pl-3 pr-3 pt-3 pb-3 d-flex flex-column"
-    }, (0, _preact.h)("div", null, title), this.renderFields())), (0, _preact.h)(_PoweredBy.default, {
+    }, (0, _preact.h)("div", null, title), this.renderFields(form, formName))), (0, _preact.h)(_PoweredBy.default, {
       store: this.props.store,
       t: this.props.t
     })), (0, _preact.h)("div", {
@@ -746,9 +745,7 @@ class Widget extends _common.Com {
   }
   fillQuickReplyToQuestion(message) {
     let formData = this.state.formData;
-    if (formData) {
-      _index.default.set(formData, 'question.value', message.text);
-    }
+    if (formData) _index.default.set(formData, 'question.value', message.text || this.props.t('get_started'));
     this.setState({
       formData,
       quickReplyMessage: message
@@ -995,12 +992,14 @@ class Widget extends _common.Com {
         }))
       };
     }
-    data['question'] = {
-      key: 'question',
-      is_required: true,
-      label: this.props.t.i18n(_index.default.get(form, `i18n_question_label`, {})) || form.question_label,
-      type: 'text'
-    };
+    if (form.question_required) {
+      data['question'] = {
+        key: 'question',
+        is_required: true,
+        label: this.props.t.i18n(_index.default.get(form, `i18n_question_label`, {})) || form.question_label,
+        type: 'text'
+      };
+    }
     if (this.isFormChanged(this.state.formData, data)) {
       this.setState({
         formData: data
@@ -1055,6 +1054,15 @@ class Widget extends _common.Com {
         }))
       };
     }
+    if (form.question_required) {
+      formData['question'] = {
+        key: 'question',
+        is_required: true,
+        label: this.props.t.i18n(_index.default.get(form, `i18n_question_label`, {})) || form.question_label,
+        type: 'text',
+        value: this.state.quickReplyMessage.text
+      };
+    }
     return data;
   }
 }