axitech-widget 0.0.2

package/src/composables/googleMaps.ts

@@ -0,0 +1,157 @@
+import { Loader } from '@googlemaps/js-api-loader';
+import { Ref, ref } from 'vue';
+import {
+  ILocationInfo,
+  addYourLocationButton,
+  getLocationInfo,
+  getLocation as getLocationRaw,
+  zoomControl,
+} from 'src/utils/map';
+
+const loader = new Loader({
+  apiKey: process.env.VITE_APP_GMAPS_KEY as string,
+  version: 'quarterly',
+  libraries: ['places'],
+});
+const loadPromise = loader.load();
+
+export function useGoogleMaps(
+  componentOrSelector: string | Ref<HTMLElement | undefined> | HTMLElement,
+  onPlaceChanged?: (place: ILocationInfo) => void
+) {
+  const map = ref<google.maps.Map>();
+  const marker = ref<google.maps.Marker>();
+  const isMapsLoaded = ref(false);
+  const defaultLocation = { latitude: 51.51160940068564, longitude: -0.08719166730719596 };
+  const isGeolocationAllowed = ref(false);
+  const defaultZoom = ref(16);
+
+  const getElement = () => {
+    const error = new Error('Can not load map, no element or selector provided');
+    if (!componentOrSelector) {
+      throw error;
+    }
+
+    if (typeof componentOrSelector === 'string') {
+      const elem = document.getElementById(componentOrSelector);
+      if (!elem) {
+        throw error;
+      }
+      return elem;
+    }
+
+    if (componentOrSelector instanceof HTMLElement) {
+      return componentOrSelector;
+    }
+
+    if (!componentOrSelector.value) {
+      throw error;
+    }
+    return componentOrSelector.value;
+  };
+
+  async function waitComplete() {
+    await loadPromise;
+    isMapsLoaded.value = true;
+  }
+  waitComplete();
+
+  async function load(opts: google.maps.MapOptions) {
+    await waitComplete();
+    const element = getElement();
+
+    map.value = new google.maps.Map(element, {
+      zoom: defaultZoom.value,
+      disableDefaultUI: true,
+      ...opts,
+    });
+
+    marker.value = new google.maps.Marker({
+      map: map.value,
+      animation: google.maps.Animation.DROP,
+      position: opts?.center,
+    });
+
+    // Adding custom zoom control to the map
+    const zoomControlDiv = document.createElement('div');
+    zoomControl(zoomControlDiv, map.value);
+    map.value.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(zoomControlDiv);
+
+    // Adding custom location finder to the map
+    if (isGeolocationAllowed.value) {
+      const locationControlDiv = document.createElement('div');
+      addYourLocationButton(locationControlDiv, map.value);
+
+      map.value.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(locationControlDiv);
+    }
+
+    // Setup bounds_changed event to keep the marker in center of the map
+    map.value.addListener('bounds_changed', () => {
+      marker.value?.setPosition(map.value?.getCenter());
+    });
+
+    map.value.addListener('zoom_changed', async () => {
+      const center = map.value?.getCenter();
+      if (!center) return;
+      const newLocation = await getLocationInfo(center);
+      if (newLocation?.latitude && onPlaceChanged) onPlaceChanged(newLocation);
+    });
+
+    // Setup dragend event to save new location after move the map
+    map.value.addListener('dragend', async () => {
+      const center = map.value?.getCenter();
+      if (!center) return;
+      const newLocation = await getLocationInfo(center);
+      if (newLocation?.latitude && onPlaceChanged) onPlaceChanged(newLocation);
+    });
+  }
+
+  async function loadPreview(opts: google.maps.MapOptions) {
+    await waitComplete();
+    const element = getElement();
+
+    map.value = new google.maps.Map(element, {
+      zoom: defaultZoom.value,
+      disableDefaultUI: true,
+      disableDoubleClickZoom: true,
+      gestureHandling: 'none',
+      keyboardShortcuts: false,
+      clickableIcons: false,
+      ...opts,
+    });
+
+    marker.value = new google.maps.Marker({
+      map: map.value,
+      animation: google.maps.Animation.DROP,
+      position: opts?.center,
+    });
+
+    // Setup bounds_changed event to keep the marker in center of the map
+    map.value.addListener('bounds_changed', () => {
+      marker.value?.setPosition(map.value?.getCenter());
+    });
+  }
+
+  async function getLocation() {
+    const [location, zoom, geoLocation] = await getLocationRaw(defaultZoom.value, defaultLocation);
+    defaultZoom.value = zoom;
+    isGeolocationAllowed.value = geoLocation;
+    return location;
+  }
+
+  function placeChanged(place: ILocationInfo) {
+    if (place?.latitude && place?.longitude) {
+      map.value?.panTo(new google.maps.LatLng(place.latitude, place.longitude));
+      map.value?.setZoom(16);
+    }
+  }
+
+  return {
+    map,
+    marker,
+    load,
+    loadPreview,
+    getLocation,
+    placeChanged,
+  };
+}

