@wayke-se/components-react 3.1.0 → 3.3.0

package/dist-web/index.js

@@ -11,6 +11,8 @@ import scrollIntoView from 'scroll-into-view-if-needed';
 import { gql, useQuery, ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
 import { marked } from 'marked';
 import { parsePhoneNumberFromString } from 'libphonenumber-js/core';
+import { format as format$1 } from 'date-fns/esm';
+import sv$1 from 'date-fns/locale/sv';
 
 const _colors = {
     black: '#000',
@@ -27,6 +29,7 @@ const _colors = {
         redLight: '#ffd0d0',
         red: '#c71f1f',
         yellowLight: '#fff4c7',
+        yellow: '#ffc700',
         blueLight: '#daf7fc',
     },
 };
@@ -49,6 +52,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,
@@ -2493,7 +2497,7 @@ const OldPrice$1 = styled.div `
   text-decoration: line-through;
 `;
 
-const PriceTable = ({ price, oldPrice }) => (React__default.createElement(List$6, null,
+const PriceTable = ({ price, 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")),
@@ -2501,11 +2505,11 @@ const PriceTable = ({ price, oldPrice }) => (React__default.createElement(List$6
             React__default.createElement(Price$1, null,
                 numberSeparator(price),
                 " kr"))),
-    oldPrice !== undefined && (React__default.createElement(Item$6, null,
+    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(oldPrice),
+                numberSeparator(price + discount),
                 " kr"))))));
 
 const Logo = styled.img `
@@ -4322,8 +4326,13 @@ const SEARCH_ITEM_QUERY = gql `
         postalCode
       }
       price
+      discount
       shortDescription
       title
+      availableFrom
+      flags {
+        demoVersion
+      }
     }
   }
   ${HoursOpen}
@@ -5460,6 +5469,103 @@ const ActionList = ({ contact, branch }) => {
         phonenumber && (React__default.createElement(ToggleItem, { title: "Visa telefonnummer", value: formatPhonenumber(phonenumber), type: "tel", onClickVisible: onClickPhoneVisible, onClickValue: onClickPhoneValue }))));
 };
 
