useDiscountAllocations React Hook is not working

[joelurraco]

Hello,

I’m trying to use the useDiscountAllocations React Hook. I expect to receive an array of the discounts that have been added to the cart in the checkout, but I’m receiving an empty array:

import { 
 useDiscountAllocations,
} from "@shopify/checkout-ui-extensions-react";

const discountAllocations = useDiscountAllocations();

The “discountAllocations” variable is an empty array, but the checkout has a discount code added:

I have a simple component that renders the value {discountAllocations.length}, and it always renders 0.

Any help will be appreciated.

[lizk]

Hi there

I was not able to reproduce this issue. The code you have provided looks correct.

If you would like me to look into this further could you provide the code for your extension in the entirety.

[joelurraco]

I could get it to do what I need by changing the hook to “useDiscountCodes”. This way I get an array of the discount codes that have been applied to the checkout.

I still don’t understand what discount allocations are.

[Hugh_trt]

I met the same issue, got an empty array by using

useDiscountAllocations()

[dominicgonzaga3]

This issue is still persistent useDiscountCodes does return a non-empty but useDiscountAllocations is always empty regardless

[anxiouspenguin]

This is returning an empty array for me as well. A fairly simple workaround for anyone struggling with this broken hook is below:

Loop each of your line-items (useCartLines), calculate the total of each line-item applied discounts (cartLine.discountAllocations), that’s your total applied discounts.

https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/cart/usecartlines