hgh_admin/resources/js/views/wizard-examples/create-deal/DealReviewComplete.vue
2024-05-29 22:34:28 +05:00

125 lines
2.4 KiB
Vue

<script setup>
import reviewAndComplete from '@images/pages/create-deal-review-complete.png'
const props = defineProps({
formData: {
type: null,
required: true,
},
})
const emit = defineEmits(['update:formData'])
const formData = ref(props.formData)
watch(formData, () => {
emit('update:formData', formData.value)
})
</script>
<template>
<VRow>
<VCol
cols="12"
md="7"
>
<h4 class="text-h4 mb-4">
Almost done! 🚀
</h4>
<p>Confirm your deal details information and submit to create it.</p>
<table class="text-base">
<tr>
<td style="inline-size: 202px;">
<p class="font-weight-medium mb-2">
Deal Type
</p>
</td>
<td>
<p class="mb-2">
Percentage
</p>
</td>
</tr>
<tr>
<td>
<p class="font-weight-medium mb-2">
Amount
</p>
</td>
<td>
<p class="mb-2">
25%
</p>
</td>
</tr>
<tr>
<td>
<p class="font-weight-medium mb-2">
Deal Code
</p>
</td>
<td>
<p class="mb-2">
<VChip
size="small"
color="warning"
>
25PEROFF
</VChip>
</p>
</td>
</tr>
<tr>
<td>
<p class="font-weight-medium mb-2">
Deal Title
</p>
</td>
<td>
<p class="mb-2">
Black friday sale, 25% OFF
</p>
</td>
</tr>
<tr>
<td>
<p class="font-weight-medium mb-2">
Deal Duration
</p>
</td>
<td>
<p class="mb-2">
2021-07-14 to 2021-07-30
</p>
</td>
</tr>
</table>
<VSwitch
v-model="formData.isDealDetailsConfirmed"
label="I have confirmed the deal details."
class="mb-3"
/>
</VCol>
<VCol
cols="12"
md="5"
>
<div class="border rounded pa-4 pb-0">
<VImg
width="178"
:src="reviewAndComplete"
class="mx-auto"
/>
</div>
</VCol>
</VRow>
</template>