thm-p3-configurator 0.0.229 → 0.0.231

package/dist/src/shared/__api__/authenticatedProxyApi.js

@@ -136,6 +136,13 @@ const authenticatedProxyApi = exports.authenticatedProxyApi = {
       'Content-Type': 'application/json'
     }
   }),
+  postShopifyOrder: shopifyOrderPayload => authenticateClient("api/v1/single-orders/shopify", {
+    method: 'POST',
+    data: shopifyOrderPayload,
+    headers: {
+      'Content-Type': 'application/json'
+    }
+  }),
   postAppointment: appointmentPayload => authenticateClient("api/v1/appointments", {
     method: 'POST',
     data: appointmentPayload,

package/dist/src/shared/__api__/mutations.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useUpdatePrivateQuotationByIdMutation = exports.useUpdatePrivateAppointmentRequestByIdMutation = exports.useUpdatePrivateAppointmentByIdMutation = exports.useCreateSingleOrderMutation = exports.useCreateQuotationMutation = exports.useCreatePrivateQuotationMutation = exports.useCreatePrivateAppointmentRequestMutation = exports.useCreatePrivateAppointmentMutation = exports.useCreateAppointmentRequestMutation = void 0;
+exports.useUpdatePrivateQuotationByIdMutation = exports.useUpdatePrivateAppointmentRequestByIdMutation = exports.useUpdatePrivateAppointmentByIdMutation = exports.useCreateSingleOrderMutation = exports.useCreateShopifyOrderMutation = exports.useCreateQuotationMutation = exports.useCreatePrivateQuotationMutation = exports.useCreatePrivateAppointmentRequestMutation = exports.useCreatePrivateAppointmentMutation = exports.useCreateAppointmentRequestMutation = void 0;
 var _reactQuery = require("react-query");
 var _authenticatedProxyApi = require("./authenticatedProxyApi");
 var _publicProxyApi = require("./publicProxyApi");
@@ -128,13 +128,53 @@ const useCreateSingleOrderMutation = () => {
   };
 };
 
+/**
+ * @description Creates a Shopify order for webshop orders
+ */
+exports.useCreateSingleOrderMutation = useCreateSingleOrderMutation;
+const useCreateShopifyOrderMutation = () => {
+  const createShopifyOrderMutation = (0, _reactQuery.useMutation)(_ref4 => {
+    let {
+      licensePlate,
+      model,
+      cart,
+      customer,
+      channel,
+      formula,
+      branchId,
+      vehicle,
+      internalNote,
+      webshop
+    } = _ref4;
+    return _authenticatedProxyApi.authenticatedProxyApi.postShopifyOrder({
+      licensePlate,
+      model,
+      cart,
+      customer,
+      channel,
+      formula,
+      branchId,
+      vehicle,
+      internalNote,
+      webshop
+    });
+  });
+  return {
+    isCreatingShopifyOrder: createShopifyOrderMutation.isLoading,
+    isCreateShopifyOrderError: createShopifyOrderMutation.isError,
+    isCreateShopifyOrderSuccess: createShopifyOrderMutation.isSuccess,
+    resetShopifyOrderCreation: createShopifyOrderMutation.reset,
+    createShopifyOrder: createShopifyOrderMutation.mutate
+  };
+};
+
 /**
  * @description Creates a quotation within the private order API
  * Signs the request with the accessToken
  */
-exports.useCreateSingleOrderMutation = useCreateSingleOrderMutation;
+exports.useCreateShopifyOrderMutation = useCreateShopifyOrderMutation;
 const useCreatePrivateQuotationMutation = () => {
-  const createQuotationMutation = (0, _reactQuery.useMutation)(_ref4 => {
+  const createQuotationMutation = (0, _reactQuery.useMutation)(_ref5 => {
     let {
       vehicle,
       customer,
@@ -149,7 +189,7 @@ const useCreatePrivateQuotationMutation = () => {
       formula,
       discount,
       isExitIntent = false
-    } = _ref4;
+    } = _ref5;
     return _authenticatedProxyApi.authenticatedProxyApi.postQuotation({
       isExitIntent,
       model,
@@ -181,7 +221,7 @@ const useCreatePrivateQuotationMutation = () => {
  */
 exports.useCreatePrivateQuotationMutation = useCreatePrivateQuotationMutation;
 const useCreatePrivateAppointmentMutation = () => {
-  const createPlannedAppointmentMutation = (0, _reactQuery.useMutation)(_ref5 => {
+  const createPlannedAppointmentMutation = (0, _reactQuery.useMutation)(_ref6 => {
     let {
       vehicle,
       customer,
@@ -196,8 +236,9 @@ const useCreatePrivateAppointmentMutation = () => {
       branchId,
       formula,
       discount,
-      customerAgreed
-    } = _ref5;
+      customerAgreed,
+      invoicePaymentByLeaseCompany
+    } = _ref6;
     return _authenticatedProxyApi.authenticatedProxyApi.postAppointment({
       appointment,
       model,
@@ -212,7 +253,8 @@ const useCreatePrivateAppointmentMutation = () => {
       selectBoardComputerUpdate,
       customer: customer,
       branchId,
-      customerAgreed
+      customerAgreed,
+      invoicePaymentByLeaseCompany
     });
   });
   return {
@@ -230,7 +272,7 @@ const useCreatePrivateAppointmentMutation = () => {
  */
 exports.useCreatePrivateAppointmentMutation = useCreatePrivateAppointmentMutation;
 const useCreatePrivateAppointmentRequestMutation = () => {
-  const createAppointmentRequestMutation = (0, _reactQuery.useMutation)(_ref6 => {
+  const createAppointmentRequestMutation = (0, _reactQuery.useMutation)(_ref7 => {
     let {
       vehicle,
       customer,
@@ -246,7 +288,7 @@ const useCreatePrivateAppointmentRequestMutation = () => {
       formula,
       discount,
       customerAgreed
-    } = _ref6;
+    } = _ref7;
     return _authenticatedProxyApi.authenticatedProxyApi.postAppointmentRequest({
       appointment,
       model,
@@ -279,7 +321,7 @@ const useCreatePrivateAppointmentRequestMutation = () => {
  */
 exports.useCreatePrivateAppointmentRequestMutation = useCreatePrivateAppointmentRequestMutation;
 const useUpdatePrivateAppointmentRequestByIdMutation = id => {
-  const updateAppointmentRequestByIdMutation = (0, _reactQuery.useMutation)(_ref7 => {
+  const updateAppointmentRequestByIdMutation = (0, _reactQuery.useMutation)(_ref8 => {
     let {
       vehicle,
       customer,
@@ -296,7 +338,7 @@ const useUpdatePrivateAppointmentRequestByIdMutation = id => {
       discount,
       priceCalculationDate,
       customerAgreed
-    } = _ref7;
+    } = _ref8;
     return _authenticatedProxyApi.authenticatedProxyApi.putAppointmentRequestById({
       id,
       payload: {
@@ -333,7 +375,7 @@ const useUpdatePrivateAppointmentRequestByIdMutation = id => {
  */
 exports.useUpdatePrivateAppointmentRequestByIdMutation = useUpdatePrivateAppointmentRequestByIdMutation;
 const useUpdatePrivateQuotationByIdMutation = id => {
-  const updateQuotationMutation = (0, _reactQuery.useMutation)(_ref8 => {
+  const updateQuotationMutation = (0, _reactQuery.useMutation)(_ref9 => {
     let {
       vehicle,
       customer,
@@ -347,7 +389,7 @@ const useUpdatePrivateQuotationByIdMutation = id => {
       formula,
       discount,
       priceCalculationDate
-    } = _ref8;
+    } = _ref9;
     return _authenticatedProxyApi.authenticatedProxyApi.putQuotationById({
       id,
       payload: {
@@ -381,7 +423,7 @@ const useUpdatePrivateQuotationByIdMutation = id => {
  */
 exports.useUpdatePrivateQuotationByIdMutation = useUpdatePrivateQuotationByIdMutation;
 const useUpdatePrivateAppointmentByIdMutation = id => {
-  const updateAppointmentByIdMutation = (0, _reactQuery.useMutation)(_ref9 => {
+  const updateAppointmentByIdMutation = (0, _reactQuery.useMutation)(_ref10 => {
     let {
       vehicle,
       customer,
@@ -398,7 +440,7 @@ const useUpdatePrivateAppointmentByIdMutation = id => {
       discount,
       priceCalculationDate,
       customerAgreed
-    } = _ref9;
+    } = _ref10;
     return _authenticatedProxyApi.authenticatedProxyApi.putAppointmentById({
       id,
       payload: {

package/dist/src/shared/__api__/queries.js

@@ -7,6 +7,7 @@ require("core-js/modules/es.promise.js");
 require("core-js/modules/es.regexp.to-string.js");
 require("core-js/modules/esnext.iterator.constructor.js");
 require("core-js/modules/esnext.iterator.filter.js");
+require("core-js/modules/esnext.iterator.find.js");
 require("core-js/modules/esnext.iterator.for-each.js");
 require("core-js/modules/esnext.iterator.map.js");
 require("core-js/modules/web.dom-collections.iterator.js");
@@ -22,6 +23,7 @@ require("core-js/modules/es.object.from-entries.js");
 require("core-js/modules/es.promise.js");
 require("core-js/modules/es.regexp.to-string.js");
 require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.find.js");
 require("core-js/modules/esnext.iterator.for-each.js");
 require("core-js/modules/esnext.iterator.map.js");
 require("core-js/modules/web.dom-collections.iterator.js");
@@ -246,9 +248,10 @@ const useSingleOrderArticles = exports.useSingleOrderArticles = function useSing
   let filters = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   let formula = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
   let branchId = arguments.length > 2 ? arguments[2] : undefined;
-  const articlesQuery = (0, _reactQuery.useQuery)(['singleOrderArticles', filters, branchId], {
+  let webshop = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
+  const articlesQuery = (0, _reactQuery.useQuery)(['singleOrderArticles', filters, branchId, webshop], {
     queryFn: async () => {
-      if (!branchId) {
+      if (!branchId && !webshop) {
         return {
           articles: [],
           totalArticles: 0
@@ -284,7 +287,13 @@ const useSingleOrderArticles = exports.useSingleOrderArticles = function useSing
           totalArticles: 0
         };
       }
-      const currentArticles = await (0, _singleOrderArticles.enrichArticlesWithBrandsAndPrices)(articles, branchId, formula);
+      let currentArticles;
+      if (branchId) {
+        currentArticles = await (0, _singleOrderArticles.enrichArticlesWithBrandsAndPrices)(articles, branchId, formula);
+      } else {
+        // If webshop is selected (online order), use formula 'THC' to fetch standard prices
+        currentArticles = await (0, _singleOrderArticles.enrichArticlesWithBrandsAndPrices)(articles, null, 'THL');
+      }
       return {
         articles: currentArticles,
         totalArticles: totalCount
@@ -319,7 +328,8 @@ exports.useCountriesQuery = useCountriesQuery;
 const useSingleOrderCart = () => {
   const [{
     singleOrderCart,
-    singleOrderFormulaCode
+    singleOrderFormulaCode,
+    webshop
   }] = (0, _OrderSessionContext.useOrderSession)();
 
   // Create lookup map for cart totals
@@ -355,15 +365,48 @@ const useSingleOrderCart = () => {
     isSingle: true,
     cart: JSON.stringify(singleOrderCart)
   })).toString();
-  const cartQuery = (0, _reactQuery.useQuery)(['singleOrderCart', cartOrderQuery], {
+  const cartQuery = (0, _reactQuery.useQuery)(['singleOrderCart', cartOrderQuery, webshop], {
     queryFn: async () => {
-      var _articles$articles;
+      var _articles$articles2;
       if (!singleOrderCart.length) {
         return {
           articles: [],
           totals: []
         };
       }
+
+      // If webshop is selected, use Shopify prices directly without API call
+      if (webshop) {
+        var _articles$articles;
+        const articles = await (0, _singleOrderArticles.fetchArticlesByArticleNumbers)(singleOrderCart.map(article => article.articleNumber));
+        const articlesWithPrice = articles === null || articles === void 0 || (_articles$articles = articles.articles) === null || _articles$articles === void 0 ? void 0 : _articles$articles.map(article => {
+          const cartItem = singleOrderCart.find(item => item.articleNumber === article.articleNumber);
+          const totals = cartTotalsLookup[article.articleNumber];
+          return _objectSpread(_objectSpread({}, article), {}, {
+            price: cartItem !== null && cartItem !== void 0 && cartItem.productPriceInclVat ? Math.round(Number(cartItem === null || cartItem === void 0 ? void 0 : cartItem.productPriceInclVat) * 100) / 100 : 0,
+            quantity: Number(cartItem === null || cartItem === void 0 ? void 0 : cartItem.quantity),
+            // Add the calculated totals using Shopify prices
+            productBtw: totals === null || totals === void 0 ? void 0 : totals.productBtw,
+            productTotalExclVat: totals === null || totals === void 0 ? void 0 : totals.productTotalExclVat,
+            productTotalInclVat: totals === null || totals === void 0 ? void 0 : totals.productTotalInclVat,
+            productPrice: totals === null || totals === void 0 ? void 0 : totals.productPrice,
+            productPriceInclVat: totals === null || totals === void 0 ? void 0 : totals.productPriceInclVat,
+            individualPriceInclVat: totals === null || totals === void 0 ? void 0 : totals.individualPriceInclVat,
+            individualPriceExclVat: totals === null || totals === void 0 ? void 0 : totals.individualPriceExclVat
+          });
+        });
+        return {
+          articles: articlesWithPrice,
+          totals: {
+            totalQuantity: Math.round(totalQuantity * 100) / 100,
+            totalBtw: Math.round(totalBtw * 100) / 100,
+            totalExclVat: Math.round(totalExclVat * 100) / 100,
+            totalInclVat: Math.round(totalInclVat * 100) / 100
+          }
+        };
+      }
+
+      // Original logic for non-webshop orders
       const orderResults = await _authenticatedProxyApi.authenticatedProxyApi.getOrder(cartOrderQuery).then(res => res.data);
       if (!orderResults.data.cart) {
         return {
@@ -373,7 +416,7 @@ const useSingleOrderCart = () => {
       const cart = orderResults.data.cart;
       const articles = await (0, _singleOrderArticles.fetchArticlesByArticleNumbers)(cart.map(article => article.articleNumber));
       const cartLookup = Object.fromEntries(cart.map(item => [item.articleNumber, item]));
-      const articlesWithPrice = articles === null || articles === void 0 || (_articles$articles = articles.articles) === null || _articles$articles === void 0 ? void 0 : _articles$articles.map(article => {
+      const articlesWithPrice = articles === null || articles === void 0 || (_articles$articles2 = articles.articles) === null || _articles$articles2 === void 0 ? void 0 : _articles$articles2.map(article => {
         const cartItem = cartLookup[article.articleNumber];
         const totals = cartTotalsLookup[article.articleNumber];
         return _objectSpread(_objectSpread({}, article), {}, {

package/dist/src/shared/__components__/SingleOrderProductCard.js

@@ -85,21 +85,22 @@ const ProductActions = _ref2 => {
     productPrice,
     showPartStockLevel,
     setShowPartStockLevel,
-    productPriceInclVat
+    productPriceInclVat,
+    isWebshop = false
   } = _ref2;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _helpers__.withStyle)('d-flex justify-content-end')
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _helpers__.withStyle)('d-flex flex-column align-items-end')
-  }, isOutOfStock ? /*#__PURE__*/_react.default.createElement("div", {
+  }, !isWebshop && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isOutOfStock ? /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _helpers__.withStyle)('text-danger mb-1')
   }, "Niet op voorraad") : stock === _constants__.StockStatus.InsufficientStock ? /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _helpers__.withStyle)('text-warning mb-1')
   }, isTmg ? "".concat(stock, " op voorraad") : 'Weinig op voorraad') : /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _helpers__.withStyle)('text-success mb-1')
-  }, isTmg ? "".concat(stock, " op voorraad") : 'Op voorraad'), /*#__PURE__*/_react.default.createElement("div", {
+  }, isTmg ? "".concat(stock, " op voorraad") : 'Op voorraad')), /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _helpers__.withStyle)('d-flex align-items-center')
-  }, /*#__PURE__*/_react.default.createElement(_OutlinedButton.default, {
+  }, !isWebshop && /*#__PURE__*/_react.default.createElement(_OutlinedButton.default, {
     style: {
       marginRight: '1rem'
     },
@@ -129,7 +130,8 @@ const ProductCategories = _ref3 => {
     preferredPart = null,
     partStockLevels = null,
     showPartStockLevel = false,
-    brandName = null
+    brandName = null,
+    isWebshop = false
   } = _ref3;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _helpers__.withStyle)('col-md-6')
@@ -143,7 +145,7 @@ const ProductCategories = _ref3 => {
     className: (0, _helpers__.withStyle)('fst-italic mb-0')
   }, /*#__PURE__*/_react.default.createElement("strong", null, "Subgroep:"), " ", productSubgroup), preferredPart && /*#__PURE__*/_react.default.createElement("p", {
     className: (0, _helpers__.withStyle)('fst-italic mb-0')
-  }, /*#__PURE__*/_react.default.createElement("strong", null, "Voorkeur onderdeel:"), " ", preferredPart.preferredPart), showPartStockLevel && (partStockLevels === null || partStockLevels === void 0 ? void 0 : partStockLevels.status) && /*#__PURE__*/_react.default.createElement("p", {
+  }, /*#__PURE__*/_react.default.createElement("strong", null, "Voorkeur onderdeel:"), " ", preferredPart.preferredPart), !isWebshop && showPartStockLevel && (partStockLevels === null || partStockLevels === void 0 ? void 0 : partStockLevels.status) && /*#__PURE__*/_react.default.createElement("p", {
     className: (0, _helpers__.withStyle)('fst-italic mb-0')
   }, /*#__PURE__*/_react.default.createElement("small", {
     className: (0, _helpers__.withStyle)(partStockLevels.status === _constants__.StockStatus.OutOfStock ? 'text-danger' : partStockLevels.status === _constants__.StockStatus.InsufficientStock ? 'text-warning' : 'text-success')
@@ -174,7 +176,8 @@ const SingleOrderProductCard = _ref4 => {
     isTmg = false,
     parts = [],
     branchId,
-    brandName = null
+    brandName = null,
+    isWebshop = false
   } = _ref4;
   const {
     productFieldLabels
@@ -246,7 +249,8 @@ const SingleOrderProductCard = _ref4 => {
     articleNumber: articleNumber,
     preferredPart: preferredPart,
     partStockLevels: partStockLevels,
-    showPartStockLevel: showPartStockLevel
+    showPartStockLevel: showPartStockLevel,
+    isWebshop: isWebshop
   }), (filteredProductSpecifications === null || filteredProductSpecifications === void 0 ? void 0 : filteredProductSpecifications.length) > 0 && /*#__PURE__*/_react.default.createElement(_ProductCardSpecifications.default, {
     specifications: filteredProductSpecifications,
     className: isModelArticle ? '' : 'w-100'
@@ -265,7 +269,8 @@ const SingleOrderProductCard = _ref4 => {
     handleSelected: handleSelected,
     removeFromCart: removeFromCart,
     productPrice: productPrice,
-    productPriceInclVat: productPriceInclVat
+    productPriceInclVat: productPriceInclVat,
+    isWebshop: isWebshop
   })))));
 };
 var _default = exports.default = SingleOrderProductCard;

package/dist/src/shared/__components__/internal/InternalCustomerDetailsForm.js

@@ -137,7 +137,8 @@ const InternalCustomerDetailsForm = (_ref, ref) => {
     selectedBranch,
     appointment,
     internalNote,
-    vehicle
+    vehicle,
+    webshop
   }, dispatch] = (0, _OrderSessionContext.useOrderSession)();
   const {
     branchById
@@ -205,7 +206,18 @@ const InternalCustomerDetailsForm = (_ref, ref) => {
   };
   const validateForm = async () => {
     try {
-      await customerDetailsFormSchema.validate(_objectSpread(_objectSpread({}, customer), {}, {
+      let validationSchema = webshop ? customerDetailsFormSchema.omit(['channelType', 'channelId']) : customerDetailsFormSchema;
+
+      // For webshop orders, make certain customer fields required
+      if (webshop) {
+        validationSchema = validationSchema.shape({
+          firstName: (0, _yup.string)().required('Voornaam is verplicht'),
+          lastName: (0, _yup.string)().required('Achternaam is verplicht'),
+          email: (0, _yup.string)().required('E-mailadres is verplicht').email('E-mailadres is ongeldig'),
+          phoneNumber: (0, _yup.string)().required('Telefoonnummer is verplicht')
+        });
+      }
+      await validationSchema.validate(_objectSpread(_objectSpread({}, customer), {}, {
         channelType: (channel === null || channel === void 0 ? void 0 : channel.channelType) || '',
         channelId: (channel === null || channel === void 0 ? void 0 : channel.channelId) || ''
       }), {
@@ -237,7 +249,7 @@ const InternalCustomerDetailsForm = (_ref, ref) => {
     label: 'Vestiginggegevens invullen?',
     onClick: handleAutofillButtonClicked,
     isDisabled: !branchById
-  })), /*#__PURE__*/_react.default.createElement("div", {
+  })), !webshop && /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _helpers__.withStyle)('col-12 mb-2')
   }, /*#__PURE__*/_react.default.createElement(_DropdownInput.default, {
     options: marketingChannels === null || marketingChannels === void 0 ? void 0 : marketingChannels.map(channel => ({
@@ -294,7 +306,7 @@ const InternalCustomerDetailsForm = (_ref, ref) => {
         firstName: value
       }
     }),
-    isRequired: false,
+    isRequired: webshop,
     form: form,
     label: "Voornaam:",
     errorMessage: errors === null || errors === void 0 ? void 0 : errors['firstName']
@@ -324,7 +336,7 @@ const InternalCustomerDetailsForm = (_ref, ref) => {
         lastName: value
       }
     }),
-    isRequired: false,
+    isRequired: webshop,
     form: form,
     label: "Achternaam:",
     errorMessage: errors === null || errors === void 0 ? void 0 : errors['lastName']
@@ -339,7 +351,7 @@ const InternalCustomerDetailsForm = (_ref, ref) => {
         email: value
       }
     }),
-    isRequired: false,
+    isRequired: webshop,
     form: form,
     label: "E-mailadres:",
     errorMessage: errors === null || errors === void 0 ? void 0 : errors['email']
@@ -355,7 +367,7 @@ const InternalCustomerDetailsForm = (_ref, ref) => {
       }
     }),
     form: form,
-    isRequired: false,
+    isRequired: webshop,
     label: "Telefoonnummer:",
     errorMessage: errors === null || errors === void 0 ? void 0 : errors['phoneNumber']
   }), /*#__PURE__*/_react.default.createElement(_TextInput.default, {
@@ -418,7 +430,7 @@ const InternalCustomerDetailsForm = (_ref, ref) => {
     form: form,
     label: "Stad:",
     errorMessage: errors === null || errors === void 0 ? void 0 : errors['city']
-  })))), /*#__PURE__*/_react.default.createElement("div", {
+  })))), !webshop && /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _helpers__.withStyle)('col-12')
   }, /*#__PURE__*/_react.default.createElement(_CardWide.default, null, /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _helpers__.withStyle)('row')

package/dist/src/shared/__containers__/internal/InternalAppointmentForm.js

@@ -203,7 +203,9 @@ const InternalAppointmentForm = _ref => {
     executionAnswer1,
     executionAnswer2,
     priceCalculationDate,
-    selectedExtras
+    selectedExtras,
+    invoicePaymentByLeaseCompany,
+    webshop
   } = order;
   const [errors, setErrors] = (0, _react.useState)({});
   const [_licensePlate, _setLicensePlate] = (0, _react.useState)();
@@ -354,6 +356,7 @@ const InternalAppointmentForm = _ref => {
           vatNumber: (_customer$vatNumber = customer === null || customer === void 0 ? void 0 : customer.vatNumber) !== null && _customer$vatNumber !== void 0 ? _customer$vatNumber : undefined
         })),
         customerAgreed,
+        invoicePaymentByLeaseCompany: invoicePaymentByLeaseCompany !== null && invoicePaymentByLeaseCompany !== void 0 ? invoicePaymentByLeaseCompany : undefined,
         appointment,
         appointmentType,
         channel,
@@ -679,7 +682,7 @@ const InternalAppointmentForm = _ref => {
     options: Object.values(_constants__.VEHICLE_OWNERSHIP_TYPE),
     isRequired: true,
     errorMessage: errors === null || errors === void 0 ? void 0 : errors['ownershipType']
-  }), (vehicle === null || vehicle === void 0 ? void 0 : vehicle.ownershipType) === _constants__.VEHICLE_OWNERSHIP_TYPE.Leasemaatschappij && /*#__PURE__*/_react.default.createElement("div", {
+  }), (vehicle === null || vehicle === void 0 ? void 0 : vehicle.ownershipType) === _constants__.VEHICLE_OWNERSHIP_TYPE.Leasemaatschappij && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _helpers__.withStyle)('company-search-container position-relative mt-2 mb-2')
   }, /*#__PURE__*/_react.default.createElement(_TextInput.default, {
     placeholder: "Zoek leasemaatschappijen...",
@@ -808,7 +811,20 @@ const InternalAppointmentForm = _ref => {
       setCompanySearchTerm('');
       setIsCompanyInputFocused(false);
     }
-  }, branch.name))))), /*#__PURE__*/_react.default.createElement("h5", {
+  }, branch.name)))), /*#__PURE__*/_react.default.createElement(_CheckboxInput.default, {
+    name: "invoicePaymentByLeaseCompany",
+    label: "Factuur betaling door Leasemaatschappij",
+    initialValue: invoicePaymentByLeaseCompany,
+    onChange: val => {
+      dispatch({
+        type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_INVOICE_PAYMENT_BY_LEASE_COMPANY,
+        payload: {
+          invoicePaymentByLeaseCompany: val
+        }
+      });
+    },
+    isRequired: false
+  }))), /*#__PURE__*/_react.default.createElement("h5", {
     className: (0, _helpers__.withStyle)('my-2')
   }, "Persoonlijke gegevens"), /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _helpers__.withStyle)('col-12 col-md-6 mb-2')
@@ -1601,7 +1617,7 @@ const InternalAppointmentForm = _ref => {
     label: /*#__PURE__*/_react.default.createElement("strong", null, "Bovenstaande gecommuniceerd naar en akkoord bevonden door klant")
   })) : /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _helpers__.withStyle)('text-muted my-2')
-  }, "Geen opties gevonden..."))), ' ')), /*#__PURE__*/_react.default.createElement("div", {
+  }, "Geen opties gevonden..."))), ' ')), !webshop && /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _helpers__.withStyle)('col-12')
   }, /*#__PURE__*/_react.default.createElement(_CardWide.default, null, /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _helpers__.withStyle)('row')
@@ -1665,7 +1681,7 @@ const InternalAppointmentForm = _ref => {
     state: {
       prevPathName: history.location.pathname
     }
-  }), !existingDossierId ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+  }), !existingDossierId ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isTmg && /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _helpers__.withStyle)('me-1')
   }, /*#__PURE__*/_react.default.createElement(_PrimaryButton.default, {
     onClick: () => {

package/dist/src/shared/__containers__/internal/InternalBranchSelectorModal.js

@@ -27,7 +27,9 @@ var _constants__ = require("../../__constants__");
 var _FormulaContext = require("../../__context__/FormulaContext");
 var _OrderSessionContext = require("../../__context__/OrderSessionContext");
 var _useIsSingleOrder = _interopRequireDefault(require("../../__hooks__/useIsSingleOrder"));
+var _useIsTmg = require("../../__hooks__/useIsTmg");
 var _LocalStorageWorker = require("../../__services__/LocalStorageWorker");
+var _OrderTypeSelectorModal = _interopRequireWildcard(require("./OrderTypeSelectorModal"));
 function _interopRequireDefault(e) {
   return e && e.__esModule ? e : {
     default: e
@@ -236,20 +238,18 @@ const InternalBranchSelectorModal = () => {
   const authSession = _LocalStorageWorker.lsw.getJson(_constants__.AUTH_SESSION_KEY);
   const isSingleOrderPage = (0, _useIsSingleOrder.default)();
   const formula = (0, _FormulaContext.useFormula)();
-  const isTMGOrganization = _react.default.useMemo(() => {
-    var _branchTypes$byId$aut, _authSession$branch2;
-    return (branchTypes === null || branchTypes === void 0 || (_branchTypes$byId$aut = branchTypes.byId[authSession === null || authSession === void 0 || (_authSession$branch2 = authSession.branch) === null || _authSession$branch2 === void 0 || (_authSession$branch2 = _authSession$branch2.organisatietype) === null || _authSession$branch2 === void 0 ? void 0 : _authSession$branch2[0]]) === null || _branchTypes$byId$aut === void 0 ? void 0 : _branchTypes$byId$aut.title) === _constants__.TMG_ORGANIZATION_TYPE;
-  }, [branchTypes, authSession]);
+  const isTMGOrganization = (0, _useIsTmg.useIsTmg)();
   (0, _react.useEffect)(() => {
     _setSelectedBranchId(undefined);
   }, [isSingleOrderPage]);
   const isLocation = _react.default.useMemo(() => {
-    var _branchTypes$byId$aut2, _authSession$branch3;
-    return (branchTypes === null || branchTypes === void 0 || (_branchTypes$byId$aut2 = branchTypes.byId[authSession === null || authSession === void 0 || (_authSession$branch3 = authSession.branch) === null || _authSession$branch3 === void 0 || (_authSession$branch3 = _authSession$branch3.organisatietype) === null || _authSession$branch3 === void 0 ? void 0 : _authSession$branch3[0]]) === null || _branchTypes$byId$aut2 === void 0 ? void 0 : _branchTypes$byId$aut2.title) === _constants__.LOCATION_TYPE;
+    var _branchTypes$byId$aut, _authSession$branch2;
+    return (branchTypes === null || branchTypes === void 0 || (_branchTypes$byId$aut = branchTypes.byId[authSession === null || authSession === void 0 || (_authSession$branch2 = authSession.branch) === null || _authSession$branch2 === void 0 || (_authSession$branch2 = _authSession$branch2.organisatietype) === null || _authSession$branch2 === void 0 ? void 0 : _authSession$branch2[0]]) === null || _branchTypes$byId$aut === void 0 ? void 0 : _branchTypes$byId$aut.title) === _constants__.LOCATION_TYPE;
   }, [branchTypes, authSession]);
   const [{
     selectedBranch,
-    existingDossierId
+    existingDossierId,
+    orderType
   }, dispatch] = (0, _OrderSessionContext.useOrderSession)();
   const {
     myBranches,
@@ -267,15 +267,20 @@ const InternalBranchSelectorModal = () => {
       }
     });
   };
-  const shouldShowModalForSingleOrder = APP_CONFIG.internal && !selectedBranch && !existingDossierId && isSingleOrderPage;
-  const shouldShowModalForOtherPages = APP_CONFIG.internal && !selectedBranch && !existingDossierId && !isSingleOrderPage && !isTMGOrganization && !shouldAutoSelect && !isLoadingMyBranches;
+  const shouldShowModalForSingleOrder = APP_CONFIG.internal && formula === _constants__.CONFIGURATOR_FORMULAS.TMG && !selectedBranch && !existingDossierId && isSingleOrderPage;
+  const shouldShowModalForOtherPages = APP_CONFIG.internal && formula === _constants__.CONFIGURATOR_FORMULAS.TMG && !selectedBranch && !existingDossierId && !isSingleOrderPage && !isTMGOrganization && !shouldAutoSelect && !isLoadingMyBranches;
   if (isLoadingBranchTypes || isLoadingMyBranches) {
     return /*#__PURE__*/_react.default.createElement("div", {
       className: "thm-configurator-wrapper--offset"
     }, /*#__PURE__*/_react.default.createElement(_FullPageSpinner.default, null));
   }
+  if ((shouldShowModalForSingleOrder || shouldShowModalForOtherPages) && isTMGOrganization && !orderType) {
+    return /*#__PURE__*/_react.default.createElement(_OrderTypeSelectorModal.default, {
+      isOpen: true
+    });
+  }
   return /*#__PURE__*/_react.default.createElement(_Modal.default, {
-    isOpen: shouldShowModalForSingleOrder || shouldShowModalForOtherPages,
+    isOpen: (shouldShowModalForSingleOrder || shouldShowModalForOtherPages) && !(isTMGOrganization && orderType === _OrderTypeSelectorModal.ORDER_TYPES.ONLINE),
     title: 'Kies een vestiging:',
     size: "wide",
     hasSecondaryButton: false,

package/dist/src/shared/__containers__/internal/InternalSingleOrderProductOverview.js

@@ -95,8 +95,13 @@ const InternalSingleOrderProductOverview = _ref => {
     durationAnswer,
     executionAnswer1,
     singleOrderFormulaCode,
-    executionAnswer2
+    executionAnswer2,
+    webshop
   }] = (0, _OrderSessionContext.useOrderSession)();
+  const orderSession = {
+    webshop
+  }; // Added for filter access
+
   let formula = (0, _FormulaContext.useFormula)();
   if (singleOrderFormulaCode) {
     formula = singleOrderFormulaCode;
@@ -114,7 +119,7 @@ const InternalSingleOrderProductOverview = _ref => {
     articles,
     areArticlesError,
     areArticlesLoaded
-  } = (0, _queries.useSingleOrderArticles)(mergedFilters, formula, selectedBranch);
+  } = (0, _queries.useSingleOrderArticles)(mergedFilters, formula, selectedBranch, orderSession.webshop);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _helpers__.withStyle)('flex-grow-1 h-100')
   }, !hasActiveFilters && /*#__PURE__*/_react.default.createElement(_EmptyState.default, {
@@ -126,9 +131,17 @@ const InternalSingleOrderProductOverview = _ref => {
   }), articles && hasActiveFilters && (articles === null || articles === void 0 || (_articles$articles2 = articles.articles) === null || _articles$articles2 === void 0 ? void 0 : _articles$articles2.length) > 0 && (articles === null || articles === void 0 || (_articles$articles3 = articles.articles) === null || _articles$articles3 === void 0 || (_articles$articles3 = _articles$articles3.filter(article => {
     var _article$locationPric;
     const productPrice = Number(article === null || article === void 0 || (_article$locationPric = article.locationPrices) === null || _article$locationPric === void 0 ? void 0 : _article$locationPric.priceExclVat);
+    // If webshop is selected, only show products with a price from Shopify
+    if (orderSession.webshop) {
+      return productPrice > 0;
+    }
+    // Otherwise, show if TMG or has price
     return isTmg || productPrice > 0;
   })) === null || _articles$articles3 === void 0 ? void 0 : _articles$articles3.map(article => {
-    var _cart$find$quantity, _cart$find, _article$locationPric2, _article$locationPric3, _article$locationPric4, _article$locationPric7, _article$locationPric8;
+    var _article$locationPric2, _article$locationPric3, _article$locationPric4, _cart$find$quantity, _cart$find, _article$locationPric7, _article$locationPric8;
+    // Hide stock for webshops (online orders)
+    const stockQuantity = orderSession.webshop || isTmg ? 0 : (_article$locationPric2 = article === null || article === void 0 || (_article$locationPric3 = article.locationPrices) === null || _article$locationPric3 === void 0 || (_article$locationPric3 = _article$locationPric3.stock) === null || _article$locationPric3 === void 0 ? void 0 : _article$locationPric3.quantity) !== null && _article$locationPric2 !== void 0 ? _article$locationPric2 : 0;
+    const isOutOfStock = !orderSession.webshop && !isTmg && (article === null || article === void 0 || (_article$locationPric4 = article.locationPrices) === null || _article$locationPric4 === void 0 || (_article$locationPric4 = _article$locationPric4.stock) === null || _article$locationPric4 === void 0 ? void 0 : _article$locationPric4.status) == _constants__.StockStatus.OutOfStock;
     return /*#__PURE__*/_react.default.createElement(_SingleOrderProductCard.default, {
       isTmg: isTmg,
       branchId: selectedBranch,
@@ -141,8 +154,8 @@ const InternalSingleOrderProductOverview = _ref => {
       productId: article.articleNumber,
       quantity: (_cart$find$quantity = (_cart$find = cart.find(product => product.articleNumber === article.articleNumber)) === null || _cart$find === void 0 ? void 0 : _cart$find.quantity) !== null && _cart$find$quantity !== void 0 ? _cart$find$quantity : 0,
       isSelected: false,
-      stock: (_article$locationPric2 = article === null || article === void 0 || (_article$locationPric3 = article.locationPrices) === null || _article$locationPric3 === void 0 || (_article$locationPric3 = _article$locationPric3.stock) === null || _article$locationPric3 === void 0 ? void 0 : _article$locationPric3.quantity) !== null && _article$locationPric2 !== void 0 ? _article$locationPric2 : 0,
-      isOutOfStock: (article === null || article === void 0 || (_article$locationPric4 = article.locationPrices) === null || _article$locationPric4 === void 0 || (_article$locationPric4 = _article$locationPric4.stock) === null || _article$locationPric4 === void 0 ? void 0 : _article$locationPric4.status) == _constants__.StockStatus.OutOfStock,
+      stock: stockQuantity,
+      isOutOfStock: isOutOfStock,
       handleSelected: () => {
         var _article$locationPric5, _article$locationPric6;
         return handleQuantityChange(article.articleNumber, 1, article === null || article === void 0 || (_article$locationPric5 = article.locationPrices) === null || _article$locationPric5 === void 0 ? void 0 : _article$locationPric5.priceExclVat, article === null || article === void 0 || (_article$locationPric6 = article.locationPrices) === null || _article$locationPric6 === void 0 ? void 0 : _article$locationPric6.priceInclVat);
@@ -167,7 +180,8 @@ const InternalSingleOrderProductOverview = _ref => {
       productPriceInclVat: Number(article === null || article === void 0 || (_article$locationPric8 = article.locationPrices) === null || _article$locationPric8 === void 0 ? void 0 : _article$locationPric8.priceInclVat).toFixed(2),
       productType: article === null || article === void 0 ? void 0 : article.type,
       productGroup: article === null || article === void 0 ? void 0 : article.group,
-      productSubgroup: article === null || article === void 0 ? void 0 : article.subgroup
+      productSubgroup: article === null || article === void 0 ? void 0 : article.subgroup,
+      isWebshop: !!orderSession.webshop
     });
   })), !articles && hasActiveFilters && !areArticlesLoaded && !areArticlesError && /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _helpers__.withStyle)('flex-grow-1 h-100')

package/dist/src/shared/__containers__/internal/OrderTypeSelectorModal.js

@@ -0,0 +1,136 @@
+"use strict";
+
+require("core-js/modules/es.weak-map.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+require("core-js/modules/es.weak-map.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WEBSHOPS = exports.ORDER_TYPES = void 0;
+require("core-js/modules/web.dom-collections.iterator.js");
+var _react = _interopRequireWildcard(require("react"));
+var _Modal = _interopRequireDefault(require("../../__components__/Modal"));
+var _OrderSessionContext = require("../../__context__/OrderSessionContext");
+var _helpers__ = require("../../__helpers__");
+function _interopRequireDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+function _getRequireWildcardCache(e) {
+  if ("function" != typeof WeakMap) return null;
+  var r = new WeakMap(),
+    t = new WeakMap();
+  return (_getRequireWildcardCache = function _getRequireWildcardCache(e) {
+    return e ? t : r;
+  })(e);
+}
+function _interopRequireWildcard(e, r) {
+  if (!r && e && e.__esModule) return e;
+  if (null === e || "object" != typeof e && "function" != typeof e) return {
+    default: e
+  };
+  var t = _getRequireWildcardCache(r);
+  if (t && t.has(e)) return t.get(e);
+  var n = {
+      __proto__: null
+    },
+    a = Object.defineProperty && Object.getOwnPropertyDescriptor;
+  for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) {
+    var i = a ? Object.getOwnPropertyDescriptor(e, u) : null;
+    i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u];
+  }
+  return n.default = e, t && t.set(e, n), n;
+}
+const ORDER_TYPES = exports.ORDER_TYPES = {
+  ONLINE: 'online',
+  OFFLINE: 'offline'
+};
+const WEBSHOPS = exports.WEBSHOPS = {
+  TREKHAAKLAND: 'Trekhaakland',
+  TREKHAKEN_NL: 'Trekhaken.nl'
+};
+const OrderTypeSelectorModal = _ref => {
+  let {
+    isOpen
+  } = _ref;
+  const [, dispatch] = (0, _OrderSessionContext.useOrderSession)();
+  const [step, setStep] = (0, _react.useState)('type'); // 'type' or 'webshop'
+
+  const handleTypeSelect = type => {
+    if (type === ORDER_TYPES.ONLINE) {
+      setStep('webshop');
+    } else {
+      dispatch({
+        type: _OrderSessionContext.orderSessionActions.SET_ORDER_TYPE,
+        payload: {
+          orderType: type
+        }
+      });
+    }
+  };
+  const handleWebshopSelect = webshop => {
+    dispatch({
+      type: _OrderSessionContext.orderSessionActions.SET_WEBSHOP,
+      payload: {
+        webshop
+      }
+    });
+    dispatch({
+      type: _OrderSessionContext.orderSessionActions.SET_ORDER_TYPE,
+      payload: {
+        orderType: ORDER_TYPES.ONLINE
+      }
+    });
+  };
+  const handleBack = () => {
+    setStep('type');
+  };
+  return /*#__PURE__*/_react.default.createElement(_Modal.default, {
+    isOpen: isOpen,
+    title: step === 'type' ? 'Bestellings type:' : 'Kies een webshop:',
+    size: "regular",
+    hasPrimaryButton: false,
+    hasSecondaryButton: false,
+    onClose: step === 'webshop' ? handleBack : undefined
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _helpers__.withStyle)('d-flex flex-column gap-3 p-2')
+  }, step === 'type' && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    className: (0, _helpers__.withStyle)('btn btn-outline-primary btn-lg w-100 d-flex align-items-center justify-content-center p-4'),
+    style: {
+      minHeight: '100px',
+      fontSize: '1.2rem'
+    },
+    onClick: () => handleTypeSelect(ORDER_TYPES.ONLINE)
+  }, "Online order"), /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    className: (0, _helpers__.withStyle)('btn btn-outline-secondary btn-lg w-100 d-flex align-items-center justify-content-center p-4'),
+    style: {
+      minHeight: '100px',
+      fontSize: '1.2rem'
+    },
+    onClick: () => handleTypeSelect(ORDER_TYPES.OFFLINE)
+  }, "Offline order")), step === 'webshop' && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    className: (0, _helpers__.withStyle)('btn btn-outline-primary btn-lg w-100 d-flex align-items-center justify-content-center p-4'),
+    style: {
+      minHeight: '80px'
+    },
+    onClick: () => handleWebshopSelect(WEBSHOPS.TREKHAAKLAND)
+  }, "Trekhaakland"), /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    className: (0, _helpers__.withStyle)('btn btn-outline-primary btn-lg w-100 d-flex align-items-center justify-content-center p-4'),
+    style: {
+      minHeight: '80px'
+    },
+    onClick: () => handleWebshopSelect(WEBSHOPS.TREKHAKEN_NL)
+  }, "Trekhaken.nl"), /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    className: (0, _helpers__.withStyle)('btn btn-link text-muted mt-2'),
+    onClick: handleBack
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "fas fa-arrow-left me-2"
+  }), "Terug"))));
+};
+var _default = exports.default = OrderTypeSelectorModal;

