Thiru-tenext
8207e27a97
Picks up where 0d66627 left off. Three things.
SIGN-IN, CUT TO THE QUESTION IT ASKS
It opened with a quarter-screen crimson hero carrying a lockup, a CUSTOMER
badge, a display-size promise and a sub-line, then a Phone/Email toggle, then a
labelled field, then a card explaining what a verification code is. Six things
to read before the one thing to do.
Nobody arrives at a sign-in screen needing to be sold the product. It is a
heading, a field and a button now, which is where Uber, Bolt and Porter put
them. The toggle became one quiet line under the field — choosing a method was
the first decision on the screen, before the customer had seen what was being
asked, and almost everyone uses the phone. The privacy card went: it explained
that a code would be sent, which the next screen demonstrates a second later.
`DmTextField.label` is nullable for this — "Enter your mobile number" above a
field captioned "Phone number" is one sentence printed twice.
BOOKING, DOWN TO ONE SCREENFUL
Landmark, recipient name and recipient phone are all optional and were all
drawn at the weight of the two fields that are not, putting six rows of "you
may skip this" between the address and the button. They fold behind one row
that counts what is filled in rather than just saying "optional".
Four crimson section heads became one. An accent used five times on a screen is
not an accent; crimson now marks the destination, which is the only choice that
changes the price.
Together those put the window, the package count and the CTA above the fold.
THE OFFLINE BUILD, BACK, UNDER TWO RULES
Deleted on 15 Sep after it cost two rounds of hunting for bookings in the admin
console that had never left the phone. That was not caused by the fake
existing — it was caused by a fake that did not announce itself and that
nothing stopped from shipping. Both are closed:
* `useDevData` is false in a release whatever the defines say;
* `describe` leads with DEV DATA (offline) and shows "no network" rather than
a host the build never contacts.
It is opt-in — `flutter run` still talks to the real API — which is the
property whose absence caused the original mess. `devAutoLogin` is deliberately
false under FLUTTER_TEST so the widget tests keep driving the real entrance.
flutter run --dart-define=DM_MOCK=true
86 tests green, analyze clean.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01EqVJPB9B4QuieZnBAAKgYQ
876 lines
29 KiB
Dart
876 lines
29 KiB
Dart
import 'package:flutter/material.dart';
|
||
import 'package:lucide_icons_flutter/lucide_icons.dart';
|
||
|
||
import '../../data/models.dart';
|
||
import '../../data/app_config.dart';
|
||
import '../../state/app_scope.dart';
|
||
import '../../state/app_state.dart';
|
||
import '../tokens.dart';
|
||
import '../widgets/buttons.dart';
|
||
import '../widgets/cards.dart';
|
||
import '../widgets/chrome.dart';
|
||
import '../widgets/feedback.dart';
|
||
import '../widgets/milestones.dart';
|
||
import '../widgets/misc.dart';
|
||
import '../widgets/pieces.dart';
|
||
import '../widgets/route_map.dart';
|
||
import '../widgets/route_rail.dart';
|
||
import '../widgets/states.dart';
|
||
import '../widgets/summary.dart';
|
||
import 'booking/booking_routes.dart';
|
||
import 'booking/send_screen.dart';
|
||
import 'sheets/cancel_sheet.dart';
|
||
|
||
/// Live tracking.
|
||
///
|
||
/// One screen for the whole journey. While a Miler is being matched it shows a
|
||
/// radar; once one is assigned it shows their live position, who they are, and
|
||
/// how to reach them; after pickup it follows the order to the door.
|
||
/// Cancellation is offered only while the backend still allows it.
|
||
class TrackingScreen extends StatelessWidget {
|
||
const TrackingScreen({super.key, this.focusedDestination});
|
||
|
||
/// When set, this screen follows one destination's own order rather than the
|
||
/// pickup as a whole. Only meaningful once the orders exist.
|
||
final int? focusedDestination;
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
final app = AppScope.of(context);
|
||
final booking = app.trackedBooking;
|
||
|
||
if (booking == null) {
|
||
return Scaffold(
|
||
backgroundColor: DmColors.canvas,
|
||
appBar: const DmTopBar(title: 'Live tracking'),
|
||
body: const DmEmptyState(
|
||
icon: LucideIcons.package,
|
||
title: 'Nothing to track',
|
||
message: 'Book a pickup to get started.',
|
||
),
|
||
);
|
||
}
|
||
|
||
final cancelled = booking.isCancelled;
|
||
final slot = app.slotById(booking.slotId);
|
||
|
||
// A focused destination follows its own journey; the pickup follows its own.
|
||
final focused =
|
||
(focusedDestination != null &&
|
||
focusedDestination! < booking.destinations.length &&
|
||
booking.destinations[focusedDestination!].trackingId != null)
|
||
? booking.destinations[focusedDestination!]
|
||
: null;
|
||
final stage = focused?.stage ?? booking.stage;
|
||
|
||
final milerEnRoute =
|
||
!cancelled &&
|
||
booking.miler != null &&
|
||
stage.index >= JourneyStage.assigned.index &&
|
||
stage.index <= JourneyStage.pickedUp.index;
|
||
final assigning = !cancelled && stage == JourneyStage.booked;
|
||
|
||
return Scaffold(
|
||
backgroundColor: DmColors.canvas,
|
||
appBar: DmTopBar(
|
||
title: cancelled ? 'Booking' : 'Live tracking',
|
||
// The reference belongs in the bar, not in a card three scrolls down:
|
||
// it is what a customer reads out when they call about this parcel.
|
||
trailing: Text(
|
||
focused?.trackingId ?? booking.displayId,
|
||
style: DmText.mono,
|
||
),
|
||
),
|
||
body: ListView(
|
||
padding: const EdgeInsets.only(bottom: 24),
|
||
children: [
|
||
_StatusHeader(booking: booking, slot: slot, focused: focused),
|
||
|
||
if (assigning)
|
||
const _AssigningHero()
|
||
else if (!cancelled)
|
||
Padding(
|
||
padding: const EdgeInsets.fromLTRB(
|
||
DmSpace.pad,
|
||
0,
|
||
DmSpace.pad,
|
||
10,
|
||
),
|
||
// The map is a cell of a card, not a floating rounded rectangle
|
||
// of its own: it gets the card's edge, and the line under it
|
||
// carries the fact the picture cannot state precisely.
|
||
child: DmCard(
|
||
children: [
|
||
DmRouteMap(
|
||
height: 178,
|
||
radius: 0,
|
||
pickup: booking.pickup,
|
||
destination: (focused ?? booking.destinations.first).hub,
|
||
showMiler: milerEnRoute,
|
||
progress: _routeProgress(stage),
|
||
pickupLabel: booking.pickup.title,
|
||
destinationLabel: booking.destination.districtName,
|
||
badge: milerEnRoute && booking.milerDistanceKm != null
|
||
? _Badge(
|
||
icon: LucideIcons.bike,
|
||
label: booking.milerDistanceKm == 0
|
||
? 'At your door'
|
||
: '${booking.miler?.name ?? 'Your Miler'}, '
|
||
'${booking.milerDistanceKm} km away',
|
||
)
|
||
: null,
|
||
),
|
||
DmCardCell(
|
||
padding: const EdgeInsets.fromLTRB(16, 12, 10, 12),
|
||
child: Row(
|
||
children: [
|
||
const Icon(
|
||
LucideIcons.clock,
|
||
size: 15,
|
||
color: DmColors.ink3,
|
||
),
|
||
const SizedBox(width: 10),
|
||
Expanded(
|
||
child: Text(
|
||
// Short enough to sit beside Refresh without
|
||
// ellipsizing, which is the whole job of this line.
|
||
milerEnRoute && booking.milerEtaMinutes != null
|
||
? 'Pickup in about ${booking.milerEtaMinutes} min'
|
||
: 'Tracking your parcel live',
|
||
style: DmText.small,
|
||
maxLines: 1,
|
||
overflow: TextOverflow.ellipsis,
|
||
),
|
||
),
|
||
DmTextAction(
|
||
label: 'Refresh',
|
||
onPressed: app.refreshOrders,
|
||
),
|
||
],
|
||
),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
|
||
if (assigning && booking.milersInZone > 0)
|
||
Padding(
|
||
padding: const EdgeInsets.fromLTRB(
|
||
DmSpace.pad,
|
||
0,
|
||
DmSpace.pad,
|
||
10,
|
||
),
|
||
child: DmInfoBanner(
|
||
icon: LucideIcons.users,
|
||
title:
|
||
'${booking.milersInZone} verified Milers active in your zone',
|
||
message: 'Most pickups are accepted within a few minutes.',
|
||
),
|
||
),
|
||
|
||
if (milerEnRoute)
|
||
_MilerCard(person: booking.miler!, role: 'Your Miler'),
|
||
if (!cancelled &&
|
||
stage == JourneyStage.outForDelivery &&
|
||
booking.deliveryAgent != null)
|
||
_MilerCard(person: booking.deliveryAgent!, role: 'Delivery Miler'),
|
||
|
||
if (!cancelled)
|
||
Padding(
|
||
padding: const EdgeInsets.fromLTRB(
|
||
DmSpace.pad,
|
||
0,
|
||
DmSpace.pad,
|
||
10,
|
||
),
|
||
child: _Journey(booking: booking),
|
||
),
|
||
|
||
if (!cancelled && booking.hasOrders && booking.isMultiDestination)
|
||
Padding(
|
||
padding: const EdgeInsets.fromLTRB(
|
||
DmSpace.pad,
|
||
0,
|
||
DmSpace.pad,
|
||
10,
|
||
),
|
||
child: _YourPackages(booking: booking, focused: focused),
|
||
),
|
||
|
||
Padding(
|
||
padding: const EdgeInsets.fromLTRB(DmSpace.pad, 0, DmSpace.pad, 10),
|
||
child: _RouteOutline(
|
||
booking: booking,
|
||
slot: slot,
|
||
focused: focused,
|
||
),
|
||
),
|
||
|
||
// Stands in for backend push updates. Real stage changes arrive
|
||
// from `GET /customer/bookings/{reference}`, so this exists only
|
||
// where there is no server to send them.
|
||
if (AppConfig.showStageStepper) _StageStepper(booking: booking),
|
||
],
|
||
),
|
||
bottomNavigationBar: DmFooter(
|
||
edge: true,
|
||
children: _footerActions(context, app, booking),
|
||
),
|
||
);
|
||
}
|
||
|
||
/// How far along the route the Miler is drawn, by stage.
|
||
static double _routeProgress(JourneyStage stage) => switch (stage) {
|
||
JourneyStage.assigned => 0.08,
|
||
JourneyStage.onTheWay => 0.42,
|
||
JourneyStage.arrived || JourneyStage.pickedUp => 0.92,
|
||
_ => 0.5,
|
||
};
|
||
|
||
/// The footer is a hierarchy, not a single button: the helpful action is the
|
||
/// filled one and cancelling is a text button under it. Cancel used to be a
|
||
/// full-width outlined button in the danger colour — the most prominent
|
||
/// control on a screen whose job is to reassure someone that their parcel is
|
||
/// fine.
|
||
List<Widget> _footerActions(BuildContext context, AppState app, Booking booking) {
|
||
if (booking.isCancelled || booking.stage == JourneyStage.delivered) {
|
||
return [
|
||
DmButton(
|
||
label: 'Book another pickup',
|
||
icon: LucideIcons.arrowRight,
|
||
onPressed: () {
|
||
app.startBooking();
|
||
Navigator.of(context).pushAndRemoveUntil(
|
||
bookingRoute<void>(BookingRoutes.send, (_) => const SendScreen()),
|
||
(route) => route.isFirst,
|
||
);
|
||
},
|
||
),
|
||
];
|
||
}
|
||
|
||
return [
|
||
DmButton(
|
||
label: 'Share live tracking',
|
||
icon: LucideIcons.share2,
|
||
kind: DmButtonKind.outline,
|
||
onPressed: () => DmToast.show(context, 'Sharing is coming soon'),
|
||
),
|
||
// Backend policy decides whether cancelling is still possible.
|
||
if (app.isCancellable(booking.stage))
|
||
DmButton(
|
||
label: 'Cancel this pickup',
|
||
kind: DmButtonKind.ghost,
|
||
danger: true,
|
||
onPressed: () async {
|
||
final cancelled = await showCancelSheet(context, booking);
|
||
if (cancelled == true && context.mounted) {
|
||
DmToast.show(context, 'Pickup cancelled');
|
||
}
|
||
},
|
||
)
|
||
else
|
||
DmButton(
|
||
label: 'Need help with this order?',
|
||
kind: DmButtonKind.ghost,
|
||
onPressed: () =>
|
||
DmToast.show(context, 'Support chat is not available yet'),
|
||
),
|
||
];
|
||
}
|
||
}
|
||
|
||
/// The screen's one loud surface: what is happening, right now.
|
||
///
|
||
/// ── Why this is a filled card and not a heading ──
|
||
///
|
||
/// The status used to be an eyebrow, a 32pt headline and a row of chips laid
|
||
/// straight onto the canvas. It said the right words, but it looked like every
|
||
/// other heading in the app, so the screen opened with no focal point and the
|
||
/// map below it — a decoration — became the loudest thing on the page.
|
||
///
|
||
/// It is now the one crimson card the design allows per screen. It carries the
|
||
/// live pulse, the headline, the journey's own progress and the window, so the
|
||
/// whole answer is in one object above the fold. A cancelled booking drops to a
|
||
/// plain card: nothing is live, and a crimson field would keep insisting it is.
|
||
class _StatusHeader extends StatelessWidget {
|
||
const _StatusHeader({
|
||
required this.booking,
|
||
required this.slot,
|
||
this.focused,
|
||
});
|
||
|
||
final Booking booking;
|
||
final PickupSlot? slot;
|
||
|
||
/// Set when following one destination's own order.
|
||
final DestinationGroup? focused;
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
final cancelled = booking.isCancelled;
|
||
final stage = focused?.stage ?? booking.stage;
|
||
|
||
final headline = switch (true) {
|
||
_ when cancelled => 'Booking cancelled',
|
||
_ when stage == JourneyStage.booked => 'Finding your Miler',
|
||
_ when stage == JourneyStage.assigned && booking.miler != null =>
|
||
'${booking.miler!.name} is assigned',
|
||
_ when stage == JourneyStage.onTheWay && booking.miler != null =>
|
||
booking.milerEtaMinutes == null
|
||
? '${booking.miler!.name} is on the way'
|
||
: '${booking.miler!.name} is ${booking.milerEtaMinutes} minutes away',
|
||
_ when stage == JourneyStage.arrived && booking.miler != null =>
|
||
'${booking.miler!.name} is at your door',
|
||
_ => stage.headline,
|
||
};
|
||
|
||
final sub = cancelled
|
||
? 'This pickup was cancelled. You were not charged.'
|
||
: stage.sub;
|
||
|
||
final total = CustomerMilestone.values.length;
|
||
final step = CustomerMilestone.of(stage).index + 1;
|
||
|
||
if (cancelled) {
|
||
return Padding(
|
||
padding: const EdgeInsets.fromLTRB(DmSpace.pad, 0, DmSpace.pad, 10),
|
||
child: DmCard(
|
||
children: [
|
||
DmCardCell(
|
||
child: Column(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
children: [
|
||
const DmPill('Cancelled', tone: DmPillTone.off),
|
||
const SizedBox(height: 12),
|
||
Text(headline, style: DmText.display.copyWith(fontSize: 25)),
|
||
const SizedBox(height: 6),
|
||
Text(sub, style: DmText.small),
|
||
],
|
||
),
|
||
),
|
||
],
|
||
),
|
||
);
|
||
}
|
||
|
||
return Padding(
|
||
padding: const EdgeInsets.fromLTRB(DmSpace.pad, 0, DmSpace.pad, 10),
|
||
child: DmCard(
|
||
tone: DmCardTone.fill,
|
||
children: [
|
||
DmCardCell(
|
||
padding: const EdgeInsets.fromLTRB(16, 16, 16, 16),
|
||
child: Column(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
children: [
|
||
Row(
|
||
children: [
|
||
const DmLiveDot(size: 9, color: Colors.white),
|
||
const SizedBox(width: 4),
|
||
Text(
|
||
'LIVE',
|
||
style: DmText.eyebrow.copyWith(
|
||
fontSize: 11,
|
||
color: Colors.white,
|
||
),
|
||
),
|
||
const Spacer(),
|
||
if (focused != null)
|
||
Flexible(
|
||
child: Text(
|
||
'To ${focused!.destination.label}',
|
||
maxLines: 1,
|
||
overflow: TextOverflow.ellipsis,
|
||
textAlign: TextAlign.right,
|
||
style: DmText.small.copyWith(color: DmColors.onBrand3),
|
||
),
|
||
),
|
||
],
|
||
),
|
||
const SizedBox(height: 12),
|
||
Text(
|
||
headline,
|
||
style: DmText.display.copyWith(fontSize: 27, color: Colors.white),
|
||
),
|
||
const SizedBox(height: 6),
|
||
Text(sub, style: DmText.small.copyWith(color: DmColors.onBrand2)),
|
||
const SizedBox(height: 16),
|
||
DmStepBar(
|
||
progress: step / total,
|
||
steps: total,
|
||
current: step,
|
||
onFill: true,
|
||
// The milestone, not the window: the window is already the
|
||
// line underneath, and at this width it clipped to
|
||
// "Window 2:00 – 4:…".
|
||
label: CustomerMilestone.of(stage).label,
|
||
),
|
||
const SizedBox(height: 10),
|
||
Text(
|
||
_footnote(stage),
|
||
style: DmText.tiny.copyWith(color: DmColors.onBrand3),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
],
|
||
),
|
||
);
|
||
}
|
||
|
||
/// The one fact under the rail: whatever is most useful at this stage.
|
||
String _footnote(JourneyStage stage) {
|
||
if (booking.milerEtaMinutes != null && booking.milerEtaMinutes! > 0) {
|
||
return 'Arriving in about ${booking.milerEtaMinutes} min';
|
||
}
|
||
if (stage == JourneyStage.arrived) return 'Waiting at your door';
|
||
if (stage.index <= JourneyStage.assigned.index && slot != null) {
|
||
return '${slot!.day}, ${slot!.window}';
|
||
}
|
||
if (booking.expectedDelivery != null) {
|
||
return 'Expected ${booking.expectedDelivery}';
|
||
}
|
||
return CustomerMilestone.of(stage).label;
|
||
}
|
||
}
|
||
|
||
/// The journey, compressed to what just happened.
|
||
class _Journey extends StatefulWidget {
|
||
const _Journey({required this.booking});
|
||
|
||
final Booking booking;
|
||
|
||
@override
|
||
State<_Journey> createState() => _JourneyState();
|
||
}
|
||
|
||
class _JourneyState extends State<_Journey> {
|
||
bool _all = false;
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
return DmMilestones(
|
||
booking: widget.booking,
|
||
title: widget.booking.trackingId == null ? 'Recent updates' : 'Live journey',
|
||
maxRows: _all ? null : 3,
|
||
onExpand: () => setState(() => _all = true),
|
||
);
|
||
}
|
||
}
|
||
|
||
/// A chip floating on the map — "En route, 1.4 km away".
|
||
class _Badge extends StatelessWidget {
|
||
const _Badge({required this.icon, required this.label});
|
||
|
||
final IconData icon;
|
||
final String label;
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
return Container(
|
||
padding: const EdgeInsets.fromLTRB(10, 7, 12, 7),
|
||
decoration: BoxDecoration(
|
||
color: DmColors.surface,
|
||
border: Border.all(color: DmColors.border),
|
||
borderRadius: DmRadius.all(6),
|
||
boxShadow: DmShadow.float,
|
||
),
|
||
child: Row(
|
||
mainAxisSize: MainAxisSize.min,
|
||
children: [
|
||
Icon(icon, size: 14, color: DmColors.brand),
|
||
const SizedBox(width: 6),
|
||
Flexible(
|
||
child: Text(
|
||
label,
|
||
maxLines: 1,
|
||
overflow: TextOverflow.ellipsis,
|
||
style: DmText.label.copyWith(fontSize: 12, color: DmColors.ink),
|
||
),
|
||
),
|
||
],
|
||
),
|
||
);
|
||
}
|
||
}
|
||
|
||
/// Radar shown while the backend matches a Miler.
|
||
class _AssigningHero extends StatelessWidget {
|
||
const _AssigningHero();
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
return Padding(
|
||
padding: const EdgeInsets.fromLTRB(DmSpace.pad, 0, DmSpace.pad, 20),
|
||
child: Container(
|
||
height: 200,
|
||
alignment: Alignment.center,
|
||
decoration: BoxDecoration(
|
||
color: DmColors.surface,
|
||
border: Border.all(color: DmColors.border),
|
||
borderRadius: DmRadius.all(DmRadius.md),
|
||
),
|
||
child: DmRadarPulse(
|
||
size: 170,
|
||
child: Container(
|
||
width: 62,
|
||
height: 62,
|
||
decoration: const BoxDecoration(
|
||
color: DmColors.brand,
|
||
shape: BoxShape.circle,
|
||
),
|
||
child: const Icon(
|
||
LucideIcons.bike,
|
||
size: 28,
|
||
color: Colors.white,
|
||
),
|
||
),
|
||
),
|
||
),
|
||
);
|
||
}
|
||
}
|
||
|
||
/// Who is collecting, how good they are, and how to reach them.
|
||
///
|
||
/// A wash rather than a plain card: this is the one row on the screen about a
|
||
/// person rather than a parcel, and the tint is what separates "who" from the
|
||
/// facts stacked above and below it. The plate is mono — it is read off a
|
||
/// number plate at the door.
|
||
class _MilerCard extends StatelessWidget {
|
||
const _MilerCard({required this.person, required this.role});
|
||
|
||
final Person person;
|
||
final String role;
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
return Padding(
|
||
padding: const EdgeInsets.fromLTRB(DmSpace.pad, 0, DmSpace.pad, 10),
|
||
child: DmCard(
|
||
tone: DmCardTone.wash,
|
||
children: [
|
||
DmCardCell(
|
||
padding: const EdgeInsets.fromLTRB(14, 13, 14, 13),
|
||
child: Row(
|
||
children: [
|
||
DmAvatar(initials: person.initials, size: 44),
|
||
const SizedBox(width: 13),
|
||
Expanded(
|
||
child: Column(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
mainAxisSize: MainAxisSize.min,
|
||
children: [
|
||
Text(person.name, style: DmText.cardTitle),
|
||
const SizedBox(height: 2),
|
||
// Absent unless the backend sent a rating or a pickup
|
||
// count. A default would put an invented reputation on a
|
||
// real person's card.
|
||
if (person.credentials != null)
|
||
Row(
|
||
children: [
|
||
const Icon(
|
||
LucideIcons.star,
|
||
size: 12,
|
||
color: DmColors.brand,
|
||
),
|
||
const SizedBox(width: 5),
|
||
Flexible(
|
||
child: Text(
|
||
person.credentials!,
|
||
maxLines: 1,
|
||
overflow: TextOverflow.ellipsis,
|
||
style: DmText.tiny,
|
||
),
|
||
),
|
||
],
|
||
)
|
||
else
|
||
Text(role, style: DmText.tiny),
|
||
],
|
||
),
|
||
),
|
||
const SizedBox(width: 10),
|
||
ConstrainedBox(
|
||
constraints: const BoxConstraints(maxWidth: 122),
|
||
child: DmTag(person.vehicle, mono: true),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
DmCardCell(
|
||
padding: const EdgeInsets.fromLTRB(14, 12, 14, 13),
|
||
child: Row(
|
||
children: [
|
||
DmMiniButton(
|
||
label: 'Call',
|
||
icon: LucideIcons.phone,
|
||
filled: true,
|
||
onPressed: () => DmToast.show(context, 'Calling ${person.name}…'),
|
||
),
|
||
const SizedBox(width: 8),
|
||
DmMiniButton(
|
||
label: 'Message',
|
||
icon: LucideIcons.messageSquare,
|
||
onPressed: () =>
|
||
DmToast.show(context, 'Chat is not available yet'),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
],
|
||
),
|
||
);
|
||
}
|
||
}
|
||
|
||
/// Where it is going, and the few facts worth keeping on screen.
|
||
class _RouteOutline extends StatelessWidget {
|
||
const _RouteOutline({
|
||
required this.booking,
|
||
required this.slot,
|
||
this.focused,
|
||
});
|
||
|
||
final Booking booking;
|
||
final PickupSlot? slot;
|
||
final DestinationGroup? focused;
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
final group = focused;
|
||
final recipient = (group ?? booking.destinations.first).details.recipient;
|
||
|
||
return DmCard(
|
||
children: [
|
||
DmCardCell(
|
||
child: DmRouteRail(
|
||
pickup: booking.pickup.title,
|
||
pickupNote: booking.pickup.sub,
|
||
drop: group != null
|
||
? group.destination.label
|
||
: booking.isMultiDestination
|
||
? '${booking.destinations.length} destinations'
|
||
: booking.destination.label,
|
||
dropNote: group != null
|
||
? '${group.packageCount} '
|
||
'${group.packageCount == 1 ? 'package' : 'packages'}'
|
||
: booking.isMultiDestination
|
||
? booking.packageSummary
|
||
: booking.details.exactAddress ??
|
||
(recipient == null
|
||
? 'Exact address collected at pickup'
|
||
: 'Recipient · $recipient'),
|
||
),
|
||
),
|
||
DmSummaryRow(label: 'Pickup window', value: slot?.label ?? '—'),
|
||
DmSummaryRow(
|
||
label: (group?.trackingId ?? booking.trackingId) == null
|
||
? 'Booking reference'
|
||
: 'Tracking number',
|
||
value: group?.trackingId ?? booking.displayId,
|
||
mono: true,
|
||
secondary: group == null
|
||
? null
|
||
: 'Collected together · Pickup ${booking.reference}',
|
||
),
|
||
],
|
||
);
|
||
}
|
||
}
|
||
|
||
/// The individual orders a completed pickup produced.
|
||
///
|
||
/// Deliberately absent until the backend has actually created them: before
|
||
/// collection the customer has one scheduled visit, not several shipments.
|
||
class _YourPackages extends StatelessWidget {
|
||
const _YourPackages({required this.booking, this.focused});
|
||
|
||
final Booking booking;
|
||
|
||
/// The one being followed, so the list can mark it.
|
||
final DestinationGroup? focused;
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
return DmCard(
|
||
children: [
|
||
DmCardCell(
|
||
padding: const EdgeInsets.fromLTRB(16, 14, 16, 12),
|
||
child: Row(
|
||
children: [
|
||
Expanded(
|
||
child: Text(
|
||
'YOUR PACKAGES',
|
||
style: DmText.eyebrow.copyWith(color: DmColors.brand),
|
||
),
|
||
),
|
||
Flexible(
|
||
child: Text(
|
||
focused == null
|
||
? 'Collected in one visit'
|
||
: 'Pickup ${booking.reference}',
|
||
textAlign: TextAlign.right,
|
||
maxLines: 1,
|
||
overflow: TextOverflow.ellipsis,
|
||
style: DmText.tiny,
|
||
),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
for (final group in booking.destinations)
|
||
_PackageRow(
|
||
group: group,
|
||
isFocused: identical(group, focused),
|
||
),
|
||
],
|
||
);
|
||
}
|
||
}
|
||
|
||
class _PackageRow extends StatelessWidget {
|
||
const _PackageRow({required this.group, this.isFocused = false});
|
||
|
||
final DestinationGroup group;
|
||
final bool isFocused;
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
final stage = group.stage;
|
||
return DmCardCell(
|
||
background: isFocused ? DmColors.brandSoft : null,
|
||
child: Row(
|
||
children: [
|
||
Expanded(
|
||
child: Column(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
mainAxisSize: MainAxisSize.min,
|
||
children: [
|
||
Text(group.destination.label, style: DmText.cardTitle),
|
||
const SizedBox(height: 3),
|
||
Text.rich(
|
||
TextSpan(
|
||
style: DmText.tiny,
|
||
children: [
|
||
TextSpan(
|
||
text: group.trackingId ?? '—',
|
||
style: DmText.monoSm,
|
||
),
|
||
TextSpan(
|
||
text: ' · ${group.packageCount} '
|
||
'${group.packageCount == 1 ? 'package' : 'packages'}',
|
||
),
|
||
],
|
||
),
|
||
maxLines: 1,
|
||
overflow: TextOverflow.ellipsis,
|
||
),
|
||
],
|
||
),
|
||
),
|
||
const SizedBox(width: 10),
|
||
if (stage != null)
|
||
Flexible(
|
||
child: DmPill(
|
||
stage.milestoneLabel,
|
||
tone: stage == JourneyStage.delivered
|
||
? DmPillTone.done
|
||
: DmPillTone.neutral,
|
||
),
|
||
),
|
||
],
|
||
),
|
||
);
|
||
}
|
||
}
|
||
|
||
/// The backend's QA stage helper, as a control.
|
||
///
|
||
/// It is not a simulator: each tap posts to
|
||
/// `POST /customer/ops/bookings/{reference}/stage` and the screen then re-reads
|
||
/// the booking, so what it shows is what the **server** recorded. Off entirely
|
||
/// unless the build asked for it with `DM_ALLOW_STAGE_OVERRIDE`, and never on
|
||
/// production or in a release.
|
||
class _StageStepper extends StatelessWidget {
|
||
const _StageStepper({required this.booking});
|
||
|
||
final Booking booking;
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
final app = AppScope.read(context);
|
||
final index = booking.stage.index;
|
||
final locked = booking.isCancelled;
|
||
|
||
return Padding(
|
||
padding: const EdgeInsets.fromLTRB(DmSpace.pad, 4, DmSpace.pad, 20),
|
||
child: Container(
|
||
padding: const EdgeInsets.fromLTRB(16, 10, 10, 10),
|
||
decoration: BoxDecoration(
|
||
color: DmColors.surfaceAlt,
|
||
border: Border.all(color: DmColors.border),
|
||
borderRadius: DmRadius.all(DmRadius.md),
|
||
),
|
||
child: Row(
|
||
children: [
|
||
Expanded(
|
||
child: Text(
|
||
'Move stage (QA)',
|
||
style: DmText.label.copyWith(color: DmColors.ink3),
|
||
),
|
||
),
|
||
_StepButton(
|
||
icon: LucideIcons.minus,
|
||
onTap: locked || index == 0
|
||
? null
|
||
: () => app.advanceStage(booking, JourneyStage.at(index - 1)),
|
||
),
|
||
const SizedBox(width: 8),
|
||
_StepButton(
|
||
icon: LucideIcons.plus,
|
||
onTap: locked || index == JourneyStage.values.length - 1
|
||
? null
|
||
: () => app.advanceStage(booking, JourneyStage.at(index + 1)),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
);
|
||
}
|
||
}
|
||
|
||
class _StepButton extends StatelessWidget {
|
||
const _StepButton({required this.icon, this.onTap});
|
||
|
||
final IconData icon;
|
||
final VoidCallback? onTap;
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
final enabled = onTap != null;
|
||
return Opacity(
|
||
opacity: enabled ? 1 : 0.35,
|
||
child: Material(
|
||
color: DmColors.surface,
|
||
borderRadius: DmRadius.all(DmRadius.xs),
|
||
child: InkWell(
|
||
borderRadius: DmRadius.all(DmRadius.xs),
|
||
onTap: onTap,
|
||
child: Ink(
|
||
width: 38,
|
||
height: 38,
|
||
decoration: BoxDecoration(
|
||
borderRadius: DmRadius.all(DmRadius.xs),
|
||
border: Border.all(color: DmColors.border),
|
||
),
|
||
child: Icon(icon, size: 18, color: DmColors.ink2),
|
||
),
|
||
),
|
||
),
|
||
);
|
||
}
|
||
}
|