axitech-widget 0.0.2

package/src/components/claims-widget/components/SkeletonLoader.vue

@@ -0,0 +1,77 @@
+<template>
+  <div :class="[bgClass, loaderClass, 'relative overflow-hidden']">
+    <div class="shimmer absolute top-0 right-0 bottom-0 left-0" :style="shimmerStyle"></div>
+    <slot />
+  </div>
+</template>
+
+<script lang="ts">
+  const LOADER_TYPES = { rectangle: 'rectangle', circle: 'circle' };
+
+  const LOADER_CSS_CLASSES = {
+    [LOADER_TYPES.rectangle]: 'rounded',
+    [LOADER_TYPES.circle]: 'rounded-full',
+  };
+
+  type LoaderTypesKeys = keyof typeof LOADER_TYPES;
+  type LoaderTypesValues = (typeof LOADER_TYPES)[LoaderTypesKeys];
+
+  const SHIMMER_COLOR = '#ffffff';
+
+  const isHexColor = (hexColor: string) => {
+    const hex = hexColor.replace('#', '');
+
+    return typeof hexColor === 'string' && hexColor.startsWith('#') && hex.length === 6 && !isNaN(Number('0x' + hex));
+  };
+
+  const hexToRgb = (hex: string) => `${hex.match(/\w\w/g)?.map((x) => +`0x${x}`)}`;
+</script>
+
+<script setup lang="ts">
+  import { computed } from 'vue';
+
+  const props = defineProps({
+    type: {
+      type: String,
+      default: LOADER_TYPES.rectangle,
+      validator(value: LoaderTypesValues) {
+        return Object.values(LOADER_TYPES).includes(value);
+      },
+    },
+    bgClass: {
+      type: String,
+      default: 'bg-gray-300',
+    },
+    cssClass: {
+      type: String,
+      default: '',
+    },
+    shimmerColor: {
+      type: String,
+      default: SHIMMER_COLOR,
+    },
+  });
+
+  const shimmerStyle = computed(() => {
+    const rgb = isHexColor(props.shimmerColor) ? hexToRgb(props.shimmerColor) : SHIMMER_COLOR;
+
+    return {
+      backgroundImage: `linear-gradient(90deg, rgba(${rgb}, 0) 0%, rgba(${rgb}, 0.2) 20%, rgba(${rgb}, 0.5) 60%, rgba(${rgb}, 0))`,
+    };
+  });
+
+  const loaderClass = computed(() => (props.cssClass ? props.cssClass : LOADER_CSS_CLASSES[props.type]));
+</script>
+
+<style lang="css" scoped>
+  .shimmer {
+    transform: translateX(-100%);
+    animation: shimmer 1.4s infinite;
+  }
+
+  @keyframes shimmer {
+    100% {
+      transform: translateX(100%);
+    }
+  }
+</style>

package/src/components/claims-widget/components/StepConfirm.vue

