[material-ui] Refine checkout template

[zanivan]

• [x] I have followed (at least) the PR section of the contributing guide.

Part of https://github.com/mui/material-ui/issues/37555 / Closes https://github.com/mui/material-ui/issues/41098

This PR is for refining the checkout template to be aligned with the new landing page template.

Current	New

👉 https://deploy-preview-40967--material-ui.netlify.app/material-ui/getting-started/templates/checkout/

[mui-bot]

Netlify deploy preview

https://deploy-preview-40967--material-ui.netlify.app/

Bundle size report

No bundle size changes (Toolpad) No bundle size changes

Generated by :no_entry_sign: dangerJS against 257acbb40a8d5946a62e7092cc12c6569f80473b

[mapache-salvaje]

This looks so good @zanivan ! Wow! Huge upgrade over the earlier version.

One thing I'd like to see is some padding down here underneath the Next / Previous buttons—it looks like you're working on a larger screen than my 14-inch MBP. And the positioning of the toggle is a little awkward relative to those buttons as well. It doesn't really matter for the dev who's going to rip that toggle out before they use the template, but it's kind of annoying nonetheless.

https://github.com/mui/material-ui/assets/71297412/f2ea4799-7dae-475a-be7f-4b00a42391ab

[zanivan]

Thanks for the feedback, guys!

@samuelsycamore I think the problem is fixed, would you mind checking it again?

[mapache-salvaje]

1. The placement of the Previous / Next buttons in the viewport is better, but now the Previous button is almost completely blocked by the toggle.

2. Something strange is happening with the Next button—check out how far I have to go inside of it before I can click it:

https://github.com/mui/material-ui/assets/71297412/4e9c81bb-a30d-4e2d-9cb3-953be18bcbb7

3. The form inputs are breaking in between desktop and mobile views:

https://github.com/mui/material-ui/assets/71297412/0facbde0-7c07-4635-a507-d408642fb8b8

4. The flow of the Shipping Address form feels off to me. My expectation as the person filling out the form is more like:

First Name    Last Name
Address line 1
Address line 2
City    State
Country    Zip code

5. (nitpick) The Payment Details form asks for an "Expiry date"—as a US English speaker I would expect this to say "Expiration date."

[zanivan]

The placement of the Previous / Next buttons in the viewport is better, but now the Previous button is almost completely blocked by the toggle.

Shoot, what's the resolution you're currently using? I tried to tweak the page to work in 3024 x 1964—the one I found for macbook pro 14-inch—but it doesn't seem to do the trick 😞

Something strange is happening with the Next button—check out how far I have to go inside of it before I can click it:

This is likely because of the way I designed the theme toggle, and the zIndex of it being over the buttons. Fixing 1 should be enough to solve this too.

The form inputs are breaking in between desktop and mobile views:

Thanks! Got to say that I didn't give this in between breakpoint enough attention, so I'll work on it 👍

The flow of the Shipping Address form feels off to me. My expectation as the person filling out the form is more like:

Interesting, never thought about this in other countries—here in Brazil when we are designing this kind of form, we always put the zip code first, because it's possible to pull information and autofill all the other fields with that. However, I think we should go by your approach, it feels more 'default'—and since we're doing everything in US English, I believe we should go with the most common over there too :)

(nitpick) The Payment Details form asks for an "Expiry date"—as a US English speaker I would expect this to say "Expiration date."

Thanks for the heads-up, I'll fix this—it's important to have everything under the same pattern, so feel free to point out any inconsistencies you find 🙏

[mapache-salvaje]

Shoot, what's the resolution you're currently using? I tried to tweak the page to work in 3024 x 1964—the one I found for macbook pro 14-inch—but it doesn't seem to do the trick 😞

👀 That explains it! The default resolution on my 2021 MBP is 1512 x 982.

[mbrookes]

Country Zip code

I'm pretty sure the postcode normally goes before the country, as the country is least specific.

A few other things I spotted (in no particular order, and some more nit-picky than others):

• The "BACK TO SITEMARK" button seems a bit redundant, as it's idiomatic to link the logo the the homepage. Could possibly make it a "keep shopping" button, but then I'd suggest to put it under the cart contents.

• The MD2 theme isn't using Material Design for the text fields.

• The dashed step connector in the custom theme is hard to see, especially in dark mode.

