#vwmoose_api

1 messages · Page 1 of 1 (latest)

tranquil inletBOT
#

👋 Welcome to your new thread!

⏲️ We'll be here soon! Typically we respond in a few minutes, but sometimes we might take a bit longer if the server is busy or if you have a particularly tricky question.

⏱️ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can always start a new thread if you have another question.

🔗 This thread will always be available, even after it's closed. You can find it again using Discord's search, or you can save this link: https://discord.com/channels/841573134531821608/1286606096223440907

📝 Have more to share? Add more details, code, screenshots, videos, etc. below.

warped jolt
#

hi! do you happen to have a link/code handy to reproduce this?

#

I'm still trying to find this "InlineProgressBar" in our docs

fossil mountain
#

One Sec I'll send a screenshot.

#

At the top of the embedded component.

Screenshot_2024-09-20_at_09.41.08.png
#

The dark gray 'progress' section of the bar disappears in Dark Mode.

Screenshot_2024-09-20_at_09.42.23.png
warped jolt
#

this is the account-onboarding component?

fossil mountain
#

Yes

warped jolt
#

and what code are you using to apply the styling? How do you know it's called InlineProgressBar ? Sorry, I'm multiple steps behind you I think

fossil mountain
#

No worries, I'll post...

#

loadConnectAndInitialize()
to invoke a session and then
const container = document.getElementById("embedded-onboarding-container"); const embeddedOnboardingComponent = this.stripeConnectInstance.create("account-onboarding"); embeddedOnboardingComponent.setOnExit(() => { /* finish stripe onboarding */ }); container.appendChild(embeddedOnboardingComponent);

#

I know it's called that because I inspect the element after render.

#

<div data-testid="InlineProgressBar" class="⚙ as32x as32y as32z as330 as331 as332 as333 ⚙95nlkv" style="border-top-left-radius: 4px; border-bottom-left-radius: 4px; border-right-color: rgb(215, 215, 215);"></div>

warped jolt
#

I see. Maybe it just doesn't support the style properly and it's a bug?

#

sorry, I'm trying to reproduce and not having any luck, I can't remember how to make the component actually embed instead of showing a button(I had this problem the last time I used these, 6 months ago)

image.png
fossil mountain
#

Weird

#

If you click Add Information do you see it then?

#

This only pops up when it's the first time a user starts the onboarding process. After that you simply see any singular steps you have to complete like updating details etc. No progress bar seen when editing an already existing Connect account data.

warped jolt
#

ah yeah I forgot the popup is just for the auth.

#

well yeah I see the bar. I suppose it's just a bug and it doesn't respect the apperance variables

fossil mountain
#

hmm that's unfortunate

warped jolt
#

looking at the code it's apparently a new part of the UI the team added last week , they probably forgot to make it stylable

#

I'll flag it to them

tranquil inletBOT
warped jolt
#

any chance you can show me the actual code you use/pass to appearance for this?

fossil mountain
#

One sec

#

this.stripeConnectInstance = loadConnectAndInitialize({ publishableKey: import.meta.env.VITE_STRIPE_KEY, fetchClientSecret, appearance: { overlays: "dialog", variables: { colorSecondaryText: '#717171', colorPrimary: '#635bff', }, }, });

warped jolt
#

because there was a report of this not styling properly but it was a year ago and 'fixed', and the component does use some specific code that's supposed to avoid this problem

fossil mountain
#

I've just raised the ticket