@@ -0,0 +1,85 @@
+<template>
+  <section id="widget-confirm" class="w-full mx-auto flex flex-col justify-start items-center content-center">
+    <p class="title3-bold mb-10 w-full text-start">Details Submitted Successfully</p>
+    <div class="flex flex-col items-center">
+      <SubmittedSuccessfully></SubmittedSuccessfully>
+      <div class="py-5 w-full flex flex-col items-center text-center gap-4">
+        <div class="flex flex-col items-center">
+          <h2 class="title3-bold font-medium mb-4">We'll be in touch</h2>
+          <p class="body1 text-fontSecondary-500 mb-9">
+            Thank you for letting us know about the collision, we'll review these details and contact you soon
+          </p>
+        </div>
+        <div class="w-full flex flex-col items-center">
+          <div
+            class="flex items-start flex-nowrap justify-start gap-2"
+            v-for="(item, index) in progressList"
+            :key="index"
+          >
+            <div class="flex flex-col items-center relative h-full justify-between">
+              <Icon
+                :icon="item.checked ? 'mdi:check-circle' : 'mdi:circle-outline'"
+                width="29px"
+                class="text-primary-500"
+              ></Icon>
+              <div v-if="index !== progressList.length - 1" class="checklist-line"></div>
+            </div>
+            <span class="text-start body1 max-w-sm">{{ item.text }}</span>
+          </div>
+        </div>
+        <div class="border w-full rounded-md">
+          <a :href="`tel:${config.contact.phone}`" class="w-full hover:bg-slate-100 cursor-pointer p-4 block">
+            <div class="body1 flex justify-between h-full items-center">
+              <div class="text-start">
+                <p>Talk to a person</p>
+                <span class="body2 text-fontSecondary-500">{{ config.contact.phone }}</span>
+              </div>
+              <Icon icon="mdi:chevron-right" height="24px"></Icon>
+            </div>
+          </a>
+          <a :href="`mailto:${config.contact.email}`" class="w-full cursor-pointer hover:bg-slate-100 p-4 block">
+            <div class="body1 flex justify-between h-full items-center">
+              <div class="text-start">
+                <p>Email us</p>
+                <span class="body2 text-fontSecondary-500">{{ config.contact.email }}</span>
+              </div>
+              <Icon icon="mdi:chevron-right" height="24px"></Icon>
+            </div>
+          </a>
+        </div>
+        <a
+          class="action1-bold text-primary hover:text-primary-400 underline underline-offset-2 cursor-pointer"
+          @click.prevent="emit('back')"
+        >
+          Report another incident
+        </a>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+  import { Icon } from '@iconify/vue';
+  import SubmittedSuccessfully from './illustration/SubmittedSuccessfully.vue';
+  import { Ref, inject, onMounted } from 'vue';
+  import { config } from 'src/utils/config';
+
+  const emit = defineEmits<{
+    (event: 'back'): void;
+  }>();
+
+  const rootElement = inject<Ref<HTMLDivElement>>(config.value.rootKey);
+
+  const progressList = [
+    { text: 'We can now review the information to determine the next steps', checked: true },
+    { text: 'We`ve started to generate options for where to recover your vehicle', checked: true },
+    { text: 'Our claims experts will follow up with some detailed questions', checked: false },
+  ];
+
+  onMounted(() => {
+    if (!rootElement?.value) return;
+    rootElement.value.scrollIntoView({ behavior: 'smooth', block: 'start' });
+  });
+</script>
+
+<style scoped></style>

package/src/components/claims-widget/components/StepSelector.vue

@@ -0,0 +1,58 @@
+<template>
+  <div>
+    <h2 class="title3-bold font-medium mb-4">How to make a claim</h2>
+    <p class="body3 text-fontSecondary-500 mb-9">Please select the type of claim you are looking for support with</p>
+    <ul role="list" class="flex flex-col gap-y-4">
+      <li v-for="card in cards" :key="card.name" class="flex">
+        <button class="flex items-start rounded p-4 border border-grey-400 w-full" @click="card.onSelect">
+          <div class="flex h-12 w-12 items-center justify-center overflow-hidden">
+            <Icon :icon="card.icon" :alt="`${card.name}-icon`" class="h-24 w-24 text-primary" />
+          </div>
+
+          <div class="ml-4">
+            <h2 class="body1-bold text-start">{{ card.name }}</h2>
+            <p class="body3 text-start text-fontSecondary-500">{{ card.description }}</p>
+          </div>
+        </button>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue';
+  import { Icon } from '@iconify/vue';
+
+  const emit = defineEmits<{
+    (event: 'select', index: number): void;
+  }>();
+
+  const cards = ref([
+    {
+      name: 'Accident',
+      description: 'Start a Claim for an Accident online',
+      icon: 'uil:car',
+      onSelect: () => {
+        emit('select', 0);
+      },
+    },
+    {
+      name: 'Windscreen',
+      description: 'Claim for Windscreen repair',
+      icon: 'mdi:car-windshield-outline',
+      onSelect: () => {
+        emit('select', 1);
+      },
+    },
+    {
+      name: 'Fire, Water, Theft or Vandalism',
+      description: 'Claim for another type of incident',
+      icon: 'mdi:car-door',
+      onSelect: () => {
+        emit('select', 2);
+      },
+    },
+  ]);
+</script>
+
+<style scoped></style>

