Michael Mainguy
3b6c296385
Vue 3 + TypeScript + Vite + Tailwind CSS v4 multi-step lead capture form with config-driven white-labeling, externalized content (content.json), and "starting at" pricing estimates. Mobile-first with camera photo upload. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
81 lines
2.3 KiB
Vue
81 lines
2.3 KiB
Vue
<script setup lang="ts">
|
|
import { useLeadForm } from '../composables/useLeadForm'
|
|
import { useContent } from '../composables/useContent'
|
|
import StepIndicator from './StepIndicator.vue'
|
|
import EquipmentStep from './EquipmentStep.vue'
|
|
import PhotoUpload from './PhotoUpload.vue'
|
|
import ScheduleStep from './ScheduleStep.vue'
|
|
import ContactStep from './ContactStep.vue'
|
|
import ReviewStep from './ReviewStep.vue'
|
|
import SuccessScreen from './SuccessScreen.vue'
|
|
|
|
const {
|
|
currentStep,
|
|
currentStepIndex,
|
|
isFirstStep,
|
|
isLastStep,
|
|
submitted,
|
|
steps,
|
|
stepLabels,
|
|
nextStep,
|
|
prevStep,
|
|
goToStep,
|
|
submitForm,
|
|
} = useLeadForm()
|
|
|
|
const { content } = useContent()
|
|
</script>
|
|
|
|
<template>
|
|
<div v-if="submitted" class="animate-fade-in">
|
|
<SuccessScreen />
|
|
</div>
|
|
|
|
<div v-else>
|
|
<StepIndicator
|
|
:steps="[...steps]"
|
|
:step-labels="stepLabels"
|
|
:current-index="currentStepIndex"
|
|
@go-to="goToStep"
|
|
/>
|
|
|
|
<div class="mt-6 bg-white rounded-xl shadow-sm border border-gray-200 p-6">
|
|
<EquipmentStep v-if="currentStep === 'equipment'" />
|
|
<PhotoUpload v-else-if="currentStep === 'photos'" />
|
|
<ScheduleStep v-else-if="currentStep === 'schedule'" />
|
|
<ContactStep v-else-if="currentStep === 'contact'" />
|
|
<ReviewStep v-else-if="currentStep === 'review'" />
|
|
|
|
<!-- Navigation -->
|
|
<div class="flex justify-between mt-8 pt-6 border-t border-gray-100">
|
|
<button
|
|
v-if="!isFirstStep"
|
|
type="button"
|
|
class="px-5 py-2.5 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
|
|
@click="prevStep"
|
|
>
|
|
{{ content.navigation.back }}
|
|
</button>
|
|
<div v-else />
|
|
|
|
<button
|
|
v-if="!isLastStep"
|
|
type="button"
|
|
class="px-5 py-2.5 text-sm font-medium text-white bg-primary rounded-lg hover:bg-primary-dark transition-colors"
|
|
@click="nextStep"
|
|
>
|
|
{{ content.navigation.continue }}
|
|
</button>
|
|
<button
|
|
v-else
|
|
type="button"
|
|
class="px-6 py-2.5 text-sm font-medium text-white bg-primary rounded-lg hover:bg-primary-dark transition-colors"
|
|
@click="submitForm"
|
|
>
|
|
{{ content.navigation.submit }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|