v3.7.0 (retail-react-app@4.0.0 and commerce-sdk-react@3.0.0)

@salesforce/commerce-sdk-react@3.0.0

• Add meta.displayName to queries. It can be used to identify queries in performance metrics or logs. #1895
• Upgrade to commerce-sdk-isomorphic v3.0.0 #1914

⚠️ Planned API Changes ⚠️

Shopper Context

Starting July 31st 2024, all endpoints in the Shopper context API will require the siteId parameter for new customers. This field is marked as optional for backward compatibility and will be changed to mandatory tentatively by January 2025. You can read more about the planned change here in the notes section.

Shopper Login (SLAS)

SLAS will soon require new tenants to pass channel_id as an argument for retrieving guest access tokens. You can read more about the planned change here.

Please be aware that existing tenants are on a temporary allow list and will see no immediate disruption to service. We do ask that all users seek to adhere to the channel_id requirement before the end of August to enhance your security posture before the holiday peak season.

In practice, we recommend:

• For customers using the SLAS helpers with a private client, it is recommended to upgrade to v3.0.0 of the commerce-sdk-react.

@salesforce/pwa-kit-create-app@3.7.0

• Update default Node.js version to v20. #1867

@salesforce/pwa-kit-react-sdk@3.7.0

• Add beforeHydrate option to withReactQuery component #1912
• Add server side rendering performance metrics via query parameter __server_timing or environment variable SERVER_TIMING, the metrics is available in the console logs and response header server-timing. #1895

@salesforce/retail-react-app@4.0.0

New Features

• Support product bundles #1916
• Add Store Locator #1922

Bug Fixes

• Update serialized query data via beforeHydrate to prevent data re-fetching on load #1912
• Out of stock and low stock items are removed from cart and checkout as unavailable products #1881
• Fix infinity sign price on product tile #1903
• Remove unecessary params from product search #1873

Accessibility Improvements

• Improve accessibility readout for strikethrough price on shipping options in checkout page #1892
• Ensure credit card informational tooltip on checkout page persists after the user is no longer hovering over it #1890
• A11y: Add aria-label to the address form based on the address type #1904
• A11y: Account Nav fixes #1884
• A11y: Replace <p> tags with header tag in home page Features section #1902
• Add aria-label for Checkout's action buttons #1906
• Avoid forced focus changes that are not user-initiated #1940

v2.8.4

What's Changed

• Google Search Console fix createCodeVerifier #1765
• Fix StorefrontPreview component add siteId query parameter to shopper context calls #1876

Full Changelog: v2.8.3...v2.8.4

---

⚠️ Planned API Changes ⚠️

Shopper Context

Starting July 31st 2024, all endpoints in the Shopper context API will require the siteId parameter for new customers. This field is marked as optional for backward compatibility and will be changed to mandatory tentatively by January 2025. You can read more about the planned change here in the notes section.

Shopper Login (SLAS)

SLAS will soon require new tenants to pass channel_id as an argument for retrieving guest access tokens. You can read more about the planned change here.

Please be aware that existing tenants are on a temporary allow list and will see no immediate disruption to service. We do ask that all users seek to adhere to the channel_id requirement before the end of August to enhance your security posture before the holiday peak season.

Summary of Changes for PWA Kit v2

To comply with the planned API changes effective July 31st, 2024, you need to update your PWA Kit v2 projects. These changes involve adding the channel_id parameter for Shopper Login and optionally scoping your local storage keys and cookie names with the siteId prefix if your site uses multisite.

1. Update auth.js to Include channel_id in Calls to Shopper Login

Add the channel_id parameter in the appropriate functions for obtaining tokens.

Example Changes:

// In the Auth class, add channel_id to the data in _loginAsGuest method
channel_id: this._config.parameters.siteId

// In the refreshToken method, add channel_id to the data
data.append('channel_id', this._config.parameters.siteId)

2. Scope Local Storage Keys and Cookie Names per Site for Multisite Projects

For customers using multiple site IDs, it is recommended to scope your local storage keys and cookie names per site to avoid conflicts. This ensures that tokens from different sites (e.g., RefArch and RefArchGlobal) are not incorrectly used across sites.

Example Changes:

// Add siteId parameter in LocalStorage and CookieStorage constructors
constructor(siteId, ...args) {
    super(args)
    if (typeof window === 'undefined') {
        throw new Error('LocalStorage is not available in the current environment.')
    }
    this.siteId = siteId
}

// Create storage key with siteId prefix
createStorageKey(key) {
    return `${this.siteId}_${key}`
}

// Set item in local storage with siteId prefix
set(key, value) {
    window.localStorage.setItem(this.createStorageKey(key), value)
}

// Get item from local storage with siteId prefix
get(key) {
    return window.localStorage.getItem(this.createStorageKey(key))
}

// Delete item from local storage with siteId prefix
delete(key) {
    window.localStorage.removeItem(this.createStorageKey(key))
}

// Similar changes for CookieStorage

Important Note:

