@wayke-se/components-react 3.5.3 → 3.6.0

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

@@ -0,0 +1,32 @@
+import React, { useState } from 'react';
+import { numberSeparator } from '../../../utils/formats';
+import { ProductPageMainSection } from '../../../components/ProductPage/index';
+import { Repeat } from '../../../components/Repeat/index';
+import { H2 } from '../../../components/Heading/index';
+import Content from '../../../components/Content/index';
+import AccessoryCard from '../../../components/AccessoryCard/index';
+import OverflowGrid from '../../../components/OverflowGrid/index';
+import AccesoryModal from './AccessoryModal';
+const AccessoriesSection = ({ accessories }) => {
+    const [modal, setModal] = useState();
+    const onOpenModal = (accessory) => setModal(accessory);
+    const onCloseModal = () => setModal(undefined);
+    if (!accessories?.length)
+        return null;
+    return (React.createElement(React.Fragment, null,
+        modal && React.createElement(AccesoryModal, { accessory: modal, onClose: onCloseModal }),
+        React.createElement(ProductPageMainSection, null,
+            React.createElement(Repeat, null,
+                React.createElement(H2, { noMargin: true }, "Tillbeh\u00F6r")),
+            React.createElement(Repeat, null,
+                React.createElement(Content, null,
+                    React.createElement("p", null, "Tillbeh\u00F6r som passar till detta fordon."))),
+            React.createElement(Repeat, null,
+                React.createElement(OverflowGrid, { columns: 1.05, columnsSm: 2.1, columnsMd: 2, spacing: 2, items: accessories.map((accessory) => (React.createElement(AccessoryCard, { key: accessory.id, title: accessory.name, image: accessory.images?.[0]
+                            ? {
+                                src: `${accessory.images?.[0]}?w=539&h=303`,
+                                alt: accessory.name,
+                            }
+                            : undefined, price: `${numberSeparator(accessory.price)} kr`, preamble: accessory.excerpt, readMoreCta: () => onOpenModal(accessory) }))) })))));
+};
+export default AccessoriesSection;

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

@@ -3,7 +3,7 @@ import Container from '../../components/Container/index';
 import { Repeat } from '../../components/Repeat/index';
 import { PageSection } from '../../components/Page/index';
 import SectionHeader from '../../components/SectionHeader/index';
-import { OverflowGridList, OverflowGrid, OverflowGridItem, } from '../../components/OverflowGrid/index';
+import OverflowGrid from '../../components/OverflowGrid/index';
 import ProductCard from '../../components/ProductCard/index';
 import { H2 } from '../../components/Heading/index';
 import useRelatedSearch from '../../State/RelatedSearch/useRelatedSearch';
