Ladbrokes Locker
Overview
The Ladbrokes Locker is a feature accessible to users by clicking on the Locker item in the AppBar. It provides users with access to the most important bet-related promotions such as Odds Boost, Bet Back, and Promotions.
The first section is the Odds Boost, which includes three values: Odds Boost, Multi Boost, and Exotics Boost. More information can be found by clicking the help icon in this section.
Directly below it, we have the Bet Back section, which includes three items: Domestic Thoroughbreds, Domestic Greyhounds, and Domestic Harness. Clicking on any of these items will navigate the user to the Racing home screen, filtered by the categories: Horses, Greyhounds, and Harness, respectively. Each of these items includes a brief description and a notification count. Similarly to the Odds Boost section, more information can be found by clicking the help icon.
The last section features the Promotions item, which navigates the user to the dedicated Promotions screen upon clicking.
Below this, we can see the Locker reset timer, which displays the time left before the locker resets and updates its values. This timer will count down and reset at midnight Brisbane time.
Android Locker
The architecture used for this feature follows the Model-View-ViewModel (MVVM) architecture within the Clean Architecture framework. This stack of architectures and design patterns focuses on separating business and presentation logic from the UI by organizing the code into different layers.
The entry point to the Locker feature is the ToolboxEntryScreen component (located in presentation/ToolboxEntryScreen.kt in the Ladbrokes flavour). This component calls the LockerContent component (located in the presentation/locker/LockerContent.kt file in main) and passes through the viewModel.state, as well as all the events and navigations required for the Locker.
The LockerContent component is responsible for rendering the "Ladbrokes Locker" header image, the OddsBoostBlock, the BetBackBlock, the PromotionsBlock, and the LockerResetTimer.
LockerViewModel.kt
The LockerViewModel will interact with various use cases and will be managing the state of the Locker to display responsive and dynamic elements in the UI. It will fetch Locker data from the following dependencies:
- LoadLockerInfoUseCase :
- Used to fetch the
LockerInfo, which contains the OddsBoost and BetBack balance, is then mapped using theLockerDataMapper
- Used to fetch the
- GetCountDownUseCase* :
- Used to fetch the time left for count down timer.
- TrackEventUseCase :
- Used to log events and for analytics.
FirebaseAnalyticsandAmplitudeare being used when logging these events.EntainLoggeris also being used to log the events.
- Used to log events and for analytics.
Upon init in the LockerViewModel :
init {
getLockerData()
setupLockerTimer()
}
The Locker will first fetch the LockerInfo data to show the OddsBoost and BetBack balances correctly, and then fetch the countdown time for the timer.
Considerations when adding a new Locker for another brand
While the Locker is exclusively used in Ladbrokes, the Locker code lives in the main folder of the code which allows for easy reusability.
The ToolboxEntryScreen lives in each brand flavour folder which allows the application of the brand theme.
For a new brand to use the locker, the new brand must add its own ToolboxEntryScreen calling the LockerContent, applying its own brand theme, and passing on the state and necessary event handlers.
The existing LockerViewModel can be injected or a new View Model can be created with specific functionality.
iOS Locker
Architecture
In the iOS platform, the primary components of the Ladbrokes Locker are located under GenerosityUI in the PresentationLayer and Toolbox in the DomainLayer.
The entry point to the GenerosityUI is via the GenerosityCoordinator. Note that this coordinator is the entry point for both the Ladbrokes Locker and the Neds Toolbox. The locker is constructed in makeViewController(). It uses the custom FullScreenUIHostingController as a modal presentation so that its view fills up the whole screen.
The locker follows the VENOM paradigm and has a presenter, view, viewModel, transformer, and interactor.
Navigation
The GenerosityCoordinator conforms to LockerPresenterDelegate to handle navigation away from the locker. Should the need arise to modify these paths, this is the place to do it.
The ‘info’ buttons navigate to a web view.
The bet back options navigate to the racing tab with parameters depending on which option was selected (thoroughbreds, greyhounds, or harness).
Exclusive Odds
At the time of implementation, the 'Exclusive Odds’ feature is disabled. The functionality is there, but its route and view will need to be switched back on.
A value will need to be supplied for the exclusiveOddsBadgeCount parameter in the transform method of the LockerViewTransformer to activate this view. When this value is nil, the view will not display. Default this value to zero if the view should display without a value.
LockerView
The LockerView’s structure is a little convoluted. It must support scrolling and it must also bounce back to its resting position if the user pulls down. To achieve this, the view is placed inside a ScrollView with a background modifier. The background uses a half-red half-clear view to give the illusion that the top nav bar extends down behind the locker.
The locker also contains a Spacer() that’s tappable to close the locker when tapped below its visible bottom edge.
If the view models .viewState property is set to .refreshing, then the locker will display its refresh view. The locker will refresh at midnight each day and during this reset, the refreshing view will display.
LockerPresenter
The locker gets its data from the ToolboxBalanceInteractor in the Domain Layer. Once received, the LockerTransformer will convert this data into a LockerViewModel for the LockerView.
The locker view will request this data when .onAppear {…} is called.
Resources
| Role | Contact |
|---|---|
| PM | TBC |
| Android Lead | Anthony Librio |
| iOS Lead | Nicholas Vella |