diff --git a/packages/template-retail-react-app/app/components/footer/index.jsx b/packages/template-retail-react-app/app/components/footer/index.jsx
index 95ae95452c..5ef933dd08 100644
--- a/packages/template-retail-react-app/app/components/footer/index.jsx
+++ b/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'
diff --git a/packages/template-retail-react-app/app/components/footer/index.test.js b/packages/template-retail-react-app/app/components/footer/index.test.js
index 335656bcbf..6367ca3057 100644
--- a/packages/template-retail-react-app/app/components/footer/index.test.js
+++ b/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()
- 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()
+ expect(screen.getByRole('link', {name: 'Privacy Policy'})).toBeInTheDocument()
+ })
+
+ test('renders mobile version by default', () => {
+ renderWithProviders()
+ // 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()
+
+ // 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()
-test('renders mobile version by default', () => {
- renderWithProviders()
- // 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()
+ })
})
diff --git a/packages/template-retail-react-app/app/pages/order-status/index.jsx b/packages/template-retail-react-app/app/pages/order-status/index.jsx
new file mode 100644
index 0000000000..bc91e06629
--- /dev/null
+++ b/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 (
+
+
+ Order Status
+
+
+ )
+}
+
+export default OrderStatusPage
diff --git a/packages/template-retail-react-app/app/pages/order-status/index.test.js b/packages/template-retail-react-app/app/pages/order-status/index.test.js
new file mode 100644
index 0000000000..6af82c65e2
--- /dev/null
+++ b/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()
+ expect(screen.getByTestId('order-status-page')).toBeTruthy()
+ expect(screen.getByRole('heading', {name: /order status/i})).toBeInTheDocument()
+ })
+})
diff --git a/packages/template-retail-react-app/app/routes.jsx b/packages/template-retail-react-app/app/routes.jsx
index 5927bfc542..dcc4cf09b9 100644
--- a/packages/template-retail-react-app/app/routes.jsx
+++ b/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