Implementing the siteId prefix for local storage keys and cookie names will effectively log out any existing customer sessions on the site. This includes registered logins and baskets for all users.

Recommendation:

• Established sites that do not need this change should avoid implementing it to prevent logging out existing users.
• If a project decides to implement this change, be aware that the PWA will now look for tokens under a different cookie name, causing all existing users to be logged out.

Full example of the changes in the auth.js file: 949b8b3...534dab2

v3.6.0 (commerce-sdk-react@2.0.2 and retail-react-app@3.0.2)

@salesforce/commerce-sdk-react@2.0.2

---

• Fix StorefrontPreview component add siteId query parameter to shopper context calls #1891

@salesforce/retail-react-app@3.0.2

---

• Update dependency @salesforce/commerce-sdk-react@2.0.2

v3.6.0 (commerce-sdk-react@2.0.1 and retail-react-app@3.0.1)

@salesforce/commerce-sdk-react@2.0.1

---

• Fix private slas proxy config for commerce api in provider #1883
• Fix useCustomQuery error handling #1883
• Fix updateCustomer squashing existing data #1883
• Fix transferBasket updating the wrong customer basket #1887

@salesforce/retail-react-app@3.0.1

---

• Fix basket transfer during checkout login #1887

v3.6.0 (retail-react-app@3.0.0 and commerce-sdk-react@2.0.0)

@salesforce/pwa-kit-runtime@3.6.0

• Add logger to print logs generated by PWA Kit packages #1822
• Memoize getConfig on the server-side #1800
• Added the x-correlation-id response header, which is set to the MRT correlation ID. This enhances traceability by including the correlation ID from the request in the response. #1787
• Keep API Gateway headers in proxied requests #1772
• Hide x-sfdc-access-control header #1805

@salesforce/pwa-kit-create-app@3.6.0

• Fix: 'Cannot use import statement outside a module' error in generated extensible project unit tests #1821

@salesforce/retail-react-app@3.0.0

Improvements

• Product Tile Revamp
  • Display different pricing for various products on Product tiles and PDP #1760
  • Display pricing for cart, checkout and wishlist page #1796
  • Shows promotional callout message on Product List and Product Detail pages #1786 #1804
  • Display selectable swatch groups for attributes like color #1773
  • Show badges #1791
• Lazy basket creation #1677
• Use stale-while-revalidate cache control directive #1744

Accessibility Improvements

• Added live region support to components #1825
• Replace p tag with heading tags in cart page #1818
• Fix product tile img alt text #1769
• Add aria-hidden to search icon #1809
• Add explicit headers to cart modal #1811
• Add autocomplete to text input fields #1840
• Add error icon to error messages #1839

Performance Improvements

• Make navigation components lazy load their categories #1656 #1673

Bug Fixes

• Fix seo component not settings keywords meta tag #1762
• Fix RecommendedProducts' toggling of the favourite icon #1861

@salesforce/commerce-sdk-react@2.0.0

• Add useCustomQuery and useCustomMutation for SCAPI custom endpoint support #1793
• Add Shopper Stores hooks #1788
• Add a helper method to add an item to either new or existing basket #1677
• Add updateItemsInBasket mutation #1852
• Upgrade to commerce-sdk-isomorphic v2.1.0 #1852

Full Changelog: v3.5.1...v3.6.0

v2.8.3

What's Changed

• Fix env conflicts by @wjhsf in #1531
• V2/update babel traverse by @alexvuong in #1562
• [v2] Your Experience With PWA Kit - Fall 2023 by @wjhsf in #1542
• @W-14544940@ Release v2.8.2 by @joeluong-sfcc in #1590
• Add deprecation notice to v2 pwa-kit-create-app by @wjhsf in #1575
• Security patch for v2 by @kevinxh in #1737
• [Storefront Preview] SCAPI cache breaker for older v2 PWA Kit (@W-15214446@) by @vmarta in #1740
• Release PWA Kit 2.8.3 by @vmarta in #1741

Full Changelog: v2.8.1...v2.8.3

v3.5.1 (retail-react-app@2.4.2 and commerce-sdk-react@1.4.2)

@salesforce/commerce-sdk-react@1.4.2

---

• Update SLAS private proxy path #1752

@salesforce/pwa-kit-runtime@3.5.1

---

• Update SLAS private proxy path #1752

@salesforce/retail-react-app@2.4.2

---

• Update dependency @salesforce/commerce-sdk-react@1.4.2

v3.5.0 (retail-react-app@2.4.0 and commerce-sdk-react@1.4.0)

@salesforce/commerce-sdk-react@1.4.0

---

• Add Support for SLAS private flow #1722
• Fix invalid query params warnings and allow custom query #1655
• Fix cannot read properties of undefined (reading 'unshift') #1689
• Add Shopper SEO hook #1688
• Update useLocalStorage implementation to be more responsive #1703
• Storefront Preview: avoid stale cached Commerce API responses, whenever the Shopper Context is set #1701

