Типы данных

Бэкенд

type AdditiveSimple = {
	name: string
	amountPerItem: 'single' | 'many'
	price: number
}

type AdditiveSelect = {
  name: string
  required: boolean
  options: AdditiveSimple[]
}

type Additive = AdditiveSimple | AdditiveSelect

type Dish = {
  name: string
  description: string
  price: number
  additives: Additive[]
}

type Restaraunt = {
  name: string
  category: string[]
  dishes: Dish[]
}

amountPerItem: single означает, что каждая добавка может быть максимум в одном экземпляре

amountPerItem: many означает что можно выбрать сколько угодно

required: true означает, что это блюдо может быть приготовлено только с использованием одного из вариантов (например выбор между типами хлеба в тостах)

Фронтенд

type AdditiveOrder = {
  additive: string | [additive: string, choice: string]
  amount: number
  totalPrice: number
}

type DishOrder = {
  dish: string
  additives: AdditiveOrder[]
  totalPrice: number
}

type Order = {
  restaraunt: string
  dishes: DishOrder[]
  totalPrice: number
}

Реализация

Перечень сущностей

• Компонент для добавки
• Компонент для блюда
• Компонент для ресторана
• Компонент заказа
• Компонент кнопки заказа блюда

Для простоты опустим запрос данных к серверу за начальными данными

const $restaraunts = createStore<Restaraunt[]>([])

const DishHead = ({name, description, price}: Dish) => (
  <div class="p-4">
    <h1 class="text-2xl font-bold">{name}</h1>
    <p class="text-lg text-gray-500 mt-2">{price}₸</p>
    <p class="text-sm text-gray-400 mt-2">{description}</p>
  </div>
)