Fix: payment methods not updated after adding it #2060
Conversation
| if (value) { | ||
| methods = { | ||
| ...methods, | ||
| total: methods.total + 1, | ||
| paymentMethods: [...methods.paymentMethods, event.detail] | ||
| }; | ||
| } |
There was a problem hiding this comment.
directly adds the card to the passed on object. this is done to avoid a flash of layout shift if we used invalidate(Dependencies.PAYMENT_METHODS) because we use a Skeleton loader, the load is pretty quick so it would look very off. Doing this way, there's just a UI swap instead of a network request.
| ]); | ||
| $: isOnOnboarding = page.route?.id?.includes('/(console)/onboarding'); | ||
|
|
||
| $: projects = isOnOnboarding |
There was a problem hiding this comment.
avoids a failed network request when there are no orgs and the user is on onboarding path.
|
|
||
| // fixes an edge case where | ||
| // the org is not available for some reason! | ||
| await invalidate(Dependencies.CREATE_ORGANIZATION); |
There was a problem hiding this comment.
this is because we use const { organizations } = await parent(), which is loaded at the top level +layout.ts. Children below it don't load it so the first project creation can fail sometimes for billing checks because there's no org in the list. This just invalidates and loads all of them again. Perf cost is very minimal.
| bind:value={paymentMethodId} | ||
| bind:taxId> | ||
| bind:methods={paymentMethods}> |
There was a problem hiding this comment.
binds in order to update/mutate the object.
What does this PR do?
Adding a new card required a page reload on
change-planroute due to the payment methods being loaded in svelte context which didn't trigger a reload without a reactive update. This PR fixes that and directly updates the underlying payment list modal to avoid a skeleton loader flash if we used a streamed promise or reloaded via svelte context await.Test Plan
Manual.
Related PRs and Issues
N/A.
Have you read the Contributing Guidelines on issues?
Yes.