Store locator extension integration @@W-17273365@@

[kevinxh]

Description

This PR adds the integration between extension-chakra-storefront and extension-chakra-store-locator.

The storefront extension now detects the existence of the store locator extension, if installed and enabled, it will conditionally render the store locator button in the header, and use the store locator's store to control the modal's open/close state.

Types of Changes

• Bug fix (non-breaking change that fixes an issue)
• New feature (non-breaking change that adds functionality)
• Documentation update
• Breaking change (could cause existing functionality to not work as expected)
• Other changes (non-breaking changes that does not fit any of the above)

Breaking changes include:

• Removing a public function or component or prop
• Adding a required argument to a function
• Changing the data type of a function parameter or return value
• Adding a new peer dependency to package.json

Changes

• added zustand store in store-locator extension
• conditionally render the store locator icon
• hook up action to open/close the modal

How to Test-Drive This PR

• The testing config is already added in this PR (will be removed before merge)
• go to packages/template-typescript-minimal
• npm start
• notice the header has the icon
• disable the storelocator extension and the icon should be gone.

Checklists

General

• Changes are covered by test cases
• CHANGELOG.md updated with a short description of changes (not required for documentation updates)

Accessibility Compliance

You must check off all items in one of the follow two lists:

• There are no changes to UI

or...

• Changes were tested with a Screen Reader (iOS VoiceOver or Android Talkback) and had no issues
• Changes comply with WCAG 2.0 guidelines levels A and AA
• Changes to common UI patterns and interactions comply with WAI-ARIA best practices

Localization

• Changes include a UI text update in the Retail React App (which requires translation)

[kevinxh]

I will remove changes in this file before merge.

[alexvuong]

Checked the code locally. I noticed when I am on store-locator page, the modal is still working, meaning there is two store locators on a same page

if I click Find in the modal, the data will show up both places. If I close the modal, the data is reset on both modal and the pages. The UX is a bit confusing in that case. Should we prevent the modal to open if it is on a store-locator? 🤔

Screen.Recording.2025-01-28.at.2.29.18.PM.mov

[adamraya]

I followed the steps to test the change and after disabling the store locator in package.json and running npm start I see this error:

Error Status:
CorrelationId: 0913c4a7-e736-4ec8-bdd1-e2a10bfcfb10
Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
    at checkForNestedUpdates (http://localhost:3000/mobify/bundle/development/vendor.js:73278:319)
    at scheduleUpdateOnFiber (http://localhost:3000/mobify/bundle/development/vendor.js:72848:160)
    at forceStoreRerender (http://localhost:3000/mobify/bundle/development/vendor.js:71385:350)
    at updateStoreInstance (http://localhost:3000/mobify/bundle/development/vendor.js:71381:1)
    at commitHookEffectListMount (http://localhost:3000/mobify/bundle/development/vendor.js:72526:112)
    at commitPassiveMountOnFiber (http://localhost:3000/mobify/bundle/development/vendor.js:72739:1455)
    at commitPassiveMountEffects_complete (http://localhost:3000/mobify/bundle/development/vendor.js:72739:869)
    at commitPassiveMountEffects_begin (http://localhost:3000/mobify/bundle/development/vendor.js:72739:570)
    at commitPassiveMountEffects (http://localhost:3000/mobify/bundle/development/vendor.js:72739:196)
    at flushPassiveEffectsImpl (http://localhost:3000/mobify/bundle/development/vendor.js:73236:402)
Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

package.json config with the store locator disabled:

...
      [
          "@salesforce/extension-chakra-store-locator",
          {
            "enabled": false,
            "path": "/store-locator",
            "radius": 100,
            "radiusUnit": "km",
            "defaultPageSize": 10,
            "defaultPostalCode": "10178",
            "defaultCountry": "Germany",
            "defaultCountryCode": "DE",
            "supportedCountries": [
              {
                "countryCode": "US",
                "countryName": "United States"
              },
              {
                "countryCode": "DE",
                "countryName": "Germany"
              }
            ]
          }
        ]
...

[kevinxh]

I followed the steps to test the change and after disabling the store locator in package.json and running npm start I see this error:

Error Status:
CorrelationId: 0913c4a7-e736-4ec8-bdd1-e2a10bfcfb10
Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
    at checkForNestedUpdates (http://localhost:3000/mobify/bundle/development/vendor.js:73278:319)
    at scheduleUpdateOnFiber (http://localhost:3000/mobify/bundle/development/vendor.js:72848:160)
    at forceStoreRerender (http://localhost:3000/mobify/bundle/development/vendor.js:71385:350)
    at updateStoreInstance (http://localhost:3000/mobify/bundle/development/vendor.js:71381:1)
    at commitHookEffectListMount (http://localhost:3000/mobify/bundle/development/vendor.js:72526:112)
    at commitPassiveMountOnFiber (http://localhost:3000/mobify/bundle/development/vendor.js:72739:1455)
    at commitPassiveMountEffects_complete (http://localhost:3000/mobify/bundle/development/vendor.js:72739:869)
    at commitPassiveMountEffects_begin (http://localhost:3000/mobify/bundle/development/vendor.js:72739:570)
    at commitPassiveMountEffects (http://localhost:3000/mobify/bundle/development/vendor.js:72739:196)
    at flushPassiveEffectsImpl (http://localhost:3000/mobify/bundle/development/vendor.js:73236:402)
Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

package.json config with the store locator disabled:

...
      [
          "@salesforce/extension-chakra-store-locator",
          {
            "enabled": false,
            "path": "/store-locator",
            "radius": 100,
            "radiusUnit": "km",
            "defaultPageSize": 10,
            "defaultPostalCode": "10178",
            "defaultCountry": "Germany",
            "defaultCountryCode": "DE",
            "supportedCountries": [
              {
                "countryCode": "US",
                "countryName": "United States"
              },
              {
                "countryCode": "DE",
                "countryName": "Germany"
              }
            ]
          }
        ]
...

We discussed it IRL and it is a bug found in the SDK, I've created a ticket to address the bug.

[alexvuong]

would it throw if storeLocatorExtension is undefined?
p/s nvm. Saw the conditional rendering above.