medical gas website redesign

As a backend developer, I want to implement SKU resolution logic in the product configurator to ensure correct SKU assignment for configured products.

As a backend developer, I want to implement authentication and role-based access control (RBAC) to manage user access and permissions across the platform.

As a backend developer, I want to set up integration with Shopify to manage product data and order processing.

As a frontend developer, implement the ResultsGrid section for the Search page. This section displays search results as product cards, each showing part number, title, gas service, size, connection type, brand, price, and availability. Cards are clickable to navigate to product detail pages. Ensure the grid is responsive and collapses to a single column on mobile. Acceptance criteria: The ResultsGrid must render exactly once on the Search page, display product cards as per the provided JSX, and maintain the design structure. It should read product data from the backend, requiring backend verification. Page access: shared by all personas (B2B Customer, Repeat Purchase Technician). This is verification context and does not request role-specific implementation.

As a frontend developer, implement the CheckoutShippingAddress section to manage shipping address selection and entry. This section should render saved shipping addresses as a selector and allow users to switch to a new address entry form. It should own the shipping_address_state to track the selected address and form edit mode. The section must embed a saved address selector and a shipping address form as subregions, and handle form validation. The component should mutate the shipping_addresses entity. Ensure the component uses the provided JSX structure, including state hooks for managing addresses, form data, and validation errors. Acceptance criteria: 1) The Checkout page must render the CheckoutShippingAddress component exactly once. 2) The component must display a list of saved addresses and allow selection. 3) Users must be able to toggle to a new address form and submit valid data. 4) The design must match the provided CSS, including responsive behavior. 5) The section must integrate with the backend to persist new addresses. 6) Access is shared between B2B Customer and Repeat Purchase Technician personas. Page access: shared by all personas (B2B Customer, Repeat Purchase Technician). This is verification context and does not request role-specific implementation.

As a backend developer, implement an API to support product search functionality, allowing users to search by part numbers and technical attributes. Acceptance criteria: The API must return accurate search results based on part numbers and attributes, integrate with the frontend search bar, and handle large datasets efficiently.

As a backend developer, implement an API to manage cart operations, including adding, updating, and removing items. Acceptance criteria: The API must support cart operations with correct SKU handling, integrate with the frontend cart components, and ensure data consistency.

As a backend developer, I want to create an API for the product configurator to handle option selections and SKU resolution.

