@wayke-se/components-react 2.15.0 → 2.16.0

package/dist-src/components/Content/wrapper.js

@@ -39,6 +39,11 @@ export const Wrapper = styled.div `
     }
   }
 
+  img {
+    display: block;
+    width: 100%;
+  }
+
   ${({ small }) => small &&
     css `
       font-size: 0.875rem;

package/dist-src/components/InsuranceOptions/Insurance.js

@@ -0,0 +1,26 @@
+import React, { useState, useCallback } from 'react';
+import { Repeat, RepeatTiny } from '../Repeat/index';
+import { VisualHeading } from '../Heading/index';
+import OptionBox from '../OptionBox/index';
+import { OptionBoxHeading, OptionBoxContent } from '../OptionBox/wrapper';
+import { ButtonInline } from '../Button/index';
+import InsuranceModal from './InsuranceModal';
+const Insurance = ({ id, branch, insuranceOptions }) => {
+    const [modal, setModal] = useState(false);
+    const toggleModal = useCallback(() => setModal(!modal), [modal]);
+    if (!insuranceOptions.length) {
+        return null;
+    }
+    return (React.createElement(React.Fragment, null,
+        modal && (React.createElement(InsuranceModal, { id: id, branch: branch, onClose: toggleModal, insuranceOptions: insuranceOptions[0] })),
+        React.createElement(Repeat, null,
+            React.createElement(RepeatTiny, null,
+                React.createElement(VisualHeading, null, "V\u00E4lj till f\u00F6rs\u00E4kring")),
+            React.createElement(RepeatTiny, null,
+                React.createElement(React.Fragment, null, insuranceOptions.map((insuranceOption, index) => (React.createElement(OptionBox, { key: `${insuranceOption.url}-${index}`, logo: insuranceOption.logotype || undefined, logoAlt: insuranceOption.name || 'Logotyp' },
+                    React.createElement(OptionBoxHeading, null, "F\u00E5 prisf\u00F6rslag"),
+                    React.createElement(OptionBoxContent, null,
+                        React.createElement("p", null,
+                            React.createElement(ButtonInline, { onClick: toggleModal }, "Mer information")))))))))));
+};
+export default Insurance;

package/dist-src/components/InsuranceOptions/InsuranceFree.js

@@ -0,0 +1,31 @@
+import React, { useState, useCallback } from 'react';
+import { Repeat, RepeatTiny } from '../Repeat/index';
+import { VisualHeading } from '../Heading/index';
+import OptionBox from '../OptionBox/index';
+import { OptionBoxContent } from '../OptionBox/wrapper';
+import Content from '../Content/index';
+import { marked } from 'marked';
+import { ButtonInline } from '../Button/index';
+import InsuranceFreeModal from './InsuranceFreeModal';
+const Insurance = ({ insuranceOptions }) => {
+    var _a, _b;
+    const [modal, setModal] = useState(false);
+    const toggleModal = useCallback(() => setModal(!modal), [modal]);
+    if (!insuranceOptions.length) {
+        return null;
+    }
+    return (React.createElement(React.Fragment, null,
+        modal && React.createElement(InsuranceFreeModal, { onClose: toggleModal, insuranceOptions: insuranceOptions[0] }),
+        React.createElement(Repeat, null,
+            React.createElement(RepeatTiny, null,
+                React.createElement(VisualHeading, null, (_b = (_a = insuranceOptions[0]) === null || _a === void 0 ? void 0 : _a.insuranceHeader) !== null && _b !== void 0 ? _b : 'Försäkring')),
+            React.createElement(RepeatTiny, null,
+                React.createElement(React.Fragment, null, insuranceOptions.map((insuranceOption, index) => (React.createElement(OptionBox, { key: `${insuranceOption.url}-${index}`, logo: insuranceOption.logotype || undefined, logoAlt: insuranceOption.name || 'Logotyp' },
+                    insuranceOption.description && (React.createElement(Content, { dangerouslySetInnerHTML: {
+                            __html: marked(insuranceOption.description),
+                        } })),
+                    React.createElement(OptionBoxContent, null,
+                        React.createElement("p", null,
+                            React.createElement(ButtonInline, { onClick: toggleModal }, "Mer information")))))))))));
+};
+export default Insurance;

