Checkout Flow - Redesign

Overview

The checkout flow has been redesigned across three pages to match new mockups: Review Order, Shipping, and Payment. All changes are consolidated on the integration_checkout_redesign branch.

What Changed

Review Order Page (/shop/cart)

• Redesigned cart layout with light grey background and white card panels
• New "Review your order" heading with subtitle
• Larger product images (90px) and improved cart line layout with stepper, remove link, and price grouped together
• Suggested products card with grid layout
• Order summary sidebar with "Continue to Shipping" button
• 3-step progress bar matching the rest of the checkout flow

Shipping Page (/shop/checkout)

• New page heading: "Shipping Details"
• Shipping address card with selected state and Change button
• Delivery speed card with carrier options
• Mobile mini order summary with collapsible details
• Mobile CTA button at bottom
• Pre-selected carrier based on cold-chain requirements and sorted by price
• 3-step progress bar with current step highlighted

Payment Page (/shop/payment)

• Redesigned payment method selection with card token UI
• Expired card handling with visual indication
• Card network badges (Visa, Mastercard, etc.) displayed next to each token
• "Use a new card" option with proper layout
• Green Pay Now button
• 3-step progress bar with payment step highlighted

Cross-Page Changes

• Consistent progress bar styling (.z-checkout-progress) across all checkout pages
• All text standardized to black across the checkout flow
• Footer restored on the Shipping page
• Light grey background applied consistently

Files Modified

• bista_menmd_website/views/shop_cart_redesign.xml - Review Order page templates
• bista_menmd_website/views/shop_checkout.xml - Shipping page templates and progress bar
• bista_menmd_website/views/shop_payment.xml - Payment page structure
• bista_menmd_website/views/payment_token_checkout.xml - Payment method widget
• bista_menmd_website/static/src/scss/website_sale.scss - All checkout styling
• bista_menmd_website/static/src/scss/payment_tokens.scss - Payment token styling
• bista_menmd_website/static/src/js/website_sale.js - Checkout JS extensions
• bista_menmd_website/static/src/js/write_rx.js - Carrier pre-selection logic
• bista_menmd_website/static/src/js/payment_token_manager.js - Card token management
• bista_menmd_website/models/payment_token_ext.py - Payment token extensions
• bista_menmd_website/controllers/main.py - Address sorting controller override
• bista_menmd_website/controllers/website_sale.py - Checkout controller logic
• bista_menmd_website/__manifest__.py - Asset and view registration
• bista_menmd_customization/views/website_sale_confirmation.xml - Order confirmation redesign
• bista_menmd_portal/views/portal_payment_method.xml - Portal payment method layout

How to Test

Review Order Page (/shop/cart)

1. Add a product to cart and navigate to /shop/cart
2. Verify the 3-step progress bar shows at the top with step 1 highlighted
3. Verify cart line items show larger product images, stepper, Remove link, and price grouped together
4. Verify suggested products card appears below cart items
5. Verify order summary sidebar shows on the right with "Continue to Shipping" green button
6. Verify "Secure checkout - SSL encrypted" badge appears below the button
7. Test increasing/decreasing quantity and removing an item
8. Click "Continue to Shipping"

Shipping Page (/shop/checkout)

1. Verify the 3-step progress bar shows with step 1 completed and step 2 highlighted
2. Verify heading reads "Shipping Details" with subtitle
3. Verify shipping address card shows with selected address and Change button
4. Click "Use a different address" - verify the address selector appears
5. Verify delivery speed card shows carrier options
6. Verify a carrier is pre-selected on page load (based on cold-chain rules)
7. Click different carriers - verify the order summary total updates without console errors
8. Verify the footer appears at the bottom of the page
9. On mobile, verify the mini order summary at top is collapsible
10. Click "Continue to Payment"

Payment Page (/shop/payment)

1. Verify the 3-step progress bar shows with steps 1 and 2 completed and step 3 highlighted
2. Verify saved payment cards display with network badges (Visa, MC, etc.)
3. Verify expired cards show with visual indication and cannot be selected
4. Verify "Use a new card" option appears at the bottom with proper layout
5. Verify the Pay Now button is green
6. Test selecting a saved card and submitting payment
7. Test entering a new card and submitting payment

Order Confirmation

1. After successful payment, verify the centered card design appears
2. Verify the three-column info grid displays order details
3. Verify the "What's Next?" section displays

Cross-Cutting Tests

• All text across checkout should be black
• Progress bar should be consistent across all three checkout pages
• Background should be light grey across all checkout pages
• All buttons should match brand styling (green for primary CTA, navy for secondary)
• No console errors during the full checkout flow
• Test on both desktop and mobile viewports