As a frontend developer, implement the Navbar section for the Home page. This section should include the brand logo linking to the Home page, navigation links to Home, Collection, Configurator, Search, and Quote pages, and an Account/Login button. The Navbar should be responsive, collapsing into a mobile drawer on smaller screens. Ensure the mobile menu can be toggled with a hamburger button. Acceptance criteria: The Navbar must render exactly once on the Home page, expose all specified navigation links, and toggle the mobile drawer correctly. The design must match the provided CSS, maintaining the responsive behavior. The Account/Login link should be conditionally visible based on persona access context, showing only for Repeat Purchase Technicians. Page access: B2B Customer only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the HomeHero section for the Home page. This section should feature a prominent hero banner introducing MGS and the new Shopify storefront. Include a headline, supporting copy, and a primary CTA button linking to the Browse Catalog page. The section should also include optional hero visuals representing medical-gas equipment. Ensure animations are implemented using motion/react for dynamic elements like the gauge needle and flow. Acceptance criteria: The HomeHero must render exactly once on the Home page, display the headline, supporting copy, and CTA button, and maintain the design structure and animations as specified. The CTA must link to the Collection page, accessible only by B2B Customers. Page access: B2B Customer only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the HomeCategoryGrid section for the Home page. This section should display a grid of 5 main product categories, each with a category name, item count, and a link to the respective Collection page. The grid should be responsive, adjusting from 2 columns on mobile to 5 columns on desktop. Acceptance criteria: The HomeCategoryGrid must render exactly once on the Home page, display all categories with correct item counts, and route to the correct Collection page on click. The design must match the provided CSS, maintaining responsive behavior. The Collection pages are accessible only by B2B Customers. Page access: B2B Customer only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the HomeFeaturedProducts section for the Home page. This section should feature a carousel or horizontal scrollable section displaying 4 featured products, each with an image, title, category tag, price, and a 'View Details' CTA. The section should be responsive, stacking vertically on mobile and displaying as a carousel on larger screens. Acceptance criteria: The HomeFeaturedProducts must render exactly once on the Home page, display all featured products with correct details, and route to the correct Product page on click. The design must match the provided CSS, maintaining responsive behavior. The Product pages are accessible by both B2B Customers and Repeat Purchase Technicians. Page access: B2B Customer only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the HomeValueProps section for the Home page. This section should showcase MGS storefront value propositions in a 3-column card layout, collapsing to 2 columns on tablet and 1 column on mobile. Each card should include an icon, heading, and descriptive copy. Acceptance criteria: The HomeValueProps must render exactly once on the Home page, display all value proposition cards with correct content, and maintain the design structure as specified. The section should be visually separated with a light gray background. Page access: B2B Customer only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the HomeSearchHighlight section to enable direct product search entry on the Home page. This section includes a search input field and a submit button that routes to the /Search page with the query parameter. The section should have a professional presentation with a white background and responsive text sizing and bar width on mobile. Ensure the search bar accepts text input and routes correctly. Acceptance criteria: The Home page must render the HomeSearchHighlight section exactly once. The section must include a search input field, a submit button, and popular search hints. The design must match the provided CSS, including responsive behavior. The search functionality must route to /Search with the query parameter. Access is shared with B2B Customer and Repeat Purchase Technician personas. Page access: B2B Customer only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the HomeCTA section to guide account creation and login for B2B customers on the Home page. This section includes two buttons: 'Create Account' and 'Sign In', with a responsive layout that stacks the buttons on mobile. The section should have a white background and optional supporting copy explaining account benefits. Acceptance criteria: The Home page must render the HomeCTA section exactly once. The section must include the 'Create Account' and 'Sign In' buttons with the described responsive layout. The design must match the provided CSS. The buttons must route to the Login page. Access is restricted to B2B Customer persona. Page access: B2B Customer only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the Footer section to provide consistent company and support information across all routed pages. This shared component includes company contact info, support links, legal content, and social links. It must maintain a responsive multi-column grid on desktop and a stacked layout on mobile. Acceptance criteria: The Footer must render consistently across all pages, including the Home page. It must include all specified elements and maintain the responsive layout as per the provided CSS. Access is shared with all personas. Page access: B2B Customer only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the LoginAuthCard section for the Login page. This section includes a sign-in form with email and password fields, a remember-me checkbox, a sign-in button, and links for password recovery and account creation. The form should provide real-time validation feedback, display error messages, and show a loading state during submission. The form submission should simulate an async authentication process, redirecting to the '/Account' page upon successful login for emails containing '@mgs.example.com'. Acceptance criteria: The LoginAuthCard must render exactly once on the Login page, provide real-time validation for email and password fields, display error messages and loading states, and simulate backend authentication with a redirect on success. The component should adhere to the design tokens specified in the CSS and be accessible by the Repeat Purchase Technician only. Page access: Repeat Purchase Technician only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the SearchBar section for the Search page. This section includes a search input field, filter toggles, dropdowns, sort options, and a clear button. It supports multi-faceted filtering and sorting of search results. Ensure the search suggestions and filter panel are responsive and collapsible on mobile. Acceptance criteria: The SearchBar must render exactly once on the Search page, support input and filter interactions as per the provided JSX, and maintain the design structure. It should integrate with backend endpoints for search queries and filter persistence, requiring backend verification. Page access: shared by all personas (B2B Customer, Repeat Purchase Technician). This is verification context and does not request role-specific implementation.

