-
Notifications
You must be signed in to change notification settings - Fork 13
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
412e253
commit fd637fd
Showing
1 changed file
with
70 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,70 @@ | ||
*Service:* support-frontend | ||
*Status: accepted* | ||
|
||
## Context | ||
|
||
We need to be able to access a thank you page for the [generic checkout](https://github.com/guardian/support-frontend/issues/5722) to route to after purchase. | ||
|
||
[Currently the generic checkout uses routing via Play framework][play-routes] [which][play-controller-render] [renders][play-html] a [`webpack.entryPoint`][webpack-entrypoint] for that [singular component][checkout-component]. | ||
|
||
We currently have multiple ways of doing this. This ADR aims to choose one, hopefuly leading to deprecating the other, and help with decision making in the future. | ||
|
||
|
||
### Options | ||
|
||
#### Create a `/thank-you` play route | ||
|
||
This is what we do with paper products by separating the `FormController` from the `LandingPageController`. | ||
e.g. [`PaperSubscriptionController` and `PaperSubscriptionFormController`](https://github.com/guardian/support-frontend/blob/b31dd3d73ad91313bac10e48a640d13d2656a264/support-frontend/conf/routes#L122-L123) | ||
|
||
##### Benefits | ||
- Decouples checkout from thank-you page | ||
- Uses an existing pattern | ||
|
||
##### Drawbacks | ||
- Decouples checkout from thank-you page (this is seen as a drawback too as they are intrinsically linked) | ||
- Adds a lot of boiler plate and extra templating | ||
- Maintains the need to context switch between Play and React for routing | ||
|
||
|
||
#### Use react-router | ||
This is what we currently do with [`supporterPlusRouter`](https://github.com/guardian/support-frontend/blob/b31dd3d73ad91313bac10e48a640d13d2656a264/support-frontend/assets/pages/supporter-plus-landing/supporterPlusRouter.tsx#L99-L142). | ||
|
||
##### Benefits | ||
- Keeps routing logic closer to the rendering i.e. in React | ||
- Uses an existing pattern | ||
- Reduces the need to add a lot more scala | ||
|
||
|
||
##### Drawbacks | ||
- Potential for overloading the router and bloating the JS sent down the pipes. This could be mitigated via [code-splitting](https://v5.reactrouter.com/web/guides/code-splitting) or creating multiple routers. | ||
- There is complexity added to the rendering route (diagram below[^1]) | ||
|
||
|
||
|
||
## Decision | ||
We are choosing to go with `react-router` as it feels like the complexity added is minimal and the need to switch between Scala/Play and React is minimised. | ||
|
||
This is inline with the goals for the checkout reducing complexity and decrease time-to-change. | ||
|
||
## Consequences | ||
|
||
- The bundle size increases | ||
- There more complexity in the request flow | ||
- But less complexity in changing routes in future | ||
|
||
[^1]: Current vs Proposed solution | ||
|
||
```mermaid | ||
flowchart TB | ||
Request --> PlayRoute --> PlayController --> PlayTemplate --> webpack.entryPoint -- "Current" --> render["render(Component)"] | ||
webpack.entryPoint -- "Proposed" --> react-router --> render["render(Component)"] | ||
``` | ||
|
||
--- | ||
|
||
[play-routes]: https://github.com/guardian/support-frontend/blob/b31dd3d73ad91313bac10e48a640d13d2656a264/support-frontend/conf/routes#L92-L93 | ||
[play-controller-render]: https://github.com/guardian/support-frontend/blob/b31dd3d73ad91313bac10e48a640d13d2656a264/support-frontend/app/controllers/Application.scala#L285 | ||
[play-html]: https://github.com/guardian/support-frontend/blob/b31dd3d73ad91313bac10e48a640d13d2656a264/support-frontend/app/views/checkout.scala.html#L24 | ||
[webpack-entrypoint]: https://github.com/guardian/support-frontend/blob/b31dd3d73ad91313bac10e48a640d13d2656a264/support-frontend/webpack.entryPoints.js#L3 | ||
[checkout-component]: https://github.com/guardian/support-frontend/blob/b31dd3d73ad91313bac10e48a640d13d2656a264/support-frontend/assets/pages/%5BcountryGroupId%5D/checkout.tsx#L620-L624 |