W 18998603 Route 'Order Status' 'footer link to a new Order Status Page

packages/template-retail-react-app/app/components/footer/index.jsx

@@ -104,7 +104,7 @@ const Footer = ({...otherProps}) => {
                                 })}
                                 links={[
                                     {
-                                        href: '/',
+                                        href: '/order-status',
                                         text: intl.formatMessage({
                                             id: 'footer.link.order_status',
                                             defaultMessage: 'Order Status'

packages/template-retail-react-app/app/components/footer/index.test.js

@@ -5,18 +5,56 @@
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
  */
 import React from 'react'
-import {screen} from '@testing-library/react'
-
+import {screen, within} from '@testing-library/react'
 import Footer from '@salesforce/retail-react-app/app/components/footer/index'
 import {renderWithProviders} from '@salesforce/retail-react-app/app/utils/test-utils'
+import {useBreakpointValue} from '@chakra-ui/react'
 
-test('renders component', () => {
-    renderWithProviders(<Footer />)
-    expect(screen.getByRole('link', {name: 'Privacy Policy'})).toBeInTheDocument()
-})
+// Mock the Chakra UI hook
+jest.mock('@chakra-ui/react', () => ({
+    ...jest.requireActual('@chakra-ui/react'),
+    useBreakpointValue: jest.fn()
+}))
+
+describe('Footer', () => {
+    beforeEach(() => {
+        jest.resetAllMocks()
+    })
+
+    test('renders component', () => {
+        renderWithProviders(<Footer />)
+        expect(screen.getByRole('link', {name: 'Privacy Policy'})).toBeInTheDocument()
+    })
+
+    test('renders mobile version by default', () => {
+        renderWithProviders(<Footer />)
+        // This link is hidden initially, but would be shown for desktop
+        expect(screen.getByRole('link', {name: 'About Us', hidden: true})).toBeInTheDocument()
+    })
+
+    test('renders desktop version (desktop links visible)', () => {
+        // Mock for desktop view - force all content to be visible
+        useBreakpointValue.mockImplementation(() => true)
+
+        renderWithProviders(<Footer />)
+
+        // Get footer element and search within it
+        const footer = screen.getByRole('contentinfo')
+        const orderStatusLink = within(footer).getByText('Order Status')
+
+        expect(orderStatusLink).toBeInTheDocument()
+        expect(orderStatusLink).toHaveAttribute('href', '/uk/en-GB/order-status')
+        expect(screen.getAllByText(/privacy policy/i)[0]).toBeInTheDocument()
+    })
+
+    test('renders mobile version (only mobile links visible)', () => {
+        // Mock for mobile view - hide desktop content
+        useBreakpointValue.mockImplementation(() => false)
+
+        renderWithProviders(<Footer />)
 
-test('renders mobile version by default', () => {
-    renderWithProviders(<Footer />)
-    // This link is hidden initially, but would be shown for desktop
-    expect(screen.getByRole('link', {name: 'About Us', hidden: true})).toBeInTheDocument()
+        // Verify desktop elements are hidden
+        expect(screen.queryByRole('link', {name: /order status/i})).not.toBeInTheDocument()
+        expect(screen.getAllByText(/privacy policy/i)[0]).toBeInTheDocument()
+    })
 })

packages/template-retail-react-app/app/pages/order-status/index.jsx

@@ -0,0 +1,21 @@
+/*
+ * Copyright (c) 2024, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+
+import React from 'react'
+import {Box, Heading} from '@chakra-ui/react'
+
+const OrderStatusPage = () => {
+    return (
+        <Box data-testid="order-status-page" minH="100vh" bg="gray.50" pt={24}>
+            <Heading as="h1" size="lg" textAlign="center">
+                Order Status
+            </Heading>
+        </Box>
+    )
+}
+
+export default OrderStatusPage

packages/template-retail-react-app/app/pages/order-status/index.test.js

@@ -0,0 +1,17 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+import React from 'react'
+import {render, screen} from '@testing-library/react'
+import OrderStatusPage from '@salesforce/retail-react-app/app/pages/order-status/index.jsx'
+
+describe('OrderStatusPage', () => {
+    it('renders the order status page', () => {
+        render(<OrderStatusPage />)
+        expect(screen.getByTestId('order-status-page')).toBeTruthy()
+        expect(screen.getByRole('heading', {name: /order status/i})).toBeInTheDocument()
+    })
+})

packages/template-retail-react-app/app/routes.jsx

@@ -54,6 +54,7 @@ const StoreLocator = loadable(() => import('./pages/store-locator'), {
 const Wishlist = loadable(() => import('./pages/account/wishlist'), {
     fallback
 })
+const OrderStatus = loadable(() => import('./pages/order-status'), {fallback})
 const PageNotFound = loadable(() => import('./pages/page-not-found'))
 
 export const routes = [
@@ -135,6 +136,10 @@ export const routes = [
         path: '/store-locator',
         component: StoreLocator
     },
+    {
+        path: '/order-status',
+        component: OrderStatus
+    },
     {
         path: '*',
         component: PageNotFound