As a frontend developer, implement the CollectionFilters section for the Collection page. This section includes collapsible filter groups for Gas Service, Size, Connection Type, and Brand, with a clear-all-filters button. It manages filter state changes and exposes clear-all and apply actions. The sidebar is sticky on desktop and collapses into a drawer on mobile. Acceptance criteria: The Collection page must render the CollectionFilters section exactly once. The filter groups must be collapsible, and the clear-all and apply buttons must function correctly. The design must match the provided CSS, maintaining responsiveness. The filter state must be managed internally without relying on sibling props. Access is restricted to B2B Customers only. Page access: B2B Customer only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the AccountOrderHistory section to display the authenticated customer's order history. This section should list orders in reverse-chronological order, each as a collapsible row showing order number, date, status, total, and item count. Expanding a row reveals order details, a reorder button, and an invoice link. The component must render exactly once on the Account page, accessible only by the Repeat Purchase Technician persona. The design must follow the provided CSS styles, ensuring the list and details are displayed correctly. Acceptance criteria: The AccountOrderHistory must render on the Account page for authenticated Repeat Purchase Technicians, displaying orders with expandable details. The reorder button and invoice link must be functional, and the design must match the provided CSS. Page access: Repeat Purchase Technician only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the AccountSavedAddresses section for the Account page. This section is accessible only by the Repeat Purchase Technician persona. It displays 1–5 saved addresses as editable cards, each showing company name, street, city, state, zip, and a primary flag. Implement inline edit functionality with a form to modify the label and primary status, and a delete button with confirmation. Include an 'Add New Address' button that opens a form to enter a new address. Ensure the section manages state for editing, adding, and deleting addresses using React hooks. The section must integrate with backend endpoints to persist changes to addresses. Acceptance criteria: The Account page must render the AccountSavedAddresses component exactly once. The component must display address cards with edit and delete actions, and an 'Add New Address' button. The design must match the provided CSS styles. The backend must support address CRUD operations. Access is restricted to the Repeat Purchase Technician persona. Page access: Repeat Purchase Technician only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the QuoteConfigurationForm section to collect and validate quote request details. This form should include a configuration selector, customer contact fields, a special requests textarea, and a submit button. The form must validate inputs such as email format and required fields, and display inline errors. Upon successful submission, display a confirmation message with a quote reference ID. The form should manage its state using React hooks and handle async submission logic. Acceptance criteria: The QuoteConfigurationForm must render on the Quote page, validate inputs according to business rules, and display a confirmation message upon submission. The page is accessible by B2B Customers only. Page access: B2B Customer only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the CheckoutItemsSummary section for the Checkout page. This section is responsible for displaying a read-only summary of cart items, including SKU, title, quantity, unit price, and line total for each item. It should also provide a link to edit the cart, calculate and display the subtotal, tax estimate, shipping cost, and final total. The section must handle email input, shipping method selection, payment card entry, and legal confirmations. Ensure form validation and submission logic is implemented, with a mock submission delay for order placement. The section should render the order confirmation message upon successful submission. Acceptance criteria: - The CheckoutItemsSummary component must render exactly once on the Checkout page. - Display all cart items with SKU, title, quantity, unit price, and line total. - Provide a functional link to the Cart page for editing. - Calculate and display subtotal, tax, shipping cost, and final total based on selected shipping method. - Implement email input, shipping method radio group, payment card entry, and legal confirmation checkboxes. - Validate form inputs and handle submission with a mock delay. - Display order confirmation message upon successful submission. - Ensure the section is accessible to both B2B Customer and Repeat Purchase Technician personas. Page access: shared by all personas (B2B Customer, Repeat Purchase Technician). This is verification context and does not request role-specific implementation.

As a backend developer, create an API to handle customer account creation, login, and management. This API should support registration, authentication, and account updates, ensuring secure handling of user credentials and data. Acceptance criteria: The API must allow new account creation, authenticate users with JWT tokens, and support account updates. It must integrate with the frontend for seamless user experience.

