Variant creation enhancement

packages/admin/resources/lang/en/inputs.php

@@ -36,6 +36,7 @@
     'type.instructions' => 'Choose what type of attribute this will be.',
     'required' => 'Required',
     'tags.label' => 'Tags',
+    'base_price.label' => 'Base price',
     'base_price_excl_tax.label' => 'Base price (excl. Tax)',
     'base_price_excl_tax.instructions' => 'The base price for the product, excluding tax',
     'compare_at_price_excl_tax.label' => 'Compare at price (excl. tax)',

packages/admin/resources/lang/en/partials.php

@@ -113,6 +113,7 @@
     'products.variants.table_row_action_text' => 'Edit',
     'products.variants.table_row_delete_text' => 'Delete',
     'products.variants.removal_message' => 'This will remove all variants from this product',
+    'products.variants.empty_message' => 'Select option values',
     /**
      * Product type.
      */

packages/admin/resources/views/partials/products/editing/options.blade.php

@@ -1,10 +1,11 @@
 <div>
   @livewire('hub.components.product-options.option-manager', [
     'options' => $options,
+    'selectedValues' => $optionValues,
+  ])
+
+  @livewire('hub.components.products.options.option-selector', [
+    'selected' => $options->pluck('id')->toArray(),
+    'openPanel' => $openPanel ?? true,
   ])
-  <div>
-    <div class="pt-4 mt-4 space-x-4 border-t">
-      @livewire('hub.components.products.options.option-selector')
-    </div>
-  </div>
 </div>

packages/admin/resources/views/partials/products/editing/sections.blade.php

@@ -79,9 +79,15 @@ class="w-8 h-8" />
                 <div id="variants">
                     @include('adminhub::partials.products.editing.variants')
                 </div>
+
+                @if (!$product->id && $this->variantsEnabled)
+                    <div id="variants-shipping">
+                        @include('adminhub::partials.shipping')
+                    </div>
+                @endif
             @endif
 
-            @if ($this->getVariantsCount() <= 1)
+            @if ($this->getVariantsCount() <= 1 && !$this->variantsEnabled)
                 <div id="pricing">
                     @include('adminhub::partials.pricing')
                 </div>

packages/admin/resources/views/partials/products/editing/variants.blade.php

@@ -7,7 +7,12 @@
         </h3>
         <p class="text-sm text-gray-500">{{ __('adminhub::partials.products.variants.strapline') }}</p>
       </div>
-      <div>
+      <div class="flex items-center gap-2">
+        @if($variantsEnabled)
+            <x-hub::button x-on:click="Livewire.emit('toggleOptionSelector')" theme="gray" size="sm" type="button">
+                Select option
+            </x-hub::button>
+        @endif
         <x-hub::input.toggle wire:model="variantsEnabled" />
       </div>
     </header>
@@ -26,12 +31,14 @@
         </x-hub::alert>
       @endif
       @if($variantsEnabled)
-        @if($this->getVariantsCount() <= 1)
-          @include('adminhub::partials.products.editing.options')
-        @else
-          @livewire('hub.components.products.variants.table', [
-            'product' => $this->product,
-          ])
+        @include('adminhub::partials.products.editing.options', [
+          'openPanel' => $this->getVariantsCount() <= 1
+        ])
+
+        @if(count($this->optionValues))
+          <div class="pt-4 border-t">
+            @include('adminhub::partials.products.variants.manager')
+          </div>
         @endif
       @endif
   </div>

packages/admin/resources/views/partials/products/variants/manager.blade.php

