Backport Bug Fixes to 1.5.x Branch (#474)

bendvc · web-flow · commit 9fd7850b4b5f · 2022-03-31T12:36:25.000-07:00
* Port bug fixes
diff --git a/lerna.json b/lerna.json
@@ -3,7 +3,7 @@
   "packages": [
     "packages/*"
   ],
-  "version": "1.5.0",
+  "version": "1.5.1-alpha.0",
   "publish": {
     "allowBranch": [
       "master"
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mobify-platform-sdks",
-  "version": "1.5.0",
+  "version": "1.5.1-alpha.0",
   "engines": {
     "node": "^12.0.0 || ^14.0.0",
     "npm": "^6.14.4 || ^7.0.0 || ^8.0.0"
diff --git a/packages/hello-world/package-lock.json b/packages/hello-world/package-lock.json
diff --git a/packages/hello-world/package.json b/packages/hello-world/package.json
@@ -1,6 +1,6 @@
 {
     "name": "hello-world",
-    "version": "1.5.0",
+    "version": "1.5.1-alpha.0",
     "license": "See license in LICENSE",
     "private": true,
     "dependencies": {
@@ -21,7 +21,7 @@
         "eslint-plugin-prettier": "3.0.1",
         "eslint-plugin-react": "7.24.0",
         "prettier": "1.18.2",
-        "pwa-kit-react-sdk": "^1.5.0"
+        "pwa-kit-react-sdk": "^1.5.1-alpha.0"
     },
     "scripts": {
         "format": "prettier --write \"**/*.{js,jsx}\"",
diff --git a/packages/pwa-kit-create-app/CHANGELOG.md b/packages/pwa-kit-create-app/CHANGELOG.md
@@ -1,4 +1,7 @@
-## v1.5.0-dev (Jan 28, 2022)
+## v1.5.1-alpha.0 (Mar 31, 2022)
+-   Fix incorrect site related values when generating without use of a preset [#470](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/470)
+
+## v1.5.0 (Jan 28, 2022)
 -   Fix project generation on Windows when using WSL [#385](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/385)
 
 ## v1.4.0 (Jan 27, 2022)
diff --git a/packages/pwa-kit-create-app/assets/pwa/default.js b/packages/pwa-kit-create-app/assets/pwa/default.js
@@ -17,7 +17,7 @@ module.exports = {
             // showDefaults: true
         },
         // The default site for your app. This value will be used when a siteRef could not be determined from the url
-        defaultSite: 'RefArch',
+        defaultSite: '${commerceApi.siteId}',
         // Provide aliases for your sites. These will be used in place of your site id when generating paths throughout the application.
         // siteAliases: {
         //     RefArch: 'us'
@@ -64,7 +64,7 @@ module.exports = {
         ssrFunctionNodeVersion: '14.x',
         proxyConfigs: [
             {
-                host: 'kv7kzm78.api.commercecloud.salesforce.com',
+                host: '${commerceApi.shortCode}.api.commercecloud.salesforce.com',
                 path: 'api'
             },
             {
diff --git a/packages/pwa-kit-create-app/assets/pwa/sites.js b/packages/pwa-kit-create-app/assets/pwa/sites.js
@@ -4,11 +4,13 @@
  * 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
  */
-exports.template = () => `// Provide the sites for your app. Each site includes site id, and its localization configuration.
+exports.template = (
+    answers
+) => `// Provide the sites for your app. Each site includes site id, and its localization configuration.
 // You can also provide aliases for your locale. They will be used in place of your locale id when generating paths across the app
 module.exports = [
     {
-        id: 'RefArch',
+        id: '${answers['commerce-api'].siteId}',
         l10n: {
             supportedCurrencies: ['USD'],
             defaultCurrency: 'USD',
diff --git a/packages/pwa-kit-create-app/package-lock.json b/packages/pwa-kit-create-app/package-lock.json
diff --git a/packages/pwa-kit-create-app/package.json b/packages/pwa-kit-create-app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "pwa-kit-create-app",
-  "version": "1.5.0",
+  "version": "1.5.1-alpha.0",
   "description": "Salesforce's project generator tool",
   "author": "dev@mobify.com",
   "license": "See license in LICENSE",
diff --git a/packages/pwa-kit-create-app/scripts/create-mobify-app.js b/packages/pwa-kit-create-app/scripts/create-mobify-app.js
@@ -186,7 +186,7 @@ const runGenerator = (answers, {outputDir}) => {
         p.resolve(outputDir, 'config', 'default.js')
     )
 
-    new sh.ShellString(PWAKitSitesTemplate()).to(p.resolve(outputDir, 'config', 'sites.js'))
+    new sh.ShellString(PWAKitSitesTemplate(answers)).to(p.resolve(outputDir, 'config', 'sites.js'))
 
     npmInstall(outputDir)
 }
diff --git a/packages/pwa-kit-react-sdk/CHANGELOG.md b/packages/pwa-kit-react-sdk/CHANGELOG.md
@@ -1,6 +1,4 @@
-## v1.5.0 (Mar 17, 2022)
-## v1.5.0-alpha.1 (Mar 17, 2022)
-## v1.5.0-alpha.0 (Mar 17, 2022)
+## v1.5.1-alpha.0 (Mar 31, 2022)
 ## v1.5.0-dev (Jan 28, 2022)
 
 -   Add boolean flag `enableLegacyBodyParser` to `createApp` options. [#446](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/446)
diff --git a/packages/pwa-kit-react-sdk/package-lock.json b/packages/pwa-kit-react-sdk/package-lock.json
diff --git a/packages/pwa-kit-react-sdk/package.json b/packages/pwa-kit-react-sdk/package.json
@@ -1,6 +1,6 @@
 {
   "name": "pwa-kit-react-sdk",
-  "version": "1.5.0",
+  "version": "1.5.1-alpha.0",
   "description": "A library that supports the isomorphic React rendering pipeline for Commerce Cloud Managed Runtime apps",
   "main": "dist/index.js",
   "bin": {
diff --git a/packages/pwa/README.md b/packages/pwa/README.md
@@ -1,5 +1,3 @@
-<img alt="logo" src="react-retail-app.png" />
-
 # The Retail React App
 
 The Retail React App is an isomorphic JavaScript storefront and [Progressive Web App](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps) built using [React](https://reactjs.org/) and [Express](https://expressjs.com/). It uses a modern headless architecture that enables developers to decouple front-end code from back-end systems. It leverages popular open-source libraries in the React ecosystem, such as [Chakra UI](https://chakra-ui.com/) components, [Emotion](https://emotion.sh/docs/introduction) (CSS-in-JS), [Webpack](https://webpack.js.org/), and many more.
@@ -29,9 +27,39 @@ Now that the development server is running, you can open a browser and preview y
 
 See the [Localization README.md](./app/translations/README.md) for important setup instructions for localization.
 
-## URL Customization
+## Retail Project Configurations
+
+The Retail React App's configuration is located within the `app/config` folder, and more specifically the `default.js` file. Within this file you can make changes to how your application runs on the Managed Runtime via your SSR options like `ssrParameters`, `pageNotFoundURL`, etc. Similarly you can make changes to how your Retail React App works by changing the configuration options under the `app` key. Some of those options are your Commerce API and Einstein API connection strings, your URL settings, and site and site alias configurations.
+
+The sites supported by your application are defined in a file called `config/sites.js`. Here, you can synchronize the sites supported by your Retail App and those defined in your Business Manager backend. 
+
+The configuration features include:
+
+1. Using `.js`, `.yml`, `.yaml`, or `.json` to define your configuration. 
+3. Chose whether locale and site options are available in the URL query parameters, sub-path, or not appear at all.
+4. Optionally assign aliases to locale ID and site ID. 
+5. Manage multiple business manager sites that are hosted in the same domain.
+6. Manage multiple business manager sites based on multiple domains that can be deployed to different Managed Runtime environments.
+
+### Dedicated Configuration Files
+
+At project generation a single `default` configuration is created. For most cases a single configuration file will get the job done. But there are times where you want to have a different configuration for a different environment. These environments for example could be, a developers local machine, a remote `production` environment, or a remote `staging` environment. In all these cases you want to use a different configuration for each. 
+
+When multiple configurations are present, which configuration file to used is resolved in the following way: 
+
+1. Check to see if there is a config file named after your remote Managed Runtime environment and use this if one is present.
+2. If we are running on a developer machine, look for a `local` configuration and use this if one is present.
+3. Load the `default` config file `config/default.js`.
+
+This allows you do these but not limited to things:
+
+- Each developer can have their own configuration, connection to their own Commerce API sandboxes.
+- Deploy a single codebase application to multiple environments with their own specific configurations (Multiple B2C Site with Different Domains).
+
+
+### Customize URLs
 
-You can customize how storefront URLs are formatted in your application's configuration file.
+You can customize how storefront URLs are formatted in `config/default.js`. The Retail React App allows you to configure site or locale references (ids or aliases) to be in the path or a query parameter. You can also not have them in the URL altogether. 
 
 ```js
 // config/default.js
@@ -49,76 +77,82 @@ You can choose how the current locale appears (or doesn’t appear) in the URL b
 - `query_param`: Locale is included as a query parameter. Example: `/women/dress?locale=en-US`
 - `none`: Locale isn’t included in the URL. Example: `/women/dress`
 
-`url.showDefaults`: This boolean value dictates whether the default site or locale values are shown in the url. Defaults to: false
+`url.showDefaults`: This boolean value dictates whether the default site or locale values are shown in the url. Defaults to: false. 
 
 By default, a new project is configured to not include the locale and site in the URL path.
 
-## Multi-site configuration
+### Manage Multiple B2C Commerce Sites with Same Domain
 
-By default, the Retail React App is configured to a single locale, single site project.
-However, it can be extended to run multiple sites in one single code base. 
+By default, the Retail App is configured to a single locale, single site project. However, it can be extended to run multiple sites in one single code base. 
 
-Follow these steps to set up your project to support multi-site, multi-locale 
-1. Set your url config
-- Customize your site and locale in the url 
-- Set your url `showDefault` to true if you want to keep your default values in the url
-2. Provide the sites for your app. Each site includes site id, and its localization configuration.
-   You can also provide an alias for your locale that will be used in place of your locale id when generating paths across the app.
-3. [Optional] Provide aliases for your sites. These will be used in place of your site id when generating paths throughout the application.
-If no alias is defined for a site, the id will be used to generate paths across application. 
-
-   *Note*: URLs constructed using canonical site and locale ids are still valid URLs even when aliases are used.   
+The `sites.js` file contains definition of the sites that you have configured in Business Manager. The following example shows configuration for `RefArch` and `RefArchGlobal` sites:
 
 ```js
-module.exports = {
-    url: {
-        locale: 'path',
-        site: 'path',
-        showDefaults: true
-    },
-    siteAliases: {
-        'site-1': 'uk',
-        'site-2': 'us'
+\\ /config/sites.js
+
+module.exports = [
+    {
+        id: 'RefArch',
+        l10n: {
+            supportedCurrencies: ['USD'],
+            defaultCurrency: 'USD',
+            defaultLocale: 'en-US',
+            supportedLocales: [
+                {
+                    id: 'en-US',
+                    alias: 'us',
+                    preferredCurrency: 'USD'
+                },
+                {
+                    id: 'en-CA',
+                    preferredCurrency: 'USD'
+                }
+            ]
+        }
     },
-    defaultSite: 'site-1',
-    sites: [
-        {
-            id: 'site-1',
-            l10n: {
-                defaultLocale: 'en-GB',
-                supportedLocales: [
-                    {
-                        id: 'en-GB',
-                        preferredCurrency: 'GBP'
-                    },
-                    {
-                        id: 'fr-FR',
-                        alias: 'fr',
-                        preferredCurrency: 'EUR'
-                    }
-                ]
-            }
-        },
-        {
-            id: 'site-2',
-            l10n: {
-                defaultLocale: 'en-US',
-                supportedLocales: [
-                    {
-                        id: 'en-US',
-                        preferredCurrency: 'USD'
-                    },
-                    {
-                        id: 'en-CA',
-                        preferredCurrency: 'USD'
-                    }
-                ]
-            }
+    {
+        id: 'RefArchGlobal',
+        l10n: {
+            supportedCurrencies: ['GBP', 'EUR', 'JPY'],
+            defaultCurrency: 'GBP',
+            supportedLocales: [
+                {
+                    id: 'de-DE',
+                    alias: 'de',
+                    preferredCurrency: 'EUR'
+                },
+                {
+                    id: 'en-GB',
+                    preferredCurrency: 'GBP'
+                },
+                {
+                    id: 'ja-JP',
+                    preferredCurrency: 'JPY'
+                }
+            ],
+            defaultLocale: 'en-GB'
         }
-    ]
-}
+    }
+]
 ```
 
+Optionally, You can then map the site IDs with aliases in `/config/default.js` file and also set default site. If no alias is defined for the site, then IDs are used in URLs. 
+
+```
+\\ /config/default.js
+   
+   defaultSite: 'RefArchGlobal',
+   siteAliases: {
+       RefArch: 'us',
+       RefArchGlobal: 'global',
+       NTOManaged: 'nto'
+   },
+```
+
+If you set `url.showDefault` to `true` in `/config/default.js` file, then default locale and site are set in the URL of your Retail app. In addition to site alias, you can also configure aliases for your locale in `sites.js` file. If you configured alias, URL will reflect that instead of your locale ID. 
+
+> *Note*: URLs constructed using canonical site and locale ids are still valid URLs even when aliases are used.   
+
 ## Documentation
 
 The full documentation for PWA Kit is hosted on the [Salesforce Developers](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/overview) portal.
@@ -130,4 +164,4 @@ The full documentation for PWA Kit is hosted on the [Salesforce Developers](http
 -   [Configuration Options](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/configuration-options.html)
 -   [Pushing and Deploying Bundles](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/pushing-and-deploying-bundles.html)
 -   [The Retail React App](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/retail-react-app.html)
--   [Proxying Requests](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/proxying-requests.html)
+-   [Proxying Requests](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/proxying-requests.html)
diff --git a/packages/pwa/app/api.config.js b/packages/pwa/app/api.config.js
diff --git a/packages/pwa/package-lock.json b/packages/pwa/package-lock.json
diff --git a/packages/pwa/package.json b/packages/pwa/package.json
@@ -1,6 +1,6 @@
 {
     "name": "scaffold-pwa",
-    "version": "1.5.0",
+    "version": "1.5.1-alpha.0",
     "license": "See license in LICENSE",
     "private": true,
     "engines": {
@@ -93,7 +93,7 @@
         "node-fetch": "^2.6.7",
         "nodemon": "^2.0.12",
         "prettier": "1.18.2",
-        "pwa-kit-react-sdk": "^1.5.0",
+        "pwa-kit-react-sdk": "^1.5.1-alpha.0",
         "raf": "^3.4.0",
         "raw-loader": "0.5.1",
         "regenerator-runtime": "^0.11.1",

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "mobify-platform-sdks",`
`3`		`- "version": "1.5.0",`
	`3`	`+ "version": "1.5.1-alpha.0",`
`4`	`4`	`"engines": {`
`5`	`5`	`"node": "^12.0.0 \|\| ^14.0.0",`
`6`	`6`	`"npm": "^6.14.4 \|\| ^7.0.0 \|\| ^8.0.0"`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "pwa-kit-create-app",`
`3`		`- "version": "1.5.0",`
	`3`	`+ "version": "1.5.1-alpha.0",`
`4`	`4`	`"description": "Salesforce's project generator tool",`
`5`	`5`	`"author": "dev@mobify.com",`
`6`	`6`	`"license": "See license in LICENSE",`