Duffel Seat component - Markup issue

[hunainkapadia]

Describe the bug When you add a markup amount to the seats component, it shows 2 prices in the pop-up. One with the markup and one without. This is happening in the duffel test env on the duffel airways flight. Offer ID orq_0000AeSeP38z2qRDUirPhQ.

Version of @duffel/components Please add:

1. 3.4.3
2. Script Tag
3. Django

Code sample to reproduce duffelAncillariesElement.render({ debug:true, offer_id: "{{ offer.id }}", client_key: "{{ flight_search.client_key }}", services: ["seats"], passengers: extras_passengers, markup: { seats: { amount: 2, // Add 2.00 to the price of each seat rate: 0, // Don't add any percentage markup } }, styles: { accentColor: "128,186,39", buttonCornerRadius: "8px", fontFamily: "OpenSans, sans-serif", } });

Expected behavior When seat is selected, both prices shown to the customer will be with the markup

Screenshots

[igorp1]

Hey @hunainkapadia, thanks for reporting this. We'll take a look into it and come back here if we need some more info or when it's resolved.

[xiaolinforce]

Hello, I wonder when this issue will be fixed. I also face this but I use priceFormatters and I'm with NextJs (using app router). I have additional information. It may help you.

My website has page A and page B. The ancillaries component is on page B. On page A, there is a button that will call router.push to navigate to page B. When I enter page B from page A with the button, this price-showing problem won't occur, but when refreshing page B or entering this page from the beginning, this price-showing problem will occur.

This problem only occurs in seat service. It doesn't occur in baggage service.

[igorp1]

@xiaolinforce, @hunainkapadia. Sorry for the long delay on responding to this issue. I have tried reproducing it with no success. Could you please share a codesandbox with the issue? That'll give me a better understanding of what's going on.

[xiaolinforce]

@hunainkapadia @igorp1 I know why sometimes it shows correctly, sometimes it does not, but it might be only for my case. I use this component by inputting offer and seat_maps. I set offer from an offer I receive from Duffel get a single offer API. I found out that sometimes available_services from an offer includes both seat and baggage services, but sometimes includes only baggage services. When an offer has only baggage services inside available_services, the component will show the price correctly, but when both seat and baggage services stay inside available_services, the component will show a weird price. My workaround is that I adjusted available_services to have only baggage services before passing to the component.