@subiz/widget-v4 4.1.218 → 4.1.222

package/src/form/Form.js

@@ -3,22 +3,47 @@ import {h, createRef, Fragment} from 'preact'
 import sb from '../util/index.js'
 import Block from '../chatbox/block.js'
 import RatingStars from './rating-stars.js'
+import {
+	OTHER_OPTION_VALUE,
+	translate,
+	isChips,
+	getPlaceholder,
+	getDescription,
+	toStoredValue,
+	sameValue,
+	getRatingConfig,
+	getScaleRange,
+	optionLabel,
+	isEmptyValue,
+	RatingFaces,
+	LinearScale,
+} from './form-fields.js'
 
 export default class Form2 extends Com {
 	state = {
 		errorFields: {},
 		submiting: false,
+		// "Other…" option (allow_other_option) of radio/checkbox/dropdown, by field key
+		otherSelected: {},
+		otherText: {},
 	}
 
 	constructor(props) {
 		super(props)
+	}
 
-		let components = sb.get(this.props.formSetting, 'components') || []
-		sb.each(components, (com) => {
-			if (com.type === 'input' && com.input_type !== 'checkbox' && com.input_type !== 'radio') {
-				this[`${com.key}_input`] = createRef()
-			}
-		})
+	// refs are created lazily: formSetting may arrive after the first render (chat attachment)
+	getRef = (name) => {
+		if (!this[name]) this[name] = createRef()
+		return this[name]
+	}
+
+	tr = (key) => translate(this.props.t, key)
+
+	getValue = (key, def) => {
+		let val = sb.find(sb.get(this.props.submission, 'values'), (f) => f.key === key) || {}
+		val = val.value || def || '""'
+		return sb.parseJSON(val)
 	}
 
 	renderFormComponent = (com, idx) => {
@@ -46,33 +71,79 @@ export default class Form2 extends Com {
 		)
 	}
 
+	// readable answer for submitted forms: labels instead of option codes, icons for rating
+	renderSubmittedValue = (com) => {
+		let empty = <span class='text-muted text-italic'>{this.props.t('no_info_input')}</span>
+		let val = this.getValue(com.key)
+		if (com.input_type === 'rating') {
+			let cfg = getRatingConfig(com)
+			let idx = sb.size(cfg.levels) ? cfg.levels.findIndex((l) => sameValue(val, l.value)) : -1
+			if (idx < 0) return empty
+			if (cfg.kind === 'face') return <RatingFaces readonly levels={[cfg.levels[idx]]} value={val} />
+			return (
+				<div class='form-submitted-rating'>
+					<RatingStars readonly count={cfg.levels.length} value={idx + 1} />
+					<span class='text-muted'>
+						{idx + 1}/{cfg.levels.length}
+					</span>
+				</div>
+			)
+		}
+		if (com.input_type === 'linear_scale') {
+			if (isEmptyValue(val)) return empty
+			let {min, max} = getScaleRange(com)
+			let text = `${val}/${max}`
+			if (sameValue(val, min) && com.scale_min_label) text += ` · ${com.scale_min_label}`
+			if (sameValue(val, max) && com.scale_max_label) text += ` · ${com.scale_max_label}`
+			return <div>{text}</div>
+		}
+		if (['radio', 'checkbox', 'dropdown', 'select'].includes(com.input_type)) {
+			let vals = Array.isArray(val) ? val : isEmptyValue(val) ? [] : [val]
+			let labels = sb.map(vals, (v) => optionLabel(com, v))
+			if (labels.length === 0) return empty
+			if (com.input_type === 'checkbox' && isChips(com)) {
+				return (
+					<div class='form-chips readonly'>
+						{sb.map(labels, (label) => (
+							<span class='form-chip selected'>{label}</span>
+						))}
+					</div>
+				)
+			}
+			return <div>{labels.join(', ')}</div>
+		}
+		if (Array.isArray(val)) val = val.join(', ')
+		return <div>{val || empty}</div>
+	}
+
 	renderField = (com, idx) => {
 		let errorMsg = this.state.errorFields[com.key]
 		if (this.props.isSubmited) {
-			let val = sb.find(this.props.submission.values, (f) => f.key === com.key) || {}
-			val = val.value || '""'
-			val = sb.parseJSON(val)
-			if (Array.isArray(val)) val = val.join(', ')
-
 			return (
 				<div class='form-component submitted' key={com.key}>
 					<label class='label'>{com.label}</label>
-					<div>{val || <span class='text-muted text-italic'>{this.props.t('no_info_input')}</span>}</div>
+					{this.renderSubmittedValue(com)}
 				</div>
 			)
 		}
+		let desc = getDescription(com)
+		let cls = 'form-component'
+		if (desc) cls += ' has-description'
 		return (
-			<div class='form-component' key={com.key}>
+			<div class={cls} key={com.key}>
 				<label class='label'>
 					{com.label} {com.is_required && <span class='red'>*</span>}
 				</label>
+				{desc && <div class='form-field-description'>{desc}</div>}
 				{com.input_type === 'text' && this.renderFieldTextInput(com, idx)}
 				{com.input_type === 'textarea' && this.renderFieldTextareaInput(com, idx)}
 				{com.input_type === 'date' && this.renderFieldDateInput(com, idx)}
 				{com.input_type === 'radio' && this.renderFieldRadioInput(com, idx)}
-				{com.input_type === 'checkbox' && this.renderFieldCheckboxInput(com, idx)}
+				{com.input_type === 'checkbox' &&
+					(isChips(com) ? this.renderFieldChipsInput(com, idx) : this.renderFieldCheckboxInput(com, idx))}
 				{(com.input_type === 'dropdown' || com.input_type === 'select') && this.renderFieldDropdownInput(com, idx)}
 				{com.input_type === 'rating' && this.renderFieldRatingInput(com, idx)}
+				{com.input_type === 'linear_scale' && this.renderFieldLinearScaleInput(com, idx)}
 				{errorMsg && <div class='form-control--valid-input--error'>{errorMsg}</div>}
 			</div>
 		)
@@ -81,15 +152,13 @@ export default class Form2 extends Com {
 	renderFieldTextInput = (com, idx) => {
 		let cls = 'form-control'
 		if (this.state.errorFields[com.key]) cls = 'form-control input--error'
-		let val = sb.find(this.props.submission.values, (f) => f.key === com.key) || {}
-		val = val.value || '""'
-		val = sb.parseJSON(val)
+		let val = this.getValue(com.key)
 		return (
 			<input
-				ref={this[`${com.key}_input`]}
+				ref={this.getRef(`${com.key}_input`)}
 				type='text'
 				class={cls}
-				placeholder={com.placeholder}
+				placeholder={getPlaceholder(com)}
 				value={val}
 				onInput={(e) => {
 					this.onChangeValue(com.key, e.target.value)
@@ -100,14 +169,12 @@ export default class Form2 extends Com {
 	}
 
 	renderFieldDateInput = (com, idx) => {
-		let val = sb.find(this.props.submission.values, (f) => f.key === com.key) || {}
-		val = val.value || '""'
-		val = sb.parseJSON(val)
+		let val = this.getValue(com.key)
 		let cls = 'form-control'
 		if (this.state.errorFields[com.key]) cls = 'form-control input--error'
 		return (
 			<input
-				ref={this[`${com.key}_input`]}
+				ref={this.getRef(`${com.key}_input`)}
 				class={cls}
 				type='date'
 				value={val}
@@ -119,110 +186,236 @@ export default class Form2 extends Com {
 		)
 	}
 
+	// free text box shown when the "Other…" option is selected
+	renderOtherTextInput = (com) => {
+		if (!com.allow_other_option || !this.state.otherSelected[com.key]) return null
+		let cls = 'form-control form-other-input'
+		if (this.state.errorFields[com.key]) cls += ' input--error'
+		return (
+			<input
+				ref={this.getRef(`${com.key}_other_input`)}
+				type='text'
+				class={cls}
+				placeholder={this.tr('form_other_option_placeholder')}
+				value={this.state.otherText[com.key] || ''}
+				onInput={(e) => this.setOtherText(com, e.target.value)}
+			/>
+		)
+	}
+
 	renderFieldRadioInput = (com, idx) => {
-		let val = sb.find(this.props.submission.values, (f) => f.key === com.key) || {}
-		val = val.value || '""'
-		val = sb.parseJSON(val)
+		let val = this.getValue(com.key)
+		let otherOn = !!this.state.otherSelected[com.key]
 		let wrappercls = 'form-radios-wrapper'
-		if (sb.size(com.input_options) >= 3 && this.props.mode !== 'attachment') wrappercls += ' horizontal'
+		let count = sb.size(com.input_options) + (com.allow_other_option ? 1 : 0)
+		if (count >= 3 && this.props.mode !== 'attachment') wrappercls += ' horizontal'
 		return (
-			<div class={wrappercls}>
-				{sb.map(com.input_options, (option, oidx) => {
-					let id = com.key + '_' + oidx
-					return (
+			<Fragment>
+				<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={!otherOn && option.value === val}
+									onChange={() => this.toggleRadioField(com.key, option.value)}
+								/>
+								<label class='radio--label' for={id}>
+									{option.label}
+								</label>
+								<div class='radio--check' />
+							</div>
+						)
+					})}
+					{com.allow_other_option && (
 						<div class='radio'>
 							<input
 								type='radio'
 								name={com.key}
-								id={id}
-								checked={option.value === val}
-								onChange={() => this.toggleRadioField(com.key, option.value)}
+								id={com.key + '_other'}
+								checked={otherOn}
+								onChange={() => this.setOtherSelected(com, true)}
 							/>
-							<label class='radio--label' for={id}>
-								{option.label}
+							<label class='radio--label' for={com.key + '_other'}>
+								{this.tr('form_other_option')}
 							</label>
 							<div class='radio--check' />
 						</div>
-					)
-				})}
-			</div>
+					)}
+				</div>
+				{this.renderOtherTextInput(com)}
+			</Fragment>
 		)
 	}
 
 	renderFieldCheckboxInput = (com, idx) => {
-		let val = sb.find(this.props.submission.values, (f) => f.key === com.key) || {}
-		val = val.value || '[]'
-		val = sb.parseJSON(val)
+		let val = this.getValue(com.key, '[]')
+		if (!Array.isArray(val)) val = []
+		let otherOn = !!this.state.otherSelected[com.key]
 		let wrappercls = 'form-checkboxes-wrapper'
-		if (sb.size(com.input_options) >= 3 && this.props.mode !== 'attachment') wrappercls += ' horizontal'
+		let count = sb.size(com.input_options) + (com.allow_other_option ? 1 : 0)
+		if (count >= 3 && this.props.mode !== 'attachment') wrappercls += ' horizontal'
 		return (
-			<div class={wrappercls}>
-				{sb.map(com.input_options, (option, oidx) => {
-					let id = com.key + '_' + oidx
-					return (
+			<Fragment>
+				<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>
+						)
+					})}
+					{com.allow_other_option && (
 						<div class='checkbox'>
 							<input
 								type='checkbox'
 								name={com.key}
-								id={id}
-								checked={val.includes(option.value)}
-								onChange={() => this.toggleCheckboxField(com.key, option.value)}
+								id={com.key + '_other'}
+								checked={otherOn}
+								onChange={() => this.setOtherSelected(com, !otherOn)}
 							/>
-							<label class='checkbox--label' for={id}>
-								{option.label}
+							<label class='checkbox--label' for={com.key + '_other'}>
+								{this.tr('form_other_option')}
 							</label>
 							<div class='checkbox--check' />
 						</div>
-					)
-				})}
-			</div>
+					)}
+				</div>
+				{this.renderOtherTextInput(com)}
+			</Fragment>
+		)
+	}
+
+	renderFieldChipsInput = (com, idx) => {
+		let val = this.getValue(com.key, '[]')
+		if (!Array.isArray(val)) val = []
+		let otherOn = !!this.state.otherSelected[com.key]
+		return (
+			<Fragment>
+				<div class='form-chips' role='group'>
+					{sb.map(com.input_options, (option) => {
+						let selected = val.includes(option.value)
+						return (
+							<button
+								type='button'
+								class={'form-chip' + (selected ? ' selected' : '')}
+								aria-pressed={selected ? 'true' : 'false'}
+								onClick={() => this.toggleCheckboxField(com.key, option.value)}
+							>
+								{option.label || option.value}
+							</button>
+						)
+					})}
+					{com.allow_other_option && (
+						<button
+							type='button'
+							class={'form-chip form-chip-other' + (otherOn ? ' selected' : '')}
+							aria-pressed={otherOn ? 'true' : 'false'}
+							onClick={() => this.setOtherSelected(com, !otherOn)}
+						>
+							{this.tr('form_other_option')}
+						</button>
+					)}
+				</div>
+				{this.renderOtherTextInput(com)}
+			</Fragment>
 		)
 	}
 
 	renderFieldDropdownInput = (com, idx) => {
-		let val = sb.find(this.props.submission.values, (f) => f.key === com.key) || {}
-		val = val.value || '""'
-		val = sb.parseJSON(val)
+		let val = this.getValue(com.key)
+		let otherOn = !!this.state.otherSelected[com.key]
 		let cls = 'form-control'
-		if (this.state.errorFields[com.key]) cls += ' input--error'
-		if (!val) cls += ' form-control--empty'
+		if (this.state.errorFields[com.key] && !otherOn) cls += ' input--error'
+		if (!val && !otherOn) cls += ' form-control--empty'
 		return (
-			<select
-				class={cls}
-				ref={this[`${com.key}_input`]}
-				onChange={(e) => {
-					this.onChangeValue(com.key, e.target.value)
-					this.clearError(com.key)
-				}}
-			>
-				<option value=''>-- {this.props.t('no_select')} --</option>
-				{sb.map(com.input_options, (option) => {
-					return <option value={option.value}>{option.label}</option>
-				})}
-			</select>
+			<Fragment>
+				<select
+					class={cls}
+					ref={this.getRef(`${com.key}_input`)}
+					value={otherOn ? OTHER_OPTION_VALUE : val || ''}
+					onChange={(e) => {
+						if (e.target.value === OTHER_OPTION_VALUE) {
+							this.setOtherSelected(com, true)
+							return
+						}
+						if (otherOn) this.setOtherSelected(com, false, e.target.value)
+						else this.onChangeValue(com.key, e.target.value)
+						this.clearError(com.key)
+					}}
+				>
+					<option value=''>-- {this.props.t('no_select')} --</option>
+					{sb.map(com.input_options, (option) => {
+						return <option value={option.value}>{option.label}</option>
+					})}
+					{com.allow_other_option && <option value={OTHER_OPTION_VALUE}>{this.tr('form_other_option')}</option>}
+				</select>
+				{this.renderOtherTextInput(com)}
+			</Fragment>
 		)
 	}
 
 	renderFieldTextareaInput = (com, idx) => {
-		let val = sb.find(this.props.submission.values, (f) => f.key === com.key) || {}
-		val = val.value || '""'
-		val = sb.parseJSON(val)
+		let cls = 'form-control'
+		if (this.state.errorFields[com.key]) cls += ' input--error'
 		return (
 			<textarea
 				onInput={(e) => {
 					this.onChangeValue(com.key, e.target.value)
 					this.clearError(com.key)
 				}}
-				ref={this[`${com.key}_input`]}
+				ref={this.getRef(`${com.key}_input`)}
 				rows='3'
-				class='form-control'
-				placeholder={com.placeholder}
+				class={cls}
+				placeholder={getPlaceholder(com)}
 			/>
 		)
 	}
 
 	renderFieldRatingInput = (com, idx) => {
-		return <RatingStars onChange={(v) => this.onChangeValue(com.key, v)} />
+		let cfg = getRatingConfig(com)
+		let val = this.getValue(com.key)
+		let onChange = (v) => {
+			this.onChangeValue(com.key, v)
+			this.clearError(com.key)
+		}
+		if (cfg.kind === 'face') return <RatingFaces levels={cfg.levels} value={val} onChange={onChange} />
+		let selectedIdx = cfg.levels.findIndex((l) => sameValue(val, l.value))
+		return (
+			<RatingStars
+				count={cfg.levels.length}
+				value={selectedIdx + 1}
+				onChange={(n) => onChange(n > 0 ? toStoredValue(cfg.levels[n - 1].value) : '')}
+			/>
+		)
+	}
+
+	renderFieldLinearScaleInput = (com, idx) => {
+		return (
+			<LinearScale
+				com={com}
+				numberedLabels={this.props.mode === 'attachment'}
+				value={this.getValue(com.key)}
+				onChange={(v) => {
+					this.onChangeValue(com.key, v)
+					this.clearError(com.key)
+				}}
+			/>
+		)
 	}
 
 	onSubmit = (e) => {
@@ -238,20 +431,19 @@ export default class Form2 extends Com {
 		let components = sb.get(this.props.formSetting, 'components') || []
 		sb.each(components, (com) => {
 			if (com.type === 'input') {
-				let val = sb.find(this.props.submission.values, (f) => f.key === com.key) || {}
-				val = val.value || '""'
-				val = sb.parseJSON(val)
+				let val = this.getValue(com.key)
 				if (com.is_required) {
-					let isEmpty = false
-					if (typeof val === 'string' && !val.trim()) isEmpty = true
-					if (Array.isArray(val) && val.length === 0) isEmpty = true
+					let isEmpty = isEmptyValue(val)
+					// legacy rating stored 0 when the selected star was clicked again
+					if (com.input_type === 'rating' && val === 0) isEmpty = true
 					if (isEmpty) {
 						result = false
 						errors[com.key] = this.props.t('cannot_be_empty')
-						ref = `${com.key}_input`
+						if (!ref) ref = this.state.otherSelected[com.key] ? `${com.key}_other_input` : `${com.key}_input`
 					}
 				}
-				if (com.validation && !Array.isArray(val)) {
+				let isChoice = ['rating', 'linear_scale', 'radio', 'checkbox', 'dropdown', 'select'].includes(com.input_type)
+				if (com.validation && !Array.isArray(val) && !isChoice) {
 					let isInvalid = false
 					let validationText = ''
 					if (com.validation === 'email' && !sb.isEmail(val)) {
@@ -273,7 +465,7 @@ export default class Form2 extends Com {
 					if (isInvalid) {
 						result = false
 						errors[com.key] = this.props.t('format_is_invalid') + ' ' + validationText
-						ref = `${com.key}_input`
+						if (!ref) ref = `${com.key}_input`
 					}
 				}
 			}
@@ -287,13 +479,25 @@ export default class Form2 extends Com {
 
 	toggleRadioField(key, v) {
 		this.clearError(key)
+		if (this.state.otherSelected[key]) {
+			this.setState({otherSelected: {...this.state.otherSelected, [key]: false}})
+		}
 		this.onChangeValue(key, v)
 	}
 
+	getComponent = (key) => sb.find(sb.get(this.props.formSetting, 'components') || [], (c) => c.key === key)
+
+	// checkbox value = selected option values + the "Other" free text (if any), as a JSON array
+	commitCheckboxValue = (com, optionValues, otherOn, otherText) => {
+		let values = sb.filter(optionValues, (v) => sb.find(com.input_options, (o) => o.value === v))
+		let text = (otherText || '').trim()
+		if (otherOn && text) values.push(text)
+		this.onChangeValue(com.key, values)
+	}
+
 	toggleCheckboxField(key, v) {
-		let currentValues = sb.find(this.props.submission.values, (f) => f.key === key) || {}
-		currentValues = currentValues.value || '[]'
-		currentValues = sb.parseJSON(currentValues)
+		let currentValues = this.getValue(key, '[]')
+		if (!Array.isArray(currentValues)) currentValues = []
 
 		if (currentValues.includes(v)) {
 			currentValues = currentValues.filter((s) => s !== v)
@@ -301,9 +505,45 @@ export default class Form2 extends Com {
 			currentValues.push(v)
 		}
 		this.clearError(key)
+		let com = this.getComponent(key)
+		if (com && com.allow_other_option) {
+			this.commitCheckboxValue(com, currentValues, this.state.otherSelected[key], this.state.otherText[key])
+			return
+		}
 		this.onChangeValue(key, currentValues)
 	}
 
+	// toggles the "Other…" option. For radio/dropdown, `nextValue` is the value
+	// to store when switching back to a regular option
+	setOtherSelected = (com, on, nextValue) => {
+		let key = com.key
+		let otherSelected = {...this.state.otherSelected, [key]: on}
+		let text = this.state.otherText[key] || ''
+		this.clearError(key)
+		this.setState({otherSelected}, () => {
+			let $input = this.getRef(`${key}_other_input`).current
+			if (on && $input) {
+				$input.focus()
+			}
+		})
+		if (com.input_type === 'checkbox') {
+			this.commitCheckboxValue(com, this.getValue(key, '[]') || [], on, text)
+			return
+		}
+		this.onChangeValue(key, on ? text.trim() : nextValue || '')
+	}
+
+	setOtherText = (com, text) => {
+		let key = com.key
+		this.setState({otherText: {...this.state.otherText, [key]: text}})
+		this.clearError(key)
+		if (com.input_type === 'checkbox') {
+			this.commitCheckboxValue(com, this.getValue(key, '[]') || [], true, text)
+			return
+		}
+		this.onChangeValue(key, text.trim())
+	}
+
 	onChangeValue = (key, v) => {
 		let formValues = sb.get(this.props.submission, 'values') || []
 		let f = sb.find(formValues, (field) => field.key === key)
@@ -328,9 +568,9 @@ export default class Form2 extends Com {
 		if (this.props.mode === 'attachment') {
 			if (title.trim() || desc.trim()) {
 				return (
-					<div class='form-component form-component-block'>
-						{title && <div>{title}</div>}
-						{desc && <div class='text-sm text-muted'>{desc}</div>}
+					<div class='form-component form-component-block form-attachment-header'>
+						{title && <div class='form-attachment-title'>{title}</div>}
+						{desc && <div class='form-attachment-desc text-sm text-muted'>{desc}</div>}
 					</div>
 				)
 			}
@@ -368,8 +608,6 @@ export default class Form2 extends Com {
 
 	render() {
 		let components = sb.get(this.props.formSetting, 'components') || []
-		let title = sb.get(this.props.formSetting, 'title') || ''
-		let desc = sb.get(this.props.formSetting, 'description') || ''
 		let cls = 'form-wrapper form'
 		if (this.props.mode === 'attachment') cls += ' form-wrapper-attachment'
 		return (

package/src/form/FormPage.js

@@ -68,11 +68,11 @@ export default class FormPage extends Com {
 		let descFont = sb.get(formSetting, 'text_style.font_family')
 		let inputLabelFont = sb.get(formSetting, 'input_style.font_family')
 		setting.form_background_color = formSetting.background_color
-		setting.form_header_font_size = sb.get(formSetting, 'header_style.font_size') || '20'
+		setting.form_header_font_size = sb.get(formSetting, 'header_style.font_size') || '28'
 		setting.form_header_font_family = headerFont
 		setting.form_desc_font_size = sb.get(formSetting, 'text_style.font_size') || '16'
 		setting.form_desc_font_family = descFont
-		setting.form_input_label_font_size = sb.get(formSetting, 'input_style.font_size') || '14'
+		setting.form_input_label_font_size = sb.get(formSetting, 'input_style.font_size') || '16'
 		setting.form_input_label_font_family = inputLabelFont
 		let outcss = sb.replaceCssVariable(css, setting)
 
@@ -184,7 +184,12 @@ export default class FormPage extends Com {
 		}
 		if (this.state.loading) return
 		this.setState({loading: true})
-		let res = await this.props.store.checkFormToken(this.props.store.matchAccount().id, this.props.token)
+		let res
+		if (this.props.token) {
+			res = await this.props.store.checkFormToken(this.props.store.matchAccount().id, this.props.token)
+		} else {
+			res = await this.props.store.getPublicForm(this.props.formId)
+		}
 		//await sb.sleep(5000)
 		//res.error = 'true'
 		if (res.error) {
@@ -212,11 +217,19 @@ export default class FormPage extends Com {
 		}
 		if (this.state.submiting) return
 		this.setState({submiting: true})
-		let res = await this.props.store.submitForm2(
-			this.props.store.matchAccount().id,
-			this.props.token,
-			this.state.submission,
-		)
+		let res
+		if (this.props.token) {
+			res = await this.props.store.submitForm2(
+				this.props.store.matchAccount().id,
+				this.props.token,
+				this.state.submission,
+			)
+		} else {
+			res = await this.props.store.submitPublicForm(this.props.formId, {
+				values: sb.get(this.state.submission, 'values') || [],
+				page_url: document.referrer || location.href,
+			})
+		}
 		if (res.error) {
 			this.setState({submiting: false, errorMessage: this.props.t('form_submission_error')})
 			return