[Frontend] Product variant delete functionality not working

Problem

The Remove button in the product variant admin modal only removes variants from the UI state, but does not actually delete them from the database.

Current behavior:

• User clicks "Remove" on a variant → Variant disappears from UI
• User saves product → Variant still exists in database
• User refreshes page → Variant reappears

Expected behavior:

• User clicks "Remove" on a variant → API DELETE call is made → Variant is deleted from database

---

Available API Endpoints

The backend has the following endpoints ready to use:

1. Delete a single variant

DELETE /api/v1/admin/shop/products/:productId/variants/:variantId

Response:

{
  "success": true,
  "message": "Variant deleted successfully"
}

2. Delete all variants for a product

DELETE /api/v1/admin/shop/products/:productId/variants/all

Response:

{
  "success": true,
  "message": "Deleted 5 variant(s)",
  "deleted": 5
}

3. Clear all options and variants

DELETE /api/v1/admin/shop/products/:productId/options/clear

Response:

{
  "success": true,
  "message": "All options and variants cleared"
}

---

Required Frontend Changes

File: apps/website/website/src/pages/admin/shop/products/[id].tsx (or similar)

1. Add delete handler for single variant

const handleDeleteVariant = async (variantId: number) => {
  try {
    await api.delete(`/api/v1/admin/shop/products/${productId}/variants/${variantId}`);
    
    // Update local state
    setVariants(variants.filter(v => v.id !== variantId));
    
    // Show success message
    toast.success('Variant deleted successfully');
  } catch (error) {
    console.error('Error deleting variant:', error);
    toast.error('Failed to delete variant');
  }
};

2. Add "Delete All Variants" button

const handleDeleteAllVariants = async () => {
  if (!confirm('Are you sure you want to delete all variants? This cannot be undone.')) {
    return;
  }
  
  try {
    const response = await api.delete(`/api/v1/admin/shop/products/${productId}/variants/all`);
    
    // Update local state
    setVariants([]);
    setOptions([]);
    
    // Show success message
    toast.success(`Deleted ${response.data.deleted} variant(s)`);
  } catch (error) {
    console.error('Error deleting all variants:', error);
    toast.error('Failed to delete variants');
  }
};

3. Add "Clear Options" button

const handleClearOptions = async () => {
  if (!confirm('Are you sure you want to clear all options and variants? This cannot be undone.')) {
    return;
  }
  
  try {
    await api.delete(`/api/v1/admin/shop/products/${productId}/options/clear`);
    
    // Update local state
    setVariants([]);
    setOptions([]);
    
    // Show success message
    toast.success('All options and variants cleared');
  } catch (error) {
    console.error('Error clearing options:', error);
    toast.error('Failed to clear options');
  }
};

4. Update the Remove button

Change from:

// ❌ Current: Only updates UI state
<Button onClick={() => setVariants(variants.filter(v => v.id !== variant.id))}>
  Remove
</Button>

To:

// ✅ New: Actually deletes from database
<Button onClick={() => handleDeleteVariant(variant.id)}>
  Remove
</Button>

5. Add UI buttons in the modal

<Box sx={{ display: 'flex', gap: 2, mb: 2 }}>
  <Button 
    variant="outlined" 
    color="error"
    onClick={handleDeleteAllVariants}
  >
    Delete All Variants
  </Button>
  
  <Button 
    variant="outlined" 
    color="warning"
    onClick={handleClearOptions}
  >
    Clear All Options
  </Button>
</Box>

---

Acceptance Criteria

• [ ] Clicking "Remove" on a variant deletes it from the database
• [ ] Deleted variants do not reappear after page refresh
• [ ] "Delete All Variants" button is visible and functional
• [ ] "Clear All Options" button is visible and functional
• [ ] User confirmation dialog appears before bulk delete operations
• [ ] Success/error messages are shown after operations
• [ ] Loading states are displayed during API calls
• [ ] Local state is updated after successful deletion

---

Additional Context

• Backend endpoints are already deployed and working
• The issue affects the product variants feature in the shop admin
• Currently users cannot remove variants once created, leading to data buildup