149 lines
4.0 KiB
Vue
149 lines
4.0 KiB
Vue
<script setup lang="ts">
|
|
interface Plan {
|
|
provider_id: string
|
|
plan_id: string
|
|
name: string
|
|
premium: number
|
|
}
|
|
|
|
interface Props {
|
|
open: boolean
|
|
plan: Plan | null
|
|
loading?: boolean
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
loading: false
|
|
})
|
|
|
|
const emit = defineEmits<{
|
|
'update:open': [value: boolean]
|
|
accept: []
|
|
cancel: []
|
|
}>()
|
|
|
|
function close() {
|
|
emit('update:open', false)
|
|
emit('cancel')
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<Teleport to="body">
|
|
<Transition
|
|
enter-active-class="transition duration-200 ease-out"
|
|
enter-from-class="opacity-0"
|
|
enter-to-class="opacity-100"
|
|
leave-active-class="transition duration-150 ease-in"
|
|
leave-from-class="opacity-100"
|
|
leave-to-class="opacity-0"
|
|
>
|
|
<div v-if="open" class="confirm-modal-overlay" @click.self="close">
|
|
<Transition
|
|
enter-active-class="transition duration-200 ease-out"
|
|
enter-from-class="opacity-0 scale-95 translate-y-2"
|
|
enter-to-class="opacity-100 scale-100 translate-y-0"
|
|
leave-active-class="transition duration-150 ease-in"
|
|
leave-from-class="opacity-100 scale-100 translate-y-0"
|
|
leave-to-class="opacity-0 scale-95 translate-y-2"
|
|
>
|
|
<div v-if="open" class="confirm-modal">
|
|
<div class="confirm-modal-head">
|
|
<h3 class="text-lg font-semibold text-[var(--text-primary)]">Accept Quote</h3>
|
|
<button type="button" class="confirm-modal-close" @click="close">
|
|
<UIcon name="i-heroicons-x-mark" style="width: 16px; height: 16px;" />
|
|
</button>
|
|
</div>
|
|
<div class="confirm-modal-body">
|
|
<div v-if="plan" class="space-y-3">
|
|
<div class="bg-gray-50 rounded-lg p-4">
|
|
<div class="text-sm text-gray-500">Selected Plan</div>
|
|
<div class="text-lg font-semibold text-[var(--text-primary)] mt-1">{{ plan.name }}</div>
|
|
<div class="text-2xl font-bold text-green-600 mt-2">${{ plan.premium?.toLocaleString() }}</div>
|
|
<div class="text-xs text-gray-500 mt-1">Provider: {{ plan.provider_id }}</div>
|
|
</div>
|
|
<p class="text-sm text-gray-600">
|
|
Are you sure you want to accept this plan? This will trigger the solicitation process.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="confirm-modal-foot">
|
|
<div class="flex justify-end gap-3">
|
|
<UButton color="gray" variant="soft" @click="close">Cancel</UButton>
|
|
<UButton color="primary" :loading="loading" @click="emit('accept')">Accept</UButton>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
</div>
|
|
</Transition>
|
|
</Teleport>
|
|
</template>
|
|
|
|
<style scoped>
|
|
/* Modal overlay */
|
|
.confirm-modal-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 100;
|
|
background: rgba(0, 0, 0, 0.25);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 20px;
|
|
backdrop-filter: blur(2px);
|
|
}
|
|
|
|
/* Modal container */
|
|
.confirm-modal {
|
|
width: 100%;
|
|
max-width: 480px;
|
|
border-radius: 12px;
|
|
background: #ffffff;
|
|
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 4px 16px rgba(0, 0, 0, 0.08);
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Modal header */
|
|
.confirm-modal-head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 18px 20px 0;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Modal body */
|
|
.confirm-modal-body {
|
|
padding: 16px 20px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* Modal footer */
|
|
.confirm-modal-foot {
|
|
padding: 12px 20px 16px;
|
|
border-top: 1px solid rgba(0, 0, 0, 0.06);
|
|
}
|
|
|
|
/* Close button */
|
|
.confirm-modal-close {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: 6px;
|
|
border: none;
|
|
background: transparent;
|
|
color: #8a8a86;
|
|
cursor: pointer;
|
|
transition: all 150ms ease;
|
|
}
|
|
|
|
.confirm-modal-close:hover {
|
|
background: rgba(0, 0, 0, 0.05);
|
|
color: var(--text-primary);
|
|
}
|
|
</style>
|