UI kit

The pickup list and the locker map on seven platforms, inside the sApp UI kit.

The components sit inside the scope or provider of the sApp UI kit of the same platform and take its client, theme and strings in 14 languages. They raise events and never navigate. They are the components that the sApp UI kits had up to 0.2.1.

Pickup list

Parcels in lockers with their pickup codes, the remaining parcels and the expiry, and opening the door after a confirmation.

Locker map

Lockers near the person with distance, status and free compartments, search and filters for pickup, returns and free space, and the same lockers on the app's sMap map. Selecting a locker raises an event.

Kit	Package	Pickup list	Locker map
Flutter	`slocker_ui`	`SrPickupList`	`SrLockerMap (SrSMapAdapter, SrMapAdapter, SrMapPoint)`
Web	`@superrouteca/slocker-ui`	`<sr-pickup-list> (SrPickupList)`	`<sr-locker-map> (SrLockerMap, smapAdapter)`
React	`@superrouteca/slocker-react`	`PickupList`	`LockerMap (smapAdapter)`
React Native	`@superrouteca/slocker-react-native`	`PickupList`	`LockerMap (smapAdapter)`
SwiftUI (iOS, macOS)	`SLockerUI`	`PickupList`	`LockerMap (SRSMapAdapter, SRMapAdapter, SRMapPoint)`
Jetpack Compose (Android)	`ca.superroute:slocker-ui-android`	`PickupList`	`LockerMap (SrSMapAdapter, SrMapAdapter, SrMapPoint)`
WPF / WinForms	`Superroute.SLocker.Wpf / Superroute.SLocker.WinForms`	`PickupList (PickupListViewModel)`	`LockerMap (LockerMapViewModel, SMapAdapter, IMapAdapter, MapPoint)`

Data source of the locker map

The locker map reads its points from one of three sources (source):

`lockers`	The service provider's smart lockers for the signed-in person. This is the default.
`pickupPoints`	Smart lockers and pickup point counters, read with the app key alone, so nobody needs to sign in. Each row and map point names its kind; search and filters work as for lockers.
`function / Custom(loader)`	The app's own points: a loader that receives the search, the position, the filters and the page, and answers the rows and whether there are more.

Typed selection

Choosing a row or a map point raises the select event as before and also a typed selection: its kind (locker or counter), id, location id, name, address and position, with the row as received. Map points carry their kind, so the app's map can draw counters apart from lockers.

<LockerMap source="pickupPoints"
  onSelection={({ kind, id, locationId, name, address, position }) => choose(kind, id)} />

Flutter

SuperrouteScope(
  client: sr,
  theme: ThemeTokens.fromBranding(branding),
  onSignInRequired: () => router.go('/sign-in'),
  child: SrPickupList(onShowCode: (qr) => showQr(qr)),
)

Web

<script type="module">
  import { configure } from '@superrouteca/sapp-ui';
  import '@superrouteca/slocker-ui';
  configure({ client: sr, theme: themeFromBranding(branding), locale: 'en' });
</script>
<sr-pickup-list></sr-pickup-list>
<sr-locker-map></sr-locker-map>

React

import { PickupList, LockerMap } from '@superrouteca/slocker-react';
<SuperrouteProvider client={sr}>
  <PickupList onShowCode={showQr} />
  <LockerMap onSelect={(location) => choose(location)} />
</SuperrouteProvider>

SwiftUI

import SLockerUI
SuperrouteScope(client: client, theme: ThemeTokens(branding: branding)) {
    PickupList(onShowCode: { code in showQR(code) })
}

Jetpack Compose

SuperrouteScope(client = client, theme = ThemeTokens(branding)) {
    PickupList(onShowCode = { code -> showQr(code) })
}