145 lines
5.3 KiB
Vue
145 lines
5.3 KiB
Vue
<script setup>
|
|
import { computed, ref } from 'vue'
|
|
import { Head, router, usePage } from '@inertiajs/vue3'
|
|
import { ArrowRightStartOnRectangleIcon } from '@heroicons/vue/20/solid'
|
|
import AppLayout from '@/Layouts/AppLayout.vue'
|
|
import AppButton from '@/Components/AppButton.vue'
|
|
|
|
defineOptions({ layout: AppLayout })
|
|
|
|
const props = defineProps({
|
|
hasDisclaimer: Boolean,
|
|
})
|
|
|
|
const page = usePage()
|
|
|
|
const disclaimerAgreed = ref(false)
|
|
|
|
const isAuthenticated = computed(() => {
|
|
return page.props.auth?.user != null
|
|
})
|
|
|
|
const canContinue = computed(() => {
|
|
return !props.hasDisclaimer || disclaimerAgreed.value
|
|
})
|
|
|
|
const userInfo = computed(() => {
|
|
const user = page.props.auth?.user
|
|
if (!user) return null
|
|
|
|
const parts = []
|
|
if (user.job_title) parts.push(user.job_title)
|
|
if (user.company_name) {
|
|
if (parts.length > 0) {
|
|
parts.push('at', user.company_name)
|
|
} else {
|
|
parts.push(user.company_name)
|
|
}
|
|
}
|
|
|
|
return parts.length > 0 ? parts.join(' ') : null
|
|
})
|
|
|
|
const handleContinue = () => {
|
|
router.post('/screening')
|
|
}
|
|
|
|
const handleLogout = () => router.post('/logout')
|
|
</script>
|
|
|
|
<template>
|
|
<Head title="Welcome" />
|
|
|
|
<div class="flex items-center justify-center py-16">
|
|
<div class="text-center max-w-2xl mx-auto px-4">
|
|
<h1 class="text-4xl font-bold text-white mb-4">Go / No Go</h1>
|
|
<p v-if="userInfo" class="text-gray-400 mb-4">
|
|
{{ userInfo }}
|
|
</p>
|
|
<p class="text-gray-400 mb-4 text-lg">
|
|
Baker Tilly International Go/No Go Checklist
|
|
</p>
|
|
<p class="text-gray-400 mb-8">
|
|
This tool helps you evaluate business opportunities through a structured assessment process.
|
|
You will first complete a short pre-screening questionnaire, followed by a detailed category-specific checklist
|
|
to determine whether to pursue (Go), decline (No Go), or escalate (Consult Leadership) an opportunity.
|
|
</p>
|
|
|
|
<!-- Disclaimer checkbox — only shown when authenticated and a disclaimer exists -->
|
|
<div v-if="isAuthenticated && hasDisclaimer" class="flex items-start justify-center gap-3 mb-6">
|
|
<label class="flex items-start gap-3 cursor-pointer select-none group">
|
|
<!-- Hidden native checkbox -->
|
|
<input
|
|
v-model="disclaimerAgreed"
|
|
type="checkbox"
|
|
class="sr-only peer"
|
|
/>
|
|
<!-- Custom checkbox -->
|
|
<span
|
|
class="
|
|
mt-0.5 flex-shrink-0
|
|
w-5 h-5 rounded
|
|
border-2 border-gray-500
|
|
bg-transparent
|
|
flex items-center justify-center
|
|
transition-all duration-200
|
|
peer-checked:bg-primary peer-checked:border-primary
|
|
group-hover:border-gray-300
|
|
"
|
|
aria-hidden="true"
|
|
>
|
|
<!-- Checkmark — visible when checked via peer -->
|
|
<svg
|
|
class="w-3 h-3 text-gray-900 opacity-0 transition-opacity duration-200 peer-checked:opacity-100"
|
|
:class="{ 'opacity-100': disclaimerAgreed }"
|
|
viewBox="0 0 12 12"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M2 6l3 3 5-5"
|
|
stroke="currentColor"
|
|
stroke-width="1.8"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
<!-- Label text -->
|
|
<span class="text-sm text-gray-400 text-left leading-relaxed">
|
|
I have read and agree to the
|
|
<a
|
|
href="/disclaimer"
|
|
class="text-primary underline underline-offset-2 hover:text-primary-dark transition-colors duration-150"
|
|
>
|
|
disclaimer
|
|
</a>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
|
|
<AppButton
|
|
v-if="isAuthenticated"
|
|
size="lg"
|
|
:disabled="!canContinue"
|
|
@click="handleContinue"
|
|
data-cy="start-screening"
|
|
>
|
|
Continue
|
|
</AppButton>
|
|
<button
|
|
v-if="isAuthenticated"
|
|
type="button"
|
|
class="mt-3 flex items-center gap-1.5 mx-auto text-sm text-gray-500 hover:text-gray-300 transition-colors duration-150 cursor-pointer"
|
|
@click="handleLogout"
|
|
>
|
|
<ArrowRightStartOnRectangleIcon class="w-4 h-4" />
|
|
Log out
|
|
</button>
|
|
<AppButton v-else size="lg" href="/login" external>
|
|
Log in
|
|
</AppButton>
|
|
</div>
|
|
</div>
|
|
</template>
|