package/dist-src/components/InsuranceOptions/InsuranceFreeModal.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import Modal from '../Modal/index';
+import Content from '../Content/index';
+import { Repeat } from '../Repeat/index';
+import { ButtonInline } from '../Button/index';
+import LogoBox from '../LogoBox/index';
+import { marked } from 'marked';
+const InsuranceFreeModal = ({ onClose, insuranceOptions }) => {
+    var _a;
+    return (React.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.createElement(Repeat, null,
+            React.createElement(Content, { dangerouslySetInnerHTML: {
+                    __html: marked(insuranceOptions.longDescription),
+                } }))),
+        (insuranceOptions === null || insuranceOptions === void 0 ? void 0 : insuranceOptions.url) && (React.createElement(Repeat, null,
+            React.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.createElement(Repeat, null,
+            React.createElement(LogoBox, { logo: insuranceOptions.logotype, alt: insuranceOptions.name || 'Logotyp', wide: true })))));
+};
+export default InsuranceFreeModal;

package/dist-src/components/InsuranceOptions/{InsuranceOptionModal.js → InsuranceModal.js}

@@ -22,13 +22,13 @@ import Loader from '../Loader/index';
 import { numberSeparator } from '../../utils/formats';
 import { DrivingDistance } from '../../@types/codegen/types';
 import PubSub from '../../utils/pubsub/pubsub';
-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(() => {
@@ -102,4 +102,4 @@ const InsuranceOptionModal = ({ id, onClose, insuranceOptions }) => {
                                     " ",
                                     addon.unit)))))))))))))))));
 };
-export default InsuranceOptionModal;
+export default InsuranceModal;

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

@@ -1,26 +1,15 @@
-import React, { useState, useCallback } from 'react';
-import { Repeat, RepeatTiny } from '../Repeat/index';
-import { VisualHeading } from '../Heading/index';
-import OptionBox from '../OptionBox/index';
-import { OptionBoxHeading, OptionBoxContent } from '../OptionBox/wrapper';
-import { ButtonInline } from '../Button/index';
-import InsuranceOptionModal from './InsuranceOptionModal';
-const InsuranceOptions = ({ id, insuranceOptions }) => {
-    const [modal, setModal] = useState(false);
-    const toggleModal = useCallback(() => setModal(!modal), [modal]);
+import React from 'react';
+import Insurance from './Insurance';
+import InsuranceFree from './InsuranceFree';
+const InsuranceOptions = ({ id, branch, insuranceOptions }) => {
     if (!insuranceOptions.length) {
         return null;
     }
-    return (React.createElement(React.Fragment, null,
-        modal && (React.createElement(InsuranceOptionModal, { id: id, onClose: toggleModal, insuranceOptions: insuranceOptions[0] })),
-        React.createElement(Repeat, null,
-            React.createElement(RepeatTiny, null,
-                React.createElement(VisualHeading, null, "V\u00E4lj till f\u00F6rs\u00E4kring")),
-            React.createElement(RepeatTiny, null,
-                React.createElement(React.Fragment, null, insuranceOptions.map((insuranceOption, index) => (React.createElement(OptionBox, { key: `${insuranceOption.url}-${index}`, logo: insuranceOption.logotype || undefined, logoAlt: insuranceOption.name || 'Logotyp' },
-                    React.createElement(OptionBoxHeading, null, "F\u00E5 prisf\u00F6rslag"),
-                    React.createElement(OptionBoxContent, null,
-                        React.createElement("p", null,
-                            React.createElement(ButtonInline, { onClick: toggleModal }, "Mer information")))))))))));
+    if (insuranceOptions.length > 0) {
+        if (insuranceOptions[0].requiresDistance && insuranceOptions[0].requiresPersonalNumber)
+            return React.createElement(Insurance, { id: id, branch: branch, insuranceOptions: insuranceOptions });
+        return React.createElement(InsuranceFree, { insuranceOptions: insuranceOptions });
+    }
+    return null;
 };
 export default InsuranceOptions;

package/dist-src/hooks/useInsurance.js

@@ -1,11 +1,12 @@
 import { useQuery } from '@apollo/client';
 import INSURANCE_CALCULATION from '../queries/INSURANCE_CALCULATION';
-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,
 });
 export default useInsuranceCalculation;

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

