527379a2cd
- Added AddressForm and CheckoutForm components for user input during checkout. - Implemented validation using Zod and VeeValidate for billing address fields. - Created OrderSummary and MockPayPalButton components for order confirmation and payment simulation. - Updated CartSheet and CartSidebar to navigate to the new checkout page at '/kasse'. - Introduced new API endpoints for validating checkout data and creating orders. - Enhanced user experience with responsive design and error handling. These changes complete the checkout functionality, allowing users to enter billing information, simulate payment, and confirm orders.
112 lines
2.9 KiB
TypeScript
112 lines
2.9 KiB
TypeScript
/**
|
|
* VeeValidate Form Validation Composable
|
|
*
|
|
* Provides convenient setup for VeeValidate with Zod schemas and
|
|
* German error messages.
|
|
*
|
|
* @example
|
|
* ```vue
|
|
* <script setup lang="ts">
|
|
* import { z } from 'zod'
|
|
* import { useForm } from 'vee-validate'
|
|
* import { toTypedSchema } from '@vee-validate/zod'
|
|
*
|
|
* // Define Zod schema
|
|
* const checkoutSchema = z.object({
|
|
* street: z.string().min(3, 'Straße muss mindestens 3 Zeichen lang sein'),
|
|
* postCode: z.string().regex(/^\d{5}$/, 'Ungültige Postleitzahl'),
|
|
* city: z.string().min(2),
|
|
* })
|
|
*
|
|
* // Setup form with validation
|
|
* const { handleSubmit, errors, defineField } = useForm({
|
|
* validationSchema: toTypedSchema(checkoutSchema),
|
|
* })
|
|
*
|
|
* // Define fields
|
|
* const [street, streetAttrs] = defineField('street')
|
|
* const [postCode, postCodeAttrs] = defineField('postCode')
|
|
*
|
|
* // Submit handler
|
|
* const onSubmit = handleSubmit(async (values) => {
|
|
* console.log('Form values:', values)
|
|
* })
|
|
* </script>
|
|
*
|
|
* <template>
|
|
* <form @submit="onSubmit">
|
|
* <input v-model="street" v-bind="streetAttrs" />
|
|
* <span v-if="errors.street">{{ errors.street }}</span>
|
|
* </form>
|
|
* </template>
|
|
* ```
|
|
*/
|
|
|
|
import { toTypedSchema } from '@vee-validate/zod'
|
|
import type { z } from 'zod'
|
|
|
|
/**
|
|
* Configure VeeValidate with Zod schema
|
|
*
|
|
* This is a convenience wrapper around toTypedSchema from @vee-validate/zod
|
|
* that provides type-safe form validation with Zod schemas.
|
|
*
|
|
* @param schema - Zod schema for form validation
|
|
* @returns Typed schema for VeeValidate
|
|
*
|
|
* @example
|
|
* const validationSchema = useZodSchema(checkoutSchema)
|
|
* const form = useForm({ validationSchema })
|
|
*/
|
|
export function useZodSchema<T extends z.ZodTypeAny>(schema: T) {
|
|
return toTypedSchema(schema)
|
|
}
|
|
|
|
/**
|
|
* Check if a form field has an error
|
|
*
|
|
* @param errors - VeeValidate errors object
|
|
* @param fieldName - Field name to check
|
|
* @returns true if field has an error
|
|
*/
|
|
export function hasFieldError(
|
|
errors: Record<string, string | undefined>,
|
|
fieldName: string
|
|
): boolean {
|
|
return !!errors[fieldName]
|
|
}
|
|
|
|
/**
|
|
* Get error message for a field
|
|
*
|
|
* @param errors - VeeValidate errors object
|
|
* @param fieldName - Field name to get error for
|
|
* @returns Error message or empty string
|
|
*/
|
|
export function getFieldError(
|
|
errors: Record<string, string | undefined>,
|
|
fieldName: string
|
|
): string {
|
|
return errors[fieldName] || ''
|
|
}
|
|
|
|
/**
|
|
* Check if form is valid (no errors)
|
|
*
|
|
* @param errors - VeeValidate errors object
|
|
* @returns true if form has no errors
|
|
*/
|
|
export function isFormValid(errors: Record<string, string | undefined>): boolean {
|
|
return Object.keys(errors).length === 0
|
|
}
|
|
|
|
/**
|
|
* Get all error messages as an array
|
|
*
|
|
* @param errors - VeeValidate errors object
|
|
* @returns Array of error messages
|
|
*/
|
|
export function getAllErrors(errors: Record<string, string | undefined>): string[] {
|
|
return Object.values(errors).filter((error): error is string => !!error)
|
|
}
|