- {
- selectedAgreement &&
-
-
-
- | {coMarketTexts.labels.ON_DELIVERY} |
- {coMarketTexts.labels.MONTHLY} |
-
-
-
-
- |
- {this.getFinalPrice(selectedAgreement, selectedOptions, selectedAdditionals, 'fixedExtra').toLocaleString()} {currency}
- |
-
- {(this.getFinalPrice(selectedAgreement, selectedOptions, selectedAdditionals, 'recurentExtra')
- + this.getFinalPrice(selectedAgreement, selectedOptions, selectedAdditionals, 'servicesExtra')).toLocaleString()}
- {' '}{currency}
- |
-
-
-
- }
+
+
+
+ {coMarketTexts.labels.ON_DELIVERY}:
+
+
+ {coMarketTexts.labels.MONTHLY}:
+
+
+
+
+
+ {this.getFormatedFixedPrice(selectedAgreement, selectedOptions, selectedAdditionals)}
+
+
+
+
+ {this.getFormatedRecurrentPrice(selectedAgreement, selectedOptions, selectedAdditionals)}
+
+
+
);
}
diff --git a/frontend/src/containers/coMarket/style/CoMarket.scss b/frontend/src/containers/coMarket/style/CoMarket.scss
index b8f0501..e3d3246 100644
--- a/frontend/src/containers/coMarket/style/CoMarket.scss
+++ b/frontend/src/containers/coMarket/style/CoMarket.scss
@@ -1,59 +1,68 @@
@import '../../../styleConstants.scss';
#co-market-shop {
- .shop-package-title {
- font-size: 1rem;
- height: 2rem;
- }
-
- .shop-package-title a {
- font-size: $font-size-msmall;
- font-weight: $font-weight;
- text-align: left;
- color: $header-background;
- }
-
- .shop-package-reference {
- font-size: $font-size-xsmal;
- font-weight: $font-weight;
- text-align: left;
- color: $warmGreyColor;
- }
-
- .shop-package-country {
- display: inline-block;
- width: 50%;
- font-size: $font-size-xsmal;
- text-align: left;
- color: $warmGreyColor;
- }
-
- .shop-package-details-btn-layer{
- display: inline-block;
- width: 50%;
- text-align: right;
- }
-
- .shop-package-details-btn{
- border-radius: 50px;
- background-color: $whiteColor;
- border: solid 0.7px $borderColor;
- color: $darkBlue;
- font-weight: $font-weight;
- font-size: $font-size-xsmal;
- cursor: pointer;
- }
-
.shop-package-item{
margin-top: 1rem;
- border-radius: 4px;
+ border-radius: 0;
background-color: $whiteColor;
- box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
- }
+ // box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+
+ .card-body {
+ background: rgb(251, 251, 251);
+ }
+
+ .shop-package-details-btn{
+ border-radius: 50px;
+ background-color: $accentColor;
+ border: none;
+ color: $whiteColor;
+ font-weight: $font-weight;
+ font-size: $font-size-xsmal;
+ cursor: pointer;
+ &:focus, &:hover {
+ box-shadow: 0 0 0 0.1rem lighten($accentColor, 0.9) !important;
+ }
+ }
+
+ .shop-package-title {
+ font-size: 1rem;
+ height: 2rem;
+ }
+
+ .shop-package-title a {
+ font-size: $font-size-msmall;
+ font-weight: $font-weight;
+ text-align: left;
+ color: $header-background;
+ }
+
+ .shop-package-reference {
+ font-size: $font-size-xsmal;
+ font-weight: $font-weight;
+ text-align: left;
+ color: $warmGreyColor;
+ margin-bottom: 2rem;
+ }
+
+ .shop-package-country {
+ display: inline-block;
+ width: 50%;
+ font-size: $font-size-xsmal;
+ text-align: left;
+ color: $warmGreyColor;
+ }
+
+ .shop-package-details-btn-layer{
+ display: inline-block;
+ width: 50%;
+ text-align: right;
+ }
+
+ .flag-icon{
+ border-radius: 2px;
+ margin-left: 0.2rem;
+ }
- .flag-icon{
- border-radius: 2px;
- margin-left: 0.2rem;
}
.wiaas-box-header {
diff --git a/frontend/src/containers/coMarket/style/CoMarketPackageDetailsContainer.scss b/frontend/src/containers/coMarket/style/CoMarketPackageDetailsContainer.scss
index 50eb2a3..aa6c65a 100644
--- a/frontend/src/containers/coMarket/style/CoMarketPackageDetailsContainer.scss
+++ b/frontend/src/containers/coMarket/style/CoMarketPackageDetailsContainer.scss
@@ -31,6 +31,8 @@
.shop-package-label{
display: inline-block;
+ color: $font-light-color;
+ font-weight: 600;
}
.shop-package-text {
@@ -48,6 +50,7 @@
.document-link{
color: #33425b;
+ padding: 6px 12px;
cursor: pointer;
}
}
@@ -55,23 +58,68 @@
#shop-package-buy-info{
padding: 2rem;
- .shop-package-pricing {
- > div.row {
- margin: 0 32px 0 0;
+ .shop-package-options{
+ margin: 1rem 0;
+ input[type=radio], input[type=checkbox] {
+ position: relative;
+ margin: 0 10px 0 0;
+ }
+ .option-name {
+ color: $font-dark-color;
+ }
+ .dropdown-toggle {
+ border: 1px solid $hoverColor;
+ border-radius: $box-radius;
+ padding: 0.375rem 0.75rem;
+ cursor: pointer;
+ margin: 20px 0;
+ }
+ .shop-package-option {
+ &-selected {
+ background: $lightHoverColor;
+ }
+ &-disabled {
+ .option-name {
+ opacity: 0.5;
+ }
+ }
+
+ &:not(.shop-package-option-disabled) {
+ &:hover {
+ background: $hoverColor;
+ }
+ label {
+ cursor: pointer;
+ }
+ }
+
+ &-header {
+ color: $font-light-color;
+ font-weight: 600;
+ }
+ &-description {
+ padding-top: 0.5rem;
+ font-size: $font-size-msmall;
+ margin-left: 38px;
+ color: $font-light-color;
+ }
+ label {
+ padding: 0.375rem 0.75rem;
+ margin-right: 0.855rem;
+ }
+ }
+ &-pricing {
+ border-bottom: 2px solid $title-color;
+ margin: 3rem 0;
+ label {
+ margin-right: 0 !important;
+ min-height: 3rem;
+ padding-right: 0 !important;
+ }
}
}
- .shop-package-calculated-price {
- font-weight: $font-weight;
- }
-
- .shop-package-options{
- margin: 1rem 0;
- border-bottom: 2px solid $title-color;
- }
-
.not-available {
- margin-top: 1rem;
margin-left: 0.2rem;
color: $not-available-status-color;
font-weight: $font-weight;
@@ -79,93 +127,31 @@
}
.price-info-btn {
- color: $info-color;
cursor: pointer;
- padding: 0.5rem;
+ width: 1.605rem;
+ padding: 0.4rem;
}
.add-to-cart-btn {
cursor: pointer;
- color: $darkGreyColor;
- background-color: $whiteColor;
- border-color:$warmGreyColor;
-
- }
-
- .selected-option {
- background: $hoverColor;
- }
-
- .option-selection {
- padding: 0.5rem 0;
- margin: 0;
- flex-wrap: nowrap;
-
- > label {
- cursor: pointer;
- margin: 0;
- flex-wrap: nowrap;
+ color: #fff;
+ background-color: $accentColor;
+ border: none;
+ &:focus, &:hover {
+ box-shadow: 0 0 0 0.1rem lighten($accentColor, 0.9) !important;
}
- input.price-type-option {
- position: relative;
- margin: 0 10px 0 0;
- }
-
- span.option-name {
- font-size: $font-size-small;
- }
- }
-
- .option-selection:hover {
- background: $footer-background;
- color: $whiteColor;
- }
-
- .option-selection:hover .price-info-btn {
- color: $whiteColor;
- }
-
- .option-description {
- padding-top: 0.5rem;
- font-size: $font-size-msmall;
- height: 2rem;
- }
-
- .price-info-popover {
- max-width: 50rem;
}
.recurent-total-price{
font-size: $font-size-msmall;
}
- .selection-price{
- background: $hoverColor;
- display: inline-block;
- border-radius: $box-radius;
- font-size: $font-size-big;
- font-weight: bold;
- }
-
- .price-table {
- width: 8rem;
- }
-
- .main-price {
- width: auto;
- }
-
- .price-table th{
- padding: 0.5rem;
- }
-
- .price-table td{
- border-top: 1px solid $darkGreyColor;
- padding: 0.5rem;
- }
-
- .option-price-table{
- font-size: $font-size-xsmal;
+ .shop-package-price{
+ margin: 1rem 0.855rem 1rem 0;
+ padding: 0.375rem 0.75rem;
+ h6 {
+ color: $font-light-color;
+ }
}
}
diff --git a/frontend/src/helpers/OrderHelper.js b/frontend/src/helpers/OrderHelper.js
index e9f50ff..71f4a15 100644
--- a/frontend/src/helpers/OrderHelper.js
+++ b/frontend/src/helpers/OrderHelper.js
@@ -24,7 +24,7 @@ export const fromWCOrder = (WCOrder) => {
reference: WCOrder['reference'],
assignedTo: 'assigned to',
fixedPrice: WCOrder.total,
- recurringPrice: 0,
+ recurringPrice: WCOrder['recurring_price'],
status: WCOrder.status,
currency: WCOrder.currency,
billing:{
@@ -49,6 +49,15 @@ export const fromWCOrder = (WCOrder) => {
payPeriod: packageLine['pay_period'],
shortDesc: packageLine['short_desc'],
dateCompleted: formatDate(packageLine['date_completed']),
+ additionalPackages: packageLine['additional_packages'] ? packageLine['additional_packages'].map(additionalPackage => ({
+ idPackage: additionalPackage.id,
+ packageName: additionalPackage.name,
+ })) : [],
+ options: packageLine['options'] ? packageLine['options'].map(packageOption => ({
+ idPackage: packageOption.id,
+ packageName: packageOption.name,
+ groupName: packageOption['group_name'] || '',
+ })) : [],
};
}),
process: processInfo,
@@ -61,6 +70,6 @@ export const fromWCOrder = (WCOrder) => {
})) : [],
deliveryAddress: formatAddress(WCOrder.shipping),
customer: WCOrder.customer,
- commercialLead: WCOrder['commercial_lead']
+ commercialLead: WCOrder['commercial_lead'],
}
};
\ No newline at end of file
diff --git a/frontend/src/helpers/PackageHelper.js b/frontend/src/helpers/PackageHelper.js
index 142bf9f..d6b0087 100644
--- a/frontend/src/helpers/PackageHelper.js
+++ b/frontend/src/helpers/PackageHelper.js
@@ -1,6 +1,44 @@
const DEFAULT_PACKAGE_IMG = 'static/img/no-photo-package.jpg';
+function extractPrices(wcPackageId, prices) {
+ return prices.map(price => ({
+ idPrice: price.id,
+ idPaymentType: price.id,
+ payType: price['payment_type'],
+ isSameCompanyAsCl: false,
+ idPackage: wcPackageId,
+ periodUnit: price['period_unit'],
+ maxContractPeriod: price['max_contract_period'],
+ packagePayPeriod: price['package_pay_period'],
+ servicesContractPeriod: price['services_contract_period'],
+ fixedExtra: price['fixed_extra'],
+ servicesExtra: price['services_extra'],
+ recurrentExtra: price['recurrent_extra']
+ }));
+}
+
+function extractGroups(wcPackageGroups) {
+ const extractedGroups = {};
+
+ Object.keys(wcPackageGroups).forEach(key => {
+ const group = wcPackageGroups[key];
+ extractedGroups[key] = {
+ groupName: group.name,
+ idGroup: group.id,
+ options: group.options.map(option => ({
+ idOptionPackage: option.id,
+ optionName: option.name,
+ isDefault: option.default,
+ shortDescription: option.description,
+ prices: extractPrices(option.id, option.prices),
+ })),
+ };
+ });
+
+ return extractedGroups;
+}
+
export const fromWCPackage = wcPackage => {
return {
id: wcPackage.id,
@@ -8,25 +46,23 @@ export const fromWCPackage = wcPackage => {
image: wcPackage.images[0].src || DEFAULT_PACKAGE_IMG,
hasImage: !!wcPackage.images.length,
name: wcPackage.name,
- country: 'Sweden',
- countryCode: 'se',
- currency: 'SEK',
- documents: [],
- shortDescription: wcPackage.description,
- prices: wcPackage.prices.map(price => ({
- idPrice: price.id,
- idPaymentType: price.id,
- payType: price['payment_type'],
- isSameCompanyAsCl: false,
+ country: wcPackage.country,
+ countryCode: wcPackage['country_code'],
+ currency: wcPackage.currency,
+ documents: wcPackage.documents ? wcPackage.documents.map(document => ({
+ idDocument: document.id,
+ documentName: document.name,
+ extension: document.extension,
idPackage: wcPackage.id,
- periodUnit: price['period_unit'],
- maxContractPeriod: price['max_contract_period'],
- packagePayPeriod: price['package_pay_period'],
- servicesContractPeriod: price['services_contract_period'],
- fixedExtra: price['minimal_fixed_price'],
- servicesExtra: price['minimal_services_price'],
- recurentExtra: price['recurrent_price']
- })) || [],
- groups: [],
+ })) : [],
+ shortDescription: wcPackage.description,
+ prices: extractPrices(wcPackage.id, wcPackage.prices || []),
+ groups: extractGroups(wcPackage.groups || {}),
+ additionalPackages: wcPackage['additional_packages'] ? wcPackage['additional_packages'].map(additionalPackage =>({
+ idAdditionalPackage: additionalPackage.id,
+ packageName: additionalPackage.name,
+ shortDescription: additionalPackage.description,
+ prices: extractPrices(additionalPackage.id, additionalPackage.prices)
+ })) : [],
}
};
\ No newline at end of file
diff --git a/frontend/src/helpers/coMarket/PriceHelper.js b/frontend/src/helpers/coMarket/PriceHelper.js
index 3e82760..f982dbc 100644
--- a/frontend/src/helpers/coMarket/PriceHelper.js
+++ b/frontend/src/helpers/coMarket/PriceHelper.js
@@ -19,7 +19,11 @@ class PriceHellper {
}
hasRecurrentPrice(selectedPrice){
- return selectedPrice && (selectedPrice.recurentExtra > 0 || selectedPrice.servicesExtra > 0);
+ return selectedPrice && (selectedPrice.recurrentExtra > 0 || selectedPrice.servicesExtra > 0);
+ }
+
+ calculateCartItemTotal(cartItem) {
+
}
}
diff --git a/frontend/src/mainComponents/dialog/DialogBox.scss b/frontend/src/mainComponents/dialog/DialogBox.scss
index 399629d..ed9bdc9 100644
--- a/frontend/src/mainComponents/dialog/DialogBox.scss
+++ b/frontend/src/mainComponents/dialog/DialogBox.scss
@@ -95,10 +95,13 @@
.generic-dialog-box {
min-width: 30%;
- .btn-success {
- background-color: $greenColor;
- border-color: $borderColor;
+ .btn-success, .btn-success:active, .btn-success:hover, .btn-success:focus {
+ background-color: $accentColor !important;
+ border: none !important;
cursor: pointer;
+ &:focus, &:hover {
+ box-shadow: 0 0 0 0.1rem lighten($accentColor, 0.9) !important;
+ }
}
.btn-secondary {
diff --git a/frontend/src/styleConstants.scss b/frontend/src/styleConstants.scss
index c8fb70f..2f29d34 100644
--- a/frontend/src/styleConstants.scss
+++ b/frontend/src/styleConstants.scss
@@ -12,8 +12,10 @@ $ricohRed: #d2063a;
$greenColor: #34c388;
$shadow-color: rgba(0, 0, 0, 0.07);
$blueColor: #2b6279;
-$hoverColor: #F8F8F8;
-$lightHoverColor: rgba(126, 126, 126, 0.1);
+$hoverColor: #ebebeb;
+$lightHoverColor: #f2f2f2;
+
+$accentColor: #e25c56;
$boxShadow: rgba(0, 0, 0, 0.1);
@@ -37,6 +39,9 @@ $font-size-normal: 1rem; //16px
$font-size-big: 1.125rem; //18px
$font-size-xbig: 1.5rem;
+$font-light-color: rgba(33, 33, 33, 0.54);
+$font-dark-color: rgba(33, 33, 33, 0.87);
+
$open-status-color: #045FB4;
$in-progress-status-color: #FD8049;
$end-of-life-status-color: #34C388;//#800080
@@ -57,5 +62,3 @@ $warm-grey: #7e7e7e;
$info-color: #337ab7;
$danger: #F70D1A;
$warning: #FF8040;
-
-$cart-count-color: #FFD3A1;