@@ -62,7 +62,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, documents, } = 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 = [
         {
@@ -105,7 +108,7 @@ const WaykeSearchItem = ({ id, hashRoute, pathRoute, disableResetScrollOnInit, p
                                 React.createElement(PriceTable, { price: price })),
                             (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, insuranceOptions: insuranceOptions })))),
+                                insuranceOptions.length > 0 && (React.createElement(InsuranceOptions, { id: id, branch: centralStorageVehicle === null || centralStorageVehicle === void 0 ? void 0 : centralStorageVehicle.branch, insuranceOptions: insuranceOptions })))),
                             React.createElement(ProductPageAsideSection, { mobileOrder: 5 },
                                 React.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.createElement(ProductPageMain, null,

package/dist-src/queries/INSURANCE_CALCULATION.js

@@ -2,10 +2,16 @@ import { gql } from '@apollo/client';
 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

package/dist-src/queries/SEARCH_ITEM_BRANCH_QUERY.js

@@ -96,6 +96,20 @@ const SEARCH_ITEM_BRANCH_QUERY = gql `
           title
         }
       }
+      insuranceOptions {
+        insuranceHeader
+        institute
+        identifier
+        logotype
+        name
+        description
+        longDescription
+        url
+        insuranceText
+        requiresPersonalNumber
+        requiresDistance
+        terms
+      }
     }
   }
   ${HoursOpen}

package/dist-src/queries/SEARCH_ITEM_QUERY.js

@@ -158,10 +158,17 @@ const SEARCH_ITEM_QUERY = gql `
         withHomeDelivery
       }
       insuranceOptions {
-        description
+        insuranceHeader
+        institute
+        identifier
         logotype
-        url
         name
+        description
+        longDescription
+        url
+        insuranceText
+        requiresPersonalNumber
+        requiresDistance
         terms
       }
       financialOptions {

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

@@ -161,8 +161,16 @@ export declare type InsuranceLegality = {
 export declare type InsuranceOption = {
     __typename?: 'InsuranceOption';
     description?: Maybe<Scalars['String']>;
+    identifier?: Maybe<Scalars['String']>;
+    institute?: Maybe<Scalars['String']>;
+    insuranceHeader?: Maybe<Scalars['String']>;
+    insuranceText?: Maybe<Scalars['String']>;
     logotype?: Maybe<Scalars['URL']>;
+    longDescription?: Maybe<Scalars['String']>;
     name?: Maybe<Scalars['String']>;
+    requiresDistance?: Maybe<Scalars['Boolean']>;
+    requiresPersonalNumber?: Maybe<Scalars['Boolean']>;
+    /** @deprecated No longer supported */
     terms?: Maybe<Scalars['URL']>;
     url?: Maybe<Scalars['URL']>;
 };
@@ -253,6 +261,7 @@ export declare type QueryBranchArgs = {
     id: Scalars['ID'];
 };
 export declare type QueryInsurancesArgs = {
+    branch?: InputMaybe<Scalars['ID']>;
     drivingDistance: DrivingDistance;
     id: Scalars['ID'];
     personalNumber: Scalars['PersonalNumber'];

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

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

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

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

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/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;
@@ -4238,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 {
@@ -5077,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
@@ -5108,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);
@@ -5134,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(() => {
@@ -5214,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")),
@@ -5233,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);
@@ -6163,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}
@@ -7040,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, documents, } = 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 = [
         {
@@ -7083,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,