W-15040197: lazy basket creation

[alexvuong]

Description

Current: today the PWA Kit calls SCAPI endpoints to create a basket on session start. This has two consequences:

• An extra API that may/may not be helpful, this takes up more network bandwidth. A user may not interact with the baskets until they add an item to basket
• In hybrid sites create the possibility of a condition between cart instantiation and retrieval between SFRA and PWA Kit

This PR added a helper function in commerce-sdk-react useShopperBasketsMutationHelper that returns a map of helpers. Currently, it has addItemToNewOrExistingBasket that is responsible for managing the process of adding an item to a basket.

If a basket already exists, add the item to the basket immediately.
If a basket does not exist, create a new basket using the createBasket mutation
and then add the item to the newly created basket using the addItemToBasket mutation.
addAnItemToCart is the only mutation that needs to be aware of basket creation. The other mutations (e.g removeItem or updateItem or the rest) are actions that always come after addAnItemToCart has been called.

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

• add a helper in commerce react
• product detail and wishlist page in retail app

How to Test-Drive This PR

• Check out code
• npm ci
• Start the retail app
• Delete your localstrage and cookie
• Confirm that when the app boosts up, basket creation is not called until and an item is added to cart on PDP or on wishlist page

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)

[vcua-mobify]

Verified the changes are working as expected after fixing an issue with the proxy configuration (see #1678)

When I load the page, I see a request to fetch baskets and the total returned is 0, which shows that no basket was created. I also see that basket creation occurs on add to cart

Approving