flowrix 1.0.1-beta.147 → 1.0.1-beta.148

package/dist/runtime/components/WishList/dropdown.vue

@@ -0,0 +1,417 @@
+<script setup>
+const authStore = useAuthStore();
+const isAuthenticated = computed(() => authStore.isAuthenticated);
+const props = defineProps({
+  product: {
+    type: Object,
+    required: true
+  }
+});
+const {
+  fetchWishlists,
+  fetchWishlistProducts,
+  createWishlist,
+  addToWishlist,
+  removeFromWishlist,
+  wishlists,
+  wishlistProducts,
+  loading: isLoading
+} = useWishlists();
+const showDropdown = ref(false);
+const showCreateModal = ref(false);
+const newWishlistName = ref("");
+const errorMessage = ref("");
+const successMessage = ref("");
+const isCreating = ref(false);
+const isAddingToWishlist = ref(false);
+const addingToWishlistId = ref(null);
+const wishlistInput = ref(null);
+console.log("\u{1F510} Current isAuthenticated:", isAuthenticated.value);
+console.log("\u{1F510} Auth Store state:", authStore);
+const isInAnyWishlist = computed(() => {
+  if (!props.product?.slug) return false;
+  return wishlists.value.some(
+    (wishlist) => isProductInWishlist(wishlist.id)
+  );
+});
+const loadWishlistProducts = async (wishlistId) => {
+  try {
+    await fetchWishlistProducts(wishlistId);
+  } catch (error) {
+    console.error(`Failed to fetch products for wishlist ${wishlistId}:`, error);
+  }
+};
+const loadWishlists = async () => {
+  try {
+    await fetchWishlists();
+    console.log("\u2705 Wishlists loaded:", wishlists.value);
+  } catch (error) {
+    console.error("Failed to load wishlists:", error);
+  }
+};
+onMounted(async () => {
+  console.log("\u{1F504} onMounted - isAuthenticated:", isAuthenticated.value);
+  if (isAuthenticated.value) {
+    await loadWishlists();
+  }
+});
+const transformData = (data) => {
+  const attribute_id = {};
+  const fraction = {};
+  for (const [key, value] of Object.entries(data)) {
+    const match = key.match(/(attribute_id|fraction)\[(\d+)\]/);
+    if (match) {
+      const [, type, id] = match;
+      if (type === "attribute_id") {
+        attribute_id[id] = value;
+      } else if (type === "fraction") {
+        fraction[id] = value;
+      }
+    }
+  }
+  return { attribute_id, fraction };
+};
+const getFormData = () => {
+  const customProductForm = document.querySelector(".customproductform");
+  const form = customProductForm;
+  let finalData = {};
+  if (form) {
+    const formData = new FormData(form);
+    const formObject = {};
+    const visibleFields = Array.from(formData.entries()).filter(([key]) => {
+      const element = form.querySelector(`[name="${key}"]`);
+      const parentElement = element ? element.closest(".single-attribute") || element : null;
+      return parentElement && window.getComputedStyle(parentElement).display === "block";
+    });
+    visibleFields.forEach(([key, value]) => {
+      formObject[key] = value;
+    });
+    finalData = transformData(formObject);
+  }
+  return finalData;
+};
+const showSuccessMessage = (message) => {
+  successMessage.value = message;
+  setTimeout(() => {
+    successMessage.value = "";
+  }, 3e3);
+};
+const showErrorMessage = (message) => {
+  errorMessage.value = message;
+  setTimeout(() => {
+    errorMessage.value = "";
+  }, 5e3);
+};
+const handleCreateWishlist = async () => {
+  console.log("\u{1F4DD} handleCreateWishlist - isAuthenticated:", isAuthenticated.value);
+  if (!isAuthenticated.value) {
+    console.log("\u{1F6AB} Not authenticated, redirecting to login");
+    return navigateTo("/login");
+  }
+  if (!newWishlistName.value.trim()) {
+    showErrorMessage("Wishlist name cannot be empty");
+    return;
+  }
+  isCreating.value = true;
+  errorMessage.value = "";
+  successMessage.value = "";
+  try {
+    const createData = {
+      title: newWishlistName.value.trim(),
+      default: false
+    };
+    const createRes = await createWishlist(createData);
+    if (createRes.status === "Success") {
+      const formDataObj = getFormData();
+      let addData = {};
+      if (Object.keys(formDataObj).length > 0) {
+        addData = {
+          attribute_id: formDataObj.attribute_id || {},
+          fraction: formDataObj.fraction || {}
+        };
+      }
+      await addToWishlist(createRes.data.id, props.product.slug, addData);
+      showSuccessMessage(`Created wishlist "${newWishlistName.value}" and added product`);
+      await loadWishlists();
+      setTimeout(() => {
+        closeCreateModal();
+      }, 1500);
+    } else {
+      showErrorMessage(createRes.message || "Failed to create wishlist. Please try again.");
+    }
+  } catch (error) {
+    console.error("Create wishlist error:", error);
+    showErrorMessage(error.message || "Failed to create wishlist. Please try again.");
+  } finally {
+    isCreating.value = false;
+  }
+};
+const addToWishlistHandler = async (wishlistId) => {
+  console.log("\u2795 addToWishlistHandler - isAuthenticated:", isAuthenticated.value);
+  if (!isAuthenticated.value) {
+    console.log("\u{1F6AB} Not authenticated, redirecting to login");
+    return navigateTo("/login");
+  }
+  if (!props.product || !props.product.slug) {
+    console.error("Product is not available or missing slug");
+    showErrorMessage("Product information is missing");
+    return false;
+  }
+  try {
+    isAddingToWishlist.value = true;
+    addingToWishlistId.value = wishlistId;
+    errorMessage.value = "";
+    const formDataObj = getFormData();
+    console.log("\u{1F4DD} addToWishlistHandler - Form Data:", formDataObj);
+    let addData = {};
+    if (Object.keys(formDataObj).length > 0) {
+      addData = {
+        attribute_id: formDataObj.attribute_id || {},
+        fraction: formDataObj.fraction || {}
+      };
+    }
+    console.log("\u{1F680} Sending addToWishlist payload:", { wishlistId, slug: props.product.slug, addData });
+    const response = await addToWishlist(wishlistId, props.product.slug, addData);
+    console.log("\u{1F4E9} addToWishlist response:", response);
+    if (response.status === "Success") {
+      await loadWishlistProducts(wishlistId);
+      showSuccessMessage("Product added to wishlist successfully!");
+      return true;
+    } else {
+      console.error("Failed to add to wishlist:", response.message);
+      showErrorMessage(response.message || "Failed to add product to wishlist");
+      return false;
+    }
+  } catch (error) {
+    console.error("Failed to add to wishlist:", error);
+    showErrorMessage(error.message || "Failed to add product to wishlist");
+    return false;
+  } finally {
+    isAddingToWishlist.value = false;
+    addingToWishlistId.value = null;
+  }
+};
+const removeFromWishlistHandler = async (wishlistId) => {
+  try {
+    isAddingToWishlist.value = true;
+    addingToWishlistId.value = wishlistId;
+    errorMessage.value = "";
+    const response = await removeFromWishlist(wishlistId, props.product.slug);
+    if (response.status === "Success") {
+      await loadWishlistProducts(wishlistId);
+      showSuccessMessage("Product removed from wishlist successfully!");
+      return true;
+    } else {
+      console.error("Failed to remove from wishlist:", response.message);
+      showErrorMessage(response.message || "Failed to remove product from wishlist");
+      return false;
+    }
+  } catch (error) {
+    console.error("Failed to remove from wishlist:", error);
+    showErrorMessage(error.message || "Failed to remove product from wishlist");
+    return false;
+  } finally {
+    isAddingToWishlist.value = false;
+    addingToWishlistId.value = null;
+  }
+};
+const toggleProductInWishlist = async (wishlistId) => {
+  const lists = wishlistProducts(wishlistId);
+  if (!lists || !lists.value || !lists.value.length) {
+    await loadWishlistProducts(wishlistId);
+  }
+  const isCurrentlyInWishlist = isProductInWishlist(wishlistId);
+  if (isCurrentlyInWishlist) {
+    await removeFromWishlistHandler(wishlistId);
+  } else {
+    await addToWishlistHandler(wishlistId);
+  }
+  closeDropdown();
+};
+const isProductInWishlist = (wishlistId) => {
+  if (!props.product?.slug) return false;
+  const products = wishlistProducts(wishlistId).value || [];
+  return products.some((item) => item.productSlug === props.product.slug);
+};
+const toggleDropdown = async () => {
+  console.log("\u{1F53D} toggleDropdown - isAuthenticated:", isAuthenticated.value);
+  console.log("\u{1F53D} Auth Store:", authStore);
+  if (!isAuthenticated.value) {
+    console.log("\u{1F6AB} Not authenticated, redirecting to login");
+    navigateTo("/login");
+    return;
+  }
+  if (!showDropdown.value && wishlists.value.length === 0) {
+    await loadWishlists();
+  }
+  showDropdown.value = !showDropdown.value;
+};
+const closeDropdown = () => {
+  showDropdown.value = false;
+};
+const openCreateModal = () => {
+  showCreateModal.value = true;
+  showDropdown.value = false;
+  nextTick(() => {
+    if (wishlistInput.value) {
+      wishlistInput.value.focus();
+    }
+  });
+};
+const closeCreateModal = () => {
+  showCreateModal.value = false;
+  newWishlistName.value = "";
+  errorMessage.value = "";
+  successMessage.value = "";
+};
+const wishlistLabel = computed(
+  () => isLoading.value ? "Loading..." : isInAnyWishlist.value ? "In Wishlist" : "Add to my wishlist"
+);
+watch([newWishlistName], () => {
+  if (errorMessage.value) {
+    errorMessage.value = "";
+  }
+});
+</script>
+
+<template>
+  <div class="dropdown position-relative d-inline-flex w-100">
+    <div class="w-100">
+      <a @click="toggleDropdown" class="rounded-5 d-flex align-items-center justify-content-center gap-2 w-100 py-3"
+        :class="{
+          'btn-outline-danger': isInAnyWishlist,
+          'shadow-sm': showDropdown
+        }" :disabled="isLoading">
+        <div v-if="isLoading" class="spinner-border spinner-border-sm" role="status">
+          <span class="visually-hidden">Loading...</span>
+        </div>
+
+        <i class="text-secondary">
+          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
+            <path fill="currentColor"
+              d="M6.979 3.074a6 6 0 0 1 4.988 1.425l.037.033l.034-.03a6 6 0 0 1 4.733-1.44l.246.036a6 6 0 0 1 3.364 10.008l-.18.185l-.048.041l-7.45 7.379a1 1 0 0 1-1.313.082l-.094-.082l-7.493-7.422A6 6 0 0 1 6.979 3.074" />
+          </svg>
+        </i>
+
+        <span class="fw-medium text-gray" style="cursor:pointer">
+          {{ wishlistLabel }}
+        </span>
+
+        <svg v-if="wishlists.length > 0 && !isLoading" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
+          viewBox="0 0 24 24" :class="{ 'rotate-180': showDropdown }" style="transition: transform 0.3s ease;">
+          <path fill="currentColor" d="M7.41 8.58L12 13.17l4.59-4.59L18 10l-6 6l-6-6l1.41-1.42Z" />
+        </svg>
+      </a>
+
+      <!-- Success/Error Messages below the button -->
+      <div v-if="successMessage || errorMessage" class="mt-2">
+        <div v-if="successMessage" class="alert alert-success alert-dismissible fade show py-1 mb-0" role="alert">
+          <small>{{ successMessage }}</small>
+          <button type="button" class="btn-close btn-close-sm" @click="successMessage = ''"></button>
+        </div>
+
+        <div v-if="errorMessage" class="alert alert-danger alert-dismissible fade show py-1 mb-0" role="alert">
+          <small>{{ errorMessage }}</small>
+          <button type="button" class="btn-close btn-close-sm" @click="errorMessage = ''"></button>
+        </div>
+      </div>
+    </div>
+
+    <div v-show="showDropdown" class="dropdown-menu show position-absolute mt-1"
+      style="min-width: 250px; max-height: 300px;">
+      <div v-if="wishlists.length > 0" style="max-height: 200px; overflow-y: auto;">
+        <a v-for="wishlist in wishlists" :key="wishlist.id"
+          class="dropdown-item d-flex justify-content-between align-items-center py-2 cursor-pointer" :class="{
+            'disabled': isAddingToWishlist,
+            'bg-light': isAddingToWishlist && addingToWishlistId === wishlist.id
+          }" @click="!isAddingToWishlist ? toggleProductInWishlist(wishlist.id) : null" :disabled="isAddingToWishlist">
+          <span class="small">{{ wishlist.title }}</span>
+
+          <div class="ms-2">
+            <div v-if="isAddingToWishlist && addingToWishlistId === wishlist.id"
+              class="spinner-border spinner-border-sm text-primary" role="status">
+              <span class="visually-hidden">Loading...</span>
+            </div>
+            <span v-else-if="isProductInWishlist(wishlist.id)" class="badge bg-success rounded-pill">✓</span>
+          </div>
+        </a>
+      </div>
+
+      <div v-else-if="isLoading" class="dropdown-item-text text-center py-3">
+        <div class="spinner-border spinner-border-sm text-primary mb-2" role="status">
+          <span class="visually-hidden">Loading...</span>
+        </div>
+        <p class="mb-0 text-muted small">Loading wishlists...</p>
+      </div>
+
+      <div v-else class="dropdown-item-text text-center py-3">
+        <p class="mb-0 text-muted small">No wishlists yet</p>
+      </div>
+
+      <hr class="dropdown-divider my-1">
+
+      <a class="dropdown-item d-flex align-items-center py-2 text-primary" :class="{ 'disabled': isAddingToWishlist }"
+        @click="!isAddingToWishlist ? openCreateModal() : null" :disabled="isAddingToWishlist">
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 20 20" class="me-2">
+          <path fill="currentColor"
+            d="M10 0c.423 0 .766.343.766.766v8.467h8.468a.766.766 0 1 1 0 1.533h-8.468v8.468a.766.766 0 1 1-1.532 0l-.001-8.468H.766a.766.766 0 0 1 0-1.532l8.467-.001V.766A.77.77 0 0 1 10 0">
+          </path>
+        </svg>
+        <small>Create New Wishlist</small>
+      </a>
+    </div>
+
+    <!-- Create Wishlist Modal -->
+    <div v-if="showCreateModal" class="modal fade show d-block" tabindex="-1"
+      style="background-color: rgba(0,0,0,0.5);">
+      <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title">Create New Wishlist</h5>
+            <a type="button" class="btn-close" @click="closeCreateModal"></a>
+          </div>
+          <div class="modal-body">
+            <form @submit.prevent="handleCreateWishlist">
+              <div class="mb-3">
+                <label for="wishlistName" class="form-label">Wishlist Name</label>
+                <input id="wishlistName" v-model="newWishlistName" ref="wishlistInput" type="text" class="form-control"
+                  placeholder="Enter wishlist name" :disabled="isCreating" required />
+              </div>
+
+              <!-- Success/Error Messages in Modal -->
+              <div v-if="successMessage" class="alert alert-success alert-dismissible fade show py-1 mb-2" role="alert">
+                <small>{{ successMessage }}</small>
+                <button type="button" class="btn-close btn-close-sm" @click="successMessage = ''"></button>
+              </div>
+
+              <div v-if="errorMessage" class="alert alert-danger alert-dismissible fade show py-1 mb-2" role="alert">
+                <small>{{ errorMessage }}</small>
+                <button type="button" class="btn-close btn-close-sm" @click="errorMessage = ''"></button>
+              </div>
+
+              <div class="d-flex gap-2 justify-content-end">
+                <a type="button" class="btn btn-secondary btn-sm" @click="closeCreateModal" :disabled="isCreating">
+                  Cancel
+                </a>
+                <button type="submit" class="btn btn-primary btn-sm d-flex align-items-center gap-1"
+                  :disabled="!newWishlistName.trim() || isCreating">
+                  <div v-if="isCreating" class="spinner-border spinner-border-sm" role="status">
+                    <span class="visually-hidden">Loading...</span>
+                  </div>
+                  <span>{{ isCreating ? 'Creating...' : 'Create Wishlist' }}</span>
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="showDropdown" class="position-fixed top-0 start-0 w-100 h-100" style="z-index: 1;"
+      @click="closeDropdown"></div>
+  </div>
+</template>
+
+<style scoped>
+.cursor-pointer{cursor:pointer}.dropdown-menu{box-shadow:0 .5rem 1rem rgba(0,0,0,.125);z-index:1050}.dropdown-item:hover:not(.disabled){background-color:var(--bs-dropdown-link-hover-bg)}.dropdown-item.disabled{opacity:.6;pointer-events:none}.rotate-180{transform:rotate(180deg)}.modal{z-index:1055}.dropdown-menu>div:first-child::-webkit-scrollbar{width:6px}.dropdown-menu>div:first-child::-webkit-scrollbar-track{background:#f1f1f1;border-radius:10px}.dropdown-menu>div:first-child::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:10px}.dropdown-menu>div:first-child::-webkit-scrollbar-thumb:hover{background:#a8a8a8}.text-gray{color:var(--bs-light-gray)}.alert{margin-bottom:0;padding:.25rem .5rem}.btn-close-sm{font-size:.7rem;padding:.5rem}@media (max-width:576px){.dropdown-menu{min-width:200px}.modal-dialog{margin:1rem}}
+</style>

package/dist/runtime/components/WishList/dropdown.vue.d.ts

@@ -0,0 +1,9 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {
+    $props: Partial<typeof props>;
+    product: Record<string, any>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const props: {
+    readonly product: Record<string, any>;
+};

package/dist/runtime/components/WishList/modal.d.vue.ts

@@ -0,0 +1,13 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {
+    wishlists: any;
+    isInWishlist: (productId: any, wishlistId: any) => any;
+    $emit: typeof emit;
+    $props: Partial<typeof __VLS_props>;
+    product?: any;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const emit: (event: "closewish", ...args: any[]) => void;
+declare const __VLS_props: {
+    readonly product?: any;
+};

package/dist/runtime/components/WishList/modal.vue

@@ -0,0 +1,229 @@
+<script setup>
+const { product } = defineProps(["product"]);
+const {
+  fetchWishlists,
+  createWishlist,
+  addToWishlist,
+  wishlists,
+  wishlistProducts,
+  loading: isWishlistLoading
+} = useWishlists();
+const emit = defineEmits(["closewish"]);
+const router = useRouter();
+const route = useRoute();
+const authStore = useAuthStore();
+const isAuthenticated = computed(() => authStore.isAuthenticated);
+const createMode = ref(false);
+const selectedWishlist = ref("");
+const successMessage = ref("");
+const errorMessage = ref("");
+const checkAuthAndRedirect = () => {
+  if (!isAuthenticated.value) {
+    const returnUrl = route.fullPath;
+    router.push({
+      path: "/login",
+      query: { redirect: returnUrl }
+    });
+    return false;
+  }
+  return true;
+};
+onMounted(async () => {
+  if (!checkAuthAndRedirect()) {
+    emit("closewish");
+    return;
+  }
+  try {
+    await fetchWishlists();
+  } catch (error) {
+    console.error("Failed to fetch wishlists:", error);
+    errorMessage.value = "Failed to load wishlists";
+  }
+});
+const closeWisthmodal = () => {
+  emit("closewish");
+};
+const handleCreateWishlist = async () => {
+  if (!checkAuthAndRedirect()) {
+    emit("closewish");
+    return;
+  }
+  if (!selectedWishlist.value?.trim()) {
+    errorMessage.value = "Wishlist name is required!";
+    return;
+  }
+  try {
+    const wishlistData = {
+      title: selectedWishlist.value.trim(),
+      default: false
+    };
+    const response = await createWishlist(wishlistData);
+    if (response.status === "Success") {
+      successMessage.value = "Wishlist created successfully!";
+      if (response.data && product?.slug) {
+        await addProductToWishlist(response.data.id);
+      } else {
+        setTimeout(() => {
+          closeWisthmodal();
+        }, 1500);
+      }
+    } else {
+      errorMessage.value = response.message || "Failed to create wishlist";
+    }
+  } catch (error) {
+    console.error("Create wishlist error:", error);
+    errorMessage.value = error.message || "Failed to create wishlist";
+  }
+};
+const addProductToWishlist = async (wishlistId) => {
+  if (!checkAuthAndRedirect()) {
+    emit("closewish");
+    return;
+  }
+  if (!product?.slug) {
+    errorMessage.value = "Product information is missing";
+    return;
+  }
+  try {
+    const response = await addToWishlist(wishlistId, product.slug);
+    if (response.status === "Success") {
+      successMessage.value = "Product added to wishlist successfully!";
+      setTimeout(() => {
+        closeWisthmodal();
+      }, 1500);
+    } else {
+      errorMessage.value = response.message || "Failed to add product to wishlist";
+    }
+  } catch (error) {
+    console.error("Add to wishlist error:", error);
+    errorMessage.value = error.message || "Failed to add product to wishlist";
+  }
+};
+const handleWishlistAction = async (wishlistId) => {
+  if (!checkAuthAndRedirect()) {
+    emit("closewish");
+    return;
+  }
+  if (!wishlistId) {
+    errorMessage.value = "Please select a wishlist";
+    return;
+  }
+  await addProductToWishlist(wishlistId);
+};
+const handleKeypress = (event) => {
+  if (event.key === "Enter") {
+    if (createMode.value) {
+      handleCreateWishlist();
+    } else if (selectedWishlist.value) {
+      handleWishlistAction(selectedWishlist.value);
+    }
+  }
+};
+watch([selectedWishlist, createMode], () => {
+  if (errorMessage.value) {
+    errorMessage.value = "";
+  }
+});
+const isInWishlist = (productId, wishlistId) => {
+  if (!product?.slug) return false;
+  const products = wishlistProducts(wishlistId).value || [];
+  return products.some((item) => item.productSlug === product.slug || item.productId === productId);
+};
+defineExpose({
+  wishlists,
+  isInWishlist
+});
+</script>
+
+<template>
+  <div class="wishlist-backdrop fade show">
+    <div class="wishlist-content">
+      <div class="d-flex justify-content-between align-items-center mb-1">
+        <h6 class="modal-title mb-0">Add to Wishlist</h6>
+        <button type="button" class="btn-close" @click="closeWisthmodal" aria-label="Close"></button>
+      </div>
+      
+      <div>
+        <!-- Success/Error Messages -->
+        <div v-if="successMessage" class="alert alert-success alert-dismissible fade show py-1 mb-2" role="alert">
+          <small>{{ successMessage }}</small>
+          <button type="button" class="btn-close btn-close-sm" @click="successMessage = ''"></button>
+        </div>
+        
+        <div v-if="errorMessage" class="alert alert-danger alert-dismissible fade show py-1 mb-2" role="alert">
+          <small>{{ errorMessage }}</small>
+          <button type="button" class="btn-close btn-close-sm" @click="errorMessage = ''"></button>
+        </div>
+
+        <!-- Select Existing Wishlist -->
+        <div v-if="!createMode">
+          <div class="mb-1">
+            <label for="wishlistSelect" class="form-label small mb-1">Select Wishlist</label>
+            <select 
+              v-model="selectedWishlist" 
+              class="form-select form-select-sm"
+              id="wishlistSelect"
+              :disabled="isWishlistLoading"
+            >
+              <option value="">Select a Wishlist</option>
+              <template v-for="wishlist in wishlists" :key="wishlist.id">
+                <option :value="wishlist.id">
+                  {{ wishlist.title }}
+                </option>
+              </template>
+            </select>
+          </div>
+          
+          <button 
+            @click="handleWishlistAction(selectedWishlist)"
+            :disabled="!selectedWishlist || isWishlistLoading || !product?.slug"
+            class="btn btn-secondary text-white w-100 mb-1 btn-sm"
+          >
+            <span v-if="isWishlistLoading" class="spinner-border spinner-border-sm me-1" role="status"></span>
+            <small>Add to Wishlist</small>
+          </button>
+          
+          <div class="text-center">
+            <a href="#" @click.prevent="createMode = true" class="small text-primary text-decoration-none">
+              + Create new wishlist
+            </a>
+          </div>
+        </div>
+
+        <!-- Create New Wishlist -->
+        <div v-else>
+          <div class="mb-1">
+            <label for="newWishlistInput" class="form-label small mb-1">New Wishlist Name</label>
+            <input 
+              v-model="selectedWishlist" 
+              id="newWishlistInput" 
+              placeholder="Enter name"
+              class="form-control form-control-sm" 
+              @keypress="handleKeypress"
+              :disabled="isWishlistLoading"
+            />
+          </div>
+          
+          <button 
+            @click="handleCreateWishlist" 
+            :disabled="!selectedWishlist?.trim() || isWishlistLoading"
+            class="btn btn-secondary text-white btn-sm w-100 mb-1"
+          >
+            <span v-if="isWishlistLoading" class="spinner-border spinner-border-sm me-1" role="status"></span>
+            <small>Create & Add</small>
+          </button>
+          
+          <div class="text-center">
+            <a href="#" @click.prevent="createMode = false" class="small text-muted text-decoration-none">
+              Cancel
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.wishlist-backdrop{align-items:center;animation:fadeIn .3s ease-in-out;background:rgba(0,0,0,.6);display:flex;height:100%;justify-content:center;left:0;position:absolute;top:0;width:100%;z-index:3}.wishlist-content{animation:slideUp .3s ease-in-out;background:#fff;border-radius:.5rem;box-shadow:0 8px 24px rgba(0,0,0,.2);max-width:90%;padding:.75rem;width:260px}.modal-title{font-size:.95rem;font-weight:600}.form-label{font-size:.75rem;font-weight:500}.btn-sm,.form-control-sm,.form-select-sm{font-size:.8rem;padding:.25rem .5rem}.alert{margin-bottom:.5rem;padding:.25rem .5rem}.btn-close-sm{font-size:.7rem;padding:.5rem}.text-muted,.text-primary{text-decoration:none}.text-primary:hover{text-decoration:underline}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media (max-width:768px){.wishlist-content{padding:.5rem;width:240px}}
+</style>

package/dist/runtime/components/WishList/modal.vue.d.ts

@@ -0,0 +1,13 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {
+    wishlists: any;
+    isInWishlist: (productId: any, wishlistId: any) => any;
+    $emit: typeof emit;
+    $props: Partial<typeof __VLS_props>;
+    product?: any;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const emit: (event: "closewish", ...args: any[]) => void;
+declare const __VLS_props: {
+    readonly product?: any;
+};