Fixed #1919 Product price is not changing while changing configurable options

[shikhamis11]

Fixed #1919 Product price is not changing while changing configurable options

To reproduce
Steps to reproduce the behavior:

Go to pwa-studio home page
Click on category available
Click on any config product which has multiple options with different prices
4.choose the differnt options one by one

Expected behavior
The product price should change with the options

Related Issue

Closes #1919

[shikhamis11]

hi @sirugh
as per discussion over Pr #1920 . I have updated the changes with talons
Please review this thanks

[PWAStudioBot]

	Fails
🚫	Missing "Description" section. Please add it back, with detail.
🚫	Missing "Verification Steps" section. Please add it back, with detail.
🚫	A version label is required. A maintainer must add one.

	Messages
📖	Access a deployed version of this PR here. Make sure to wait for the "pwa-pull-request-deploy" job to complete.
📖	DangerCI Failures related to missing labels/description/linked issues/etc will persist until the next push or next nightly build run (assuming they are fixed).

If your PR is missing information, check against the original template here. At a minimum you must have the section headers from the template and provide some information in each section.

Generated by 🚫 dangerJS against ac1177a

[sirugh]

Thanks for updating the talon! I'd like to see the changes I requested in the file and also would you please fix the unit tests?

Once you do that this should be good to go.

Also I wasn't able to verify this through my storefront as I don't know which products have a different price for the variants but the path should be correct (and @dpatil-magento will catch anything in QA) :)

[sirugh]

I'd like to see this follow the pattern we've used in this file already of using a memo to get some value:

const productPrice = useMemo(
  () => getProductPrice(product, optionCodes, optionSelections)
)

The getProductPrice function could be another top-level utility, it would look similar to getMediaGalleryEntries:

const getProductPrice = (product, optionCodes, optionSelections) => {
  let productPrice = product.price.regularPrice.amount;
  
  if (isProductConfigurable(product)) {
    const item = findMatchingVariant({
      optionCodes,
      optionSelections,
      variants
    });

    productPrice = item.product.price.regularPrice.amount;
  }
  
  return productPrice;
}

[circlesix]

I was able to get this working with this code:

const getConfigPrice = (product, optionCodes, optionSelections) => {
    let value = [];
    const { variants } = product;
    const isConfigurable = isProductConfigurable(product);

    const optionsSelected =
        Array.from(optionSelections.values()).filter(value => !!value).length >
        0;

    if (!isConfigurable || !optionsSelected) {
        value = product.price.regularPrice.amount.value;
    } else {
        const item = findMatchingVariant({
            optionCodes,
            optionSelections,
            variants
        });
        value = item
            ? item.product.price.regularPrice.amount.value
            : product.price.regularPrice.amount.value;
    }

    return value;
};

and then calling it inside useProductFullDetail with:

const configPrice = useMemo(
        () => getConfigPrice(product, optionCodes, optionSelections),
        [product, optionCodes, optionSelections]
    );

I'm sure there is some optimization that needs to happen there, but it's working right now.

[sirugh]

Nice! that may be the right way to do it instead of my suggestion. The fallback for the optionsSelected is important. If we have a configurable product but no options have been selected we should still display the default price (as we won't have a variant selected).

[sirugh]

For consistency please put this function up next to the other helper functions in this file.

[sirugh]

This can just be let value; as it will get set later. Also an array as a default seems wrong anyways.