@W-18172401 Integrate getUrlMapping on server-side navigation

packages/extension-chakra-storefront/src/pages/product-detail/index.jsx

@@ -50,7 +50,7 @@ import {useHistory, useLocation, useParams} from 'react-router-dom'
 import {useToast} from '../../hooks/use-toast'
 import {useWishList} from '../../hooks/use-wish-list'
 
-const ProductDetail = () => {
+const ProductDetail = (props) => {
     const {formatMessage} = useIntl()
     const history = useHistory()
     const location = useLocation()
@@ -75,7 +75,10 @@ const ProductDetail = () => {
     }
 
     /*************************** Product Detail and Category ********************/
-    const {productId} = useParams()
+    let {productId} = useParams()
+    if (props.productId) {
+        productId = props.productId
+    }
     const urlParams = new URLSearchParams(location.search)
     const {
         data: product,

packages/extension-chakra-storefront/src/pages/product-list/index.jsx

@@ -128,8 +128,9 @@ const ProductList = (props) => {
     let searchQuery = urlParams.get('q')
     const isSearch = !!searchQuery
 
-    if (params.categoryId) {
-        searchParams._refine.push(`cgid=${params.categoryId}`)
+    const categoryId = props?.categoryId || params?.categoryId
+    if (categoryId) {
+        searchParams._refine.push(`cgid=${categoryId}`)
     }
 
     /**************** Mutation Actions ****************/
@@ -167,11 +168,11 @@ const ProductList = (props) => {
     const {error, data: category} = useCategory(
         {
             parameters: {
-                id: params.categoryId
+                id: categoryId
             }
         },
         {
-            enabled: !isSearch && !!params.categoryId
+            enabled: !isSearch && !!categoryId
         }
     )
 

packages/extension-seo-url-mapping/.eslintrc.js

@@ -0,0 +1,10 @@
+/*
+ * Copyright (c) 2021, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+
+module.exports = {
+    extends: [require.resolve('@salesforce/pwa-kit-dev/configs/eslint')]
+}

packages/extension-seo-url-mapping/.npmignore

@@ -0,0 +1 @@
+dev/

packages/extension-seo-url-mapping/.prettierignore

@@ -0,0 +1,5 @@
+coverage
+dist
+generator-assets
+docs
+vendor

packages/extension-seo-url-mapping/.prettierrc.yaml

@@ -0,0 +1,7 @@
+printWidth: 100
+singleQuote: true
+semi: false
+bracketSpacing: false
+tabWidth: 4
+arrowParens: 'always'
+trailingComma: 'none'

packages/extension-seo-url-mapping/README.md

@@ -0,0 +1,108 @@
+:loudspeaker: Hey there, Salesforce Commerce Cloud community!
+
+We’re excited to hear your thoughts on your developer experience with PWA Kit and the Composable Storefront generally! Your feedback is incredibly valuable in helping us guide our roadmap and improve our offering.
+
+:clipboard: Take our quick survey here: [Survey](https://forms.gle/bUZNxQ3QKUcrjhV18) 
+
+Feel free to share this survey link with your colleagues, partners, or anyone who has experience with PWA Kit. Your input will help us shape the future of our development tools.
+
+Thank you for being a part of our community and for your continuous support! :raised_hands:
+
+# Description
+
+This is a sample PWA-Kit Application Extension. The purpose of this application extensions is to show how
+the Application Extensions API can be used to enhance your PWA-Kit base project.
+
+# Folder Structure
+
+This directory contains the PWA Kit Application Extension base files and structure. It includes the following files:
+```
+├── src
+│   ├── setup-server.ts
+│   └── setup-client.ts
+└── dev
+```
+
+1. `src/setup-server.ts`: The server-side setup function for the extension.
+2. `src/setup-client.ts`: The client-side setup function for the extension.
+3. `dev/`: PWA Kit App TypeScript template project used for developing the generated PWA Kit App Extension.
+
+# Peer Dependencies
+
+PWA-Kit Application Extensions are NPM packages at their most simplest form, and as such you can define
+what peer dependencies are required when using it. Because this sample application extension provides
+UI via a new "Sample" page, it requires that the below dependencies are installed at a minimum. 
+
+Depending on what features your application extensions provides it's recommended you include any third-party
+packages as peer dependencies so that your base application doesn't end up having multiple versions of a 
+given package.
+
+"react": "^18.2.0",
+"react-dom": "^18.2.0"
+
+# Configuration
+
+This section is optional and will depend on your application extensions implementation. If you have features
+that are configurable, then list those configurations here so that the PWA-Kit project implementor can configure
+the extension as they like. 
+
+```
+{
+    path: '/sample-page'
+}
+```
+
+# Installation
+
+```
+> npm install @salesforce/extension-starter<br/>
+> Downloading npm package... <br/>
+> Installing extension... <br/>
+> Finished. <br/>
+> Congratulations! The Sample extension was successfully installed! Please visit https://www.npmjs.com/package/@salesforce/extension-starter for more information on how to use this extension.
+```
+
+# State Management
+
+By default all extensions are enhanced with state management using the `withApplicationExtensionStore` higher-order component. Under the hood
+the state is provided using [Zustand](https://www.npmjs.com/package/zustand) as a global store for the entire PWA-Kit application. 
+Each Application Extension inserts a "slice" into this global store following the 
+[slicing pattern](https://github.com/pmndrs/zustand/blob/37e1e3f193a5e5dec6fbd0f07514aec59a187e01/docs/guides/slices-pattern.md). 
+This allows you to have data separation from one extension to the other, but also allows you to access state and associated actions of other extensions when needed. 
+
+You can access the state of other extensions via the global store. Below is an example of why you might want to access state and actions from another extensions. In the following snippet we use the global store to access actions from the store locator. You can then use these actions as you please.
+
+This is how you would do something like this.
+
+```
+// /base-project/app/components/my-component.jsx
+import {useApplicationExtensionsStore} from '@salesforce/pwa-kit-extension-sdk/react'
+
+export MyComponent = () => {
+    // Zustand V5 requires stable selector outputs. E.g. Do NOT return a new reference in your selectors return value. This will
+    // cause infinite re-renders.
+    const defaultState = {}
+
+    // Grab the slice of the extension state for "extension-a"
+    const {toggleMapsModal} = useApplicationExtensionsStore(
+        (state) =>
+            state.state['@salesforce/extension-store-locator'] || defaultState
+    )
+
+    return (
+        <div>
+            <button onClick={() => toggleMapsModal()}/>
+        </div>
+    )
+}
+```
+
+# Advanced Usage
+
+As an application extension developer you are responsible for documenting how your extension works including basic usage, its configuration, and advanced customization via overrides. Use this section to explain how your extension can use overrides to accomplish this. Make should to include what files are overridable as well as their expected inputs and outputs.
+
+## Overridable Files
+
+```
+/src/path/to/overridable/files.ts
+```

packages/extension-seo-url-mapping/config/README.md

@@ -0,0 +1,89 @@
+# Extension Configuration 🧩
+
+In most cases it's beneficial to make your application extension configurable. This will allow your extension to meet the needs of different PWA-Kit developers whom have varying requirements. This can be as simple as configuring the url path to the page your extension adds, to more complex scenarios like configuring layouts to those same pages.
+
+
+## `Sample` vs `Default` Configurations
+
+This folder is home to two configuration files, `default.json` and `sample.json`. Both of which have their type define in the `src/types/config` file. But these files are used differently. Below is a summary of how each file is used.
+
+### `default.json`
+
+This configuration is used during the project generation as well as the extensions loading phase when running your PWA-Kit application. 
+
+During your PWA-Kit project generation, you can select which extensions are configured for your app. This ultimately leads to your applications configuration being setup with the extensions selected during the project questionnaire phase. For example, if you were to choose to use `@salesforce/extension-chakra-storefront` in your PWA-Kit app, then you might see something along the lines of this in your app config, where `<user_defined_configuration>` is initially set to the contents of the `default.json` file:
+
+```
+app: {
+    extensions: [
+        ['@salesforce/extension-chakra-storefront', <user_defined_configuration>]
+    ]
+}
+```
+
+Additionally, during the PWA-Kit application execution the default configuration is merged with the user define configuration to ensure that all configuration key have a value. This means that you do not have to worry about scattering default values in your extensions code, whether it's in a React component or the setup files. 
+
+It's worth noting that if your configuration file is expected to have values supplied by the PWA-Kit application developer, you can use placeholder values that will prompt the developer to replace them with real world values. Below is an example default config file with a placeholder:
+
+```
+{
+    "enabled": true,
+    "activeDataEnabled": false,
+    "categoryNav": {
+        "defaultNavSsrDepth": 1,
+        "defaultRootCategory": "root"
+    },
+    "commerceAPI": {
+        "proxyPath": "/mobify/proxy/api",
+        "parameters": {
+            "clientId": "<CLIENT_ID>",
+            "organizationId": "<ORGANIZATION_ID>",
+            "shortCode": "<SHORT_CODE>",
+            "siteId": "<SITE_ID>"
+        }
+    },
+    ...
+}
+```
+
+### `sample.json`
+
+This configuration is similar in many ways to the one above, with the primary difference being that you cannot use placeholder values in it. The configuration is expected to have all its properties defined with valid values.
+
+This configuration file is used internally by the PWA-Kit create-app application whenever a project is generated using a preset. This allows us to create E2E tests on our CI environment where we know that a project generated can be run without further modification to the configuration file.
+
+We also recommend that you reference this configuration file from your extensions root README so that developers know what a valid configuration looks like.
+
+## How to use your extension configuration?
+
+Your extensions configuration can be used in different ways depending on the context in which you want to use it. Your configuration will primarily be used in two places, your React components and your extension setup files. 
+
+### Setup Files
+
+The exported extension classes in `setup-app.ts` and `setup-server.ts` are extended from the `ApplicationExtension` class. This class provide a method called `getConfig` which returns the configuration your extension was instantiated with. you can use this method to grab the configuration and use it however you want. 
+
+Please refer to the `src/setup-app.ts` file to see a sample of how it's being used in the `extendRoutes` implementation.
+
+### React Components
+
+Every application extension generated will have a convenience hook scaffolded for you located at `src/hooks/use-extension-config`. You can use this hook in any pages, components, or other hooks that you add to your extension. Below is an example component that uses this hook:
+
+```
+// src/components/sample-component.tsx
+import React from 'react'
+import {useExtensionConfig} from '../hooks/use-extension-config'
+
+export const Sample = (): JSX.Element => {
+    const {path} = useExtensionConfig()
+
+    return (
+        <span>{path}<span/>
+    )
+}
+
+export default Sample
+```
+
+### Other Contexts
+
+If you plan on using the extension configuration in other contexts such as utility files, we recommend that you use dependency injection whenever possible. Passing in the configuration to these utilities will not only be a simple solution, but it will also make testing these utilities easier if you choose to do that.

packages/extension-seo-url-mapping/config/default.json

@@ -0,0 +1,17 @@
+{
+    "enabled": true,
+    "resourceTypeToComponentMap": {
+        "category": "ProductList",
+        "product": "ProductDetail",
+        "content_asset": "ProductList"
+    },
+    "commerceAPI": {
+        "proxyPath": "/mobify/proxy/api",
+        "parameters": {
+            "clientId": "c9c45bfd-0ed3-4aa2-9971-40f88962b836",
+            "organizationId": "f_ecom_zzrf_001",
+            "shortCode": "8o7m175y",
+            "siteId": "RefArchGlobal"
+        }
+    }
+}

packages/extension-seo-url-mapping/extension-meta.json

@@ -0,0 +1,3 @@
+{
+    "id": "@salesforce/extension-seo-url-mapping"
+}