package/src/constants/index.ts

@@ -0,0 +1 @@
+export const CLAIMS_WIDGET_ID = 'axitech-claims-widget';

package/src/index.ts

@@ -0,0 +1,76 @@
+import { App, defineCustomElement } from 'vue';
+import * as components from './components';
+import utils from './utils';
+import { config, applyConfig as applyAdminConfig } from './utils/config';
+import { Theme } from './utils/themeUtils';
+import { ApiPaths, request } from './utils/request';
+
+const WidgetCustomElement = defineCustomElement(components.ClaimsWidget);
+customElements.define('claims-widget', WidgetCustomElement);
+
+const WidgetTypes = {
+  claim: 'claim',
+} as const;
+
+export type WidgetType = keyof typeof WidgetTypes;
+
+export type IWidgetOptions = {
+  clientId: string;
+  type?: WidgetType;
+  user: {
+    id: string;
+    name: string;
+    email: string;
+    phone: string;
+  };
+  insurance: {
+    provider: string;
+    policyNumber: string;
+  };
+  theme?: Theme;
+};
+
+/** Load widget as vue component to have more control over it */
+export function install(app: App, options: IWidgetOptions & { apiKey: string }) {
+  load(options.apiKey, options);
+  for (const key in components) {
+    app.component(key, components[key as keyof typeof components]);
+  }
+}
+
+/**
+ * load will use the apikey and load the client configuration any options you provide here will overwrite the config provided on the admin interface
+ * @param options
+ */
+export async function load(apiKey: string, options: IWidgetOptions) {
+  try {
+    if (!options) {
+      throw new Error('You must pass the required options (user, insurance) to the widget');
+    }
+    config.value.isConfigLoading = true;
+    if (!apiKey) {
+      throw new Error('You must provide an API key');
+    }
+    config.value.apiKey = apiKey;
+    config.value.clientId = options.clientId;
+    const [result, error] = await request.get(ApiPaths.config);
+    if (error?.message) {
+      throw error.message;
+    }
+    if (!result) {
+      throw 'Unknown error happend, please try again later';
+    }
+    applyAdminConfig({ ...result, ...options });
+  } catch (error) {
+    config.value.error = error as string;
+    config.value.apiKey = '';
+  } finally {
+    config.value.isConfigLoading = false;
+  }
+}
+
+/** Constants of the widget */
+export * from './constants';
+
+/** Use applyTheme to apply theme changes at runtime if you have not had the chance to change them at initialisation */
+export const applyConfig = utils.applyPublicConfig;

package/src/plugins/firebase.ts

@@ -0,0 +1,18 @@
+import { initializeApp } from 'firebase/app';
+import { getStorage } from 'firebase/storage';
+
+const firebaseConfig = {
+  apiKey: process.env.VITE_APP_API_KEY,
+  authDomain: process.env.VITE_APP_AUTH_DOMAIN,
+  projectId: process.env.VITE_APP_PROJECT_ID,
+  storageBucket: process.env.VITE_APP_STORAGE_BUCKET,
+  messagingSenderId: process.env.VITE_APP_MESSAGING_SENDER_ID,
+  appId: process.env.VITE_APP_APP_ID,
+  measurementId: process.env.VITE_APP_MEASUREMENT_ID,
+};
+
+// Initialize Firebase
+export const app = initializeApp(firebaseConfig);
+
+// Initialize Cloud Storage and get a reference to the service
+export const storage = getStorage(app);

package/src/plugins/firebaseCloudStorage.ts

