thm-p3-configurator 0.0.129 → 0.0.131

package/dist/src/shared/App.js

@@ -25,7 +25,7 @@ var _FormulaContext = require("./__context__/FormulaContext");
 var _OrderSessionContext = require("./__context__/OrderSessionContext");
 var _cookiebot = require("./__helpers__/cookiebot");
 var _queryClient = _interopRequireDefault(require("./__helpers__/queryClient"));
-var _TEST_ONLY_INTERNAL_ROUTES = _interopRequireDefault(require("./__pages__/internal/__TEST_ONLY_INTERNAL_ROUTES"));
+var _index = _interopRequireDefault(require("./__pages__/index"));
 var _Experiments = _interopRequireDefault(require("./__services__/Experiments"));
 var _mainExternal = _interopRequireDefault(require("./__style__/main-external.scss"));
 var _main = _interopRequireDefault(require("./__style__/main.scss"));
@@ -59,7 +59,7 @@ function _interopRequireWildcard(e, r) {
   }
   return n.default = e, t && t.set(e, n), n;
 }
-// import Routes from './__pages__/index';
+// import TEST_ONLY_INTERNAL_ROUTES from './__pages__/internal/__TEST_ONLY_INTERNAL_ROUTES';
 
 _reactGtmModule.default.initialize({
   gtmId: APP_CONFIG.googleTagManagerId || 'GTM-TC67SZ4'
@@ -76,6 +76,6 @@ const App = () => {
     defaultCountry: APP_CONFIG.country
   }, /*#__PURE__*/_react.default.createElement(_OrderSessionContext.OrderSessionController, null, /*#__PURE__*/_react.default.createElement(_reactQuery.QueryClientProvider, {
     client: _queryClient.default
-  }, /*#__PURE__*/_react.default.createElement(_reactRouterDom.BrowserRouter, null, /*#__PURE__*/_react.default.createElement(_reactHotLoader.AppContainer, null, /*#__PURE__*/_react.default.createElement(_ActiveMarkerContext.ActiveMarkerProvider, null, /*#__PURE__*/_react.default.createElement(_StyleWrapper.default, null, !APP_CONFIG.internal && /*#__PURE__*/_react.default.createElement(_Navbar.default, null), APP_CONFIG.internal && /*#__PURE__*/_react.default.createElement(_InternalBranchSelectorModal.default, null), APP_CONFIG.nodeEnv === 'development' && APP_CONFIG.internal === true && /*#__PURE__*/_react.default.createElement(_TEST_ONLY_INTERNAL_ROUTES.default, null))))))))));
+  }, /*#__PURE__*/_react.default.createElement(_reactRouterDom.BrowserRouter, null, /*#__PURE__*/_react.default.createElement(_reactHotLoader.AppContainer, null, /*#__PURE__*/_react.default.createElement(_ActiveMarkerContext.ActiveMarkerProvider, null, /*#__PURE__*/_react.default.createElement(_StyleWrapper.default, null, !APP_CONFIG.internal && /*#__PURE__*/_react.default.createElement(_Navbar.default, null), APP_CONFIG.internal && /*#__PURE__*/_react.default.createElement(_InternalBranchSelectorModal.default, null), /*#__PURE__*/_react.default.createElement(_index.default, null))))))))));
 };
 var _default = exports.default = App;

package/dist/src/shared/__containers__/QuestionsForm.js

@@ -110,6 +110,13 @@ const QuestionsForm = _ref => {
     executionAnswer2: '',
     durationAnswer: ''
   });
