axitech-widget 0.0.2

package/src/utils/index.ts

@@ -0,0 +1,5 @@
+import * as fontUtils from './fontUtils';
+import * as themeUtils from './themeUtils';
+import * as config from './config';
+const utils = { ...config, ...fontUtils, ...themeUtils };
+export default utils;

package/src/utils/map.ts

@@ -0,0 +1,212 @@
+import ZoomInMap from 'src/components/claims-widget/assets/zoomin.svg';
+import ZoomOutMap from 'src/components/claims-widget/assets/zoomout.svg';
+import CurrentLocation from 'src/components/claims-widget/assets/currentlocation.svg';
+
+export function getUserBrowser() {
+  let browserDocumentation = '';
+  const userAgent = navigator.userAgent;
+  if (userAgent.match(/chrome|chromium|crios/i)) {
+    browserDocumentation = 'https://support.google.com/chrome/answer/142065?co=GENIE.Platform%3DDesktop&hl=en';
+  } else if (userAgent.match(/firefox|fxios/i)) {
+    browserDocumentation = 'https://yandex.com/support/common/browsers-settings/geo-firefox.html';
+  } else if (userAgent.match(/safari/i)) {
+    browserDocumentation = 'https://support.apple.com/en-us/HT204690';
+  } else if (userAgent.match(/opr\//i)) {
+    browserDocumentation = 'https://help.opera.com/en/latest/web-preferences/#location';
+  } else if (userAgent.match(/edg/i)) {
+    browserDocumentation = 'https://support.google.com/chrome/answer/142065?co=GENIE.Platform%3DDesktop&hl=en';
+  } else if (userAgent.match(/SamsungBrowser/i)) {
+    browserDocumentation =
+      'https://www.samsung.com/latin_en/support/mobile-devices/how-to-activate-my-location-and-change-settings-for-location-permissions/#:~:text=Launch%20the%20Settings%20app%2C%20and,enable%20or%20disable%20location%20services.';
+  }
+  return browserDocumentation;
+}
+
+let isApproximateLocation = false;
+
+export async function getLocationByIP() {
+  try {
+    const result = await fetch('https://get.geojs.io/v1/ip/geo.json').then((res) => res.json());
+    return [result, null];
+  } catch (error) {
+    return [null, error];
+  }
+}
+
+export function getPosition(options: PositionOptions) {
+  return new Promise((resolve: PositionCallback, reject: PositionErrorCallback) =>
+    navigator.geolocation.getCurrentPosition(resolve, reject, options)
+  );
+}
+
+export async function getLocationInfo(location: google.maps.LatLng) {
+  const geoCoder = new google.maps.Geocoder();
+  if (typeof location.lat === 'number' || typeof location.lng === 'number') {
+    location = new google.maps.LatLng(location);
+  }
+  const address: ILocationInfo = {
+    latitude: location.lat(),
+    longitude: location.lng(),
+    formatted_address: '',
+    address_line: '',
+    city: '',
+    state: '',
+    country: '',
+    postal_code: '',
+  };
+  if (isApproximateLocation) {
+    isApproximateLocation = false;
+    return address;
+  }
+
+  const resp = (
+    await geoCoder.geocode({
+      location: { lat: location.lat(), lng: location.lng() },
+    })
+  )?.results?.[0];
+  if (!!resp && ['ROOFTOP', 'RANGE_INTERPOLATED'].includes(resp.geometry.location_type)) {
+    address.formatted_address = resp.formatted_address;
+    address.address_line = `${
+      resp.address_components?.find(({ types }) => types.includes('route'))?.long_name || ''
+    }, ${resp.address_components?.find(({ types }) => types.includes('street_number'))?.long_name || ''}`;
+    address.city = resp.address_components?.find(({ types }) => types.includes('locality'))?.long_name || '';
+    address.state =
+      resp.address_components?.find(({ types }) => types.includes('administrative_area_level_1'))?.long_name || '';
+    address.country = resp.address_components?.find(({ types }) => types.includes('country'))?.long_name || '';
+    address.postal_code = resp.address_components?.find(({ types }) => types.includes('postal_code'))?.long_name || '';
+  }
+  return address;
+}
+
+type AtLeast<T, K extends keyof T> = Partial<T> & Pick<T, K>;
+
+export interface ILocation {
+  latitude: number;
+  longitude: number;
+  formatted_address: string;
+  address_line: string;
+  city: string;
+  state: string;
+  country: string;
+  postal_code: string;
+}
+
+export type ILocationInfo = AtLeast<ILocation, 'latitude' | 'longitude'>;
+
+export async function getLocation(
+  defaultZoom = 8,
+  defaultLocation: ILocationInfo = { latitude: 0, longitude: 0 }
+): Promise<[ILocationInfo, number, boolean]> {
+  let locationObject: ILocationInfo;
+  try {
+    if (!navigator.geolocation) {
+      throw new Error('Loaction access not allowed or device is not supported. Using IP based geolocation');
+    }
+    const coords = (
+      await getPosition({
+        enableHighAccuracy: true,
+        maximumAge: 0,
+      })
+    ).coords;
+    locationObject =
+      (await getLocationInfo(new google.maps.LatLng(coords.latitude, coords.longitude))) || defaultLocation;
+    return [locationObject, defaultZoom, true];
+  } catch (error) {
+    const [ipLocation, err] = await getLocationByIP();
+    if (!ipLocation?.latitude || !ipLocation?.longitude || err) {
+      locationObject = defaultLocation;
+      defaultZoom = 8;
+      return [locationObject, defaultZoom, false];
+    }
+    locationObject =
+      (await getLocationInfo(new google.maps.LatLng(Number(ipLocation.latitude), Number(ipLocation.longitude)))) ||
+      defaultLocation;
+    defaultZoom = 8;
+    return [locationObject, defaultZoom, false];
+  }
+}
+
+export function zoomControl(controlDiv: HTMLDivElement, map: google.maps.Map) {
+  controlDiv.style.margin = '0px 24px 18px 0px';
+
+  // Set CSS for the control wrapper
+  const controlWrapper = document.createElement('div');
+  controlWrapper.style.backgroundColor = 'white';
+  controlWrapper.style.borderRadius = '20px';
+  controlWrapper.style.cursor = 'pointer';
+  controlWrapper.style.textAlign = 'center';
+  controlWrapper.style.width = '40px';
+  controlWrapper.style.height = '80px';
+  controlDiv.appendChild(controlWrapper);
+
+  // Set CSS for the zoomIn
+  const zoomInButton = document.createElement('div');
+  zoomInButton.style.width = '40px';
+  zoomInButton.style.height = '40px';
+  zoomInButton.style.backgroundImage = `url(${ZoomInMap})`;
+  zoomInButton.style.backgroundPosition = 'center';
+  zoomInButton.style.backgroundRepeat = 'no-repeat';
+  zoomInButton.style.borderBottom = 'solid 1px #F4F4F4';
+  controlWrapper.appendChild(zoomInButton);
+
+  // Set CSS for the zoomOut
+  const zoomOutButton = document.createElement('div');
+  zoomOutButton.style.width = '40px';
+  zoomOutButton.style.height = '40px';
+  zoomOutButton.style.backgroundImage = `url(${ZoomOutMap})`;
+  zoomOutButton.style.backgroundPosition = 'center';
+  zoomOutButton.style.backgroundRepeat = 'no-repeat';
+  controlWrapper.appendChild(zoomOutButton);
+
+  // Setup the click event listener - zoomIn
+  zoomInButton.addEventListener('click', () => {
+    const actualZoom = map?.getZoom();
+    if (!actualZoom) {
+      return;
+    }
+    map.setZoom(actualZoom + 1);
+  });
+
+  // Setup the click event listener - zoomOut
+  zoomOutButton.addEventListener('click', () => {
+    const actualZoom = map?.getZoom();
+    if (!actualZoom) {
+      return;
+    }
+    map.setZoom(actualZoom - 1);
+  });
+}
+
+export function addYourLocationButton(controlDiv: HTMLDivElement, map: google.maps.Map) {
+  controlDiv.style.margin = '0px 24px 18px 0px';
+
+  // Set CSS for the control button
+  const controlButton = document.createElement('button');
+  controlButton.style.border = 'none';
+  controlButton.style.outline = 'none';
+  controlButton.style.backgroundColor = '#fff';
+  controlButton.style.width = '40px';
+  controlButton.style.height = '40px';
+  controlButton.style.borderRadius = '20px';
+  controlButton.style.boxShadow = '0 1px 4px rgba(0,0,0,0.3)';
+  controlButton.style.cursor = 'pointer';
+  controlButton.style.padding = '0';
+  controlButton.title = 'Your Location';
+  controlDiv.appendChild(controlButton);
+
+  // Set CSS for the icon
+  const icon = document.createElement('div');
+  icon.style.width = '40px';
+  icon.style.height = '40px';
+  icon.style.backgroundImage = `url(${CurrentLocation})`;
+  icon.style.backgroundPosition = 'center';
+  icon.style.backgroundRepeat = 'no-repeat';
+  controlButton.appendChild(icon);
+
+  // Setup the click event listener - move
+  controlButton.addEventListener('click', async () => {
+    const [location] = await getLocation();
+    map.panTo(new google.maps.LatLng(location.latitude, location.longitude));
+    map.setZoom(16);
+  });
+}

package/src/utils/request.ts

@@ -0,0 +1,76 @@
+import { config, getBaseUrl } from './config';
+import { Theme } from './themeUtils';
+const unknownError = 'Unknown error happened check your api-key and config';
+export const ApiPaths = {
+  config: 'config',
+  submission: 'submission',
+} as const;
+
+export type IApiPath = keyof typeof ApiPaths;
+type ApiError = {
+  message: string;
+};
+export type ResponseTypeMap = {
+  [ApiPaths.config]: {
+    id: string;
+    name: string;
+    theme: Theme;
+    correspondenceEmails: string[];
+  };
+  [ApiPaths.submission]: { recieved: true };
+};
+
+export const request = {
+  get,
+  post,
+};
+
+async function makeFetch(input: RequestInfo | URL, init?: RequestInit | undefined) {
+  try {
+    config.value.clientId;
+    const res = await fetch(input, {
+      headers: {
+        'X-API-KEY': config.value.apiKey,
+      },
+      ...init,
+    }).then(async (res) => {
+      const result = await res.json();
+      if (!res.ok) {
+        throw result;
+      }
+      return result;
+    });
+    return [res, null] as const;
+  } catch (error) {
+    console.log('error :>> ', error);
+    if (error && typeof error === 'object' && 'statusMessage' in error && typeof error?.statusMessage === 'string') {
+      return [null, { message: error.statusMessage }] as const;
+    }
+    return [null, { message: unknownError }] as const;
+  }
+}
+
+async function get<Endpoint extends keyof typeof ApiPaths>(
+  endpoint: Endpoint,
+  payload?: { params?: string; query?: string }
+) {
+  return makeFetch(
+    `${getBaseUrl(endpoint)}${payload?.params ? `/${payload.params}` : ''}${payload?.query ? `?${payload.query}` : ''}`,
+    {
+      method: 'GET',
+      headers: {
+        'X-API-KEY': config.value.apiKey,
+      },
+    }
+  ) as Promise<[ResponseTypeMap[Endpoint], null] | [null, ApiError]>;
+}
+
+async function post<Body, Endpoint extends keyof typeof ApiPaths>(endpoint: Endpoint, body?: Body) {
+  return makeFetch(getBaseUrl(endpoint), {
+    method: 'POST',
+    headers: {
+      'X-API-KEY': config.value.apiKey,
+    },
+    body: JSON.stringify(body),
+  }) as Promise<[ResponseTypeMap[Endpoint], null] | [null, ApiError]>;
+}

package/src/utils/themeUtils.ts

@@ -0,0 +1,40 @@
+import { defaultShades, generateShades } from './colorHelpers';
+export interface Theme {
+  primary: string;
+  secondary: string;
+  positive: string;
+  negative: string;
+  fontPrimary: string;
+  fontSecondary: string;
+}
+
+const baseVariables = {
+  '--color-dark-blue-10': '242 242 245',
+  '--color-dark-blue': '0 0 0',
+  '--color-dark-grey': '97 95 110',
+  '--color-light-grey': '0 79 188',
+  '--color-dark': '29 29 29',
+  '--color-dark-page': '18 18 18',
+  '--font-24': '24px',
+  '--font-20': '20px',
+  '--font-16': '16px',
+  '--color-bg': '#ffffff',
+  '--color-bg-soft': '#f3f4f6',
+};
+
+export function applyTheme(theme: Theme, element: HTMLElement) {
+  if (!element) {
+    return;
+  }
+  Object.entries(theme).forEach(([key, value]) => {
+    const shades = value ? generateShades(value) : defaultShades;
+    Object.keys(shades)
+      .map(Number)
+      .forEach((shade) => {
+        element.style.setProperty(`--${key}-color-${shade}`, shades[shade]);
+      });
+  });
+  Object.entries(baseVariables).forEach(([key, value]) => {
+    element.style.setProperty(`${key}`, value);
+  });
+}