How to render a confirmation modal before submitting wizard form? [FilamentPHP]

Question

I'm currently building out a wizard form with multiple steps. I want to present the user with confirmation modal before confirming the last step, and creating data in database. I managed to get the native browser confirmation popup to work, but I would really like to use the built-in filament confirmation modal.

This is what I have so far:

public static function form(Form $form): Form
    {
        return $form
            ->schema([
                Wizard::make([
                    Wizard\Step::make('Wihtdrawal')
                        ->icon('heroicon-o-currency-dollar')
                        ->completedIcon('heroicon-s-currency-dollar')
                        ->description('Transaction details')
                        ->columns(2)
                        ->schema([
                            Forms\Components\TextInput::make('amount')
                                ->required()
                                ->numeric()
                                ->minValue(1)
                                ->mask(RawJs::make('$money($input)'))
                                ->stripCharacters(',')
                                ->prefix('KM'),
                            Forms\Components\Select::make('store_id')
                                ->label('Office')
                                ->searchable()
                                ->required()
                                ->options(Auth::user()->currentCompany->stores()->where('status', true)->pluck('name', 'id')),
                        ])->afterValidation(function (Forms\Get $get, Forms\Set $set) {
                            $currency = Currency::where('code', 'BAM')->first();
                            $store = Store::find($get('store_id'));

                            $set('store_name', $store->name);
                            $set('withdrawal_currency', $currency->code);
                            $set('withdrawal_amount', $get('amount'));

                            $formatter = new \NumberFormatter('en', \NumberFormatter::SPELLOUT);
                            $set('withdrawal_amount_text', $formatter->format(str_replace(',', '', $get('amount'))));
                        }),

                    Wizard\Step::make('Overview')
                        ->icon('heroicon-o-check-circle')
                        ->completedIcon('heroicon-c-check-circle')
                        ->description('Confirm transaction')
                        ->schema([
                            Forms\Components\Fieldset::make('Deposit')
                                ->columns(3)
                                ->schema([
                                    Placeholder::make('review_store_name')
                                        ->label('Office')
                                        ->content(fn(Get $get): string => $get('store_name') ?? ''),
                                    Placeholder::make('review_withdrawal_amount')
                                        ->label('Amount')
                                        ->content(fn(Get $get): string => $get('withdrawal_amount') ?? ''),
                                    Placeholder::make('review_withdrawal_currency')
                                        ->label('Currency')
                                        ->content(fn(Get $get): string => $get('withdrawal_currency') ?? ''),
                                    Placeholder::make('review_withdrawal_amount_text')
                                        ->label('Text amount')
                                        ->content(fn(Get $get): string => $get('withdrawal_amount_text') ?? ''),
                                ])->columns(2),
                        ]),
                ])
                    ->skippable(false)
                    ->columnSpanFull()
                    ->submitAction(new HtmlString(Blade::render(<<<BLADE
                            <x-filament::button
                                type="button"
                                size="sm"
                                wire:confirm="Are you sure you want to create this withdrawal?"
                                wire:click="create"
                            >
                                Confirm
                            </x-filament::button>
                        BLADE)))
            ]);
    }

As you can see, I added confirmation popup here:

->submitAction(new HtmlString(Blade::render(<<<BLADE
    <x-filament::button
        type="button"
        size="sm"
        wire:confirm="Are you sure you want to create this withdrawal?"
        wire:click="create"
    >
        Confirm
    </x-filament::button>
BLADE)))

And this is how it looks like:

And I want it to be like this:

I've tried including a custom action in the ->submitAction() method, but I couldn't get it to work:

use Filament\Actions\Action;
->submitAction(Action::make('confirm')->requiresConfirmation())

This way, the button shows up, but when clicking it, nothing happens:

Any help is appreciated.

Answer 1

add this into your CreateResource class:

protected function getCreateFormAction(): Action
{
  return parent::getCreateFormAction()
    ->submit(form: null) // set the form data to null, prevent save process
    ->requiresConfirmation()
    ->action(function() {
        $this->closeActionModal(); // Close btn
        $this->create();  // process the create method
    }
}

Answer 2

In case if anyone needs a similar solution to this, here's how I did it. Basically, I created my own custom submit action button, instead of the original one that comes with the wizard:

Forms\Components\Actions\Action::make('submit')
   ->requiresConfirmation()
   ->modalIcon('heroicon-s-arrow-down-tray')
   ->modalDescription('Are you sure you want to do this?')
   ->action(function (Action $action) use($form){
      //submit the form here/
   });