• The step icons in the custom theme look a little small. I'd make them at least as big as the text, or bigger.

• It's quite jarring going from the (default) dark custom theme to the light (only) MD one. Perhaps it would be better if the custom theme was light be default?

• It would be nice if the "credit card" maintained the same aspect ratio as a real card, and perhaps even allow text input directly in the card instead of duplicating it from separate text fields:

• https://medium.com/@algopoint.ltd/how-to-create-a-credit-card-input-using-html-css-glassmorphism-884a659e3f59

• Ideally we'd sanitise the input of the credit card fields, but that might be overkill...

• The longer product names and descriptions crash with the prices at smaller browser widths:

• There's a width at which there's neither a Sitemark logo, nor a "back to sitemark" button.

• I think the shipping item should be after the products on the "Review your order" page.

• At small screen sizes when the "info" section is hidden, you don't have an opportunity to see what you're purchasing.

• The total is displayed twice in the info section, once as "Total", and once as "Suntotal".

[zanivan]

Thanks for such a detailed feedback @mbrookes 🙌 Tried to address as many as I could already. I'll leave this here as a checklist, so it will help me to track the changes—but feel free to add more items if you spot anything :)

---

Done

• [x] The "BACK TO SITEMARK" button seems a bit redundant, as it's idiomatic to link the logo the the homepage. Could possibly make it a "keep shopping" button, but then I'd suggest to put it under the cart contents.

👉 I tried a slightly different approach here, using Shopify's checkout as reference:

• [x] The dashed step connector in the custom theme is hard to see, especially in dark mode.
• [x] The step icons in the custom theme look a little small. I'd make them at least as big as the text, or bigger.
• [x] The longer product names and descriptions crash with the prices at smaller browser widths:
• [x] There's a width at which there's neither a Sitemark logo, nor a "back to sitemark" button.
• [x] I think the shipping item should be after the products on the "Review your order" page.
• [x] The total is displayed twice in the info section, once as "Total", and once as "Suntotal".
• [x] At small screen sizes when the "info" section is hidden, you don't have an opportunity to see what you're purchasing.
• [x] The MD2 theme isn't using Material Design for the text fields. ~That’s because I’m currently using the inputBase for these 😬. So, they feel different from the default textField and the common forms that uses MD. @DiegoAndai @mnajdova, do you know if it is possible to customize the textField to look more like this (image)?~ 👉 Solved! Replaced the InputBase by the OutlinedInput , now it should work better.
• [x] It would be nice if the "credit card" maintained the same aspect ratio as a real card, and perhaps even allow text input directly in the card instead of duplicating it from separate text fields: https://medium.com/@algopoint.ltd/how-to-create-a-credit-card-input-using-html-css-glassmorphism-884a659e3f59
• [x] Ideally we'd sanitise the input of the credit card fields, but that might be overkill...
• [x] It's quite jarring going from the (default) dark custom theme to the light (only) MD one. Perhaps it would be better if the custom theme was light be default? ~This is something I was discussing with @danilo-leal earlier this week. We currently have a dark theme for the default MD, however the logics behind the theme toggling are different from this custom theme—and the one in the docs 😬. The best scenario would be to maintain the same color mode regardless the theme, but to do this the right way, I will need help from an engineer mind cc. @DiegoAndai @mnajdova~ 👉 Now the color mode toggling should be working seamlessly between themes (thanks @DiegoAndai)

[netlify[bot]]

✅ Deploy Preview for resonant-twilight-4b0c91 ready!

Name	Link
🔨 Latest commit	2e13383708d7895dec9f8058d08d1db0c50a1e83
🔍 Latest deploy log	https://app.netlify.com/sites/resonant-twilight-4b0c91/deploys/65dcf34b303e9d0009cf8372
😎 Deploy Preview	https://deploy-preview-40967--resonant-twilight-4b0c91.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[zanivan]

@danilo-leal I believe I've addressed all the feedback you've sent me in the Loom video, would you mind taking another look?

[DiegoAndai]

For the regression test failure, we need to exclude the getCheckoutTheme file as we did with the landing page: https://github.com/mui/material-ui/pull/37557/commits/11d46c7fd09bcf18b25205e028c31cc67c640827

We have to do this for all non-component files: https://github.com/mui/material-ui/pull/37557#issuecomment-1920377781