Success onboarding notice should be dismissable and with a different text

[allie500]

Description:

Earlier today, while testing a server PR, I needed to onboard a couple of new accounts. After successfully onboarding, I was shown the connection success notice. I noticed that the header is missing the word is.

I believe the header string should read:

Your store is fully verified now!

Acceptance criteria:

• The header is updated to: "Your store is fully verified now!"
• All tests pass.

[elizaan36]

I'll share the updated design here with the correct copy. There’s also an ellipses menu to dismiss the card.

cc @daquinons Will you have a look at this as well? Is this part of the PO updates?

[daquinons]

@elizaan36 Thanks for the ping! Let's fix this, indeed :)

Just so you know, two different messages are appearing on this success card. One after finishing the first step of PO, and the other one (the one this issue is about), after completing the second step or finishing the whole KYC. You can see the other message here.

In the FINAL Figma, only the second one has the dropdown menu for dismissing.

My questions are:

• Do you want to modify both cards or only the one this issue refers to? (second step of PO and full KYC success messages).
• I see the typography is also different from the previous design, with different font weights and letter spacing. Is this correct?
• Taking into account DropdownMenu is, according to the Design guidelines from WordPress, a way to "choose an action or change a setting from a list", and here there is a single action ("Dismiss"), wouldn't a single x icon be more effective at providing a direct access to the action, with enough context for it being recognizable without the need of additional text?

Thanks!

[daquinons]

@elizaan36 An important note and extra context that I forgot to add: This notification is only shown once, after redirecting successfully from Stripe. Might not be necessary at all the dismissal of it, as is not something that will keep appearing after that first display :) I would understand a dismiss button if it was something fixed there!

Also, the rest of the notifications being displayed there are fixed and nondismissable, so if we want to make them dismissible, it would make sense to make all of them and not only this successful one! Still, I believe the dismiss action, because of the nature of the notifications, is not that necessary.

[elizaan36]

hey @daquinons 👋

Yup, the copy has been updated for both screens since that PR. Here's the correct design from the Figma marked "Final" after copy review.

1. After finishing the first step of PO

There's no ellipses/dismiss action on this one in order to motivate the user to take their next steps. (Also, prior to getting any sales with WCPay the page is quite stark.)

2. After completing the second step or finishing the whole KYC

The ellipses is a consistent pattern with the Dismiss action on the Woo Home tasklist. I don't think we should diverge from the style of other cards across the experience.

In this case, the dropdown would show "Dismiss" rather than "Hide this" since there's no way to show it again.

[elizaan36]

Also, the rest of the notifications being displayed there are fixed and nondismissable, so if we want to make them dismissible, it would make sense to make all of them and not only this successful one! Still, I believe the dismiss action, because of the nature of the notifications, is not that necessary.

What are the rest of the notifications you're referring to here? Notices should be dismissible by default to give merchants control of the view. The "Things to do" task list can be hidden (with the control in the screenshot I shared above.)

[elizaan36]

I see the typography is also different from the previous design, with different font weights and letter spacing. Is this correct?

The typography should ideally be using the WP components Title Small and Body for consistency overall. Text color is Gray 900 for the title then for the body copy we have Gray 700.