@wayke-se/components-react 3.2.0 → 3.3.0

package/dist-node/index.js

@@ -19,6 +19,8 @@ var scrollIntoView = _interopDefault(require('scroll-into-view-if-needed'));
 var client = require('@apollo/client');
 var marked = require('marked');
 var core = require('libphonenumber-js/core');
+var esm = require('date-fns/esm');
+var sv = _interopDefault(require('date-fns/locale/sv'));
 
 const _colors = {
   black: '#000',
@@ -35,6 +37,7 @@ const _colors = {
     redLight: '#ffd0d0',
     red: '#c71f1f',
     yellowLight: '#fff4c7',
+    yellow: '#ffc700',
     blueLight: '#daf7fc'
   }
 };
@@ -57,6 +60,7 @@ const theme = {
       positiveLight: _colors.ui.greenLight,
       positive: _colors.ui.green,
       neutralLight: _colors.ui.yellowLight,
+      neutral: _colors.ui.yellow,
       negativeLight: _colors.ui.redLight,
       negative: _colors.ui.red,
       infoLight: _colors.ui.blueLight
@@ -3125,8 +3129,8 @@ const OldPrice$1 = styled__default.div`
 
 const PriceTable = ({
   price,
-  oldPrice
-}) => React__default.createElement(List$6, null, React__default.createElement(Item$6, null, React__default.createElement(Label$5, null, React__default.createElement(VisualHeading, null, "Pris")), React__default.createElement(Value, null, React__default.createElement(Price$1, null, numberSeparator(price), " kr"))), oldPrice !== undefined && React__default.createElement(Item$6, null, React__default.createElement(Label$5, null), React__default.createElement(Value, null, React__default.createElement(OldPrice$1, null, numberSeparator(oldPrice), " kr"))));
+  discount
+}) => React__default.createElement(List$6, null, React__default.createElement(Item$6, null, React__default.createElement(Label$5, null, React__default.createElement(VisualHeading, null, "Pris")), React__default.createElement(Value, null, React__default.createElement(Price$1, null, numberSeparator(price), " kr"))), discount !== undefined && React__default.createElement(Item$6, null, React__default.createElement(Label$5, null), React__default.createElement(Value, null, React__default.createElement(OldPrice$1, null, numberSeparator(price + discount), " kr"))));
 
 const Logo = styled__default.img`
   display: block;
@@ -5286,8 +5290,13 @@ const SEARCH_ITEM_QUERY = client.gql`
         postalCode
       }
       price
+      discount
       shortDescription
       title
+      availableFrom
+      flags {
+        demoVersion
+      }
     }
   }
   ${HoursOpen}
@@ -6590,6 +6599,102 @@ const ActionList = ({
   }));
 };
 
+const Column = styled__default.div`
+  flex: 0 1 auto;
+
+  ${({
+  grow
+}) => grow && styled.css`
+      flex-grow: 1;
+    `}
+
+  ${({
+  noShrink
+}) => noShrink && styled.css`
+      flex-shrink: 0;
+    `}
+`;
+const Columns = styled__default.div`
+  display: flex;
+  align-items: flex-start;
+
+  ${({
+  valign
+}) => valign === 'end' ? styled.css`
+          align-items: flex-end;
+        ` : valign === 'center' ? styled.css`
+          align-items: center;
+        ` : styled.css`
+          align-items: flex-start;
+        `}
+
+  ${({
+  align
+}) => align === 'end' ? styled.css`
+          justify-content: flex-end;
+        ` : align === 'center' ? styled.css`
+          justify-content: center;
+        ` : styled.css`
+          justify-content: flex-start;
+        `}
+
+  ${({
+  $spacing
+}) => $spacing && styled.css`
+      margin: ${size($spacing / -2)};
+
+      & > ${Column} {
+        padding: ${size($spacing / 2)};
+      }
+    `}
+
+  ${({
+  flexWrap
+}) => flexWrap && styled.css`
+      flex-wrap: wrap;
+    `}
+
+  ${({
+  flexInline
+}) => flexInline && styled.css`
+      display: inline-flex;
+    `}
+
+  ${({
+  clearLtSm
+}) => clearLtSm && styled.css`
+      ${props => props.theme.breakpoint.LtSm} {
+        display: block;
+      }
+    `}
+
+  ${({
+  clearLtMd
+}) => clearLtMd && styled.css`
+      ${props => props.theme.breakpoint.LtMd} {
+        display: block;
+      }
+    `}
+`;
+
+const StateIndicator = styled__default.div`
+  width: ${size(1)};
+  height: ${size(1)};
+  border-radius: 50%;
+
+  ${({
+  $tone
+}) => $tone === 'success' ? styled.css`
+          background-color: ${props => props.theme.color.ui.positive};
+        ` : $tone === 'pending' ? styled.css`
+          background-color: ${props => props.theme.color.ui.neutral};
+        ` : $tone === 'error' ? styled.css`
+          background-color: ${props => props.theme.color.ui.negative};
+        ` : styled.css`
+          background-color: ${props => props.theme.color.textDarkLighten};
+        `}
+`;
+
 const List$8 = styled__default.ul`
   list-style: none;
   padding: 0;
@@ -6791,6 +6896,7 @@ const CheckList = ({
   ecommerce,
   branch,
   contact,
+  availableFrom,
   toggleEcomModal,
   loadingCentralStorageVehicle
 }) => {
@@ -6813,7 +6919,26 @@ const CheckList = ({
   }), modal && React__default.createElement(PackageOptionModal, {
     packageOption: modal,
     onClose: onClose
-  }), React__default.createElement(Repeat, null, React__default.createElement(CheckMarkList, null, (packageOption === null || packageOption === void 0 ? void 0 : packageOption.title) && React__default.createElement(CheckMarkListItem, null, React__default.createElement(React__default.Fragment, null, "Inkl.", ' ', React__default.createElement(ButtonInline, {
+  }), React__default.createElement(Repeat, null, ecommerce && ecommerce.enabled && React__default.createElement(RepeatTiny, null, React__default.createElement(ButtonPrimary, {
+    disabled: !!ecommerce.reserved,
+    fullWidth: true,
+    onClick: toggleEcomModal
+  }, React__default.createElement(ButtonContent, null, "K\u00F6p bilen online"))), (ecommerce === null || ecommerce === void 0 ? void 0 : ecommerce.reserved) && React__default.createElement(RepeatTiny, null, React__default.createElement(SwitchBar, {
+    title: "Bilen \u00E4r reserverad",
+    body: "Denna bil \u00E4r reserverad av en annan k\u00F6pare."
+  }, React__default.createElement(Content$2, null, React__default.createElement("p", null, "Denna bil \u00E4r reserverad av en annan k\u00F6pare.")))), React__default.createElement(ActionList, {
+    branch: branch,
+    contact: contact
+  })), React__default.createElement(Repeat, null, availableFrom && new Date(availableFrom).valueOf() > new Date().valueOf() && React__default.createElement(RepeatTiny, null, React__default.createElement(Columns, {
+    "$spacing": 1,
+    valign: "center"
+  }, React__default.createElement(Column, {
+    noShrink: true
+  }, React__default.createElement(StateIndicator, {
+    "$tone": "pending"
+  })), React__default.createElement(Column, null, React__default.createElement(UtilityFontSizeSmall, null, "Tillg\u00E4nglig fr\u00E5n ", esm.format(new Date(availableFrom), 'dd MMMM yyyy', {
+    locale: sv
+  }))))), React__default.createElement(RepeatTiny, null, React__default.createElement(CheckMarkList, null, (packageOption === null || packageOption === void 0 ? void 0 : packageOption.title) && React__default.createElement(CheckMarkListItem, null, React__default.createElement(React__default.Fragment, null, "Inkl.", ' ', React__default.createElement(ButtonInline, {
     onClick: () => onOpen({
       title: packageOption === null || packageOption === void 0 ? void 0 : packageOption.title,
       image: packageOption === null || packageOption === void 0 ? void 0 : packageOption.image,
@@ -6829,17 +6954,7 @@ const CheckList = ({
       description: packageOption === null || packageOption === void 0 ? void 0 : packageOption.description,
       link: packageOption === null || packageOption === void 0 ? void 0 : packageOption.link
     })
-  }, packageOption.title)))), (ecommerce === null || ecommerce === void 0 ? void 0 : ecommerce.withHomeDelivery) && React__default.createElement(CheckMarkListItem, null, "Hemleverans"))), React__default.createElement(Repeat, null, ecommerce && ecommerce.enabled && React__default.createElement(RepeatTiny, null, React__default.createElement(ButtonPrimary, {
-    disabled: !!ecommerce.reserved,
-    fullWidth: true,
-    onClick: toggleEcomModal
-  }, React__default.createElement(ButtonContent, null, "K\u00F6p bilen online"))), (ecommerce === null || ecommerce === void 0 ? void 0 : ecommerce.reserved) && React__default.createElement(RepeatTiny, null, React__default.createElement(SwitchBar, {
-    title: "Bilen \u00E4r reserverad",
-    body: "Denna bil \u00E4r reserverad av en annan k\u00F6pare."
-  }, React__default.createElement(Content$2, null, React__default.createElement("p", null, "Denna bil \u00E4r reserverad av en annan k\u00F6pare.")))), React__default.createElement(ActionList, {
-    branch: branch,
-    contact: contact
-  })), ((branch === null || branch === void 0 ? void 0 : branch.connections.length) || 0) > 1 && React__default.createElement(Repeat, null, React__default.createElement(SwitchBar, {
+  }, packageOption.title)))), (ecommerce === null || ecommerce === void 0 ? void 0 : ecommerce.withHomeDelivery) && React__default.createElement(CheckMarkListItem, null, "Hemleverans")))), ((branch === null || branch === void 0 ? void 0 : branch.connections.length) || 0) > 1 && React__default.createElement(Repeat, null, React__default.createElement(SwitchBar, {
     title: "Centrallagerbil",
     actionTitle: "Byt anl\u00E4ggning",
     onClick: openModalBranch
@@ -8287,6 +8402,13 @@ const PropertySet = ({
   })));
 };
 
+const DemoCarModal = ({
+  onClose
+}) => React__default.createElement(Modal, {
+  title: "Demobil",
+  onClose: onClose
+}, React__default.createElement(Content$2, null, React__default.createElement("p", null, "En demobil \u00E4r en bil som st\u00E5tt i utst\u00E4llning eller som p\u00E5 annat s\u00E4tt anv\u00E4nts f\u00F6r att visa upp en viss modell. Bilarna \u00E4r ofta v\u00E4lutrustade och har blivit v\u00E4l omh\u00E4ndertagna. Dessutom har de vanligtvis g\u00E5tt f\u00E5 mil och har fortfarande nybilsgarantierna kvar.")));
+
 const PdfListItem = styled__default.li.attrs(() => ({
   className: 'wayke__theme wayke__color--primary-text'
 }))`
@@ -8380,6 +8502,8 @@ const WaykeSearchItem = ({
     vehicle: centralStorageVehicle,
     loading: loadingCentralStorageVehicle
   } = useCentralStorage(result === null || result === void 0 ? void 0 : result.vehicle);
+  const [demoCarModal, setDemoCarModal] = React.useState(false);
+  const onToggleDemoCarModal = React.useCallback(() => setDemoCarModal(!demoCarModal), [demoCarModal]);
   React.useEffect(() => {
     if (ecomSettings) {
       ecomContext.current = new WaykeEcomWeb({
@@ -8452,12 +8576,15 @@ const WaykeSearchItem = ({
     media,
     description,
     price,
+    discount,
     financialOptions,
     manufacturer,
     ecommerce,
     packageOptions,
     publishedAt,
-    documents
+    documents,
+    availableFrom,
+    flags
   } = vehicle;
   const insuranceOptions = centralStorageVehicle !== null && centralStorageVehicle !== void 0 && centralStorageVehicle.insuranceOptions ? centralStorageVehicle.insuranceOptions : vehicle.insuranceOptions;
   const {
@@ -8469,10 +8596,19 @@ const WaykeSearchItem = ({
   } = vehicle.data;
   const uspList = [{
     title: modelYear
-  }, {
-    title: `${numberSeparator(mileage)} mil`
   }];
 
+  if (flags !== null && flags !== void 0 && flags.demoVersion) {
+    uspList.push({
+      title: 'Demobil',
+      onClick: onToggleDemoCarModal
+    });
+  }
+
+  uspList.push({
+    title: `${numberSeparator(mileage)} mil`
+  });
+
   if (gearbox) {
     uspList.push({
       title: gearbox
@@ -8506,7 +8642,8 @@ const WaykeSearchItem = ({
   })))), React__default.createElement(ProductPageAsideSection, {
     mobileOrder: 2
   }, React__default.createElement(PriceTable, {
-    price: price
+    price: price,
+    discount: discount || undefined
   })), (financialOptions.length > 0 || insuranceOptions.length > 0) && React__default.createElement(ProductPageAsideSection, {
     mobileOrder: 4
   }, financialOptions.length > 0 && React__default.createElement(FinancialOptions, {
@@ -8525,6 +8662,7 @@ const WaykeSearchItem = ({
     branch: branch,
     contact: centralStorageVehicle === null || centralStorageVehicle === void 0 ? void 0 : centralStorageVehicle.contact,
     loadingCentralStorageVehicle: loadingCentralStorageVehicle,
+    availableFrom: availableFrom,
     toggleEcomModal: () => {
       var _ecomContext$current;
 
@@ -8577,6 +8715,8 @@ const WaykeSearchItem = ({
     onClickSearchItem: onClickSearchItem
   })), false , React__default.createElement(PortalElement, {
     id: DefaultPortal
+  }), demoCarModal && React__default.createElement(DemoCarModal, {
+    onClose: onToggleDemoCarModal
   }));
 };