+const Column = styled.div `
+  flex: 0 1 auto;
+
+  ${({ grow }) => grow &&
+    css `
+      flex-grow: 1;
+    `}
+
+  ${({ noShrink }) => noShrink &&
+    css `
+      flex-shrink: 0;
+    `}
+`;
+const Columns = styled.div `
+  display: flex;
+  align-items: flex-start;
+
+  ${({ valign }) => valign === 'end'
+    ? css `
+          align-items: flex-end;
+        `
+    : valign === 'center'
+        ? css `
+          align-items: center;
+        `
+        : css `
+          align-items: flex-start;
+        `}
+
+  ${({ align }) => align === 'end'
+    ? css `
+          justify-content: flex-end;
+        `
+    : align === 'center'
+        ? css `
+          justify-content: center;
+        `
+        : css `
+          justify-content: flex-start;
+        `}
+
+  ${({ $spacing }) => $spacing &&
+    css `
+      margin: ${size($spacing / -2)};
+
+      & > ${Column} {
+        padding: ${size($spacing / 2)};
+      }
+    `}
+
+  ${({ flexWrap }) => flexWrap &&
+    css `
+      flex-wrap: wrap;
+    `}
+
+  ${({ flexInline }) => flexInline &&
+    css `
+      display: inline-flex;
+    `}
+
+  ${({ clearLtSm }) => clearLtSm &&
+    css `
+      ${(props) => props.theme.breakpoint.LtSm} {
+        display: block;
+      }
+    `}
+
+  ${({ clearLtMd }) => clearLtMd &&
+    css `
+      ${(props) => props.theme.breakpoint.LtMd} {
+        display: block;
+      }
+    `}
+`;
+
+const StateIndicator = styled.div `
+  width: ${size(1)};
+  height: ${size(1)};
+  border-radius: 50%;
+
+  ${({ $tone }) => $tone === 'success'
+    ? css `
+          background-color: ${(props) => props.theme.color.ui.positive};
+        `
+    : $tone === 'pending'
+        ? css `
+          background-color: ${(props) => props.theme.color.ui.neutral};
+        `
+        : $tone === 'error'
+            ? css `
+          background-color: ${(props) => props.theme.color.ui.negative};
+        `
+            : css `
+          background-color: ${(props) => props.theme.color.textDarkLighten};
+        `}
+`;
+
 const List$8 = styled.ul `
   list-style: none;
   padding: 0;
@@ -5618,7 +5724,7 @@ const PackageOptionModal = ({ packageOption, onClose }) => (React__default.creat
     packageOption.link?.href && packageOption.link.title && (React__default.createElement(Repeat, null,
         React__default.createElement(ButtonInline, { as: "a", href: packageOption.link.href, target: "_blank", rel: "noopener noreferrer nofollow" }, packageOption.link.title)))));
 
-const CheckList = ({ manufacturer, packageOptions, ecommerce, branch, contact, toggleEcomModal, loadingCentralStorageVehicle, }) => {
+const CheckList = ({ manufacturer, packageOptions, ecommerce, branch, contact, availableFrom, toggleEcomModal, loadingCentralStorageVehicle, }) => {
     const [modalBranch, setModalBranch] = useState(false);
     const openModalBranch = useCallback(() => setModalBranch(true), []);
     const closeModalBranch = useCallback(() => setModalBranch(false), []);
@@ -5634,31 +5740,6 @@ const CheckList = ({ manufacturer, packageOptions, ecommerce, branch, contact, t
     return (React__default.createElement(React__default.Fragment, null,
         modalBranch && (React__default.createElement(BranchModal, { loading: loadingCentralStorageVehicle, connections: branch?.connections, onClose: closeModalBranch })),
         modal && React__default.createElement(PackageOptionModal, { packageOption: modal, onClose: onClose }),
-        React__default.createElement(Repeat, null,
-            React__default.createElement(CheckMarkList, null,
-                packageOption?.title && (React__default.createElement(CheckMarkListItem, null,
-                    React__default.createElement(React__default.Fragment, null,
-                        "Inkl.",
-                        ' ',
-                        React__default.createElement(ButtonInline, { onClick: () => onOpen({
-                                title: packageOption?.title,
-                                image: packageOption?.image,
-                                description: packageOption?.description,
-                                link: packageOption?.link,
-                            }) }, packageOption.title),
-                        ' ',
-                        "begagnatgaranti"))),
-                packageOptions?.map((packageOption, index) => (React__default.createElement(CheckMarkListItem, { key: packageOption.title || index },
-                    React__default.createElement(React__default.Fragment, null,
-                        "Inkl.",
-                        ' ',
-                        React__default.createElement(ButtonInline, { onClick: () => onOpen({
-                                title: packageOption?.title,
-                                image: packageOption?.image,
-                                description: packageOption?.description,
-                                link: packageOption?.link,
-                            }) }, packageOption.title))))),
-                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 },
@@ -5668,6 +5749,40 @@ const CheckList = ({ manufacturer, packageOptions, ecommerce, branch, contact, t
                     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 ",
+                            format$1(new Date(availableFrom), 'dd MMMM yyyy', { locale: sv$1 })))))),
+            React__default.createElement(RepeatTiny, null,
+                React__default.createElement(CheckMarkList, null,
+                    packageOption?.title && (React__default.createElement(CheckMarkListItem, null,
+                        React__default.createElement(React__default.Fragment, null,
+                            "Inkl.",
+                            ' ',
+                            React__default.createElement(ButtonInline, { onClick: () => onOpen({
+                                    title: packageOption?.title,
+                                    image: packageOption?.image,
+                                    description: packageOption?.description,
+                                    link: packageOption?.link,
+                                }) }, packageOption.title),
+                            ' ',
+                            "begagnatgaranti"))),
+                    packageOptions?.map((packageOption, index) => (React__default.createElement(CheckMarkListItem, { key: packageOption.title || index },
+                        React__default.createElement(React__default.Fragment, null,
+                            "Inkl.",
+                            ' ',
+                            React__default.createElement(ButtonInline, { onClick: () => onOpen({
+                                    title: packageOption?.title,
+                                    image: packageOption?.image,
+                                    description: packageOption?.description,
+                                    link: packageOption?.link,
+                                }) }, packageOption.title))))),
+                    ecommerce?.withHomeDelivery && React__default.createElement(CheckMarkListItem, null, "Hemleverans")))),
         (branch?.connections.length || 0) > 1 && (React__default.createElement(Repeat, null,
             React__default.createElement(SwitchBar, { title: "Centrallagerbil", actionTitle: "Byt anl\u00E4ggning", onClick: openModalBranch },
                 React__default.createElement(Content$2, null,
@@ -6979,6 +7094,10 @@ const PropertySet = ({ propertySet, vehicleData }) => {
             React__default.createElement(MetadataCategory, { properties: activeCategory.properties, subCategories: activeCategory.subCategories })))));
 };
 
+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.li.attrs(() => ({
     className: 'wayke__theme wayke__color--primary-text',
 })) `
