@wayke-se/components-react 2.15.0 → 2.16.0

package/dist-node/index.js

@@ -16,8 +16,8 @@ var LazyLoad = _interopDefault(require('react-lazyload'));
 var Slider$1 = _interopDefault(require('react-slick'));
 var scrollIntoView = _interopDefault(require('scroll-into-view-if-needed'));
 var client = require('@apollo/client');
-var EcomBase = _interopDefault(require('@wayke-se/ecom-react'));
 var marked = require('marked');
+var EcomBase = _interopDefault(require('@wayke-se/ecom-react'));
 var core = require('libphonenumber-js/core');
 
 const _colors = {
@@ -2229,7 +2229,7 @@ const LogoBox = ({
 
 const Wrapper$c = styled__default.div.withConfig({
   displayName: "wrapper__Wrapper"
-})(["font-size:1rem;line-height:1.5;h1,h2,h3,h4,h5,h6{margin-top:", ";margin-bottom:", ";:first-child{margin-top:0;}:last-child{margin-bottom:0;}& + p,& + table{margin-top:", ";}}p{margin:", " 0;:first-child{margin-top:0;}:last-child{margin-bottom:0;}}", ""], size(4), size(1), size(1), size(2), ({
+})(["font-size:1rem;line-height:1.5;h1,h2,h3,h4,h5,h6{margin-top:", ";margin-bottom:", ";:first-child{margin-top:0;}:last-child{margin-bottom:0;}& + p,& + table{margin-top:", ";}}p{margin:", " 0;:first-child{margin-top:0;}:last-child{margin-bottom:0;}}img{display:block;width:100%;}", ""], size(4), size(1), size(1), size(2), ({
   small
 }) => small && styled.css(["font-size:0.875rem;"]));
 
@@ -3510,10 +3510,17 @@ const SEARCH_ITEM_QUERY = client.gql`
         withHomeDelivery
       }
       insuranceOptions {
-        description
+        insuranceHeader
+        institute
+        identifier
         logotype
-        url
         name
+        description
+        longDescription
+        url
+        insuranceText
+        requiresPersonalNumber
+        requiresDistance
         terms
       }
       financialOptions {
@@ -4232,10 +4239,16 @@ const ColumnRowItem = styled__default.div.withConfig({
 const INSURANCE_CALCULATION = client.gql`
   query InsuranceCalculation(
     $id: ID!
+    $branch: ID
     $personalNumber: PersonalNumber!
     $drivingDistance: DrivingDistance!
   ) {
-    insurances(id: $id, personalNumber: $personalNumber, drivingDistance: $drivingDistance) {
+    insurances(
+      id: $id
+      branch: $branch
+      personalNumber: $personalNumber
+      drivingDistance: $drivingDistance
+    ) {
       name
       price
       unit
@@ -4263,13 +4276,14 @@ const INSURANCE_CALCULATION = client.gql`
   }
 `;
 
-const useInsuranceCalculation = (id, personalNumber, drivingDistance) => client.useQuery(INSURANCE_CALCULATION, {
+const useInsuranceCalculation = (id, branchId, personalNumber, drivingDistance) => client.useQuery(INSURANCE_CALCULATION, {
   variables: {
     id,
+    branch: branchId,
     personalNumber: personalNumber,
     drivingDistance: drivingDistance
   },
-  skip: personalNumber === undefined || drivingDistance === undefined
+  skip: personalNumber === undefined || drivingDistance === undefined || branchId === undefined
 });
 
 const ssnIsValid = s => s ? /^\d{2,4}\d{2}\d{2}\-?\d{4}$/.test(s) : false;
@@ -4292,8 +4306,9 @@ var FinancialOptionInclusion;
   FinancialOptionInclusion["IncludesWintertires"] = "INCLUDES_WINTERTIRES";
 })(FinancialOptionInclusion || (FinancialOptionInclusion = {}));
 
-const InsuranceOptionModal = ({
+const InsuranceModal = ({
   id,
+  branch,
   onClose,
   insuranceOptions
 }) => {
@@ -4306,7 +4321,7 @@ const InsuranceOptionModal = ({
     loading,
     data,
     error
-  } = useInsuranceCalculation(id, ssnIsValid(payload === null || payload === void 0 ? void 0 : payload.ssn) ? payload === null || payload === void 0 ? void 0 : payload.ssn : undefined, payload === null || payload === void 0 ? void 0 : payload.drivingDistance);
+  } = useInsuranceCalculation(id, (branch === null || branch === void 0 ? void 0 : branch.id) ? branch === null || branch === void 0 ? void 0 : branch.id : undefined, ssnIsValid(payload === null || payload === void 0 ? void 0 : payload.ssn) ? payload === null || payload === void 0 ? void 0 : payload.ssn : undefined, payload === null || payload === void 0 ? void 0 : payload.drivingDistance);
   const onChangeSsn = React.useCallback(e => setForm(_objectSpread2(_objectSpread2({}, form), {}, {
     ssn: e.currentTarget.value
   })), [form]);
@@ -4393,8 +4408,9 @@ const InsuranceOptionModal = ({
   }, addon.description)), React__default.createElement(ColumnRowItem, null, React__default.createElement(UtilityTextBold, null, "+", addon.price, " ", addon.unit))))))))))));
 };
 
