Adding custom functionality in HUB on order detail

[SebastianBotez]

Hello once again community.
I have a question regarding the admin area (HUB).

How can we add custom logic in hub?
For example. Let's say that I want to generate AWB's for orders. I need to add a button or something like that in the order page that will call the courier API and generate the AWB and then, it needs to appear on the order page as generated.

Appreciate your help as ALWAYS!

[glennjacobs]

That is something solved by Filament, as it provides a lot more control of the UI. Filament is in v1 which is currently work in progress, but we hope to have an alpha release out soon.

[SebastianBotez]

Ok I understand. I found something regarding Extending the Hub using Slots.
I wonder how the views needs to be structured. Currently I get
Unable to find component: [hub.components.order.slots.cargus-slot]

The resources folder structure:

Many thanks!

[SebastianBotez]

Alright, for anyone who needs this information, I found out how to handle it.
Lunar offers a very nice method to extend the HUB.
In this case we will use extending slots. Since the team developing this awesome project is focusing on development, probably is less time investing in a complete documentation, but I suppose that's why we have the community here.

You can find the documentation for slots in Lunar 8 admin hub here: https://docs.lunarphp.io/admin-hub/extending.html#slots

Steps to create a custom slot (in my case a courier slot):

Create a class in Livewire folder (very important). At this time of writing, the documentation states to create the class here: App\Hub\Components\Slots. I added a new folder for a good folder Order structure so the final path for this class needs to be App\Http\Livewire\Hub\Components\Order\Slots;

<?php

namespace App\Http\Livewire\Hub\Components\Order\Slots;

use Livewire\Component;
use Lunar\Hub\Slots\AbstractSlot;
use Lunar\Hub\Slots\Traits\HubSlot;

class CargusSlot extends Component implements AbstractSlot
{
    use HubSlot;

    public static function getName()
    {
        return 'hub.components.order.slots.cargus-slot';
    }

    public function getSlotHandle()
    {
        return 'cargus-slot';
    }

    public function getSlotInitialValue()
    {
        return [];
    }

    public function getSlotPosition()
    {
        return 'top';
    }

    public function getSlotTitle()
    {
        return 'Cargus';
    }

    public function updateSlotModel()
    {
    }

    public function handleSlotSave($model, $data)
    {
        $this->slotModel = $model;
    }

    public function generateAwb()
    {
        
    }

    public function render()
    {
        return view('hub.components.order.slots.cargus-slot');
    }
}

Next, we have to create a view here hub.components.order.slots.cargus-slot. We will create the blade file in resources/views/hub/components/order/slots

My blade looks like this:

<section class="p-4 bg-white rounded-lg shadow">
    <header class="flex items-center justify-between">
        <strong class="text-gray-700">
            Cargus
        </strong>
    </header>

    <a href="javascript:void(0);" wire:click="generateAwb" class="text-sky-500 underline">Generate AWB</a>
</section>

Next, we go to App/Providers/AppServiceProvider.php and in boot function we add this:

use App\Http\Livewire\Hub\Components\Order\Slots\CargusSlot;
public function boot(): void
{
     .......
     Slot::register('order.show', CargusSlot::class);
}

After thise steps, we can create custom functionality using the livewire logic. For example, our blade file had a link with wire:click="generateAwb" that points to our created class. From there we can use $this->slotModel to make whatever we want. In our case, we will call the courier API, generate the api and save the AWB in order meta column. We can do something like this:

File: App\Http\Livewire\Hub\Components\Order\Slots\CargusSlot.php
public function generateAwb()
{
    $generatedAWB = 'ABCDEFG';
    $this->slotModel->meta = [
        'awb' => $generatedAWB
    ];
    $this->slotModel->save();
}

The code above will update our order and add in the meta column this:

{
    "awb": "ABCDEFG"
}

From here you can create any logic you want. For example you can add a condition to hide the anchor for generating the AWB if it's already generated.

Once again, thank you developers for this awesome product. I'm 100% sure that this project will have great success once many people will find it and I also bet that anyone who needs a complete e-commerce boilerplate would pay for something like this!
Keep up the good work!