@inseefr/lunatic 0.3.0-experimental → 0.3.1-experimental

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@inseefr/lunatic",
-	"version": "0.3.0-experimental",
+	"version": "0.3.1-experimental",
 	"workersVersion": "0.2.1-experimental",
 	"description": "Library of questionnaire components",
 	"repository": {

package/src/stories/questionnaire/questionnaire.stories.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { storiesOf } from '@storybook/react';
 import Orchestrator from '../utils/orchestrator';
 import { titleDecorator } from 'utils/lib';
@@ -10,6 +10,8 @@ import logementSequence from './logement-sequence';
 import dataLogement from './data-logement';
 import simpsons from './simpsons';
 import arithmetic from './arithmetic';
+import updateExternalQuestionnaire from './update-external/questionnaire';
+import updateExternalData from './update-external/data';
 import { positioningOptions, featuresOptions } from '../utils/options';
 import { boolean, select } from '@storybook/addon-knobs/react';
 
@@ -170,3 +172,34 @@ paginated.addWithJSX('Simpsons', () => (
 		pagination
 	/>
 ));
+
+const other = storiesOf('Questionnaire/Other', module).addDecorator(
+	(Component) => {
+		const WrappedComponent = titleDecorator(Component);
+		return <WrappedComponent title="<Questionnaire />" />;
+	}
+);
+
+other.addWithJSX('Update external', () => {
+	const [addExternal, setAddExternal] = useState(null);
+	return (
+		<>
+			<button
+				onClick={() => setAddExternal({ PROMO: true })}
+			>{`Fire PROMO --> True`}</button>
+			<button
+				onClick={() => setAddExternal({ PROMO: false })}
+			>{`Fire PROMO --> False`}</button>
+			<Orchestrator
+				id="props"
+				source={updateExternalQuestionnaire}
+				data={updateExternalData}
+				features={select('Features', featuresOptions, ['VTL', 'MD'])}
+				positioning={select('Items positioning', positioningOptions, 'DEFAULT')}
+				disabled={boolean('Disabled', false)}
+				focused={boolean('Focused', false)}
+				addExternal={addExternal}
+			/>
+		</>
+	);
+});

package/src/stories/questionnaire/update-external/data.json

@@ -0,0 +1 @@
+{ "EXTERNAL": { "PROMO": null } }

package/src/stories/questionnaire/update-external/questionnaire.json

@@ -0,0 +1,75 @@
+{
+	"components": [
+		{
+			"id": "seq1",
+			"componentType": "Sequence",
+			"label": "\"I - Collect number\"",
+			"conditionFilter": { "value": "true" }
+		},
+		{
+			"id": "input1",
+			"componentType": "InputNumber",
+			"label": "Number",
+			"conditionFilter": { "value": "true" },
+			"response": { "name": "NUM" },
+			"bindingDependencies": ["NUM"]
+		},
+		{
+			"id": "seq2",
+			"componentType": "Sequence",
+			"label": "\"II - Promo rate\"",
+			"conditionFilter": {
+				"value": "PROMO = true",
+				"bindingDependencies": ["PROMO"]
+			},
+			"bindingDependencies": ["PROMO"]
+		},
+		{
+			"id": "input2",
+			"componentType": "InputNumber",
+			"label": "Rate",
+			"conditionFilter": {
+				"value": "PROMO = true",
+				"bindingDependencies": ["PROMO"]
+			},
+			"response": {
+				"name": "PROMO_RATE",
+				"bindingDependencies": ["PROMO_RATE"]
+			},
+			"bindingDependencies": ["PROMO", "PROMO_RATE"]
+		}
+	],
+	"variables": [
+		{
+			"variableType": "COLLECTED",
+			"name": "NUM",
+			"componentRef": "input1",
+			"values": {
+				"PREVIOUS": null,
+				"COLLECTED": null,
+				"FORCED": null,
+				"EDITED": null,
+				"INPUTED": null
+			}
+		},
+		{
+			"variableType": "COLLECTED",
+			"name": "PROMO_RATE",
+			"componentRef": "input2",
+			"values": {
+				"PREVIOUS": null,
+				"COLLECTED": null,
+				"FORCED": null,
+				"EDITED": null,
+				"INPUTED": null
+			}
+		},
+		{ "variableType": "EXTERNAL", "name": "PROMO", "value": null },
+		{
+			"variableType": "CALCULATED",
+			"name": "DOUBLE_PROMO_RATE",
+			"expression": "cast(PROMO_RATE, integer) * 2",
+			"bindingDependencies": ["PROMO_RATE"]
+		}
+	]
+}

package/src/stories/utils/orchestrator.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import * as lunatic from 'components';
 import './custom-lunatic.scss';
 
@@ -22,6 +22,7 @@ const OrchestratorForStories = ({
 	activeGoNextForMissing = false,
 	suggesterFetcher,
 	autoSuggesterLoading,
+	addExternal,
 	...rest
 }) => {
 	const preferences = management
@@ -30,6 +31,7 @@ const OrchestratorForStories = ({
 	const savingType = management ? 'EDITED' : 'COLLECTED';
 	const {
 		handleChange,
+		handleExternals,
 		components,
 		bindings,
 		pagination: {
@@ -54,6 +56,11 @@ const OrchestratorForStories = ({
 		suggesterFetcher,
 		autoSuggesterLoading,
 	});
+
+	useEffect(() => {
+		handleExternals(addExternal);
+	}, [addExternal, handleExternals]);
+
 	const Button = lunatic.Button;
 
 	const missingStrategy = (b) => goNext(null, b);

package/src/utils/to-expose/handler.js

@@ -59,6 +59,26 @@ export const updateQuestionnaire =
 		};
 	};
 
+export const updateExternals =
+	(questionnaire) => (logFunction) => (updatedValues) => {
+		const { variables, ...other } = questionnaire;
+		const { EXTERNAL } = variables;
+		const newVariables = {
+			...variables,
+			EXTERNAL: { ...EXTERNAL, ...updatedValues },
+		};
+
+		const newVariablesWithCalculated = addCalculatedVars(
+			newVariables,
+			updatedValues
+		)(logFunction);
+
+		return {
+			...other,
+			variables: newVariablesWithCalculated,
+		};
+	};
+
 export const buildNewValue =
 	(preferences) => (valueType) => (oldValues) => (value) => {
 		if (preferences.length === 1) return value;

package/src/utils/to-expose/hooks/lunatic.js

@@ -1,7 +1,7 @@
 import { useState, useEffect, useCallback } from 'react';
 import { mergeQuestionnaireAndData } from '../init-questionnaire';
 import { getBindings } from '../state';
-import { updateQuestionnaire } from '../handler';
+import { updateQuestionnaire, updateExternals } from '../handler';
 import { getPage, FLOW_NEXT, FLOW_PREVIOUS, getControls } from '../../lib';
 import { COLLECTED } from '../../../constants';
 import { useFilterComponents } from './filter-components';
@@ -33,6 +33,7 @@ const useLunatic = (
 	const [page, setPage] = useState(initialPage);
 
 	const [todo, setTodo] = useState({});
+	const [todoExternals, setTodoExternals] = useState({});
 
 	const [modalContent, setModalContent] = useState(null);
 
@@ -43,7 +44,7 @@ const useLunatic = (
 		features: featuresWithoutMD,
 		page,
 		pagination,
-		todo,
+		todo: { ...todo, ...todoExternals },
 	});
 
 	const { suggesters: suggestersToLoad } = source;
@@ -168,6 +169,10 @@ const useLunatic = (
 		setTodo((t) => ({ ...t, ...updatedValue }));
 	}, []);
 
+	const handleExternals = useCallback((externals) => {
+		setTodoExternals((t) => ({ ...t, ...externals }));
+	}, []);
+
 	// Assume we only want to handle source update
 	useEffect(() => {
 		setQuestionnaire(mergeQuestionnaireAndData(source)(data));
@@ -193,6 +198,14 @@ const useLunatic = (
 		management,
 	]);
 
+	useEffect(() => {
+		if (Object.keys(todoExternals).length !== 0) {
+			const newQ = updateExternals(questionnaire)(logFunction)(todoExternals);
+			setQuestionnaire(newQ);
+			setTodoExternals({});
+		}
+	}, [todoExternals, logFunction, questionnaire]);
+
 	const cancelModal = () => {
 		setModalContent(null);
 	};
@@ -218,6 +231,7 @@ const useLunatic = (
 	return {
 		questionnaire,
 		handleChange,
+		handleExternals,
 		components: componentsToDiplay,
 		bindings,
 		pagination: {