Inquiry Regarding Jump Logic Implementation (applyLogic)

[aniciofmf]

Hello,

I am currently using the @quillforms/renderer-core library for a project and I have encountered an issue regarding the implementation of jump logics. Below is the code snippet I'm working with:

import { Form } from "@quillforms/renderer-core"
import "@quillforms/renderer-core/build-style/style.css"
import { registerCoreBlocks } from "@quillforms/react-renderer-utils/src"

registerCoreBlocks()

const App = () => {
	return (
		<div style={{ width: "100%", height: "100vh" }}>
			<Form
				formId={3}
				formObj={{
					logic: {
						actions: {
							frpwpq1qg: [
								{
									type: "jump",
									target: "n0dw3yjr3",
									conditions: [
										[
											{
												vars: [
													{
														type: "field",
														value: "frpwpq1qg",
													},
													{
														value: "124e4567e89b",
													},
												],
												op: "is",
											},
										],
									],
								},
							],
						},
						variables: {
							score: {
								label: "Score",
								initialValue: 0,
							},
							mywexwsp5: {
								label: "choice_score1.1",
								initialValue: 0,
							},
							"7bzmnp4pr": {
								label: "chore_score2.1",
								initialValue: 0,
							},
						},
						defaultJumpTargets: [] as any,
					},
					blocks: [
						{
							id: "frpwpq1qg",
							name: "multiple-choice",
							attributes: {
								choices: [
									{
										value: "124e4567e89b",
										label: "Choice 1.1",
									},
									{
										value: "asl0nhpbju",
										label: "Choice 1.2",
									},
									{
										value: "rjyfxi5v2l",
										label: "Choice 1.3",
									},
								],
								max: false,
								min: false,
								verticalAlign: true,
								multiple: false,
								required: true,
								nextBtnLabel: false,
								classnames: "",
								description: "",
								randomize: false,
								label: "",
								customHTML: "",
								layout: "stack",
								attachmentFocalPoint: {
									x: 0.5,
									y: 0.5,
								},
								attachmentFancyBorderRadius: false,
								attachmentBorderRadius: "0px",
								attachmentMaxWidth: "none",
								randmize: false,
							},
						},
						{
							id: "ggvwyjvxb",
							name: "multiple-choice",
							attributes: {
								choices: [
									{
										value: "124e4567e89b",
										label: "Choice 2.1",
									},
									{
										value: "asl0nhpbju",
										label: "Choice 2.2",
									},
									{
										value: "rjyfxi5v2l",
										label: "Choice 2.3",
									},
								],
								max: false,
								min: false,
								verticalAlign: true,
								multiple: false,
								required: true,
								nextBtnLabel: false,
								classnames: "",
								description: "",
								randomize: false,
								label: "",
								customHTML: "Choice 2",
								layout: "stack",
								attachmentFocalPoint: {
									x: 0.5,
									y: 0.5,
								},
								attachmentFancyBorderRadius: false,
								attachmentBorderRadius: "0px",
								attachmentMaxWidth: "none",
								randmize: false,
							},
						},
						{
							id: "n0dw3yjr3",
							name: "multiple-choice",
							attributes: {
								choices: [
									{
										value: "124e4567e89b",
										label: "Choice 3.1",
									},
									{
										value: "asl0nhpbju",
										label: "Choice 3.2",
									},
									{
										value: "rjyfxi5v2l",
										label: "Choice 3.3",
									},
								],
								max: false,
								min: false,
								verticalAlign: true,
								multiple: false,
								required: true,
								nextBtnLabel: false,
								classnames: "",
								description: "",
								randomize: false,
								label: "",
								customHTML: "Choice 3",
								layout: "stack",
								attachmentFocalPoint: {
									x: 0.5,
									y: 0.5,
								},
								attachmentFancyBorderRadius: false,
								attachmentBorderRadius: "0px",
								attachmentMaxWidth: "none",
								randmize: false,
							},
						},
						{
							id: "qzitxn7o2",
							name: "statement",
							attributes: {
								buttonText: "Continue",
								quotationMarks: true,
								required: false,
								nextBtnLabel: false,
								classnames: "",
								description: "",
								label: "Thanks",
								customHTML: "",
								layout: "stack",
								attachmentFocalPoint: {
									x: 0.5,
									y: 0.5,
								},
								attachmentFancyBorderRadius: false,
								attachmentBorderRadius: "0px",
								attachmentMaxWidth: "none",
							},
						},
					],
				}}
				onSubmit={(_data, { completeForm, setIsSubmitting }) => {
					console.log(_data)
					setTimeout(() => {
						setIsSubmitting(false)
						completeForm()
					}, 500)
				}}
				applyLogic={true}
			/>
		</div>
	)
}

export default App

"@quillforms/react-renderer-utils": "^5.9.1" and React 18.2.0

Despite following the documentation, the jump logics in my form do not seem to be functioning as expected. I have set up the form logic and blocks according to the library's guidelines, but the form isn't responding to the specified conditions, it gets stucked in the first screen, Ok button is not taking me to the next page.

Is there a specific aspect of the jump logic implementation that I might be missing, or is this feature fully supported in the current version of the library? Any guidance or insights you can provide would be greatly appreciated.

Thank you for your time and assistance.

[mdmag]

Hello @aniciofmf,

This feature was supported in a private library.
I don't know how you have had set up the logic parameter in the formObj.
But, I do think to support the jump logic and calculator in the open source version.

[aniciofmf]

Ah digging a little bit in the types, Thanks for the answer!

[svengau]

Hi @aniciofmf, I'm facing the same issue, how did you fix it ?

[aniciofmf]

No fix available, seems its not possible at the moment.

according @mdmag it might be available in a future release