@salesforce/pwa-kit-create-app@3.5.0

---

• Add Support for SLAS private flow #1722

@salesforce/pwa-kit-dev@3.5.0

---

• Add Support for SLAS private flow #1722

@salesforce/retail-react-app@2.4.0

---

New Feature

• Add Support for SLAS private flow #1722

Bug Fixes

• Fix promo codes not being properly applied in cart #1692
• Fix checkout shipping method fetching #1693
• Fix invalid query params warnings #1655
• Fix internal server error on account pages #1675
• Fix product-item component imports to ensure that it is overridable. #1672
• Fix locale selector navigating back to default locale #1670
• Fix handling of offline products on Cart, Checkout, Order History, and Wishlist pages #1691
• Fix tracking of viewSearch event for Einstein analytics, in the case of no-search-results #1702
• Remove invalid header _sfdc_customer_id due to recent MRT HTTP3 upgrade #1731

v3.4.0 (retail-react-app@2.3.0 and commerce-sdk-react@1.3.0)

@salesforce/commerce-sdk-react@1.3.0

---

• Add support for node 20 #1612
• Fix bug when running in an iframe #1629

@salesforce/pwa-kit-create-app@3.4.0

---

• Add support for node 20 #1612
• Fix bug when running in an iframe #1629

@salesforce/pwa-kit-dev@3.4.0

---

• Add support for node 20 #1612
• Generate SSR source map with environment variable #1571

@salesforce/pwa-kit-react-sdk@3.4.0

---

• Add support for node 20 #1612

@salesforce/pwa-kit-runtime@3.4.0

---

• Add support for node 20 #1612

@salesforce/retail-react-app@2.3.0

---

Accessibility improvements

• Add correct keyboard interaction behavior for variation attribute radio buttons #1587
• Change radio refinements (for example, filtering by Price) from radio inputs to styled buttons #1605
• Update search refinements ARIA labels to include "add/remove filter" #1607
• Improve focus behavior on my account pages, address forms, and promo codes #1625

Bug Fixes

• Fix checkout allowing you to proceed to review with invalid billing address #1632
• Fix password change functionality #1634

Other features

• Add local development support for node 20 #1612
• Display selected refinements on PLP, even if the selected refinement has no hits #1622
• Added option to specify isLoginPage function to the withRegistration component. The default behavior is "all pages ending in /login". #1572

v3.3.0 (retail-react-app@2.2.0 and commerce-sdk-react@1.2.0)

@salesforce/commerce-sdk-react@1.2.0

---

• Add StorefrontPreview component 'onContextChange' property to prepare for future Storefront Preview release #1527
• Update engine compatibility to include npm 10 #1597

@salesforce/pwa-kit-create-app@3.3.0

---

• Replace max-age with s-maxage to only cache shared caches #1564
• Update engine compatibility to include npm 10 #1597

@salesforce/pwa-kit-dev@3.3.0

---

• Update engine compatibility to include npm 10 #1597
• Improve pwa-kit-dev start command to accept CLI arguments for babel-node that get passed as CLI args to pwa-kit-dev start #1591
• Bugfix for TS not loading in typescript minimal project ssr.js #1591
• Add source-map-loader plugin to webpack configuration. #1535
• Only use source maps in server when inspect flag is being used. #1535

@salesforce/pwa-kit-react-sdk@3.3.0

---

• Update engine compatibility to include npm 10 #1597
• Create a flag to allow toggling behavior that treats + character between words as space in search query #1557

@salesforce/pwa-kit-runtime@3.3.0

---

• Update engine compatibility to include npm 10 #1597

@salesforce/retail-react-app@2.2.0

---

Accessibility Improvements

• Ensure the ListMenuTrigger component applies ARIA attributes to the correct element for the trigger icon #1600
• Ensure form fields and icons have accessible labels #1526
• Ensure active user interface components have sufficient contrast #1534
• Fix outline on keyboard focus #1536
• Fix improper nesting of elements in product tile #1541
• Ensure all interactive functionality is operable with the keyboard #1546
• Make security code tooltip receive keyboard focus #1551
• Improve accessibility of quantity picker #1552
• Improve keyboard accessibility of product scroller #1559
• Fix focus indicator for hero features links on homepage #1561
• Ensure color is not the sole means of communicating information #1570

Other Features

• Add Active Data files, update pages (app index.jsx, product list and product details pages) to trigger events on product category and product detail views #1555
• Replace max-age with s-maxage to only cache shared caches #1564
• Implement gift option for basket #1546
• Update extract-default-messages script to support multiple locales #1574
• Update engine compatibility to include npm 10 #1597
• Add support for localization in icon component #1609

Bug Fixes

• Remove internal linter rule that is missing in generated projects #1554
• Fix bug where you can add duplicates of the same item to the wishlist. Also fixes bug where skeleton appears when removing last item from the wishlist. #1560
• Replace max-age with s-maxage to only cache shared caches #1564
• Fix PLP filters for mobile #1565