From 56822a23b47088f7828bf0f18dfa5178e3563287 Mon Sep 17 00:00:00 2001
From: Ben Chypak <bchypak@salesforce.com>
Date: Tue, 9 May 2023 14:59:55 -0700
Subject: [PATCH 1/2] Initial Commit

---
 .../app/components/_app/index.jsx             | 49 ++++++++++---------
 .../components/_app/partials/above-header.jsx | 10 ++++
 .../app/pages/product-list/index.jsx          |  3 +-
 .../partials/above-page-header.jsx            | 10 ++++
 .../app/theme/components/project/header.js    |  1 -
 5 files changed, 48 insertions(+), 25 deletions(-)
 create mode 100644 packages/template-retail-react-app/app/components/_app/partials/above-header.jsx
 create mode 100644 packages/template-retail-react-app/app/pages/product-list/partials/above-page-header.jsx

diff --git a/packages/template-retail-react-app/app/components/_app/index.jsx b/packages/template-retail-react-app/app/components/_app/index.jsx
index 648b311148..a5ee1195e6 100644
--- a/packages/template-retail-react-app/app/components/_app/index.jsx
+++ b/packages/template-retail-react-app/app/components/_app/index.jsx
@@ -39,6 +39,7 @@ import CheckoutFooter from '../../pages/checkout/partials/checkout-footer'
 import DrawerMenu from '../drawer-menu'
 import ListMenu from '../list-menu'
 import {HideOnDesktop, HideOnMobile} from '../responsive'
+import AboveHeader from './partials/above-header'
 
 // Hooks
 import {AuthModal, useAuthModal} from '../../hooks/use-auth-modal'
@@ -283,33 +284,35 @@ const App = (props) => {
 
                         <Box {...styles.headerWrapper}>
                             {!isCheckout ? (
-                                <Header
-                                    onMenuClick={onOpen}
-                                    onLogoClick={onLogoClick}
-                                    onMyCartClick={onCartClick}
-                                    onMyAccountClick={onAccountClick}
-                                    onWishlistClick={onWishlistClick}
-                                >
-                                    <HideOnDesktop>
-                                        <DrawerMenu
-                                            isOpen={isOpen}
-                                            onClose={onClose}
-                                            onLogoClick={onLogoClick}
-                                            root={categories?.[CAT_MENU_DEFAULT_ROOT_CATEGORY]}
-                                        />
-                                    </HideOnDesktop>
-
-                                    <HideOnMobile>
-                                        <ListMenu
-                                            root={categories?.[CAT_MENU_DEFAULT_ROOT_CATEGORY]}
-                                        />
-                                    </HideOnMobile>
-                                </Header>
+                                <>
+                                    <AboveHeader />
+                                    <Header
+                                        onMenuClick={onOpen}
+                                        onLogoClick={onLogoClick}
+                                        onMyCartClick={onCartClick}
+                                        onMyAccountClick={onAccountClick}
+                                        onWishlistClick={onWishlistClick}
+                                    >
+                                        <HideOnDesktop>
+                                            <DrawerMenu
+                                                isOpen={isOpen}
+                                                onClose={onClose}
+                                                onLogoClick={onLogoClick}
+                                                root={categories?.[CAT_MENU_DEFAULT_ROOT_CATEGORY]}
+                                            />
+                                        </HideOnDesktop>
+
+                                        <HideOnMobile>
+                                            <ListMenu
+                                                root={categories?.[CAT_MENU_DEFAULT_ROOT_CATEGORY]}
+                                            />
+                                        </HideOnMobile>
+                                    </Header>
+                                </>
                             ) : (
                                 <CheckoutHeader />
                             )}
                         </Box>
-
                         {!isOnline && <OfflineBanner />}
                         <AddToCartModalProvider>
                             <SkipNavContent
diff --git a/packages/template-retail-react-app/app/components/_app/partials/above-header.jsx b/packages/template-retail-react-app/app/components/_app/partials/above-header.jsx
new file mode 100644
index 0000000000..a81077c92b
--- /dev/null
+++ b/packages/template-retail-react-app/app/components/_app/partials/above-header.jsx
@@ -0,0 +1,10 @@
+/*
+ * Copyright (c) 2023, 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
+ */
+
+const AboveHeader = () => null
+
+export default AboveHeader
diff --git a/packages/template-retail-react-app/app/pages/product-list/index.jsx b/packages/template-retail-react-app/app/pages/product-list/index.jsx
index 04120362ab..2e1b39693c 100644
--- a/packages/template-retail-react-app/app/pages/product-list/index.jsx
+++ b/packages/template-retail-react-app/app/pages/product-list/index.jsx
@@ -53,6 +53,7 @@ import Refinements from './partials/refinements'
 import SelectedRefinements from './partials/selected-refinements'
 import EmptySearchResults from './partials/empty-results'
 import PageHeader from './partials/page-header'
+import AbovePageHeader from './partials/above-page-header'
 
 // Icons
 import {FilterIcon, ChevronDownIcon} from '../../components/icons'
@@ -380,8 +381,8 @@ const ProductList = (props) => {
                 <EmptySearchResults searchQuery={searchQuery} category={category} />
             ) : (
                 <>
+                    <AbovePageHeader />
                     {/* Header */}
-
                     <Stack
                         display={{base: 'none', lg: 'flex'}}
                         direction="row"
diff --git a/packages/template-retail-react-app/app/pages/product-list/partials/above-page-header.jsx b/packages/template-retail-react-app/app/pages/product-list/partials/above-page-header.jsx
new file mode 100644
index 0000000000..b82887efa0
--- /dev/null
+++ b/packages/template-retail-react-app/app/pages/product-list/partials/above-page-header.jsx
@@ -0,0 +1,10 @@
+/*
+ * Copyright (c) 2023, 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
+ */
+
+const AbovePageHeader = () => null
+
+export default AbovePageHeader
diff --git a/packages/template-retail-react-app/app/theme/components/project/header.js b/packages/template-retail-react-app/app/theme/components/project/header.js
index 9b6d0d9296..d431fa1ec4 100644
--- a/packages/template-retail-react-app/app/theme/components/project/header.js
+++ b/packages/template-retail-react-app/app/theme/components/project/header.js
@@ -7,7 +7,6 @@
 export default {
     baseStyle: {
         container: {
-            height: 'full',
             minWidth: 'xs',
             width: 'full',
             boxShadow: 'base',

From aa604d7bb143e7594f2bd014c0001b66c7846441 Mon Sep 17 00:00:00 2001
From: Ben Chypak <bchypak@salesforce.com>
Date: Tue, 9 May 2023 15:15:59 -0700
Subject: [PATCH 2/2] Update CHANGELOG.md

---
 packages/template-retail-react-app/CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/template-retail-react-app/CHANGELOG.md b/packages/template-retail-react-app/CHANGELOG.md
index 5c1523b7da..5febca1f64 100644
--- a/packages/template-retail-react-app/CHANGELOG.md
+++ b/packages/template-retail-react-app/CHANGELOG.md
@@ -1,4 +1,5 @@
 ## v2.8.0-dev (Mar 03, 2023)
+- Add app `above-header` and product-list `above-page-header` convenience components [#1183](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1183)
 - Remove `cross-fetch` dependency [#1160](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1160)
 - Make `mergeBasket` conditional more robust [#1048](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1048)