Store notices container always shows as an error

[opr]

Describe the bug

If a notice with status: success is created, it still shows the red, error state.

To reproduce

Steps to reproduce the behavior:

1. Go to the Cart block.
2. In the JS console type: wp.data.dispatch('core/notices').createSuccessNotice( 'This is a success message, it should show in green!', { context: 'wc/cart' } )
3. See the "error" notice display even though it should be success.

Expected behavior

The notices should show the correct type.

Screenshots

Additional context

Removing this 'error' value and using the shorthand status instead will fix this - there is a TS error that should be fixed when doing that though.

https://github.com/woocommerce/woocommerce-blocks/blob/trunk/packages/checkout/components/store-notices-container/store-notices.tsx#L130

[agung2001]

Yes, can replicate this

createNotice

the issue also happened in createNotice :

wp.data.dispatch('core/notices').createNotice('success', 'This is a success message, it should show in green!', { context: 'wc/cart' } )

Snackbar

but the snackbar works just fine though :

wp.data.dispatch('core/notices').createNotice('success', 'This is a success message, it should show in green!', { type: 'snackbar', context: 'wc/cart' } )

[agung2001]

I think the issue is due to :

• noticeProps status is set to error instead of using status variable

Solution

so to fix this we need to change the noticeProps to something like this :

const noticeProps: Omit<NoticeBannerProps, 'children'> & {
    key: string;
} = {
    key: `store-notice-${status}`,
    status,
    onRemove: () => {
        noticeGroup.forEach((notice) => {
            removeNotice(notice.id, notice.context);
        });
    },
};

Solved

I've confirmed the fix by running :

wp.data.dispatch('core/notices').createSuccessNotice( 'This is a success message, it should show in green!', { context: 'wc/cart' } )

Request

Hi @opr , can you assign this issue to me, so I can create PR for this?

[opr]

Hey @agung2001 thanks for offering to work on this. I've assigned you to the issue.

Please feel free to tag me as a reviewer when your PR is open!

[agung2001]

hi @opr thx for giving me an opportunity to fix the issue
I've opened the PR it's in here #11932

but unfortunately, I don't have access to make you the reviewer
m not sure if I did it correctly.

just let me know if u got any feedback, cheers 👍