@@ -0,0 +1,88 @@
+import { BasePlugin, PluginOptions } from '@uppy/core';
+import { storage } from './firebase';
+import { ref, uploadBytesResumable, getDownloadURL, UploadMetadata } from 'firebase/storage';
+import Uppy from '@uppy/core';
+
+interface StorageOptions extends PluginOptions {
+  basePath?: string;
+}
+
+export default class FirebaseCloudStorage extends BasePlugin<StorageOptions> {
+  public title = 'Firebase Cloud Storage';
+  public type = 'uploader';
+  public id = 'FirebaseCloudStorage';
+  public basePath = '';
+  constructor(uppy: Uppy, opts?: StorageOptions) {
+    super(uppy, opts);
+    this.basePath = opts?.basePath || '';
+    this.uploadFiles = this.uploadFiles.bind(this);
+  }
+
+  async uploadFiles(fileIds: string[]) {
+    const files = fileIds.map((file) => this.uppy.getFile(file));
+    this.uppy.emit('upload-start', files);
+    await Promise.all(
+      files.map((file) => {
+        return new Promise<void>((resolve, reject) => {
+          const fileRef = ref(
+            storage,
+            `${this.basePath.endsWith('/') ? this.basePath : `${this.basePath}/`}${file.name}`
+          );
+          const metaData: UploadMetadata = {
+            contentType: file.type,
+          };
+          const uploadTask = uploadBytesResumable(fileRef, file.data, metaData);
+
+          uploadTask.on(
+            'state_changed',
+            (snapshot) => {
+              const progressInfo = {
+                uploader: this,
+                bytesUploaded: snapshot.bytesTransferred,
+                bytesTotal: snapshot.totalBytes,
+              };
+              this.uppy.emit('upload-progress', file, progressInfo);
+            },
+            (error) => {
+              let err = '';
+              switch (error.code) {
+                case 'storage/unauthorized':
+                  err = 'Unauthorized';
+                  break;
+                case 'storage/canceled':
+                  err = 'canceled';
+                  break;
+                case 'storage/unknown':
+                  err = error.serverResponse || 'Unknown error';
+                  break;
+              }
+              this.uppy.emit('upload-error', file, err);
+              reject(err);
+            },
+            () => {
+              getDownloadURL(uploadTask.snapshot.ref).then((downloadURL) => {
+                file.downloadUrl = downloadURL;
+                const progressInfo = {
+                  uploader: this,
+                  bytesUploaded: file.size,
+                  bytesTotal: file.size,
+                };
+                this.uppy.emit('upload-progress', file, progressInfo);
+                this.uppy.emit('upload-success', file, uploadTask.snapshot, downloadURL);
+                resolve();
+              });
+            }
+          );
+        });
+      })
+    );
+  }
+
+  install() {
+    this.uppy.addUploader(this.uploadFiles);
+  }
+
+  uninstall() {
+    this.uppy.removeUploader(this.uploadFiles);
+  }
+}

package/src/utils/autocomplete.ts

@@ -0,0 +1,57 @@
+import { Theme } from './themeUtils';
+import MapMarker from '../components/claims-widget/assets/marker.svg';
+
+export async function loadAutocompleteStyle(theme: Theme) {
+  const styleElem = document.createElement('style', {
+    is: 'claims-widget-style',
+  });
+  const svgContent = await (await fetch(MapMarker)).text();
+  let primaryMapMarker = document.createElement('svg') as unknown as SVGElement;
+  primaryMapMarker.innerHTML = svgContent;
+  primaryMapMarker = primaryMapMarker.firstChild as SVGElement;
+  primaryMapMarker.style.fill = theme.primary;
+  styleElem.innerHTML = `
+      .pac-item {
+        padding: 8px 16px;
+        cursor: pointer;
+        background-color: #fff;
+        border-radius: 2px;
+        font-family: inherit;
+      }
+
+      .pac-icon {
+        background-image: url(${MapMarker}) !important;
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: 16px;
+        margin: 4px 6px 6px 0;
+        vertical-align: middle;
+      }
+
+      .pac-item-selected, .pac-item:hover {
+        color: ${theme.primary};
+      }
+
+      .pac-item-selected .pac-icon {
+        background-image: url("data:image/svg+xml,${encodeURIComponent(primaryMapMarker.outerHTML)}") !important;;
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: 16px;
+        margin: 4px 6px 6px 0;
+        vertical-align: middle;
+      }
+
+      .pac-item:hover .pac-icon {
+        background-image: url("data:image/svg+xml,${encodeURIComponent(primaryMapMarker.outerHTML)}") !important;;
+      }
+
+      .pac-item-selected .pac-item-query {
+        color: ${theme.primary};
+      }
+
+      .pac-item:hover .pac-item-query {
+        color: ${theme.primary};
+      }
+      `;
+  document.head.append(styleElem);
+}

package/src/utils/colorHelpers.ts

