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

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",

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,
 }
 `;

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
     };
 };

packages/pwa-buildpack/lib/queries/getStoreConfigData.graphql

@@ -5,5 +5,6 @@ query {
         code
         locale
         secure_base_media_url
+        store_name
     }
 }

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
 

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),

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",

packages/venia-ui/lib/RootComponents/CMS/__tests__/cms.spec.js

@@ -3,15 +3,15 @@ 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';
 
 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');
 

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}

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'
 }));
 

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');

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>

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"

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>

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} />

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'}

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',

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}

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}
   >