As a backend developer, develop an API to handle order processing, including order creation, status updates, and integration with the existing inventory system. Acceptance criteria: The API must support order creation with correct SKU assignments, update order statuses, and ensure synchronization with the inventory system.

As a frontend developer, implement the CollectionHeader section for the Collection page. This section includes a breadcrumb navigation, collection title, description, and a result count. The breadcrumb allows navigation back to the Home and Collection pages, with 'Regulators' as the current page. The title 'Regulators' and a description of the products are displayed. The result count dynamically shows the number of products. Ensure the section is responsive and centered. Acceptance criteria: The Collection page must render the CollectionHeader section exactly once. The breadcrumb navigation must be functional, allowing navigation to previous pages. The design must match the provided CSS, maintaining responsiveness. The result count must accurately reflect the number of products passed as a prop. Access is restricted to B2B Customers only. Page access: B2B Customer only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the AccountHeader section to display the authenticated customer's greeting, account metadata, and sign-out action. This section should greet the user by name, show their email and account status, and provide a sign-out button. The component must render exactly once on the Account page, accessible only by the Repeat Purchase Technician persona. The design must follow the provided CSS styles, ensuring the greeting and metadata are displayed correctly. The sign-out button should trigger a session termination action. Acceptance criteria: The AccountHeader must render on the Account page for authenticated Repeat Purchase Technicians, displaying the user's name, email, and account status. The sign-out button must be functional, and the design must match the provided CSS. The section must depend on the Login page's authentication task. Page access: Repeat Purchase Technician only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the Configurator section on the Product page. This section is an interactive multi-step wizard allowing customers to configure complex built-to-order products. It includes a step indicator, option selectors for gas service, primary component, connection type, and positional options. Real-time validation provides feedback on invalid combinations. The final step resolves the configuration to a SKU, displaying an 'Add to Cart' button or 'Request Quote' option for non-standard configurations. Ensure inline display of validation errors below option selectors. The section must integrate with the backend API for SKU resolution and cart operations. This section is accessible by B2B Customer and Repeat Purchase Technician. Page access: shared by all personas (B2B Customer, Repeat Purchase Technician). This is verification context and does not request role-specific implementation.

As a backend developer, develop an API to handle quote requests for configurations outside the standard catalog. Acceptance criteria: The API must accept configuration details, validate them against business rules, and generate a quote request. It must integrate with the frontend quote form and ensure secure data handling.

As a Tech Lead, verify the end-to-end integration between the Checkout frontend implementation and the Checkout backend API. Ensure data flows correctly, API responses are handled properly in the UI, and all interactions work as expected.

As a frontend developer, implement the ProductDetails section on the Product page. This section is responsible for managing the product_selection state and displaying comprehensive product details. It includes embedded visual subregions such as ProductBreadcrumb, ProductHero, SpecificationsTable, and RelatedItems. Key interactive controls include variant selectors for gas service and connection type, a quantity spinner, real-time price calculation, and an Add to Cart button. The section must reactively update the price and total based on variant and quantity changes. Ensure the breadcrumb navigation preserves collection filters and supports navigation to Home and Collection pages. The ProductHero should feature a high-resolution image carousel with SVG illustrations. The SpecificationsTable should display technical specs grouped by category, and the RelatedItems carousel should showcase cross-sell products. All controls are bound to a single product_selection state source. Acceptance criteria: 1) The ProductDetails section must render exactly once on the Product page. 2) All interactive controls must function as described, with real-time updates to the price and total. 3) The design structure and theme must match the provided JSX and CSS. 4) The section must integrate with backend endpoints for product data and cart operations. 5) Access to the Product page is shared between B2B Customer and Repeat Purchase Technician personas. Page access: shared by all personas (B2B Customer, Repeat Purchase Technician). This is verification context and does not request role-specific implementation.

