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.