@@ -33,8 +33,7 @@ const Related = ({ id, hashRoute, pathRoute, authorizedReseller, displayBranchNa
                 React.createElement(SectionHeader, { onClick: () => { }, actionTitle: "Visa alla" },
                     React.createElement(H2, { noMargin: true }, "Senast inkomna")))),
             React.createElement(Repeat, null,
-                React.createElement(OverflowGrid, null,
-                    React.createElement(OverflowGridList, null, response?.documentList.documents.map((document) => {
+                React.createElement(OverflowGrid, { accentBg: true, columns: 1.05, columnsSm: 2.1, columnsMd: 3, spacing: 2, items: response?.documentList.documents.map((document) => {
                         const prefix = pathRoute ? `/${pathRoute}` : '/';
                         const r = regexPathGuid();
                         const pathRouteUrl = window.location.pathname === '/'
@@ -42,27 +41,26 @@ const Related = ({ id, hashRoute, pathRoute, authorizedReseller, displayBranchNa
                             : r.test(`${pathRoute}${id}`)
                                 ? window.location.pathname.replace(r, document._id)
                                 : `${window.location.pathname}${prefix}${document._id}`;
-                        return (React.createElement(OverflowGridItem, { key: document._id },
-                            React.createElement(ProductCard, { id: document._id, onClick: onItemClicked, title: document.title, href: pathRoute ? pathRouteUrl : hashRoute ? `#${document._id}` : undefined, image: document.featuredImage?.files?.[0]?.url, description: document.shortDescription, branchName: displayBranchName ? document.branches?.[0]?.name : undefined, uspList: [
-                                    {
-                                        title: document.modelYear,
-                                    },
-                                    {
-                                        title: `${numberSeparator(document.mileage)} mil`,
-                                    },
-                                    {
-                                        title: document.gearboxType,
-                                    },
-                                    {
-                                        title: document.fuelType,
-                                    },
-                                ], price: `${numberSeparator(document.price)} kr`, oldPrice: document.oldPrice !== undefined && document.price < document.oldPrice
-                                    ? `${numberSeparator(document.oldPrice)} kr`
-                                    : undefined, leasingPrice: document.leasingPrice !== undefined
-                                    ? `${numberSeparator(document.leasingPrice)} kr/mån`
-                                    : undefined, businessLeasingPrice: document.businessLeasingPrice !== undefined
-                                    ? `${numberSeparator(document.businessLeasingPrice)} kr/mån`
-                                    : undefined, pathRoute: pathRoute })));
-                    })))))));
+                        return (React.createElement(ProductCard, { key: document._id, id: document._id, onClick: onItemClicked, title: document.title, href: pathRoute ? pathRouteUrl : hashRoute ? `#${document._id}` : undefined, image: document.featuredImage?.files?.[0]?.url, description: document.shortDescription, branchName: displayBranchName ? document.branches?.[0]?.name : undefined, uspList: [
+                                {
+                                    title: document.modelYear,
+                                },
+                                {
+                                    title: `${numberSeparator(document.mileage)} mil`,
+                                },
+                                {
+                                    title: document.gearboxType,
+                                },
+                                {
+                                    title: document.fuelType,
+                                },
+                            ], price: `${numberSeparator(document.price)} kr`, oldPrice: document.oldPrice !== undefined && document.price < document.oldPrice
+                                ? `${numberSeparator(document.oldPrice)} kr`
+                                : undefined, leasingPrice: document.leasingPrice !== undefined
+                                ? `${numberSeparator(document.leasingPrice)} kr/mån`
+                                : undefined, businessLeasingPrice: document.businessLeasingPrice !== undefined
+                                ? `${numberSeparator(document.businessLeasingPrice)} kr/mån`
+                                : undefined, pathRoute: pathRoute }));
+                    }) })))));
 };
 export default Related;

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

@@ -33,6 +33,7 @@ import Property from './Property';
 import DemoCarModal from './DemoCarModal';
 import useSettings from '../../State/Settings/useSettings';
 import Documents from './Documents';
+import AccessoriesSection from './Accessories/index';
 const WaykeSearchItem = ({ id, hashRoute, pathRoute, disableResetScrollOnInit, placeholderImage, modifyDocumentTitleItem, displayBranchName, onClickSearchItem, }) => {
     const { ecomSettings } = useSettings();
     const ecomContext = useRef();
@@ -86,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, discount, financialOptions, manufacturer, ecommerce, packageOptions, publishedAt, documents, availableFrom, flags, } = vehicle;
+    const { title, accessories, shortDescription, media, description, price, discount, financialOptions, manufacturer, ecommerce, packageOptions, publishedAt, documents, availableFrom, flags, } = vehicle;
     const insuranceOptions = centralStorageVehicle?.insuranceOptions
         ? centralStorageVehicle.insuranceOptions
         : vehicle.insuranceOptions;
@@ -169,6 +170,7 @@ const WaykeSearchItem = ({ id, hashRoute, pathRoute, disableResetScrollOnInit, p
                                 React.createElement(Branch, { branch: branch, displayBranchName: displayBranchName, loading: loadingCentralStorageVehicle }),
                                 ecommerce && ecommerce.enabled && (React.createElement(Repeat, null,
                                     React.createElement(ButtonPrimary, { disabled: !!ecommerce.reserved, title: "K\u00F6p bilen online", onClick: () => ecomContext.current?.start() }, "K\u00F6p bilen online")))),
+                            React.createElement(AccessoriesSection, { accessories: accessories }),
                             React.createElement(PackageOptions, { packageOptions: packageOptions }),
                             React.createElement(ManufacturerPackageOption, { packageOption: manufacturer?.packageOption }))))),
             React.createElement(Related, { id: id, hashRoute: hashRoute, pathRoute: pathRoute, authorizedReseller: !!branch?.flags?.authorizedReseller, displayBranchName: displayBranchName, onClickSearchItem: onClickSearchItem })),

