From e28e09493fc55e5d9e366e36820350471841ed66 Mon Sep 17 00:00:00 2001
From: Vasilii Burlacu <v.burlacu@atwix.com>
Date: Wed, 10 Mar 2021 01:04:16 +0200
Subject: [PATCH] #1617 - Fetch store name from the GraphQL server at compile
 time (#3019)

* #1617 - Fetch store name from the GraphQL server at compile time

* format the code with prettier

* remove unnecessary declarations

* Simplify the process of finding the available store

Co-authored-by: Stephen <sirugh@users.noreply.github.com>

* Simplify the assignment of current store name

Co-authored-by: Stephen <sirugh@users.noreply.github.com>

* Fix destructure syntax

* prettier

* availableStore -> availableStores

* Use runtime store name fetch in a new TitleWithStore component.

Signed-off-by: sirugh <rugh@adobe.com>

* StoreTitle

* Fix tests

* Fix error view rendering when data was still returned

Signed-off-by: sirugh <rugh@adobe.com>

* fix test snap

Signed-off-by: sirugh <rugh@adobe.com>

Co-authored-by: Stephen <sirugh@users.noreply.github.com>
Co-authored-by: Stephen <rugh@adobe.com>
Co-authored-by: Revanth Kumar Annavarapu <35203638+revanth0212@users.noreply.github.com>
Co-authored-by: Devagouda <40405790+dpatil-magento@users.noreply.github.com>
---
 .../i18n/fr_FR.json                           | 10 ++---
 .../useCategoryContent.spec.js.snap           |  2 -
 .../Category/useCategoryContent.js            |  6 ---
 .../lib/queries/getStoreConfigData.graphql    |  1 +
 packages/venia-concept/template.html          |  2 -
 packages/venia-concept/webpack.config.js      | 13 ++++++-
 packages/venia-ui/i18n/en_US.json             | 10 ++---
 .../RootComponents/CMS/__tests__/cms.spec.js  |  6 +--
 .../venia-ui/lib/RootComponents/CMS/cms.js    |  4 +-
 .../Category/__tests__/category.spec.js       |  2 +-
 .../__tests__/categoryContent.spec.js         |  2 +-
 .../Category/categoryContent.js               |  5 +--
 .../__snapshots__/product.spec.js.snap        | 12 +++---
 .../lib/RootComponents/Product/product.js     |  7 +---
 .../__tests__/accountInformationPage.spec.js  |  2 +-
 .../accountInformationPage.js                 | 17 ++++-----
 .../__tests__/addressBookPage.spec.js         |  2 +-
 .../AddressBookPage/addressBookPage.js        |  6 +--
 .../__tests__/__snapshots__/app.spec.js.snap  |  8 +---
 .../lib/components/App/__tests__/app.spec.js  |  2 +-
 packages/venia-ui/lib/components/App/app.js   |  6 +--
 .../__snapshots__/cartPage.spec.js.snap       |  2 +
 .../CartPage/__tests__/cartPage.spec.js       | 29 ++++-----------
 .../lib/components/CartPage/cartPage.js       | 17 ++++-----
 .../__tests__/orderConfirmationPage.spec.js   |  2 +-
 .../orderConfirmationPage.js                  | 17 ++++-----
 .../__tests__/checkoutPage.spec.js            |  2 +-
 .../components/CheckoutPage/checkoutPage.js   | 17 ++++-----
 .../__tests__/communicationsPage.spec.js      |  2 +-
 .../CommunicationsPage/communicationsPage.js  | 15 +++-----
 .../venia-ui/lib/components/Head/index.js     | 37 ++++++++++++++++++-
 .../__snapshots__/resetPassword.spec.js.snap  | 24 ++++++------
 .../__tests__/resetPassword.spec.js           |  2 +-
 .../MyAccount/ResetPassword/resetPassword.js  |  7 +---
 .../__tests__/orderHistoryPage.spec.js        |  2 +-
 .../OrderHistoryPage/orderHistoryPage.js      |  7 +---
 .../__tests__/savedPaymentsPage.spec.js       |  2 +-
 .../SavedPaymentsPage/savedPaymentsPage.js    |  4 +-
 .../modify-site-footer/index.md               |  6 +--
 39 files changed, 156 insertions(+), 163 deletions(-)

diff --git a/packages/extensions/venia-sample-language-packs/i18n/fr_FR.json b/packages/extensions/venia-sample-language-packs/i18n/fr_FR.json
index 3b225139c3..b12d23ce99 100644
--- a/packages/extensions/venia-sample-language-packs/i18n/fr_FR.json
+++ b/packages/extensions/venia-sample-language-packs/i18n/fr_FR.json
@@ -5,7 +5,7 @@
     "accountInformationPage.accountInformation": "Informations sur le compte",
     "accountInformationPage.editAccount": "Modifier les informations du compte",
     "accountInformationPage.errorTryAgain": "Un problème est survenu. Veuillez actualiser et réessayer.",
-    "accountInformationPage.titleAccount": "Information sur le compte - {name}",
+    "accountInformationPage.titleAccount": "Information sur le compte",
     "accountMenu.accountInfoLink": "Information sur le compte",
     "accountMenu.addressBookLink": "Carnet d'adresses",
     "accountMenu.communicationsLink": "Les communications",
@@ -39,7 +39,7 @@
     "cartPage.emptyCart": "Il n'y a aucun article dans votre panier.",
     "cartPage.heading": "Panier",
     "cartPage.signIn": "Se connecter",
-    "cartPage.title": "Panier - {name}",
+    "cartPage.title": "Panier",
     "cartTrigger.ariaLabel": "Basculer le mini-panier. Vous avez {count} articles dans votre panier.",
     "categoryContent.filter": "Filtre",
     "categoryContent.itemsSortedBy": "Articles triés par ",
@@ -88,8 +88,8 @@
     "checkoutPage.stockStatusMessage": "Un article de votre panier est actuellement en rupture de stock et doit être retiré pour pouvoir passer à la caisse. Veuillez retourner à votre panier pour retirer l'article.",
     "checkoutPage.subscribe": "Abonnez-vous aux nouvelles et mises à jour",
     "checkoutPage.thankYou": "Nous vous remercions de votre commande!",
-    "checkoutPage.titleCheckout": "Paiement - {name}",
-    "checkoutPage.titleReceipt": "Le reçu - {name}",
+    "checkoutPage.titleCheckout": "Paiement",
+    "checkoutPage.titleReceipt": "Le reçu",
     "cms.shopByCategory": "Acheter par catégorie",
     "cmsBlock.noBlocks": "Il n'y a aucun bloc à afficher",
     "communicationsPage.changesText": "Sauvegarder les modifications",
@@ -99,7 +99,7 @@
     "communicationsPage.preferencesText": "Vos préférences ont été mises à jour.",
     "communicationsPage.savingText": "Économie",
     "communicationsPage.subscribeText": "Restez à la pointe de la mode; abonnez-vous à la newsletter mensuelle de Venia.",
-    "communicationsPage.title": "Les Communications - {name}",
+    "communicationsPage.title": "Les Communications",
     "completedView.errorLoading": "Erreur lors du chargement de la méthode d'expédition sélectionnée. Veuillez sélectionner à nouveau.",
     "completedView.shippingMethod": "Méthode d'expédition",
     "Contact Us": "Nous contacter",
diff --git a/packages/peregrine/lib/talons/RootComponents/Category/__tests__/__snapshots__/useCategoryContent.spec.js.snap b/packages/peregrine/lib/talons/RootComponents/Category/__tests__/__snapshots__/useCategoryContent.spec.js.snap
index d1cdad66db..9ccf94613f 100644
--- a/packages/peregrine/lib/talons/RootComponents/Category/__tests__/__snapshots__/useCategoryContent.spec.js.snap
+++ b/packages/peregrine/lib/talons/RootComponents/Category/__tests__/__snapshots__/useCategoryContent.spec.js.snap
@@ -19,7 +19,6 @@ Object {
     null,
   ],
   "loadFilters": false,
-  "pageTitle": "Venia",
   "totalPagesFromData": null,
 }
 `;
@@ -46,7 +45,6 @@ Object {
     },
   ],
   "loadFilters": false,
-  "pageTitle": "Jewelry - Venia",
   "totalPagesFromData": 1,
 }
 `;