@@ -7047,6 +7166,8 @@ const WaykeSearchItem = ({ id, hashRoute, pathRoute, disableResetScrollOnInit, p
     const ecomContext = useRef();
     const { loading, data: result } = useSearchItem(id);
     const { vehicle: centralStorageVehicle, loading: loadingCentralStorageVehicle } = useCentralStorage(result?.vehicle);
+    const [demoCarModal, setDemoCarModal] = useState(false);
+    const onToggleDemoCarModal = useCallback(() => setDemoCarModal(!demoCarModal), [demoCarModal]);
     useEffect(() => {
         if (ecomSettings) {
             ecomContext.current = new WaykeEcomWeb({
@@ -7093,7 +7214,7 @@ const WaykeSearchItem = ({ id, hashRoute, pathRoute, disableResetScrollOnInit, p
     const { vehicle } = result;
     const contact = centralStorageVehicle?.contact;
     const branch = centralStorageVehicle?.branch;
-    const { title, shortDescription, media, description, price, financialOptions, manufacturer, ecommerce, packageOptions, publishedAt, documents, } = vehicle;
+    const { title, shortDescription, media, description, price, discount, financialOptions, manufacturer, ecommerce, packageOptions, publishedAt, documents, availableFrom, flags, } = vehicle;
     const insuranceOptions = centralStorageVehicle?.insuranceOptions
         ? centralStorageVehicle.insuranceOptions
         : vehicle.insuranceOptions;
@@ -7102,10 +7223,16 @@ const WaykeSearchItem = ({ id, hashRoute, pathRoute, disableResetScrollOnInit, p
         {
             title: modelYear,
         },
-        {
-            title: `${numberSeparator(mileage)} mil`,
-        },
     ];
+    if (flags?.demoVersion) {
+        uspList.push({
+            title: 'Demobil',
+            onClick: onToggleDemoCarModal,
+        });
+    }
+    uspList.push({
+        title: `${numberSeparator(mileage)} mil`,
+    });
     if (gearbox) {
         uspList.push({ title: gearbox });
     }
@@ -7135,12 +7262,12 @@ const WaykeSearchItem = ({ id, hashRoute, pathRoute, disableResetScrollOnInit, p
                                     React__default.createElement(RepeatSmall, null,
                                         React__default.createElement(UspList, { small: true, items: uspList })))),
                             React__default.createElement(ProductPageAsideSection, { mobileOrder: 2 },
-                                React__default.createElement(PriceTable, { price: price })),
+                                React__default.createElement(PriceTable, { price: price, discount: discount || undefined })),
                             (financialOptions.length > 0 || insuranceOptions.length > 0) && (React__default.createElement(ProductPageAsideSection, { mobileOrder: 4 },
                                 financialOptions.length > 0 && (React__default.createElement(FinancialOptions, { id: id, financialOptions: financialOptions })),
                                 insuranceOptions.length > 0 && (React__default.createElement(InsuranceOptions, { id: id, branch: centralStorageVehicle?.branch, insuranceOptions: insuranceOptions })))),
                             React__default.createElement(ProductPageAsideSection, { mobileOrder: 5 },
-                                React__default.createElement(CheckList, { manufacturer: manufacturer, packageOptions: packageOptions, ecommerce: ecommerce, branch: branch, contact: centralStorageVehicle?.contact, loadingCentralStorageVehicle: loadingCentralStorageVehicle, toggleEcomModal: () => ecomContext.current?.start() }))),
+                                React__default.createElement(CheckList, { manufacturer: manufacturer, packageOptions: packageOptions, ecommerce: ecommerce, branch: branch, contact: centralStorageVehicle?.contact, loadingCentralStorageVehicle: loadingCentralStorageVehicle, availableFrom: availableFrom, toggleEcomModal: () => ecomContext.current?.start() }))),
                         React__default.createElement(ProductPageMain, null,
                             React__default.createElement(ProductPageAsideSection, { mobileOrder: 3 },
                                 React__default.createElement(Gallery, { media: media, placeholderImage: placeholderImage })),
@@ -7181,7 +7308,8 @@ const WaykeSearchItem = ({ id, hashRoute, pathRoute, disableResetScrollOnInit, p
                             React__default.createElement(ManufacturerPackageOption, { packageOption: manufacturer?.packageOption }))))),
             React__default.createElement(Related, { id: id, hashRoute: hashRoute, pathRoute: pathRoute, onClickSearchItem: onClickSearchItem })),
         false ,
-        React__default.createElement(PortalElement, { id: DefaultPortal })));
+        React__default.createElement(PortalElement, { id: DefaultPortal }),
+        demoCarModal && React__default.createElement(DemoCarModal, { onClose: onToggleDemoCarModal })));
 };
 
 const GraphqlProvider = ({ uri, children }) => {