package/dist-src/queries/SEARCH_ITEM_BRANCH_QUERY.js

@@ -14,6 +14,24 @@ const SEARCH_ITEM_BRANCH_QUERY = gql `
         phonenumber
         avatar
       }
+      accessories {
+        articleNumber
+        description
+        excerpt
+        id
+        images
+        logotype
+        manufacturer
+        model
+        name
+        price
+        assemblyPrice
+        productPage {
+          title
+          url
+        }
+        salePrice
+      }
       branch {
         connections {
           id

package/dist-src/queries/SEARCH_ITEM_QUERY.js

@@ -25,6 +25,24 @@ const SEARCH_ITEM_QUERY = gql `
         phonenumber
         avatar
       }
+      accessories {
+        articleNumber
+        description
+        excerpt
+        id
+        images
+        logotype
+        manufacturer
+        model
+        name
+        price
+        assemblyPrice
+        productPage {
+          title
+          url
+        }
+        salePrice
+      }
       manufacturer {
         description
         logotype

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

@@ -36,6 +36,22 @@ export type Scalars = {
     };
     VehicleDataPropertySet: any;
 };
+export type Accessory = {
+    __typename?: 'Accessory';
+    articleNumber?: Maybe<Scalars['String']>;
+    assemblyPrice?: Maybe<Scalars['Float']>;
+    description: Scalars['String'];
+    excerpt: Scalars['String'];
+    id: Scalars['ID'];
+    images: Array<Scalars['String']>;
+    logotype?: Maybe<Scalars['String']>;
+    manufacturer?: Maybe<Scalars['String']>;
+    model?: Maybe<Scalars['String']>;
+    name: Scalars['String'];
+    price: Scalars['Float'];
+    productPage?: Maybe<Link>;
+    salePrice?: Maybe<Scalars['Float']>;
+};
 export type Branch = {
     __typename?: 'Branch';
     connections: Array<BranchConnection>;
@@ -294,6 +310,7 @@ export type Service = {
 };
 export type Vehicle = {
     __typename?: 'Vehicle';
+    accessories: Array<Accessory>;
     availableFrom?: Maybe<Scalars['DateTime']>;
     branch?: Maybe<Branch>;
     contact?: Maybe<ContactOptions>;

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

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+interface AccessoryCardImageProps {
+    src: string;
+    srcSet?: string;
+    alt: string;
+}
+interface AccessoryCardProps {
+    title: string;
+    image?: AccessoryCardImageProps;
+    branding?: AccessoryCardImageProps;
+    price?: string;
+    preamble?: string;
+    readMoreCta?: () => void;
+}
+declare const AccessoryCard: ({ title, image, branding, price, preamble, readMoreCta, }: AccessoryCardProps) => JSX.Element;
+export default AccessoryCard;

package/dist-types/components/AccessoryCard/wrapper.d.ts

@@ -0,0 +1,18 @@
+export declare const Wrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const Image: import("styled-components").StyledComponent<"img", import("styled-components").DefaultTheme, {}, never>;
+export declare const ImageaPlaceholder: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const Body: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const Heading: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const Title: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    className: "wayke__theme wayke__font--bold";
+}, "className">;
+export declare const Branding: import("styled-components").StyledComponent<"img", import("styled-components").DefaultTheme, {}, never>;
+export declare const Price: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    className: "wayke__theme wayke__font--bold";
+}, "className">;
+export declare const Preamble: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const ReadMoreBtn: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {
+    type: "button";
+} & {
+    className: "wayke__theme wayke__font--bold wayke__color--primary-text";
+}, "type" | "className">;

package/dist-types/components/Gallery/wrapper.d.ts

@@ -6,12 +6,8 @@ export declare const Item: import("styled-components").StyledComponent<"div", im
 export declare const SliderWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const Image: import("styled-components").StyledComponent<"img", import("styled-components").DefaultTheme, {}, never>;
 export declare const ImageFull: import("styled-components").StyledComponent<"img", import("styled-components").DefaultTheme, {}, never>;
