Add CreateProductDialog and CreateStoreDialog components
- Introduce CreateProductDialog for adding new products with comprehensive form fields including name, price, description, quantity, and active status. - Implement validation using Zod and integrate auto-reply settings. - Add CreateStoreDialog for creating new stores, allowing input for store name, description, currency, and shipping zones. - Enhance user experience with loading states and error handling in both dialogs. - Refactor MerchantStore component to utilize StoreCard for displaying user stalls, improving code organization and readability. These changes enhance the merchant experience by streamlining product and store creation processes, ensuring better validation and user feedback.
This commit is contained in:
parent
d52d7f4d7f
commit
0c931cf457
5 changed files with 3021 additions and 1529 deletions
367
src/modules/market/components/CreateProductDialog.vue
Normal file
367
src/modules/market/components/CreateProductDialog.vue
Normal file
|
|
@ -0,0 +1,367 @@
|
|||
<template>
|
||||
<Dialog :open="isOpen" @update:open="(open) => !open && $emit('close')">
|
||||
<DialogContent class="sm:max-w-3xl max-h-[90vh] overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Add New Product to {{ stall?.name }}</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<form @submit="onSubmit" class="space-y-6 py-4" autocomplete="off">
|
||||
<!-- Basic Product Info -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<!-- Product Name -->
|
||||
<FormField v-slot="{ componentField }" name="name">
|
||||
<FormItem>
|
||||
<FormLabel>Product Name *</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
placeholder="Enter product name"
|
||||
:disabled="isCreating"
|
||||
v-bind="componentField"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormDescription>Choose a clear, descriptive name</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
|
||||
<!-- Price -->
|
||||
<FormField v-slot="{ componentField }" name="price">
|
||||
<FormItem>
|
||||
<FormLabel>Price * ({{ stall?.currency || 'sat' }})</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
type="number"
|
||||
step="0.01"
|
||||
min="0.01"
|
||||
placeholder="0.00"
|
||||
:disabled="isCreating"
|
||||
v-bind="componentField"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormDescription>Price in {{ stall?.currency || 'sat' }}</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</div>
|
||||
|
||||
<!-- Description -->
|
||||
<FormField v-slot="{ componentField }" name="description">
|
||||
<FormItem>
|
||||
<FormLabel>Description</FormLabel>
|
||||
<FormControl>
|
||||
<Textarea
|
||||
placeholder="Describe your product, its features, and benefits"
|
||||
:disabled="isCreating"
|
||||
v-bind="componentField"
|
||||
rows="4"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormDescription>Detailed description to help customers understand your product</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
|
||||
<!-- Quantity and Active Status -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<!-- Quantity -->
|
||||
<FormField v-slot="{ componentField }" name="quantity">
|
||||
<FormItem>
|
||||
<FormLabel>Quantity *</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
type="number"
|
||||
min="0"
|
||||
placeholder="1"
|
||||
:disabled="isCreating"
|
||||
v-bind="componentField"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormDescription>Available quantity (0 = unlimited)</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
|
||||
<!-- Active Status -->
|
||||
<FormField v-slot="{ value, handleChange }" name="active">
|
||||
<FormItem>
|
||||
<div class="space-y-3">
|
||||
<FormLabel>Product Status</FormLabel>
|
||||
<FormControl>
|
||||
<div class="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
:checked="value"
|
||||
@update:checked="handleChange"
|
||||
:disabled="isCreating"
|
||||
/>
|
||||
<Label>Product is active and visible</Label>
|
||||
</div>
|
||||
</FormControl>
|
||||
<FormDescription>Inactive products won't be shown to customers</FormDescription>
|
||||
<FormMessage />
|
||||
</div>
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</div>
|
||||
|
||||
<!-- Categories -->
|
||||
<FormField name="categories">
|
||||
<FormItem>
|
||||
<FormLabel>Categories</FormLabel>
|
||||
<FormDescription>Add categories to help customers find your product</FormDescription>
|
||||
<div class="text-center py-8 border-2 border-dashed rounded-lg">
|
||||
<Package class="w-8 h-8 mx-auto mb-2 text-muted-foreground" />
|
||||
<p class="text-sm text-muted-foreground">Category management coming soon</p>
|
||||
</div>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
|
||||
<!-- Images -->
|
||||
<FormField name="images">
|
||||
<FormItem>
|
||||
<FormLabel>Product Images</FormLabel>
|
||||
<FormDescription>Add images to showcase your product</FormDescription>
|
||||
<div class="text-center py-8 border-2 border-dashed rounded-lg">
|
||||
<Package class="w-8 h-8 mx-auto mb-2 text-muted-foreground" />
|
||||
<p class="text-sm text-muted-foreground">Image upload coming soon</p>
|
||||
</div>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
|
||||
<!-- Auto-reply Settings -->
|
||||
<div class="border-t pt-6">
|
||||
<FormField v-slot="{ value, handleChange }" name="use_autoreply">
|
||||
<FormItem>
|
||||
<div class="flex items-center space-x-2">
|
||||
<FormControl>
|
||||
<Checkbox
|
||||
:checked="value"
|
||||
@update:checked="handleChange"
|
||||
:disabled="isCreating"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormLabel>Enable auto-reply to customer messages</FormLabel>
|
||||
</div>
|
||||
<FormDescription>Automatically respond to customer inquiries about this product</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
|
||||
<FormField v-slot="{ componentField }" name="autoreply_message">
|
||||
<FormItem class="mt-4">
|
||||
<FormLabel>Auto-reply Message</FormLabel>
|
||||
<FormControl>
|
||||
<Textarea
|
||||
placeholder="Thank you for your interest! I'll get back to you soon..."
|
||||
:disabled="isCreating"
|
||||
v-bind="componentField"
|
||||
rows="3"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormDescription>Message sent automatically when customers inquire about this product</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</div>
|
||||
|
||||
<!-- Error Display -->
|
||||
<div v-if="createError" class="text-sm text-destructive">
|
||||
{{ createError }}
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end space-x-2 pt-4">
|
||||
<Button
|
||||
type="button"
|
||||
@click="$emit('close')"
|
||||
variant="outline"
|
||||
:disabled="isCreating"
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
type="submit"
|
||||
:disabled="isCreating || !isFormValid"
|
||||
>
|
||||
<span v-if="isCreating">Creating...</span>
|
||||
<span v-else>Create Product</span>
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch, nextTick } from 'vue'
|
||||
import { useForm } from 'vee-validate'
|
||||
import { toTypedSchema } from '@vee-validate/zod'
|
||||
import * as z from 'zod'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { Textarea } from '@/components/ui/textarea'
|
||||
import { Checkbox } from '@/components/ui/checkbox'
|
||||
import {
|
||||
FormControl,
|
||||
FormDescription,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from '@/components/ui/form'
|
||||
import { Package } from 'lucide-vue-next'
|
||||
import type { NostrmarketAPI, Stall, CreateProductRequest } from '../services/nostrmarketAPI'
|
||||
import { auth } from '@/composables/useAuthService'
|
||||
import { useToast } from '@/core/composables/useToast'
|
||||
import { injectService, SERVICE_TOKENS } from '@/core/di-container'
|
||||
|
||||
// Props and emits
|
||||
interface Props {
|
||||
isOpen: boolean
|
||||
stall?: Stall | null
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
const emit = defineEmits<{
|
||||
close: []
|
||||
created: [product: any]
|
||||
}>()
|
||||
|
||||
// Services
|
||||
const nostrmarketAPI = injectService(SERVICE_TOKENS.NOSTRMARKET_API) as NostrmarketAPI
|
||||
const toast = useToast()
|
||||
|
||||
// Local state
|
||||
const isCreating = ref(false)
|
||||
const createError = ref<string | null>(null)
|
||||
|
||||
// Product form schema
|
||||
const productFormSchema = toTypedSchema(z.object({
|
||||
name: z.string().min(1, "Product name is required").max(100, "Product name must be less than 100 characters"),
|
||||
description: z.string().max(1000, "Description must be less than 1000 characters"),
|
||||
price: z.number().min(0.01, "Price must be greater than 0"),
|
||||
quantity: z.number().int().min(0, "Quantity must be 0 or greater"),
|
||||
categories: z.array(z.string()).max(10, "Maximum 10 categories allowed"),
|
||||
images: z.array(z.string().url("Invalid image URL")).max(5, "Maximum 5 images allowed"),
|
||||
active: z.boolean(),
|
||||
use_autoreply: z.boolean(),
|
||||
autoreply_message: z.string().max(500, "Auto-reply message must be less than 500 characters")
|
||||
}))
|
||||
|
||||
// Product form setup with vee-validate
|
||||
const form = useForm({
|
||||
validationSchema: productFormSchema,
|
||||
initialValues: {
|
||||
name: '',
|
||||
description: '',
|
||||
price: 0,
|
||||
quantity: 1,
|
||||
categories: [] as string[],
|
||||
images: [] as string[],
|
||||
active: true,
|
||||
use_autoreply: false,
|
||||
autoreply_message: ''
|
||||
}
|
||||
})
|
||||
|
||||
// Destructure product form methods
|
||||
const { resetForm, values, meta } = form
|
||||
|
||||
// Product form validation computed
|
||||
const isFormValid = computed(() => meta.value.valid)
|
||||
|
||||
// Product form submit handler
|
||||
const onSubmit = form.handleSubmit(async (values) => {
|
||||
await createProduct(values)
|
||||
})
|
||||
|
||||
// Methods
|
||||
const createProduct = async (formData: any) => {
|
||||
const currentUser = auth.currentUser?.value
|
||||
if (!currentUser?.wallets?.length || !props.stall) {
|
||||
toast.error('No active store or wallets available')
|
||||
return
|
||||
}
|
||||
|
||||
const {
|
||||
name,
|
||||
description,
|
||||
price,
|
||||
quantity,
|
||||
categories,
|
||||
images,
|
||||
active,
|
||||
use_autoreply,
|
||||
autoreply_message
|
||||
} = formData
|
||||
|
||||
isCreating.value = true
|
||||
createError.value = null
|
||||
|
||||
try {
|
||||
const productData: CreateProductRequest = {
|
||||
stall_id: props.stall.id!,
|
||||
name,
|
||||
categories: categories || [],
|
||||
images: images || [],
|
||||
price: Number(price),
|
||||
quantity: Number(quantity),
|
||||
active,
|
||||
config: {
|
||||
description: description || '',
|
||||
currency: props.stall.currency,
|
||||
use_autoreply,
|
||||
autoreply_message: use_autoreply ? autoreply_message || '' : '',
|
||||
shipping: [] // Will be populated from shipping zones if needed
|
||||
}
|
||||
}
|
||||
|
||||
const newProduct = await nostrmarketAPI.createProduct(
|
||||
currentUser.wallets[0].adminkey,
|
||||
productData
|
||||
)
|
||||
|
||||
// Reset form and close dialog
|
||||
resetForm()
|
||||
emit('created', newProduct)
|
||||
emit('close')
|
||||
|
||||
toast.success(`Product "${name}" created successfully!`)
|
||||
} catch (error) {
|
||||
const errorMessage = error instanceof Error ? error.message : 'Failed to create product'
|
||||
console.error('Error creating product:', error)
|
||||
createError.value = errorMessage
|
||||
toast.error(`Failed to create product: ${errorMessage}`)
|
||||
} finally {
|
||||
isCreating.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize data when dialog opens
|
||||
watch(() => props.isOpen, async (isOpen) => {
|
||||
if (isOpen) {
|
||||
// Reset form to initial state
|
||||
resetForm({
|
||||
values: {
|
||||
name: '',
|
||||
description: '',
|
||||
price: 0,
|
||||
quantity: 1,
|
||||
categories: [],
|
||||
images: [],
|
||||
active: true,
|
||||
use_autoreply: false,
|
||||
autoreply_message: ''
|
||||
}
|
||||
})
|
||||
|
||||
// Wait for reactivity
|
||||
await nextTick()
|
||||
|
||||
// Clear any previous errors
|
||||
createError.value = null
|
||||
}
|
||||
})
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue