Monthly Contrib Checkout Designs #83
Conversation
…a checkout page with a header and some content fields.
…hat's pretty standard across pages.
…ontrib checkout page.
… Tweaked the terms and conditions styling.
…s landing ctas showing incorrect colour on hover.
… me use Math.pow, and node doesn't support the operator yet, which breaks the tests.
| <button | ||
| className="component-stripe-pop-up-button" | ||
| onClick={stripeClick} | ||
| >Contribute with debit/credit card</button> |
There was a problem hiding this comment.
If it is possible, I would try to avoid components with just one HTML element in order to avoid over componentization.
There was a problem hiding this comment.
Hmm, is this not a special case? It's the shared Stripe component that we added in #78, I've just added a class and tweaked the copy here. I thought we wanted this to be a component because it's being used across multiple checkouts, and has a bunch of extra functionality attached to it?
| } | ||
|
|
||
| .monthly-contrib__amount--wide-value { | ||
| padding-left: 1em; |
There was a problem hiding this comment.
I would change this to be rem so it depends on the root font-size.
There was a problem hiding this comment.
Under what circumstances is use of em acceptable? In this situation I specifically want to match the padding to the font size of the element...
There was a problem hiding this comment.
In this case that the requirement is that the padding should be tied to its parent's font-size, we should use em.
| const printedAmount = wideValue ? props.amount.toFixed(2) : props.amount; | ||
|
|
||
| return ( | ||
| <div className={className}>£{printedAmount}</div> |
There was a problem hiding this comment.
Thinking ahead, the currency could be received as an argument.
There was a problem hiding this comment.
Yup, sounds sensible, we need to think about how we're going to handle multiple currencies.
|
SignedInUser will actually be the persons account name right? + we need to add in the sign out option? |
Yup, we just haven't implemented the user stuff yet, it relies on some work that isn't merged in yet. We can do another PR once that happens. |
|
Seen on PROD (merged by @Ap0c 6 minutes and 41 seconds ago) Please check your changes! Sentry Release: support-client-side, support |
Explicitly set retries to 0 for RetryNone
* log warning not error for missing country code * don't log country code not being able to be decoded
* log warning not error for missing country code * don't log country code not being able to be decoded
Why are you doing this?
We want the monthly contributions checkout to look nice. These designs take those implemented on membership as a baseline.
Trello Card
Changes
babel-plugin-transform-exponentiation-operator. Basically, the linter doesn't like use ofMath.pow, it pushes you to use the exponentiation operator (**), but node doesn't support this operator yet, which means the tests break. This plugin transforms the operator back toMath.pow.checkoutSectioncomponent, that can be used to create chunks of the checkout page (note: flow really struggles with the React children prop), see this issue).displayNamecomponent, for showing the logged in user's display name. This will need to be extended in future to show the actual name rather than a dummy, and possibly to include some form of 'sign out' option.securecomponent, to show the lock and secure message; this is likely to be reused across multiple checkouts.textInputcomponent.roundDputility function.contribAmountcomponent to allow for it to change in size depending on the width of the value.monthlyContributionsjsx file to make use of these new components, and added styling.Screenshots
Desktop (with wide value):
Mobile: