@wayke-se/components-react 2.13.0 → 2.16.0

package/dist-types/components/InsuranceOptions/InsuranceFreeModal.d.ts

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

package/dist-types/components/InsuranceOptions/InsuranceModal.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { InsuranceOption, Branch } from '../../@types/codegen/types';
+interface InsuranceModal {
+    id: string;
+    branch?: Branch | null;
+    onClose: () => void;
+    insuranceOptions: InsuranceOption;
+}
+declare const InsuranceModal: ({ id, branch, onClose, insuranceOptions }: InsuranceModal) => JSX.Element;
+export default InsuranceModal;

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

@@ -1,8 +1,9 @@
 /// <reference types="react" />
-import { InsuranceOption } from '../../@types/codegen/types';
+import { InsuranceOption, Branch } from '../../@types/codegen/types';
 interface InsuranceOptions {
     id: string;
+    branch?: Branch | null;
     insuranceOptions: InsuranceOption[];
 }
-declare const InsuranceOptions: ({ id, insuranceOptions }: InsuranceOptions) => JSX.Element | null;
+declare const InsuranceOptions: ({ id, branch, insuranceOptions }: InsuranceOptions) => JSX.Element | null;
 export default InsuranceOptions;

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { Scalars } from '../../@types/codegen/types';
+interface PdfDownloadItemProps {
+    document: Scalars['FileDocument'];
+}
+export declare const PdfDownloadItem: ({ document }: PdfDownloadItemProps) => JSX.Element;
+interface PdfDownloadContainerProps {
+    documents: Scalars['FileDocument'][];
+}
+export declare const PdfDownloadContainer: ({ documents }: PdfDownloadContainerProps) => JSX.Element;
+export default PdfDownloadContainer;

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

@@ -0,0 +1,11 @@
+export declare const PdfListItem: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, {
+    className: "wayke__theme wayke__color--primary-text";
+}, "className">;
+export declare const PdfContainer: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, {}, never>;
+export declare const PdfLink: import("styled-components").StyledComponent<"a", import("styled-components").DefaultTheme, {
+    className: "wayke__theme wayke__color--primary-text wayke__font--bold";
+}, "className">;
+export declare const PdfTitle: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const PdfSubtitle: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const PdfColumn: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const PdfListInner: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

package/dist-types/hooks/useInsurance.d.ts

@@ -1,4 +1,4 @@
 import { QueryResult } from '@apollo/client';
 import { DrivingDistance, QueryInsurancesArgs, Query } from '../@types/codegen/types';
-declare const useInsuranceCalculation: (id: string, personalNumber?: string | undefined, drivingDistance?: DrivingDistance | undefined) => QueryResult<Query, QueryInsurancesArgs>;
+declare const useInsuranceCalculation: (id: string, branchId?: string | undefined, personalNumber?: string | undefined, drivingDistance?: DrivingDistance | undefined) => QueryResult<Query, QueryInsurancesArgs>;
 export default useInsuranceCalculation;

package/dist-web/index.js

