thm-p3-configurator 0.0.395 → 0.0.397

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

@@ -0,0 +1,535 @@
+"use strict";
+
+require("core-js/modules/es.array.includes.js");
+require("core-js/modules/es.promise.js");
+require("core-js/modules/es.regexp.exec.js");
+require("core-js/modules/es.string.includes.js");
+require("core-js/modules/es.string.replace.js");
+require("core-js/modules/es.weak-map.js");
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.filter.js");
+require("core-js/modules/esnext.iterator.for-each.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+require("core-js/modules/es.weak-map.js");
+require("core-js/modules/esnext.iterator.filter.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/es.array.includes.js");
+require("core-js/modules/es.promise.js");
+require("core-js/modules/es.regexp.exec.js");
+require("core-js/modules/es.string.includes.js");
+require("core-js/modules/es.string.replace.js");
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.for-each.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+var _react = _interopRequireWildcard(require("react"));
+var _reactRouter = require("react-router");
+var _yup = require("yup");
+var _mutations = require("../__api__/mutations");
+var _NavigationButton = _interopRequireDefault(require("../__components__/Buttons/NavigationButton"));
+var _PrimaryButton = _interopRequireDefault(require("../__components__/Buttons/PrimaryButton"));
+var _CardWide = _interopRequireDefault(require("../__components__/Cards/CardWide"));
+var _CheckboxInput = _interopRequireDefault(require("../__components__/Form/CheckboxInput"));
+var _ErrorMessage = _interopRequireDefault(require("../__components__/Form/ErrorMessage"));
+var _RadioButtons = _interopRequireDefault(require("../__components__/Form/RadioButtons"));
+var _TextAreaInput = _interopRequireDefault(require("../__components__/Form/TextAreaInput"));
+var _TextInput = _interopRequireDefault(require("../__components__/Form/TextInput"));
+var _constants__ = require("../__constants__");
+var _FormulaContext = require("../__context__/FormulaContext");
+var _OrderSessionContext = require("../__context__/OrderSessionContext");
+var _helpers__ = require("../__helpers__");
+var _Datalayer = require("../__services__/Datalayer");
+var _product = require("../__helpers__/product");
+var _useDebouncedPush = _interopRequireDefault(require("../__hooks__/useDebouncedPush"));
+var _useIsTowmotive = require("../__hooks__/useIsTowmotive");
+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;
+}
+function ownKeys(e, r) {
+  var t = Object.keys(e);
+  if (Object.getOwnPropertySymbols) {
+    var o = Object.getOwnPropertySymbols(e);
+    r && (o = o.filter(function (r) {
+      return Object.getOwnPropertyDescriptor(e, r).enumerable;
+    })), t.push.apply(t, o);
+  }
+  return t;
+}
+function _objectSpread(e) {
+  for (var r = 1; r < arguments.length; r++) {
+    var t = null != arguments[r] ? arguments[r] : {};
+    r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
+      _defineProperty(e, r, t[r]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
+      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
+    });
+  }
+  return e;
+}
+function _defineProperty(e, r, t) {
+  return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+    value: t,
+    enumerable: !0,
+    configurable: !0,
+    writable: !0
+  }) : e[r] = t, e;
+}
+function _toPropertyKey(t) {
+  var i = _toPrimitive(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _toPrimitive(t, r) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r || "default");
+    if ("object" != typeof i) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
+const appointmentFormSchema = (0, _yup.object)({
+  firstName: (0, _yup.string)().required(_constants__.FORM_ERROR_MESSAGES.required),
+  infix: (0, _yup.string)().nullable(),
+  lastName: (0, _yup.string)().required(_constants__.FORM_ERROR_MESSAGES.required),
+  email: (0, _yup.string)().email(_constants__.FORM_ERROR_MESSAGES.email).required(_constants__.FORM_ERROR_MESSAGES.required),
+  phoneNumber: (0, _yup.string)().required(_constants__.FORM_ERROR_MESSAGES.required),
+  ownershipType: (0, _yup.string)().required(_constants__.FORM_ERROR_MESSAGES.required),
+  companyName: (0, _yup.string)().when('ownershipType', {
+    is: _constants__.VEHICLE_OWNERSHIP_TYPE.Zakelijk,
+    then: schema => schema.required(_constants__.FORM_ERROR_MESSAGES.required),
+    otherwise: schema => schema.nullable()
+  }),
+  termsAndConditions: (0, _yup.boolean)().isTrue(_constants__.FORM_ERROR_MESSAGES.required).required(_constants__.FORM_ERROR_MESSAGES.required)
+});
+const trackFormField = (fieldName, action, value) => (0, _Datalayer.pushToDataLayer)({
+  event: 'form',
+  component: 'afspraak',
+  element: action === 'error' ? 'form_field' : 'text_field',
+  field: fieldName,
+  action,
+  action_value: value !== null && value !== void 0 ? value : ''
+});
+const AppointmentForm = () => {
+  const [{
+    customer,
+    vehicle,
+    licensePlate,
+    model,
+    buildYear,
+    durationAnswer,
+    selectedBoardComputer,
+    selectedCableset,
+    selectedCombiset,
+    selectedTowbar,
+    selectedBranch,
+    discountCode,
+    anwbDiscountValidated,
+    executionAnswer1,
+    executionAnswer2,
+    priceCalculationDate,
+    selectedDiscountedProducts = [],
+    selectedExtras,
+    vehicleCodingDiscountPercentage
+  }, dispatch] = (0, _OrderSessionContext.useOrderSession)();
+  const [errors, setErrors] = (0, _react.useState)({});
+  const [isTermsAccepted, setIsTermsAccepted] = (0, _react.useState)(false);
+  const trackInput = (0, _useDebouncedPush.default)();
+  const APPOINTMENT_REQUEST_ERROR_FALLBACK = 'Er is een fout opgetreden bij het maken van de afspraak, probeer het opnieuw.';
+  const {
+    isCreateAppointmentRequestSuccess,
+    isCreatingAppointmentRequest,
+    isCreateAppointmentRequestError,
+    createAppointmentRequest,
+    createAppointmentRequestError
+  } = (0, _mutations.useCreateAppointmentRequestMutation)();
+  const formula = (0, _FormulaContext.useFormula)();
+  const isTowmotive = (0, _useIsTowmotive.useIsTowmotive)();
+  const history = (0, _reactRouter.useHistory)();
+  const handleSubmit = async () => {
+    (0, _Datalayer.pushToDataLayer)({
+      event: 'form',
+      component: 'afspraak',
+      element: 'button',
+      action: 'submit',
+      action_value: 'Afspraak maken'
+    });
+    try {
+      var _customer$firstName, _customer$lastName;
+      setErrors(null);
+      appointmentFormSchema.validateSync(_objectSpread(_objectSpread({}, customer), {}, {
+        ownershipType: vehicle === null || vehicle === void 0 ? void 0 : vehicle.ownershipType,
+        termsAndConditions: isTermsAccepted
+      }), {
+        strict: false,
+        abortEarly: false
+      });
+      const appointmentRequestPayload = (0, _helpers__.removeNullishProps)({
+        licensePlate: licensePlate === null || licensePlate === void 0 ? void 0 : licensePlate.replace(/-/g, ''),
+        model,
+        constructionYear: buildYear !== null && buildYear !== void 0 ? buildYear : undefined,
+        answers: (0, _helpers__.removeNullishProps)({
+          duration: durationAnswer,
+          execution1: executionAnswer1,
+          execution2: executionAnswer2
+        }),
+        vehicle: (0, _helpers__.removeNullishProps)({
+          ownershipType: vehicle === null || vehicle === void 0 ? void 0 : vehicle.ownershipType
+        }),
+        customer: (0, _helpers__.removeNullishProps)(_objectSpread(_objectSpread({}, customer), {}, {
+          firstName: (_customer$firstName = customer === null || customer === void 0 ? void 0 : customer.firstName) !== null && _customer$firstName !== void 0 ? _customer$firstName : undefined,
+          lastName: (_customer$lastName = customer === null || customer === void 0 ? void 0 : customer.lastName) !== null && _customer$lastName !== void 0 ? _customer$lastName : undefined
+        })),
+        formula,
+        branchId: selectedBranch,
+        selectBoardComputerUpdate: selectedBoardComputer != null,
+        discount: (() => {
+          if (!(discountCode !== null && discountCode !== void 0 && discountCode.length)) return null;
+          if (discountCode.toLocaleLowerCase().includes('anwb') && !anwbDiscountValidated) return null;
+          return {
+            code: discountCode
+          };
+        })(),
+        cart: (0, _product.buildCartInput)({
+          selectedCableset,
+          selectedCombiset,
+          selectedTowbar,
+          selectedBoardComputer,
+          selectedExtras,
+          selectedDiscountedProducts,
+          isTowmotiveFormula: isTowmotive,
+          vehicleCodingDiscountPercentage
+        })
+      });
+      await createAppointmentRequest(appointmentRequestPayload);
+      (0, _Datalayer.pushToDataLayer)({
+        event: 'form',
+        component: 'afspraak',
+        element: 'button',
+        action: 'submit',
+        action_value: 'valid'
+      });
+      (0, _Datalayer.pushToDataLayer)({
+        event: 'form_submit',
+        form_name: 'config_afspraak'
+      });
+    } catch (ex) {
+      (0, _Datalayer.pushToDataLayer)({
+        event: 'form',
+        component: 'afspraak',
+        element: 'button',
+        action: 'submit',
+        action_value: 'invalid'
+      });
+      console.error("handleSubmit(): ".concat(ex));
+      const errorsObj = (0, _helpers__.reduceYupErrorsToObject)(ex.inner);
+      Object.entries(errorsObj).forEach(_ref => {
+        let [fieldName, errorMsg] = _ref;
+        return trackFormField(fieldName, 'error', errorMsg);
+      });
+      setErrors(errorsObj);
+    }
+  };
+  if (isCreateAppointmentRequestSuccess) {
+    return /*#__PURE__*/_react.default.createElement(_reactRouter.Redirect, {
+      to: {
+        pathname: "/configurator/gegevens/bedankt",
+        state: {
+          email: customer.email
+        }
+      }
+    });
+  }
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _helpers__.withStyle)('row gx-5 mt-3 mt-lg-5')
+  }, /*#__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')
+  }, /*#__PURE__*/_react.default.createElement("h6", {
+    className: (0, _helpers__.withStyle)('modal-title col-12 mb-2')
+  }, "Gegevens"), /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _helpers__.withStyle)('col-12 mb-3')
+  }, /*#__PURE__*/_react.default.createElement(_RadioButtons.default, {
+    name: "ownershipType",
+    label: "Type:",
+    initialValue: vehicle === null || vehicle === void 0 ? void 0 : vehicle.ownershipType,
+    onChange: val => {
+      (0, _Datalayer.pushToDataLayer)({
+        event: 'form',
+        component: 'afspraak',
+        element: 'radio_button',
+        field: 'Type klant',
+        action: 'click',
+        action_value: val
+      });
+      dispatch({
+        type: _OrderSessionContext.orderSessionActions.SET_VEHICLE_OWNERSHIP_TYPE,
+        payload: {
+          ownershipType: val
+        }
+      });
+    },
+    options: Object.values(_constants__.VEHICLE_OWNERSHIP_TYPE),
+    isRequired: true,
+    errorMessage: errors === null || errors === void 0 ? void 0 : errors['ownershipType']
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _helpers__.withStyle)('col-12 col-md-6')
+  }, /*#__PURE__*/_react.default.createElement(_TextInput.default, {
+    placeholder: "",
+    initialValue: customer.firstName,
+    name: "firstName",
+    onFocus: () => trackFormField('voornaam', 'focus'),
+    onChange: value => {
+      trackInput({
+        event: 'form',
+        component: 'afspraak',
+        element: 'text_field',
+        field: 'voornaam',
+        action: 'input'
+      });
+      dispatch({
+        type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_FIRST_NAME,
+        payload: {
+          firstName: value
+        }
+      });
+    },
+    isRequired: true,
+    form: "appointment",
+    label: "Voornaam:",
+    errorMessage: errors === null || errors === void 0 ? void 0 : errors['firstName']
+  }), /*#__PURE__*/_react.default.createElement(_TextInput.default, {
+    placeholder: "",
+    initialValue: customer.infix,
+    name: "infix",
+    onFocus: () => trackFormField('tussenvoegsel', 'focus'),
+    onChange: value => {
+      trackInput({
+        event: 'form',
+        component: 'afspraak',
+        element: 'text_field',
+        field: 'tussenvoegsel',
+        action: 'input'
+      });
+      dispatch({
+        type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_INFIX,
+        payload: {
+          infix: value
+        }
+      });
+    },
+    isRequired: false,
+    form: "appointment",
+    label: "Tussenvoegsel:",
+    errorMessage: errors === null || errors === void 0 ? void 0 : errors['infix']
+  }), /*#__PURE__*/_react.default.createElement(_TextInput.default, {
+    placeholder: "",
+    initialValue: customer.lastName,
+    name: "lastName",
+    onFocus: () => trackFormField('achternaam', 'focus'),
+    onChange: value => {
+      trackInput({
+        event: 'form',
+        component: 'afspraak',
+        element: 'text_field',
+        field: 'achternaam',
+        action: 'input'
+      });
+      dispatch({
+        type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_LAST_NAME,
+        payload: {
+          lastName: value
+        }
+      });
+    },
+    isRequired: true,
+    form: "appointment",
+    label: "Achternaam:",
+    errorMessage: errors === null || errors === void 0 ? void 0 : errors['lastName']
+  }), /*#__PURE__*/_react.default.createElement(_TextInput.default, {
+    placeholder: "",
+    initialValue: customer.email,
+    name: "email",
+    onFocus: () => trackFormField('e-mailadres', 'focus'),
+    onChange: value => {
+      trackInput({
+        event: 'form',
+        component: 'afspraak',
+        element: 'text_field',
+        field: 'e-mailadres',
+        action: 'input'
+      });
+      dispatch({
+        type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_EMAIL,
+        payload: {
+          email: value
+        }
+      });
+    },
+    isRequired: true,
+    form: "appointment",
+    label: "E-mailadres:",
+    errorMessage: errors === null || errors === void 0 ? void 0 : errors['email']
+  }), /*#__PURE__*/_react.default.createElement(_TextInput.default, {
+    placeholder: "",
+    initialValue: customer.phoneNumber,
+    name: "phoneNumber",
+    onFocus: () => trackFormField('telefoonnummer', 'focus'),
+    onChange: value => {
+      trackInput({
+        event: 'form',
+        component: 'afspraak',
+        element: 'text_field',
+        field: 'telefoonnummer',
+        action: 'input'
+      });
+      dispatch({
+        type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_PHONE_NUMBER,
+        payload: {
+          phoneNumber: value
+        }
+      });
+    },
+    isRequired: true,
+    form: "appointment",
+    label: "Telefoonnummer:",
+    errorMessage: errors === null || errors === void 0 ? void 0 : errors['phoneNumber']
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _helpers__.withStyle)('col-12 col-md-6')
+  }, (vehicle === null || vehicle === void 0 ? void 0 : vehicle.ownershipType) === _constants__.VEHICLE_OWNERSHIP_TYPE.Zakelijk && /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _helpers__.withStyle)('mb-3')
+  }, /*#__PURE__*/_react.default.createElement("h6", {
+    className: (0, _helpers__.withStyle)('mb-2')
+  }, "Gegevens bedrijf"), /*#__PURE__*/_react.default.createElement(_TextInput.default, {
+    placeholder: "",
+    initialValue: customer.companyName,
+    name: "companyName",
+    onFocus: () => trackFormField('bedrijfsnaam', 'focus'),
+    onChange: value => {
+      trackInput({
+        event: 'form',
+        component: 'afspraak',
+        element: 'text_field',
+        field: 'bedrijfsnaam',
+        action: 'input'
+      });
+      dispatch({
+        type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_COMPANY_NAME,
+        payload: {
+          companyName: value
+        }
+      });
+    },
+    isRequired: true,
+    form: "appointment",
+    label: "Bedrijfsnaam:",
+    errorMessage: errors === null || errors === void 0 ? void 0 : errors['companyName']
+  })), /*#__PURE__*/_react.default.createElement(_TextAreaInput.default, {
+    placeholder: "",
+    initialValue: "",
+    name: "note",
+    onChange: value => {
+      trackInput({
+        event: 'form',
+        component: 'afspraak',
+        element: 'text_field',
+        field: 'opmerkingen',
+        action: 'input'
+      });
+      dispatch({
+        type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_NOTE,
+        payload: {
+          note: value
+        }
+      });
+    },
+    isRequired: false,
+    form: "appointment",
+    label: "Eventuele vragen of opmerkingen:",
+    errorMessage: errors === null || errors === void 0 ? void 0 : errors['note']
+  }), /*#__PURE__*/_react.default.createElement(_CheckboxInput.default, {
+    isRequired: true,
+    name: 'termsAndConditions',
+    initialValue: false,
+    onChange: value => {
+      (0, _Datalayer.pushToDataLayer)({
+        event: 'form',
+        component: 'afspraak',
+        element: 'checkbox',
+        field: 'algemene voorwaarden',
+        action: value ? 'on' : 'off',
+        action_value: String(value)
+      });
+      setIsTermsAccepted(value);
+    },
+    errorMessage: errors === null || errors === void 0 ? void 0 : errors['termsAndConditions'],
+    label: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "Ik ga akkoord met de", ' ', /*#__PURE__*/_react.default.createElement("a", {
+      href: "".concat(APP_CONFIG.websiteHost, "/algemene-voorwaarden"),
+      target: "_blank",
+      rel: "noopener noreferrer",
+      onClick: () => (0, _Datalayer.pushToDataLayer)({
+        event: 'form',
+        component: 'afspraak',
+        element: 'link',
+        action: 'click',
+        link_text: 'algemene voorwaarden',
+        link_url: "".concat(APP_CONFIG.websiteHost, "/algemene-voorwaarden")
+      })
+    }, "algemene voorwaarden"), ' '),
+    form: "appointment"
+  }), isCreateAppointmentRequestError && /*#__PURE__*/_react.default.createElement(_ErrorMessage.default, {
+    message: (0, _helpers__.getProxyApiErrorMessage)(createAppointmentRequestError, APPOINTMENT_REQUEST_ERROR_FALLBACK)
+  })))), /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _helpers__.withStyle)('d-flex align-items-center justify-content-end mt-4')
+  }, /*#__PURE__*/_react.default.createElement(_NavigationButton.default, {
+    variant: "link",
+    to: '/configurator/montagelocatie',
+    label: 'Vorige',
+    state: {
+      prevPathName: history.location.pathname
+    },
+    onClick: () => (0, _Datalayer.pushToDataLayer)({
+      event: 'configurator',
+      component: 'afspraak',
+      element: 'button',
+      action: 'click',
+      action_value: 'Vorige',
+      link_url: '/configurator/montagelocatie'
+    })
+  }), /*#__PURE__*/_react.default.createElement(_PrimaryButton.default, {
+    onClick: handleSubmit,
+    isDisabled: isCreatingAppointmentRequest,
+    label: 'Afspraak maken'
+  }))));
+};
+var _default = exports.default = AppointmentForm;

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

