@wayke-se/components-react 2.13.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;"]));
 
@@ -3370,6 +3370,7 @@ const SEARCH_ITEM_QUERY = client.gql`
   query SearchItem($id: ID!) {
     vehicle(id: $id) {
       id
+      documents
       contact {
         name
         email
@@ -3509,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 {
@@ -4231,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
@@ -4262,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;
@@ -4291,8 +4306,9 @@ var FinancialOptionInclusion;
   FinancialOptionInclusion["IncludesWintertires"] = "INCLUDES_WINTERTIRES";
 })(FinancialOptionInclusion || (FinancialOptionInclusion = {}));
 
-const InsuranceOptionModal = ({
+const InsuranceModal = ({
   id,
+  branch,
   onClose,
   insuranceOptions
 }) => {
@@ -4305,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]);
@@ -4392,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);
@@ -4403,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, {
@@ -4416,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);
@@ -5315,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}
@@ -5982,7 +6090,7 @@ const MetadataItem = ({
   const [foldout, setFoldout] = React.useState(false);
   const onToggleFoldout = React.useCallback(() => setFoldout(!foldout), [foldout]);
   const presentedValue = formatValue(value, unit);
-  return React__default.createElement(TableListItem, null, React__default.createElement(TableListKey, null, hint ? React__default.createElement(ButtonInlinePrimary, {
+  return React__default.createElement(TableListItem, null, React__default.createElement(TableListKey, null, hint ? React__default.createElement(ButtonInline, {
     onClick: onToggleFoldout,
     title: `Mer information om ${name}`
   }, name) : name), React__default.createElement(TableListValue, null, value !== undefined ? presentedValue : 'Uppgift saknas'), hint && foldout && React__default.createElement(Modal, {
@@ -6096,6 +6204,48 @@ const PropertySet = ({
   })));
 };
 
+const PdfListItem = styled__default.li.attrs(() => ({
+  className: 'wayke__theme wayke__color--primary-text'
+})).withConfig({
+  displayName: "wrapper__PdfListItem"
+})(["flex:0 0 50%;padding:", ";", "{flex:0 0 100%;}"], size(1), ({
+  theme
+}) => theme.breakpoint.LtSm);
+const PdfContainer = styled__default.ul.withConfig({
+  displayName: "wrapper__PdfContainer"
+})(["list-style:none;padding:0;display:flex;flex-wrap:wrap;margin:", ";"], size(-1));
+const PdfLink = styled__default.a.attrs(() => ({
+  className: 'wayke__theme wayke__color--primary-text wayke__font--bold'
+})).withConfig({
+  displayName: "wrapper__PdfLink"
+})(["text-decoration:none;font-size:0.875rem;&:after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;}"]);
+const PdfTitle = styled__default.div.withConfig({
+  displayName: "wrapper__PdfTitle"
+})(["color:", ";"], props => props.theme.color.textDark);
+const PdfSubtitle = styled__default.div.withConfig({
+  displayName: "wrapper__PdfSubtitle"
+})(["color:", ";"], props => props.theme.color.textDarkLighten);
+const PdfColumn = styled__default.div.withConfig({
+  displayName: "wrapper__PdfColumn"
+})(["flex 0 0 auto;&:first-child{flex:1 1 auto;}"]);
+const PdfListInner = styled__default.div.withConfig({
+  displayName: "wrapper__PdfListInner"
+})(["position:relative;border:1px solid ", ";padding:", ";display:flex;align-items:center;:hover{background-color:", ";}"], props => props.theme.color.border, size(1.5), props => props.theme.color.hoverOverlay);
+
+const PdfDownloadItem = ({
+  document
+}) => React__default.createElement(PdfListItem, null, React__default.createElement(PdfListInner, null, React__default.createElement(PdfColumn, null, React__default.createElement(PdfTitle, null, document.name), React__default.createElement(PdfSubtitle, null, document.contentType)), React__default.createElement(PdfColumn, null, React__default.createElement(PdfLink, {
+  href: document.url,
+  rel: "noopener noreferrer nofollow",
+  target: "_blank"
+}, "\u00D6ppna"))));
+const PdfDownloadContainer = ({
+  documents
+}) => React__default.createElement(PdfContainer, null, documents.map((document, i) => React__default.createElement(PdfDownloadItem, {
+  key: `${document.url}-${i}`,
+  document: document
+})));
+
 const WaykeSearchItem = ({
   id,
   hashRoute,
@@ -6164,12 +6314,13 @@ const WaykeSearchItem = ({
     description,
     price,
     financialOptions,
-    insuranceOptions,
     manufacturer,
     ecommerce,
     packageOptions,
-    publishedAt
+    publishedAt,
+    documents
   } = vehicle;
+  const insuranceOptions = (centralStorageVehicle === null || centralStorageVehicle === void 0 ? void 0 : centralStorageVehicle.insuranceOptions) ? centralStorageVehicle.insuranceOptions : vehicle.insuranceOptions;
   const {
     fuelType,
     mileage,
@@ -6228,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
@@ -6260,7 +6412,11 @@ const WaykeSearchItem = ({
     onClick: onShowMoreOptionsClick
   }, React__default.createElement(UspList, {
     items: options
-  })))), React__default.createElement(ProductPageMainSection, null, React__default.createElement(Branch, {
+  })))), (documents.length || 0) > 0 && React__default.createElement(ProductPageMainSection, null, React__default.createElement(Repeat, null, React__default.createElement(H2, {
+    noMargin: true
+  }, "Dokument")), React__default.createElement(Repeat, null, React__default.createElement(Content$2, null, React__default.createElement("p", null, "Tillh\u00F6rande dokument f\u00F6r bilen."))), React__default.createElement(Repeat, null, React__default.createElement(PdfDownloadContainer, {
+    documents: documents
+  }))), React__default.createElement(ProductPageMainSection, null, React__default.createElement(Branch, {
     branch: branch,
     loading: loadingCentralStorageVehicle
   }), ecommerce && ecommerce.enabled && React__default.createElement(Repeat, null, React__default.createElement(ButtonPrimary, {