+
+  // Store initial options in state
+  const [initialOptions, setInitialOptions] = (0, _react.useState)({
+    execution1: [],
+    execution2: [],
+    duration: []
+  });
   const [{
     licensePlate,
     model,
@@ -128,6 +135,34 @@ const QuestionsForm = _ref => {
     formula = singleOrderFormulaCode;
   }
   const history = (0, _reactRouter.useHistory)();
+
+  // Create a modified version of execution answers for the query
+  // Only include both execution answers if both are provided
+  const createQueryParams = () => {
+    const hasMultipleExecutionQuestions = initialOptions.execution1.length > 0 && initialOptions.execution2.length > 0;
+
+    // If we have multiple execution questions, only include answers if both are provided
+    if (hasMultipleExecutionQuestions && (!executionAnswer1 || !executionAnswer2)) {
+      return {
+        licensePlate: initialLicensePlate !== null && initialLicensePlate !== void 0 ? initialLicensePlate : licensePlate,
+        model,
+        formula,
+        discountCode,
+        durationAnswer: durationAnswer
+      };
+    }
+
+    // Otherwise include all available answers
+    return {
+      licensePlate: initialLicensePlate !== null && initialLicensePlate !== void 0 ? initialLicensePlate : licensePlate,
+      model,
+      formula,
+      discountCode,
+      executionAnswer1,
+      executionAnswer2,
+      durationAnswer: durationAnswer
+    };
+  };
   const {
     isLoadingQuestions,
     execution1AnswerOptions,
@@ -135,25 +170,70 @@ const QuestionsForm = _ref => {
     durationAnswer: durationAnswerPrefilled,
     questionsError,
     durationQuestion
-  } = (0, _queries.useQuestionsQuery)({
+  } = (0, _queries.useQuestionsQuery)(createQueryParams());
+
+  // Store initial options when they first arrive
+  (0, _react.useEffect)(() => {
+    if (!initialOptions.execution1.length && execution1AnswerOptions !== null && execution1AnswerOptions !== void 0 && execution1AnswerOptions.length) {
+      setInitialOptions(prev => _objectSpread(_objectSpread({}, prev), {}, {
+        execution1: execution1AnswerOptions
+      }));
+      // Only update context on initial load
+      dispatch({
+        type: _OrderSessionContext.orderSessionActions.SET_EXECUTION1_OPTIONS,
+        payload: {
+          options: execution1AnswerOptions
+        }
+      });
+    }
+  }, [execution1AnswerOptions]);
+  (0, _react.useEffect)(() => {
+    if (!initialOptions.execution2.length && execution2AnswerOptions !== null && execution2AnswerOptions !== void 0 && execution2AnswerOptions.length) {
+      setInitialOptions(prev => _objectSpread(_objectSpread({}, prev), {}, {
+        execution2: execution2AnswerOptions
+      }));
+      // Only update context on initial load
+      dispatch({
+        type: _OrderSessionContext.orderSessionActions.SET_EXECUTION2_OPTIONS,
+        payload: {
+          options: execution2AnswerOptions
+        }
+      });
+    }
+  }, [execution2AnswerOptions]);
+  (0, _react.useEffect)(() => {
+    if (!initialOptions.duration.length && durationQuestion !== null && durationQuestion !== void 0 && durationQuestion.length) {
+      setInitialOptions(prev => _objectSpread(_objectSpread({}, prev), {}, {
+        duration: durationQuestion
+      }));
+      dispatch({
+        type: _OrderSessionContext.orderSessionActions.SET_DURATION_OPTIONS,
+        payload: {
+          options: durationQuestion
+        }
+      });
+    }
+  }, [durationQuestion]);
+
+  // Only prefetch products when all required answers are provided
+  const hasMultipleExecutionQuestions = initialOptions.execution1.length > 0 && initialOptions.execution2.length > 0;
+  const shouldPrefetchProducts = !hasMultipleExecutionQuestions || executionAnswer1 && executionAnswer2;
+  (0, _queries.useProductsQuery)(shouldPrefetchProducts ? {
     licensePlate: initialLicensePlate !== null && initialLicensePlate !== void 0 ? initialLicensePlate : licensePlate,
     model,
-    formula,
-    discountCode,
     executionAnswer1,
     executionAnswer2,
-    durationAnswer: durationAnswer
-  });
-  (0, _queries.useProductsQuery)({
+    durationAnswer,
+    formula,
+    discountCode,
+    priceCalculationDate
+  } : {
     licensePlate: initialLicensePlate !== null && initialLicensePlate !== void 0 ? initialLicensePlate : licensePlate,
     model,
-    executionAnswer1,
-    executionAnswer2,
-    durationAnswer,
     formula,
     discountCode,
     priceCalculationDate
-  }); // Prefetch
+  });
 
   /**
    * @description This hook pre-fills the duration answer, only if it comes pre-filled from the API, and it's not set manually by the user.
@@ -294,26 +374,26 @@ const QuestionsForm = _ref => {
   };
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", null, "We hebben nog een aantal vragen (max 4) voordat we de juiste trekhaak voor jouw auto kunnen adviseren."), /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _helpers__.withStyle)('my-2')
-  }, (durationOptions === null || durationOptions === void 0 ? void 0 : durationOptions.length) > 0 && /*#__PURE__*/_react.default.createElement(_RadioInput.default, {
+  }, initialOptions.duration.length > 0 && /*#__PURE__*/_react.default.createElement(_RadioInput.default, {
     name: "questions-duration",
     label: "Selecteer uw uitvoering",
     onChange: handleDurationChange,
     initialValue: isFilter ? filterAnswers.durationAnswer : durationAnswer,
-    options: durationOptions,
+    options: initialOptions.duration,
     isRequired: true
-  }), (execution1Options === null || execution1Options === void 0 ? void 0 : execution1Options.length) > 0 && /*#__PURE__*/_react.default.createElement(_RadioInput.default, {
+  }), initialOptions.execution1.length > 0 && /*#__PURE__*/_react.default.createElement(_RadioInput.default, {
     name: "questions-1",
     label: "Selecteer uw uitvoering",
     onChange: handleExecution1Change,
     initialValue: isFilter ? filterAnswers.executionAnswer1 : executionAnswer1,
-    options: execution1Options,
+    options: initialOptions.execution1,
     isRequired: true
-  }), (execution2Options === null || execution2Options === void 0 ? void 0 : execution2Options.length) > 0 && /*#__PURE__*/_react.default.createElement(_RadioInput.default, {
+  }), initialOptions.execution2.length > 0 && /*#__PURE__*/_react.default.createElement(_RadioInput.default, {
     name: "questions-2",
     label: "Selecteer uw uitvoering",
     onChange: handleExecution2Change,
     initialValue: isFilter ? filterAnswers.executionAnswer2 : executionAnswer2,
-    options: execution2Options,
+    options: initialOptions.execution2,
     isRequired: true
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _helpers__.withStyle)('row align-items-center justify-content-end mt-2')
@@ -331,20 +411,29 @@ const QuestionsForm = _ref => {
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _helpers__.withStyle)('d-grid gap-2')
   }, /*#__PURE__*/_react.default.createElement(_PrimaryButton.default, {
-    isDisabled: isFilter ? execution1AnswerOptions.length && !filterAnswers.executionAnswer1 || execution2AnswerOptions.length && !filterAnswers.executionAnswer2 || durationQuestion.length && !filterAnswers.durationAnswer : execution1AnswerOptions.length && !executionAnswer1 || execution2AnswerOptions.length && !executionAnswer2 || durationQuestion.length && !durationAnswer,
-    onClick: () => onSubmit(isFilter ? {
-      type: 'licensePlate',
-      value: {
-        licensePlate: initialLicensePlate,
-        executionAnswer1: filterAnswers.executionAnswer1,
-        executionAnswer2: filterAnswers.executionAnswer2,
-        durationAnswer: filterAnswers.durationAnswer
+    isDisabled: isFilter ? initialOptions.execution1.length && !filterAnswers.executionAnswer1 || initialOptions.execution2.length && !filterAnswers.executionAnswer2 || initialOptions.duration.length && !filterAnswers.durationAnswer || hasMultipleExecutionQuestions && (!filterAnswers.executionAnswer1 || !filterAnswers.executionAnswer2) : initialOptions.execution1.length && !executionAnswer1 || initialOptions.execution2.length && !executionAnswer2 || initialOptions.duration.length && !durationAnswer || hasMultipleExecutionQuestions && (!executionAnswer1 || !executionAnswer2),
+    onClick: () => {
+      // Don't proceed if both are required but not provided
+      if (hasMultipleExecutionQuestions && (!executionAnswer1 || !executionAnswer2) && !isFilter) {
+        return;
       }
-    } : {
-      executionAnswer1,
-      executionAnswer2,
-      durationAnswer
-    }),
+      if (isFilter && hasMultipleExecutionQuestions && (!filterAnswers.executionAnswer1 || !filterAnswers.executionAnswer2)) {
+        return;
+      }
+      onSubmit(isFilter ? {
+        type: 'licensePlate',
+        value: {
+          licensePlate: initialLicensePlate,
+          executionAnswer1: filterAnswers.executionAnswer1,
+          executionAnswer2: filterAnswers.executionAnswer2,
+          durationAnswer: filterAnswers.durationAnswer
+        }
+      } : {
+        executionAnswer1,
+        executionAnswer2,
+        durationAnswer
+      });
+    },
     label: isFilter ? 'Filter' : 'Bekijk de mogelijkheden'
   })))));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "thm-p3-configurator",
-  "version": "0.0.129",
+  "version": "0.0.131",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": "EnoRm.",