@@ -0,0 +1,139 @@
+"use strict";
+
+require("core-js/modules/es.symbol.description.js");
+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 = void 0;
+require("core-js/modules/es.symbol.description.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+var _react = _interopRequireWildcard(require("react"));
+var _reactDom = require("react-dom");
+var _Modal = _interopRequireDefault(require("../__components__/Modal"));
+var _ProductCard = _interopRequireDefault(require("../__components__/ProductCard"));
+var _OrderSessionContext = require("../__context__/OrderSessionContext");
+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 BoardComputerCard = _ref => {
+  let {
+    id,
+    description,
+    title,
+    price,
+    productImage,
+    onSelect = _ref2 => {
+      let {
+        isSelected,
+        productId
+      } = _ref2;
+    },
+    onDescriptionToggle = () => {},
+    defaultSelected
+  } = _ref;
+  const [{
+    isBoardComputerDeselected
+  }] = (0, _OrderSessionContext.useOrderSession)();
+  const [anchorEl, setAnchorEl] = (0, _react.useState)();
+  const [isModalOpen, setIsModalOpen] = (0, _react.useState)();
+  const [canUnselect, setCanUnselect] = (0, _react.useState)(isBoardComputerDeselected);
+  const [isSelected, setIsSelected] = (0, _react.useState)(defaultSelected);
+  const handleSelect = _ref3 => {
+    let {
+      productId,
+      isSelected
+    } = _ref3;
+    if (!isSelected && !isBoardComputerDeselected) {
+      setIsModalOpen(true);
+      setCanUnselect(false);
+      onSelect({
+        productId,
+        isSelected
+      });
+      return;
+    }
+    setIsSelected(isSelected);
+    onSelect({
+      productId,
+      isSelected
+    });
+  };
+  (0, _react.useEffect)(() => {
+    if (typeof window !== 'undefined') {
+      const appEl = window.document.getElementsByTagName('main');
+      setAnchorEl(appEl === null || appEl === void 0 ? void 0 : appEl[0]);
+    }
+  }, []);
+  (0, _react.useEffect)(() => {
+    setIsSelected(defaultSelected);
+  }, [defaultSelected]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ProductCard.default, {
+    hasCheckbox: true,
+    isRecommended: false,
+    productId: id,
+    productTitle: title,
+    productDescription: description,
+    productUsps: [],
+    productImage: productImage,
+    isDisabled: false,
+    defaultSelected: isSelected,
+    onSelect: handleSelect,
+    productPrice: price,
+    productDiscountedPrice: null,
+    productSpecifications: [],
+    showPrice: APP_CONFIG.internal,
+    canUnselect: canUnselect,
+    isOnlyProductInCategory: isSelected,
+    isBoardComputer: true,
+    onDescriptionToggle: onDescriptionToggle
+  }), anchorEl && /*#__PURE__*/(0, _reactDom.createPortal)(/*#__PURE__*/_react.default.createElement(_Modal.default, {
+    isOpen: isModalOpen,
+    size: "large",
+    title: "Let op!",
+    onPrimaryButtonClicked: () => {
+      setCanUnselect(true);
+      setIsModalOpen(false);
+    },
+    onSecondaryButtonClicked: () => {
+      setCanUnselect(true);
+      setIsModalOpen(false);
+      handleSelect({
+        isSelected: false,
+        productId: id
+      });
+    },
+    primaryButtonText: "Niet verwijderen",
+    secondaryButtonText: "Verwijder"
+  }, /*#__PURE__*/_react.default.createElement("p", null, "Het updaten van de boordcomputer zorgt ervoor dat alle opties zoals parkeersensoren en een handsfree achterklap op de juiste manier blijven werken."), /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement("strong", null, "Weet je zeker dat je het updaten van de boordcomputer wilt verwijderen?"))), anchorEl));
+};
+var _default = exports.default = BoardComputerCard;