package/dist/src/shared/__context__/OrderSessionContext.js

@@ -165,13 +165,18 @@ const INITIAL_ORDER_SESSION_STATE = {
     countryId: null,
     vatNumber: '',
     anwbId: null
-  }
+  },
+  invoicePaymentByLeaseCompany: false,
+  orderType: null,
+  webshop: null
 };
 const orderSessionActions = exports.orderSessionActions = {
   INITIALIZE_NEW_ORDER: 'INITIALIZE_NEW_ORDER',
   INITIALIZE_EXISTING_ORDER: 'INITIALIZE_EXISTING_ORDER',
   RESET_LICENSEPLATE_FILTERS: 'RESET_LICENSEPLATE_FILTERS',
   SET_LICENSEPLATE_FILTERS: 'SET_LICENSEPLATE_FILTERS',
+  SET_ORDER_TYPE: 'SET_ORDER_TYPE',
+  SET_WEBSHOP: 'SET_WEBSHOP',
   SET_IS_TOUCHED: 'SET_IS_TOUCHED',
   SET_LICENSE_PLATE: 'SET_LICENSE_PLATE',
   SET_BUILD_YEAR: 'SET_BUILD_YEAR',
@@ -236,7 +241,8 @@ const orderSessionActions = exports.orderSessionActions = {
   SET_CUSTOMER_COMPANY_NAME: 'SET_CUSTOMER_COMPANY_NAME',
   SET_CUSTOMER_KVK_NUMBER: 'SET_CUSTOMER_KVK_NUMBER',
   SET_CUSTOMER_VAT_NUMBER: 'SET_CUSTOMER_VAT_NUMBER',
-  SET_CUSTOMER_HOUSE_NUMBER_ADDITION: 'SET_CUSTOMER_HOUSE_NUMBER_ADDITION'
+  SET_CUSTOMER_HOUSE_NUMBER_ADDITION: 'SET_CUSTOMER_HOUSE_NUMBER_ADDITION',
+  SET_CUSTOMER_INVOICE_PAYMENT_BY_LEASE_COMPANY: 'SET_CUSTOMER_INVOICE_PAYMENT_BY_LEASE_COMPANY'
 };
 const orderSessionReducer = (state, action) => {
   switch (action.type) {
@@ -317,7 +323,12 @@ const orderSessionReducer = (state, action) => {
       {
         return _objectSpread(_objectSpread({}, INITIAL_ORDER_SESSION_STATE), {}, {
           singleOrderCart: [],
-          isTouched: true
+          isTouched: true,
+          // Preserve these to prevent OrderTypeSelectorModal from reopening
+          selectedBranch: state.selectedBranch,
+          orderType: state.orderType,
+          webshop: state.webshop,
+          singleOrderFormulaCode: state.singleOrderFormulaCode
         });
       }
     case orderSessionActions.SET_VEHICLE_CHASSIS_NUMBER:
@@ -603,6 +614,15 @@ const orderSessionReducer = (state, action) => {
           })
         });
       }
