duffelhq / duffel-components Goto Github PK

Describe the bug

When selecting seats for some airlines (in this example specific American Airlines) on a roundtrip MEX-CDG or MEX-LAS there is an odd accomodation of the ammenities. Also all the seats on all the slices appears as unavailable.

Version of @duffel/components

1. Version: "@duffel/components": "^3.1.5", so in yarn lock we are using "3.4.3"
2. Installation: YARN
3. Framework: Next.js

Code sample to reproduce

The Duffel Component is rendered as in the documentation (the option of providing an offer, passengers and a client_key) like this:

<DuffelAncillaries
  styles={{
    buttonCornerRadius: '5px',
    accentColor: color,
    fontFamily: 'inherit',
  }}
  offer={props.offer }
  client_key={props.clientKey}
  passengers={passengers}
  services={['bags', 'seats', 'cancel_for_any_reason']}
  onPayloadReady={handleOnPaylodReady}
/>

The DuffelAncilliaires component makes the petition for the seat_maps and I can see that it has information there.

• The request id for this petition of seat maps for MEX-CDG is F61x4npiei_YFs0A1bND.
• The request id for this petition of seat maps for MEX-LAS is F62_XEw2UxbT8YEA588h.

Expected behavior

Not sure if the amennities should look like that but, if seat maps are retrieved at least few seats should be available (no make sense that on any slice there is none selectable seat)

And if not, there should be an advertisment like "No Available" on the button before selecting the seats.

Screenshots

Here is how it looks on my frontend:

Additional context

Don't know if it is a specific problem for this airline or is something general, also I see that this problem happen also in Duffel Dashboard (when creating an order there).

Describe the bug

In airlines with no support of seats (example Volaris or Iberia), the message of seat selection "Not Available" appears.
However, the button is not disable as in other services, so it looks "clickable" and, when you hover it, it continues having his border black.

Version of @duffel/components

1. Version: "@duffel/components": "^3.1.5", so in yarn lock we are using "3.4.3"
2. Installation: YARN
3. Framework: Next.js

Code sample to reproduce

The Duffel Component is rendered as in the documentation (the option of providing an offer, passengers and a client_key) like this:

<DuffelAncillaries
  styles={{
    buttonCornerRadius: '5px',
    accentColor: color,
    fontFamily: 'inherit',
  }}
  offer={props.offer }
  client_key={props.clientKey}
  passengers={passengers}
  services={['bags', 'seats', 'cancel_for_any_reason']}
  onPayloadReady={handleOnPaylodReady}
/>

So, in my understanding, the DuffelAncilliaries component makes the petition for seat_maps but the thing is that, seeing the response for the seat_maps for airlines without seats service (like Volaris), it returns null (request id from petition for seat maps F61xD4n-44BeiqQA9J8i)
Expected behavior
No critical issue but for better UX should be better to just disable the button as in the other services when the airline has this selection seats service unavailable or when the seat maps request returns null also disable it.

Screenshots

On my frontend looks like this on hover:

Also, doing an order on Duffel Dashboard looks like this on hover:

Describe the bug
A clear and concise description of what the bug is.

When importing
import { DuffelPayments, DuffelAncillaries } from '@duffel/components
and using components

<DuffelPayments paymentIntentClientToken="eyJjbGllbnRfc2VjcmV0IjoicGlfM0psczlVQWcySmhFeTh2WTBSTm1MU0JkX3NlY3JldF9QUW9yZXNuU3laeWJadGRiejZwNzBCbUdPIiwicHVibGlzaGFibGVfa2V5IjoicGtfdGVzdF9EQUJLY0E2Vzh6OTc0cTdPSWY0YmJ2MVQwMEpwRmMyOUpWIn0="
      onSuccessfulPayment={console.log}
      onFailedPayment={console.log}
    />

react/nextjs throws an error:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

(Same with DuffelAncillaries or DuffelPayments).

