Skip to content
This repository has been archived by the owner on Feb 23, 2024. It is now read-only.

Store notices container always shows as an error #11768

Closed
opr opened this issue Nov 14, 2023 · 4 comments · Fixed by #11932
Closed

Store notices container always shows as an error #11768

opr opened this issue Nov 14, 2023 · 4 comments · Fixed by #11932
Assignees
Labels
block: cart Issues related to the cart block. block: checkout Issues related to the checkout block. focus: blocks Specific work involving or impacting how blocks behave. type: bug The issue/PR concerns a confirmed bug. type: good first issue The issue is a good candidate for the first community contribution/for a newcomer to the team.

Comments

@opr
Copy link
Contributor

opr commented Nov 14, 2023

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

image

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

@opr opr added type: bug The issue/PR concerns a confirmed bug. type: good first issue The issue is a good candidate for the first community contribution/for a newcomer to the team. block: cart Issues related to the cart block. block: checkout Issues related to the checkout block. focus: blocks Specific work involving or impacting how blocks behave. labels Nov 14, 2023
@agung2001
Copy link
Contributor

agung2001 commented Nov 24, 2023

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' } )

Screenshot 2023-11-24 at 09 15 27

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' } )

Screenshot 2023-11-24 at 09 13 30

@agung2001
Copy link
Contributor

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' } )

Screenshot 2023-11-24 at 10 25 10

Request

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

@opr
Copy link
Contributor Author

opr commented Nov 24, 2023

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
Copy link
Contributor

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 👍

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
block: cart Issues related to the cart block. block: checkout Issues related to the checkout block. focus: blocks Specific work involving or impacting how blocks behave. type: bug The issue/PR concerns a confirmed bug. type: good first issue The issue is a good candidate for the first community contribution/for a newcomer to the team.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants