@wayke-se/components-react 3.2.0 → 3.3.0

package/dist-src/components/Columns/index.js

@@ -0,0 +1,76 @@
+import styled, { css } from 'styled-components';
+import { size } from '../../layout/helpers';
+export const Column = styled.div `
+  flex: 0 1 auto;
+
+  ${({ grow }) => grow &&
+    css `
+      flex-grow: 1;
+    `}
+
+  ${({ noShrink }) => noShrink &&
+    css `
+      flex-shrink: 0;
+    `}
+`;
+export 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;
+      }
+    `}
+`;

package/dist-src/components/PriceTable/index.js

@@ -3,7 +3,7 @@ import { List, Item, Value, Label } from './wrapper';
 import { VisualHeading } from '../Heading/index';
 import { Price, OldPrice } from '../Price/index';
 import { numberSeparator } from '../../utils/formats';
-const PriceTable = ({ price, oldPrice }) => (React.createElement(List, null,
+const PriceTable = ({ price, discount }) => (React.createElement(List, null,
     React.createElement(Item, null,
         React.createElement(Label, null,
             React.createElement(VisualHeading, null, "Pris")),
@@ -11,10 +11,10 @@ const PriceTable = ({ price, oldPrice }) => (React.createElement(List, null,
             React.createElement(Price, null,
                 numberSeparator(price),
                 " kr"))),
-    oldPrice !== undefined && (React.createElement(Item, null,
+    discount !== undefined && (React.createElement(Item, null,
         React.createElement(Label, null),
         React.createElement(Value, null,
             React.createElement(OldPrice, null,
-                numberSeparator(oldPrice),
+                numberSeparator(price + discount),
                 " kr"))))));
 export default PriceTable;

package/dist-src/components/StateIndicator/index.js

@@ -0,0 +1,23 @@
+import styled, { css } from 'styled-components';
+import { size } from '../../layout/helpers';
+export 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};
+        `}
+`;

package/dist-src/layout/theme.js

@@ -13,6 +13,7 @@ const _colors = {
         redLight: '#ffd0d0',
         red: '#c71f1f',
         yellowLight: '#fff4c7',
+        yellow: '#ffc700',
         blueLight: '#daf7fc',
     },
 };
@@ -35,6 +36,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,

package/dist-src/layouts/searchItem/CheckList.js

@@ -2,12 +2,17 @@ import React, { useState, useCallback, useEffect } from 'react';
 import { Repeat, RepeatTiny } from '../../components/Repeat/index';
 import ActionList from '../../components/ActionList/index';
 import { ButtonPrimary, ButtonContent, ButtonInline } from '../../components/Button/index';
+import { Columns, Column } from '../../components/Columns/index';
+import { UtilityFontSizeSmall } from '../../components/Utility/index';
+import { StateIndicator } from '../../components/StateIndicator/index';
 import CheckMarkList, { CheckMarkListItem } from '../../components/CheckMarkList/index';
 import Content from '../../components/Content/index';
 import SwitchBar from '../../components/SwitchBar/index';
 import BranchModal from './BranchModal';
 import PackageOptionModal from './PackageOptionModal';
-const CheckList = ({ manufacturer, packageOptions, ecommerce, branch, contact, toggleEcomModal, loadingCentralStorageVehicle, }) => {
+import { format } from 'date-fns/esm';
+import sv from 'date-fns/locale/sv';
+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), []);
@@ -23,31 +28,6 @@ const CheckList = ({ manufacturer, packageOptions, ecommerce, branch, contact, t
     return (React.createElement(React.Fragment, null,
         modalBranch && (React.createElement(BranchModal, { loading: loadingCentralStorageVehicle, connections: branch?.connections, onClose: closeModalBranch })),
         modal && React.createElement(PackageOptionModal, { packageOption: modal, onClose: onClose }),
-        React.createElement(Repeat, null,
-            React.createElement(CheckMarkList, null,
-                packageOption?.title && (React.createElement(CheckMarkListItem, null,
-                    React.createElement(React.Fragment, null,
-                        "Inkl.",
-                        ' ',
-                        React.createElement(ButtonInline, { onClick: () => onOpen({
-                                title: packageOption?.title,
-                                image: packageOption?.image,
-                                description: packageOption?.description,
-                                link: packageOption?.link,
-                            }) }, packageOption.title),
-                        ' ',
-                        "begagnatgaranti"))),
-                packageOptions?.map((packageOption, index) => (React.createElement(CheckMarkListItem, { key: packageOption.title || index },
-                    React.createElement(React.Fragment, null,
-                        "Inkl.",
-                        ' ',
-                        React.createElement(ButtonInline, { onClick: () => onOpen({
-                                title: packageOption?.title,
-                                image: packageOption?.image,
-                                description: packageOption?.description,
-                                link: packageOption?.link,
-                            }) }, packageOption.title))))),
-                ecommerce?.withHomeDelivery && React.createElement(CheckMarkListItem, null, "Hemleverans"))),
         React.createElement(Repeat, null,
             ecommerce && ecommerce.enabled && (React.createElement(RepeatTiny, null,
                 React.createElement(ButtonPrimary, { disabled: !!ecommerce.reserved, fullWidth: true, onClick: toggleEcomModal },
@@ -57,6 +37,40 @@ const CheckList = ({ manufacturer, packageOptions, ecommerce, branch, contact, t
                     React.createElement(Content, null,
                         React.createElement("p", null, "Denna bil \u00E4r reserverad av en annan k\u00F6pare."))))),
             React.createElement(ActionList, { branch: branch, contact: contact })),
+        React.createElement(Repeat, null,
+            availableFrom && new Date(availableFrom).valueOf() > new Date().valueOf() && (React.createElement(RepeatTiny, null,
+                React.createElement(Columns, { "$spacing": 1, valign: "center" },
+                    React.createElement(Column, { noShrink: true },
+                        React.createElement(StateIndicator, { "$tone": "pending" })),
+                    React.createElement(Column, null,
+                        React.createElement(UtilityFontSizeSmall, null,
+                            "Tillg\u00E4nglig fr\u00E5n ",
+                            format(new Date(availableFrom), 'dd MMMM yyyy', { locale: sv })))))),
+            React.createElement(RepeatTiny, null,
+                React.createElement(CheckMarkList, null,
+                    packageOption?.title && (React.createElement(CheckMarkListItem, null,
+                        React.createElement(React.Fragment, null,
+                            "Inkl.",
+                            ' ',
+                            React.createElement(ButtonInline, { onClick: () => onOpen({
+                                    title: packageOption?.title,
+                                    image: packageOption?.image,
+                                    description: packageOption?.description,
+                                    link: packageOption?.link,
+                                }) }, packageOption.title),
+                            ' ',
+                            "begagnatgaranti"))),
+                    packageOptions?.map((packageOption, index) => (React.createElement(CheckMarkListItem, { key: packageOption.title || index },
+                        React.createElement(React.Fragment, null,
+                            "Inkl.",
+                            ' ',
+                            React.createElement(ButtonInline, { onClick: () => onOpen({
+                                    title: packageOption?.title,
+                                    image: packageOption?.image,
+                                    description: packageOption?.description,
+                                    link: packageOption?.link,
+                                }) }, packageOption.title))))),
+                    ecommerce?.withHomeDelivery && React.createElement(CheckMarkListItem, null, "Hemleverans")))),
         (branch?.connections.length || 0) > 1 && (React.createElement(Repeat, null,
             React.createElement(SwitchBar, { title: "Centrallagerbil", actionTitle: "Byt anl\u00E4ggning", onClick: openModalBranch },
                 React.createElement(Content, null,

package/dist-src/layouts/searchItem/DemoCarModal.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import Modal from '../../components/Modal/index';
+import Content from '../../components/Content/index';
+const DemoCarModal = ({ onClose }) => (React.createElement(Modal, { title: "Demobil", onClose: onClose },
+    React.createElement(Content, null,
+        React.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."))));
+export default DemoCarModal;

package/dist-src/layouts/searchItem/index.js

@@ -1,4 +1,4 @@
-import React, { useMemo, useRef, useCallback, useEffect } from 'react';
+import React, { useMemo, useRef, useCallback, useState, useEffect } from 'react';
 import WaykeEcomWeb from '@wayke-se/ecom-web';
 import Container from '../../components/Container/index';
 import UspList from '../../components/UspList/index';
@@ -31,6 +31,7 @@ import Page404 from './Page404';
 import PageLoading from './PageLoading';
 import PubSub from '../../utils/pubsub/pubsub';
 import Property from './Property';
+import DemoCarModal from './DemoCarModal';
 import PdfDownloadContainer from '../../components/Pdf/index';
 import useSettings from '../../State/Settings/useSettings';
 const WaykeSearchItem = ({ id, hashRoute, pathRoute, disableResetScrollOnInit, placeholderImage, modifyDocumentTitleItem, onClickSearchItem, }) => {
@@ -38,6 +39,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({
@@ -84,7 +87,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;
@@ -93,10 +96,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 });
     }
@@ -126,12 +135,12 @@ const WaykeSearchItem = ({ id, hashRoute, pathRoute, disableResetScrollOnInit, p
                                     React.createElement(RepeatSmall, null,
                                         React.createElement(UspList, { small: true, items: uspList })))),
                             React.createElement(ProductPageAsideSection, { mobileOrder: 2 },
-                                React.createElement(PriceTable, { price: price })),
+                                React.createElement(PriceTable, { price: price, discount: discount || undefined })),
                             (financialOptions.length > 0 || insuranceOptions.length > 0) && (React.createElement(ProductPageAsideSection, { mobileOrder: 4 },
                                 financialOptions.length > 0 && (React.createElement(FinancialOptions, { id: id, financialOptions: financialOptions })),
                                 insuranceOptions.length > 0 && (React.createElement(InsuranceOptions, { id: id, branch: centralStorageVehicle?.branch, insuranceOptions: insuranceOptions })))),
                             React.createElement(ProductPageAsideSection, { mobileOrder: 5 },
-                                React.createElement(CheckList, { manufacturer: manufacturer, packageOptions: packageOptions, ecommerce: ecommerce, branch: branch, contact: centralStorageVehicle?.contact, loadingCentralStorageVehicle: loadingCentralStorageVehicle, toggleEcomModal: () => ecomContext.current?.start() }))),
+                                React.createElement(CheckList, { manufacturer: manufacturer, packageOptions: packageOptions, ecommerce: ecommerce, branch: branch, contact: centralStorageVehicle?.contact, loadingCentralStorageVehicle: loadingCentralStorageVehicle, availableFrom: availableFrom, toggleEcomModal: () => ecomContext.current?.start() }))),
                         React.createElement(ProductPageMain, null,
                             React.createElement(ProductPageAsideSection, { mobileOrder: 3 },
                                 React.createElement(Gallery, { media: media, placeholderImage: placeholderImage })),
@@ -176,6 +185,7 @@ const WaykeSearchItem = ({ id, hashRoute, pathRoute, disableResetScrollOnInit, p
                 React.createElement("p", null,
                     "Priset \u00E4r ett cirkapris och baserat p\u00E5 ditt avtals antal m\u00E5nader och din ber\u00E4knade \u00E5rliga k\u00F6rstr\u00E4cka. Kostnad f\u00F6r f\u00F6rs\u00E4kring och serviceavtal tillkommer. Kontakta s\u00E4ljare f\u00F6r komplett kostnadsf\u00F6rslag.",
                     ' ')))),
-        React.createElement(PortalElement, { id: PortalNamespace.DefaultPortal })));
+        React.createElement(PortalElement, { id: PortalNamespace.DefaultPortal }),
+        demoCarModal && React.createElement(DemoCarModal, { onClose: onToggleDemoCarModal })));
 };
 export default WaykeSearchItem;

package/dist-src/queries/SEARCH_ITEM_QUERY.js

@@ -223,8 +223,13 @@ const SEARCH_ITEM_QUERY = gql `
         postalCode
       }
       price
+      discount
       shortDescription
       title
+      availableFrom
+      flags {
+        demoVersion
+      }
     }
   }
   ${HoursOpen}

package/dist-types/@types/codegen/types.d.ts

@@ -291,6 +291,7 @@ export declare type Service = {
 };
 export declare type Vehicle = {
     __typename?: 'Vehicle';
+    availableFrom?: Maybe<Scalars['DateTime']>;
     branch?: Maybe<Branch>;
     contact?: Maybe<ContactOptions>;
     data: VehicleData;
@@ -339,5 +340,6 @@ export declare type VehicleDataPropertySetArgs = {
 export declare type VehicleFlags = {
     __typename?: 'VehicleFlags';
     auction?: Maybe<Scalars['Boolean']>;
+    demoVersion?: Maybe<Scalars['Boolean']>;
     testDrive?: Maybe<Scalars['Boolean']>;
 };

package/dist-types/components/Columns/index.d.ts

@@ -0,0 +1,16 @@
+interface IColumn {
+    grow?: boolean;
+    noShrink?: boolean;
+}
+export declare const Column: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, IColumn, never>;
+interface IColumns {
+    $spacing?: number;
+    flexWrap?: boolean;
+    flexInline?: boolean;
+    valign?: 'start' | 'center' | 'end';
+    align?: 'start' | 'center' | 'end';
+    clearLtSm?: boolean;
+    clearLtMd?: boolean;
+}
+export declare const Columns: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, IColumns, never>;
+export {};

package/dist-types/components/PriceTable/index.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 interface PriceTableProps {
     price: number;
-    oldPrice?: number;
+    discount?: number;
 }
-declare const PriceTable: ({ price, oldPrice }: PriceTableProps) => JSX.Element;
+declare const PriceTable: ({ price, discount }: PriceTableProps) => JSX.Element;
 export default PriceTable;

package/dist-types/components/StateIndicator/index.d.ts

@@ -0,0 +1,5 @@
+interface StateIndicatorProps {
+    $tone?: 'success' | 'pending' | 'error';
+}
+export declare const StateIndicator: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, StateIndicatorProps, never>;
+export {};

package/dist-types/layout/theme.d.ts

@@ -17,6 +17,7 @@ declare const theme: {
             positiveLight: string;
             positive: string;
             neutralLight: string;
+            neutral: string;
             negativeLight: string;
             negative: string;
             infoLight: string;

package/dist-types/layouts/searchItem/CheckList.d.ts

@@ -7,7 +7,8 @@ interface CheckList {
     branch?: Branch | null;
     contact?: ContactOptions | null;
     loadingCentralStorageVehicle: boolean;
+    availableFrom?: Date | null;
     toggleEcomModal: () => void;
 }
-declare const CheckList: ({ manufacturer, packageOptions, ecommerce, branch, contact, toggleEcomModal, loadingCentralStorageVehicle, }: CheckList) => JSX.Element;
+declare const CheckList: ({ manufacturer, packageOptions, ecommerce, branch, contact, availableFrom, toggleEcomModal, loadingCentralStorageVehicle, }: CheckList) => JSX.Element;
 export default CheckList;

package/dist-types/layouts/searchItem/DemoCarModal.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+interface DemoCarModalProps {
+    onClose: () => void;
+}
+declare const DemoCarModal: ({ onClose }: DemoCarModalProps) => JSX.Element;
+export default DemoCarModal;