package/src/components/claims-widget/components/accident/Accident.vue

@@ -0,0 +1,267 @@
+<template>
+  <main
+    class="randomclass w-full h-full mx-auto flex flex-col justify-start items-center content-center"
+    id="claims-accident"
+  >
+    <button :disabled="isLoading" class="w-full flex flex-row mb-10 items-center" @click="emit('back')">
+      <Icon icon="mdi-light:chevron-left" height="32" />
+      <p class="title3-bold">Accident Support</p>
+    </button>
+    <section class="flex flex-col items-center w-full mt-6">
+      <Collapse></Collapse>
+    </section>
+    <section class="flex flex-col items-center w-full gap-6 mb-8 mt-6">
+      <Accident />
+      <h5 class="title4-bold">If you've been in an accident</h5>
+      <p class="body1 text-fontSecondary-500">
+        Let us know as soon as possible, so we can get you moving again. We've built a helpful tool to make this quick
+        and easy to do online
+      </p>
+    </section>
+    <SectionWrapper id="date-picker" class="gap-6" title="Approximately when did the collision occur?">
+      <DatePicker v-model="date" :disabled="isLoading"></DatePicker>
+    </SectionWrapper>
+    <MapSection
+      v-if="mapKey"
+      v-model="location"
+      id="location-selector"
+      class="gap-6"
+      title="Where did the collision occur?"
+    ></MapSection>
+    <SectionWrapper v-for="value in selectValues" :key="value.key" :id="value.key" class="gap-6">
+      <template #header>
+        <div class="flex w-full justify-between items-center">
+          <h3 class="title4-bold">{{ value.title }}</h3>
+          <Icon icon="mdi:info-outline" height="20"></Icon>
+        </div>
+      </template>
+      <SelectButton
+        v-model="value.value"
+        :disabled="isLoading"
+        :options="value.options"
+        :button-class="value.customClass"
+      ></SelectButton>
+    </SectionWrapper>
+    <ImageSection
+      v-model="vehicleImages"
+      id="your-vehicle"
+      :disabled="isLoading"
+      title="Your Vehicle"
+      card-title="Add photos of your vehicle"
+      card-content="Adding photos and details of the damage to your vehicle helps us to assess it earlier and find the right services for you, ultimately resulting in a more efficient repair"
+      icon="mdi:car-door"
+    ></ImageSection>
+    <ImageSection
+      v-model="additionalImages"
+      id="additional-photos"
+      :disabled="isLoading"
+      title="Additional Photos"
+      card-title="Add additional photos and details"
+      card-content="To protect your position, we recommend that you try to collect photos of the scene, damaged property and any additional details that help to 'tell the story' of what happened"
+      icon="mdi:image-outline"
+    ></ImageSection>
+    <NoteSection v-model="note" :disabled="isLoading"></NoteSection>
+    <SectionWrapper id="contact-time">
+      <div>
+        <label class="title4-bold">When's the best time to call you?</label>
+        <p class="body1 text-fontSecondary500">We'll try to call you at your preferred time</p>
+        <fieldset class="mt-5">
+          <legend class="sr-only">Notification method</legend>
+          <div class="flex flex-col gap-5">
+            <div v-for="notificationTime in notificationTimes" :key="notificationTime.id" class="flex items-center">
+              <input
+                :disabled="isLoading"
+                :id="notificationTime.id"
+                name="notification-method"
+                type="radio"
+                :checked="notificationTime.id === selectedNotificationTime"
+                class="h-5 w-5 border-primary-500 border-2 text-primary-600 focus:ring-primary-600 focus-within:bg-primary-500 active:bg-primary-500"
+                :class="{ '!bg-primary-500': notificationTime.id === selectedNotificationTime }"
+                @input="selectedNotificationTime = notificationTime.id"
+              />
+              <label :for="notificationTime.id" class="ml-3 block body1-bold">{{ notificationTime.title }}</label>
+            </div>
+          </div>
+        </fieldset>
+      </div>
+    </SectionWrapper>
+    <SectionWrapper id="almost-there">
+      <template #header>
+        <h3 class="title2-bold">Almost there...</h3>
+      </template>
+      <fieldset>
+        <legend class="sr-only">I Accept Privacy Policy</legend>
+        <div class="space-y-5">
+          <div class="relative flex items-start">
+            <div class="flex h-6 items-center">
+              <input
+                v-model="isPrivacyAccepted"
+                id="comments"
+                :disabled="isLoading"
+                name="comments"
+                type="checkbox"
+                :class="{ '!bg-primary-500': isPrivacyAccepted }"
+                class="h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-600"
+              />
+            </div>
+            <div class="ml-3 text-sm leading-6">
+              <label for="comments" class="body1 text-fontSecondary500">
+                By submitting the details above, I agree to be contacted by the Volvo claims team via email or telephone
+                regarding my claim. For more information please see our
+                <span class="">Privacy Policy</span>
+              </label>
+            </div>
+          </div>
+        </div>
+      </fieldset>
+    </SectionWrapper>
+    <div id="almost-there" class="px-8 w-full">
+      <Button
+        class="bg-primary text-white w-full flex justify-center"
+        :loading="isLoading"
+        :disabled="isLoading"
+        @click="submitResult"
+      >
+        <div class="flex flex-nowrap gap-2 justify-center items-center w-full">
+          <span class="title2-bold">Continue</span>
+          <Icon icon="mdi:chevron-right" height="28px"></Icon>
+        </div>
+      </Button>
+      <div
+        v-if="errorMessage"
+        class="mt-4 w-full border-2 border-negative-500 bg-negative-100 text-negative-500 font-bold rounded p-4"
+      >
+        {{ errorMessage }}
+      </div>
+    </div>
+  </main>
+</template>
+
+<script setup lang="ts">
+  import Button from 'components/base/Button.vue';
+  import Collapse from 'components/base/Collapse.vue';
+  import DatePicker from 'components/base/DatePicker.vue';
+  import MapSection from './MapSection.vue';
+  import SelectButton from 'components/base/SelectButton.vue';
+  import Accident from '../../components/illustration/Accident.vue';
+  import SectionWrapper from 'components/claims-widget/components/accident/SectionWrapper.vue';
+  import ImageSection from 'components/claims-widget/components/accident/ImageSection.vue';
+  import NoteSection from 'components/claims-widget/components/accident/NoteSection.vue';
+
+  import { Icon } from '@iconify/vue';
+  import { ref } from 'vue';
+  import { ILocationInfo } from 'src/utils/map';
+  import { config } from 'src/utils/config';
+  import { ApiPaths, request } from 'src/utils/request';
+
+  const emit = defineEmits<{
+    (event: 'back'): void;
+    (event: 'next'): void;
+  }>();
+  const mapKey = process.env.VITE_APP_GMAPS_KEY;
+  const errorMessage = ref('');
+  const isLoading = ref(false);
+  const isPrivacyAccepted = ref(false);
+
+  const date = ref('');
+  const note = ref('');
+  const location = ref<ILocationInfo>();
+  const selectedNotificationTime = ref('morning');
+  const additionalImages = ref<string[]>([]);
+  const vehicleImages = ref<string[]>([]);
+
+  const selectValues = ref([
+    {
+      options: [
+        { label: 'My Vehicle Is Safe To Drive', value: true },
+        { label: 'No, I Will need Recovery', value: false },
+      ],
+      value: false,
+      key: 'vehicleRoadWorthy',
+      customClass: 'w-full col-span-full sm:col-auto',
+      title: 'Is your vehicle roadworthy?',
+    },
+    {
+      options: [
+        { label: 'Yes', value: true },
+        { label: 'No', value: false },
+      ],
+      value: false,
+      key: 'driver',
+      title: 'Were you the driver?',
+    },
+    {
+      options: [
+        { label: 'Yes', value: true },
+        { label: 'No', value: false },
+      ],
+      value: false,
+      key: 'injured',
+      title: 'Were you injured?',
+    },
+    {
+      options: [
+        { label: 'Yes', value: true },
+        { label: 'No', value: false },
+      ],
+      value: false,
+      key: 'thirdPartiesInvolved',
+      title: 'Were any other third parties involved?',
+    },
+    {
+      options: [
+        { label: 'Yes', value: true },
+        { label: 'No', value: false },
+      ],
+      value: false,
+      key: 'witnessesPresent',
+      title: 'Were any witnesses present?',
+    },
+  ]);
+
+  const notificationTimes = [
+    { id: 'morning', title: 'Morning' },
+    { id: 'afternoon', title: 'Afternoon' },
+    { id: 'evening', title: 'Evening' },
+    { id: 'anytime', title: 'Call anytime' },
+  ];
+
+  async function submitResult() {
+    if (!isPrivacyAccepted.value) {
+      errorMessage.value = 'You must accept the privacy policy before proceeding!';
+      return;
+    }
+    if (!location.value?.formatted_address) {
+      errorMessage.value = 'Please provide provide your location!';
+      return;
+    }
+    errorMessage.value = '';
+    isLoading.value = true;
+
+    const result = {
+      notificationTime: selectedNotificationTime.value,
+      ...(Object.fromEntries(selectValues.value.map(({ value, key }) => [key, value])) as {
+        vehicleRoadWorthy: boolean;
+        driver: boolean;
+        injured: boolean;
+        thirdPartiesInvolved: boolean;
+        witnessesPresent: boolean;
+      }),
+      date: date.value,
+      location: location.value,
+      vehicleImages: vehicleImages.value,
+      additionalImages: additionalImages.value,
+      note: note.value,
+      user: config.value.user,
+      insurance: config.value.insurance,
+      incidentType: 'Collision',
+    };
+    isLoading.value = true;
+    const [, error] = await request.post(ApiPaths.submission, result);
+    if (error) {
+      errorMessage.value = error.message;
+    }
+    isLoading.value = false;
+    emit('next');
+  }
+</script>

