Skip to content

Commit

Permalink
Order creation help page and fix order attachments button
Browse files Browse the repository at this point in the history
  • Loading branch information
@Raccoon254
Raccoon254 committed Jun 11, 2024
1 parent fa95914 commit 8ca59c8
Show file tree
Hide file tree
Showing 5 changed files with 187 additions and 57 deletions.
15 changes: 15 additions & 0 deletions app/Livewire/OrderCreate.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,8 @@ class OrderCreate extends Component
public $total_price;
public $loggedInUser;
public $isWords;
public $words;
public $pages;

public array $attachments = [];

Expand All @@ -32,6 +34,19 @@ public function setCalculationMode($mode): void
$this->isWords = $mode;
}

public function updated($propertyName): void
{
$price_per_word = 15/275;

if ($this->words) {
$this->total_price = $this->words * $price_per_word;
}
if ($this->pages) {
$this->total_price = $this->pages * 15;
}
}


public function createOrder(): Redirector
{
$this->validate([
Expand Down
2 changes: 1 addition & 1 deletion resources/views/components/logged-out.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">

</head>
<body class="font-sans min-h-screen flex justify-between flex-col bg-gray-50 antialiased">
<body class="font-sans text-black/80 min-h-screen flex justify-between flex-col bg-gray-50 antialiased">
@include('layouts.navigation.logged-out')
@include('session.alerts')
{{ $slot }}
Expand Down
86 changes: 86 additions & 0 deletions resources/views/info/order/create.blade.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
<x-logged-out>
<div class="container mx-auto p-6">
<h1 class="text-3xl font-bold mb-4">How to Create an Order</h1>
<p class="mb-6">
Creating an order in our system is a straightforward process that involves filling out a form with the necessary details. Follow the steps below to create a new order:
</p>

<h2 class="text-2xl font-semibold mb-4">Steps to Create an Order</h2>

<ol class="list-decimal list-inside mb-6">
<li class="mb-4">
<strong>Log In:</strong> Ensure you are logged in to your account. If you don't have an account, please <a href="{{ route('register') }}" class="text-blue-500 underline">register here</a>.
</li>
<li class="mb-4">
<strong>Navigate to the Order Creation Page:</strong> Go to the <a href="{{ route('orders.create') }}" class="text-blue-500 underline">Order Creation Page</a>. This page contains the form you need to fill out.
</li>
<li class="mb-4">
<strong>Fill Out the Form:</strong> Provide the required information in the form:
<ul class="list-disc bg-blue-500 p-4 rounded-lg text-white list-inside mt-2">
<li><strong>Title:</strong> Enter a descriptive title for your order.</li>
<li><strong>Description:</strong> Provide a detailed description of the order requirements.</li>
<li><strong>Calculation Mode:</strong> Choose whether to calculate the order based on the number of words or pages.</li>
<li><strong>Number of Words or Pages:</strong> Depending on your selection, enter the number of words or pages.</li>
<li><strong>Total Price:</strong> The total price will be calculated automatically based on the number of words or pages.</li>
<li><strong>Attachments:</strong> You can add any relevant files or documents to your order.</li>
</ul>
</li>
<li class="mb-4">
<strong>Submit the Form:</strong> Once you have filled out all the fields, click the "Create Order" button. This will validate your input and create the order if everything is correct.
</li>
<li class="mb-4">
<strong>Payment:</strong> After creating the order, you will be redirected to the payment page to complete the payment process.
</li>
</ol>

<h2 class="text-2xl font-semibold mb-4">Form Fields and Validations</h2>

<ul class="list-disc bg-blue-500 p-4 rounded-lg text-white list-inside mb-6">
<li><strong>Title:</strong> Required, must be a string, and not exceed 255 characters.</li>
<li><strong>Description:</strong> Required, must be a string.</li>
<li><strong>Total Price:</strong> Required, must be a numeric value.</li>
<li><strong>Attachments:</strong> Optional, each file must not exceed 10MB.</li>
</ul>

<h2 class="text-2xl font-semibold mb-4">Calculation Modes</h2>

<p class="mb-6">
The system offers two modes for calculating the total price of an order:
</p>

<ul class="list-disc list-inside mb-6">
<li><strong>By Words:</strong> The price is calculated based on the number of words, with a rate of $15 per 275 words.</li>
<li><strong>By Pages:</strong> The price is calculated based on the number of pages, with a fixed rate of $15 per page.</li>
</ul>

<h2 class="text-2xl font-semibold mb-4">Adding Attachments</h2>

<p class="mb-6">
You can attach files to your order. Each file must not exceed 10MB in size. Supported file types include images, PDFs, Word documents, and compressed files.
</p>

<h2 class="text-2xl font-semibold mb-4">Order Status</h2>

<p class="mb-6">
When an order is created, it is assigned a status of "pending." After the payment is completed, the status will be updated accordingly.
</p>

<h2 class="text-2xl font-semibold mb-4">Redirecting to Payment</h2>

<p class="mb-6">
After successfully creating an order, you will be redirected to the payment page where you can complete the payment process. The payment page will display the total amount due for your order.
</p>

<h2 class="text-2xl font-semibold mb-4">Resetting the Form</h2>

<p class="mb-6">
Once the order is created, the form fields will be reset to their default values, allowing you to create a new order if needed.
</p>

<h2 class="text-2xl font-semibold mb-4">Removing Attachments</h2>

<p class="mb-6">
If you need to remove an attachment, simply click the "Remove" button next to the attachment in the list. This will remove the attachment from the order.
</p>
</div>
</x-logged-out>
140 changes: 84 additions & 56 deletions resources/views/orders/create.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,82 +10,98 @@
<div class="flex gap-4 sm:mx-3 lg:mx-4 flex-col h-full md:flex-row">
<div class="bg-white p-6 relative md:w-2/3 rounded-lg shadow-sm">
<!-- About icon -->
<a href="#"
<a href="{{ route('info.order.create') }}"
class="absolute top-0 right-0 bg-blue-500 text-white p-2 rounded-bl-lg rounded-tr-lg hover:bg-blue-600">
<i class="fas h-4 w-4 center fa-info-circle"></i>
</a>

<h3 class="text-lg font-semibold mb-4 flex items-center gap-2">
<i class="fas fa-plus-circle text-green-500"></i>
<h3 class="text-3xl font-semibold mb-4 flex items-center gap-2">
Create New Order
</h3>

<p class="text-gray-600 mb-6">
<p class="text-gray-600 text-sm mb-6">
To create a new order, please fill out the following form. You can provide a title, description, and
total price for your order. Additionally, you can attach any relevant files or documents to your
order.
</p>

<div class="mb-4">
<label for="title" class="block mb-2 font-semibold">Title</label>
<input type="text" wire:model="title" id="title"
class="w-full p-2 border border-gray-300 rounded-lg"
placeholder="Enter a title for your order">
@error('title') <span class="text-red-500">{{ $message }}</span> @enderror
</div>
<div class="mb-4">
<label for="description" class="block mb-2 font-semibold">Description</label>
<textarea wire:model="description" id="description"
class="w-full p-2 border border-gray-300 rounded-lg"
placeholder="Provide a description for your order"></textarea>
@error('description') <span class="text-red-500">{{ $message }}</span> @enderror
</div>

<div class="mb-4">
<label for="calculation_mode" class="block mb-2 font-semibold">Calculation Mode</label>
<div class="flex">
<button wire:click="setCalculationMode(true)" class="px-3 py-2 border {{ $isWords ? 'bg-green-500 text-white border-green-500' : 'border-gray-300' }}
<label for="title" class="block mb-2 font-semibold">Title</label>
<input type="text" wire:model="title" id="title"
class="w-full p-2 border border-gray-300 rounded-lg"
placeholder="Enter a title for your order">
@error('title') <span class="text-red-500">{{ $message }}</span> @enderror
</div>
<div class="mb-4">
<label for="description" class="block mb-2 font-semibold">Description</label>
<textarea wire:model="description" id="description"
class="w-full p-2 border border-gray-300 rounded-lg"
placeholder="Provide a description for your order"></textarea>
@error('description') <span class="text-red-500">{{ $message }}</span> @enderror
</div>

<div class="mb-4 flex gap-4 items-end">
<div class="">
<label for="calculation_mode" class="block mb-2 font-semibold">Calculation Mode</label>
<div class="flex">
<button wire:click="setCalculationMode(true)" class="px-3 py-2 border {{ $isWords ? 'bg-green-500 text-white border-green-500' : 'border-gray-300' }}
rounded-l-lg" id="wordsButton">Words
</button>
<button wire:click="setCalculationMode(false)" class="px-3 py-2 border {{ $isWords ? 'border-gray-300' : 'bg-green-500 text-white border-green-500' }}
</button>
<button wire:click="setCalculationMode(false)" class="px-3 py-2 border {{ $isWords ? 'border-gray-300' : 'bg-green-500 text-white border-green-500' }}
rounded-r-lg" id="pagesButton">Pages
</button>
</div>
</button>
</div>
</div>
<button
class="px-3 py-2 right-16 bg-gray-100 border-none rounded-lg text-primary ring-1 ring-blue-500 w-full"
onclick="document.getElementById('fileInput').click();">
<i class="fas fa-paperclip"></i>
Add Attachments
</button>
</div>

<div class="flex w-full gap-2">
<div class="mb-4 w-1/2 {{ !$isWords ? 'opacity-20' : '' }}">
<label for="words" class="block mb-2 font-semibold">Number of Words</label>
<input type="number" wire:model.live="words" id="words"
@disabled(!$isWords)
@class(!$isWords ? 'bg-gray-100 w-full p-2 border border-gray-300 rounded-lg' : 'w-full p-2 border border-gray-300 rounded-lg')
placeholder="Number of words">
@error('words') <span class="text-red-500">{{ $message }}</span> @enderror
</div>
<div class="mb-4 w-1/2 {{ !$isWords ? '' : 'opacity-20' }}">
<label for="pages" class="block mb-2 font-semibold">Number of Pages</label>
<input type="number" wire:model.live="pages" id="pages"
@disabled($isWords)
@class($isWords ? 'bg-gray-100 w-full p-2 border border-gray-300 rounded-lg' : 'w-full p-2 border border-gray-300 rounded-lg')
placeholder="Number of pages">
@error('pages') <span class="text-red-500">{{ $message }}</span> @enderror
</div>
<div class="flex w-full gap-2">
<div class="mb-4 w-1/2 {{ !$isWords ? 'opacity-20' : '' }}">
<label for="words" class="block mb-2 font-semibold">Number of Words</label>
<input type="number" wire:model.live="words" id="words"
@disabled(!$isWords)
@class(!$isWords ? 'bg-gray-100 w-full p-2 border border-gray-300 rounded-lg' : 'w-full p-2 border border-gray-300 rounded-lg')
placeholder="Number of words">
@error('words') <span class="text-red-500">{{ $message }}</span> @enderror
</div>
<div class="mb-4 w-1/2 {{ !$isWords ? '' : 'opacity-20' }}">
<label for="pages" class="block mb-2 font-semibold">Number of Pages</label>
<input type="number" wire:model.live="pages" id="pages"
@disabled($isWords)
@class($isWords ? 'bg-gray-100 w-full p-2 border border-gray-300 rounded-lg' : 'w-full p-2 border border-gray-300 rounded-lg')
placeholder="Number of pages">
@error('pages') <span class="text-red-500">{{ $message }}</span> @enderror
</div>
</div>

<div class="mb-4">
<label for="total_price" class="block mb-2 font-semibold">Total Price</label>
<input type="number" wire:model="total_price" id="total_price"
class="w-full p-2 border border-gray-300 rounded-lg" placeholder="Total price" readonly>
@error('total_price') <span class="text-red-500">{{ $message }}</span> @enderror
<div class="mb-4">
<label for="total_price" class="block mb-2 font-semibold">Total Price</label>
<div type="number" id="total_price"
class="w-full p-2 relative border opacity-60 border-gray-300 rounded-lg">
<span class="text-gray-500 absolute top-0 right-0 p-1 text-xs">
Total price is calculated automatically
</span>
{{number_format($total_price, 2)}} USD
</div>
<button wire:click="createOrder"
class="w-full py-2 bg-green-500 text-white font-semibold rounded-lg hover:bg-green-600 transition-colors">
Create Order
</button>

@error('total_price') <span class="text-red-500">{{ $message }}</span> @enderror
</div>
<button wire:click="createOrder"
class="w-full relative py-2 bg-green-500 text-white font-semibold rounded-lg hover:bg-green-600 transition-colors">
Create Order
<span class="absolute top-0 right-0 p-1 text-xs">
{{ number_format($total_price, 2) }} USD
</span>
</button>
</div>

<div class="bg-white p-6 rounded-lg shadow-sm md:w-2/3">
<h3 class="text-lg font-semibold mb-4 flex items-center gap-2">
<h3 class="text-2xl font-semibold mb-4 flex items-center gap-2">
<i class="fas fa-file-upload text-blue-500"></i>
Uploaded Attachments
</h3>
Expand All @@ -110,7 +126,7 @@ class="w-full h-20 object-cover rounded-md">
@endif
</div>
<span class="text-[10px] mt-1">
{{ substr($attachment->getClientOriginalName(), 0, 6) }}{{ strlen($attachment->getClientOriginalName()) > 5 ? '...' : '' }}
{{ substr($attachment->getClientOriginalName(), 0, 12) }}{{ strlen($attachment->getClientOriginalName()) > 5 ? '...' : '' }}
</span>

<button wire:click="removeAttachment('{{ $attachment->getClientOriginalName() }}')"
Expand All @@ -121,8 +137,20 @@ class="absolute top-0 right-1 -mt-2 -mr-3 bg-red-500 text-white center rounded-f
@endforeach
</div>
@else
<div class="flex w-full mb-2">
<span class="text-gray-500">Your order attachments will be displayed here</span>
<div class="mt-6">
<div class="flex center w-full mb-2">
<span class="text-gray-500">Your order attachments will be displayed here</span>
</div>
<input wire:model.live="attachments" type="file" id="fileInput" multiple style="display: none;"
accept="image/*, application/pdf, application/zip, application/x-rar-compressed application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document">
<div class="center mt-4">
<button
class="btn right-16 mr-2 btn-ghost ring-1 ring-blue-500 bg-gray-100 text-primary"
onclick="document.getElementById('fileInput').click();">
<i class="fas fa-paperclip"></i>
Add Attachments
</button>
</div>
</div>
@endif
</div>
Expand Down
1 change: 1 addition & 0 deletions routes/web.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,4 +48,5 @@
Route::view('/coming-soon', 'static.coming-soon')->name('coming-soon');
Route::fallback([PagesController::class, 'notfound'])->where('catchall', '.*');
Route::get('/info/price-calculator', [PagesController::class, 'info_price_calculator'])->name('info.price-calculator');
Route::view('/info/order/create', 'info.order.create')->name('info.order.create');
require __DIR__.'/auth.php';

0 comments on commit 8ca59c8

Please sign in to comment.