update constant

Fixes

See merge request saburly/wiaas/new-wiaas!92

backend/app/plugins/wiaas/assets/css/menu.css

@@ -62,3 +62,122 @@
 .gravityflow-dicussion-item-value {
     padding: 10px;
 }
+
+.woocommerce-help-tip{
+    color:#666;
+    display:inline-block;
+    font-size:1.1em;
+    font-style:normal;
+    height:16px;
+    line-height:16px;
+    position:relative;
+    vertical-align:middle;
+    width:16px}
+
+.woocommerce-help-tip::after{
+    font-family:Dashicons;
+    speak:none;
+    font-weight:400;
+    font-variant:normal;
+    text-transform:none;
+    line-height:1;
+    -webkit-font-smoothing:antialiased;
+    margin:0;
+    text-indent:0;
+    position:absolute;
+    top:0;
+    left:0;
+    width:100%;
+    height:100%;
+    text-align:center;
+    content:"";
+    cursor:help
+}
+
+h2 .woocommerce-help-tip{
+    margin-top:-5px;
+    margin-left:.25em
+}
+
+/**
+  * Tooltips
+  */
+.tips {
+    cursor: help;
+    text-decoration: none;
+}
+
+img.tips {
+    padding: 5px 0 0;
+}
+
+#tiptip_holder {
+    display: none;
+    z-index: 8675309;
+    position: absolute;
+    top: 0;
+    /*rtl:ignore*/
+    left: 0;
+}
+#tiptip_holder.tip_top {
+    padding-bottom: 5px;
+}
+#tiptip_holder.tip_top #tiptip_arrow_inner {
+    margin-top: -7px;
+    margin-left: -6px;
+    border-top-color: #333;
+}
+#tiptip_holder.tip_bottom {
+    padding-top: 5px;
+}
+#tiptip_holder.tip_bottom #tiptip_arrow_inner {
+    margin-top: -5px;
+    margin-left: -6px;
+    border-bottom-color: #333;
+}
+#tiptip_holder.tip_right {
+    padding-left: 5px;
+}
+#tiptip_holder.tip_right #tiptip_arrow_inner {
+    margin-top: -6px;
+    margin-left: -5px;
+    border-right-color: #333;
+}
+#tiptip_holder.tip_left {
+    padding-right: 5px;
+}
+#tiptip_holder.tip_left #tiptip_arrow_inner {
+    margin-top: -6px;
+    margin-left: -7px;
+    border-left-color: #333;
+}
+
+#tiptip_content,
+.chart-tooltip,
+.wc_error_tip {
+    color: #fff;
+    font-size: 0.8em;
+    max-width: 150px;
+    background: #333;
+    text-align: center;
+    border-radius: 3px;
+    padding: 0.618em 1em;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+}
+#tiptip_content code,
+.chart-tooltip code,
+.wc_error_tip code {
+    padding: 1px;
+    background: #888;
+}
+
+#tiptip_arrow,
+#tiptip_arrow_inner {
+    position: absolute;
+    border-color: transparent;
+    border-style: solid;
+    border-width: 6px;
+    height: 0;
+    width: 0;
+}
+

backend/app/plugins/wiaas/assets/js/wiaas-admin-cl-packages.js