Library version: 3.1.2 (if I downgrade to 2.7.20, CardPayment (Which is same as DuffelPayments as far as I can tell) actually works as intended, however 2.7.20 does not have Ancillaries so we can't just use that version.) I'm installing it: npm i @duffel/components. Framework I'm using is NextJS.

Code sample: https://codesandbox.io/p/sandbox/github/Rytis-t/duffelcomponents/tree/main

EDIT: Also, if I let's say import and log:

import { destroyCookie } from 'nookies';
import { DuffelPayments } from '@duffel/components';

console.log(destroyCookie)
console.log(DuffelPayments)

any other imported function is logged as:
function destroyCookie(ctx, name, options)

but DuffelPayments is undefined.

Hey Duffel Team!

I'm using the Duffel Ancillaries component in a Sveltekit application I am building.

I have followed the steps listed in your docs for the Ancillaries component here:
Using the component in non-React environments

Version of @duffel/components: ^3.1.5

I am installing it using npm i @duffel/components --save

The framework I am using is Sveltekit.

I have created a component in the Ancillaries.svelte file with the following code taken directly from your docs:

<script>
    import { onDuffelAncillariesPayloadReady, renderDuffelAncillariesCustomElement } from '@duffel/components/custom-elements'

    window.onload = function () {
        renderDuffelAncillariesCustomElement({
        debug: true,
        offer_id: 'fixture_off_1',
        services: ['bags', 'seats', 'cancel_for_any_reason'],
        passengers: [
            {
                id: 'pas_001',
                given_name: 'Mae',
                family_name: 'Jemison',
                gender: 'F',
                title: 'dr',
                born_on: '1956-10-17',
                email: '[email protected]',
                phone_number: '+16177562626',
            },
            {
                id: 'pas_002',
                given_name: 'Amelia',
                family_name: 'Earhart',
                gender: 'F',
                title: 'mrs',
                born_on: '1987-07-24',
                email: '[email protected]',
                phone_number: '+442080160509',
            },
        ]
        })
    }

    onDuffelAncillariesPayloadReady((data, metadata) => {
    console.log('Ancillaries selected. Order payload:', data)
    console.log('Ancillaries selected. Ancillary services chose:', metadata)
    })
</script>


<duffel-ancillaries></duffel-ancillaries>

I have tried using "@duffel/components" in the import statement but got the following errors:
Module '"@duffel/components"' has no exported member 'onDuffelAncillariesPayloadReady'.
Module '"@duffel/components"' has no exported member 'renderDuffelAncillariesCustomElement'.

When I changed the import from @duffel/components to @duffel/components/custom-elements the error went away.

I'm not sure if this is the correct file that should be imported. However, when I run the application locally I get a 500 error that says:

ReferenceError: HTMLElement is not defined
    at Object.<anonymous> (/Users/matt/Sites/travvel-ai/node_modules/@duffel/components/custom-elements.js:30:59370)
    at Module._compile (node:internal/modules/cjs/loader:1275:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1329:10)
    at Module.load (node:internal/modules/cjs/loader:1133:32)
    at Module._load (node:internal/modules/cjs/loader:972:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:165:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:193:25)

I recorded a Loom going through a fresh install of @duffel/components which you can watch here:
Duffel Ancillaries Implementation

It seems like the initial import from @duffel/components is where the error is coming from. I shouldn't have to import from `@duffel/components/custom-elements'

I don't know what could be wrong with my implementation, but if the error is due to the offer_id, services, or passengers objects having the wrong data, I would expect the component to render with an error.

Please let me know if there is something I am doing wrong here. Otherwise, would love to see a patch for this so I can just import from @duffel/components and be able to use the Ancillaries component in my Checkout flow.

Looking forward to your response!

-Matt

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Awaiting Schedule

These updates are awaiting their schedule. Click on a checkbox to get an update now.

• chore(deps): update babel monorepo to v7.24.4 (@babel/core, @babel/preset-env)
• chore(deps): update react monorepo (@types/react, @types/react-dom)
• fix(deps): update dependency @duffel/api to v2.8.2
• chore(deps): update dependency @sentry/cli to v2.31.0
• chore(deps): update dependency @storybook/testing-library to v0.2.2
• chore(deps): update dependency @testing-library/react to v14.3.0
• chore(deps): update dependency @types/lodash to v4.17.0
• chore(deps): update dependency @types/node to v18.19.31
• chore(deps): update dependency concurrently to v8.2.2
• chore(deps): update dependency dotenv to v16.4.5
• chore(deps): update dependency esbuild to v0.20.2
• chore(deps): update dependency eslint to v8.57.0
• chore(deps): update dependency eslint-config-prettier to v9.1.0
• chore(deps): update dependency eslint-plugin-jsx-a11y to v6.8.0
• chore(deps): update dependency eslint-plugin-react to v7.34.1
• chore(deps): update dependency eslint-plugin-storybook to v0.8.0
• chore(deps): update dependency puppeteer to v22.6.3
• chore(deps): update dependency semver to v7.6.0
• chore(deps): update dependency tsconfig-paths-webpack-plugin to v4.1.0
• chore(deps): update dependency typescript to v5.4.4
• chore(deps): update storybook monorepo to v7.6.17 (@storybook/addon-essentials, @storybook/addon-interactions, @storybook/addon-links, @storybook/blocks, @storybook/react, @storybook/react-webpack5, storybook)
• chore(deps): update typescript-eslint monorepo to v6.21.0 (@typescript-eslint/eslint-plugin, @typescript-eslint/parser)
• chore(deps): update yarn to v4.1.1
• fix(deps): update dependency @sentry/browser to v7.109.0
• fix(deps): update dependency @stripe/react-stripe-js to v2.7.0
• fix(deps): update dependency classnames to v2.5.1
• chore(deps): update dependency @sentry/esbuild-plugin to v2
• chore(deps): update dependency @types/node to v20
• chore(deps): update dependency eslint to v9
• chore(deps): update storybook monorepo to v8 (major) (@storybook/addon-essentials, @storybook/addon-interactions, @storybook/addon-links, @storybook/blocks, @storybook/react, @storybook/react-webpack5, storybook)
• chore(deps): update typescript-eslint monorepo to v7 (major) (@typescript-eslint/eslint-plugin, @typescript-eslint/parser)
• fix(deps): update dependency @stripe/stripe-js to v3
• fix(deps): update dependency fuse.js to v7

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

POST https://api.stripe.com/v1/payment_intents/pi_3Jls9UAg2JhEy8vY0RNmLSBd/confirm 400 (Bad Request)

{type: 'invalid_request_error', code: 'payment_intent_unexpected_state', doc_url: 'https://stripe.com/docs/error-codes/payment-intent-unexpected-state', message: 'A processing error occurred.', payment_intent: {…}, …}
code
:
"payment_intent_unexpected_state"
doc_url
:
"https://stripe.com/docs/error-codes/payment-intent-unexpected-state"
message
:
"A processing error occurred."

Following my previous issue of getting an "HTMLElement not defined error" when importing @duffel/components, I decided to try using the CDN instead. The Ancillaries component is rendering, and works completely fine when I use fixture_off_1.

The issue is when I pass in the Offer ID and Client key, I get an error in the UI of the rendered Ancillaries component that says Failed to load extras
An unknown error occurred while retrieving the offer.

I am using version 3.1.5 and dynamically importing it into my Sveltekit application from the CDN using:
https://assets.duffel.com/components/3.1.5/duffel-ancillaries.js

I am also using the multi-step search. When I am on the Fare Selection step, I am setting the selected fare option to the $selectedOffer store and passing the Offer ID using $selectedOffer.id, and I am passing the Client Key using $fareOptions.client_key.

Here is the full code I am using for this component:

<script>
  import { onMount } from 'svelte';
  import { selectedOffer, fareOptions } from '$lib/stores';

  onMount(() => {
    // Dynamically create and append the script tag
    const script = document.createElement('script');
    script.src = 'https://assets.duffel.com/components/3.1.5/duffel-ancillaries.js';

    script.onload = () => {
      // Initialize duffel-ancillaries once the script is loaded
      const duffelAncillariesElement = document.querySelector('duffel-ancillaries');
      duffelAncillariesElement.render({
          offer_id: $selectedOffer.id,
          client_key: $fareOptions.client_key,
          services: ['bags', 'seats', 'cancel_for_any_reason'],
          passengers: [
            {
                given_name: "Mae",
                family_name: "Jemison",
                gender: "F",
                title: "dr",
                born_on: "1956-10-17",
                email: "[email protected]",
                phone_number: "+16177562626",
            }
          ],
      debug: true,
      });

      duffelAncillariesElement.addEventListener('onPayloadReady', (event) => {
        console.log('onPayloadReady\n', event.detail);
      });
    };

    document.head.appendChild(script);
  });
</script>

<!-- Use the custom element -->
<duffel-ancillaries></duffel-ancillaries>

The expectation is for the Ancillaries component to work the same way when I use fixture_off_1 and when I pass in an Offer ID and Client Key.

Here is a screenshot of what the component looks like with the error:

Here is a screenshot of what I get in the console from the debug option:

And here is the expanded version of the debug log in the console:

Additional info:
I am in test mode. For the flight options, I selected round-trip, 1 passenger, and economy class. I also selected Duffel Airways for the Outbound and Inbound flights.

As you can see in the screenshot, the Ancillaries component is receiving an offer ID, client key, and passengers object with 1 passenger.

I don't know what could be causing this error and would appreciate any help.

Please let me know if there is any additional info that I should provide to solve this.

Thanks!

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