Booking and sign-in flow, and the offline build back under guard
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
This commit is contained in:
192
lib/ui/screens/sheets/window_sheet.dart
Normal file
192
lib/ui/screens/sheets/window_sheet.dart
Normal file
@@ -0,0 +1,192 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:lucide_icons_flutter/lucide_icons.dart';
|
||||
|
||||
import '../../../data/models.dart';
|
||||
import '../../../state/app_scope.dart';
|
||||
import '../../tokens.dart';
|
||||
import '../../widgets/buttons.dart';
|
||||
import '../../widgets/feedback.dart';
|
||||
import '../../widgets/option_tile.dart';
|
||||
import '../../widgets/pieces.dart';
|
||||
import '../../widgets/states.dart';
|
||||
|
||||
/// Pickup window.
|
||||
///
|
||||
/// ── Why a sheet and not a step ──
|
||||
///
|
||||
/// Choosing a two-hour window used to be its own screen in a four-screen flow,
|
||||
/// which put a full page turn between "where is it going" and "what will it
|
||||
/// cost". It is one choice from a short list, and the answer is almost always
|
||||
/// the first row — so it belongs over the send screen, not in front of it.
|
||||
///
|
||||
/// The send screen shows the chosen window inline and only opens this when the
|
||||
/// customer wants a different one.
|
||||
Future<PickupSlot?> showWindowSheet(BuildContext context) {
|
||||
return showDmSheet<PickupSlot>(
|
||||
context: context,
|
||||
builder: (context) => const _WindowSheet(),
|
||||
);
|
||||
}
|
||||
|
||||
class _WindowSheet extends StatefulWidget {
|
||||
const _WindowSheet();
|
||||
|
||||
@override
|
||||
State<_WindowSheet> createState() => _WindowSheetState();
|
||||
}
|
||||
|
||||
class _WindowSheetState extends State<_WindowSheet> {
|
||||
String? _day;
|
||||
PickupSlot? _picked;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final app = AppScope.of(context);
|
||||
|
||||
return Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Expanded(
|
||||
child: DmSheetHeader(
|
||||
title: 'Pickup window',
|
||||
subtitle: (app.draftPickup ?? app.pickup) == null
|
||||
? null
|
||||
: 'Collecting from ${(app.draftPickup ?? app.pickup)!.title}',
|
||||
),
|
||||
),
|
||||
DmIconButton(
|
||||
icon: LucideIcons.x,
|
||||
tooltip: 'Close',
|
||||
onPressed: () => Navigator.of(context).pop(),
|
||||
),
|
||||
],
|
||||
),
|
||||
Flexible(
|
||||
child: DmAsyncList<PickupSlot>(
|
||||
reloadToken: app.slotsEpoch,
|
||||
load: ({bool refresh = false}) => app.loadSlots(refresh: refresh),
|
||||
emptyIcon: LucideIcons.clock,
|
||||
emptyTitle: 'No pickup windows left',
|
||||
emptyMessage:
|
||||
'Every window is full right now. Try again in a little while.',
|
||||
builder: (context, slots) {
|
||||
final days = <String>[];
|
||||
for (final slot in slots) {
|
||||
if (!days.contains(slot.day)) days.add(slot.day);
|
||||
}
|
||||
final day = days.contains(_day) ? _day! : days.first;
|
||||
final shown = slots.where((s) => s.day == day).toList();
|
||||
final selected = _picked ?? _slotById(slots, app.draftSlotId);
|
||||
|
||||
return SingleChildScrollView(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
// One row of days rather than a heading per day: the list
|
||||
// under it stays short enough to take in at a glance, which
|
||||
// is the whole reason this is a sheet.
|
||||
Row(
|
||||
children: [
|
||||
for (final d in days) ...[
|
||||
if (d != days.first) const SizedBox(width: 8),
|
||||
DmChoiceChip(
|
||||
label: d,
|
||||
selected: d == day,
|
||||
expand: true,
|
||||
onTap: () => setState(() => _day = d),
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
for (final slot in shown) ...[
|
||||
_SlotRow(
|
||||
slot: slot,
|
||||
selected: selected?.id == slot.id,
|
||||
onTap: () => setState(() => _picked = slot),
|
||||
),
|
||||
const SizedBox(height: 10),
|
||||
],
|
||||
const SizedBox(height: 6),
|
||||
DmButton(
|
||||
label: selected == null
|
||||
? 'Choose a window'
|
||||
: 'Use ${selected.window}',
|
||||
onPressed: selected == null
|
||||
? null
|
||||
: () {
|
||||
app.selectSlot(selected);
|
||||
Navigator.of(context).pop(selected);
|
||||
},
|
||||
),
|
||||
const SizedBox(height: 4),
|
||||
],
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
static PickupSlot? _slotById(List<PickupSlot> slots, String? id) {
|
||||
if (id == null) return null;
|
||||
for (final slot in slots) {
|
||||
if (slot.id == id) return slot;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
class _SlotRow extends StatelessWidget {
|
||||
const _SlotRow({
|
||||
required this.slot,
|
||||
required this.selected,
|
||||
required this.onTap,
|
||||
});
|
||||
|
||||
final PickupSlot slot;
|
||||
final bool selected;
|
||||
final VoidCallback onTap;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final enabled = slot.available;
|
||||
|
||||
return DmOptionTile(
|
||||
title: slot.window,
|
||||
titleStyle: DmText.display.copyWith(fontSize: 19, height: 1.2),
|
||||
subtitle: enabled ? slot.caption : (slot.note ?? 'Unavailable'),
|
||||
selected: selected,
|
||||
enabled: enabled,
|
||||
onTap: onTap,
|
||||
tags: [
|
||||
if (slot.tag != null)
|
||||
DmTag(
|
||||
slot.tag!,
|
||||
tone: selected ? DmTagTone.onFill : DmTagTone.brand,
|
||||
icon: LucideIcons.zap,
|
||||
),
|
||||
if (slot.milersNearby > 0)
|
||||
DmTag(
|
||||
'${slot.milersNearby} Milers nearby',
|
||||
tone: selected ? DmTagTone.onFill : DmTagTone.neutral,
|
||||
icon: LucideIcons.userRound,
|
||||
),
|
||||
],
|
||||
trailing: enabled
|
||||
? null
|
||||
: DmTextAction(
|
||||
label: 'Notify me',
|
||||
color: DmColors.ink3,
|
||||
onPressed: () =>
|
||||
DmToast.show(context, "We'll let you know if it frees up"),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user