bigcommerce / storefront-data-hooks

Hooks for React Storefront UI Components
MIT License
166 stars 36 forks source link

Customer Group wise discount not available #37

Closed ahmadsyed closed 3 years ago

ahmadsyed commented 3 years ago

I am using this, in a boilerplate with nextJs commerce. I am trying to show the original(strikethrough) and discounted price both on the product page based on the customer groups. This feature is working fine at the bigcommerce provided storefront but in vercel nextJs commerce storefront, I can only see one price. Am I missing anything here? Is this feature is not available? is there any way to achieve the same?

jorgemasta commented 3 years ago

in the current implementation you receive:

If you set a sale in bigcommerce, you will have that value in salePrice and price since the price is the current price (with the sale applied). In GraphQL we also have basePrice which is what you are probably looking for.

It's looks a very common request so we will include in next releases. Meanwhile you use your own query.

ahmadsyed commented 3 years ago

Hi, @jorgemasta Thanks for the reply. It looks you are talking about the prices that we set at the product level like the below image.

Screenshot 2021-03-02 at 7 31 19 PM

what I am doing is, I have created 2 customer groups(retail, wholesale), and assigned customers to them. Now I have set different store-wide discounts for those groups(10%,20% etc), so all the customers will see prices as per their group.

Screenshot 2021-03-02 at 7 31 57 PM

Now if we look at the stencil storefront, we will see different prices(discounted) for different customer groups and normal prices for all other customers, this same behavior I need in nextJs storefront also. here I am getting the same prices for customers even he is assigned to the wholesale group.

Hope I made myself clear. Any help/guidance would be much appreciated.

ahmadsyed commented 3 years ago

Hi, @jorgemasta To fix it I have taken an approach, that's probably not the best approach but will do the trick. In search.tsx file,

export async function getStaticProps({ preview, locale, }: GetStaticPropsContext) { const config = getConfig({ locale }) const { pages } = await getAllPages({ config, preview }) const { categories, brands } = await getSiteInfo({ config, preview }) const resultPromis = await fetch(config.storeApiUrl +"/v2/customer_groups" , { headers: { 'Content-Type': 'application/json', 'X-Auth-Token': config.storeApiToken, 'X-Auth-Client': config.storeApiClientId, "Accept":"application/json" } }); const rules = await resultPromis.json(); return { props: { pages, categories, brands,rules }, } }

After this inside component, I did the calculation like below if(customer?.customerGroupId){ const customer_discount = rules.find((x: { id: number }) => x.id ==customer?.customerGroupId)?.discount_rules[0]; data?.products.forEach((product) => { if(product.node.prices){ if(customer_discount.method=='percent'){ product.node.prices.price.value = product.node.prices.price.value - (product.node.prices.price.value *customer_discount.amount/100) }else if(customer_discount.method=='price'){ product.node.prices.price.value = product.node.prices.price.value-customer_discount.amount }else if(customer_discount.method=='fixed'){ product.node.prices.price.value = parseInt(customer_discount.amount) } } }) }

If anyone thinks of any better approach please let me know. Regards

jorgemasta commented 3 years ago

Potentially resolved with version v1.3.0. Right now we return the basePrice and the price that is calculated by BigCommerce depending on the authenticated user (e.g. belongs to a discount group or not).

mattdjenkinson commented 2 years ago

Hey, I’m finding that the price sent back via graphql is never including the customer discount even when making the call with a logged in session. Does anything else need to be passed with the call to make sure BC sends back the correct price?

The correct customer discount price shows in the cart and check out. Just not on the product page.