reseller to customer

This commit is contained in:
Almira Krdzic
2018-10-16 06:45:28 +02:00
parent b7ac53d195
commit afab22a30b
37 changed files with 852 additions and 152 deletions

View File

@@ -42,7 +42,7 @@ export const fetchPackageDetails = (params) => {
return dispatch => {
dispatch(requestPackageDetails());
return client.fetch({
url: `${API_SERVER}/wp-json/wc/v2/products/${params.idPackage}`,
url: `${API_SERVER}/wp-json/wc/v2/products/${params.idPackage}?cl_id=${params.shopId}`,
method: 'get'
})
.then(response => {
@@ -127,7 +127,8 @@ export const addToCart = (addParams) => {
'package_id': addParams.selectedPackage.id,
'price_id': addParams.selectedAgreement.idPrice,
'addons_ids': result.additionalPackages,
'options_ids': result.optionPackages
'options_ids': result.optionPackages,
'cl_id': addParams.shopId,
},
})
.then(response => {

View File

@@ -5,9 +5,9 @@ import HtmlClient from '../../helpers/HtmlClient';
import {
REQUEST_SHOP_PACKAGES,
RECIEVE_SHOP_PACKAGES,
REQUEST_SHOP_COMMERCIAL_LEADS,
RECIEVE_SHOP_COMMERCIAL_LEADS,
SELECT_SHOP_COMMERCIAL_LEAD
REQUEST_SHOPS,
RECEIVE_SHOPS,
SELECT_SHOP
} from '../../constants/coMarketConstants';
import { fromWCPackage } from '../../helpers/PackageHelper';
@@ -23,13 +23,13 @@ const recieveShopPackages = (json) => ({
shopPackages: json
});
export const fetchShopPackages = (cl, search) => {
export const fetchShopPackages = (shop, search) => {
return dispatch => {
dispatch(requestShopPackages());
let searchParam = search ? '?search=' +search : ''
return client.fetch({
url: `${API_SERVER}/wp-json/wc/v2/products?cl_id=${cl.idCommercialLead}` + searchParam,
url: `${API_SERVER}/wp-json/wc/v2/products?cl_id=${shop.id}` + searchParam,
})
.then(response => {
if (response.data) {
@@ -42,41 +42,38 @@ export const fetchShopPackages = (cl, search) => {
}
}
const requestShopCommercialLeads = () => ({
type: REQUEST_SHOP_COMMERCIAL_LEADS
const requestShops = () => ({
type: REQUEST_SHOPS
});
const recieveShopCommercialLeads = (json) => ({
type: RECIEVE_SHOP_COMMERCIAL_LEADS,
commercialLeads: json
const receiveShops = (json) => ({
type: RECEIVE_SHOPS,
shops: json
});
const generateClOptions = (commercialLeads) => {
commercialLeads.forEach((cl) => {
cl.value = cl.idCommercialLead;
cl.label = cl.commercialLeadName;
const generateShopOptions = (shops) => {
shops.forEach((shop) => {
shop.value = shop.id;
shop.label = shop.name;
});
return commercialLeads;
return shops;
}
export const fetchShopCommercialLeads = () => {
export const fetchShops = () => {
return dispatch => {
dispatch(requestShopCommercialLeads());
return client.fetch({url: `${API_SERVER}/wp-json/wiaas/commercial-leads` })
dispatch(requestShops());
return client.fetch({url: `${API_SERVER}/wp-json/wiaas/customer/0/shops` })
.then(response => {
if(response.data){
const clOptions = generateClOptions(response.data.map(cl => ({
idCommercialLead: cl.id,
commercialLeadName: cl.name
})));
const shopOptions = generateShopOptions(response.data);
dispatch(recieveShopCommercialLeads(clOptions));
dispatch(receiveShops(shopOptions));
if (clOptions.length) {
dispatch(selectCommercialLead(clOptions[0]));
dispatch(fetchShopPackages(clOptions[0]));
if (shopOptions.length) {
dispatch(selectShop(shopOptions[0]));
dispatch(fetchShopPackages(shopOptions[0]));
}
}
})
@@ -86,7 +83,7 @@ export const fetchShopCommercialLeads = () => {
}
}
export const selectCommercialLead = (cl) => ({
type: SELECT_SHOP_COMMERCIAL_LEAD,
selectedCommercialLead: cl
export const selectShop = (shopInfo) => ({
type: SELECT_SHOP,
selectedShop: shopInfo
});

View File

@@ -16,7 +16,7 @@ export const MainContainers = {
},
CoMarket: {
container: CoMarketContainer,
params: ['idCommercialLead', 'idPackage']
params: ['shopId', 'idPackage']
},
Cart: {
container: CartContainer,

View File

@@ -2,9 +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 REQUEST_SHOP_COMMERCIAL_LEADS = MODULE + 'REQUEST_SHOP_COMMERCIAL_LEADS';
export const RECIEVE_SHOP_COMMERCIAL_LEADS = MODULE + 'RECIEVE_SHOP_COMMERCIAL_LEADS';
export const SELECT_SHOP_COMMERCIAL_LEAD = MODULE + 'SELECT_SHOP_COMMERCIAL_LEAD';
export const REQUEST_SHOPS = MODULE + 'REQUEST_SHOPS';
export const RECEIVE_SHOPS = MODULE + 'RECEIVE_SHOPS';
export const SELECT_SHOP = MODULE + 'SELECT_SHOP';
export const REQUEST_PACKAGE_DETAILS = MODULE + 'REQUEST_PACKAGE_DETAILS';
export const RECIEVE_PACKAGE_DETAILS = MODULE + 'RECIEVE_PACKAGE_DETAILS';

View File

@@ -1,5 +1,4 @@
import React, {Component} from 'react';
import {cartTexts} from '../../../constants/cartConstants';
class CartIcon extends Component {
render() {

View File

@@ -1,10 +1,9 @@
@import '../../../styleConstants.scss';
#cart-count {
vertical-align: middle;
vertical-align: sub;
color: $accentColor;
font-size: 1.5rem;
border-radius: 1rem;
font-size: 1.6rem;
font-family: arial,sans-serif;
}

View File

@@ -17,7 +17,7 @@ class CoMarketContainer extends Component {
return (<Container fluid={true} id="co-market-container">
{
urlParams.idPackage ?
<CoMarketPackageDetailsContainer idPackage={urlParams.idPackage} idCommercialLead={urlParams.idCommercialLead}/> :
<CoMarketPackageDetailsContainer idPackage={urlParams.idPackage} shopId={urlParams.shopId}/> :
<CoMarketPackagesContainer/>
}
</Container>);

View File

@@ -16,8 +16,8 @@ class CoMarketNavContainer extends Component {
handleSearchChange(event) {
this.setState({searchValue: event.target.value});
if (this.props.selectedCommercialLead) {
this.props.dispatch(fetchShopPackages(this.props.selectedCommercialLead, event.target.value));
if (this.props.selectedShop) {
this.props.dispatch(fetchShopPackages(this.props.selectedShop, event.target.value));
}
}
@@ -42,7 +42,7 @@ class CoMarketNavContainer extends Component {
}
const mapStateToProps = (state) => ({
selectedCommercialLead: state.coMarketPackagesReducer.selectedCommercialLead
selectedShop: state.coMarketPackagesReducer.selectedShop
});
export default connect(mapStateToProps)(CoMarketNavContainer);

View File

@@ -26,14 +26,15 @@ class CoMarketPackageDetailsContainer extends Component {
selectedPackage: this.props.selectedPackage,
selectedAgreement: this.props.selectedAgreement,
selectedOptions: this.props.selectedOptions,
selectedAdditionals: this.props.selectedAdditionals
selectedAdditionals: this.props.selectedAdditionals,
shopId: this.props.shopId,
};
this.props.dispatch(addToCart(addParams));
}
componentDidMount() {
const {idPackage, idCommercialLead} = this.props;
this.props.dispatch(fetchPackageDetails({idPackage, idCommercialLead}));
const {idPackage, shopId} = this.props;
this.props.dispatch(fetchPackageDetails({idPackage, shopId}));
}
render() {

View File

@@ -1,6 +1,10 @@
import React, {Component} from 'react';
import {connect} from 'react-redux';
import {Row, Col} from 'reactstrap';
import {
Navbar,
Row,
Col
} from 'reactstrap';
import ShopItem from './components/ShopItem.jsx';
import WiaasBox from '../../mainComponents/box/WiaasBox.jsx';
import CoMarketNavContainer from './CoMarketNavContainer.jsx';
@@ -8,16 +12,19 @@ import {fetchShopPackages} from '../../actions/coMarket/coMarketPackagesActions'
class CoMarketPackagesContainer extends Component {
componentDidMount() {
if (this.props.selectedCommercialLead) {
this.props.dispatch(fetchShopPackages(this.props.selectedCommercialLead));
if (this.props.selectedShop) {
this.props.dispatch(fetchShopPackages(this.props.selectedShop));
}
}
render() {
const {shopPackages, selectedCommercialLead, isLoading} = this.props;
const {shopPackages, selectedShop, isLoading} = this.props;
return (
<div id="co-market-shop">
<Col>
<Navbar></Navbar>
</Col>
<Row>
<Col xl="8" lg="8" md="8" sm="12" xs="12">
<WiaasBox id="co-market-big-commercial">
@@ -43,7 +50,7 @@ class CoMarketPackagesContainer extends Component {
{
(shopPackages && !isLoading) &&
shopPackages.map((shopPackage, mapKey) => <ShopItem key={shopPackage.id}
idCommercialLead={selectedCommercialLead.value}
shopId={selectedShop.id}
shopPackage={shopPackage}/>)
}
</Row>
@@ -57,7 +64,7 @@ class CoMarketPackagesContainer extends Component {
const mapStateToProps = (state) => ({
shopPackages: state.coMarketPackagesReducer.shopPackages,
selectedCommercialLead: state.coMarketPackagesReducer.selectedCommercialLead,
selectedShop: state.coMarketPackagesReducer.selectedShop,
isLoading: state.coMarketPackagesReducer.isLoading
});

View File

@@ -1,14 +1,14 @@
import React, {Component} from 'react';
import {connect} from 'react-redux';
import Select from 'react-select';
import {fetchShopPackages, fetchShopCommercialLeads, selectCommercialLead} from '../../../actions/coMarket/coMarketPackagesActions';
import {fetchShopPackages, fetchShops, selectShop} from '../../../actions/coMarket/coMarketPackagesActions';
import {coMarketTexts} from '../../../constants/coMarketConstants';
class CoMarketCatalogSelect extends Component {
constructor(props) {
super(props);
this.handleClChange = this.handleClChange.bind(this);
this.handleShopChange = this.handleShopChange.bind(this);
this.handleSearchChange = this.handleSearchChange.bind(this);
this.state = {
searchValue : ''
@@ -16,56 +16,57 @@ class CoMarketCatalogSelect extends Component {
}
componentDidMount() {
this.props.dispatch(fetchShopCommercialLeads());
this.props.dispatch(fetchShops());
if(this.props.commercialLeads && this.props.cartItems && this.props.activeModule==='cart'){
const cl = this.props.commercialLeads.find((cl) => {return cl.idCommercialLead===this.props.cartItems[0].idCommercialLead});
this.props.dispatch(selectCommercialLead(cl));
if(this.props.shops && this.props.cartItems && this.props.activeModule==='cart'){
const cartShop = this.props.shops.find( shop => { return shop.id===this.props.cartItems[0].idCommercialLead });
this.props.dispatch(selectShop(cartShop));
}
}
componentWillReceiveProps(nextProps){
if(nextProps.activeModule==='cart' && nextProps.commercialLeads && nextProps.cartItems && nextProps.cartItems.length > 0){
const cl = nextProps.commercialLeads.find((cl) => {return cl.idCommercialLead===nextProps.cartItems[0].idCommercialLead});
nextProps.dispatch(selectCommercialLead(cl));
}
// if(nextProps.activeModule==='cart' && nextProps.shops && nextProps.cartItems && nextProps.cartItems.length > 0){
// const cartShop = this.props.shops.find( shop => { return shop.id === this.props.cartItems[0].idCommercialLead });
// nextProps.dispatch(selectShop(cartShop));
// }
if(nextProps.commercialLeads && nextProps.idCommercialLead && nextProps.activeModule === 'co-market'){
const cl = nextProps.commercialLeads.find((cl) => {return cl.idCommercialLead===nextProps.idCommercialLead});
nextProps.dispatch(selectCommercialLead(cl));
if(nextProps.shops && nextProps.idCommercialLead && nextProps.activeModule === 'co-market'){
const shop = nextProps.shops.find( shop => {return shop.id === nextProps.idCommercialLead });
nextProps.dispatch(selectShop(shop));
}
}
handleClChange(cl) {
this.props.dispatch(selectCommercialLead(cl));
this.props.dispatch(fetchShopPackages(cl));
handleShopChange(shop) {
this.props.dispatch(selectShop(shop));
this.props.dispatch(fetchShopPackages(shop));
}
handleSearchChange(event) {
this.setState({searchValue: event.target.value});
if (this.props.selectedCommercialLead) {
this.props.dispatch(fetchShopPackages(this.props.selectedCommercialLead, event.target.value));
if (this.props.selectedShop) {
this.props.dispatch(fetchShopPackages(this.props.selectedShop, event.target.value));
}
}
render() {
const {commercialLeads, selectedCommercialLead, idPackage, activeSubmodule} = this.props;
const {shops, selectedShop, idPackage, activeSubmodule} = this.props;
const isDisabled = (idPackage || this.props.activeModule === 'cart') ? true : false;
return (
<div id="co-market-catalog">
{
commercialLeads && activeSubmodule !== 'orders' &&
shops && activeSubmodule !== 'orders' &&
<div className="filters co-market-nav-div">
<div className="filter-name">{coMarketTexts.labels.CATALOGUE}:</div>
<Select value={selectedCommercialLead}
<Select value={selectedShop}
name="commercialLead"
className="filter-select"
placeholder={coMarketTexts.labels.SELECT_CL}
options={commercialLeads}
options={shops}
disabled={isDisabled}
clearable={false}
onChange={(cl) => {this.handleClChange(cl)}}
onChange={shop => {this.handleShopChange(shop)}}
/>
</div>
}
@@ -75,8 +76,8 @@ class CoMarketCatalogSelect extends Component {
}
const mapStateToProps = (state) => ({
commercialLeads: state.coMarketPackagesReducer.commercialLeads,
selectedCommercialLead: state.coMarketPackagesReducer.selectedCommercialLead,
shops: state.coMarketPackagesReducer.shops,
selectedShop: state.coMarketPackagesReducer.selectedShop,
idPackage: state.coMarketReducer.idPackage,
cartItems: state.cartReducer.cartItems,
activeSubmodule: state.pageReducer.activeSubmodule

View File

@@ -9,7 +9,7 @@ class ShopItem extends Component {
}
render() {
const {shopPackage, idCommercialLead} = this.props;
const {shopPackage, shopId} = this.props;
return (
@@ -21,7 +21,7 @@ class ShopItem extends Component {
alt="Card image cap"/>
<CardBody>
<CardTitle className="shop-package-title">
<Link to={`/co-market/${idCommercialLead}/${shopPackage.id}`}>
<Link to={`/co-market/${shopId}/${shopPackage.id}`}>
{this.getShopItemPackageTitle(shopPackage.name)}
</Link>
</CardTitle>
@@ -34,7 +34,7 @@ class ShopItem extends Component {
<span className={'flag-icon flag-icon-' + shopPackage.countryCode}></span>
</div>
<div className="shop-package-details-btn-layer">
<Link id={'shop-package-details-' + shopPackage.id} to={`/co-market/${idCommercialLead}/${shopPackage.id}`}>
<Link id={'shop-package-details-' + shopPackage.id} to={`/co-market/${shopId}/${shopPackage.id}`}>
<Button className="shop-package-details-btn">{coMarketTexts.buttons.DETAILS}</Button>
</Link>
</div>

View File

@@ -84,9 +84,8 @@ class Menu extends Component {
)
}
</Nav>
<div className="wiaas-divider nav-btn-cart-divider"></div>
<Nav className="nav-btn-cart navbar-right" navbar>
<NavItem id="nav-button-cart">
<NavItem id="nav-button-cart" className="navbar-button">
<NavLink tag={Link} to="/cart">
<CartIcon cartCount={this.props.cartCount} />
<span className="fa fa-shopping-cart cart-icon"></span>

View File

@@ -64,25 +64,21 @@
}
.cart-icon {
font-size: 1.6rem;
font-size: 1.2rem;
vertical-align: middle;
}
.cart-label {
margin-left: 0.5rem;
margin-left: 0.2rem;
font-size: 0.8rem;
vertical-align: sub;
}
.items-cart-count {
margin-right: 0.5rem;
margin-right: 0.2rem;
padding-left: 0.5rem;
}
.nav-btn-cart-divider {
height: 2.4rem !important;
}
.navbar-collapse {
min-width: 100%;
}
@@ -104,6 +100,12 @@
cursor: pointer;
}
#nav-profile {
.dropdown-menu .nav-link {
color: #7e7e7e !important;
}
}
@media all and (max-width: 768px) {
.navigation-bar {
min-height: 3.6rem;

View File

@@ -1,7 +1,7 @@
import {
RECIEVE_SHOP_PACKAGES,
RECIEVE_SHOP_COMMERCIAL_LEADS,
SELECT_SHOP_COMMERCIAL_LEAD,
RECEIVE_SHOPS,
SELECT_SHOP,
REQUEST_SHOP_PACKAGES
} from '../../constants/coMarketConstants';
@@ -20,15 +20,15 @@ moduleReducers[RECIEVE_SHOP_PACKAGES] = (state, action) => {
});
};
moduleReducers[RECIEVE_SHOP_COMMERCIAL_LEADS] = (state, action) => {
moduleReducers[RECEIVE_SHOPS] = (state, action) => {
return Object.assign({}, state, {
commercialLeads: action.commercialLeads
shops: action.shops
});
};
moduleReducers[SELECT_SHOP_COMMERCIAL_LEAD] = (state, action) => {
moduleReducers[SELECT_SHOP] = (state, action) => {
return Object.assign({}, state, {
selectedCommercialLead: action.selectedCommercialLead
selectedShop: action.selectedShop
});
};