[Redesigning notifications] Unify and improve width and positioning of notifications/banners

[filipefurtad0]

What is the need / problem?

There are at least three different designs for notifications (banners) now.

If an enterprise is added to the an order cycle as a distributor but has no payment/shipping methods set the then the following message will be displayed throughout all the admin pages:
The hub Distributor Name is listed in an active order cycle, but does not have valid shipping and payment methods. Until you set these up, customers will not be able to shop at this hub.

The message appears on all admin pages, and is persistent, i.e., it only disappears after clicking the Dismiss button.

Which type of users does this problem affect (and how many, if known)?

• Hub Managers (MCFEs)
• Instance Managers

Potential solutions that will solve the problem?

Proposal:

• Banners should never be placed next to each other, but each banner gets it's own row.
• Banners should have a uniform behaviour regarding their width:
  • Option A: Always make them span almost the full screen width (like ToS-banner does currently)
  • Option B: Make them as small as possible (like 'update successful' banner), but use full screen width, if needed. So the version of the 'active order cycle' warning shouldn't happen.

Previous proposal (outdated):

• Move the issue back to the top of the screen, minimizing potential overlap with other relevant elements.

Connected wishlist and discovery discussions

Additional context

https://openfoodnetwork.slack.com/archives/C01CXQNJ1J6/p1702485996860259

PS: I think all flash messages now appear at the bottom, but some - like the one below - does disappear after 4 secs or so:

[mariocarabotta]

extra bit of info for context: I'm trying to replicate this, but having a bit of trouble. I might not have the right type of account / data.

If I try to add a distributor that has no shipping / payment method, it doesn't let me do that from the order cycle editing flow

[drummer83]

Hi @mariocarabotta,
the required workflow is as follows:

1. Set up payment and shipping methods.
2. Set up the order cycle and select just one shipping or payment method in step 4.
3. Go to enterprise settings -> shipping/payment methods.
4. Select EDIT for the shipping/payment method you used in the order cycle.
   
5. Deactivate the checkbox for the hub you used for the order cycle.
   
6. Click Update.

You should now see the warning.

[mariocarabotta]

amazing, thank you!

[drummer83]

I have updated the issue to include the design proposals from #11795, because it's very closely related.