axitech-widget 0.0.2

package/src/assets/styles/collapse.sass

@@ -0,0 +1,20 @@
+.accordion
+  padding: 16px
+  border: 1px solid #F4F4F4
+  box-shadow: -4px 8px 8px rgba(0, 0, 0, 0.02)
+  cursor: pointer
+  transition: all 250ms ease-in-out
+  @apply gap-4 rounded
+  &:hover
+    @apply backdrop-brightness-100
+  @media screen and (min-width: 480px)
+    padding: 16px 24px
+
+  .wrapper
+    display: grid
+    grid-template-rows: 0fr
+    transition: grid-template-rows 0.25s ease-out
+  .wrapper.is-open
+    grid-template-rows: 1fr
+  .inner
+    overflow: hidden

package/src/assets/styles/datepicker.sass

@@ -0,0 +1,14 @@
+
+.date-time-input
+  width: 100%
+  @apply border-0 border-b border-primary
+  &[is-error='true']
+    @apply border-negative-700
+  &:focus
+    @apply outline-0
+  input::placeholder
+    font-style: normal
+    font-size: 16px
+    line-height: 150%
+  input::-webkit-calendar-picker-indicator
+    @apply text-primary-500

package/src/assets/styles/main.sass

@@ -0,0 +1,182 @@
+@tailwind base
+@tailwind components
+@tailwind utilities
+
+@layer base
+  :root
+    --color-bg: #ffffff
+    --color-bg-soft: #f3f4f6
+    --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-primary-50: #f4f7fa
+    --color-primary-100: #eaeff5
+    --color-primary-200: #cad7e7
+    --color-primary-300: #aabfd8
+    --color-primary-400: #6a90ba
+    --color-primary-500: #2A609D
+    --color-primary-600: #26568d
+    --color-primary-700: #204876
+    --color-primary-800: #193a5e
+    --color-primary-900: #152f4d
+    --color-secondary-50: #f2f6fc
+    --color-secondary-100: #e6edf8
+    --color-secondary-200: #bfd3ee
+    --color-secondary-300: #99b9e4
+    --color-secondary-400: #4d84d0
+    --color-secondary-500: #004FBC
+    --color-secondary-600: #0047a9
+    --color-secondary-700: #003b8d
+    --color-secondary-800: #002f71
+    --color-secondary-900: #00275c
+    --color-fontSecondary-50: #f2f2f2
+    --color-fontSecondary-100: #e6e6e6
+    --color-fontSecondary-200: #bfbfbf
+    --color-fontSecondary-300: #999999
+    --color-fontSecondary-400: #4d4d4d
+    --color-fontSecondary-500: #000000
+    --color-fontSecondary-600: #000000
+    --color-fontSecondary-700: #000000
+    --color-fontSecondary-800: #000000
+    --color-fontSecondary-900: #000000
+    --color-fontPrimary-50: #f2f2f2
+    --color-fontPrimary-100: #e6e6e6
+    --color-fontPrimary-200: #bfbfbf
+    --color-fontPrimary-300: #999999
+    --color-fontPrimary-400: #4d4d4d
+    --color-fontPrimary-500: #000000
+    --color-fontPrimary-600: #000000
+    --color-fontPrimary-700: #000000
+    --color-fontPrimary-800: #000000
+    --color-fontPrimary-900: #000000
+    --color-positive-50: #f5f9f4
+    --color-positive-100: #ecf3e9
+    --color-positive-200: #cfe1c9
+    --color-positive-300: #b3cfa8
+    --color-positive-400: #79ac66
+    --color-positive-500: #408825
+    --color-positive-600: #3a7a21
+    --color-positive-700: #30661c
+    --color-positive-800: #265216
+    --color-positive-900: #1f4312
+    --color-negative-50: #fdf3f3
+    --color-negative-100: #fce6e6
+    --color-negative-200: #f7c1c1
+    --color-negative-300: #f29c9c
+    --color-negative-400: #e85252
+    --color-negative-500: #DE0808
+    --color-negative-600: #c80707
+    --color-negative-700: #a70606
+    --color-negative-800: #850505
+    --color-negative-900: #6d0404
+    --color-dark: 29 29 29
+    --color-dark-page: 18 18 18
+    --font-24: 24px
+    --font-20: 20px
+    --font-16: 16px
+
+  html
+    font-family: WidgetFont, system-ui, sans-serif
+#axitech-claims-widget
+  font-family: WidgetFont, sans-serif
+  @apply text-fontPrimary-500
+  & *
+    transition-property: color, background, background-color, fill
+    transition-duration: 150ms
+    transition-timing-function: ease-in-out
+  @mixin title($index, $font-size, $line-height)
+    .title#{$index}, .title#{$index}-bold
+      font-style: normal
+      font-family: WidgetFont, sans-serif
+      font-size: $font-size
+      line-height: $line-height
+      letter-spacing: -0.02em
+    .title#{$index}-bold
+      font-weight: bold
+
+  @mixin body($index, $font-size, $line-height)
+    .body#{$index}, .body#{$index}-bold
+      font-style: normal
+      font-family: WidgetFont, sans-serif
+      font-size: $font-size
+      line-height: $line-height
+      letter-spacing: -0.02em
+    .body#{$index}-bold
+      font-weight: bold
+
+  @mixin action($index, $font-size, $line-height)
+    .action#{$index}, .action#{$index}-bold
+      font-style: normal
+      font-family: WidgetFont, sans-serif
+      font-size: $font-size
+      line-height: $line-height
+    .action#{$index}-bold
+      font-weight: 900
+
+  @include title(1, 24px, 34px)
+  @include title(2, 20px, 28px)
+  @include title(3, 18px, 27px)
+  @include title(4, 16px, 22px)
+
+  @include body(1, 16px, 24px)
+  @include body(2, 14px, 20px)
+  @include body(3, 12px, 18px)
+
+  @include action(1, 16px, 20px)
+  @include action(2, 14px, 18px)
+
+  @import './collapse.sass'
+  @import './datepicker.sass'
+  @import './map.sass'
+  @import './togglebutton.sass'
+
+  .slide-up-enter-active,
+  .slide-up-leave-active
+    transition: all 0.25s ease-out
+
+  .slide-up-enter-from
+    opacity: 0
+    transform: translateY(30px)
+
+  .slide-up-leave-to
+    opacity: 0
+    transform: translateY(-30px)
+
+  .slide-right-enter-active,
+  .slide-right-leave-active
+    transition: all 0.25s ease-out
+
+  .slide-right-enter-from
+    opacity: 0
+    transform: translateX(-30px)
+
+  .slide-right-leave-to
+    opacity: 0
+    transform: translateX(30px)
+
+  .slide-left-enter-active,
+  .slide-left-leave-active
+    transition: all 0.25s ease-out
+
+  .slide-left-enter-from
+    opacity: 0
+    transform: translateX(30px)
+
+  .slide-left-leave-to
+    opacity: 0
+    transform: translateX(-30px)
+
+  .fade-enter-active,
+  .fade-leave-active
+    transition: opacity 0.25s ease-out
+
+  .fade-enter-from,
+  .fade-leave-to
+    opacity: 0
+
+  .checklist-line
+    height: 1.5rem
+    width: 2px
+    margin-block: 8px
+    @apply bg-primary-500

package/src/assets/styles/map.sass

@@ -0,0 +1,41 @@
+#axitech-google-map
+  --_header-height: 10vh
+  #axitech-widget-map
+    --_height: 100vh
+    --_height: 100dvh
+    width: 100vw
+    height: var(--_height)
+
+  #axitech-preview-map
+    width: 100%
+    height: 250px
+    border-radius: 8px
+
+  .search
+    position: absolute
+    top: 0
+    left: 0
+    width: 100vw
+    padding: 16px
+    z-index: 1
+    box-shadow: 0px 4px 10px rgba(131, 131, 131, 0.25)
+    column-gap: 12px
+    background-color: #fff
+
+  @media screen and (min-width: 768px)
+    #axitech-widget-map
+      --_height: 100vh
+      --_height: 100dvh
+      width: calc(100vw)
+      height: calc(var(--_height))
+
+    .search
+      position: absolute
+      top: 36px
+      left: 36px
+      padding: 16px
+      z-index: 1
+      box-shadow: 0px 4px 10px rgba(131, 131, 131, 0.25)
+      border-radius: 8px
+      max-width: 675px
+      column-gap: 12px

package/src/assets/styles/togglebutton.sass

@@ -0,0 +1,4 @@
+#widget-select-button
+  button
+    &[data-selected="false"]
+      @apply border-gray-400 text-fontSecondary-400 hover:border-white hover:text-white

package/src/components/base/ActionCard.vue

@@ -0,0 +1,49 @@
+<template>
+  <div id="widget-action-card" class="bg-gray-100 rounded-2xl w-full h-full p-4 flex flex-col gap-3">
+    <div class="title title4-bold">
+      <template v-if="title">
+        <div class="flex justify-start items-center gap-3">
+          <Icon v-if="icon" :icon="icon" class="text-primary" height="32px"></Icon>
+          <span>{{ title }}</span>
+        </div>
+      </template>
+      <slot v-else name="title"></slot>
+    </div>
+    <div class="content body1 text-fontSecondary-500">
+      <template v-if="content">
+        {{ content }}
+      </template>
+      <slot v-else name="content"></slot>
+    </div>
+    <div class="action">
+      <template v-if="action">
+        <a
+          class="action1-bold text-primary hover:text-primary-400 underline underline-offset-2 cursor-pointer"
+          :disabled="disabled"
+          @click.prevent="emit('action')"
+        >
+          {{ action }}
+        </a>
+      </template>
+      <slot v-else name="action"></slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { Icon } from '@iconify/vue';
+
+  const props = defineProps<{
+    icon?: string;
+    content?: string;
+    title?: string;
+    action?: string;
+    disabled?: boolean;
+  }>();
+
+  const emit = defineEmits<{
+    (event: 'action'): void;
+  }>();
+</script>
+
+<style scoped></style>

package/src/components/base/Button.vue

@@ -0,0 +1,16 @@
+<template>
+  <Button
+    class="text-primary border-primary hover:bg-primary focus:ring-primary-200 uppercase p-4 border-2 rounded-md action2-bold"
+    square
+    outline
+  >
+    <slot></slot>
+  </Button>
+</template>
+
+<script setup lang="ts">
+  // @ts-expect-error could not resolve
+  import { Button } from 'flowbite-vue';
+</script>
+
+<style scoped></style>

package/src/components/base/Collapse.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="accordion w-full">
+    <div class="w-full flex flex-row justify-between flex-nowrap items-center" @click.prevent="toggleAccordion">
+      <div class="flex flex-row gap-2 items-center justify-start">
+        <Icon icon="mdi:info-outline" class="text-primary" width="27"></Icon>
+        <h4 class="body1-bold">{{ accordionConfig.title }}</h4>
+      </div>
+      <Icon :icon="icon" width="27" class="text-primary"></Icon>
+    </div>
+    <div class="wrapper" :class="{ 'is-open': isOpen }">
+      <ul class="inner">
+        <li class="accordion-part mt-4" v-for="(bullet, index) in accordionConfig.bullets" :key="index">
+          <p class="body1">{{ bullet }}</p>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { Icon } from '@iconify/vue';
+  import { ref, computed } from 'vue';
+
+  const isOpen = ref(false);
+  // const accordionStyle = computed(() => ({ display: isOpen.value ? 'block' : 'none' }));
+  const icon = computed(() => (isOpen.value ? 'mdi:chevron-up' : 'mdi:chevron-down'));
+  const accordionConfig = {
+    title: 'Important tips at the scene to keep you safe',
+    bullets: [
+      'Move your vehicle if it is blocking traffic, and be sure to turn on your hazard lights',
+      'Make sure you and others are OK. If there are injuries, or if it is an emergency call emargency services!',
+      'Stop your vehicle, and unless injury prevents it, move all passengers and pets to a safe location',
+      'Do not apologise or admit fault to anyone, as any statements could be used against you in claims',
+      'Use our complementary Axitech Demo Support to assist you in capturing the details you need to protect your position. We can also help with fast and free recovery.',
+    ],
+  };
+
+  function toggleAccordion() {
+    isOpen.value = !isOpen.value;
+  }
+</script>

package/src/components/base/DatePicker.vue

@@ -0,0 +1,94 @@
+<template>
+  <div>
+    <input
+      v-model="date"
+      type="datetime-local"
+      class="date-time-input body1 q-py-sm"
+      :max="dayjs().format('YYYY-MM-DDTHH:mm')"
+      :min="dayjs().subtract(20, 'year').format('YYYY-MM-DDTHH:mm')"
+      :is-error="!!dateError"
+    />
+    <span v-if="dateError" class="text-negative-700">{{ dateError }}</span>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { computed, ref, watch } from 'vue';
+  import dayjs from 'dayjs';
+  import customParseFormat from 'dayjs/plugin/customParseFormat';
+  import utc from 'dayjs/plugin/utc';
+  dayjs.extend(customParseFormat);
+  dayjs.extend(utc);
+
+  const props = defineProps({
+    modelValue: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    loading: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    onlyPicker: {
+      type: Boolean,
+      default: false,
+    },
+    icon: {
+      type: String,
+      default: 'mdi-calendar-range',
+    },
+    color: {
+      type: String,
+      default: 'secondary',
+    },
+  });
+  const emit = defineEmits(['update:modelValue', 'close', 'open', 'error']);
+
+  const collisionDate = computed({
+    get: () => {
+      const date = formatDate(props.modelValue);
+      emit('update:modelValue', date);
+      return date;
+    },
+    set(value) {
+      emit('update:modelValue', value);
+    },
+  });
+
+  const date = ref(dayjs(collisionDate.value).format('YYYY-MM-DDTHH:mm'));
+  const dateError = ref('');
+
+  function formatDate(date: string) {
+    return date
+      ? dayjs(date).utc().format('ddd, MMM DD, YYYY, HH:mm')
+      : props.onlyPicker
+      ? ''
+      : dayjs().utc().format('ddd, MMM DD, YYYY, HH:mm');
+  }
+
+  function validateDate(val: string) {
+    if (dayjs(val, 'YYYY-MM-DDTHH:mm', true).isValid() && dayjs(val).isAfter(dayjs())) {
+      dateError.value = 'Please enter a date before now';
+      return false;
+    }
+    dateError.value = dayjs(val, 'YYYY-MM-DDTHH:mm', true).isValid() ? '' : 'Please enter a valid date';
+
+    return dayjs(val, 'YYYY-MM-DDTHH:mm', true).isValid();
+  }
+
+  watch(date, () => {
+    if (!validateDate(date.value)) {
+      emit('error', true);
+      return;
+    }
+    emit('error', false);
+    collisionDate.value = formatDate(`${dayjs(date.value).format('YYYY-MM-DD HH:mm')}`);
+  });
+</script>

package/src/components/base/GoogleAutocomplete.vue

@@ -0,0 +1,116 @@
+<template>
+  <div ref="inputDiv" class="w-full">
+    <Input
+      v-model="autocompleteText"
+      id="google-autocomplete"
+      placeholder="Start by entering an address"
+      prefix="mdi:magnify"
+      class="w-full md:min-w-[320px]"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { onBeforeUnmount, ref, watch } from 'vue';
+  import Input from './Input.vue';
+  import { ILocationInfo } from 'src/utils/map';
+
+  const props = defineProps<{
+    address?: string;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'placeChanged', value: ILocationInfo, place: google.maps.places.PlaceResult): void;
+    (e: 'noResult'): void;
+  }>();
+
+  const autocomplete = ref<google.maps.places.Autocomplete>();
+  let autocompleteListener: google.maps.MapsEventListener;
+  const autocompleteText = ref(props.address || '');
+  const inputDiv = ref<HTMLDivElement>();
+
+  function onPlaceChanged() {
+    if (!autocomplete.value) {
+      return;
+    }
+    const place = autocomplete.value.getPlace();
+    if (!place.geometry) {
+      return emit('noResult');
+    }
+    if (place.address_components !== undefined) {
+      emit('placeChanged', formatResult(place), place);
+      autocompleteText.value = place.formatted_address ?? '';
+    }
+  }
+
+  function getFormatValue(place: google.maps.places.PlaceResult, type: string, name: 'short_name' | 'long_name') {
+    const component = place.address_components?.find((c) => c.types.includes(type));
+    return component?.[name] ?? '';
+  }
+
+  function formatResult(place: google.maps.places.PlaceResult) {
+    const returnData: ILocationInfo = {
+      latitude: 0,
+      longitude: 0,
+      formatted_address: '',
+      address_line: '',
+      city: '',
+      state: '',
+      country: '',
+      postal_code: '',
+    };
+    if (!place.address_components) {
+      return returnData;
+    }
+    returnData.address_line = `${getFormatValue(place, 'street_number', 'short_name')} ${getFormatValue(
+      place,
+      'route',
+      'long_name'
+    )}`;
+    returnData.city = getFormatValue(place, 'postal_town', 'long_name');
+    returnData.state = getFormatValue(place, 'administrative_area_level_1', 'short_name');
+    returnData.country = getFormatValue(place, 'country', 'long_name');
+    returnData.postal_code = getFormatValue(place, 'postal_code', 'short_name');
+
+    if (!place?.geometry?.location) {
+      return returnData;
+    }
+    returnData.latitude = place.geometry.location.lat();
+    returnData.longitude = place.geometry.location.lng();
+    returnData.formatted_address = place.formatted_address ?? '';
+    return returnData;
+  }
+
+  watch(inputDiv, () => {
+    const inputElement = inputDiv.value?.getElementsByTagName('input')[0];
+    if (!inputElement) {
+      return;
+    }
+    autocomplete.value = new google.maps.places.Autocomplete(inputElement, { types: ['address'] });
+    autocompleteListener = autocomplete.value.addListener('place_changed', onPlaceChanged);
+  });
+
+  watch(
+    () => props.address,
+    () => {
+      if (props.address) {
+        autocompleteText.value = props.address;
+      }
+    },
+    {
+      immediate: true,
+    }
+  );
+
+  onBeforeUnmount(() => {
+    if (autocomplete.value) {
+      autocomplete.value?.unbindAll?.();
+      autocomplete.value?.unbind?.('place_changed');
+      Array.from(document.getElementsByClassName('pac-container'))?.forEach((element) => element?.remove());
+      google.maps.event?.removeListener?.(autocompleteListener);
+      google.maps.event?.clearInstanceListeners?.(autocomplete.value);
+    }
+  });
+</script>
+
+<style scoped></style>