Products - Add variants features (add, save, manage stock, delete) (#246

)

* Products - Add variants features (add, save, manage stock, delete)

* fix code formatting

---------

Co-authored-by: mckenziearts <[email protected]>

packages/admin/config/components/product.php

@@ -17,6 +17,7 @@
         'product-index' => Livewire\Pages\Product\Index::class,
         'product-create' => Livewire\Pages\Product\Create::class,
         'product-edit' => Livewire\Pages\Product\Edit::class,
+        'variant-edit' => Livewire\Pages\Product\Variant::class,
     ],
 
     /*
@@ -32,22 +33,21 @@
         'attributes.values' => Components\Attributes\Values::class,
 
         'products.form.attributes' => Components\Products\Form\Attributes::class,
-        'products.form.edit' => Components\Products\Form\Edit::class, // Done
-        'products.form.media' => Components\Products\Form\Media::class, // Done
+        'products.form.edit' => Components\Products\Form\Edit::class,
+        'products.form.media' => Components\Products\Form\Media::class,
         'products.form.inventory' => Components\Products\Form\Inventory::class,
         'products.form.related-products' => Components\Products\Form\RelatedProducts::class,
         'products.form.seo' => Components\Products\Form\Seo::class,
         'products.form.shipping' => Components\Products\Form\Shipping::class,
         'products.form.variants' => Components\Products\Form\Variants::class,
-        'products.variant' => Components\Products\Variant::class,
         'products.variant-stock' => Components\Products\VariantStock::class,
 
-        'modals.add-variant' => Livewire\Modals\AddVariant::class,
         'modals.create-value' => Livewire\Modals\CreateValue::class,
         'modals.products-lists' => Livewire\Modals\ProductsLists::class,
         'modals.related-products-list' => Livewire\Modals\RelatedProductsList::class,
         'modals.update-value' => Livewire\Modals\UpdateValue::class,
-        'modals.update-variant-stock' => Livewire\Modals\UpdateVariantStock::class,
+
+        'slide-overs.add-variant' => Livewire\SlideOvers\AddVariantForm::class,
     ],
 
 ];

packages/admin/public/shopper.css

@@ -4071,6 +4071,10 @@ html {
   display: table;
 }
 
+.table-cell {
+  display: table-cell;
+}
+
 .table-row {
   display: table-row;
 }
@@ -5782,6 +5786,16 @@ html {
   background-color: rgb(234 179 8 / var(--tw-bg-opacity));
 }
 
+.bg-success-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(209 250 229 / var(--tw-bg-opacity));
+}
+
+.bg-warning-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 243 199 / var(--tw-bg-opacity));
+}
+
 .bg-opacity-10 {
   --tw-bg-opacity: 0.1;
 }
@@ -6639,6 +6653,16 @@ html {
   color: rgb(133 77 14 / var(--tw-text-opacity));
 }
 
+.text-success-800 {
+  --tw-text-opacity: 1;
+  color: rgb(6 95 70 / var(--tw-text-opacity));
+}
+
+.text-warning-800 {
+  --tw-text-opacity: 1;
+  color: rgb(146 64 14 / var(--tw-text-opacity));
+}
+
 .underline {
   text-decoration-line: underline;
 }
@@ -7025,6 +7049,10 @@ input[type='number'] {
   flex: 1 1 0%;
 }
 
+.sh-input-media .filepond--list-scroller {
+  z-index: 100;
+}
+
 .sidebar > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));

packages/admin/resources/css/base.css

@@ -61,3 +61,7 @@ input[type='number'] {
 .shopper-product-wizard > div {
   @apply flex-1 h-full;
 }
+
+.sh-input-media .filepond--list-scroller {
+  z-index: 100;
+}

packages/admin/resources/lang/en/pages/products.php

@@ -165,5 +165,6 @@
     ],
 
     'images_helpText' => 'Add images to your product.',
+    'variant_images_helpText' => 'Add images to your variant.',
     'thumbnail_helpText' => 'Used to represent your product during checkout, social sharing and more.',
 ];

packages/admin/resources/lang/fr/layout.php

@@ -60,8 +60,8 @@
             'invisible' => 'Invisible',
             'search' => 'Recherche',
             'price' => 'Prix',
-            'price_amount' => 'Montant du prix',
-            'compare_price' => 'Comparer au prix',
+            'price_amount' => 'Prix',
+            'compare_price' => 'Prix à comparer',
             'cost_per_item' => 'Coût par pièce',
             'sku' => 'SKU (Stock Keeping Unit)',
             'barcode' => 'Barcode (ISBN, UPC, GTIN, etc.)',

packages/admin/resources/lang/fr/pages/products.php

@@ -165,6 +165,7 @@
     ],
 
     'images_helpText' => 'Ajouter des images à votre produit.',
+    'variant_images_helpText' => 'Ajouter des images à votre variante.',
     'thumbnail_helpText' => 'Utilisé pour représenter votre produit lors du paiement, du partage social, et plus encore.',
 
 ];

packages/admin/resources/lang/fr/words.php

@@ -67,7 +67,7 @@
     ],
 
     'variants' => 'Variantes',
-    'variant' => 'Variant',
+    'variant' => 'Variante',
     'overview' => 'Aperçu',
     'seo' => 'SEO',
     'in_stock' => 'en stock',

packages/admin/resources/views/components/badge.blade.php

@@ -3,9 +3,9 @@
 @php
     $style = match($style ?? 'gray') {
         'primary' => 'bg-primary-100 text-primary-800',
-        'orange' => 'bg-orange-100 text-orange-800',
+        'warning' => 'bg-warning-100 text-warning-800',
         'danger' => 'bg-danger-100 text-danger-800',
-        'success' => 'bg-green-100 text-green-800',
+        'success' => 'bg-success-100 text-success-800',
         default => 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-white',
     };
 @endphp

packages/admin/resources/views/components/buttons/default.blade.php

@@ -1,10 +1,10 @@
 @isset($link)
-    <a
+    <x-shopper::link
         href="{{ $link }}"
         {{ $attributes->twMerge(['class' => 'inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-700 shadow-sm text-sm font-medium rounded-lg text-gray-700 dark:text-white bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 dark:focus:ring-offset-gray-900']) }}
     >
         {{ $slot }}
-    </a>
+    </x-shopper::link>
 @else
     <button {{ $attributes->twMerge(['class' => 'inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-700 shadow-sm text-sm font-medium rounded-lg text-gray-700 dark:text-white bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 dark:focus:ring-offset-gray-900']) }}>
         {{ $slot }}

packages/admin/resources/views/components/form-slider-over.blade.php

@@ -1,4 +1,4 @@
-@props(['action', 'title'])
+@props(['action', 'title', 'description' => null])
 
 <form wire:submit="{{ $action }}" class="flex h-full flex-col divide-y divide-gray-200 dark:divide-gray-700">
     <div class="h-0 flex-1 overflow-y-auto scrolling py-6">
@@ -18,6 +18,13 @@ class="rounded-md bg-white text-gray-400 hover:text-gray-500 dark:bg-gray-900 da
                     </button>
                 </div>
             </div>
+            @if($description)
+                <div class="mt-1">
+                    <p class="text-sm text-gray-500 dark:text-gray-400">
+                        {{ $description }}
+                    </p>
+                </div>
+            @endif
         </header>
         <div class="mt-8 flex-1 px-4 sm:px-6">
             {{ $slot }}