[Extensibility ⚙️] Update feature branch from develop @@W-18023320@@ WIP

[bendvc]

Description

⚠️ Warning: Very large merge ahead! ⚠️

What is this PR

A lot of progress for features has been made in the retail react application template in develop. Unfortunately all these changes were not made in the context of Application Extensibility. That means that since we had created the storefront extension a long time ago it diverged from the template.

Some notable changes that we missed are DNT, Social Login and a hand full of other changes like accessibility work.

In this PR we take the content of develop and re-create the extension-chakra-storefront to insure that all the changes are carried over, and thus, going forward we will remove the template project from the extensibility branch, and any change that is made to develop template-retail-react-app that change will have to be made to the extension as well.

Methodology

To start this process I follow the below basic steps:

1. Merged develop into feature/extensibility-v2 and resolved any merge conflicts, this mainly included things like change logs and version numbers of mono repo packages.
2. Renamed the current extension-chakra-storefront to extension-chakra-storefront-old. (This allows to me keep any changes that we made to the project to make things with with extensibility, including changes to tests to make them work.) NOTE: I used git mv to do this to keep all commit history.
3. I then renamed the template-retail-react-app to be extension-chakra-storefront. I again used git mv to preserve the git history.
4. Section by section I mv'd files from the "old" extension to the "new" extension manually picking which changes were merged. When I say section by section, I really mean folder groups, like pages, then hooks, then components, then other misc.
5. Finally fixed any of the new code that would no longer work in an extension, like cleaning up imports not to use the template alias, replacing getConfig with useExtensionConfig etc
6. Finally I ran the test suite and make any changs that were required.

How to test?

Notes

1. In the process of doing this work, I re-generated the package lock files for all the projects, so you can ignore a lot of those.
2. I have not removed the store locator code from the extension yet. I'll create a follow up PR which will be smaller.
3. I also have not "configurafied" the social login work or dnt stuff. So you'll still see constants here and there when we really want to use configurations.
4. I have created follow up tickets for fixing the CI integration as well as verifying the DNT feature and the Social Login feature. So you shouldn't have to validate those features, only that extensions can be installed and work.

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

• (change1)

How to Test-Drive This PR

• As a quick smoke test..
• Install the storefront and store locator extensions into the typescript minimal project.
• Ensure you bring over all their peed dependencies and configurations.
• Start the project and ensure that the storefront and locator are working.

[kevinxh]

LGTM. Smoked tested both locally and on MRT. Storefront looks good and I'm able to complete shopper happy path.

Since this refactor is too big, I did not go over every diff.

[adamraya]

I see this error starting a generated project:

ModuleNotFoundError: Module not found: Error: Can't resolve '@salesforce/cc-datacloud-typescript' in '/Users/arayanavarro/git/v2-pwa-kit/test/node_modules/@salesforce/extension-chakra-storefront/src/hooks'
    at /Users/arayanavarro/git/v2-pwa-kit/test/node_modules/webpack/lib/Compilation.js:2123:28
    at /Users/arayanavarro/git/v2-pwa-kit/test/node_modules/webpack/lib/NormalModuleFactory.js:923:13
    at eval (eval at create (/Users/arayanavarro/git/v2-pwa-kit/test/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:10:1)
    at /Users/arayanavarro/git/v2-pwa-kit/test/node_modules/webpack/lib/NormalModuleFactory.js:339:22
    at eval (eval at create (/Users/arayanavarro/git/v2-pwa-kit/test/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:1)

[bendvc]

I see this error starting a generated project:

ModuleNotFoundError: Module not found: Error: Can't resolve '@salesforce/cc-datacloud-typescript' in '/Users/arayanavarro/git/v2-pwa-kit/test/node_modules/@salesforce/extension-chakra-storefront/src/hooks'
    at /Users/arayanavarro/git/v2-pwa-kit/test/node_modules/webpack/lib/Compilation.js:2123:28
    at /Users/arayanavarro/git/v2-pwa-kit/test/node_modules/webpack/lib/NormalModuleFactory.js:923:13
    at eval (eval at create (/Users/arayanavarro/git/v2-pwa-kit/test/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:10:1)
    at /Users/arayanavarro/git/v2-pwa-kit/test/node_modules/webpack/lib/NormalModuleFactory.js:339:22
    at eval (eval at create (/Users/arayanavarro/git/v2-pwa-kit/test/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:1)

Fixed. I updated the storefront extension to define the additional dependencies as peer deps. E.g. cc-datacloud and jose

[adamraya]

I see a few Content Security Policy errors in the browser console.

E.g.

vendor.js:281 Refused to connect to 'https://mmyw8zrxhfsg09lfmzrd1zjqmg.pc-rnd.c360a.salesforce.com/web/events/fb81edab-24c6-4b40-8684-b67334dfdf32' because it violates the following Content Security Policy directive: "connect-src api.cquotient.com 'self' https://runtime.commercecloud.com".

Did we missed merging the updated CSP?