1-mobile.md

Шрифты

Внимательно смотреть на шрифт, обычно:

• в заголовках https://fonts.google.com/specimen/Montserrat
• в теле https://fonts.google.com/specimen/Lato

Шапка

На макетах нарисована кнопка назад в шапке, это не удачная идея, просто оставляем логотип как везде, кроме поиска и тп.

Авторизация

На части страниц проверять "авторизовал ли пользователь", если нет, то показывается страница входа/регистрации: /checkout нет авторизации, рендер signin /checkout?stab=signup, нет авторизации, рендер signup таба /checkout?stab=restore Т.е. любое действие по авторизации происходит поверх запрашиваемой страницы, пока авторизация не завершится.

Логика работы счетчика продукта

При нажатии на "купить" появляется счетчик с counterInit, при нажатии на +/- происходит сдвиг на counterStep, у части продуктов есть counterLimit ограничение. Счетчик должен висеть на каждом продукте пока он есть в корзине. Т.е. это будет smart компонент, который привязан к store. При клиеке купить в store падают все нужные значения для вычисления.

API

• сделано на graphql https://myfresh.ru/graphql
• для авторизации нужен заголовок Authorization: Bearer ${jwtToken}
• токен авторизации отдаёт signin или signup мутация
• для дебага запросов используйте любой graphiql клиент, к примеру https://chrome.google.com/webstore/detail/chromeiql/fkkiamalmpiidkljmicmjfbieiclmeij?hl=en
• все записи возаращают уникальный id, его можно использовать в key. Реальный id из базы лежит в rid.

Страницы

• Главная https://app.zeplin.io/project/5af9aa198eed25c93a1796e1/screen/5af9b83776f945393a512be7

  • Банеры
  • Блок ближайшей доставки, ссылка ведёт на /delivery
  • Home products Первые три продукта, кнопка ещё подгружает остальные
  • Слайдер со статическим тестом
  • Слайдер с отзывами TODO: дописать ответ

• Категория https://app.zeplin.io/project/5af9aa198eed25c93a1796e1/screen/5afd716a904e76ab1587d51a

  • Выводит продукты
  • Выводит категории
  • В корне выводит продуктовые страницы

• Продукт https://app.zeplin.io/project/5af9aa198eed25c93a1796e1/screen/5af9b8367c326c507a587e31

  • Фотография + метки
  • Блок корзины
  • Описание
  • Характеристики
  • Отзывы клиентов
  • С этим часто покупают
  • Блок расширенной доставки <ClosestDelivery full />
  • Новый отзыв https://app.zeplin.io/project/5af9aa198eed25c93a1796e1/screen/5af9b823f3ff8c7510d17699
  • Модальное окно "Вы не можете оставить отзыв пока не купите" https://app.zeplin.io/project/5af9aa198eed25c93a1796e1/screen/5af9b81669df6b1f3b77f4ad
  • Продукт может быть "нет в наличии" в api available https://app.zeplin.io/project/5af9aa198eed25c93a1796e1/screen/5af9b820fa73f3691047dfe9

• Доставка https://app.zeplin.io/project/5af9aa198eed25c93a1796e1/screen/5af9b821a0e90e0f3a649def

  • Статический контент
  • Список стоимости доставки из API

