Remove toast notification loop

[vivaltech]

Describe the bug
Toast-type notifications appear in a loop.

Expected behavior
Toasts should appear only once when the user triggers them.

Current behavior
Toasts appears once and then are removed from the error message array. But after a few seconds, they are added again, entering an infinite loop.

The message appears without interacting with the Minicart, since the useCart hooks contains the messages, and the only condition for them to appear in the screen is that the toast array has messages.

Steps to reproduce
A step-by-step on how to reproduce the bug behavior.

A. Have a product out of stock
B. Set a limit of products in the mini cart and try to add more of those products

Possible Solution

To avoid them appearing more than once, we would have to keep the array of elements or add a property to allow us control when the popup was already shown.

For example:

@faststore\ui\node_modules@faststore\components\src\hooks\UIProvider.tsx

export interface Toast {
  message: string
  status: 'ERROR' | 'WARNING' | 'INFO'
  title?: string
  icon?: ReactNode
  // Add a new property to control display
  wasShown: boolean
}

(...)

case 'pushToast': {
  // Check if a toast with the same content already exists.
  const isDuplicate = state.toasts.some(existingToast =>
    existingToast.message === action.payload.message &&
    existingToast.status === action.payload.status
  );

  if (!isDuplicate) {
    return {
      ...state,
      toasts: [...state.toasts, action.payload],
    };
  }

  // Not added if it is a duplicate.
  return state; 
}

Additional context

These are the paths to the previous code:

Component:
packages\core\src\components\common\Toast\Toast.tsx

Hook:
@faststore\ui\node_modules@faststore\components\src\hooks\UIProvider.tsx

[hellofanny]

Thanks for reporting this issue. We've created a task to investigate it 🔍

[hellofanny]

We've done some fixes for the toast here