feat: Complete Shiplogic integration with mobile-optimized ops workflow
**Shiplogic API Integration:**
- Fixed API base URL configuration (removed /api suffix)
- Implemented comprehensive request/response logging for rates and shipments endpoints
- Fixed PDF fetching: API returns S3 URLs, now downloads actual PDFs from S3
- Added tests and mock API responses for local development (routes/shiplogic-mock.php)
**Courier Service Enhancements:**
- Added redownloadShipmentPdfs() public method for re-downloading corrupted PDFs
- Enhanced error logging with full request/response bodies for debugging
- Proper binary PDF storage using Laravel Storage facade
- URL and S3 download handling for Shiplogic API responses
**Workflow & Operations:**
- Changed to manual "Ready for Collection" button instead of automatic move
- Operators now: scan QR → apply labels → click "Ready for Collection" → moves to Awaiting Collection
- Removed duplicate PDF attachments to Trello (was adding twice from two listeners)
- Fixed NotifySlackOnShipmentCreated to only handle Slack notifications
**Mobile-Optimized Ops Page:**
- Removed QR code display from order detail page
- Implemented responsive single-column layout for mobile phones
- Large touch-friendly buttons (full width, increased padding)
- Bold typography for better readability on small screens
- Larger input fields and tracking number displays
- Clear step-by-step instructions for warehouse operators
- Re-download PDF button for damaged/corrupted labels
**New Features:**
- POST /ops/orders/{uuid}/ready-for-collection endpoint
- Re-download PDFs functionality accessible from awaiting_collection and in_transit states
- Full audit logging for all operations via ops interface
- Proper error handling and user feedback
**Testing:**
- Added ShipmentCreationTest with mock HTTP client
- Created comprehensive testing guide (SHIPLOGIC_TESTING.md)
- Mock API routes for local development without hitting live API
This commit is contained in:
twotalesanimation
+202
-104
@@ -44,7 +44,8 @@
|
||||
|
||||
.form-group input,
|
||||
.form-group textarea,
|
||||
.form-group select {
|
||||
.form-group select,
|
||||
.address-search-group input {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
border: 1px solid #ddd;
|
||||
@@ -60,7 +61,8 @@
|
||||
|
||||
.form-group input:focus,
|
||||
.form-group textarea:focus,
|
||||
.form-group select:focus {
|
||||
.form-group select:focus,
|
||||
.address-search-group input:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 0 0 3px rgba(45, 80, 71, 0.1);
|
||||
@@ -237,49 +239,67 @@
|
||||
<h2>Delivery Information</h2>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="customer_name">Full Name</label>
|
||||
<input type="text" id="customer_name" name="customer_name" value="{{ old('customer_name') }}" required>
|
||||
<label for="customer_name">Full Name<span style="color: red;">*</span></label>
|
||||
<input type="text" id="customer_name" name="customer_name" value="{{ old('customer_name', Auth::check() ? Auth::user()->name : '') }}" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="customer_email">Email Address</label>
|
||||
<input type="email" id="customer_email" name="customer_email" value="{{ old('customer_email') }}" required>
|
||||
<label for="customer_email">Email Address<span style="color: red;">*</span></label>
|
||||
<input type="email" id="customer_email" name="customer_email" value="{{ old('customer_email', Auth::check() ? Auth::user()->email : '') }}" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="customer_phone">Phone Number</label>
|
||||
<label for="customer_phone">Phone Number<span style="color: red;">*</span></label>
|
||||
<input type="tel" id="customer_phone" name="customer_phone" value="{{ old('customer_phone') }}" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="shipping_type">Address Type <span style="color: red;">*</span></label>
|
||||
<select id="shipping_type" name="shipping_type" required>
|
||||
<option value="residential" {{ old('shipping_type') === 'residential' ? 'selected' : '' }}>Residential</option>
|
||||
<option value="business" {{ old('shipping_type') === 'business' ? 'selected' : '' }}>Business</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group" id="business_name_group" style="display: none;">
|
||||
<label for="business_name">Business Name <span style="color: red;">*</span></label>
|
||||
<input type="text" id="business_name" name="business_name" value="{{ old('business_name') }}" placeholder="Enter your business name">
|
||||
</div>
|
||||
|
||||
<div class="address-search-group">
|
||||
<label for="address_search">Delivery Address</label>
|
||||
|
||||
<label for="address_search">Delivery Address (Type to search)</label>
|
||||
<input type="text" id="address_search" placeholder="Start typing your address..." autocomplete="off">
|
||||
<button type="button" class="address-clear-btn" id="address_clear_btn">✕</button>
|
||||
</div>
|
||||
|
||||
<div id="address_fields_group" style="display: none;">
|
||||
<div id="address_fields_group">
|
||||
<div class="form-group">
|
||||
<label for="shipping_street_address">Street Address</label>
|
||||
<input type="text" id="shipping_street_address" name="shipping_street_address" value="{{ old('shipping_street_address') }}" required>
|
||||
<label for="shipping_unit_number">Apartment / Unit / Building Number (Optional)</label>
|
||||
<input type="text" id="shipping_unit_number" name="shipping_unit_number" placeholder="e.g. Apt 101, Unit B, Building 3" value="{{ old('shipping_unit_number') }}">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="shipping_street_address">Street Address <span style="color: red;">*</span></label>
|
||||
<input type="text" id="shipping_street_address" name="shipping_street_address" value="{{ old('shipping_street_address') }}" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="shipping_local_area">Suburb/Local Area</label>
|
||||
<label for="shipping_local_area">Suburb<span style="color: red;">*</span></label>
|
||||
<input type="text" id="shipping_local_area" name="shipping_local_area" value="{{ old('shipping_local_area') }}" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="shipping_city">City</label>
|
||||
<label for="shipping_city">City <span style="color: red;">*</span></label>
|
||||
<input type="text" id="shipping_city" name="shipping_city" value="{{ old('shipping_city') }}" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="shipping_zone">Province/Zone</label>
|
||||
<label for="shipping_zone">Province<span style="color: red;">*</span></label>
|
||||
<input type="text" id="shipping_zone" name="shipping_zone" value="{{ old('shipping_zone') }}" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="shipping_postcode">Postal Code</label>
|
||||
<label for="shipping_postcode">Postal Code <span style="color: red;">*</span></label>
|
||||
<input type="text" id="shipping_postcode" name="shipping_postcode" value="{{ old('shipping_postcode') }}" required>
|
||||
</div>
|
||||
|
||||
@@ -287,14 +307,6 @@
|
||||
<label for="shipping_country">Country</label>
|
||||
<input type="text" id="shipping_country" name="shipping_country" value="ZA" readonly>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="shipping_type">Address Type</label>
|
||||
<select id="shipping_type" name="shipping_type" required>
|
||||
<option value="residential" {{ old('shipping_type') === 'residential' ? 'selected' : '' }}>Residential</option>
|
||||
<option value="business" {{ old('shipping_type') === 'business' ? 'selected' : '' }}>Business</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
@@ -369,95 +381,181 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://maps.googleapis.com/maps/api/js?key={{ config('services.google_places.api_key') }}&libraries=places"></script>
|
||||
@php
|
||||
$apiKey = config('services.google_places.api_key');
|
||||
@endphp
|
||||
|
||||
@if(!$apiKey)
|
||||
<div style="background: #fff3cd; padding: 1rem; margin-bottom: 1rem; border-radius: 4px; color: #856404;">
|
||||
<strong>⚠️ Configuration Issue:</strong> Google Places API key is not configured. Please add <code>GOOGLE_PLACES_API_KEY</code> to your .env file.
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const addressSearchInput = document.getElementById('address_search');
|
||||
const addressFieldsGroup = document.getElementById('address_fields_group');
|
||||
const clearBtn = document.getElementById('address_clear_btn');
|
||||
// console.log('Checkout page loaded');
|
||||
// console.log('API Key configured:', {{ $apiKey ? 'true' : 'false' }});
|
||||
// @if($apiKey)
|
||||
// console.log('API Key length:', {{ strlen($apiKey) }});
|
||||
// @endif
|
||||
</script>
|
||||
|
||||
if (!addressSearchInput) return;
|
||||
@if($apiKey)
|
||||
<script async defer src="https://maps.googleapis.com/maps/api/js?key={{ $apiKey }}&loading=async&libraries=places&callback=initializeAddressAutocomplete"></script>
|
||||
<!-- <script>
|
||||
(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
|
||||
key: "{{ $apiKey }}",
|
||||
v: "weekly",
|
||||
|
||||
// Initialize Google Places Autocomplete
|
||||
const autocomplete = new google.maps.places.Autocomplete(addressSearchInput, {
|
||||
componentRestrictions: { country: 'za' },
|
||||
types: ['geocode']
|
||||
});
|
||||
}); -->
|
||||
</script>
|
||||
|
||||
// Prevent form submission on Enter when autocomplete is open
|
||||
addressSearchInput.addEventListener('keydown', function(e) {
|
||||
if (e.key === 'Enter' && document.querySelector('.pac-container:not([style*="display: none"])')) {
|
||||
e.preventDefault();
|
||||
}
|
||||
});
|
||||
|
||||
// When place is selected
|
||||
autocomplete.addListener('place_changed', function() {
|
||||
const place = autocomplete.getPlace();
|
||||
|
||||
if (!place.geometry) {
|
||||
console.error('Place has no geometry');
|
||||
return;
|
||||
}
|
||||
|
||||
// Parse address components
|
||||
const addressComponents = {};
|
||||
place.address_components.forEach(component => {
|
||||
addressComponents[component.types[0]] = component.long_name;
|
||||
<script>
|
||||
// Handle shipping type change
|
||||
document.getElementById('shipping_type').addEventListener('change', function() {
|
||||
const businessNameGroup = document.getElementById('business_name_group');
|
||||
const businessNameInput = document.getElementById('business_name');
|
||||
|
||||
if (this.value === 'business') {
|
||||
businessNameGroup.style.display = 'block';
|
||||
businessNameInput.setAttribute('required', 'required');
|
||||
} else {
|
||||
businessNameGroup.style.display = 'none';
|
||||
businessNameInput.removeAttribute('required');
|
||||
businessNameInput.value = '';
|
||||
}
|
||||
});
|
||||
|
||||
// Populate form fields
|
||||
document.getElementById('shipping_street_address').value =
|
||||
(addressComponents['street_number'] ? addressComponents['street_number'] + ' ' : '') +
|
||||
(addressComponents['route'] || '');
|
||||
|
||||
document.getElementById('shipping_local_area').value =
|
||||
addressComponents['sublocality'] || addressComponents['sublocality_level_1'] || '';
|
||||
|
||||
document.getElementById('shipping_city').value =
|
||||
addressComponents['locality'] || addressComponents['administrative_area_level_2'] || '';
|
||||
|
||||
document.getElementById('shipping_zone').value =
|
||||
addressComponents['administrative_area_level_1'] || '';
|
||||
|
||||
document.getElementById('shipping_postcode').value =
|
||||
addressComponents['postal_code'] || '';
|
||||
|
||||
document.getElementById('shipping_country').value =
|
||||
addressComponents['country'] || 'ZA';
|
||||
// Check initial state on page load
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const shippingType = document.getElementById('shipping_type');
|
||||
if (shippingType && shippingType.value === 'business') {
|
||||
document.getElementById('business_name_group').style.display = 'block';
|
||||
}
|
||||
});
|
||||
|
||||
// Show address fields group
|
||||
addressFieldsGroup.style.display = 'block';
|
||||
|
||||
// Show clear button
|
||||
clearBtn.classList.add('show');
|
||||
});
|
||||
function initializeAddressAutocomplete() {
|
||||
console.log('✓ Google Maps API loaded');
|
||||
|
||||
const addressSearchInput = document.getElementById('address_search');
|
||||
const clearBtn = document.getElementById('address_clear_btn');
|
||||
|
||||
// Clear button functionality
|
||||
clearBtn.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
addressSearchInput.value = '';
|
||||
addressSearchInput.focus();
|
||||
clearBtn.classList.remove('show');
|
||||
addressFieldsGroup.style.display = 'none';
|
||||
|
||||
// Clear form fields
|
||||
document.getElementById('shipping_street_address').value = '';
|
||||
document.getElementById('shipping_local_area').value = '';
|
||||
document.getElementById('shipping_city').value = '';
|
||||
document.getElementById('shipping_zone').value = '';
|
||||
document.getElementById('shipping_postcode').value = '';
|
||||
});
|
||||
if (!addressSearchInput) {
|
||||
console.error('Address search input not found');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
console.log('Initializing Google Places Autocomplete...');
|
||||
|
||||
// Using modern Autocomplete with new API
|
||||
const autocomplete = new google.maps.places.Autocomplete(addressSearchInput, {
|
||||
componentRestrictions: { country: 'za' },
|
||||
types: ['geocode']
|
||||
});
|
||||
|
||||
console.log('✓ Google Places Autocomplete initialized');
|
||||
|
||||
// Prevent form submission on Enter when autocomplete dropdown is open
|
||||
addressSearchInput.addEventListener('keydown', function(e) {
|
||||
const pacContainer = document.querySelector('.pac-container:not([style*="display: none"])');
|
||||
if (e.key === 'Enter' && pacContainer) {
|
||||
e.preventDefault();
|
||||
}
|
||||
});
|
||||
|
||||
// When place is selected
|
||||
autocomplete.addListener('place_changed', function() {
|
||||
const place = autocomplete.getPlace();
|
||||
|
||||
if (!place.geometry) {
|
||||
console.warn('Selected place has no geometry');
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('✓ Address selected:', place.formatted_address);
|
||||
|
||||
// Parse address components
|
||||
const addressComponents = {};
|
||||
place.address_components.forEach(component => {
|
||||
addressComponents[component.types[0]] = component.long_name;
|
||||
});
|
||||
|
||||
// Debug: log all available components
|
||||
console.log('Address components available:', Object.keys(addressComponents));
|
||||
|
||||
// Populate form fields
|
||||
document.getElementById('shipping_street_address').value =
|
||||
(addressComponents['street_number'] ? addressComponents['street_number'] + ' ' : '') +
|
||||
(addressComponents['route'] || '');
|
||||
|
||||
document.getElementById('shipping_local_area').value =
|
||||
addressComponents['political'] ||
|
||||
addressComponents['sublocality'] ||
|
||||
addressComponents['sublocality_level_1'] ||
|
||||
addressComponents['sublocality_level_2'] || '';
|
||||
|
||||
document.getElementById('shipping_city').value =
|
||||
addressComponents['locality'] || addressComponents['administrative_area_level_2'] || '';
|
||||
|
||||
document.getElementById('shipping_zone').value =
|
||||
addressComponents['administrative_area_level_1'] || '';
|
||||
|
||||
document.getElementById('shipping_postcode').value =
|
||||
addressComponents['postal_code'] || '';
|
||||
|
||||
document.getElementById('shipping_country').value =
|
||||
addressComponents['country'] || 'ZA';
|
||||
|
||||
// Show clear button
|
||||
clearBtn.classList.add('show');
|
||||
});
|
||||
|
||||
// Clear button functionality
|
||||
clearBtn.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
addressSearchInput.value = '';
|
||||
addressSearchInput.focus();
|
||||
clearBtn.classList.remove('show');
|
||||
|
||||
// Clear form fields
|
||||
document.getElementById('shipping_street_address').value = '';
|
||||
document.getElementById('shipping_unit_number').value = '';
|
||||
document.getElementById('shipping_local_area').value = '';
|
||||
document.getElementById('shipping_city').value = '';
|
||||
document.getElementById('shipping_zone').value = '';
|
||||
document.getElementById('shipping_postcode').value = '';
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('✗ Error initializing autocomplete:', error);
|
||||
showAddressFieldsManually();
|
||||
}
|
||||
}
|
||||
|
||||
function showAddressFieldsManually() {
|
||||
const addressSearchInput = document.getElementById('address_search');
|
||||
if (addressSearchInput) {
|
||||
addressSearchInput.style.display = 'none';
|
||||
document.querySelector('label[for="address_search"]').style.display = 'none';
|
||||
document.getElementById('address_clear_btn').style.display = 'none';
|
||||
|
||||
const fieldsGroup = document.getElementById('address_fields_group');
|
||||
if (fieldsGroup) {
|
||||
const notice = document.createElement('div');
|
||||
notice.style.cssText = 'background: #f0f0f0; padding: 1rem; border-radius: 4px; margin-bottom: 1.5rem; color: #666;';
|
||||
notice.innerHTML = '<strong>Note:</strong> Address search is not available. Please fill in your address details manually below.';
|
||||
fieldsGroup.parentNode.insertBefore(notice, fieldsGroup);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// If Google API doesn't load after 5 seconds, show fallback
|
||||
setTimeout(() => {
|
||||
if (typeof google === 'undefined') {
|
||||
console.warn('Google Maps API failed to load');
|
||||
showAddressFieldsManually();
|
||||
}
|
||||
}, 5000);
|
||||
</script>
|
||||
@endif
|
||||
|
||||
// Show fields if form has old values (validation error)
|
||||
const hasOldValues =
|
||||
document.getElementById('shipping_street_address').value ||
|
||||
document.getElementById('shipping_city').value;
|
||||
|
||||
if (hasOldValues) {
|
||||
addressFieldsGroup.style.display = 'block';
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@endsection
|
||||
|
||||
@@ -2,47 +2,180 @@
|
||||
<div class="bg-blue-50 border-2 border-blue-200 rounded-lg p-6 mb-8">
|
||||
<div class="flex items-start">
|
||||
<div class="flex-1">
|
||||
<h2 class="text-2xl font-bold text-blue-900 mb-2">📋 Order Status: Read-Only</h2>
|
||||
<p class="text-blue-800 mb-4">
|
||||
This order is in the <strong>{{ str_replace('_', ' ', ucfirst($order->status)) }}</strong> phase.
|
||||
No actions are available at this stage.
|
||||
</p>
|
||||
<h2 class="text-2xl font-bold text-blue-900 mb-4">📋 Order Status: {{ str_replace('_', ' ', ucfirst($order->status)) }}</h2>
|
||||
|
||||
@if($order->status === 'ready_to_ship')
|
||||
<div class="bg-white border-l-4 border-blue-500 p-4 rounded">
|
||||
<p class="text-gray-700">
|
||||
<strong>Next Step:</strong> Move Trello card to "Ready to Ship" to trigger automatic shipment creation.
|
||||
<div class="bg-white border-l-4 border-blue-500 p-4 rounded mb-6">
|
||||
<p class="text-gray-700 font-semibold text-lg mb-4">
|
||||
✓ Shipment created and ready to print labels/stickers
|
||||
</p>
|
||||
|
||||
<div class="space-y-3">
|
||||
<p class="text-gray-700 font-semibold">Next Steps:</p>
|
||||
<ol class="list-decimal list-inside space-y-2 text-gray-700">
|
||||
<li>Print the shipment sticker label</li>
|
||||
<li>Print the shipment waybill/label</li>
|
||||
<li>Apply labels to parcel</li>
|
||||
<li>Move parcel to collection bay</li>
|
||||
<li>Click "Ready for Collection" button below</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onclick="markReadyForCollection('{{ $order->uuid }}')"
|
||||
class="mt-6 w-full bg-green-600 hover:bg-green-700 text-white font-bold py-4 px-6 rounded-lg text-lg transition duration-200"
|
||||
>
|
||||
✓ Ready for Collection
|
||||
</button>
|
||||
</div>
|
||||
@elseif($order->status === 'awaiting_collection')
|
||||
<div class="bg-white border-l-4 border-blue-500 p-4 rounded">
|
||||
<p class="text-gray-700">
|
||||
<strong>Status:</strong> Parcel is awaiting collection from courier.
|
||||
<div class="bg-white border-l-4 border-blue-500 p-4 rounded mb-6">
|
||||
<p class="text-gray-700 font-semibold text-lg mb-4">
|
||||
📦 Parcel awaiting collection from courier
|
||||
</p>
|
||||
@if($order->courier_waybill_id)
|
||||
<p class="text-gray-700 mt-2">
|
||||
<strong>Waybill:</strong> <code class="bg-gray-100 px-2 py-1 rounded">{{ $order->courier_waybill_id }}</code>
|
||||
<p class="text-gray-700 mt-4">
|
||||
<strong>Waybill:</strong> <code class="bg-gray-100 px-3 py-2 rounded block mt-2 text-base break-all">{{ $order->courier_waybill_id }}</code>
|
||||
</p>
|
||||
@endif
|
||||
|
||||
<!-- Re-download PDFs Button -->
|
||||
@if($order->courier_shipment_id)
|
||||
<button
|
||||
type="button"
|
||||
onclick="redownloadPdfs('{{ $order->uuid }}')"
|
||||
class="mt-6 w-full bg-orange-500 hover:bg-orange-600 text-white font-bold py-4 px-6 rounded-lg text-lg transition duration-200"
|
||||
>
|
||||
🔄 Re-download Shipment PDFs
|
||||
</button>
|
||||
<p class="text-gray-600 text-sm mt-3">If labels are damaged, re-download them.</p>
|
||||
@endif
|
||||
</div>
|
||||
@elseif($order->status === 'in_transit')
|
||||
<div class="bg-white border-l-4 border-green-500 p-4 rounded">
|
||||
<p class="text-gray-700">
|
||||
<strong>Status:</strong> Parcel is in transit to the customer.
|
||||
<div class="bg-white border-l-4 border-green-500 p-4 rounded mb-6">
|
||||
<p class="text-gray-700 font-semibold text-lg mb-4">
|
||||
✈️ Parcel in transit to customer
|
||||
</p>
|
||||
@if($order->courier_tracking_number)
|
||||
<p class="text-gray-700 mt-2">
|
||||
<strong>Tracking:</strong> <code class="bg-gray-100 px-2 py-1 rounded">{{ $order->courier_tracking_number }}</code>
|
||||
<p class="text-gray-700 mt-4">
|
||||
<strong>Tracking Number:</strong> <code class="bg-gray-100 px-3 py-2 rounded block mt-2 text-base break-all">{{ $order->courier_tracking_number }}</code>
|
||||
</p>
|
||||
@endif
|
||||
|
||||
<!-- Re-download PDFs Button -->
|
||||
@if($order->courier_shipment_id)
|
||||
<button
|
||||
type="button"
|
||||
onclick="redownloadPdfs('{{ $order->uuid }}')"
|
||||
class="mt-6 w-full bg-orange-500 hover:bg-orange-600 text-white font-bold py-4 px-6 rounded-lg text-lg transition duration-200"
|
||||
>
|
||||
🔄 Re-download Shipment PDFs
|
||||
</button>
|
||||
<p class="text-gray-600 text-sm mt-3">If labels are damaged, re-download them.</p>
|
||||
@endif
|
||||
</div>
|
||||
@else
|
||||
<div class="bg-white border-l-4 border-gray-500 p-4 rounded">
|
||||
<p class="text-gray-700">
|
||||
The order is progressing through the fulfillment pipeline.
|
||||
<p class="text-gray-700 font-semibold text-lg">
|
||||
Order is processing through the fulfillment pipeline
|
||||
</p>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
async function markReadyForCollection(orderUuid) {
|
||||
if (!confirm('Mark order as ready for collection?')) {
|
||||
return;
|
||||
}
|
||||
|
||||
const button = document.querySelector('[onclick*="markReadyForCollection"]');
|
||||
button.disabled = true;
|
||||
button.classList.add('opacity-50');
|
||||
const originalText = button.innerText;
|
||||
button.innerText = '⏳ Processing...';
|
||||
|
||||
try {
|
||||
const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') ||
|
||||
document.querySelector('input[name="_token"]')?.value;
|
||||
|
||||
if (!csrfToken) {
|
||||
throw new Error('CSRF token not found on page');
|
||||
}
|
||||
|
||||
const response = await fetch(`/ops/orders/${orderUuid}/ready-for-collection`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'X-CSRF-Token': csrfToken,
|
||||
'Accept': 'application/json',
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({}),
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
alert('✓ Order moved to Awaiting Collection');
|
||||
location.reload();
|
||||
} else {
|
||||
alert('✗ Failed:\n' + data.message);
|
||||
}
|
||||
} catch (error) {
|
||||
alert('✗ Error: ' + error.message);
|
||||
} finally {
|
||||
button.disabled = false;
|
||||
button.classList.remove('opacity-50');
|
||||
button.innerText = originalText;
|
||||
}
|
||||
}
|
||||
|
||||
async function redownloadPdfs(orderUuid) {
|
||||
if (!confirm('Re-download shipment PDFs from Shiplogic API?')) {
|
||||
return;
|
||||
}
|
||||
|
||||
const button = document.querySelector('[onclick*="redownloadPdfs"]');
|
||||
button.disabled = true;
|
||||
button.classList.add('opacity-50');
|
||||
const originalText = button.innerText;
|
||||
button.innerText = '⏳ Downloading...';
|
||||
|
||||
try {
|
||||
const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') ||
|
||||
document.querySelector('input[name="_token"]')?.value;
|
||||
|
||||
if (!csrfToken) {
|
||||
throw new Error('CSRF token not found on page');
|
||||
}
|
||||
|
||||
const response = await fetch(`/ops/orders/${orderUuid}/redownload-pdfs`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'X-CSRF-Token': csrfToken,
|
||||
'Accept': 'application/json',
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({}),
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
alert('✓ PDFs re-downloaded successfully!');
|
||||
location.reload();
|
||||
} else {
|
||||
alert('✗ Failed to re-download PDFs:\n' + data.message);
|
||||
}
|
||||
} catch (error) {
|
||||
alert('✗ Error: ' + error.message);
|
||||
} finally {
|
||||
button.disabled = false;
|
||||
button.classList.remove('opacity-50');
|
||||
button.innerText = originalText;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,46 +1,31 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('content')
|
||||
<div class="container mx-auto px-4 py-8">
|
||||
<!-- Header -->
|
||||
<div class="w-full min-h-screen bg-gray-50 px-4 py-6 sm:px-6 lg:px-8">
|
||||
<!-- Mobile-friendly Header -->
|
||||
<div class="mb-8">
|
||||
<h1 class="text-3xl font-bold mb-2">Order {{ $order->order_number }}</h1>
|
||||
<p class="text-gray-600">{{ $order->uuid }}</p>
|
||||
<h1 class="text-4xl font-bold mb-2 break-words">{{ $order->order_number }}</h1>
|
||||
<p class="text-gray-600 text-sm break-all">{{ $order->uuid }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Order Summary Card -->
|
||||
<div class="bg-white rounded-lg shadow-md p-6 mb-8">
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6 mb-6">
|
||||
<div>
|
||||
<p class="text-sm text-gray-600">Status</p>
|
||||
<p class="text-lg font-semibold capitalize">{{ str_replace('_', ' ', $order->status) }}</p>
|
||||
<p class="text-sm text-gray-600 font-semibold">Status</p>
|
||||
<p class="text-xl font-bold capitalize mt-2">{{ str_replace('_', ' ', $order->status) }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm text-gray-600">Order Type</p>
|
||||
<p class="text-lg font-semibold">{{ $order->is_custom_order ? 'Custom' : 'Standard' }}</p>
|
||||
<p class="text-sm text-gray-600 font-semibold">Order Type</p>
|
||||
<p class="text-xl font-bold mt-2">{{ $order->is_custom_order ? 'Custom' : 'Standard' }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm text-gray-600">Customer</p>
|
||||
<p class="text-lg font-semibold">{{ $order->user->name ?? 'N/A' }}</p>
|
||||
<p class="text-sm text-gray-600 font-semibold">Customer</p>
|
||||
<p class="text-xl font-bold mt-2">{{ $order->user->name ?? 'N/A' }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm text-gray-600">Created</p>
|
||||
<p class="text-lg font-semibold">{{ $order->created_at->format('M d, Y') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- QR Code -->
|
||||
<div class="border-t pt-6">
|
||||
<div class="flex items-start justify-between mb-3">
|
||||
<div>
|
||||
<p class="text-sm text-gray-600 mb-3">Scan to access this order:</p>
|
||||
</div>
|
||||
<a href="{{ route('ops.order.sticker.download', $order) }}" class="inline-flex items-center px-3 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 text-sm">
|
||||
📥 Download Sticker (A6 PDF)
|
||||
</a>
|
||||
</div>
|
||||
<div class="inline-block bg-gray-50 p-4 rounded border">
|
||||
{!! file_get_contents(storage_path("app/public/qr-codes/{$order->uuid}.svg")) !!}
|
||||
<p class="text-sm text-gray-600 font-semibold">Created</p>
|
||||
<p class="text-xl font-bold mt-2">{{ $order->created_at->format('M d, Y') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user