axitech-widget 0.0.2

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

@@ -0,0 +1,83 @@
+<template>
+  <SectionWrapper id="notes">
+    <template #header>
+      <div class="w-full flex justify-between items-center">
+        <h3 class="title4-bold">Notes</h3>
+        <Transition name="slide-up">
+          <Button
+            v-if="note && !isNoteInputShown"
+            @click="showNoteInput"
+            :disabled="disabled"
+            class="!w-6 !h-6 !p-2 !rounded-full items-center justify-center flex"
+          >
+            <Icon icon="mdi:pencil"></Icon>
+          </Button>
+        </Transition>
+      </div>
+    </template>
+    <div class="flex flex-row flex-nowrap w-full justify-start gap-5">
+      <transition mode="out-in" name="slide-up">
+        <ActionCard
+          v-if="!isNoteInputShown && !note"
+          title="Tell us about the collision"
+          icon="mdi:playlist-check"
+          content="Add notes about the collision and any details that you think are important for your record"
+          action="Add a note"
+          :disabled="disabled"
+          @action="showNoteInput"
+        ></ActionCard>
+        <div v-else-if="!note" class="w-full flex flex-nowrap items-center gap-2">
+          <textarea
+            ref="textarea"
+            v-model="input"
+            :disabled="disabled"
+            placeholder="Tell us about the collision"
+            class="bg-white border w-full border-gray-300 text-fontSecondary900 text-sm rounded-lg focus:ring-primary-200 focus:border-primary-500 block p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 pr-10 overflow-hidden"
+          />
+          <Button
+            :disabled="disabled"
+            class="!w-8 !h-8 !p-2 !rounded-full items-center justify-center flex"
+            @click="saveNote"
+          >
+            <Icon icon="mdi:send-outline"></Icon>
+          </Button>
+        </div>
+        <p class="body-1 break-words" v-else>{{ note }}</p>
+      </transition>
+    </div>
+  </SectionWrapper>
+</template>
+
+<script lang="ts" setup>
+  import { useTextareaAutosize, useVModel } from '@vueuse/core';
+  import { nextTick, ref } from 'vue';
+
+  import ActionCard from 'components/base/ActionCard.vue';
+  import SectionWrapper from 'components/claims-widget/components/accident/SectionWrapper.vue';
+  import Button from 'components/base/Button.vue';
+  import { Icon } from '@iconify/vue';
+
+  const props = defineProps<{
+    modelValue: string;
+    disabled?: boolean;
+  }>();
+  const emit = defineEmits<{
+    (e: 'update:modelValue', value: string): void;
+  }>();
+
+  const { textarea, input } = useTextareaAutosize();
+  const note = useVModel(props, 'modelValue', emit);
+  const isNoteInputShown = ref(false);
+
+  function showNoteInput() {
+    isNoteInputShown.value = true;
+    note.value = '';
+  }
+
+  function saveNote() {
+    note.value = input.value;
+    nextTick(() => {
+      isNoteInputShown.value = false;
+    });
+  }
+</script>

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

@@ -0,0 +1,16 @@
+<template>
+  <section class="flex flex-col items-start w-full gap-3 mb-8">
+    <slot name="header">
+      <h3 class="title4-bold">{{ title }}</h3>
+    </slot>
+    <div class="flex flex-row flex-nowrap w-full justify-start gap-5">
+      <slot></slot>
+    </div>
+  </section>
+</template>
+
+<script lang="ts" setup>
+  defineProps<{
+    title?: string;
+  }>();
+</script>

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

@@ -0,0 +1,60 @@
+<template>
+  <SectionWrapper id="your-vehicle">
+    <template #header>
+      <div class="w-full flex justify-between items-center">
+        <h3 class="title4-bold">Your Vehicle</h3>
+        <Button @click="openVehicleImageUpload" 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="!vehicleImages?.length"
+      title="Add photos of your vehicle"
+      icon="mdi:car-door"
+      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"
+      action="Add photos"
+      @action="openVehicleImageUpload"
+    ></ActionCard>
+    <div v-else class="flex flex-wrap gap-4">
+      <img
+        :src="image"
+        width="120"
+        height="120"
+        :alt="`vehicle-damage${index}`"
+        class="rounded aspect-square object-cover"
+        v-for="(image, index) in vehicleImages"
+        :key="image"
+      />
+    </div>
+    <ImageUpload
+      v-model="isVehicleImageUploadOpen"
+      title="Add photos of your vehicle"
+      info="Adding details of the damage to your vehicle helps to ensure we can book your vehicle into the right services, and may help in any Insurance decisions should you wish to claim"
+      @imagesAdded="saveVehicleImages"
+    ></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';
+
+  const isVehicleImageUploadOpen = ref(false);
+  const vehicleImages = ref<string[]>([]);
+
+  function openVehicleImageUpload() {
+    isVehicleImageUploadOpen.value = true;
+  }
+  function saveVehicleImages(images: string[]) {
+    vehicleImages.value = images;
+    isVehicleImageUploadOpen.value = false;
+  }
+</script>
+
+<style scoped></style>

package/src/components/claims-widget/components/fireWater/FireWater.vue

@@ -0,0 +1,42 @@
+<template>
+  <section class="w-full mx-auto flex flex-col justify-start items-center content-center">
+    <button 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">Fire, Water, Theft or Vandalism</p>
+    </button>
+    <div class="flex flex-col items-center">
+      <Unsupported></Unsupported>
+      <div class="py-5 w-full flex flex-col items-center">
+        <div class="flex flex-col items-start">
+          <h2 class="title3-bold font-medium mb-4">For claims support please call us</h2>
+          <p class="body3 text-fontSecondary-500 mb-9">
+            We're sorry, we can't support reporting these types of claims online yet
+          </p>
+          <p class="body3 text-fontSecondary-500 mb-9">
+            To start a claim for an incident related to Fire, Water, Theft or Vandalism, please call us 0330 058 4077
+          </p>
+        </div>
+
+        <button
+          class="max-w-xs w-full title2-bold rounded bg-primary py-3 text-white hover:bg-primary hover:shadow-md duration-75 uppercase"
+        >
+          <div class="flex flex-row flex-nowrap w-full justify-center items-center">
+            Call Us
+            <Icon icon="mdi-light:chevron-right" height="32" />
+          </div>
+        </button>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+  import { Icon } from '@iconify/vue';
+  import Unsupported from '../illustration/Unsupported.vue';
+
+  const emit = defineEmits<{
+    (event: 'back'): void;
+  }>();
+</script>
+
+<style scoped></style>