@wayke-se/components-react 3.0.0-beta.1 → 3.0.0-beta.11

package/src/layouts/searchItem/ManufacturerPackagesOption.tsx

@@ -7,7 +7,7 @@ import Content from '../../components/Content/index';
 import { H2 } from '../../components/Heading/index';
 import { ButtonInline } from '../../components/Button/index';
 import LogoBox from '../../components/LogoBox/index';
-import { Maybe, PackageOption } from '../../@types/codegen';
+import { Maybe, PackageOption } from '../../@types/codegen/types';
 
 interface ManufacturerPackageOption {
   packageOption?: Maybe<PackageOption>;

package/src/layouts/searchItem/PackageOptions.tsx

@@ -7,7 +7,7 @@ import Content from '../../components/Content/index';
 import { H2 } from '../../components/Heading/index';
 import { ButtonInline } from '../../components/Button/index';
 import LogoBox from '../../components/LogoBox/index';
-import { PackageOption } from '../../@types/codegen';
+import { PackageOption } from '../../@types/codegen/types';
 
 interface PackageOptionsProps {
   packageOptions?: PackageOption[] | null;

package/src/layouts/searchItem/Property.tsx

@@ -11,7 +11,7 @@ import { H5 } from '../../components/Heading/index';
 import { Repeat } from '../../components/Repeat/index';
 import { TableList } from '../../components/TableList/index';
 import Tabs from '../../components/Tabs/index';
-import { VehicleData } from '../../@types/codegen';
+import { VehicleData } from '../../@types/codegen/types';
 
 interface MetadataSubCategoryProps {
   name: string;

package/src/layouts/searchItem/index.tsx

@@ -1,6 +1,5 @@
 import React, { useMemo, useRef, useCallback, useEffect } from 'react';
 import WaykeEcomWeb from '@wayke-se/ecom-web';
-// import '@wayke-se/ecom-web/dist/index.css';
 
 import Container from '../../components/Container/index';
 import UspList from '../../components/UspList/index';
@@ -29,7 +28,6 @@ import { PortalNamespace, PortalElement } from '../../components/Portal/index';
 import Modal from '../../components/Modal/index';
 import FinancialOptions from '../../components/FinancialOptions/index';
 import InsuranceOptions from '../../components/InsuranceOptions/index';
-// import Ecom from '../../components/Ecom/index';
 import ManufacturerPackageOption from './ManufacturerPackagesOption';
 import CheckList from './CheckList';
 import Related from './Related';
@@ -64,7 +62,6 @@ const WaykeSearchItem = ({
 }: WaykeSearchItemProps) => {
   const { ecomSettings } = useSettings();
   const ecomContext = useRef<WaykeEcomWeb | undefined>();
-
   const { loading, data: result } = useSearchItem(id);
   const { vehicle: centralStorageVehicle, loading: loadingCentralStorageVehicle } =
     useCentralStorage(result?.vehicle);
@@ -80,6 +77,7 @@ const WaykeSearchItem = ({
           bankIdThumbprint: ecomSettings?.bankIdThumbprint,
         },
         logo: ecomSettings.serviceLogotypeUrl,
+        logoX2: ecomSettings.serviceLogotypeUrl,
         onEvent(view, event, currentStep?, data?) {
           PubSub.publish('EcomOnUserEvent', view, event, currentStep, data);
         },

package/src/providers/WaykeItemProvidet.tsx

@@ -4,7 +4,6 @@ import GraphqlProvider from './graphqlProvider';
 import Theme from './themeProvider';
 import Root from '../components/Root/index';
 
-import useEcom from '../hooks/useEcom';
 import SettingsProvider from '../State/Settings/SettingsProvider';
 import RelatedSearchProvider from '../State/RelatedSearch/RelatedSearchProvider';
 import CentralStorageProvider from '../State/CentralStorage/CentralStorageProvider';
@@ -41,28 +40,24 @@ const WaykeItemProvider = ({
   googleMapsApiKey,
   googleMapsMarker,
   children,
-}: WaykeItemProviderProps) => {
-  useEcom(ecomSettings);
-
-  return (
-    <PathProvider>
-      <SettingsProvider
-        googleMapsApiKey={googleMapsApiKey}
-        googleMapsMarker={googleMapsMarker}
-        ecomSettings={ecomSettings}
-      >
-        <CentralStorageProvider>
-          <GraphqlProvider uri={graphQlUrl}>
-            <RelatedSearchProvider url={url} urlMlt={urlMlt} apiKey={apiKey}>
-              <Theme>
-                <Root>{children}</Root>
-              </Theme>
-            </RelatedSearchProvider>
-          </GraphqlProvider>
-        </CentralStorageProvider>
-      </SettingsProvider>
-    </PathProvider>
-  );
-};
+}: WaykeItemProviderProps) => (
+  <PathProvider>
+    <SettingsProvider
+      googleMapsApiKey={googleMapsApiKey}
+      googleMapsMarker={googleMapsMarker}
+      ecomSettings={ecomSettings}
+    >
+      <CentralStorageProvider>
+        <GraphqlProvider uri={graphQlUrl}>
+          <RelatedSearchProvider url={url} urlMlt={urlMlt} apiKey={apiKey}>
+            <Theme>
+              <Root>{children}</Root>
+            </Theme>
+          </RelatedSearchProvider>
+        </GraphqlProvider>
+      </CentralStorageProvider>
+    </SettingsProvider>
+  </PathProvider>
+);
 
 export default WaykeItemProvider;

package/src/providers/WaykeProvider.tsx

@@ -5,7 +5,6 @@ import Theme from './themeProvider';
 import SearchProvider from '../State/Search/SearchProvider';
 import Root from '../components/Root/index';
 
-import useEcom from '../hooks/useEcom';
 import SettingsProvider from '../State/Settings/SettingsProvider';
 import RelatedSearchProvider from '../State/RelatedSearch/RelatedSearchProvider';
 import CentralStorageProvider from '../State/CentralStorage/CentralStorageProvider';
@@ -46,35 +45,31 @@ const WaykeProvider = ({
   useQueryParamsFromUrl,
   pathRoute,
   children,
-}: WaykeProviderProps) => {
-  useEcom(ecomSettings);
-
-  return (
-    <PathProvider>
-      <SettingsProvider
-        googleMapsApiKey={googleMapsApiKey}
-        googleMapsMarker={googleMapsMarker}
-        ecomSettings={ecomSettings}
-      >
-        <CentralStorageProvider>
-          <GraphqlProvider uri={graphQlUrl}>
-            <SearchProvider
-              url={url}
-              apiKey={apiKey}
-              useQueryParamsFromUrl={useQueryParamsFromUrl}
-              pathRoute={pathRoute}
-            >
-              <RelatedSearchProvider url={url} urlMlt={urlMlt} apiKey={apiKey}>
-                <Theme>
-                  <Root>{children}</Root>
-                </Theme>
-              </RelatedSearchProvider>
-            </SearchProvider>
-          </GraphqlProvider>
-        </CentralStorageProvider>
-      </SettingsProvider>
-    </PathProvider>
-  );
-};
+}: WaykeProviderProps) => (
+  <PathProvider>
+    <SettingsProvider
+      googleMapsApiKey={googleMapsApiKey}
+      googleMapsMarker={googleMapsMarker}
+      ecomSettings={ecomSettings}
+    >
+      <CentralStorageProvider>
+        <GraphqlProvider uri={graphQlUrl}>
+          <SearchProvider
+            url={url}
+            apiKey={apiKey}
+            useQueryParamsFromUrl={useQueryParamsFromUrl}
+            pathRoute={pathRoute}
+          >
+            <RelatedSearchProvider url={url} urlMlt={urlMlt} apiKey={apiKey}>
+              <Theme>
+                <Root>{children}</Root>
+              </Theme>
+            </RelatedSearchProvider>
+          </SearchProvider>
+        </GraphqlProvider>
+      </CentralStorageProvider>
+    </SettingsProvider>
+  </PathProvider>
+);
 
 export default WaykeProvider;

package/src/utils/pubsub/Events.ts

@@ -15,11 +15,19 @@ export interface EventItemClicked extends EventBase<CallbackEventItemClicked> {
   eventName: 'ItemClicked';
 }
 
+export interface EventEcomOnInit extends EventBase<CallbackEmpty> {
+  eventName: 'EcomOnInit';
+}
+
 export type CallbackEcomOnUserEvent = (userEvent: string, currentStep: string) => void;
 export interface EventEcomOnUser extends EventBase<CallbackEcomOnUserEvent> {
   eventName: 'EcomOnUserEvent';
 }
 
+export interface EventEcomOnExit extends EventBase<CallbackEmpty> {
+  eventName: 'EcomOnExit';
+}
+
 export interface EventImagesClick extends EventBase<CallbackEmpty> {
   eventName: 'ImagesClick';
 }
@@ -56,7 +64,9 @@ export interface EventAll extends EventBase<CallbackAll> {
 export type EventType =
   | EventHashRouteChange
   | EventItemClicked
+  | EventEcomOnInit
   | EventEcomOnUser
+  | EventEcomOnExit
   | EventImagesClick
   | EventOptionsClick
   | EventPhonenumberVisible

package/src/utils/pubsub/pubsub.ts

@@ -8,7 +8,9 @@ import {
 import {
   EventHashRouteChange,
   EventItemClicked,
+  EventEcomOnInit,
   EventEcomOnUser,
+  EventEcomOnExit,
   EventImagesClick,
   EventOptionsClick,
   EventPhonenumberVisible,
@@ -28,7 +30,9 @@ import {
 export type EventSubscriptions = {
   HashRouteChange: EventHashRouteChange[];
   ItemClicked: EventItemClicked[];
+  EcomOnInit: EventEcomOnInit[];
   EcomOnUserEvent: EventEcomOnUser[];
+  EcomOnExit: EventEcomOnExit[];
   ImagesClick: EventImagesClick[];
   OptionsClick: EventOptionsClick[];
   PhonenumberVisible: EventPhonenumberVisible[];
@@ -48,7 +52,9 @@ class PubSub {
   private static events: EventSubscriptions = {
     HashRouteChange: [],
     ItemClicked: [],
+    EcomOnInit: [],
     EcomOnUserEvent: [],
+    EcomOnExit: [],
     ImagesClick: [],
     OptionsClick: [],
     PhonenumberVisible: [],
@@ -124,6 +130,8 @@ class PubSub {
           case 'EcomOnUserEvent':
             (event.callback as CallbackEcomOnUserEvent)(args[0], args[1]);
             break;
+          case 'EcomOnInit':
+          case 'EcomOnExit':
           case 'ImagesClick':
           case 'OptionsClick':
           case 'PhonenumberVisible':

package/src/utils/specification.ts

@@ -1,5 +1,5 @@
 import { notEmpty, dateTimeFormat, numberSeparator } from './formats';
-import { VehicleData } from '../@types/codegen';
+import { VehicleData } from '../@types/codegen/types';
 
 export interface ItemPropertModalType {
   title: string;

package/src/utils/vehicle-properties/custom-property-adder.ts

@@ -1,4 +1,4 @@
-import { VehicleData } from '../../@types/codegen';
+import { VehicleData } from '../../@types/codegen/types';
 import { EnhancedProperty, ItemCategory } from '../../@types/vehicle-properties';
 import deepCopy from '../deep-copy';
 

package/tsconfig.build.json

@@ -5,6 +5,6 @@
   ],
   "exclude": [
     "node_modules",
-    ".eslintrc.js",
+    "example"
   ]
 }

package/tsconfig.eslint.json

@@ -0,0 +1,11 @@
+{
+  "extends": "./tsconfig.json",
+  "include": [
+    "src/**/*",
+    "example/src/**/*",
+    ".eslintrc.js",
+    "babel.config.js",
+    "webpack.config.js",
+    "webpack.analyze.js"
+  ],
+}

package/tsconfig.json

@@ -1,15 +1,18 @@
 {
   "compilerOptions": {
-    "outDir": "dist",
+    "outDir": "./build",
     "module": "esNext",
     "target": "es2020",
-    "jsx": "react",
     "sourceMap": true,
-    "moduleResolution": "Node",
+    "moduleResolution": "node",
+    "jsx": "react",
     "strict": true,
-    "skipLibCheck": true,
     "allowSyntheticDefaultImports": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
     "resolveJsonModule": true,
-    "typeRoots": ["./node_modules/@types", "./src/@types"]
-  }
+  },
+  "exclude": [
+    "node_modules",
+  ]
 }

package/webpack.analyze.js

@@ -0,0 +1,10 @@
+const { merge } = require('webpack-merge');
+const config = require('./webpack.config.js');
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+
+module.exports = merge(config, {
+  entry: {
+    app: './src/index',
+  },
+  plugins: [new BundleAnalyzerPlugin()],
+});

package/webpack.config.js

@@ -0,0 +1,95 @@
+require('dotenv').config();
+const path = require('path');
+const webpack = require('webpack');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+
+module.exports = {
+  devtool: 'source-map',
+  entry: './example/src/index',
+  output: {
+    path: path.resolve(__dirname, 'example/build'),
+    publicPath: '/',
+    filename: 'default.bundle.js',
+  },
+  target: 'web',
+  resolve: {
+    extensions: ['.ts', '.tsx', '.js'],
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: './example/src/index.html',
+    }),
+    new webpack.DefinePlugin({
+      'process.env': {
+        WAYKE_SEARCH_URL: `"${process.env.WAYKE_SEARCH_URL}"`,
+        WAYKE_SEARCH_MLT_URL: `"${process.env.WAYKE_SEARCH_MLT_URL}"`,
+        WAYKE_SEARCH_X_API_KEY: `"${process.env.WAYKE_SEARCH_X_API_KEY}"`,
+        WAYKE_GRAPH_QL_URL: `"${process.env.WAYKE_GRAPH_QL_URL}"`,
+        WAYKE_ECOM_URL: `"${process.env.WAYKE_ECOM_URL}"`,
+        GOOGLE_MAPS_API_KEY: `"${process.env.GOOGLE_MAPS_API_KEY}"`,
+      },
+    }),
+    new ForkTsCheckerWebpackPlugin({
+      async: false,
+      eslint: {
+        files: ['./src/**/*.{ts,tsx,js,jsx}', './example/src/**/*.{ts,tsx,js,jsx}'],
+      },
+    }),
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.js(x?)$/,
+        loader: 'babel-loader',
+      },
+      {
+        test: /\.ts(x?)$/,
+        use: [
+          {
+            loader: 'babel-loader',
+          },
+          {
+            loader: 'ts-loader',
+            options: {
+              transpileOnly: true,
+              allowTsInNodeModules: true,
+            },
+          },
+        ],
+      },
+      {
+        test: /\.css$/i,
+        use: ['style-loader', 'css-loader'],
+      },
+      {
+        enforce: 'pre',
+        test: /\.js$/,
+        exclude: [/node_modules/, /build/, /__test__/],
+        loader: 'source-map-loader',
+      },
+      {
+        test: /\.(png|jpg|woff|woff2|svg|eot|ttf|gif|svg)$/,
+        type: 'asset/resource',
+      },
+    ],
+  },
+  devServer: {
+    allowedHosts: process.env.WAYKE_HOST
+      ? process.env.WAYKE_HOST.replace(/\s/g, '').split(',')
+      : undefined,
+    historyApiFallback: true,
+    port: 5000,
+    client: {
+      overlay: false,
+    },
+    static: {
+      publicPath: path.resolve(__dirname, 'example/build'),
+      serveIndex: true,
+    },
+    hot: 'only',
+    devMiddleware: {
+      writeToDisk: true,
+    },
+  },
+};

package/.husky/pre-commit

@@ -1,4 +0,0 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
-npm test

package/esbuild/cdn.js

@@ -1,26 +0,0 @@
-const { build } = require('esbuild');
-
-const shared = {
-  entryPoints: ['src/cdn.ts'],
-  bundle: true,
-  minify: true,
-  sourcemap: true,
-  logLevel: 'info',
-  loader: {
-    '.js': 'jsx',
-    '.woff': 'file',
-    '.woff2': 'file',
-    '.eot': 'file',
-    '.ttf': 'file',
-    '.gif': 'file',
-    '.svg': 'dataurl',
-    '.png': 'dataurl',
-    '.css': 'file',
-  },
-};
-
-build({
-  ...shared,
-  outfile: 'dist-cdn/index.js',
-  format: 'esm',
-});

package/src/hooks/useEcom.ts

@@ -1,21 +0,0 @@
-import { EcomSettings } from '../providers/WaykeProvider';
-
-const useEcom = (ecomSettings?: EcomSettings) => {
-  if (ecomSettings?.url) {
-    import('@wayke-se/ecom').then(({ config }) => {
-      config.bind({
-        api: {
-          address: ecomSettings.url,
-        },
-        /** Specifying an origin is optional **/
-        origin: {
-          topic: 'Wayke',
-          channel: 'wayke.se',
-        },
-        bankIdThumbprint: ecomSettings.bankIdThumbprint,
-      });
-    });
-  }
-};
-
-export default useEcom;

package/src/styles.scss

@@ -1 +0,0 @@
-@import '@wayke-se/ecom-web/dist/index.css';