#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/useCategoryContent.js

@@ -68,10 +68,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 +77,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 ",
@@ -96,8 +96,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",
@@ -107,7 +107,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/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/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/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/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 EditModal from './editModal';
 import defaultClasses from './accountInformationPage.css';
@@ -119,15 +119,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/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/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 Navigation from '../Navigation';
@@ -92,7 +92,7 @@ const App = props => {
     if (renderError) {
         return (
             <HeadProvider>
-                <Title>{STORE_NAME}</Title>
+                <StoreTitle />
                 <Main isMasked={true} />
                 <Mask isActive={true} />
                 <ToastContainer />
@@ -102,7 +102,7 @@ const App = props => {
 
     return (
         <HeadProvider>
-            <Title>{STORE_NAME}</Title>
+            <StoreTitle />
             <Main isMasked={hasOverlay}>
                 <Routes />
             </Main>

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

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

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';
@@ -334,15 +334,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}