@@ -1,5 +1,15 @@
 jQuery(document).ready(function ($) {
 
+    $( document.body ).on( 'init_tooltips', function() {
+        $( '.woocommerce-help-tip' ).tipTip( {
+            'attribute': 'data-tip',
+            'fadeIn': 50,
+            'fadeOut': 50,
+            'delay': 200,
+            'defaultPosition': 'top'
+        } );
+    } ).trigger( 'init_tooltips' );
+
     $('#tabs').each(function() {
         var disabled = $( this ).data('disabled') || '';
 

backend/app/plugins/wiaas/includes/admin/admin-cl/class-wiaas-admin-cl-packages.php

@@ -40,6 +40,7 @@ class Wiaas_Admin_CL_Packages {
 		$plugin_url = untrailingslashit( plugins_url( '/', WIAAS_FILE ) );
 
 		wp_enqueue_style( 'wiaas_admin_menu', $plugin_url . '/assets/css/menu.css' );
+
 	}
 
 	public static function add_cl_packages_menu() {

backend/app/plugins/wiaas/includes/admin/admin-cl/views/html-cl-package-details.php

@@ -149,25 +149,6 @@ if ( ! defined( 'ABSPATH' ) ) {
 					<div class="inside">
 						<div class="panel-wrap">
 							<div class="panel">
-
-								<div class="wrap">
-									<div>
-										<i style="vertical-align: middle;" class="dashicons dashicons-info"></i>
-										<strong><?php esc_html_e('EPR', 'wiaas') ?></strong>
-										<span><?php esc_html_e('= Extra package recurrent commission', 'wiaas') ?></span>
-									</div>
-									<div>
-										<i style="vertical-align: middle;" class="dashicons dashicons-info"></i>
-										<strong><?php esc_html_e('ESR') ?></strong>
-										<span><?php esc_html_e('= Extra services and support recurrent commission', 'wiaas') ?></span>
-									</div>
-									<div>
-										<i style="vertical-align: middle;" class="dashicons dashicons-info"></i>
-										<strong><?php esc_html_e('Extra commission', 'wiaas') ?></strong>
-										<span><?php esc_html_e('= EPR + ESR', 'wiaas') ?></span>
-									</div>
-								</div>
-
 								<div id="tabs" data-disabled="<?php echo $has_default_cl_extras ? '' : '1' ; ?>">
 									<ul id="tabs-navigation">
 										<li><a href="#tabs-1"><?php esc_html_e('Default prices', 'wiaas') ?></a> | </li>

backend/app/plugins/wiaas/includes/admin/admin-cl/views/html-cl-package-prices.php

@@ -20,7 +20,13 @@ $id = isset($customer_id) ? 'extras_customer_'.$customer_id : 'extras_default';
 			?>
         </td>
 		<td><?php esc_html_e('Minimal sell price', 'wiaas') ?></td>
-		<td><?php esc_html_e('Extra commision', 'wiaas') ?></td>
+		<td><?php esc_html_e('Margin', 'wiaas') ?></td>
+        <td><?php esc_html_e('Margin services', 'wiaas') ?>
+            <?php echo wc_help_tip( __( 'Extra services and support recurrent commission', 'wiaas' ) );?>
+        </td>
+        <td><?php esc_html_e('Margin recurrent', 'wiaas') ?>
+            <?php echo wc_help_tip( __( 'Extra package recurrent commission', 'wiaas' ) );?>
+        </td>
 		<td><?php esc_html_e('Default price', 'wiaas') ?></td>
 		<td><?php esc_html_e('Visible?', 'wiaas') ?>
 			<?php
@@ -81,48 +87,81 @@ $id = isset($customer_id) ? 'extras_customer_'.$customer_id : 'extras_default';
 
 				</div>
 			</td>
-			<td class="form-group">
+            <td class="form-group">
-				<div class="form-control">
+                <div class="form-control">
-					<label>+</label>
+                    <label>+</label>
-					<input
+                    <input
-                        class="wiaas-cl-extra-input"
-                        data-target="wiaas_cl_fixed_extra_<?php esc_attr_e($extra_type, 'wiaas') ?>"
-                        data-type="fixed"
-						name="cl_extras[<?php esc_attr_e($extra_type, 'wiaas')?>][fixed]"
-						value="<?php esc_attr_e($cl_extras[$extra_type]['fixed'], 'wiaas') ?>"
-						type="text"
-					>
-				</div>
-				<?php
-				if($configured_price['package_pay_period'] > 0) {
-					?>
-					<div class="form-control">
-						<label>+</label>
-						<input
                             class="wiaas-cl-extra-input"
-                            data-target="wiaas_cl_recurrent_extra_<?php esc_attr_e($extra_type, 'wiaas') ?>"
+                            data-target="wiaas_cl_fixed_extra_<?php esc_attr_e($extra_type, 'wiaas') ?>"
-                            data-type="recurrent"
+                            data-type="fixed"
-							name="cl_extras[<?php esc_attr_e($extra_type, 'wiaas')?>][recurrent]"
+                            name="cl_extras[<?php esc_attr_e($extra_type, 'wiaas')?>][fixed]"
-							value="<?php esc_attr_e($cl_extras[$extra_type]['recurrent'], 'wiaas') ?>"
+                            value="<?php esc_attr_e($cl_extras[$extra_type]['fixed'], 'wiaas') ?>"
-							type="text"
+                            type="text"
-						>
+                    >
-						<label><?php esc_html_e('(EPR)', 'wiaas') ?></label>
+                </div>
-					</div>
+                <div class="form-control">
-					<?php
+                    <label>+</label>
-				}
+                    <input
-				?>
+                            class="wiaas-cl-extra-input"
-				<div class="form-control">
+                            type="text"
-					<label>+</label>
+                            readonly
-					<input
+                            value="0"
-                        class="wiaas-cl-extra-input"
+                    >
-                        data-target="wiaas_cl_monthly_extra_<?php esc_attr_e($extra_type, 'wiaas') ?>"
+                </div>
-                        data-type="services"
+            </td>
-						name="cl_extras[<?php esc_attr_e($extra_type, 'wiaas')?>][services]"
+
-						value="<?php esc_attr_e($cl_extras[$extra_type]['services'], 'wiaas') ?>"
+            <td class="form-group">
-						type="text"
+                <div class="form-control">
-					>
+                    <label>+</label>
-                    <label><?php esc_html_e('(ESR)', 'wiaas') ?></label>
+                    <input
-				</div>
+                            class="wiaas-cl-extra-input"
+                            type="text"
+                            readonly
+                            value="0"
+                    >
+                </div>
+                <div class="form-control">
+                    <label>+</label>
+                    <input
+                            class="wiaas-cl-extra-input"
+                            data-target="wiaas_cl_monthly_extra_<?php esc_attr_e($extra_type, 'wiaas') ?>"
+                            data-type="services"
+                            name="cl_extras[<?php esc_attr_e($extra_type, 'wiaas')?>][services]"
+                            value="<?php esc_attr_e($cl_extras[$extra_type]['services'], 'wiaas') ?>"
+                            type="text"
+                    >
+                </div>
+            </td>
+
+			<td class="form-group">
+
+                <?php
+                if($configured_price['package_pay_period'] > 0) {
+                    ?>
+                    <div class="form-control">
+                        <label>+</label>
+                        <input
+                                class="wiaas-cl-extra-input"
+                                type="text"
+                                readonly
+                                value="0"
+                        >
+                    </div>
+                    <div class="form-control">
+                        <label>+</label>
+                        <input
+                                class="wiaas-cl-extra-input"
+                                data-target="wiaas_cl_recurrent_extra_<?php esc_attr_e($extra_type, 'wiaas') ?>"
+                                data-type="recurrent"
+                                name="cl_extras[<?php esc_attr_e($extra_type, 'wiaas')?>][recurrent]"
+                                value="<?php esc_attr_e($cl_extras[$extra_type]['recurrent'], 'wiaas') ?>"
+                                type="text"
+                        >
+                    </div>
+                    <?php
+                }
+                ?>
+
 			</td>
 			<td>
 				<div> =

backend/app/plugins/wiaas/includes/admin/class-wiaas-admin-cl.php

@@ -37,6 +37,7 @@ class Wiaas_Admin_CL {
 		$plugin_url = untrailingslashit( plugins_url( '/', WIAAS_FILE ) );
 
 		wp_enqueue_script( 'wiaas_admin_cl_packages', $plugin_url . '/assets/js/wiaas-admin-cl-packages.js' );
+		wp_enqueue_script('jquery-tiptip');
 
 		wp_enqueue_style( 'wiaas_admin_cl', $plugin_url . '/assets/css/wiaas-admin-cl.css' );
 	}

backend/app/plugins/wiaas/includes/admin/class-wiaas-admin-organization.php

@@ -141,7 +141,7 @@ class Wiaas_Admin_Organization {
      * @param $admin_bar
      */
     public static function add_role_switcher_menu($admin_bar) {
-        if (is_super_admin()) {
+        if (get_current_user_id() === Wiaas_Authentication::SUPER_ADMIN_USER_ID) {
             $roles = array( 'administrator' );
         } else {
             $organization_id = wiaas_get_current_user_organization_id();

backend/app/plugins/wiaas/includes/admin/pricing/class-wiaas-admin-package-pricing.php

@@ -18,6 +18,9 @@ class Wiaas_Admin_Package_Pricing {
 		add_action('woocommerce_product_options_general_product_data', array(__CLASS__, 'render_edit_prices_link'));
 
 		add_filter('woocommerce_bundle_price_html',  array( __CLASS__, 'get_package_price_html' ), 10, 2);
+
+		add_filter('woocommerce_screen_ids', array(__CLASS__, 'add_package_pricing_page_to_woocommerce_screens'), 10, 1);
+
 	}
 
 	public static function get_package_price_html($price_html, $package) {
@@ -116,6 +119,10 @@ class Wiaas_Admin_Package_Pricing {
 		include 'views/html-package-pricing-page.php';
 	}
 
+	public static function add_package_pricing_page_to_woocommerce_screens( $screens ){
+	    $screens[] = 'product_page_wiaas-package_price_editor';
+	    return $screens;
+    }
 
 	// PRIVATE HELPERS
 

backend/app/plugins/wiaas/includes/admin/pricing/views/html-package-pricing-page.php

@@ -187,7 +187,9 @@ if ( ! defined( 'ABSPATH' ) ) {
                             <input type="hidden" name="id" value="<?php esc_attr_e($package->get_id(), 'wiaas') ?>">
 
                             <div class="form-field">
-                                <label><?php esc_html_e('Max cost margin:', 'wiaas') ?></label>
+                                    <label><?php esc_html_e('Max cost margin :', 'wiaas') ?>
+                                        <?php echo wc_help_tip('Product deactivation limit (total cost)') ?>
+                                    </label>
                                 <input
                                         id="wiaas_pricing_rules_max_cost_margin"
                                         name="wiaas_max_cost_margin"

backend/app/plugins/wiaas/includes/pricing/class-wiaas-package-pricing.php

@@ -15,7 +15,7 @@ class Wiaas_Package_Pricing {
 	 */
 	private static $pay_types = array(
 		'purchase' => array(
-			'title' => 'Purchase',
+			'title' => 'Purchase and monthly agreements',
 			'package_pay_period' => 0,
 			'services_contract_period' => 0,
 			'max_contract_period' => 36,
@@ -23,14 +23,14 @@ class Wiaas_Package_Pricing {
 			'labe'
 		),
 		'purchase_24' => array(
-			'title' => 'Purchase with 24M commitment',
+			'title' => 'Purchase and 36 month agreements',
 			'package_pay_period' => 0,
 			'services_contract_period' => 24,
 			'max_contract_period' => 36,
 			'period_unit' => 'month'
 		),
 		'managed_36' => array(
-			'title' => 'Managed service 36M rent',
+			'title' => '36 months financed rent and agreements',
 			'package_pay_period' => 36,
 			'services_contract_period'=> 36,
 			'max_contract_period' => 36,

frontend/src/actions/coMarket/coMarketPackagesActions.js

@@ -5,9 +5,12 @@ import HtmlClient from '../../helpers/HtmlClient';
 import {
     REQUEST_SHOP_PACKAGES,
     RECIEVE_SHOP_PACKAGES,
+    SEARCH_SHOP_PACKAGES_REQUEST,
+    SEARCH_SHOP_PACKAGES_RESULT,
     REQUEST_SHOPS,
     RECEIVE_SHOPS,
-    SELECT_SHOP
+    SELECT_SHOP,
+    SHOP_PAGE_SIZE
 } from '../../constants/coMarketConstants';
 import { fromWCPackage } from '../../helpers/PackageHelper';
 
@@ -17,30 +20,60 @@ const requestShopPackages = () => ({
     type: REQUEST_SHOP_PACKAGES,
     isLoading: true
 });
-const recieveShopPackages = (json) => ({
+const recieveShopPackages = (packages, page = 1) => ({
     type: RECIEVE_SHOP_PACKAGES,
     isLoading: false,
-    shopPackages: json
+    shopPackages: packages,
+    page: page,
 });
 
-export const fetchShopPackages = (shop, search) => {
+export const fetchShopPackages = (shop, page = 1) => {
     return dispatch => {
         dispatch(requestShopPackages());
-        let searchParam = search ?  '?search=' +search : ''
 
         return client.fetch({
-            url: `${API_SERVER}/wp-json/wc/v2/products?shop_id=${shop.id}` + searchParam,
+            url: `${API_SERVER}/wp-json/wc/v2/products?shop_id=${shop.id}&page=${page}&per_page=${SHOP_PAGE_SIZE + 1}`,
         })
             .then(response => {
                 if (response.data) {
-                    dispatch(recieveShopPackages(response.data.map(wcPackage => fromWCPackage(wcPackage))))
+                    const packages = response.data.map(wcPackage => fromWCPackage(wcPackage));
+                    dispatch(recieveShopPackages(packages, page))
                 }
             })
             .catch(error => {
                 client.onError(error, dispatch);
             });
     }
-}
+};
+
+const searchShopPackagesRequest = () => ({
+    type: SEARCH_SHOP_PACKAGES_REQUEST,
+    isLoading: true
+});
+const searchShopPackagesResult = (packages) => ({
+    type: SEARCH_SHOP_PACKAGES_RESULT,
+    isLoading: false,
+    shopPackages: packages,
+});
+
+export const searchShopPackages = (shop, search) => {
+    return dispatch => {
+        dispatch(searchShopPackagesRequest());
+
+        return client.fetch({
+            url: `${API_SERVER}/wp-json/wc/v2/products?shop_id=${shop.id}&search=${search}`,
+        })
+            .then(response => {
+                if (response.data) {
+                    const packages = response.data.map(wcPackage => fromWCPackage(wcPackage));
+                    dispatch(searchShopPackagesResult(packages))
+                }
+            })
+            .catch(error => {
+                client.onError(error, dispatch);
+            });
+    }
+};
 
 const requestShops = () => ({
     type: REQUEST_SHOPS

frontend/src/config.js

@@ -1,4 +1,4 @@
-const APPLICATION_NAME = 'Co-Market';
+const APPLICATION_NAME = 'WIAAS Market';
 const API_VERSION = 'v2';
 
 const API_SERVER_BASE = process.env.REACT_APP_API_URL;

frontend/src/constants/coMarketConstants.js

@@ -2,6 +2,9 @@ const MODULE = 'CO_MARKET_';
 export const REQUEST_SHOP_PACKAGES = MODULE + 'REQUEST_SHOP_PACKAGES';
 export const RECIEVE_SHOP_PACKAGES = MODULE + 'RECIEVE_SHOP_PACKAGES';
 
+export const SEARCH_SHOP_PACKAGES_REQUEST = MODULE + 'SEARCH_SHOP_PACKAGES_REQUEST';
+export const SEARCH_SHOP_PACKAGES_RESULT = MODULE + 'SEARCH_SHOP_PACKAGES_RESULT';
+
 export const REQUEST_SHOPS = MODULE + 'REQUEST_SHOPS';
 export const RECEIVE_SHOPS = MODULE + 'RECEIVE_SHOPS';
 export const SELECT_SHOP = MODULE + 'SELECT_SHOP';
@@ -105,6 +108,9 @@ export const coMarketTexts = {
     },
     buttons: {
         ADD_TO_CART: 'Add to cart',
-        DETAILS: 'Details'
+        DETAILS: 'Details',
+        LOAD_MORE: 'Load more'
     }
 }
+
+export const SHOP_PAGE_SIZE = 12;

frontend/src/containers/coMarket/CoMarketNavContainer.jsx

@@ -1,7 +1,7 @@
 import React, {Component} from 'react';
 import {connect} from 'react-redux';
 import {Row, Col, Input} from 'reactstrap';
-import {fetchShopPackages} from '../../actions/coMarket/coMarketPackagesActions';
+import {searchShopPackages, fetchShopPackages} from '../../actions/coMarket/coMarketPackagesActions';
 import {coMarketTexts} from '../../constants/coMarketConstants';
 
 class CoMarketNavContainer extends Component {
@@ -15,9 +15,12 @@ class CoMarketNavContainer extends Component {
     }
 
     handleSearchChange(event) {
-        this.setState({searchValue: event.target.value});
+        const s = event.target.value;
-        if (this.props.selectedShop) {
+        this.setState({searchValue: s});
-            this.props.dispatch(fetchShopPackages(this.props.selectedShop, event.target.value));
+        if (this.props.selectedShop && s) {
+            this.props.dispatch(searchShopPackages(this.props.selectedShop, s));
+        } else if (this.props.selectedShop) {
+            this.props.dispatch(fetchShopPackages(this.props.selectedShop));
         }
     }
 
@@ -42,7 +45,8 @@ class CoMarketNavContainer extends Component {
 }
 
 const mapStateToProps = (state) => ({
-    selectedShop: state.coMarketPackagesReducer.selectedShop
+    selectedShop: state.coMarketPackagesReducer.selectedShop,
+    shopPage: state.coMarketPackagesReducer.shopPage,
 });
 
 export default connect(mapStateToProps)(CoMarketNavContainer);

frontend/src/containers/coMarket/CoMarketPackagesContainer.jsx

@@ -3,12 +3,14 @@ import {connect} from 'react-redux';
 import {
     Navbar,
     Row,
-    Col
+    Col,
+    Button
 } from 'reactstrap';
 import ShopItem from './components/ShopItem.jsx';
 import WiaasBox from '../../mainComponents/box/WiaasBox.jsx';
 import CoMarketNavContainer from './CoMarketNavContainer.jsx';
 import {fetchShopPackages} from '../../actions/coMarket/coMarketPackagesActions';
+import {coMarketTexts} from "../../constants/coMarketConstants";
 
 class CoMarketPackagesContainer extends Component {
     componentDidMount() {
@@ -17,8 +19,14 @@ class CoMarketPackagesContainer extends Component {
         }
     }
 
+    onLoadMore() {
+        if (this.props.selectedShop) {
+            this.props.dispatch(fetchShopPackages(this.props.selectedShop, this.props.shopPage + 1));
+        }
+    }
+
     render() {
-        const {shopPackages, selectedShop, isLoading} = this.props;
+        const {shopPackages, selectedShop, isLoading, shopHasMorePackages, shopSearch} = this.props;
 
         return (
             <div id="co-market-shop">
@@ -28,12 +36,12 @@ class CoMarketPackagesContainer extends Component {
                 <Row>
                     <Col xl="8" lg="8" md="8" sm="12" xs="12">
                         <WiaasBox id="co-market-big-commercial">
-                              <img className="description-photo" src="https://res.cloudinary.com/co-market/image/upload/v1524472688/Co-Market/CoMarketStartsida_MAIN.jpg" alt="big-commercial"/>
+                              <img className="description-photo" src="/static/img/WIAAS_Market_banner.jpg" alt="big-commercial"/>
                         </WiaasBox>
                     </Col>
                     <Col xl="4" lg="4" md="4" sm="12" xs="12">
                         <WiaasBox id="co-market-commercials">
-                            <img alt="wiaas commercial" src="https://res.cloudinary.com/co-market/image/upload/v1524472688/Co-Market/CoMarketStartsida_OFFERCoor.jpg" className="commercial-photo"/>
+                            <img alt="wiaas commercial" src="/static/img/WIAAS_Market_SMO_infobox.jpg" className="commercial-photo"/>
                         </WiaasBox>
                     </Col>
                 </Row>
@@ -41,22 +49,34 @@ class CoMarketPackagesContainer extends Component {
                     <Col xl="8" lg="12" md="12">
                         <WiaasBox id="co-market-packages" customHeader={CoMarketNavContainer}>
                             <Row>
+                                {
+                                    (shopPackages) &&
+                                    shopPackages.map((shopPackage, mapKey) => <ShopItem key={shopPackage.id}
+                                                                                        shopId={selectedShop.id}
+                                                                                        shopPackage={shopPackage}/>)
+                                }
                                 {
                                     isLoading &&
                                     <Col xl="12" className="loader">
                                         <i className="fa fa-spinner fa-spin fa-3x" aria-hidden="true"></i>
                                     </Col>
                                 }
-                                {
-                                    (shopPackages && !isLoading) &&
-                                    shopPackages.map((shopPackage, mapKey) => <ShopItem key={shopPackage.id}
-                                                                                        shopId={selectedShop.id}
-                                                                                        shopPackage={shopPackage}/>)
-                                }
                             </Row>
                         </WiaasBox>
                     </Col>
                 </Row>
+                {
+                    shopHasMorePackages && !isLoading && !shopSearch && (
+                        <Row>
+                            <Col xl="8" lg="12" md="12">
+                                <Button
+                                    size="lg" block outline
+                                    className="shop-package-load-more-btn"
+                                    onClick={() => {this.onLoadMore()}}
+                                >{coMarketTexts.buttons.LOAD_MORE}</Button>
+                            </Col>
+                        </Row>)
+                }
             </div>
         );
     }
@@ -64,6 +84,9 @@ class CoMarketPackagesContainer extends Component {
 
 const mapStateToProps = (state) => ({
     shopPackages: state.coMarketPackagesReducer.shopPackages,
+    shopHasMorePackages: state.coMarketPackagesReducer.shopHasMorePackages,
+    shopPage: state.coMarketPackagesReducer.shopPage,
+    shopSearch: state.coMarketPackagesReducer.shopSearch,
     selectedShop: state.coMarketPackagesReducer.selectedShop,
     isLoading: state.coMarketPackagesReducer.isLoading
 });

frontend/src/containers/coMarket/components/CoMarketCatalogSelect.jsx

@@ -9,7 +9,6 @@ class CoMarketCatalogSelect extends Component {
         super(props);
 
         this.handleShopChange = this.handleShopChange.bind(this);
-        this.handleSearchChange = this.handleSearchChange.bind(this);
         this.state = {
             searchValue : ''
         };
@@ -41,14 +40,6 @@ class CoMarketCatalogSelect extends Component {
         this.props.dispatch(fetchShopPackages(shop));
     }
 
-    handleSearchChange(event) {
-        this.setState({searchValue: event.target.value});
-
-        if (this.props.selectedShop) {
-            this.props.dispatch(fetchShopPackages(this.props.selectedShop,  event.target.value));
-        }
-    }
-
     render() {
         const {shops, selectedShop, idPackage, activeSubmodule} = this.props;
         const isDisabled = (idPackage || this.props.activeModule === 'cart') ? true : false;

frontend/src/containers/coMarket/style/CoMarket.scss

@@ -89,6 +89,18 @@
         font-weight: $font-weight;
     }
 
+    .shop-package-load-more-btn {
+        border-radius: 0;
+        color: #e25c56;
+        font-size: 1rem;
+        border: 1px solid rgba(0, 0, 0, 0.125);
+
+        &:hover, &:active, &:focus {
+            background: $hoverColor;
+            box-shadow: none !important;
+        }
+    }
+
     .search-layer{
         display:flex;
         align-items:center;
@@ -131,7 +143,6 @@
 }
 
 #co-market-big-commercial{
-    background: $whiteColor;
     text-align: center;
 
     .ricoh-text {
@@ -144,13 +155,24 @@
 }
 
 #co-market-commercials {
-    background: $whiteColor;
-
     .commercial-photo {
         width: 100%;
     }
 }
 
+@media (min-width: 768px) {
+
+    #co-market-commercials {
+        position: relative;
+
+        .commercial-photo {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+        }
+    }
+}
+
 #co-market-catalog {
     .filter-name {
         margin-top: 0.4rem;

frontend/src/reducers/coMarket/coMarketPackagesReducers.js

@@ -2,20 +2,74 @@ import {
     RECIEVE_SHOP_PACKAGES,
     RECEIVE_SHOPS,
     SELECT_SHOP,
-    REQUEST_SHOP_PACKAGES
+    REQUEST_SHOP_PACKAGES,
+    SHOP_PAGE_SIZE,
+    SEARCH_SHOP_PACKAGES_REQUEST,
+    SEARCH_SHOP_PACKAGES_RESULT,
 } from '../../constants/coMarketConstants';
 
 const moduleReducers = {};
 
 moduleReducers[REQUEST_SHOP_PACKAGES] = (state, action) => {
     return Object.assign({}, state, {
+        isLoading: action.isLoading,
+        shopSearch: false,
+    });
+};
+
+moduleReducers[RECIEVE_SHOP_PACKAGES] = (state = {}, action) => {
+
+    // implement paging
+    // paging is implemented in a way that requested number of packages is {page_size + 1}
+    // this way if retrieved number of packages is greater than page size there may be more packages
+
+    const shopPage = action.page || 1;
+    let shopPackages = [];
+    let shopPackagesDiff = [];
+    let retrievedShopPackages = action.shopPackages || [];
+
+    // append newly retrieved packages to existing ones if more packages are loaded
+    if (state.shopPage && shopPage > state.shopPage) {
+        shopPackages = state.loadedShopPackages || [];
+        // get ignored packages from previous request
+        const oldShopPackagesDiff = state.shopPackagesDiff || [];
+        // append packages ignored previous time to the beginning
+        retrievedShopPackages = oldShopPackagesDiff.concat(retrievedShopPackages);
+    }
+
+    // if number of packages is greater than page size there may be more of them to retrieve
+    const hasMorePages = retrievedShopPackages.length > SHOP_PAGE_SIZE;
+
+    // ignore all packages over limit of page size (they will be displayed at the beginning of the next request)
+    while (retrievedShopPackages.length > SHOP_PAGE_SIZE) {
+        shopPackagesDiff.push(retrievedShopPackages.pop());
+    }
+
+    // append packages from this page to existing ones
+    shopPackages = shopPackages.concat(retrievedShopPackages);
+
+    return Object.assign({}, state, {
+        shopPackages: shopPackages,
+        loadedShopPackages: shopPackages,
+        shopPackagesDiff: shopPackagesDiff,
+        shopPage: shopPage,
+        shopSearch: false,
+        shopHasMorePackages: hasMorePages,
         isLoading: action.isLoading
     });
 };
 
-moduleReducers[RECIEVE_SHOP_PACKAGES] = (state, action) => {
+moduleReducers[SEARCH_SHOP_PACKAGES_REQUEST] = (state, action) => {
     return Object.assign({}, state, {
-        shopPackages: action.shopPackages,
+        shopSearch: true,
+        isLoading: action.isLoading
+    });
+};
+
+moduleReducers[SEARCH_SHOP_PACKAGES_RESULT] = (state, action) => {
+    return Object.assign({}, state, {
+        shopPackages: action.shopPackages || [],
+        shopSearch: true,
         isLoading: action.isLoading
     });
 };