Locked products

The given code displays a list of products and allows to delete them. There is a confirmation modal when deleting an item. If the item is locked, another confirmation modal should pop up.


  • By default, display items defined in the code.
  • If the item is locked, display (locked) text next to the product name.
  • Clicking the X button should open a confirm dialog. Display a proper product name in the modal description.
  • Clicking No in any modal should close the modal immediately.
  • Clicking Yes in the confirm modal should delete the item if the item is not locked or open a second confirm dialog if the item is locked.
  • If the item is being deleted, both buttons should be disabled, and Yes text should be changed to Deleting....
  • The deleting/loading state should last for 1s. After that, the dialog should be closed, and the item should be deleted from the list.
  • Pay attention to data-test attributes, and don't delete them accidentally.

Refactoring suggestions:

  • Remove code duplication.
  • Simplify code.
  • Refactor code to separate components.
  • Don't manipulate DOM directly.

NOTE: This is a refactoring challenge. The provided code passes all tests.

You are free to add classes, styles, ids, but don't edit or remove data-test attributes.
Create an account to start coding
Create account