@@ -0,0 +1,96 @@
+interface Palette {
+  [key: number]: string;
+}
+interface Rgb {
+  r: number;
+  g: number;
+  b: number;
+}
+
+export const defaultShades = {
+  '50': '#F3F6FC',
+  '100': '#E6EEF8',
+  '200': '#C8DBEF',
+  '300': '#97BCE2',
+  '400': '#5F98D1',
+  '500': '#3B7BBC',
+  '600': '#2A609D',
+  '700': '#234E81',
+  '800': '#21436B',
+  '900': '#203A5A',
+  '950': '#15253C',
+} as Palette;
+
+function hexToRgb(hex: string): Rgb | null {
+  const sanitizedHex = hex.replaceAll('##', '#');
+  const colorParts = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(sanitizedHex);
+  if (!colorParts) {
+    return null;
+  }
+  const [, r, g, b] = colorParts;
+  return {
+    r: parseInt(r, 16),
+    g: parseInt(g, 16),
+    b: parseInt(b, 16),
+  } as Rgb;
+}
+function rgbToHex(r: number, g: number, b: number): string {
+  const toHex = (c: number) => `0${c.toString(16)}`.slice(-2);
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+function lighten(hex: string, intensity: number): string {
+  const color = hexToRgb(`#${hex}`);
+  if (!color) {
+    return '';
+  }
+  const r = Math.round(color.r + (255 - color.r) * intensity);
+  const g = Math.round(color.g + (255 - color.g) * intensity);
+  const b = Math.round(color.b + (255 - color.b) * intensity);
+  return rgbToHex(r, g, b);
+}
+function darken(hex: string, intensity: number): string {
+  const color = hexToRgb(hex);
+  if (!color) {
+    return '';
+  }
+  const r = Math.round(color.r * intensity);
+  const g = Math.round(color.g * intensity);
+  const b = Math.round(color.b * intensity);
+  return rgbToHex(r, g, b);
+}
+export function generateShades(baseColor: string): Palette {
+  const response: Palette = {
+    500: `#${baseColor}`.replace('##', '#'),
+  };
+  const intensityMap: {
+    [key: number]: number;
+  } = {
+    50: 0.95,
+    100: 0.9,
+    200: 0.75,
+    300: 0.6,
+    400: 0.3,
+    600: 0.9,
+    700: 0.75,
+    800: 0.6,
+    900: 0.49,
+  };
+  [50, 100, 200, 300, 400].forEach((level) => {
+    response[level] = lighten(baseColor, intensityMap[level]);
+  });
+  [600, 700, 800, 900].forEach((level) => {
+    response[level] = darken(baseColor, intensityMap[level]);
+  });
+  return response as Palette;
+}
+export function setColorShades(cssProperty = '--primary-color', color?: string) {
+  const root = document.documentElement;
+  const shades = color ? generateShades(color) : defaultShades;
+  if (root?.style) {
+    Object.keys(shades)
+      .map(Number)
+      .forEach((shade) => {
+        root.style.setProperty(`${cssProperty}-${shade}`, shades[shade]);
+      });
+  }
+}

package/src/utils/config.ts

@@ -0,0 +1,140 @@
+import { IApiPath } from './request';
+import { ref } from 'vue';
+import type { InjectionKey } from 'vue';
+import { Theme } from './themeUtils';
+import { ILocationInfo } from './map';
+const rootKey = Symbol('root_element') as InjectionKey<string>;
+
+export const getBaseUrl = (path: IApiPath) => `${process.env.VITE_APP_API_BASE_URL}${config.value.clientId}/${path}`;
+
+export type WidgetConfig = {
+  user: UserConfig;
+  insurance: InsuranceConfig;
+  theme: Theme;
+  displayName: string;
+  contact: ContactConfig;
+};
+
+export type UserConfig = {
+  id: string;
+  name: string;
+  email: string;
+  phone: string;
+};
+
+export type ContactConfig = {
+  phone: string;
+  email: string;
+};
+
+export type InsuranceConfig = {
+  provider: string;
+  policyNumber: string;
+};
+
+export type CollisionSubmission = {
+  notificationTime: string;
+  date: string;
+  location: ILocationInfo | undefined;
+  vehicleImages: string[];
+  additionalImages: string[];
+  note: string;
+  vehicleRoadWorthy: boolean;
+  driver: boolean;
+  injured: boolean;
+  thirdPartiesInvolved: boolean;
+  witnessesPresent: boolean;
+  user: {
+    id: string;
+    name: string;
+    email: string;
+    phone: string;
+  };
+  insurance: {
+    provider: string;
+    policyNumber: string;
+  };
+  incidentType: string;
+};
+
+const defaultConfig = {
+  clientId: '',
+  user: {
+    id: 'Unknown',
+    name: '',
+    email: '',
+    phone: '',
+  } satisfies UserConfig,
+  apiKey: '',
+  insurance: {
+    provider: '',
+    policyNumber: '',
+  } satisfies InsuranceConfig,
+  theme: {
+    primary: '#2A609D',
+    secondary: '#004FBC',
+    positive: '#408825',
+    negative: '#DE0808',
+    fontPrimary: '#000000',
+    fontSecondary: '#dddddd',
+  },
+  contact: {
+    phone: '',
+    email: '',
+  } satisfies ContactConfig,
+  isConfigLoading: true,
+  error: '',
+  name: '',
+  allowedDomains: [] as string[],
+  correspondenceEmail: [] as string[],
+  rootKey,
+  id: '',
+  onSubmit: (() => null) as (type: '', body: CollisionSubmission) => void,
+};
+
+export const config = ref({} as typeof defaultConfig);
+
+const callbacks = new Set<(config: typeof defaultConfig) => void>();
+export function onConfigChange(callback: (config: typeof defaultConfig) => void) {
+  callbacks.add(callback);
+  return () => {
+    callbacks.delete(callback);
+  };
+}
+
+export function applyConfig(newConfig: Partial<typeof defaultConfig>) {
+  // do not allow overwrite of the apiKey
+  const apiKey = config.value.apiKey;
+  Object.assign(config.value, newConfig);
+  config.value.apiKey = apiKey;
+  callbacks.forEach((callback) => callback(config.value));
+}
+
+type RecursivePartial<T> = {
+  [P in keyof T]?: T[P] extends (infer U)[]
+    ? RecursivePartial<U>[]
+    : T[P] extends object | undefined
+    ? RecursivePartial<T[P]>
+    : T[P];
+};
+
+export function applyPublicConfig(newConfig: RecursivePartial<WidgetConfig>) {
+  if (newConfig.user) {
+    config.value.user = { ...config.value.user, ...newConfig.user };
+  }
+  if (newConfig.insurance) {
+    config.value.insurance = { ...config.value.insurance, ...newConfig.insurance };
+  }
+  if (newConfig.theme) {
+    config.value.theme = { ...config.value.theme, ...newConfig.theme };
+  }
+  if (newConfig.theme) {
+    config.value.theme = { ...config.value.theme, ...newConfig.theme };
+  }
+  if (newConfig.displayName) {
+    config.value.name = newConfig.displayName;
+  }
+  callbacks.forEach((callback) => callback(config.value));
+}
+
+applyConfig(defaultConfig);

package/src/utils/customElementRegister.ts

@@ -0,0 +1,40 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+// @ts-nocheck
+import { defineCustomElement as VueDefineCustomElement, h, createApp, getCurrentInstance } from 'vue';
+
+const nearestElement = (el) => {
+  while (el?.nodeType !== 1 /* ELEMENT */) el = el.parentElement;
+  return el;
+};
+
+export const defineCustomElement = (component) =>
+  VueDefineCustomElement({
+    setup() {
+      const app = createApp();
+      app.mixin({
+        mounted() {
+          const insertStyles = (styles) => {
+            if (styles?.length) {
+              this.__style = document.createElement('style');
+              this.__style.innerText = styles.join().replace(/\n/g, '');
+              nearestElement(this.$el).prepend(this.__style);
+            }
+          };
+          insertStyles(this.$?.type.styles);
+          if (this.$options.components) {
+            for (const comp of Object.values(this.$options.components)) {
+              insertStyles(comp.styles);
+            }
+          }
+        },
+        unmounted() {
+          this.__style?.remove();
+        },
+      });
+
+      const inst = getCurrentInstance();
+      Object.assign(inst.appContext, app._context);
+
+      return () => h(component);
+    },
+  });

package/src/utils/fontUtils.ts

@@ -0,0 +1,24 @@
+import Font from '../assets/fonts/Volvo Novum-Regular.woff';
+import FontMedium from '../assets/fonts/Volvo Novum-Medium.woff';
+
+export function loadFonts() {
+  const styleElem = document.createElement('style', {
+    is: 'claims-widget-style',
+  });
+  styleElem.innerHTML = `
+      @font-face {
+        font-family: "WidgetFont";
+        font-style: normal;
+        font-display: swap;
+        src: url('${Font}') format('woff');
+      }
+      @font-face {
+        font-family: "WidgetFont";
+        src: url('${FontMedium}') format("woff");
+        font-weight: bold;
+        font-display: swap;
+        font-style: normal;
+      }
+    `;
+  document.head.append(styleElem);
+}