• Sidebar (данные загружаются при открытии страницы, https://app.zeplin.io/project/5af9aa198eed25c93a1796e1/screen/5af9b81976f945393a512acd)

  • Блок ближайшей доставки <ClosestDelivery green />
  • Список продуктовых страниц
  • Список корневых категорий + collapse на подкатегории
  • Список статических страниц

• Поиск (https://app.zeplin.io/project/5af9aa198eed25c93a1796e1/screen/5af9b820a9fcd66f3aab4579 и https://app.zeplin.io/project/5af9aa198eed25c93a1796e1/screen/5af9b81e8f37c1027a970424)

• Оформление заказа

  • Шаг 2 https://app.zeplin.io/project/5af9aa198eed25c93a1796e1/screen/5af9b824e663e36f10b60d7e
    • Способ оплаты
    • Время доставки
    • Выбор адреса доставки
    • Форма добавление адреса (если нет адресов ещё)
    • Всплывающая модалка выборка адреса https://app.zeplin.io/project/5af9aa198eed25c93a1796e1/screen/5af9b824fa73f3691047e0ad
    • Комментарий
  • Финальная страница заказа https://app.zeplin.io/project/5af9aa198eed25c93a1796e1/screen/5af9b81ca9fcd66f3aab44e1 Большей частью совпадает со страницей заказа личного кабинета. Кнопка "Перейти к оплате", только если выбрана оплата онлайн

• Заказ оформлен https://app.zeplin.io/project/5af9aa198eed25c93a1796e1/screen/5af9b823fa73f3691047e087

• Вход

  • Авторизация https://app.zeplin.io/project/5af9aa198eed25c93a1796e1/screen/5af9b826f33051447abaf7db
  • Рестрация https://app.zeplin.io/project/5af9aa198eed25c93a1796e1/screen/5af9b8220d215c333a22c631
  • Сброс пароля https://app.zeplin.io/project/5af9aa198eed25c93a1796e1/screen/5af9b822a9fcd66f3aab45a7 После нажатия перекинуть на авторизацию с сообщением "вам отправлен новый пароль на телефон"

• Корзина https://app.zeplin.io/project/5af9aa198eed25c93a1796e1/screen/5af9b82603c790327a62ea9a

  • Блок ближайшей доставки
  • Блок минимальная сумма заказа https://app.zeplin.io/project/5af9aa198eed25c93a1796e1/screen/5af9b832c85927513a835220 Виден только, если сумма не дотягивать до минимальной из deliveryCosts
  • Список продуктов в подарок
  • Список продуктов в корзине
  • Плавающая кнопка "Оформить заказ"
  • Модальное окно "Очистить корзину" https://app.zeplin.io/project/5af9aa198eed25c93a1796e1/screen/5af9b82f5de27c213aca86b2
  • Возможно вас заинтересует блок https://app.zeplin.io/project/5af9aa198eed25c93a1796e1/screen/5af9b8336ebc228710d51248

• Личный кабинет

  • Главная https://app.zeplin.io/project/5af9aa198eed25c93a1796e1/screen/5af9b83229ac31a63b1ace9e
    • Блок задолженность по заказу
    • Навигация
    • Выход
  • Адреса + форма добавления нового https://app.zeplin.io/project/5af9aa198eed25c93a1796e1/screen/5af9b82bf3ff8c7510d17759
  • Мои заказы https://app.zeplin.io/project/5af9aa198eed25c93a1796e1/screen/5af9b82e0f98ac633a64835c
  • Мой заказ https://app.zeplin.io/project/5af9aa198eed25c93a1796e1/screen/5af9b82b8f37c1027a9704f5
    • Блок требуется доплата
    • Список позиций
    • Детали
    • Оплатить картой
  • Избранное https://app.zeplin.io/project/5af9aa198eed25c93a1796e1/screen/5af9b82876f945393a512ba7
    • Пустой state https://app.zeplin.io/project/5af9aa198eed25c93a1796e1/screen/5af9b827b055cebb3aa79ee1
  • Профиль https://app.zeplin.io/project/5af9aa198eed25c93a1796e1/screen/5af9b830704f4b3e7a34d083
  • Модальное окно Выйти https://app.zeplin.io/project/5af9aa198eed25c93a1796e1/screen/5af9b82fc19b421b3a121ae6

Компоненты

• ProductCard https://app.zeplin.io/project/5af9aa198eed25c93a1796e1/screen/5af9ba82494a1093105ad84a Должен поддерживать все указанные состояния, обработку состояний можно взять из текущих реализаций get-labels.js

• Button https://app.zeplin.io/project/5af9aa198eed25c93a1796e1/screen/5af9ba826ebc228710d531ee

• FormInput https://app.zeplin.io/project/5af9aa198eed25c93a1796e1/screen/5af9ba8064b21e1a7a334c3e

2-get-labels.js

// @flow

import format from 'utils/format';

type Data = {
  priceType: string,
  averageWeight: number,
  priceQuantity: number,
  volume: number,
  weight: number,
  averageWeightFrom: number,
  averageWeightTo: number,
};

type Result = {
  info?: string,
  weight?: string,
  base?: string,
};

export default (data: Data): Result => {
  if (data.priceType === 'average-weight') {
    return {
      info: `Средний вес: ${format(data.averageWeight, 'kg')}`,
      weight: `за ${format(data.priceQuantity, 'kg')}`,
      base: format(data.averageWeight, 'kg'),
    };
  }

  if (data.priceType === 'weight') {
    return {
      weight: `за ${format(data.priceQuantity, 'kg')}`,
      base: format(data.priceQuantity, 'kg'),
    };
  }

  if (data.priceType === 'piece') {
    return {
      weightLabel: format(1, 'pcs'),
      base: format(1, 'pcs'),
    };
  }

  if (data.priceType === 'piece-with-volume') {
    return {
      info: `Объем: ${format(data.volume, 'l')}`,
      base: format(data.volume, 'l'),
    };
  }

  if (data.priceType === 'piece-with-weight') {
    return {
      info: `Вес НЕТТО: ${format(data.weight, 'kg')}`,
      base: format(data.weight, 'kg'),
    };
  }

  if (data.priceType === 'piece-with-average-weight') {
    return {
      info: `Средний вес: ${format([data.averageWeightFrom, data.averageWeightTo], 'kg')}`,
      base: format([data.averageWeightFrom, data.averageWeightTo], 'kg'),
    };
  }

  return {};
};

3-format.js

const NBPS = '\xa0';

export const convert = (value: number, unit: string): [number, string] => {
  if (unit === 'kg' && value < 1 && value.toFixed(1) !== '0.5') {
    return [Math.floor(value * 1000), 'g'];
  }

  if (unit === 'l' && value < 1 && value.toFixed(2) !== '0.75' && value.toFixed(1) !== '0.5') {
    return [Math.floor(value * 1000), 'ml'];
  }

  return [value, unit];
};

export const units = {
  g: 'г',
  ml: 'мл',
  kg: 'кг',
  l: 'л',
  pcs: 'шт',
};

const format = (initValue: number | [number, number], initUnit: string): string => {
  if (Array.isArray(initValue)) {
    const values = initValue.filter(i => i);

    if (values.length === 0) {
      return '';
    }

    if (values.length === 1) {
      return format(values[0], initUnit);
    }

    const [value1, unit1] = convert(values[0], initUnit);

    if (unit1 === 'g') {
      return `${value1}-${Math.floor(values[1] * 1000)} ${units[unit1]}`;
    }

    return `${value1}-${values[1]} ${units[initUnit]}`;
  }

  const [value, unit] = convert(initValue, initUnit);
  return `${value}${NBPS}${units[unit] || unit}`;
};

export default format;