From 4ce12bcbd3b4cbe63e4d2768b0a0612e173d61c8 Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Mon, 8 Sep 2025 19:06:44 +0200
Subject: [PATCH] Refactor MerchantStore component for improved form handling
 and validation

- Remove unnecessary keys from form fields in the stall creation dialog to simplify the structure.
- Ensure the description field is now required, enhancing validation for store creation.
- Update the dialog button to type "button" for better clarity in user interactions.
- Streamline the handling of the description field in the API request, ensuring it defaults to an empty string if not provided.

These changes enhance the user experience during store creation by improving form validation and simplifying the component structure.
---
 src/modules/market/components/MerchantStore.vue | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/modules/market/components/MerchantStore.vue b/src/modules/market/components/MerchantStore.vue
index 2666af1..3e6896f 100644
--- a/src/modules/market/components/MerchantStore.vue
+++ b/src/modules/market/components/MerchantStore.vue
@@ -449,13 +449,13 @@
   </div> <!-- End of main container -->
 
   <!-- Create Stall Dialog -->
-  <Dialog v-model:open="showStallDialog" :key="dialogKey">
+  <Dialog v-model:open="showStallDialog">
     <DialogContent class="sm:max-w-2xl">
       <DialogHeader>
         <DialogTitle>Create New Store</DialogTitle>
       </DialogHeader>
       
-      <form @submit="onSubmit" class="space-y-6 py-4" :key="formKey" autocomplete="off">
+      <form @submit="onSubmit" class="space-y-6 py-4" autocomplete="off">
         <!-- Basic Store Info -->
         <div class="space-y-4">
           <FormField v-slot="{ componentField }" name="name">
@@ -466,7 +466,6 @@
                   placeholder="Enter your store name"
                   :disabled="isCreatingStall"
                   v-bind="componentField"
-                  :key="`store-name-${formKey}`"
                   autocomplete="off"
                   spellcheck="false"
                 />
@@ -486,7 +485,6 @@
                   placeholder="Describe your store and products"
                   :disabled="isCreatingStall"
                   v-bind="componentField"
-                  :key="`store-description-${formKey}`"
                   autocomplete="off"
                   spellcheck="false"
                 />
@@ -644,6 +642,7 @@
 
         <div class="flex justify-end space-x-2 pt-4">
           <Button 
+            type="button"
             @click="closeStallDialog" 
             variant="outline"
             :disabled="isCreatingStall"
@@ -752,7 +751,7 @@ const countries = ref([
 // Stall form schema
 const stallFormSchema = toTypedSchema(z.object({
   name: z.string().min(1, "Store name is required").max(100, "Store name must be less than 100 characters"),
-  description: z.string().max(500, "Description must be less than 500 characters").optional(),
+  description: z.string().max(500, "Description must be less than 500 characters"),
   currency: z.string().min(1, "Currency is required"),
   wallet: z.string().optional(),
   selectedZones: z.array(z.string()).min(1, "Select at least one shipping zone"),
@@ -1264,7 +1263,7 @@ const createStall = async (formData: any) => {
       currency,
       shipping_zones: selectedZoneData,
       config: {
-        description: description || undefined
+        description: description || ''
       }
     }