@@ -0,0 +1,122 @@
+<div class="flex flex-col gap-2">
+    @if(sizeof($variants))
+        <div class="flex items-center justify-end space-x-2">
+            <div>
+                <select wire:change="setCurrency($event.target.value)" class="block w-full py-1 pl-2 pr-8 text-base text-gray-600 bg-gray-100 border-none rounded-md form-select focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
+                    @foreach($this->currencies as $c)
+                        <option value="{{ $c->id }}" @if($currency->id == $c->id) selected @endif>{{ $c->code }}</option>
+                    @endforeach
+                </select>
+            </div>
+        </div>
+
+        <div class="space-y-4">
+            @foreach($variants as $key => $variant)
+                <div class="space-y-2 px-1.5 py-2 even:bg-gray-50 even:rounded-md even:border">
+                    <div class="flex justify-between items-center">
+                        <div class="flex gap-2">
+                            @foreach($variant['labels'] as $label)
+                                <span class="text-sm text-gray-800">{{ $label['option'] }}: {{ $label['value'] }}</span>
+                            @endforeach
+                        </div>
+
+                        @if(!empty($variant['id']))
+                            <a href="{{  route('hub.products.variants.show', [
+                                'product' => $product->id,
+                                'variant' => $variant['id'],
+                            ]) }}">
+                                <x-hub::icon ref="pencil"
+                                        style="solid"
+                                        class="text-gray-400 hover:text-indigo-500" />
+                            </a>
+                        @endif
+                    </div>
+
+                    <div class="flex gap-2">
+
+                        <div class="grid gap-2">
+                            @foreach(['sku', 'gtin', 'mpn', 'ean'] as $identifier)
+                                @if(config("lunar-hub.products.{$identifier}.required", false))
+                                    <x-hub::input.group :label="__('adminhub::inputs.'.$identifier.'.label')" :for="$identifier.'-'.$key" :error="$errors->first('variants.'.$key.'.'.$identifier)" required>
+                                        <x-hub::input.text wire:model="variants.{{ $key }}.{{ $identifier }}" :error="$errors->first('variant.'.$key.'.'.$identifier)" :id="$identifier.'-'.$key"/>
+                                    </x-hub::input.group>
+                                @endif
+                            @endforeach
+                        </div>
+
+                        <div class="grid gap-2">
+                            <x-hub::input.group
+                                :label="__('adminhub::inputs.base_price_excl_tax.label')"
+                                :instructions="__('adminhub::inputs.base_price_excl_tax.instructions')"
+                                :for="'basePrices'.$key"
+                                :errors="$errors->get('variants.'.$key.'.basePrices.*.price')"
+                                required
+                            >
+                                <x-hub::input.price
+                                wire:model="variants.{{ $key }}.basePrices.{{ $this->currency->code }}.price"
+                                :error="$errors->first('variants.'.$key.'.basePrices.'.$this->currency->code.'.price')"
+                                :currencyCode="$this->currency->code"
+                                :id="'basePrices'.$key"
+                                required
+                                />
+                            </x-hub::input.group>
+
+                            <div x-data="{ expand: false }">
+                                <x-hub::input.group
+                                    :label="__('adminhub::partials.pricing.customer_groups.title')"
+                                    for=""
+                                >
+                                    <x-slot name="labelPrefix">
+                                        <button x-cloak
+                                                x-on:click.prevent="expand = !expand"
+                                                class="mr-2 text-gray-600 hover:text-gray-900 hover:bg-gray-50 bg-white rounded border border-gray-200 p-1">
+                                            <span :class="{ 'rotate-90': expand }"
+                                                class="block transition">
+                                                <x-hub::icon ref="chevron-right"
+                                                            class="w-3 h-3" />
+                                            </span>
+                                        </button>
+                                    </x-slot>
+
+                                    <div class="mt-2 bg-gray-100/60 border border-gray-200 p-2 rounded-lg" x-show="expand" x-transition>
+                                        @foreach($this->customerGroups as $group)
+                                            <div wire:key="variant_{{ $key }}_group_price_{{ $group->id }}">
+                                                <div class="grid items-center grid-cols-2 gap-4">
+                                                    <span class="text-sm text-gray-700">{{ $group->name }}</span>
+                                                    <x-hub::input.group
+                                                        :label="null"
+                                                        for="customerGroupPrices"
+                                                        :errors="$errors->get('variants.'.$key.'.customerGroupPrices.'.$group->id.'.*.price')"
+                                                        :error-icon="false"
+                                                    >
+                                                        <x-hub::input.price
+                                                            wire:model="variants.{{ $key }}.customerGroupPrices.{{ $group->id }}.{{ $this->currency->code }}.price"
+                                                            :currencyCode="$this->currency->code"
+                                                            :error="$errors->first('variants.'.$key.'.customerGroupPrices.'.$group->id.'.'.$this->currency->code.'.price')"
+                                                            :error-icon="false"
+                                                        />
+                                                    </x-hub::input.group>
+                                                </div>
+                                            </div>
+                                        @endforeach
+                                    </div>
+                                </x-hub::input.group>
+                            </div>
+                        </div>
+
+                        <x-hub::input.group :label="__('adminhub::inputs.stock.label')" :for="'stock'.$key" :error="$errors->first('variants.'.$key.'.stock')">
+                            <x-hub::input.text type="number" wire:model="variants.{{ $key }}.stock" :id="'stock'.$key" :error="$errors->first('variants.'.$key.'.stock')" />
+                        </x-hub::input.group>
+
+                        <x-hub::input.group :label="__('adminhub::inputs.backorder.label')" :for="'backorder'.$key" :error="$errors->first('variants.'.$key.'.backorder')">
+                            <x-hub::input.text type="number" wire:model="variants.{{ $key }}.backorder" :id="'backorder'.$key" :error="$errors->first('variants.'.$key.'.backorder')" />
+                        </x-hub::input.group>
+                    </div>
+                </div>
+
+            @endforeach
+        </div>
+    @else
+        <p class="text-md text-gray-500">{{ __('adminhub::partials.products.variants.empty_message') }}</p>
+    @endif
+</div>

packages/admin/src/Http/Livewire/Components/ProductOptions/OptionManager.php

@@ -81,7 +81,7 @@ public function toggle($optionId)
      */
     public function syncOptions($ids)
     {
-        $this->options = ProductOption::with('values')->findMany($ids);
+        $this->options = ProductOption::with('values')->orderBy('position')->findMany($ids);
     }
 
     /**
@@ -94,7 +94,7 @@ public function refreshOptions($event)
     {
         $this->selectedValues[] = $event['value'];
         $this->emit('option-manager.selectedValues', $this->selectedValues);
-        $this->options = ProductOption::with('values')->findMany($this->options->pluck('id'));
+        $this->options = ProductOption::with('values')->orderBy('position')->findMany($this->options->pluck('id'));
     }
 
     /**