+    case orderSessionActions.SET_CUSTOMER_INVOICE_PAYMENT_BY_LEASE_COMPANY:
+      {
+        const {
+          invoicePaymentByLeaseCompany
+        } = action.payload;
+        return _objectSpread(_objectSpread({}, state), {}, {
+          invoicePaymentByLeaseCompany
+        });
+      }
     case orderSessionActions.SET_CUSTOMER_PHONE_NUMBER:
       {
         const {
@@ -848,7 +868,8 @@ const orderSessionReducer = (state, action) => {
             vehicle: {
               ownershipType,
               leaseNumber: null
-            }
+            },
+            invoicePaymentByLeaseCompany: false
           });
         }
         return _objectSpread(_objectSpread({}, state), {}, {
@@ -1038,6 +1059,24 @@ const orderSessionReducer = (state, action) => {
           })
         });
       }
+    case orderSessionActions.SET_ORDER_TYPE:
+      {
+        const {
+          orderType
+        } = action.payload;
+        return _objectSpread(_objectSpread({}, state), {}, {
+          orderType
+        });
+      }
+    case orderSessionActions.SET_WEBSHOP:
+      {
+        const {
+          webshop
+        } = action.payload;
+        return _objectSpread(_objectSpread({}, state), {}, {
+          webshop
+        });
+      }
     default:
       return state;
   }

package/dist/src/shared/__pages__/internal/InternalSingleOrderPage.js

@@ -131,6 +131,12 @@ const InternalSingleOrderPage = () => {
     isCreateSingleOrderError,
     isCreateSingleOrderSuccess
   } = (0, _mutations.useCreateSingleOrderMutation)();
+  const {
+    createShopifyOrder,
+    isCreatingShopifyOrder,
+    isCreateShopifyOrderError,
+    isCreateShopifyOrderSuccess
+  } = (0, _mutations.useCreateShopifyOrderMutation)();
   const [{
     singleOrderCart,
     channel,
@@ -142,7 +148,8 @@ const InternalSingleOrderPage = () => {
     singleOrderFormulaCode,
     licensePlate,
     durationAnswer,
-    model
+    model,
+    webshop
   }, dispatch] = (0, _OrderSessionContext.useOrderSession)();
   let formula = (0, _FormulaContext.useFormula)();
   if (singleOrderFormulaCode) {
@@ -154,13 +161,15 @@ const InternalSingleOrderPage = () => {
     isLoadingBranchById
   } = (0, _queries.useBranchByIdOrWidgetId)(selectedBranch);
   (0, _react.useEffect)(() => {
-    if (isCreateSingleOrderSuccess) {
+    if (isCreateSingleOrderSuccess || isCreateShopifyOrderSuccess) {
+      setIsDirectSelectorModalOpen(false);
+      setHasUserDismissedModal(true);
       dispatch({
         type: _OrderSessionContext.orderSessionActions.EMPTY_SINGLE_ORDER_CART
       });
       setShowProductOverview(true);
     }
-  }, [isCreateSingleOrderSuccess]);
+  }, [isCreateSingleOrderSuccess, isCreateShopifyOrderSuccess]);
 
   // Reset dismissed state when branch changes
   (0, _react.useEffect)(() => {
@@ -170,15 +179,18 @@ const InternalSingleOrderPage = () => {
   }, [selectedBranch]);
   (0, _react.useEffect)(() => {
     const hasActiveFilters = filters.type || filters.group || filters.subgroup || filters.articleNumber || filters.showAllArticles;
-    if (selectedBranch && !licensePlate && !model && !hasActiveFilters && !isLoadingBranchById && !hasUserDismissedModal) {
+
+    // Don't open modal if order was just successfully created
+    const orderJustCompleted = isCreateSingleOrderSuccess || isCreateShopifyOrderSuccess;
+    if (showProductOverview && selectedBranch && !licensePlate && !model && !hasActiveFilters && !isLoadingBranchById && !hasUserDismissedModal && !orderJustCompleted) {
       setIsDirectSelectorModalOpen(true);
     } else {
-      // Close modal if filters become active while it's open
-      if (hasActiveFilters && isDirectSelectorModalOpen) {
+      // Close modal if filters become active or we're on details page
+      if ((hasActiveFilters || !showProductOverview) && isDirectSelectorModalOpen) {
         setIsDirectSelectorModalOpen(false);
       }
     }
-  }, [selectedBranch, licensePlate, model, filters, isLoadingBranchById, isDirectSelectorModalOpen, hasUserDismissedModal]);
+  }, [selectedBranch, licensePlate, model, filters, isLoadingBranchById, isDirectSelectorModalOpen, hasUserDismissedModal, isCreateSingleOrderSuccess, isCreateShopifyOrderSuccess, showProductOverview]);
   const resetOrderSession = (0, _react.useCallback)(() => {
     dispatch({
       type: _OrderSessionContext.orderSessionActions.RESET_SINGLE_ORDER
@@ -307,31 +319,51 @@ const InternalSingleOrderPage = () => {
     var _customerFormRef$curr;
     const isValid = await ((_customerFormRef$curr = customerFormRef.current) === null || _customerFormRef$curr === void 0 ? void 0 : _customerFormRef$curr.validateForm());
     if (isValid) {
-      const preferredDateTime = appointment !== null && appointment !== void 0 && appointment.date && appointment !== null && appointment !== void 0 && appointment.time ? (0, _helpers__.parseDateAndTimeToTimestamp)(appointment === null || appointment === void 0 ? void 0 : appointment.date, appointment === null || appointment === void 0 ? void 0 : appointment.time) : null;
-      vehicle.ownershipType = vehicle.singleOrderOwnershipType;
-      delete vehicle.singleOrderOwnershipType;
-      createSingleOrder({
-        licensePlate: filters.licensePlate,
-        model: filters.model,
-        cart: singleOrderCart,
-        vehicle,
-        customer,
-        formula,
-        branchId: selectedBranch,
-        channel,
-        preferredDateTime,
-        internalNote: internalNote === null || internalNote === void 0 ? void 0 : internalNote.internalNote
+      const vehiclePayload = _objectSpread(_objectSpread({}, vehicle), {}, {
+        ownershipType: vehicle.singleOrderOwnershipType || vehicle.ownershipType
       });
+      delete vehiclePayload.singleOrderOwnershipType;
+
+      // If webshop is selected, create Shopify order instead
+      if (webshop) {
+        createShopifyOrder({
+          licensePlate: filters.licensePlate,
+          model: filters.model,
+          cart: singleOrderCart,
+          vehicle: vehiclePayload,
+          customer,
+          formula,
+          webshop,
+          branchId: selectedBranch,
+          channel,
+          internalNote: internalNote === null || internalNote === void 0 ? void 0 : internalNote.internalNote
+        });
+      } else {
+        // Regular flow for offline orders
+        const preferredDateTime = appointment !== null && appointment !== void 0 && appointment.date && appointment !== null && appointment !== void 0 && appointment.time ? (0, _helpers__.parseDateAndTimeToTimestamp)(appointment === null || appointment === void 0 ? void 0 : appointment.date, appointment === null || appointment === void 0 ? void 0 : appointment.time) : null;
+        createSingleOrder({
+          licensePlate: filters.licensePlate,
+          model: filters.model,
+          cart: singleOrderCart,
+          vehicle: vehiclePayload,
+          customer,
+          formula,
+          branchId: selectedBranch,
+          channel,
+          preferredDateTime,
+          internalNote: internalNote === null || internalNote === void 0 ? void 0 : internalNote.internalNote
+        });
+      }
     }
   };
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _helpers__.withStyle)('vh-100')
-  }, isCreateSingleOrderSuccess && /*#__PURE__*/_react.default.createElement(_InternalSingleOrderSuccessModal.default, {
-    isOpen: isCreateSingleOrderSuccess
+  }, (isCreateSingleOrderSuccess || isCreateShopifyOrderSuccess) && /*#__PURE__*/_react.default.createElement(_InternalSingleOrderSuccessModal.default, {
+    isOpen: isCreateSingleOrderSuccess || isCreateShopifyOrderSuccess
   }), /*#__PURE__*/_react.default.createElement(_Header.default, {
     title: "Losse producten bestellen",
     subtitle: branchById !== null && branchById !== void 0 && branchById.name ? "Vestiging: ".concat(branchById === null || branchById === void 0 ? void 0 : branchById.name) : ''
-  }), /*#__PURE__*/_react.default.createElement(_DirectVehicleSelectorModal.default, {
+  }), showProductOverview && !isCreateSingleOrderSuccess && !isCreateShopifyOrderSuccess && /*#__PURE__*/_react.default.createElement(_DirectVehicleSelectorModal.default, {
     isOpen: isDirectSelectorModalOpen,
     onSubmit: filterModelOrLicenseplate,
     handleSelectedFilterChange: handleSelectedFilterChange,
@@ -364,7 +396,7 @@ const InternalSingleOrderPage = () => {
   }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_LinkButton.default, {
     label: "Terug naar producten",
     onClick: () => setShowProductOverview(true)
-  }), !isCreateSingleOrderSuccess && isCreateSingleOrderError && /*#__PURE__*/_react.default.createElement(_DangerAlert.default, {
+  }), !(isCreateSingleOrderSuccess || isCreateShopifyOrderSuccess) && (isCreateSingleOrderError || isCreateShopifyOrderError) && /*#__PURE__*/_react.default.createElement(_DangerAlert.default, {
     className: "mt-2 mx-0",
     message: "Er is iets fout gegaan bij het bestellen.  Probeer het opnieuw. Momenteel kunnen in hyper alleen losse orders worden gemaakt als een kenteken of model is geselecteerd in de filters."
   }), /*#__PURE__*/_react.default.createElement(_InternalCustomerDetailsForm.default, {
@@ -382,7 +414,7 @@ const InternalSingleOrderPage = () => {
     handleQuantityChange: handleQuantityChange,
     showProductOverview: showProductOverview,
     handleSubmit: handleSubmit,
-    disabledCreateOrder: !singleOrderCart.length || isCreatingSingleOrder,
+    disabledCreateOrder: !singleOrderCart.length || isCreatingSingleOrder || isCreatingShopifyOrder,
     toggleOverview: () => setShowProductOverview(false)
   })))), /*#__PURE__*/_react.default.createElement(_BottomNavigationBar.default, null)));
 };

package/package.json

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