-const InsuranceOptions = ({
+const Insurance = ({
   id,
+  branch,
   insuranceOptions
 }) => {
   const [modal, setModal] = React.useState(false);
@@ -4404,8 +4420,9 @@ const InsuranceOptions = ({
     return null;
   }
 
-  return React__default.createElement(React__default.Fragment, null, modal && React__default.createElement(InsuranceOptionModal, {
+  return React__default.createElement(React__default.Fragment, null, modal && React__default.createElement(InsuranceModal, {
     id: id,
+    branch: branch,
     onClose: toggleModal,
     insuranceOptions: insuranceOptions[0]
   }), React__default.createElement(Repeat, null, React__default.createElement(RepeatTiny, null, React__default.createElement(VisualHeading, null, "V\u00E4lj till f\u00F6rs\u00E4kring")), React__default.createElement(RepeatTiny, null, React__default.createElement(React__default.Fragment, null, insuranceOptions.map((insuranceOption, index) => React__default.createElement(OptionBox, {
@@ -4417,6 +4434,82 @@ const InsuranceOptions = ({
   }, "Mer information")))))))));
 };
 
+const InsuranceFreeModal = ({
+  onClose,
+  insuranceOptions
+}) => {
+  var _a;
+
+  return React__default.createElement(Modal, {
+    title: (_a = insuranceOptions === null || insuranceOptions === void 0 ? void 0 : insuranceOptions.insuranceHeader) !== null && _a !== void 0 ? _a : 'Försäkring',
+    onClose: onClose
+  }, (insuranceOptions === null || insuranceOptions === void 0 ? void 0 : insuranceOptions.longDescription) && React__default.createElement(Repeat, null, React__default.createElement(Content$2, {
+    dangerouslySetInnerHTML: {
+      __html: marked.marked(insuranceOptions.longDescription)
+    }
+  })), (insuranceOptions === null || insuranceOptions === void 0 ? void 0 : insuranceOptions.url) && React__default.createElement(Repeat, null, React__default.createElement(ButtonInline, {
+    as: "a",
+    href: insuranceOptions.url,
+    target: "_blank",
+    rel: "noopener noreferrer"
+  }, "L\u00E4s mer om f\u00F6rs\u00E4kringen (\u00D6ppnas i ett nytt f\u00F6nster)")), (insuranceOptions === null || insuranceOptions === void 0 ? void 0 : insuranceOptions.logotype) && React__default.createElement(Repeat, null, React__default.createElement(LogoBox, {
+    logo: insuranceOptions.logotype,
+    alt: insuranceOptions.name || 'Logotyp',
+    wide: true
+  })));
+};
+
+const Insurance$1 = ({
+  insuranceOptions
+}) => {
+  var _a, _b;
+
+  const [modal, setModal] = React.useState(false);
+  const toggleModal = React.useCallback(() => setModal(!modal), [modal]);
+
+  if (!insuranceOptions.length) {
+    return null;
+  }
+
+  return React__default.createElement(React__default.Fragment, null, modal && React__default.createElement(InsuranceFreeModal, {
+    onClose: toggleModal,
+    insuranceOptions: insuranceOptions[0]
+  }), React__default.createElement(Repeat, null, React__default.createElement(RepeatTiny, null, React__default.createElement(VisualHeading, null, (_b = (_a = insuranceOptions[0]) === null || _a === void 0 ? void 0 : _a.insuranceHeader) !== null && _b !== void 0 ? _b : 'Försäkring')), React__default.createElement(RepeatTiny, null, React__default.createElement(React__default.Fragment, null, insuranceOptions.map((insuranceOption, index) => React__default.createElement(OptionBox, {
+    key: `${insuranceOption.url}-${index}`,
+    logo: insuranceOption.logotype || undefined,
+    logoAlt: insuranceOption.name || 'Logotyp'
+  }, insuranceOption.description && React__default.createElement(Content$2, {
+    dangerouslySetInnerHTML: {
+      __html: marked.marked(insuranceOption.description)
+    }
+  }), React__default.createElement(OptionBoxContent, null, React__default.createElement("p", null, React__default.createElement(ButtonInline, {
+    onClick: toggleModal
+  }, "Mer information")))))))));
+};
+
+const InsuranceOptions = ({
+  id,
+  branch,
+  insuranceOptions
+}) => {
+  if (!insuranceOptions.length) {
+    return null;
+  }
+
+  if (insuranceOptions.length > 0) {
+    if (insuranceOptions[0].requiresDistance && insuranceOptions[0].requiresPersonalNumber) return React__default.createElement(Insurance, {
+      id: id,
+      branch: branch,
+      insuranceOptions: insuranceOptions
+    });
+    return React__default.createElement(Insurance$1, {
+      insuranceOptions: insuranceOptions
+    });
+  }
+
+  return null;
+};
+
 const SettingsContext = React.createContext({});
 
 const useSettings = () => React.useContext(SettingsContext);
@@ -5316,6 +5409,20 @@ const SEARCH_ITEM_BRANCH_QUERY = client.gql`
           title
         }
       }
+      insuranceOptions {
+        insuranceHeader
+        institute
+        identifier
+        logotype
+        name
+        description
+        longDescription
+        url
+        insuranceText
+        requiresPersonalNumber
+        requiresDistance
+        terms
+      }
     }
   }
   ${HoursOpen$1}
@@ -6207,13 +6314,13 @@ const WaykeSearchItem = ({
     description,
     price,
     financialOptions,
-    insuranceOptions,
     manufacturer,
     ecommerce,
     packageOptions,
     publishedAt,
     documents
   } = vehicle;
+  const insuranceOptions = (centralStorageVehicle === null || centralStorageVehicle === void 0 ? void 0 : centralStorageVehicle.insuranceOptions) ? centralStorageVehicle.insuranceOptions : vehicle.insuranceOptions;
   const {
     fuelType,
     mileage,
@@ -6272,6 +6379,7 @@ const WaykeSearchItem = ({
     financialOptions: financialOptions
   }), insuranceOptions.length > 0 && React__default.createElement(InsuranceOptions, {
     id: id,
+    branch: centralStorageVehicle === null || centralStorageVehicle === void 0 ? void 0 : centralStorageVehicle.branch,
     insuranceOptions: insuranceOptions
   })), React__default.createElement(ProductPageAsideSection, {
     mobileOrder: 5