@subiz/widget-v4 4.1.141 → 4.1.143

package/dist/HASH

@@ -1 +1 @@
-1967c022bc1
+19680dc0775

package/dist/screenshoot.js

@@ -3793,8 +3793,8 @@ function jsonifyTextPlain(param, done) {
     _defineProperty(this, "list_provinces", () => this.apireq.get(`/accounts/${this.accid}/provinces`));
     _defineProperty(this, "list_districts", p => this.apireq.setQuery(p).get(`/accounts/${this.accid}/districts`));
     _defineProperty(this, "list_wards", p => this.apireq.setQuery(p).get(`/accounts/${this.accid}/wards`));
-    _defineProperty(this, "checkFormToken", token => this.api41.get(`/submissions/${token}`));
-    _defineProperty(this, "submitForm2", (token, data) => this.api41.post(`/submissions/${token}`, data));
+    _defineProperty(this, "checkFormToken", (accid, token) => this.api41.addQuery('account-id', accid).get(`/submissions/${token}`));
+    _defineProperty(this, "submitForm2", (accid, token, data) => this.api41.addQuery('account-id', accid).post(`/submissions/${token}`, data));
     _defineProperty(this, "suggest_address", keyword => this.apireq.setQuery({
       keyword: keyword
     }).get(`/accounts/${this.accid}/addresses`));
@@ -4849,8 +4849,8 @@ class Store {
     store_defineProperty(this, "matchIsOpen", () => !!this.kv.match('isopen'));
     store_defineProperty(this, "matchHasManuallyClosed", () => !!this.kv.match('hasManuallyClosed'));
     store_defineProperty(this, "matchClosePreviewAt", () => this.kv.match('close_preview_at') || 0);
-    store_defineProperty(this, "checkFormToken", token => this.api.checkFormToken(token));
-    store_defineProperty(this, "submitForm2", (token, data) => this.api.submitForm2(token, data));
+    store_defineProperty(this, "checkFormToken", (accid, token) => this.api.checkFormToken(accid, token));
+    store_defineProperty(this, "submitForm2", (accid, token, data) => this.api.submitForm2(accid, token, data));
     store_defineProperty(this, "sendPresence", util/* default */.A.throttle(async () => {
       if (this._die) return dieErr;
       await this.readyGate.entry();
@@ -7412,7 +7412,7 @@ class Form2 extends common/* Com */.Mw {
     });
     Form_defineProperty(this, "renderFormComponent", (com, idx) => {
       if (com.type === 'input') return this.renderField(com, idx);
-      if (com.type === 'submit_button') return this.renderSubmitButton(com, idx);
+      if (com.type === 'button') return this.renderSubmitButton(com, idx);
       if (this.props.isSubmited) return;
       return (0,preact_module.h)("div", {
         class: "form-component form-component-block"
@@ -7424,8 +7424,8 @@ class Form2 extends common/* Com */.Mw {
       if (this.props.isSubmited) return;
       return (0,preact_module.h)("div", {
         class: "form-component form-component-submit-button"
-      }, (0,preact_module.h)("div", {
-        class: "form-control--valid-input--error"
+      }, this.props.errorMessage && (0,preact_module.h)("div", {
+        class: "form-control--valid-input--error mb-1"
       }, this.props.errorMessage), (0,preact_module.h)("div", null, (0,preact_module.h)("button", {
         class: "btn--start-convo",
         disabled: this.props.submiting
@@ -7434,7 +7434,7 @@ class Form2 extends common/* Com */.Mw {
     Form_defineProperty(this, "renderField", (com, idx) => {
       let errorMsg = this.state.errorFields[com.key];
       if (this.props.isSubmited) {
-        let val = util/* default */.A.find(this.props.formValues, f => f.key === com.key) || {};
+        let val = util/* default */.A.find(this.props.submission.values, f => f.key === com.key) || {};
         val = val.value || '""';
         val = util/* default */.A.parseJSON(val);
         if (Array.isArray(val)) val = val.join(', ');
@@ -7461,7 +7461,7 @@ class Form2 extends common/* Com */.Mw {
     Form_defineProperty(this, "renderFieldTextInput", (com, idx) => {
       let cls = 'form-control';
       if (this.state.errorFields[com.key]) cls = 'form-control input--error';
-      let val = util/* default */.A.find(this.props.formValues, f => f.key === com.key) || {};
+      let val = util/* default */.A.find(this.props.submission.values, f => f.key === com.key) || {};
       val = val.value || '""';
       val = util/* default */.A.parseJSON(val);
       return (0,preact_module.h)("input", {
@@ -7477,12 +7477,14 @@ class Form2 extends common/* Com */.Mw {
       });
     });
     Form_defineProperty(this, "renderFieldDateInput", (com, idx) => {
-      let val = util/* default */.A.find(this.props.formValues, f => f.key === com.key) || {};
+      let val = util/* default */.A.find(this.props.submission.values, f => f.key === com.key) || {};
       val = val.value || '""';
       val = util/* default */.A.parseJSON(val);
+      let cls = 'form-control';
+      if (this.state.errorFields[com.key]) cls = 'form-control input--error';
       return (0,preact_module.h)("input", {
         ref: this[`${com.key}_input`],
-        class: "form-control",
+        class: cls,
         type: "date",
         value: val,
         onInput: e => {
@@ -7492,7 +7494,7 @@ class Form2 extends common/* Com */.Mw {
       });
     });
     Form_defineProperty(this, "renderFieldRadioInput", (com, idx) => {
-      let val = util/* default */.A.find(this.props.formValues, f => f.key === com.key) || {};
+      let val = util/* default */.A.find(this.props.submission.values, f => f.key === com.key) || {};
       val = val.value || '""';
       val = util/* default */.A.parseJSON(val);
       return util/* default */.A.map(com.input_options, (option, oidx) => {
@@ -7514,7 +7516,7 @@ class Form2 extends common/* Com */.Mw {
       });
     });
     Form_defineProperty(this, "renderFieldCheckboxInput", (com, idx) => {
-      let val = util/* default */.A.find(this.props.formValues, f => f.key === com.key) || {};
+      let val = util/* default */.A.find(this.props.submission.values, f => f.key === com.key) || {};
       val = val.value || '[]';
       val = util/* default */.A.parseJSON(val);
       return util/* default */.A.map(com.input_options, (option, oidx) => {
@@ -7536,7 +7538,7 @@ class Form2 extends common/* Com */.Mw {
       });
     });
     Form_defineProperty(this, "renderFieldDropdownInput", (com, idx) => {
-      let val = util/* default */.A.find(this.props.formValues, f => f.key === com.key) || {};
+      let val = util/* default */.A.find(this.props.submission.values, f => f.key === com.key) || {};
       val = val.value || '""';
       val = util/* default */.A.parseJSON(val);
       return (0,preact_module.h)("select", {
@@ -7553,7 +7555,7 @@ class Form2 extends common/* Com */.Mw {
       }));
     });
     Form_defineProperty(this, "renderFieldTextareaInput", (com, idx) => {
-      let val = util/* default */.A.find(this.props.formValues, f => f.key === com.key) || {};
+      let val = util/* default */.A.find(this.props.submission.values, f => f.key === com.key) || {};
       val = val.value || '""';
       val = util/* default */.A.parseJSON(val);
       return (0,preact_module.h)("textarea", {
@@ -7580,7 +7582,7 @@ class Form2 extends common/* Com */.Mw {
       util/* default */.A.each(components, com => {
         if (com.type === 'input') {
           if (com.is_required) {
-            let val = util/* default */.A.find(this.props.formValues, f => f.key === com.key) || {};
+            let val = util/* default */.A.find(this.props.submission.values, f => f.key === com.key) || {};
             val = val.value || '""';
             val = util/* default */.A.parseJSON(val);
             if (typeof val === 'string' && !val.trim()) {
@@ -7604,7 +7606,7 @@ class Form2 extends common/* Com */.Mw {
       return result;
     });
     Form_defineProperty(this, "onChangeValue", (key, v) => {
-      let formValues = this.props.formValues;
+      let formValues = util/* default */.A.get(this.props.submission, 'values') || [];
       let f = util/* default */.A.find(formValues, field => field.key === key);
       if (!f) {
         formValues.push({
@@ -7635,7 +7637,7 @@ class Form2 extends common/* Com */.Mw {
     this.onChangeValue(key, v);
   }
   toggleCheckboxField(key, v) {
-    let currentValues = util/* default */.A.find(this.props.formValues, f => f.key === key) || {};
+    let currentValues = util/* default */.A.find(this.props.submission.values, f => f.key === key) || {};
     currentValues = currentValues.value || '[]';
     currentValues = util/* default */.A.parseJSON(currentValues);
     if (currentValues.includes(v)) {
@@ -7648,6 +7650,7 @@ class Form2 extends common/* Com */.Mw {
   }
   render() {
     let components = util/* default */.A.get(this.props.formSetting, 'components') || [];
+    let title = util/* default */.A.get(this.props.formSetting, 'title') || '';
     let cls = 'form-wrapper form';
     if (this.props.mode === 'attachment') cls += ' form-wrapper-attachment';
     return (0,preact_module.h)("div", {
@@ -7656,7 +7659,9 @@ class Form2 extends common/* Com */.Mw {
       class: "form-component"
     }, this.props.t('you_have_submitted_info_successfully')), (0,preact_module.h)("form", {
       onSubmit: this.onSubmit
-    }, util/* default */.A.map(components, this.renderFormComponent)));
+    }, (0,preact_module.h)("div", {
+      class: "form-component form-component-block"
+    }, title), util/* default */.A.map(components, this.renderFormComponent)));
   }
 }
 ;// ./src/chatbox/FormAttachment2.js
@@ -7670,20 +7675,29 @@ function FormAttachment2_toPrimitive(t, r) { if ("object" != typeof t || !t) ret
 class FormAttachment extends common/* Com */.Mw {
   constructor(props) {
     super(props);
-    FormAttachment2_defineProperty(this, "state", {
-      formValues: [],
-      submiting: false,
-      isSubmited: false,
-      errorMessage: '',
-      step: 1
+    FormAttachment2_defineProperty(this, "fetchFormSetting", () => {
+      let attachments = util/* default */.A.get(this.props.ev, 'data.message.attachments') || [];
+      let formAttachment = util/* default */.A.find(attachments, att => att.type === 'form');
+      if (!formAttachment) return;
+      let url = formAttachment.url;
+      this.token = getUrlParameter(url, 'token');
+      let formSetting = formAttachment.form || {};
+      let submission = formAttachment.form_submission || {};
+      let isSubmited = util/* default */.A.size(submission) > 0;
+      this.setState({
+        formSetting,
+        submission,
+        isSubmited
+      });
     });
     FormAttachment2_defineProperty(this, "onChangeFormValues", values => {
       this.setState({
-        formValues: values
+        submission: {
+          values
+        }
       });
     });
     FormAttachment2_defineProperty(this, "onSubmit", async () => {
-      console.log('submittttttt', this.state.formValues);
       this.setState({
         errorMessage: ''
       });
@@ -7691,72 +7705,41 @@ class FormAttachment extends common/* Com */.Mw {
       this.setState({
         submiting: true
       });
-      await util/* default */.A.sleep(1_500);
+      let res = await this.props.store.submitForm2(this.props.store.matchAccount().id, this.token, this.state.submission);
+      if (res.error) {
+        this.setState({
+          submiting: false,
+          errorMessage: util/* default */.A.get(res, 'error.code')
+        });
+        return;
+      }
       this.setState({
         submiting: false,
         isSubmited: true
       });
     });
+    this.state = {
+      submission: {},
+      formSetting: {},
+      submiting: false,
+      errorMessage: '',
+      isSubmited: false
+    };
+  }
+  componentDidMount() {
+    this.fetchFormSetting();
   }
   render() {
-    if (this.props.ev.id !== 'evshpgaeetsplfqprzmynrvrl') return;
-    const formSetting = {
-      components: [{
-        type: 'text',
-        text: 'Đặt lịch khám'
-      }, {
-        type: 'input',
-        key: 'fullname',
-        default_value: '234',
-        link_attribute: 'email',
-        placeholder: 'Nguyen Van A',
-        label: 'Họ và tên',
-        input_type: 'text',
-        is_required: true
-      }, {
-        type: 'input',
-        key: 'phone',
-        validation: 'phone',
-        label: 'SĐT',
-        input_type: 'text',
-        is_required: true
-      }, {
-        type: 'input',
-        label: 'Chọn ca',
-        is_required: true,
-        input_type: 'radio',
-        key: 'shift',
-        input_options: [{
-          value: 'Buổi sáng',
-          label: 'Buổi sáng'
-        }, {
-          value: 'Buổi chiều',
-          label: 'Buổi chiều'
-        }]
-      }, {
-        type: 'input',
-        label: 'Chọn ca 2',
-        is_required: true,
-        input_type: 'checkbox',
-        key: 'shift_2',
-        input_options: [{
-          value: 'Buổi sáng',
-          label: 'Buổi sáng'
-        }, {
-          value: 'Buổi chiều',
-          label: 'Buổi chiều'
-        }]
-      }, {
-        type: 'input',
-        key: 'schedule',
-        label: 'Chọn ngày',
-        is_required: true,
-        input_type: 'date'
-      }, {
-        type: 'submit_button',
-        label: 'Submit'
-      }]
-    };
+    let attachments = util/* default */.A.get(this.props.ev, 'data.message.attachments') || [];
+    let formAttachment = util/* default */.A.find(attachments, att => att.type === 'form');
+    if (!formAttachment) return;
+    const {
+      submission,
+      formSetting,
+      errorMessage,
+      isSubmited,
+      submiting
+    } = this.state;
     return (0,preact_module.h)("div", {
       onClick: e => e.stopPropagation()
     }, (0,preact_module.h)(Form2, {
@@ -7764,15 +7747,21 @@ class FormAttachment extends common/* Com */.Mw {
       formSetting: formSetting,
       mode: "attachment",
       t: this.props.t,
-      formValues: this.state.formValues,
-      errorMessage: this.state.errorMessage,
-      isSubmited: this.state.isSubmited,
-      submiting: this.state.submiting,
+      submission: submission,
+      errorMessage: errorMessage,
+      isSubmited: isSubmited,
+      submiting: submiting,
       onChangeFormValues: this.onChangeFormValues,
       onSubmit: this.onSubmit
     }));
   }
 }
+function getUrlParameter(url, name) {
+  name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
+  var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
+  var results = regex.exec(url);
+  return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
+}
 ;// ./src/chatbox/FormSubmitAttachments.js
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@subiz/widget-v4",
-	"version": "4.1.141",
+	"version": "4.1.143",
 	"main": "./compiled_src/lib.js",
 	"scripts": {
 		"dev": "npx webpack serve --config webpack.dev.js",

package/src/chatbox/FormAttachment2.js

@@ -31,6 +31,89 @@ export default class FormAttachment extends Com {
 		let formSetting = formAttachment.form || {}
 		let submission = formAttachment.form_submission || {}
 		let isSubmited = sb.size(submission) > 0
+		//if (this.props.ev.id === 'evshwmvhbthkrvbceozazgxno') {
+		//formSetting = {
+		//id: 'atshrpqxzuufzzdkzquz_dlbgwyib',
+		//title: 'Đặt lịch khám',
+		//components: [
+		//{
+		//type: 'input',
+		//label: 'Họ và tên',
+		//input_type: 'text',
+		//is_required: true,
+		//key: 'fullname',
+		//},
+		//{
+		//type: 'input',
+		//label: 'SĐT',
+		//input_type: 'text',
+		//is_required: true,
+		//key: 'phone',
+		//},
+		//{
+		//type: 'input',
+		//label: 'Chọn ca',
+		//input_type: 'radio',
+		//is_required: true,
+		//key: 'shift',
+		//input_options: [
+		//{
+		//label: 'Buổi sáng',
+		//value: 'Buổi sáng',
+		//},
+		//{
+		//label: 'Buổi chiều',
+		//value: 'Buổi chiều',
+		//},
+		//{
+		//label: 'Buổi toi',
+		//value: 'Buổi toi',
+		//},
+		//{
+		//label: 'Buổi dem ',
+		//value: 'Buổi dem',
+		//},
+		//{
+		//label: 'Other',
+		//value: 'Other',
+		//},
+		//],
+		//},
+		//{
+		//type: 'input',
+		//label: 'Chọn ngày',
+		//input_type: 'date',
+		//is_required: true,
+		//key: 'schedule',
+		//},
+		//{
+		//type: 'input',
+		//label: 'Đánh giá',
+		//label_description: 'Chọn theo thang điểm 1-5',
+		//input_type: 'rating',
+		//key: 'rating',
+		//},
+		//{
+		//type: 'button',
+		//label: 'Đặt lịch',
+		//},
+		//],
+		//primary_color: 'rgb(224, 31, 111)',
+		//header_style: {
+		//font_family: 'Roboto',
+		//font_size: '20',
+		//},
+		//text_style: {
+		//font_family: 'Yeseva One',
+		//font_size: '16',
+		//},
+		//input_style: {
+		//font_family: 'Dancing Script',
+		//font_size: '18',
+		//},
+
+		//}
+		//}
 		this.setState({formSetting, submission, isSubmited})
 	}
 

package/src/chatbox/Widget.js

@@ -501,9 +501,9 @@ export default class Widget extends Com {
 					)
 				} else if (sb.get(field, 'def.select') === 'checkbox') {
 					$field = this.renderCheckboxField(field)
-				} else if (sb.get(field, 'def.select') === 'radio') {
+				} else if (sb.get(field, 'def.select') === 'radio' && sb.size(sb.get(field, 'def.items', [])) < 5) {
 					$field = this.renderRadioField(field)
-				} else if (sb.get(field, 'def.select') === 'dropdown') {
+				} else if (sb.get(field, 'def.select') === 'dropdown' || sb.size(sb.get(field, 'def.items', [])) >= 5) {
 					$field = this.renderDropdownField(field)
 				} else {
 					$field = (

package/src/form/Form.js

@@ -2,6 +2,7 @@ import {Com} from '../common.js'
 import {h, createRef, Fragment} from 'preact'
 import sb from '../util/index.js'
 import Block from '../chatbox/block.js'
+import RatingStars from './rating-stars.js'
 
 export default class Form2 extends Com {
 	state = {
@@ -71,6 +72,7 @@ export default class Form2 extends Com {
 				{com.input_type === 'radio' && this.renderFieldRadioInput(com, idx)}
 				{com.input_type === 'checkbox' && this.renderFieldCheckboxInput(com, idx)}
 				{(com.input_type === 'dropdown' || com.input_type === 'select') && this.renderFieldDropdownInput(com, idx)}
+				{com.input_type === 'rating' && this.renderFieldRatingInput(com, idx)}
 				{errorMsg && <div class='form-control--valid-input--error'>{errorMsg}</div>}
 			</div>
 		)
@@ -121,48 +123,60 @@ export default class Form2 extends Com {
 		let val = sb.find(this.props.submission.values, (f) => f.key === com.key) || {}
 		val = val.value || '""'
 		val = sb.parseJSON(val)
-		return sb.map(com.input_options, (option, oidx) => {
-			let id = com.key + '_' + oidx
-			return (
-				<div class='radio'>
-					<input
-						type='radio'
-						name={com.key}
-						id={id}
-						checked={option.value === val}
-						onChange={() => this.toggleRadioField(com.key, option.value)}
-					/>
-					<label class='radio--label' for={id}>
-						{option.label}
-					</label>
-					<div class='radio--check' />
-				</div>
-			)
-		})
+		let wrappercls = 'form-radios-wrapper'
+		if (sb.size(com.input_options) >= 3 && this.props.mode !== 'attachment') wrappercls += ' horizontal'
+		return (
+			<div class={wrappercls}>
+				{sb.map(com.input_options, (option, oidx) => {
+					let id = com.key + '_' + oidx
+					return (
+						<div class='radio'>
+							<input
+								type='radio'
+								name={com.key}
+								id={id}
+								checked={option.value === val}
+								onChange={() => this.toggleRadioField(com.key, option.value)}
+							/>
+							<label class='radio--label' for={id}>
+								{option.label}
+							</label>
+							<div class='radio--check' />
+						</div>
+					)
+				})}
+			</div>
+		)
 	}
 
 	renderFieldCheckboxInput = (com, idx) => {
 		let val = sb.find(this.props.submission.values, (f) => f.key === com.key) || {}
 		val = val.value || '[]'
 		val = sb.parseJSON(val)
-		return sb.map(com.input_options, (option, oidx) => {
-			let id = com.key + '_' + oidx
-			return (
-				<div class='checkbox'>
-					<input
-						type='checkbox'
-						name={com.key}
-						id={id}
-						checked={val.includes(option.value)}
-						onChange={() => this.toggleCheckboxField(com.key, option.value)}
-					/>
-					<label class='checkbox--label' for={id}>
-						{option.label}
-					</label>
-					<div class='checkbox--check' />
-				</div>
-			)
-		})
+		let wrappercls = 'form-checkboxes-wrapper'
+		if (sb.size(com.input_options) >= 3 && this.props.mode !== 'attachment') wrappercls += ' horizontal'
+		return (
+			<div class={wrappercls}>
+				{sb.map(com.input_options, (option, oidx) => {
+					let id = com.key + '_' + oidx
+					return (
+						<div class='checkbox'>
+							<input
+								type='checkbox'
+								name={com.key}
+								id={id}
+								checked={val.includes(option.value)}
+								onChange={() => this.toggleCheckboxField(com.key, option.value)}
+							/>
+							<label class='checkbox--label' for={id}>
+								{option.label}
+							</label>
+							<div class='checkbox--check' />
+						</div>
+					)
+				})}
+			</div>
+		)
 	}
 
 	renderFieldDropdownInput = (com, idx) => {
@@ -207,6 +221,10 @@ export default class Form2 extends Com {
 		)
 	}
 
+	renderFieldRatingInput = (com, idx) => {
+		return <RatingStars onChange={(v) => this.onChangeValue(com.key, v)} />
+	}
+
 	onSubmit = (e) => {
 		e.preventDefault()
 		if (!this.validateForm()) return

package/src/form/FormPage.js

@@ -98,6 +98,86 @@ export default class FormPage extends Com {
 			let json = atob(this.props.previewJson)
 			json = decodeURIComponent(json)
 			json = sb.parseJSON(json)
+			//json = {
+				//id: 'atshrpqxzuufzzdkzquz_dlbgwyib',
+				//title: 'Đặt lịch khám',
+				//components: [
+					//{
+						//type: 'input',
+						//label: 'Họ và tên',
+						//input_type: 'text',
+						//is_required: true,
+						//key: 'fullname',
+					//},
+					//{
+						//type: 'input',
+						//label: 'SĐT',
+						//input_type: 'text',
+						//is_required: true,
+						//key: 'phone',
+					//},
+					//{
+						//type: 'input',
+						//label: 'Chọn ca',
+						//input_type: 'radio',
+						//is_required: true,
+						//key: 'shift',
+						//input_options: [
+							//{
+								//label: 'Buổi sáng',
+								//value: 'Buổi sáng',
+							//},
+							//{
+								//label: 'Buổi chiều',
+								//value: 'Buổi chiều',
+							//},
+							//{
+								//label: 'Buổi toi',
+								//value: 'Buổi toi',
+							//},
+							//{
+								//label: 'Buổi dem ',
+								//value: 'Buổi dem',
+							//},
+							//{
+								//label: 'Other',
+								//value: 'Other',
+							//},
+						//],
+					//},
+					//{
+						//type: 'input',
+						//label: 'Chọn ngày',
+						//input_type: 'date',
+						//is_required: true,
+						//key: 'schedule',
+					//},
+					//{
+						//type: 'input',
+						//label: 'Đánh giá',
+            //label_description: 'Chọn theo thang điểm 1-5',
+						//input_type: 'rating',
+						//key: 'rating',
+					//},
+					//{
+						//type: 'button',
+						//label: 'Đặt lịch',
+					//},
+				//],
+				//primary_color: 'rgb(224, 31, 111)',
+				//header_style: {
+					//font_family: 'Roboto',
+					//font_size: '20',
+				//},
+				//text_style: {
+					//font_family: 'Yeseva One',
+					//font_size: '16',
+				//},
+				//input_style: {
+					//font_family: 'Dancing Script',
+					//font_size: '18',
+				//},
+			//}
 			await this.insertCss(chatbox, json)
 			this.setState({formSetting: json, loading: false})
 			return
@@ -170,7 +250,7 @@ export default class FormPage extends Com {
 		let brandLogo = sb.get(formSetting, 'logo.url')
 		let coverUrl = sb.get(formSetting, 'cover_image.url')
 		//coverUrl =
-			//'https://lh7-us.googleusercontent.com/fX5mhofX-12ygFkS6I3UbMh6_NYtd7ySVQkuFxm7Y7ArYMvWu_Ew65l4Ic3QC8eMaBJpUU_5ZNITgigAbqkNJcQRbPjnddxGGE7YOaNBACoWws7b6AuNaAjlisDDY3GCvPHFhh-99Jt0SBiJKnNloWrxxdel_EkVI6MMf6ENTwj2NDQ8MvkCI8ow6z75pwK9C1ZMxDZn?key=-6fBH6GC0hPnLatLRgG5tA'
+		//'https://lh7-us.googleusercontent.com/fX5mhofX-12ygFkS6I3UbMh6_NYtd7ySVQkuFxm7Y7ArYMvWu_Ew65l4Ic3QC8eMaBJpUU_5ZNITgigAbqkNJcQRbPjnddxGGE7YOaNBACoWws7b6AuNaAjlisDDY3GCvPHFhh-99Jt0SBiJKnNloWrxxdel_EkVI6MMf6ENTwj2NDQ8MvkCI8ow6z75pwK9C1ZMxDZn?key=-6fBH6GC0hPnLatLRgG5tA'
 		let wrappercls = 'form-page'
 		if (coverUrl) wrappercls += ' sketch'
 		return (