@@ -8,8 +8,8 @@ import LazyLoad from 'react-lazyload';
 import Slider$2 from 'react-slick';
 import scrollIntoView from 'scroll-into-view-if-needed';
 import { gql, useQuery, ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
-import EcomBase from '@wayke-se/ecom-react';
 import { marked } from 'marked';
+import EcomBase from '@wayke-se/ecom-react';
 import { parsePhoneNumberFromString } from 'libphonenumber-js/core';
 
 const _colors = {
@@ -2547,6 +2547,11 @@ const Wrapper$c = styled.div `
     }
   }
 
+  img {
+    display: block;
+    width: 100%;
+  }
+
   ${({ small }) => small &&
     css `
       font-size: 0.875rem;
@@ -4098,6 +4103,7 @@ const SEARCH_ITEM_QUERY = gql `
   query SearchItem($id: ID!) {
     vehicle(id: $id) {
       id
+      documents
       contact {
         name
         email
@@ -4237,10 +4243,17 @@ const SEARCH_ITEM_QUERY = gql `
         withHomeDelivery
       }
       insuranceOptions {
-        description
+        insuranceHeader
+        institute
+        identifier
         logotype
-        url
         name
+        description
+        longDescription
+        url
+        insuranceText
+        requiresPersonalNumber
+        requiresDistance
         terms
       }
       financialOptions {
@@ -5076,10 +5089,16 @@ const ColumnRowItem = styled.div `
 const INSURANCE_CALCULATION = 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
@@ -5107,13 +5126,14 @@ const INSURANCE_CALCULATION = gql `
   }
 `;
 
-const useInsuranceCalculation = (id, personalNumber, drivingDistance) => useQuery(INSURANCE_CALCULATION, {
+const useInsuranceCalculation = (id, branchId, personalNumber, drivingDistance) => 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);
@@ -5133,13 +5153,13 @@ var FinancialOptionInclusion;
     FinancialOptionInclusion["IncludesWintertires"] = "INCLUDES_WINTERTIRES";
 })(FinancialOptionInclusion || (FinancialOptionInclusion = {}));
 
-const InsuranceOptionModal = ({ id, onClose, insuranceOptions }) => {
+const InsuranceModal = ({ id, branch, onClose, insuranceOptions }) => {
     const [form, setForm] = useState({
         ssn: '',
         drivingDistance: DrivingDistance.Between0And1000,
     });
     const [payload, setPayload] = useState();
-    const { 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);
+    const { loading, data, error } = 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 = useCallback((e) => setForm({ ...form, ssn: e.currentTarget.value }), [form]);
     const onChangeDrivingDistance = useCallback((e) => setForm({ ...form, drivingDistance: e.currentTarget.value }), [form]);
     const onShowInsurances = useCallback(() => {
@@ -5213,14 +5233,14 @@ const InsuranceOptionModal = ({ id, onClose, insuranceOptions }) => {
                                     addon.unit)))))))))))))))));
 };
 
-const InsuranceOptions = ({ id, insuranceOptions }) => {
+const Insurance = ({ id, branch, insuranceOptions }) => {
     const [modal, setModal] = useState(false);
     const toggleModal = useCallback(() => setModal(!modal), [modal]);
     if (!insuranceOptions.length) {
         return null;
     }
     return (React__default.createElement(React__default.Fragment, null,
-        modal && (React__default.createElement(InsuranceOptionModal, { id: id, onClose: toggleModal, insuranceOptions: insuranceOptions[0] })),
+        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")),
@@ -5232,6 +5252,53 @@ const InsuranceOptions = ({ id, insuranceOptions }) => {
                             React__default.createElement(ButtonInline, { onClick: toggleModal }, "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(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] = useState(false);
+    const toggleModal = 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(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 = createContext({});
 
 const useSettings = () => useContext(SettingsContext);
@@ -6162,6 +6229,20 @@ const SEARCH_ITEM_BRANCH_QUERY = gql `
           title
         }
       }
+      insuranceOptions {
+        insuranceHeader
+        institute
+        identifier
+        logotype
+        name
+        description
+        longDescription
+        url
+        insuranceText
+        requiresPersonalNumber
+        requiresDistance
+        terms
+      }
     }
   }
   ${HoursOpen$1}
@@ -6828,7 +6909,7 @@ const MetadataItem = ({ name, hint, value, unit }) => {
     const onToggleFoldout = 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, { onClick: onToggleFoldout, title: `Mer information om ${name}` }, name)) : (name)),
+        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, { title: name, onClose: onToggleFoldout },
             React__default.createElement(Content$2, { dangerouslySetInnerHTML: { __html: hint } })))));
@@ -6946,6 +7027,69 @@ const PropertySet = ({ propertySet, vehicleData }) => {
             React__default.createElement(MetadataCategory, { properties: activeCategory.properties, subCategories: activeCategory.subCategories })))));
 };
 
