@W-18172401 Integrate getUrlMapping on server-side navigation

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

@@ -51,7 +51,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()
@@ -77,7 +77,11 @@ 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,
@@ -632,7 +636,8 @@ ProductDetail.propTypes = {
     /**
      * The current react router match object. (Provided internally)
      */
-    match: PropTypes.object
+    match: PropTypes.object,
+    productId: PropTypes.string
 }
 
 export default ProductDetail

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

@@ -132,8 +132,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 ****************/
@@ -179,11 +180,11 @@ const ProductList = (props) => {
     const {error, data: category} = useCategory(
         {
             parameters: {
-                id: params.categoryId
+                id: categoryId
             }
         },
         {
-            enabled: !isSearch && !!params.categoryId
+            enabled: !isSearch && !!categoryId
         }
     )
 
@@ -770,7 +771,8 @@ ProductList.getTemplateName = () => 'product-list'
 ProductList.propTypes = {
     onAddToWishlistClick: PropTypes.func,
     onRemoveWishlistClick: PropTypes.func,
-    category: PropTypes.object
+    category: PropTypes.object,
+    categoryId: PropTypes.string
 }
 
 export default ProductList

packages/extension-commerce-bm-seo/.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-commerce-bm-seo/.prettierignore

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

packages/extension-commerce-bm-seo/.prettierrc.yaml

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

packages/extension-commerce-bm-seo/README.md

@@ -0,0 +1,72 @@
+# Commerce Business Manager SEO Extension
+
+A [PWA Kit](https://github.com/SalesforceCommerceCloud/pwa-kit) extension that synchronizes Business Manager-managed routes with your PWA Kit application using the [Shopper SEO URL Mapping API](https://developer.salesforce.com/docs/commerce/commerce-api/references/shopper-seo?meta=getUrlMapping). This extension provides the following capabilities:
+
+- Integrate routes managed in Business Manager with the PWA Kit
+- Integration with the SCAPI Shopper SEO URL Mapping API
+- Support for multiple resource types including products, categories, and redirects
+
+Note: Using this extension will impact performance as it requires API calls during navigation.
+
+## Installation
+
+```sh
+npm install @salesforce/extension-commerce-bm-seo
+```
+
+## Configuration
+
+The SEO extension is configured via your config file (e.g. `app/config/default.json`) or the key `mobify.app.extensions` in your `package.json`:
+
+```json
+{
+  "mobify": {
+    "app": {
+      "extensions": [
+        [
+          "@salesforce/extension-commerce-bm-seo",
+          {
+            "enabled": true,
+            "commerceAPI": {
+              "proxyPath": "/mobify/proxy/api",
+              "parameters": {
+                "shortCode": "8o7m175y",
+                "clientId": "c9c45bfd-0ed3-4aa2-9971-40f88962b836",
+                "organizationId": "f_ecom_zzrf_001",
+                "siteId": "RefArchGlobal"
+              }
+            },
+            "resourceTypeToComponentMap": {
+              "category": "ProductList",
+              "product": "ProductDetail"
+            }
+          }
+        ]
+      ]
+    }
+  }
+}
+```
+
+### Configuration Options
+
+- `commerceAPI`: Settings for connecting to the Commerce API
+  - `proxyPath`: The proxy path for API requests
+  - `parameters`: Commerce API connection parameters
+    - `clientId`: Your Commerce API client ID
+    - `organizationId`: Your organization ID
+    - `shortCode`: Your short code
+    - `siteId`: Your site ID
+- `resourceTypeToComponentMap`: Maps resource types to component names
+  - `category`: Name of component for category pages
+  - `product`: Name of component for product pages
+  - `content_asset`: Name of component for content assets
+
+## How It Works
+
+The SEO extension works by:
+
+1. Blocking navigation
+2. Querying the Shopper SEO API for URL mappings
+3. Routing to the appropriate component based on the resource type
+4. Passing relevant props to the component

packages/extension-commerce-bm-seo/babel.config.js

@@ -0,0 +1,7 @@
+/*
+ * 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 = require('@salesforce/pwa-kit-dev/configs/babel/babel-config')

packages/extension-commerce-bm-seo/config/default.json

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

packages/extension-commerce-bm-seo/extension-meta.json

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

packages/extension-commerce-bm-seo/jest.config.js

@@ -0,0 +1,27 @@
+/*
+ * Copyright (c) 2025, 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
+ */
+
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const base = require('@salesforce/pwa-kit-dev/configs/jest/jest.config.js')
+
+module.exports = {
+    ...base,
+    moduleNameMapper: {
+        ...base.moduleNameMapper,
+
+        // handle pwa-kit extensibility special import
+        '^overridable!(.*)': '$1'
+    },
+    coverageThreshold: {
+        global: {
+            branches: 87,
+            functions: 100,
+            lines: 100,
+            statements: 100
+        }
+    }
+}