Project overview

GlassesUSA Checkout is a micro frontend (MFE) that powers the checkout and cart experience for GlassesUSA’s e‑commerce flow. It runs as a federated module inside a host application (Webpack 5, Module Federation) and ships desktop and mobile builds. The scope includes cart (accessories and upsells), delivery and payment steps, one-step checkout, and integration with payment providers (PayPal, Klarna, Apple Pay, Google Pay, Primer). The codebase is React and TypeScript, with Redux (sagas, selectors, reducers), SCSS, and Jest for unit and integration tests; feature flags and A/B testing support gradual rollout and experiments.

I started by removing obsolete feature flags (guarantees color, coupon box, subscription consent) and contributing to the removal of the Save for Later feature from desktop and mobile cart—cleaning UI, state, and components while keeping prescription and cart logic intact.

Cart accessories & hide upgrades

I built and refined the cart accessories experience on desktop behind feature flags: tabbed layout (cases, chains, essentials, wipes), add-to-cart with quantity limits, shared components (color box, accessory tab), and a redesign of the accessory item and tooltips. I implemented hide-upgrades behavior on cart for both desktop and mobile so product upgrades can be toggled via rollout flags. Work included new tests and improvements to the accessories reducer and selectors.

Analytics, EEC & facelift

I added dimension84 to the Enhanced Ecommerce (EEC) purchase payload and fixed EXP indication so events for cart accessory groups fire only when in view. I contributed to the cart and checkout facelift: conditional facelift UI, replacement of the Pay Over Time modal with a swipeable action sheet on mobile, discount color and copy fixes, and tests that ignore facelift-only changes. I also sent the mCartRegularHeader event on the cart page and improved one-step product upgrade handling when package options were missing.

Design review, upsell & EXP fixes

I contributed to desktop and mobile accessories group design review (tab height, skip action, initial tab logic) and improved upsell components—extracting a shared upsell button and adding tests. I fixed EXP indication so accessory group events fire only when in view and refactored multi test case descriptions for clearer coverage reporting.

TYP accessories, shared types & one-step fixes

I improved Thank You Page (TYP) accessories: tabs, list of accessories, confirmation and fallback popups, shared types between mobile and desktop, and selector tests. I refactored Accessory, Cart Item, QuoteItems and Order Last types across platforms and added shared type definitions for M/D. I fixed the redirect to empty cart after purchase by using the last order’s status so the success path no longer shows an empty cart, fixed the payment method selection area so the clickable region works as expected, and fixed the missing addToCart event.

Accessories list, shared Last order types & default payment

I delivered Accessories List work (P1–P3) for TYP and contributed shared Last order types across desktop and mobile for consistent order data. I fixed the default payment method so first-time and guest users see the correct default option (e.g. Primer) in checkout. I also improved the Edit button style and kept shared prescription and accessory type definitions aligned.

Delivery, order amount, validation & compliance

I implemented batch saving of delivery form fields so address and delivery data are saved in a single update, fixed region handling (copying regionID, fixing invalid region_id query parameters), and trimmed address values. I fixed checkout order amount mismatch so the amount used for payment and shipping is consistent. I added order validation before redirecting to the success page so users only see the thank-you page after a confirmed order, and implemented removal of the affiliate cookie after a successful order for compliance. I added a border to the payment element and extended test cases for accessories selectors.

One-step payment CTAs, analytics & edge cases

I implemented payment method buttons and CTAs for one-step checkout on desktop and mobile: cart-sidebar payment buttons (PayPal, Klarna, Apple Pay, Google Pay, Primer), place-order integration, and analytics hooks so payment choices and conversions are tracked correctly. I added null-safety in the payment saga when the selected method is missing and ecommerce and fulfillment edge cases for the “last order” hook so purchase and fulfillment events behave correctly on one-step checkout (no duplicate or incorrect events). I also prevented an infinite loop when checkoutHideExpedited and mCheckout1step are used together.

One-step payment final & grand total

I completed one-step payment methods and analytics on mobile (payment wrapper, place order, payment method components, usePaymentMethodAnalytics, usePaymentOnSubmit) with tests. I refined the checkout cart grand total layout for rebate handling so totals and rebates display correctly.

Summary

I worked on the GlassesUSA Checkout micro frontend for desktop and mobile: feature flags and A/B rollout, cart accessories (tabs, redesign, TYP), analytics (EEC, EXP, funnel events), payment integrations and one-step CTAs, delivery batch save and region handling, order validation and compliance (affiliate cookie), and removal of legacy features (Save for Later) and obsolete flags. The stack includes React, TypeScript, Redux (sagas, selectors, reducers), SCSS, Jest, React Testing Library, with Webpack 5, Module Federation, and Docker for build and local/host development.