diff --git a/packages/peregrine/lib/talons/RootComponents/Category/useCategoryContent.js b/packages/peregrine/lib/talons/RootComponents/Category/useCategoryContent.js
index 481889a646..5e43bf2b4e 100644
--- a/packages/peregrine/lib/talons/RootComponents/Category/useCategoryContent.js
+++ b/packages/peregrine/lib/talons/RootComponents/Category/useCategoryContent.js
@@ -21,7 +21,6 @@ const DRAWER_NAME = 'filter';
  * @returns {func}   result.handleOpenFilters - A callback function that actually opens the filter drawer.
  * @returns {object} result.items - The items in this category.
  * @returns {bool}   result.loadFilters - Whether or not the user has signalled their intent to interact with the filters.
- * @returns {string} result.pageTitle - The text to put in the browser tab for this page.
  */
 export const useCategoryContent = props => {
     const { categoryId, data, pageSize = 6 } = props;
@@ -68,10 +67,6 @@ export const useCategoryContent = props => {
         : null;
     const categoryName = data ? data.category.name : null;
     const categoryDescription = data ? data.category.description : null;
-    // Note: STORE_NAME is injected by Webpack at build time.
-    const pageTitle = categoryName
-        ? `${categoryName} - ${STORE_NAME}`
-        : STORE_NAME;
 
     return {
         categoryName,
@@ -81,7 +76,6 @@ export const useCategoryContent = props => {
         handleOpenFilters,
         items,
         loadFilters,
-        pageTitle,
         totalPagesFromData
     };
 };
diff --git a/packages/pwa-buildpack/lib/queries/getStoreConfigData.graphql b/packages/pwa-buildpack/lib/queries/getStoreConfigData.graphql
index 67b9d5a0b9..3fa0ba80c0 100644
--- a/packages/pwa-buildpack/lib/queries/getStoreConfigData.graphql
+++ b/packages/pwa-buildpack/lib/queries/getStoreConfigData.graphql
@@ -5,5 +5,6 @@ query {
         code
         locale
         secure_base_media_url
+        store_name
     }
 }
diff --git a/packages/venia-concept/template.html b/packages/venia-concept/template.html
index 08e105b941..5978a51b69 100644
--- a/packages/venia-concept/template.html
+++ b/packages/venia-concept/template.html
@@ -7,8 +7,6 @@
         <meta name="theme-color" content="#ff6334">
         <link rel="manifest" href="/manifest.json">
 
-        <title><%= STORE_NAME %></title>
-
         <!--
             Apple Specific Tags
 
diff --git a/packages/venia-concept/webpack.config.js b/packages/venia-concept/webpack.config.js
index 073e3a9dd9..2da7fe3cef 100644
--- a/packages/venia-concept/webpack.config.js
+++ b/packages/venia-concept/webpack.config.js
@@ -45,6 +45,15 @@ module.exports = async env => {
     const storeConfigData = await getStoreConfigData();
     const { availableStores } = await getAvailableStoresConfigData();
 
+    /**
+     * Loop the available stores when there is provided STORE_VIEW_CODE
+     * in the .env file, because should set the store name from the
+     * given store code instead of the default one.
+     */
+    const availableStore = availableStores.find(
+        ({ code }) => code === process.env.STORE_VIEW_CODE
+    );
+
     global.MAGENTO_MEDIA_BACKEND_URL = mediaUrl;
     global.LOCALE = storeConfigData.locale.replace('_', '-');
     global.AVAILABLE_STORE_VIEWS = availableStores;
@@ -63,7 +72,9 @@ module.exports = async env => {
              * the globals object in jest.config.js.
              */
             POSSIBLE_TYPES: JSON.stringify(possibleTypes),
-            STORE_NAME: JSON.stringify('Venia'),
+            STORE_NAME: availableStore
+                ? JSON.stringify(availableStore.store_name)
+                : JSON.stringify(storeConfigData.store_name),
             STORE_VIEW_CODE: process.env.STORE_VIEW_CODE
                 ? JSON.stringify(process.env.STORE_VIEW_CODE)
                 : JSON.stringify(storeConfigData.code),
diff --git a/packages/venia-ui/i18n/en_US.json b/packages/venia-ui/i18n/en_US.json
index a341fd4607..37226f8804 100644
--- a/packages/venia-ui/i18n/en_US.json
+++ b/packages/venia-ui/i18n/en_US.json
@@ -5,7 +5,7 @@
     "accountInformationPage.accountInformation": "Account Information",
     "accountInformationPage.editAccount": "Edit Account Information",
     "accountInformationPage.errorTryAgain": "Something went wrong. Please refresh and try again.",
-    "accountInformationPage.titleAccount": "Account Information - {name}",
+    "accountInformationPage.titleAccount": "Account Information",
     "accountMenu.accountInfoLink": "Account Information",
     "accountMenu.addressBookLink": "Address Book",
     "accountMenu.communicationsLink": "Communications",
@@ -42,7 +42,7 @@
     "cartPage.couponCode": "Coupon Code",
     "cartPage.emptyCart": "There are no items in your cart.",
     "cartPage.heading": "Cart",
-    "cartPage.title": "Cart - {name}",
+    "cartPage.title": "Cart",
     "cartTrigger.ariaLabel": "Toggle mini cart. You have {count} items in your cart.",
     "categoryContent.filter": "Filter",
     "categoryContent.itemsSortedBy": "Items sorted by ",
@@ -97,8 +97,8 @@
     "checkoutPage.stockStatusMessage": "An item in your cart is currently out-of-stock and must be removed in order to Checkout. Please return to your cart to remove the item.",
     "checkoutPage.subscribe": "Subscribe to news and updates",
     "checkoutPage.thankYou": "Thank you for your order!",
-    "checkoutPage.titleCheckout": "Checkout - {name}",
-    "checkoutPage.titleReceipt": "Receipt - {name}",
+    "checkoutPage.titleCheckout": "Checkout",
+    "checkoutPage.titleReceipt": "Receipt",
     "cms.shopByCategory": "Shop by category",
     "cmsBlock.noBlocks": "There are no blocks to display",
     "communicationsPage.changesText": "Save Changes",
@@ -108,7 +108,7 @@
     "communicationsPage.preferencesText": "Your preferences have been updated.",
     "communicationsPage.savingText": "Saving",
     "communicationsPage.subscribeText": "Stay on the cutting edge of fashion; subscribe to the monthly Venia Newsletter.",
-    "communicationsPage.title": "Communications - {name}",
+    "communicationsPage.title": "Communications",
     "completedView.errorLoading": "Error loading selected shipping method. Please select again.",
     "completedView.shippingMethod": "Shipping Method",
     "Contact Us": "Contact Us",
diff --git a/packages/venia-ui/lib/RootComponents/CMS/__tests__/cms.spec.js b/packages/venia-ui/lib/RootComponents/CMS/__tests__/cms.spec.js
index ce2230a30d..c8e43eb1c7 100644
--- a/packages/venia-ui/lib/RootComponents/CMS/__tests__/cms.spec.js
+++ b/packages/venia-ui/lib/RootComponents/CMS/__tests__/cms.spec.js
@@ -3,7 +3,7 @@ import createTestInstance from '@magento/peregrine/lib/util/createTestInstance';
 import { useQuery } from '@apollo/client';
 import CategoryList from '../../../components/CategoryList';
 import RichContent from '../../../components/RichContent';
-import { Title } from '../../../components/Head';
+import { StoreTitle } from '../../../components/Head';
 import CMSPage from '../cms';
 import { useAppContext } from '@magento/peregrine/lib/context/app';
 
@@ -11,7 +11,7 @@ jest.mock('../../../classify');
 
 jest.mock('../../../components/Head', () => ({
     HeadProvider: ({ children }) => <div>{children}</div>,
-    Title: () => 'Title',
+    StoreTitle: () => 'Title',
     Meta: () => 'Meta'
 }));
 jest.mock('../../../components/LoadingIndicator', () => {
@@ -173,7 +173,7 @@ test('render meta information based on meta data from GraphQL', () => {
     });
 
     const { root } = createTestInstance(<CMSPage {...props} />);
-    const title = root.findByType(Title);
+    const title = root.findByType(StoreTitle);
     expect(title).toBeTruthy();
     expect(title.props.children).toEqual('Test Meta Title');
 
diff --git a/packages/venia-ui/lib/RootComponents/CMS/cms.js b/packages/venia-ui/lib/RootComponents/CMS/cms.js
index 326318778b..1b3ffd6f8d 100644
--- a/packages/venia-ui/lib/RootComponents/CMS/cms.js
+++ b/packages/venia-ui/lib/RootComponents/CMS/cms.js
@@ -4,7 +4,7 @@ import { fullPageLoadingIndicator } from '../../components/LoadingIndicator';
 import { useCmsPage } from '@magento/peregrine/lib/talons/Cms/useCmsPage';
 import RichContent from '../../components/RichContent';
 import CategoryList from '../../components/CategoryList';
-import { Meta, Title } from '../../components/Head';
+import { Meta, StoreTitle } from '../../components/Head';
 import { mergeClasses } from '../../classify';
 import { useIntl } from 'react-intl';
 
@@ -46,7 +46,7 @@ const CMSPage = props => {
 
         return (
             <Fragment>
-                <Title>{pageTitle}</Title>
+                <StoreTitle>{pageTitle}</StoreTitle>
                 <Meta name="title" content={pageTitle} />
                 <Meta name="description" content={meta_description} />
                 {headingElement}
diff --git a/packages/venia-ui/lib/RootComponents/Category/__tests__/category.spec.js b/packages/venia-ui/lib/RootComponents/Category/__tests__/category.spec.js
index 68a0d9b645..d313316973 100644
--- a/packages/venia-ui/lib/RootComponents/Category/__tests__/category.spec.js
+++ b/packages/venia-ui/lib/RootComponents/Category/__tests__/category.spec.js
@@ -9,7 +9,7 @@ jest.mock('@magento/peregrine/lib/talons/RootComponents/Category', () => ({
 
 jest.mock('../../../components/Head', () => ({
     HeadProvider: ({ children }) => <div>{children}</div>,
-    Title: () => 'Title',
+    StoreTitle: () => 'Title',
     Meta: () => 'Meta'
 }));
 
diff --git a/packages/venia-ui/lib/RootComponents/Category/__tests__/categoryContent.spec.js b/packages/venia-ui/lib/RootComponents/Category/__tests__/categoryContent.spec.js
index d52f29b0b8..15d0fa30ea 100644
--- a/packages/venia-ui/lib/RootComponents/Category/__tests__/categoryContent.spec.js
+++ b/packages/venia-ui/lib/RootComponents/Category/__tests__/categoryContent.spec.js
@@ -14,7 +14,7 @@ jest.mock('@magento/peregrine/lib/context/app', () => {
 
 jest.mock('../../../components/Head', () => ({
     HeadProvider: ({ children }) => <div>{children}</div>,
-    Title: () => 'Title'
+    StoreTitle: () => 'Title'
 }));
 
 jest.mock('../../../components/Breadcrumbs', () => 'Breadcrumbs');
diff --git a/packages/venia-ui/lib/RootComponents/Category/categoryContent.js b/packages/venia-ui/lib/RootComponents/Category/categoryContent.js
index 765af78630..4efca02f0f 100644
--- a/packages/venia-ui/lib/RootComponents/Category/categoryContent.js
+++ b/packages/venia-ui/lib/RootComponents/Category/categoryContent.js
@@ -7,7 +7,7 @@ import { mergeClasses } from '../../classify';
 import Breadcrumbs from '../../components/Breadcrumbs';
 import Button from '../../components/Button';
 import Gallery from '../../components/Gallery';
-import { Title } from '../../components/Head';
+import { StoreTitle } from '../../components/Head';
 import Pagination from '../../components/Pagination';
 import ProductSort from '../../components/ProductSort';
 import RichContent from '../../components/RichContent';
@@ -33,7 +33,6 @@ const CategoryContent = props => {
         handleLoadFilters,
         handleOpenFilters,
         items,
-        pageTitle,
         totalPagesFromData
     } = talonProps;
 
@@ -101,7 +100,7 @@ const CategoryContent = props => {
     return (
         <Fragment>
             <Breadcrumbs categoryId={categoryId} />
-            <Title>{pageTitle}</Title>
+            <StoreTitle>{categoryName}</StoreTitle>
             <article className={classes.root}>
                 <h1 className={classes.title}>
                     <div className={classes.categoryTitle}>{categoryName}</div>
diff --git a/packages/venia-ui/lib/RootComponents/Product/__tests__/__snapshots__/product.spec.js.snap b/packages/venia-ui/lib/RootComponents/Product/__tests__/__snapshots__/product.spec.js.snap
index 9f0250d4bc..a2fe078697 100644
--- a/packages/venia-ui/lib/RootComponents/Product/__tests__/__snapshots__/product.spec.js.snap
+++ b/packages/venia-ui/lib/RootComponents/Product/__tests__/__snapshots__/product.spec.js.snap
@@ -2,9 +2,9 @@
 
 exports[`renders product page correctly 1`] = `
 <React.Fragment>
-  <Title>
-    Fitted Dress with Belt - Venia
-  </Title>
+  <StoreTitle>
+    Fitted Dress with Belt
+  </StoreTitle>
   <Meta
     content="Team these printed palazzo pants with a solid tank top and summer-ready sandals"
     name="description"
@@ -99,9 +99,9 @@ exports[`renders product page correctly 1`] = `
 
 exports[`renders product page correctly when error and product data exist 1`] = `
 <React.Fragment>
-  <Title>
-    Fitted Dress with Belt - Venia
-  </Title>
+  <StoreTitle>
+    Fitted Dress with Belt
+  </StoreTitle>
   <Meta
     content="Team these printed palazzo pants with a solid tank top and summer-ready sandals"
     name="description"
diff --git a/packages/venia-ui/lib/RootComponents/Product/product.js b/packages/venia-ui/lib/RootComponents/Product/product.js
index ef16b73d78..57ef7ccb13 100644
--- a/packages/venia-ui/lib/RootComponents/Product/product.js
+++ b/packages/venia-ui/lib/RootComponents/Product/product.js
@@ -3,7 +3,7 @@ import { FormattedMessage } from 'react-intl';
 import { useProduct } from '@magento/peregrine/lib/talons/RootComponents/Product/useProduct';
 
 import ErrorView from '@magento/venia-ui/lib/components/ErrorView';
-import { Title, Meta } from '@magento/venia-ui/lib/components/Head';
+import { StoreTitle, Meta } from '@magento/venia-ui/lib/components/Head';
 import { fullPageLoadingIndicator } from '@magento/venia-ui/lib/components/LoadingIndicator';
 import ProductFullDetail from '@magento/venia-ui/lib/components/ProductFullDetail';
 import mapProduct from '@magento/venia-ui/lib/util/mapProduct';
@@ -38,12 +38,9 @@ const Product = () => {
         );
     }
 
-    // Note: STORE_NAME is injected by Webpack at build time.
-    const title = `${product.name} - ${STORE_NAME}`;
-
     return (
         <Fragment>
-            <Title>{title}</Title>
+            <StoreTitle>{product.name}</StoreTitle>
             <Meta name="description" content={product.meta_description} />
             <ProductFullDetail product={product} />
         </Fragment>
diff --git a/packages/venia-ui/lib/components/AccountInformationPage/__tests__/accountInformationPage.spec.js b/packages/venia-ui/lib/components/AccountInformationPage/__tests__/accountInformationPage.spec.js
index dfb5e4f31c..916ffdaad3 100644
--- a/packages/venia-ui/lib/components/AccountInformationPage/__tests__/accountInformationPage.spec.js
+++ b/packages/venia-ui/lib/components/AccountInformationPage/__tests__/accountInformationPage.spec.js
@@ -32,7 +32,7 @@ const emptyFormProps = {
     showUpdateMode
 };
 
-jest.mock('../../Head', () => ({ Title: () => 'Account Information' }));
+jest.mock('../../Head', () => ({ StoreTitle: () => 'Account Information' }));
 
 jest.mock('@magento/venia-drivers', () => ({
     Redirect: props => <mock-Redirect {...props} />
diff --git a/packages/venia-ui/lib/components/AccountInformationPage/accountInformationPage.js b/packages/venia-ui/lib/components/AccountInformationPage/accountInformationPage.js
index bc443fff39..9ced60a5d5 100644
--- a/packages/venia-ui/lib/components/AccountInformationPage/accountInformationPage.js
+++ b/packages/venia-ui/lib/components/AccountInformationPage/accountInformationPage.js
@@ -6,7 +6,7 @@ import { useAccountInformationPage } from '@magento/peregrine/lib/talons/Account
 import { mergeClasses } from '../../classify';
 import Button from '../Button';
 import { Message } from '../Field';
-import { Title } from '../Head';
+import { StoreTitle } from '../Head';
 import { fullPageLoadingIndicator } from '../LoadingIndicator';
 
 import defaultClasses from './accountInformationPage.css';
@@ -123,15 +123,12 @@ const AccountInformationPage = props => {
 
     return (
         <div className={classes.root}>
-            <Title>
-                {formatMessage(
-                    {
-                        id: 'accountInformationPage.titleAccount',
-                        defaultMessage: 'Account Information'
-                    },
-                    { name: STORE_NAME }
-                )}
-            </Title>
+            <StoreTitle>
+                {formatMessage({
+                    id: 'accountInformationPage.titleAccount',
+                    defaultMessage: 'Account Information'
+                })}
+            </StoreTitle>
             <h1 className={classes.title}>
                 <FormattedMessage
                     id={'accountInformationPage.accountInformation'}
diff --git a/packages/venia-ui/lib/components/AddressBookPage/__tests__/addressBookPage.spec.js b/packages/venia-ui/lib/components/AddressBookPage/__tests__/addressBookPage.spec.js
index 041bdad374..982fde6dcb 100644
--- a/packages/venia-ui/lib/components/AddressBookPage/__tests__/addressBookPage.spec.js
+++ b/packages/venia-ui/lib/components/AddressBookPage/__tests__/addressBookPage.spec.js
@@ -6,7 +6,7 @@ import AddressBookPage from '../addressBookPage';
 
 jest.mock('@magento/venia-ui/lib/classify');
 
-jest.mock('../../Head', () => ({ Title: () => 'Title' }));
+jest.mock('../../Head', () => ({ StoreTitle: () => 'Title' }));
 jest.mock('../../Icon', () => 'Icon');
 jest.mock(
     '@magento/peregrine/lib/talons/AddressBookPage/useAddressBookPage',
diff --git a/packages/venia-ui/lib/components/AddressBookPage/addressBookPage.js b/packages/venia-ui/lib/components/AddressBookPage/addressBookPage.js
index 5a99ca3699..878a387e4b 100644
--- a/packages/venia-ui/lib/components/AddressBookPage/addressBookPage.js
+++ b/packages/venia-ui/lib/components/AddressBookPage/addressBookPage.js
@@ -4,7 +4,7 @@ import { PlusSquare } from 'react-feather';
 
 import { useAddressBookPage } from '@magento/peregrine/lib/talons/AddressBookPage/useAddressBookPage';
 import { mergeClasses } from '@magento/venia-ui/lib/classify';
-import { Title } from '@magento/venia-ui/lib/components/Head';
+import { StoreTitle } from '@magento/venia-ui/lib/components/Head';
 import Icon from '@magento/venia-ui/lib/components/Icon';
 import LinkButton from '@magento/venia-ui/lib/components/LinkButton';
 import { fullPageLoadingIndicator } from '@magento/venia-ui/lib/components/LoadingIndicator';
@@ -90,11 +90,9 @@ const AddressBookPage = props => {
         return fullPageLoadingIndicator;
     }
 
-    // STORE_NAME is injected by Webpack at build time.
-    const title = `${PAGE_TITLE} - ${STORE_NAME}`;
     return (
         <div className={classes.root}>
-            <Title>{title}</Title>
+            <StoreTitle>{PAGE_TITLE}</StoreTitle>
             <h1 className={classes.heading}>{PAGE_TITLE}</h1>
             <div className={classes.content}>
                 {addressBookElements}
diff --git a/packages/venia-ui/lib/components/App/__tests__/__snapshots__/app.spec.js.snap b/packages/venia-ui/lib/components/App/__tests__/__snapshots__/app.spec.js.snap
index a5a5ee0026..dce926d06f 100644
--- a/packages/venia-ui/lib/components/App/__tests__/__snapshots__/app.spec.js.snap
+++ b/packages/venia-ui/lib/components/App/__tests__/__snapshots__/app.spec.js.snap
@@ -18,9 +18,7 @@ exports[`displays open nav or drawer 1`] = `
 
 exports[`renders with renderErrors 1`] = `
 <HeadProvider>
-  <Title>
-    Venia
-  </Title>
+  <StoreTitle />
   <Main
     isMasked={true}
   />
@@ -33,9 +31,7 @@ exports[`renders with renderErrors 1`] = `
 
 exports[`renders with unhandledErrors 1`] = `
 <HeadProvider>
-  <Title>
-    Venia
-  </Title>
+  <StoreTitle />
   <Main
     isMasked={false}
   >
diff --git a/packages/venia-ui/lib/components/App/__tests__/app.spec.js b/packages/venia-ui/lib/components/App/__tests__/app.spec.js
index 4dd573b1fa..1a3fd60c10 100644
--- a/packages/venia-ui/lib/components/App/__tests__/app.spec.js
+++ b/packages/venia-ui/lib/components/App/__tests__/app.spec.js
@@ -11,7 +11,7 @@ const renderer = new ShallowRenderer();
 
 jest.mock('../../Head', () => ({
     HeadProvider: ({ children }) => <div>{children}</div>,
-    Title: () => 'Title'
+    StoreTitle: () => 'Title'
 }));
 jest.mock('../../Main', () => 'Main');
 
diff --git a/packages/venia-ui/lib/components/App/app.js b/packages/venia-ui/lib/components/App/app.js
index 36c46f2887..2b95d7198a 100644
--- a/packages/venia-ui/lib/components/App/app.js
+++ b/packages/venia-ui/lib/components/App/app.js
@@ -6,7 +6,7 @@ import { useToasts } from '@magento/peregrine';
 import { useApp } from '@magento/peregrine/lib/talons/App/useApp';
 
 import globalCSS from '../../index.css';
-import { HeadProvider, Title } from '../Head';
+import { HeadProvider, StoreTitle } from '../Head';
 import Main from '../Main';
 import Mask from '../Mask';
 import Routes from '../Routes';
@@ -93,7 +93,7 @@ const App = props => {
     if (renderError) {
         return (
             <HeadProvider>
-                <Title>{STORE_NAME}</Title>
+                <StoreTitle />
                 <Main isMasked={true} />
                 <Mask isActive={true} />
                 <ToastContainer />
@@ -103,7 +103,7 @@ const App = props => {
 
     return (
         <HeadProvider>
-            <Title>{STORE_NAME}</Title>
+            <StoreTitle />
             <Main isMasked={hasOverlay}>
                 <Routes />
             </Main>
diff --git a/packages/venia-ui/lib/components/CartPage/__tests__/__snapshots__/cartPage.spec.js.snap b/packages/venia-ui/lib/components/CartPage/__tests__/__snapshots__/cartPage.spec.js.snap
index a8bcf80aa8..ecad953c2e 100644
--- a/packages/venia-ui/lib/components/CartPage/__tests__/__snapshots__/cartPage.spec.js.snap
+++ b/packages/venia-ui/lib/components/CartPage/__tests__/__snapshots__/cartPage.spec.js.snap
@@ -84,6 +84,7 @@ exports[`renders components if cart has items 1`] = `
 <div
   className="root"
 >
+  Title
   <div
     className="heading_container"
   >
@@ -137,6 +138,7 @@ exports[`renders empty cart text (no adjustments, list or summary) if cart is em
 <div
   className="root"
 >
+  Title
   <div
     className="heading_container"
   >
diff --git a/packages/venia-ui/lib/components/CartPage/__tests__/cartPage.spec.js b/packages/venia-ui/lib/components/CartPage/__tests__/cartPage.spec.js
index dacc1c0885..89d57e92be 100644
--- a/packages/venia-ui/lib/components/CartPage/__tests__/cartPage.spec.js
+++ b/packages/venia-ui/lib/components/CartPage/__tests__/cartPage.spec.js
@@ -4,7 +4,10 @@ import { createTestInstance } from '@magento/peregrine';
 import { useCartPage } from '@magento/peregrine/lib/talons/CartPage/useCartPage';
 
 import CartPage from '../cartPage';
-import { HeadProvider } from '../../Head';
+
+jest.mock('../../../components/Head', () => ({
+    StoreTitle: () => 'Title'
+}));
 
 jest.mock('../../../classify');
 jest.mock('../../StockStatusMessage', () => 'StockStatusMessage');
@@ -55,11 +58,7 @@ test('renders a loading indicator when talon indicates', () => {
     useCartPage.mockReturnValueOnce(myTalonProps);
 
     // Act.
-    const instance = createTestInstance(
-        <HeadProvider>
-            <CartPage />
-        </HeadProvider>
-    );
+    const instance = createTestInstance(<CartPage />);
 
     // Assert.
     expect(instance.toJSON()).toMatchSnapshot();
@@ -70,16 +69,9 @@ test('renders empty cart text (no adjustments, list or summary) if cart is empty
     useCartPage.mockReturnValueOnce(talonProps);
 
     // Act.
-    const instance = createTestInstance(
-        <HeadProvider>
-            <CartPage />
-        </HeadProvider>
-    );
+    const instance = createTestInstance(<CartPage />);
 
     // Assert.
-    expect(document.getElementsByTagName('title')[0].innerHTML).toBe(
-        'Cart - Venia'
-    );
     expect(instance.toJSON()).toMatchSnapshot();
 });
 
@@ -92,15 +84,8 @@ test('renders components if cart has items', () => {
     useCartPage.mockReturnValueOnce(myTalonProps);
 
     // Act.
-    const instance = createTestInstance(
-        <HeadProvider>
-            <CartPage />
-        </HeadProvider>
-    );
+    const instance = createTestInstance(<CartPage />);
 
     // Assert.
-    expect(document.getElementsByTagName('title')[0].innerHTML).toBe(
-        'Cart - Venia'
-    );
     expect(instance.toJSON()).toMatchSnapshot();
 });
diff --git a/packages/venia-ui/lib/components/CartPage/cartPage.js b/packages/venia-ui/lib/components/CartPage/cartPage.js
index bf1f268915..650a8a3a55 100644
--- a/packages/venia-ui/lib/components/CartPage/cartPage.js
+++ b/packages/venia-ui/lib/components/CartPage/cartPage.js
@@ -3,7 +3,7 @@ import { FormattedMessage, useIntl } from 'react-intl';
 import { useCartPage } from '@magento/peregrine/lib/talons/CartPage/useCartPage';
 
 import { mergeClasses } from '../../classify';
-import { Title } from '../Head';
+import { StoreTitle } from '../Head';
 import { fullPageLoadingIndicator } from '../LoadingIndicator';
 import StockStatusMessage from '../StockStatusMessage';
 import PriceAdjustments from './PriceAdjustments';
@@ -71,15 +71,12 @@ const CartPage = props => {
 
     return (
         <div className={classes.root}>
-            <Title>
-                {formatMessage(
-                    {
-                        id: 'cartPage.title',
-                        defaultMessage: 'Cart'
-                    },
-                    { name: STORE_NAME }
-                )}
-            </Title>
+            <StoreTitle>
+                {formatMessage({
+                    id: 'cartPage.title',
+                    defaultMessage: 'Cart'
+                })}
+            </StoreTitle>
             <div className={classes.heading_container}>
                 <h1 className={classes.heading}>
                     <FormattedMessage
diff --git a/packages/venia-ui/lib/components/CheckoutPage/OrderConfirmationPage/__tests__/orderConfirmationPage.spec.js b/packages/venia-ui/lib/components/CheckoutPage/OrderConfirmationPage/__tests__/orderConfirmationPage.spec.js
index 606dcbbe11..f2e725fb2a 100644
--- a/packages/venia-ui/lib/components/CheckoutPage/OrderConfirmationPage/__tests__/orderConfirmationPage.spec.js
+++ b/packages/venia-ui/lib/components/CheckoutPage/OrderConfirmationPage/__tests__/orderConfirmationPage.spec.js
@@ -23,7 +23,7 @@ jest.mock(
         };
     }
 );
-jest.mock('../../../../components/Head', () => ({ Title: () => 'Title' }));
+jest.mock('../../../../components/Head', () => ({ StoreTitle: () => 'Title' }));
 jest.mock('../createAccount', () => 'CreateAccount');
 jest.mock('../../ItemsReview', () => 'ItemsReview');
 
diff --git a/packages/venia-ui/lib/components/CheckoutPage/OrderConfirmationPage/orderConfirmationPage.js b/packages/venia-ui/lib/components/CheckoutPage/OrderConfirmationPage/orderConfirmationPage.js
index f505e92e7c..852843d24c 100644
--- a/packages/venia-ui/lib/components/CheckoutPage/OrderConfirmationPage/orderConfirmationPage.js
+++ b/packages/venia-ui/lib/components/CheckoutPage/OrderConfirmationPage/orderConfirmationPage.js
@@ -4,7 +4,7 @@ import { object, shape, string } from 'prop-types';
 import { useOrderConfirmationPage } from '@magento/peregrine/lib/talons/CheckoutPage/OrderConfirmationPage/useOrderConfirmationPage';
 
 import { mergeClasses } from '../../../classify';
-import { Title } from '../../../components/Head';
+import { StoreTitle } from '../../../components/Head';
 import CreateAccount from './createAccount';
 import ItemsReview from '../ItemsReview';
 import defaultClasses from './orderConfirmationPage.css';
@@ -61,15 +61,12 @@ const OrderConfirmationPage = props => {
 
     return (
         <div className={classes.root}>
-            <Title>
-                {formatMessage(
-                    {
-                        id: 'checkoutPage.titleReceipt',
-                        defaultMessage: 'Receipt'
-                    },
-                    { name: STORE_NAME }
-                )}
-            </Title>
+            <StoreTitle>
+                {formatMessage({
+                    id: 'checkoutPage.titleReceipt',
+                    defaultMessage: 'Receipt'
+                })}
+            </StoreTitle>
             <div className={classes.mainContainer}>
                 <h2 className={classes.heading}>
                     <FormattedMessage
diff --git a/packages/venia-ui/lib/components/CheckoutPage/__tests__/checkoutPage.spec.js b/packages/venia-ui/lib/components/CheckoutPage/__tests__/checkoutPage.spec.js
index fc0b7c8f0b..ed62362892 100644
--- a/packages/venia-ui/lib/components/CheckoutPage/__tests__/checkoutPage.spec.js
+++ b/packages/venia-ui/lib/components/CheckoutPage/__tests__/checkoutPage.spec.js
@@ -36,7 +36,7 @@ jest.mock('@magento/peregrine/lib/talons/CheckoutPage/useCheckoutPage', () => {
 
 jest.mock('../../../classify');
 
-jest.mock('../../../components/Head', () => ({ Title: () => 'Title' }));
+jest.mock('../../../components/Head', () => ({ StoreTitle: () => 'Title' }));
 jest.mock('../../FormError', () => 'FormError');
 jest.mock('../../StockStatusMessage', () => 'StockStatusMessage');
 jest.mock('../ItemsReview', () => 'ItemsReview');
diff --git a/packages/venia-ui/lib/components/CheckoutPage/checkoutPage.js b/packages/venia-ui/lib/components/CheckoutPage/checkoutPage.js
index f79566247a..5932af88cc 100644
--- a/packages/venia-ui/lib/components/CheckoutPage/checkoutPage.js
+++ b/packages/venia-ui/lib/components/CheckoutPage/checkoutPage.js
@@ -11,7 +11,7 @@ import {
 
 import { mergeClasses } from '../../classify';
 import Button from '../Button';
-import { Title } from '../Head';
+import { StoreTitle } from '../Head';
 import Icon from '../Icon';
 import { fullPageLoadingIndicator } from '../LoadingIndicator';
 import StockStatusMessage from '../StockStatusMessage';
@@ -365,15 +365,12 @@ const CheckoutPage = props => {
 
     return (
         <div className={classes.root}>
-            <Title>
-                {formatMessage(
-                    {
-                        id: 'checkoutPage.titleCheckout',
-                        defaultMessage: 'Checkout'
-                    },
-                    { name: STORE_NAME }
-                )}
-            </Title>
+            <StoreTitle>
+                {formatMessage({
+                    id: 'checkoutPage.titleCheckout',
+                    defaultMessage: 'Checkout'
+                })}
+            </StoreTitle>
             {checkoutContent}
             {addressBookElement}
             {signInElement}
diff --git a/packages/venia-ui/lib/components/CommunicationsPage/__tests__/communicationsPage.spec.js b/packages/venia-ui/lib/components/CommunicationsPage/__tests__/communicationsPage.spec.js
index 17509e701d..0ab5f60e9d 100644
--- a/packages/venia-ui/lib/components/CommunicationsPage/__tests__/communicationsPage.spec.js
+++ b/packages/venia-ui/lib/components/CommunicationsPage/__tests__/communicationsPage.spec.js
@@ -32,7 +32,7 @@ jest.mock('@magento/peregrine', () => {
     };
 });
 
-jest.mock('../../Head', () => ({ Title: () => 'Communications' }));
+jest.mock('../../Head', () => ({ StoreTitle: () => 'Communications' }));
 
 jest.mock('@magento/venia-drivers', () => ({
     Redirect: props => <mock-Redirect {...props} />
diff --git a/packages/venia-ui/lib/components/CommunicationsPage/communicationsPage.js b/packages/venia-ui/lib/components/CommunicationsPage/communicationsPage.js
index 7c7c3b1b44..364ef75f97 100644
--- a/packages/venia-ui/lib/components/CommunicationsPage/communicationsPage.js
+++ b/packages/venia-ui/lib/components/CommunicationsPage/communicationsPage.js
@@ -10,7 +10,7 @@ import Button from '../Button';
 import Checkbox from '../Checkbox';
 import Field from '../Field';
 import FormError from '../FormError';
-import { Title } from '../Head';
+import { StoreTitle } from '../Head';
 import { fullPageLoadingIndicator } from '../LoadingIndicator';
 import defaultClasses from './communicationsPage.css';
 
@@ -48,17 +48,14 @@ const CommunicationsPage = props => {
     if (!initialValues) {
         return fullPageLoadingIndicator;
     }
-    const title = formatMessage(
-        {
-            id: 'communicationsPage.title',
-            defaultMessage: 'Communications - {name}'
-        },
-        { name: STORE_NAME }
-    );
+    const title = formatMessage({
+        id: 'communicationsPage.title',
+        defaultMessage: 'Communications'
+    });
 
     return (
         <div className={classes.root}>
-            <Title>{title}</Title>
+            <StoreTitle>{title}</StoreTitle>
             <h1 className={classes.title}>
                 <FormattedMessage
                     id={'communicationsPage.communicationsText'}
diff --git a/packages/venia-ui/lib/components/Head/index.js b/packages/venia-ui/lib/components/Head/index.js
index 33b2cb12a9..31a1c83335 100644
--- a/packages/venia-ui/lib/components/Head/index.js
+++ b/packages/venia-ui/lib/components/Head/index.js
@@ -1,4 +1,5 @@
-import React from 'react';
+import React, { useMemo } from 'react';
+import { useQuery, gql } from '@apollo/client';
 export { default as HeadProvider } from './headProvider';
 import { Helmet } from 'react-helmet-async';
 Helmet.defaultProps.defer = false;
@@ -38,3 +39,37 @@ export const Title = props => {
         </Helmet>
     );
 };
+
+const STORE_NAME_QUERY = gql`
+    query getStoreName {
+        storeConfig {
+            id
+            store_name
+        }
+    }
+`;
+
+export const StoreTitle = props => {
+    const { children, ...tagProps } = props;
+
+    const { data: storeNameData } = useQuery(STORE_NAME_QUERY);
+
+    const storeName = useMemo(() => {
+        return storeNameData
+            ? storeNameData.storeConfig.store_name
+            : STORE_NAME;
+    }, [storeNameData]);
+
+    let titleText;
+    if (children) {
+        titleText = `${children} - ${storeName}`;
+    } else {
+        titleText = storeName;
+    }
+
+    return (
+        <Helmet>
+            <title {...tagProps}>{titleText}</title>
+        </Helmet>
+    );
+};
diff --git a/packages/venia-ui/lib/components/MyAccount/ResetPassword/__tests__/__snapshots__/resetPassword.spec.js.snap b/packages/venia-ui/lib/components/MyAccount/ResetPassword/__tests__/__snapshots__/resetPassword.spec.js.snap
index 3e246c8f4c..6b574fe05a 100644
--- a/packages/venia-ui/lib/components/MyAccount/ResetPassword/__tests__/__snapshots__/resetPassword.spec.js.snap
+++ b/packages/venia-ui/lib/components/MyAccount/ResetPassword/__tests__/__snapshots__/resetPassword.spec.js.snap
@@ -2,9 +2,9 @@
 
 exports[`should render error message if token is falsy 1`] = `
 <div>
-  <mock-Title>
-    Reset Password - Venia
-  </mock-Title>
+  <mock-StoreTitle>
+    Reset Password
+  </mock-StoreTitle>
   <h1>
     Reset Password
   </h1>
@@ -21,9 +21,9 @@ exports[`should render error message if token is falsy 1`] = `
 
 exports[`should render formErrors 1`] = `
 <div>
-  <mock-Title>
-    Reset Password - Venia
-  </mock-Title>
+  <mock-StoreTitle>
+    Reset Password
+  </mock-StoreTitle>
   <h1>
     Reset Password
   </h1>
@@ -138,9 +138,9 @@ exports[`should render formErrors 1`] = `
 
 exports[`should render properly 1`] = `
 <div>
-  <mock-Title>
-    Reset Password - Venia
-  </mock-Title>
+  <mock-StoreTitle>
+    Reset Password
+  </mock-StoreTitle>
   <h1>
     Reset Password
   </h1>
@@ -255,9 +255,9 @@ exports[`should render properly 1`] = `
 
 exports[`should render success message if hasCompleted is true 1`] = `
 <div>
-  <mock-Title>
-    Reset Password - Venia
-  </mock-Title>
+  <mock-StoreTitle>
+    Reset Password
+  </mock-StoreTitle>
   <h1>
     Reset Password
   </h1>
diff --git a/packages/venia-ui/lib/components/MyAccount/ResetPassword/__tests__/resetPassword.spec.js b/packages/venia-ui/lib/components/MyAccount/ResetPassword/__tests__/resetPassword.spec.js
index d2b168de82..5007b1996b 100644
--- a/packages/venia-ui/lib/components/MyAccount/ResetPassword/__tests__/resetPassword.spec.js
+++ b/packages/venia-ui/lib/components/MyAccount/ResetPassword/__tests__/resetPassword.spec.js
@@ -20,7 +20,7 @@ jest.mock('@magento/peregrine/lib/talons/MyAccount/useResetPassword', () => ({
 }));
 
 jest.mock('../../../Head', () => ({
-    Title: props => <mock-Title {...props} />
+    StoreTitle: props => <mock-StoreTitle {...props} />
 }));
 
 test('should render properly', () => {
diff --git a/packages/venia-ui/lib/components/MyAccount/ResetPassword/resetPassword.js b/packages/venia-ui/lib/components/MyAccount/ResetPassword/resetPassword.js
index 0a9f5e41e0..647bc5bfc9 100644
--- a/packages/venia-ui/lib/components/MyAccount/ResetPassword/resetPassword.js
+++ b/packages/venia-ui/lib/components/MyAccount/ResetPassword/resetPassword.js
@@ -11,7 +11,7 @@ import { isRequired } from '../../../util/formValidators';
 import Button from '../../Button';
 import Field from '../../Field';
 import FormErrors from '../../FormError';
-import { Title } from '../../Head';
+import { StoreTitle } from '../../Head';
 import Password from '../../Password';
 import TextInput from '../../TextInput';
 import defaultClasses from './resetPassword.css';
@@ -115,12 +115,9 @@ const ResetPassword = props => {
         </Form>
     );
 
-    // STORE_NAME is injected by Webpack at build time.
-    const title = `${PAGE_TITLE} - ${STORE_NAME}`;
-
     return (
         <div className={classes.root}>
-            <Title>{title}</Title>
+            <StoreTitle>{PAGE_TITLE}</StoreTitle>
             <h1 className={classes.heading}>{PAGE_TITLE}</h1>
             {token ? recoverPassword : tokenMissing}
         </div>
diff --git a/packages/venia-ui/lib/components/OrderHistoryPage/__tests__/orderHistoryPage.spec.js b/packages/venia-ui/lib/components/OrderHistoryPage/__tests__/orderHistoryPage.spec.js
index 251d6396a6..551cbe2bb5 100644
--- a/packages/venia-ui/lib/components/OrderHistoryPage/__tests__/orderHistoryPage.spec.js
+++ b/packages/venia-ui/lib/components/OrderHistoryPage/__tests__/orderHistoryPage.spec.js
@@ -50,7 +50,7 @@ jest.mock('@magento/peregrine/lib/Toasts', () => ({
 }));
 
 jest.mock('../../../classify');
-jest.mock('../../Head', () => ({ Title: () => 'Title' }));
+jest.mock('../../Head', () => ({ StoreTitle: () => 'Title' }));
 jest.mock('../orderRow', () => 'OrderRow');
 
 const talonProps = {
diff --git a/packages/venia-ui/lib/components/OrderHistoryPage/orderHistoryPage.js b/packages/venia-ui/lib/components/OrderHistoryPage/orderHistoryPage.js
index b7b024d1f1..65b68cab35 100644
--- a/packages/venia-ui/lib/components/OrderHistoryPage/orderHistoryPage.js
+++ b/packages/venia-ui/lib/components/OrderHistoryPage/orderHistoryPage.js
@@ -14,9 +14,9 @@ import { useOrderHistoryPage } from '@magento/peregrine/lib/talons/OrderHistoryP
 
 import { mergeClasses } from '../../classify';
 import Button from '../Button';
-import { Title } from '../Head';
 import Icon from '../Icon';
 import LoadingIndicator from '../LoadingIndicator';
+import { StoreTitle } from '../Head';
 import TextInput from '../TextInput';
 
 import defaultClasses from './orderHistoryPage.css';
@@ -101,9 +101,6 @@ const OrderHistoryPage = props => {
         searchText
     ]);
 
-    // STORE_NAME is injected by Webpack at build time.
-    const title = `${PAGE_TITLE} - ${STORE_NAME}`;
-
     const resetButtonElement = searchText ? (
         <ResetButton onReset={handleReset} />
     ) : null;
@@ -155,7 +152,7 @@ const OrderHistoryPage = props => {
     return (
         <OrderHistoryContextProvider>
             <div className={classes.root}>
-                <Title>{title}</Title>
+                <StoreTitle>{PAGE_TITLE}</StoreTitle>
                 <h1 className={classes.heading}>{PAGE_TITLE}</h1>
                 <div className={classes.filterRow}>
                     <span className={classes.pageInfo}>{pageInfoLabel}</span>
diff --git a/packages/venia-ui/lib/components/SavedPaymentsPage/__tests__/savedPaymentsPage.spec.js b/packages/venia-ui/lib/components/SavedPaymentsPage/__tests__/savedPaymentsPage.spec.js
index dff14ad0a9..1adfd9a521 100644
--- a/packages/venia-ui/lib/components/SavedPaymentsPage/__tests__/savedPaymentsPage.spec.js
+++ b/packages/venia-ui/lib/components/SavedPaymentsPage/__tests__/savedPaymentsPage.spec.js
@@ -6,7 +6,7 @@ import SavedPaymentsPage from '../savedPaymentsPage';
 
 jest.mock('@magento/venia-ui/lib/classify');
 
-jest.mock('../../Head', () => ({ Title: () => 'Title' }));
+jest.mock('../../Head', () => ({ StoreTitle: () => 'Title' }));
 jest.mock(
     '@magento/peregrine/lib/talons/SavedPaymentsPage/useSavedPaymentsPage',
     () => {
diff --git a/packages/venia-ui/lib/components/SavedPaymentsPage/savedPaymentsPage.js b/packages/venia-ui/lib/components/SavedPaymentsPage/savedPaymentsPage.js
index 9e3b8a989a..844189f84a 100644
--- a/packages/venia-ui/lib/components/SavedPaymentsPage/savedPaymentsPage.js
+++ b/packages/venia-ui/lib/components/SavedPaymentsPage/savedPaymentsPage.js
@@ -4,7 +4,7 @@ import { useIntl } from 'react-intl';
 import { useSavedPaymentsPage } from '@magento/peregrine/lib/talons/SavedPaymentsPage/useSavedPaymentsPage';
 import { mergeClasses } from '@magento/venia-ui/lib/classify';
 
-import { Title } from '../Head';
+import { StoreTitle } from '../Head';
 import PaymentCard from './paymentCard';
 import { fullPageLoadingIndicator } from '../LoadingIndicator';
 
@@ -54,7 +54,7 @@ const SavedPaymentsPage = props => {
 
     return (
         <div className={classes.root}>
-            <Title>{title}</Title>
+            <StoreTitle>{title}</StoreTitle>
             <h1 className={classes.heading}>{title}</h1>
             <div className={classes.content}>{savedPaymentElements}</div>
             <div className={classes.noPayments}>{noSavedPayments}</div>
diff --git a/pwa-devdocs/src/tutorials/pwa-studio-fundamentals/modify-site-footer/index.md b/pwa-devdocs/src/tutorials/pwa-studio-fundamentals/modify-site-footer/index.md
index fd89533052..3dba47f472 100644
--- a/pwa-devdocs/src/tutorials/pwa-studio-fundamentals/modify-site-footer/index.md
+++ b/pwa-devdocs/src/tutorials/pwa-studio-fundamentals/modify-site-footer/index.md
@@ -61,7 +61,7 @@ Main imports and renders the Footer component, and App imports and renders the M
 Static imported components, such as Header, Footer, and side Navigation, have render chains that begin in **App**, but content that is specific to a route have render chains that begin at a **Root Component**.
 
 Root components are dynamically loaded components associated with a Magento page type or route.
-A list of Venia's root components can be found in the [RootComponent][] directory in the PWA Studio project. 
+A list of Venia's root components can be found in the [RootComponent][] directory in the PWA Studio project.
 
 ## Create component directories
 
@@ -197,8 +197,8 @@ Update the relative imports in `src/components/App/app.js`.
 Skip updating the Main import statement to use your project's copy of the Main component.
 
 ```diff
-- import { HeadProvider, Title } from '../Head';
-+ import { HeadProvider, Title } from '@magento/venia-ui/lib/components/Head';
+- import { HeadProvider, StoreTitle } from '../Head';
++ import { HeadProvider, StoreTitle } from '@magento/venia-ui/lib/components/Head';
   import Main from '../Main';
 - import Mask from '../Mask';
 - import MiniCart from '../MiniCart';