package/src/components/claims-widget/components/accident/ImageSection.vue

@@ -0,0 +1,82 @@
+<template>
+  <SectionWrapper>
+    <template #header>
+      <div class="w-full flex justify-between items-center">
+        <h3 class="title4-bold">{{ title }}</h3>
+        <Button
+          v-if="previewImages?.length"
+          @click="openVehicleImageUpload"
+          :disabled="disabled"
+          class="!w-6 !h-6 !p-2 !rounded-full items-center justify-center flex"
+        >
+          <Icon icon="mdi:pencil"></Icon>
+        </Button>
+      </div>
+    </template>
+    <ActionCard
+      v-if="!previewImages?.length"
+      :title="cardTitle"
+      :icon="icon"
+      :content="cardContent"
+      :disabled="disabled"
+      action="Add photos"
+      @action="openVehicleImageUpload"
+    ></ActionCard>
+    <div
+      v-else
+      class="grid grid-cols-[repeat(auto-fill,_minmax(80px,_1fr))] sm:grid-cols-[repeat(auto-fill,_minmax(120px,_1fr))] gap-4 w-full"
+    >
+      <div class="w-full h-full" v-for="(image, index) in previewImages" :key="image">
+        <img
+          :src="image"
+          height="80"
+          :alt="`vehicle-damage${index}`"
+          class="rounded aspect-square object-cover w-full sm:h-28"
+        />
+      </div>
+    </div>
+    <ImageUpload
+      v-model="isImageUploadOpen"
+      :title="cardTitle"
+      :info="cardContent"
+      @imagesAdded="saveimages"
+    ></ImageUpload>
+  </SectionWrapper>
+</template>
+
+<script setup lang="ts">
+  import Button from 'components/base/Button.vue';
+  import ActionCard from 'components/base/ActionCard.vue';
+  import ImageUpload from 'components/base/uploader/ImageUpload.vue';
+  import SectionWrapper from './SectionWrapper.vue';
+
+  import { Icon } from '@iconify/vue';
+  import { ref } from 'vue';
+  import { useVModel } from '@vueuse/core';
+
+  const props = defineProps<{
+    title: string;
+    cardTitle: string;
+    cardContent: string;
+    icon: string;
+    modelValue: string[];
+    disabled?: boolean;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'update:modelValue', images: string[]): void;
+  }>();
+
+  const isImageUploadOpen = ref(false);
+  const previewImages = useVModel(props, 'modelValue', emit);
+
+  function openVehicleImageUpload() {
+    isImageUploadOpen.value = true;
+  }
+  function saveimages(images: string[]) {
+    isImageUploadOpen.value = false;
+    previewImages.value = images;
+  }
+</script>
+
+<style scoped></style>

package/src/components/claims-widget/components/accident/MapSection.vue

@@ -0,0 +1,72 @@
+<template>
+  <section class="flex flex-col items-start w-full gap-3 mb-8">
+    <slot name="header">
+      <div class="w-full flex justify-between items-center">
+        <h3 class="title4-bold">{{ title }}</h3>
+        <div v-if="location?.latitude" class="flex items-center gap-2">
+          <Button @click="toggleMap(true)" class="!w-6 !h-6 !p-2 !rounded-full items-center justify-center flex">
+            <Icon icon="mdi:pencil"></Icon>
+          </Button>
+          <Button
+            @click="isOpenDeleteModal = true"
+            class="!w-6 !h-6 !p-2 !rounded-full items-center justify-center flex"
+          >
+            <Icon icon="mdi:trash-can-outline"></Icon>
+          </Button>
+        </div>
+      </div>
+    </slot>
+    <div class="flex flex-row flex-nowrap w-full justify-start gap-5">
+      <GoogleMap v-model="location" :is-open="isMapOpen" @update:is-open="toggleMap"></GoogleMap>
+    </div>
+    <Modal v-if="isOpenDeleteModal" v-model="isOpenDeleteModal">
+      <template #header><p class="font-bold">Are you sure you want to delete this location?</p> </template>
+      <div class="w-full h-full flex flex-col gap-4 items-center">
+        <p>This action cannot be undone</p>
+      </div>
+      <template #footer>
+        <div class="w-full flex justify-center">
+          <Button class="bg-primary text-white px-12" @click="deleteLocation">
+            <div class="flex flex-nowrap gap-2 justify-center items-center">
+              <span class="title2-bold">Delete</span>
+            </div>
+          </Button>
+        </div>
+      </template>
+    </Modal>
+  </section>
+</template>
+
+<script lang="ts" setup>
+  import { computed, defineAsyncComponent, ref } from 'vue';
+  import { ILocationInfo } from 'src/utils/map';
+  import { Icon } from '@iconify/vue';
+  import GoogleMap from 'components/base/GoogleMap.vue';
+  import Button from 'components/base/Button.vue';
+
+  const Modal = defineAsyncComponent(() => import('components/base/Modal.vue'));
+  const props = defineProps<{
+    modelValue?: ILocationInfo;
+    title?: string;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'update:modelValue', value: ILocationInfo | undefined): void;
+  }>();
+
+  const location = computed<ILocationInfo | undefined>({
+    get: () => props.modelValue,
+    set: (value: ILocationInfo | undefined) => emit('update:modelValue', value),
+  });
+  const isMapOpen = ref(false);
+  const isOpenDeleteModal = ref(false);
+
+  function toggleMap(value: boolean) {
+    isMapOpen.value = value;
+  }
+
+  function deleteLocation() {
+    location.value = undefined;
+    isOpenDeleteModal.value = false;
+  }
+</script>