Laravel 8 E-Commerce - User Order Cancellation

In this video, we will learn about canceling orders from the user panel.

Let's explore how to cancel an order from the user's perspective.

Switch to the project and open the UserOrderDetailsComponent.php class file.

Create a function to cancel the order:

public function cancelOrder()
{
	$order = Order::find($this->order_id);
	$order->status = "canceled";
	$order->canceled_date = DB::raw('CURRENT_DATE');
	$order->save();
	session()->flash('order_message','Order has been canceled!');
}

Also, import the DB facade:

use Illuminate\Support\Facades\DB;

Now, go to the user-order-details-component.blade.php view file and call the cancelOrder function:

<div class="row">
	<div class="col-md-12">
		@if(Session::has('order_message'))
			<div class="alert alert-success" role="alert">{{Session::get('order_message')}}</div>
		@endif
		<div class="panel panel-default">
			<div class="panel-heading">
				<div class="row">
					<div class="col-md-6">
						Order Details
					</div>
					<div class="col-md-6">
						<a href="{{route('user.orders')}}" class="btn btn-success pull-right">My Orders</a>
						@if($order->status == 'ordered')
							<a href="#" wire:click.prevent="cancelOrder" style="margin-right:20px;" class="btn btn-warning pull-right">Cancel Order</a>
						@endif
					</div>
				</div>
			</div>
			<div class="panel-body">
				<table class="table">
					<th>Order ID</th>
					<td>{{$order->id}}</td>
					<th>Order Date</th>
					<td>{{$order->created_at}}</td>
					<th>Status</th>
					<td>{{$order->status}}</td>
					@if($order->status == 'delivered')
					<th>Delivery Date</th>
					<td>{{$order->delivered_date}}</td>
					@elseif($order->status == 'canceled')
					<th>Canceled Date</th>
					<td>{{$order->canceled_date}}</td>
					@endif
				</table>
			</div>
		</div>
	</div>
</div>  

Now, let's test it out.

Switch to your browser and refresh the page.

You should see a list of orders, including order number 1, which has a status of "Delivered".

If you click on the "Details" link, you'll see the order status and delivery date.

Note that the "Cancel Order" link is not visible because the order has already been delivered.

Let's check another order.

Click on the order that has a status of "Cancelled".

You should see the order status and cancelled date.

Now, let's check an order with a status of "Ordered".

You should see the "Cancel Order" link.

If you want to cancel this order, simply click on the link.

Let's click on it, and you should see a message indicating that the order has been cancelled.

The order status has now been changed to "Cancelled".

And that's how you can cancel an order from the user panel.

This concludes our tutorial on User Order Cancellation.