As a Tech Lead, verify the end-to-end integration between the Quote frontend implementation and the Quote backend API. Ensure data flows correctly, API responses are handled properly in the UI, and all interactions work as expected.

As a frontend developer, implement the ConfiguratorFlow section for the Configurator page. This section provides a sequential product configuration UI with real-time validation and SKU resolution. It includes dependent selectors for gas service, valve type, regulator stage, and connection type, each validating against business rules. The section resolves valid configurations to an exact catalog SKU and displays product details such as name, price, and stock. It also allows users to request a quote for non-standard configurations and includes an add-to-cart action for successful resolutions. Ensure the section is accessible to both B2B Customers and Repeat Purchase Technicians, as specified in the access context. Acceptance Criteria: - The ConfiguratorFlow component must render exactly once on the Configurator page. - Implement step indicators and dependent selectors for gas service, valve type, regulator stage, and connection type. - Validate selections in real-time and provide feedback in the validation feedback zone. - Resolve valid configurations to a SKU and display product details (name, price, stock) or trigger a quote request modal for non-standard configurations. - Include an add-to-cart button that functions only when a valid SKU is resolved and in stock. - Ensure the design structure and theme match the provided CSS. - Integrate with the backend API for SKU resolution and quote requests, as per the data contract. - Access to this section must be shared between B2B Customers and Repeat Purchase Technicians. Page access: shared by all personas (B2B Customer, Repeat Purchase Technician). This is verification context and does not request role-specific implementation.

As a frontend developer, implement the CartLineItems section to display each line item in the cart with product image, title, SKU, unit price, quantity control, line total, and remove button. This section should manage the cart state, including quantity updates and item removals, using React state hooks. Ensure the subtotal, estimated tax, discount, and grand total are calculated and displayed accurately. The section should support both catalog items and custom configurations, showing an edit link for configured items. Include an empty cart message when no items are present. Acceptance criteria: Render the CartLineItems component on the Cart page; display all line items with correct details and controls; ensure quantity updates and removals update the state and UI correctly; calculate and display subtotal, tax, discount, and grand total; show empty cart message when applicable; ensure shared access for B2B Customer and Repeat Purchase Technician personas. Page access: shared by all personas (B2B Customer, Repeat Purchase Technician). This is verification context and does not request role-specific implementation.

As a frontend developer, implement the QuotePageHeader section to introduce the quote request workflow. This section should include a page title 'Request a Quote', a description explaining the purpose of the quote request, a back link to the Configurator page, and help text with a link to contact support. Ensure the back link uses an SVG arrow icon and transitions smoothly on hover. The section must be styled according to the provided CSS, maintaining the layout and design tokens. Acceptance criteria: The QuotePageHeader must render on the Quote page, include a functional back link to '/Configurator', display the title and description as specified, and adhere to the design structure. The page is accessible by B2B Customers only. Page access: B2B Customer only. Verify the existing restricted-access contract; change authentication or RBAC only in a task that explicitly owns it.

As a frontend developer, implement the CheckoutBillingAddress section to manage billing address selection and entry. This section should render saved billing addresses as a selector and allow users to switch to a new address entry form. It should own the billing_address_state to track the selected address and form edit mode. The section must embed a saved address selector and a billing address form as subregions, and handle form validation. The component should mutate the billing_addresses entity. Ensure the component uses the provided JSX structure, including state hooks for managing addresses, form data, and validation errors. Acceptance criteria: 1) The Checkout page must render the CheckoutBillingAddress component exactly once. 2) The component must display a list of saved addresses and allow selection. 3) Users must be able to toggle to a new address form and submit valid data. 4) The design must match the provided CSS, including responsive behavior. 5) The section must integrate with the backend to persist new addresses. 6) Access is shared between B2B Customer and Repeat Purchase Technician personas. Page access: shared by all personas (B2B Customer, Repeat Purchase Technician). This is verification context and does not request role-specific implementation.