-export declare const ArrowLeft: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {
-    type: "button";
-}, "type">;
-export declare const ArrowRight: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {
-    type: "button";
-}, "type">;
+export declare const ArrowLeft: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const ArrowRight: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const QuickNav: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, {}, never>;
 export declare const QuickNavItem: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, {
     className: "wayke__theme wayke__color--primary-text";

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

@@ -13,4 +13,5 @@ export declare const IconRadio: ({ block }: IconInfoProps) => JSX.Element;
 export declare const IconSearch: ({ block }: IconInfoProps) => JSX.Element;
 export declare const IconExclamationCircle: ({ block }: IconInfoProps) => JSX.Element;
 export declare const IconExclamationTriangle: ({ block }: IconInfoProps) => JSX.Element;
+export declare const IconImage: ({ block }: IconInfoProps) => JSX.Element;
 export {};

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

@@ -0,0 +1 @@
+export declare const Image: import("styled-components").StyledComponent<"img", import("styled-components").DefaultTheme, {}, never>;

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

@@ -0,0 +1,7 @@
+interface LinkProps {
+    $hoverGhost?: boolean;
+}
+export declare const Link: import("styled-components").StyledComponent<"a", import("styled-components").DefaultTheme, {
+    className: "wayke__theme wayke__color--primary-text";
+} & LinkProps, "className">;
+export {};

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

@@ -0,0 +1,3 @@
+export declare const NavButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {
+    type: "button";
+}, "type">;

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

@@ -1,3 +1,12 @@
-export declare const OverflowGrid: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const OverflowGridList: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, {}, never>;
-export declare const OverflowGridItem: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, {}, never>;
+import React from 'react';
+export interface IOverflowGrid {
+    items: React.ReactNode[];
+    itemKeyBase?: string;
+    spacing?: number;
+    columns?: number;
+    columnsSm?: number;
+    columnsMd?: number;
+    accentBg?: boolean;
+}
+declare const OverflowGrid: ({ items, itemKeyBase, spacing, columns, columnsSm, columnsMd, accentBg, }: IOverflowGrid) => JSX.Element;
+export default OverflowGrid;

package/dist-types/components/OverflowGrid/wrapper.d.ts

@@ -0,0 +1,18 @@
+interface WrapperProps {
+    $accentBg?: boolean;
+}
+export declare const Wrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, WrapperProps, never>;
+export declare const Item: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, {}, never>;
+interface ListProps {
+    $columns?: number;
+    $columnsSm?: number;
+    $columnsMd?: number;
+}
+export declare const List: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, ListProps, never>;
+interface ListWrapperProps {
+    $spacing?: number;
+}
+export declare const ListWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, ListWrapperProps, never>;
+export declare const PrevBtn: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const NextBtn: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export {};

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+interface PriceBoxItemProps {
+    label: string;
+    price: string;
+    oldPrice?: boolean;
+}
+interface PriceBoxProps {
+    prices: PriceBoxItemProps[];
+}
+declare const PriceBox: ({ prices }: PriceBoxProps) => JSX.Element;
+export default PriceBox;

package/dist-types/components/PriceBox/wrapper.d.ts

@@ -0,0 +1,10 @@
+export declare const Wrapper: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, {}, never>;
+interface RowProps {
+    $oldPrice?: boolean;
+}
+export declare const Row: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, RowProps, never>;
+export declare const Label: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const Price: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    className: "wayke__theme wayke__font--bold";
+}, "className">;
+export {};

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

@@ -31,6 +31,14 @@ declare const theme: {
         Lg: string;
         LtLg: string;
     };
+    mask: {
+        gradient: {
+            toTop: string;
+            toBottom: string;
+            toLeft: string;
+            toRight: string;
+        };
+    };
     distances: {
         baseUnit: string;
         inputHeight: string;

package/dist-types/layouts/searchItem/Accessories/AccessoryModal.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { Accessory } from '../../../@types/codegen/types';
+interface AccesoryModalProps {
+    accessory: Accessory;
+    onClose: () => void;
+}
+declare const AccesoryModal: ({ accessory, onClose }: AccesoryModalProps) => JSX.Element;
+export default AccesoryModal;

package/dist-types/layouts/searchItem/Accessories/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { Accessory } from '../../../@types/codegen/types';
+interface AccessoriesSectionProps {
+    accessories?: Accessory[];
+}
+declare const AccessoriesSection: ({ accessories }: AccessoriesSectionProps) => JSX.Element | null;
+export default AccessoriesSection;