+const PdfListItem = styled.li.attrs(() => ({
+    className: 'wayke__theme wayke__color--primary-text',
+})) `
+  flex: 0 0 50%;
+  padding: ${size(1)};
+
+  ${({ theme }) => theme.breakpoint.LtSm} {
+    flex: 0 0 100%;
+  }
+`;
+const PdfContainer = styled.ul `
+  list-style: none;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+  margin: ${size(-1)};
+`;
+const PdfLink = styled.a.attrs(() => ({
+    className: 'wayke__theme wayke__color--primary-text wayke__font--bold',
+})) `
+  text-decoration: none;
+  font-size: 0.875rem;
+  &:after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+`;
+const PdfTitle = styled.div `
+  color: ${(props) => props.theme.color.textDark};
+`;
+const PdfSubtitle = styled.div `
+  color: ${(props) => props.theme.color.textDarkLighten};
+`;
+const PdfColumn = styled.div `
+  flex 0 0 auto;
+  &:first-child {
+    flex: 1 1 auto;
+  }
+`;
+const PdfListInner = styled.div `
+  position: relative;
+  border: 1px solid ${(props) => props.theme.color.border};
+  padding: ${size(1.5)};
+  display: flex;
+  align-items: center;
+  :hover {
+    background-color: ${(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, pathRoute, disableResetScrollOnInit, placeholderImage, modifyDocumentTitleItem, onClickSearchItem, }) => {
     var _a, _b, _c;
     const [ecomModal, setEcomModal] = useState(false);
@@ -6976,7 +7120,10 @@ const WaykeSearchItem = ({ id, hashRoute, pathRoute, disableResetScrollOnInit, p
     const { vehicle } = result;
     const contact = centralStorageVehicle === null || centralStorageVehicle === void 0 ? void 0 : centralStorageVehicle.contact;
     const branch = centralStorageVehicle === null || centralStorageVehicle === void 0 ? void 0 : centralStorageVehicle.branch;
-    const { title, shortDescription, media, description, price, financialOptions, insuranceOptions, manufacturer, ecommerce, packageOptions, publishedAt, } = vehicle;
+    const { title, shortDescription, media, description, price, financialOptions, manufacturer, ecommerce, packageOptions, publishedAt, documents, } = vehicle;
+    const insuranceOptions = (centralStorageVehicle === null || centralStorageVehicle === void 0 ? void 0 : centralStorageVehicle.insuranceOptions)
+        ? centralStorageVehicle.insuranceOptions
+        : vehicle.insuranceOptions;
     const { fuelType, mileage, gearbox, modelYear, propertySet } = vehicle.data;
     const uspList = [
         {
@@ -7019,7 +7166,7 @@ const WaykeSearchItem = ({ id, hashRoute, pathRoute, disableResetScrollOnInit, p
                                 React__default.createElement(PriceTable, { price: price })),
                             (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, insuranceOptions: insuranceOptions })))),
+                                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 },
                                 React__default.createElement(CheckList, { manufacturer: manufacturer, packageOptions: packageOptions, ecommerce: ecommerce, branch: branch, contact: centralStorageVehicle === null || centralStorageVehicle === void 0 ? void 0 : centralStorageVehicle.contact, loadingCentralStorageVehicle: loadingCentralStorageVehicle, toggleEcomModal: toggleEcomModal }))),
                         React__default.createElement(ProductPageMain, null,
@@ -7046,6 +7193,14 @@ const WaykeSearchItem = ({ id, hashRoute, pathRoute, disableResetScrollOnInit, p
                                 React__default.createElement(Repeat, null,
                                     React__default.createElement(ExtendContent, { actionTitle: "Visa mer", onClick: onShowMoreOptionsClick },
                                         React__default.createElement(UspList, { items: options }))))),
+                            (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,