partial solution

src/components/CardItem/CardItem.js

@@ -11,6 +11,7 @@ export const CardItem = ({
   restaurantCurency,
   uuid,
   createOrder,
+  setAltData,
 }) => {
   const srcImage = imageUrl || './images/no_image.png';
   const srcTitle = title || 'no-image icon';
@@ -19,7 +20,17 @@ export const CardItem = ({
     <div
       id={uuid}
       className="card"
-      onClick={event => createOrder(event.target.id)}
+      onClick={
+        (event) => {
+          createOrder(event.target.id);
+          setAltData({
+            title,
+            imageUrl,
+            itemDescription: description,
+            price,
+          });
+        }
+      }
       onKeyPress={event => createOrder(event.target.id)}
       role="presentation"
     >
@@ -45,6 +56,7 @@ CardItem.propTypes = {
   price: PropTypes.number.isRequired,
   restaurantCurency: PropTypes.string,
   createOrder: PropTypes.func.isRequired,
+  setAltData: PropTypes.shape().isRequired,
 };
 
 CardItem.defaultProps = {

src/components/CardItem/index.js

@@ -4,14 +4,15 @@ import { CardItem } from './CardItem';
 import {
   selectRestaurantCurency,
 } from '../../store/selector';
-import { loadMenuItem } from '../../store/actions';
+import { loadMenuItem, setAltDataModalWindow } from '../../store/actions';
 
 const mapStateToProps = state => ({
   restaurantCurency: selectRestaurantCurency(state),
 });
 
 const mapDispatchToProps = dispatch => ({
   createOrder: uuid => dispatch(loadMenuItem(uuid)),
+  setAltData: data => dispatch(setAltDataModalWindow(data)),
 });
 
 const Enhanced = connect(

src/components/Error/Error.js

@@ -8,7 +8,7 @@ export const Error = (props) => {
 
   return (
     <div className="error">
-      <p className="error__text">Sorry, something wrong(</p>
+      <p className="error__text">something wrong</p>
       <p className="error__text">
         {message}
       </p>

src/components/Error/Error.scss

@@ -3,6 +3,7 @@
 .error {
   @extend %absolute-center;
   flex-flow: column nowrap;
+  padding: 10px;
 
   &__text {
     font-size: 30px;

src/components/Order/Order.js

@@ -2,60 +2,59 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import Loader from '../Loader';
-import Error from '../Error';
+import { OrderFooter } from '../OrderFooter';
+import { OrderCustomizationsSection } from '../OrderCustomizationsSection';
 
 import './Order.scss';
 
 export const Order = ({
-  deleteOrder,
+  hideModalWindow,
   order,
   isLoading,
   error,
+  altData,
 }) => {
   if (isLoading) {
     return <Loader />;
   }
 
-  const { imageUrl, title, itemDescription } = order;
-  const countItem = 1;
+  const {
+    imageUrl,
+    title,
+    itemDescription,
+    customizationsList = [],
+  } = !error ? order : altData;
+
   const srcImage = imageUrl || './images/no_image.png';
   const srcTitle = title || 'no-image icon';
 
   return (
     <aside className="modal">
       <div className="modal-window">
-        {error && <Error message={error} />}
-        {!error && (
-          <>
-            <img className="modal-window__img" src={srcImage} alt={srcTitle} />
-            <div className="modal-window__wrapper-content">
-              <p className="modal-window__title">{title}</p>
-              <p className="modal-window__description">{itemDescription}</p>
-              <div className="modal-window__footer">
-                <div className="counter">
-                  <img
-                    className="counter__button"
-                    src="./images/button-minus.svg"
-                    alt="icon minus"
-                  />
-                  <div className="counter__item">{countItem}</div>
-                  <img
-                    className="counter__button"
-                    src="./images/button-plus.svg"
-                    alt="icon plus"
-                  />
-                </div>
-                <button type="button" className="modal-window__button-order">
-                  {`Add ${countItem}`}
-                </button>
-              </div>
-            </div>
-          </>
-        )
+        <div className="modal-window__wrapper-img">
+          <img
+            className="modal-window__img"
+            src={srcImage}
+            alt={srcTitle}
+          />
+        </div>
+        <div className="modal__wrapper-content">
+          <p className="modal-window__title">{title}</p>
+          <p className="modal-window__description">{itemDescription}</p>
+        </div>
+        {customizationsList
+          .map(item => (
+            <OrderCustomizationsSection customizations={item} key={item.uuid} />
+          ))
         }
+        <div className="modal__wrapper-content">
+          <div className="modal-window__footer">
+            <OrderFooter altPrice={altData.price} />
+          </div>
+        </div>
         <div
-          onClick={deleteOrder}
-          onKeyPress={deleteOrder}
+          onClick={hideModalWindow}
+          onKeyPress={hideModalWindow}
           role="presentation"
         >
           <img
@@ -73,7 +72,8 @@ export const Order = ({
 Order.propTypes = {
   isLoading: PropTypes.bool,
   error: PropTypes.string,
-  deleteOrder: PropTypes.func.isRequired,
+  hideModalWindow: PropTypes.func.isRequired,
+  altData: PropTypes.shape().isRequired,
   order: PropTypes.shape(),
 };
 

src/components/Order/Order.scss

@@ -1,3 +1,5 @@
+@import '../../styles/utils.scss';
+
 .modal{
   z-index: 2;
   position: fixed;
@@ -7,12 +9,23 @@
   right: 0;
   background: rgba(0,0,0, 0.7);
 
+  &__wrapper-content {
+    padding: 0 34px;
+  }
+
   &-window {
     position: relative;
     margin: 80px auto 0;
     background: #fff;
-    width: 716px;
-    min-height: 300px;
+    width: 720px;
+    height: 90vh;
+    overflow-y: auto;
+
+    @media (max-width: $breack-point-tablet) {
+      width: 100%;
+      margin: 0;
+      height: 100%;
+    }
 
     &__button-close {
       position: absolute;
@@ -28,65 +41,40 @@
       }
     }
 
-    &__img {
-      display: block;
-      height: 375px;
-      margin: 0 auto 50px;
+    &__wrapper-img {
+      margin-bottom: 50px;
     }
 
-    &__wrapper-content {
-      padding: 0 34px 24px;
+    &__img {
+      width: 100%;
     }
 
     &__title {
       font-size: 30px;
       font-weight: 500;
       line-height: 21px;
-      margin-bottom: 2px;
+      margin-bottom: 8px;
+
+      @media (max-width: $breack-point-phone) {
+        font-size: 24px;
+      }
     }
 
     &__description {
       font-size: 14px;
       font-weight: 21px;
       color: #626262;
+      margin-bottom: 30px;
     }
 
     &__footer {
       display: flex;
-      justify-content: space-between;
       align-items: center;
-    }
-
-    &__button-order {
-      width: 485px;
-      height: 55px;
-      background: #247a00;
-      color: #fff;
-      font-weight: 500;
+      margin: 24px 0;
 
-      &:hover {
-        cursor: pointer;
+      @media (max-width: $breack-point-phone) {
+        display: block;
       }
     }
   }
 }
-
-.counter {
-  display: flex;
-  align-items: center;
-
-  &__button {
-    &:not(:last-of-type) {
-      margin-right: 17px;
-    }
-
-    &:hover{
-      cursor: pointer;
-    }
-  }
-
-  &__item {
-    margin-right: 17px;
-  }
-}
-

src/components/Order/index.js

@@ -1,25 +1,24 @@
 import { connect } from 'react-redux';
 
 import { Order } from './Order';
-import { setOrder, setModalWindow } from '../../store/actions';
+import { hideModalWindow } from '../../store/actions';
 import {
   selectOrder,
   selectRestaurantsListError,
   selectIsLoading,
+  selectAltDataModal,
 } from '../../store/selector';
 
 const mapStateToProps = state => ({
   order: selectOrder(state),
   error: selectRestaurantsListError(state),
   isLoading: selectIsLoading(state),
+  altData: selectAltDataModal(state),
 });
 
-const mapDispatchToProps = dispatch => ({
-  deleteOrder: () => {
-    dispatch(setModalWindow(false));
-    dispatch(setOrder(null));
-  },
-});
+const mapDispatchToProps = {
+  hideModalWindow,
+};
 
 const Enhanced = connect(
   mapStateToProps,

src/components/OrderCustomizationsOptions/OrderCustomizationsOptions.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import './OrderCustomizationsOptions.scss';
+
+export const OrderCustomizationsOptions = ({ option }) => {
+  const { title, uuid } = option;
+
+  return (
+    <div className="option">
+      <div className="option__checkbox">
+        <input id={uuid} type="checkbox" className="option__checkbox-input" />
+        <label htmlFor={uuid} className="option__checkbox-title">{title}</label>
+      </div>
+    </div>
+  );
+};
+
+OrderCustomizationsOptions.propTypes = {
+  option: PropTypes.arrayOf(PropTypes.shape({
+    title: PropTypes.string,
+    uuid: PropTypes.string,
+  })).isRequired,
+};