Упрощённое тестовое задание Front-End

Здесь находится описание тестового задания на позицию Front-End-разработчика в KazanExpress.
Если вы нашли его случайно - попробуйте сделать! Авось и вас к себе возьмём.

Задание разбито на подзадачи.

1. Bug.

Есть абстрактное приложение с 1 компонентом. В текущей реализации есть несколько проблем. Нужно найти каждую проблему и описать, почему это проблема. Так же необходимо предоставить рабочее решение и описать как минимум еще 2 варианта решения. Требования: компонент должен работать без props ("кинул" компонент на страницу с любой вложенностью элементов/компонентов и он работает).

Ссылка на CodeSandbox: https://codesandbox.io/s/wizardly-euclid-xmm1p

2. Refactor.

Задача: сохранить функциональность и провести рефактор.

Опционально: описать где и почему были внесены изменения.

Ссылка на CodeSandbox: https://codesandbox.io/s/admiring-black-niwj0

3. Feature.

Есть данные с бэка:

const payload = {
  type: "BOTTOM_BLOCK",
  elements: {
    button: {
      type: "primary",
      text: "Buy",
      action: "buyProduct",
    },
    textField: {
      text: "This is my text, my text is amazing!",
    },
    icon: {
      value: "/* svg */"
    },
  },
};

Создать Proxy и "добавить" поле elementsCount которое возвращает количество элементов в поле elements (в данном примере пэйлоада результат будет 3).

Описать как можно с помощью Proxy сделать поиск в глобальном скоупе и вызов функции, которая указана в поле action (если есть) при обращении к элементу вызовом функции. Иными словами, чейн payload.elements.button() запускал бы функцию buyProduct в глобальном скоупе.

Опционально: выводить кастомную ошибку, если поля action нет у элемента.

Результат предоставить в виде ссылки на .md файл в котором описаны решения и указаны ссылки на jsbin/jsfiddle/codepen/codesandbox