80 lines
3.3 KiB
Vue
80 lines
3.3 KiB
Vue
<script setup>
|
|
const upload = useUploadStore()
|
|
const auth = useAuthStore()
|
|
const ui = useUiStore()
|
|
|
|
function handleConvert() {
|
|
if (!auth.isLoggedIn) { ui.openAuthModal('login'); return }
|
|
if (!auth.canConvert) { ui.openPurchaseModal(); return }
|
|
upload.convert()
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="w-full max-w-[680px] mx-auto mt-6">
|
|
|
|
<!-- Scanning spinner -->
|
|
<div v-if="upload.status === 'scanning'" class="bg-white border border-gray-200 rounded-xl p-12 flex flex-col items-center gap-4">
|
|
<BaseSpinner size="md" />
|
|
<p class="text-sm text-gray-500">Scanning your file...</p>
|
|
</div>
|
|
|
|
<!-- Scan result panel -->
|
|
<div v-else-if="upload.scanReport" class="bg-white border border-gray-200 rounded-xl p-8 space-y-6">
|
|
|
|
<!-- File name -->
|
|
<div class="flex items-center gap-2 pb-4 border-b border-gray-100">
|
|
<svg class="w-4 h-4 text-[#1a56db] flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
|
|
</svg>
|
|
<span class="text-sm font-mono text-gray-700 truncate">{{ upload.file?.name }}</span>
|
|
</div>
|
|
|
|
<StatCards
|
|
:pages="upload.scanReport.pages"
|
|
:stories="upload.scanReport.stories"
|
|
:images="upload.scanReport.images"
|
|
:tables="upload.scanReport.tables"
|
|
/>
|
|
|
|
<FontReport :fonts="upload.scanReport.fonts" />
|
|
<WarningList :warnings="upload.scanReport.warnings" />
|
|
|
|
<!-- Action row -->
|
|
<div class="pt-4 border-t border-gray-100">
|
|
|
|
<!-- No credits block -->
|
|
<div v-if="auth.isLoggedIn && !auth.canConvert"
|
|
class="flex items-center justify-between bg-red-50 border border-red-200 rounded-lg px-4 py-3 mb-4">
|
|
<span class="text-sm text-gray-800">You have no credits remaining.</span>
|
|
<button @click="ui.openPurchaseModal()" class="text-sm text-[#1a56db] font-medium hover:underline ml-3 flex-shrink-0">
|
|
Buy credits
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Credit info line -->
|
|
<p v-else-if="auth.isLoggedIn" class="text-xs text-gray-400 mb-4">
|
|
This conversion will use 1 credit<template v-if="!auth.freeUsed"> · Your free conversion</template><template v-else> · {{ auth.creditsBalance }} credit{{ auth.creditsBalance !== 1 ? 's' : '' }} remaining</template>
|
|
</p>
|
|
<p v-else class="text-xs text-gray-400 mb-4">Sign in to convert your file</p>
|
|
|
|
<div class="flex items-center justify-between gap-3">
|
|
<BaseButton variant="ghost" @click="upload.reset()">Cancel</BaseButton>
|
|
<BaseButton
|
|
variant="primary"
|
|
size="lg"
|
|
:loading="upload.status === 'converting'"
|
|
:disabled="upload.status === 'converting'"
|
|
@click="handleConvert"
|
|
>
|
|
<template v-if="!auth.isLoggedIn">Sign in to convert</template>
|
|
<template v-else-if="!auth.canConvert">Buy credits to convert</template>
|
|
<template v-else-if="upload.status === 'converting'">Converting...</template>
|
|
<template v-else>Convert to Word →</template>
|
|
</BaseButton>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|