Add package addons and options

2018-09-06 23:29:29 +02:00
parent 5bef0b9e5e
commit cd5f09487d
25 changed files with 1302 additions and 482 deletions
--- a/backend/app/plugins/wiaas/assets/css/package.css
+++ b/backend/app/plugins/wiaas/assets/css/package.css
@@ -90,3 +90,8 @@
    font-size: 12px;
    height: 36px;
 }
+
+
+#wiaas_package_option_groups  div.expand-close {
+    float: right;
+}
--- a/backend/app/plugins/wiaas/includes/admin/package/class-wiaas-admin-package-addon.php
+++ b/backend/app/plugins/wiaas/includes/admin/package/class-wiaas-admin-package-addon.php
@@ -0,0 +1,76 @@
+<?php
+
+class Wiaas_Admin_Package_Addon {
+
+	public static function init() {
+		add_action( 'woocommerce_product_data_tabs', array( __CLASS__, 'package_data_tabs' ) );
+		add_action( 'woocommerce_product_data_panels', array( __CLASS__, 'package_data_panel' ) );
+
+		add_action( 'woocommerce_process_product_meta', array( __CLASS__, 'process_meta_box' ));
+	}
+
+	public static function package_data_tabs($tabs) {
+		$tabs[ 'bundled_packages_addons' ] = array(
+			'label'    => __( 'Add-ons', 'wiaas' ),
+			'target'   => 'wiaas_package_addons',
+			'class'    => array( 'show_if_bundle', 'bundled_package_tab' ),
+			'priority' => 50
+		);
+
+		return $tabs;
+	}
+
+	public static function package_data_panel() {
+
+		global $post;
+		$package           = wc_get_product( $post->ID );
+
+		$addons = Wiaas_Package_Addon::get_package_addons($package);
+
+		?>
+		<div id="wiaas_package_addons" class="panel woocommerce_options_panel wc_gte_30">
+			<div class="options_group">
+				<p class="form-field">
+					<label for="wiaas_addon_packages"><?php esc_html_e( 'Additional packages:', 'wiaas' ); ?></label>
+					<select
+						class="wc-product-search"
+						multiple="multiple"
+						style="width: 50%;"
+						id="wiaas_addon_packages"
+						name="wiaas_addon_packages[]"
+						data-sortable="true"
+						data-placeholder="<?php esc_attr_e( 'Search for a product&hellip;', 'wiaas' ); ?>"
+						data-action="woocommerce_json_search_products"
+						data-exclude="<?php echo intval( $package->get_id() ); ?>">
+						<?php
+						foreach ( $addons as $addon ) {
+							echo '<option value="' . esc_attr( $addon->get_id() ) . '"' . selected( true, true, false ) . '>' . wp_kses_post( $addon->get_formatted_name() ) . '</option>';
+						}
+						?>
+					</select>
+					<?php echo wc_help_tip( __( 'This lets you choose which packages will be available as addons.', 'wiaas' ) );?>
+				</p>
+			</div>
+		</div>
+		<?php
+	}
+
+	public static function meta_box_javascript() {
+
+	}
+
+	public static function process_meta_box($package_id) {
+
+		$package = wc_get_product($package_id);
+
+		$addons_ids = isset( $_POST['wiaas_addon_packages'] ) ?
+			array_filter( array_map( 'intval', (array) $_POST['wiaas_addon_packages'] ) ) :
+			array();
+
+		Wiaas_Package_Addon::set_package_addons(
+			$package,
+			$addons_ids);
+	}
+}
+
+Wiaas_Admin_Package_Addon::init();
--- a/backend/app/plugins/wiaas/includes/admin/package/class-wiaas-admin-package-option-groups.php
+++ b/backend/app/plugins/wiaas/includes/admin/package/class-wiaas-admin-package-option-groups.php
@@ -0,0 +1,242 @@
+<?php
+
+class Wiaas_Admin_Package_Option_Groups {
+
+	public static function init() {
+		add_action( 'woocommerce_product_data_tabs', array( __CLASS__, 'package_data_tabs' ) );
+		add_action( 'woocommerce_product_data_panels', array( __CLASS__, 'package_data_panel' ) );
+
+		add_action( 'wp_ajax_wiaas_create_empty_option_group', array(__CLASS__, 'create_empty_option_group') );
+
+		add_action( 'woocommerce_process_product_meta', array( __CLASS__, 'process_meta_box' ));
+	}
+
+	public static function create_empty_option_group() {
+		$option_group = array(
+		    'name' => 'Untitled',
+		    'id' => uniqid('option_'),
+		    'default' => false,
+		    'options' => array()
+	    );
+
+	    ?>
+            <script type="text/javascript">
+                $( document.body ).trigger( 'wc-enhanced-select-init' );
+            </script>
+            <?php
+                self::_render_option_group($option_group);
+            ?>
+        <?php
+    }
+
+	public static function package_data_tabs($tabs) {
+		$tabs[ 'bundled_packages_options_groups' ] = array(
+			'label'    => __( 'Option groups', 'wiaas' ),
+			'target'   => 'wiaas_package_option_groups',
+			'class'    => array( 'show_if_bundle', 'bundled_package_tab' ),
+			'priority' => 50
+		);
+
+		return $tabs;
+	}
+
+	public static function package_data_panel() {
+
+		global $post;
+		$package           = wc_get_product( $post->ID );
+
+		$option_groups = Wiaas_Package_Option_Groups::get_package_option_groups($package);
+
+		?>
+		<div id="wiaas_package_option_groups" class="panel wc-metaboxes-wrapper hidden">
+			<?php self::meta_box_javascript(); ?>
+            <div class="toolbar toolbar-top">
+                <button type="button" class="button button-primary" id="wiaas_add_option_group">
+                    <?php esc_html_e( 'Add new option group', 'wiaas' ); ?>
+                </button>
+                <span class="expand-close">
+                    <a href="#" class="expand_all"><?php esc_html_e( 'Expand', 'wiaas' ); ?></a>
+                    /
+                    <a href="#" class="close_all"><?php esc_html_e( 'Close', 'wiaas' ); ?></a>
+                </span>
+            </div>
+            <div id="wiaas_package_option_groups_list" class="wc-metaboxes">
+                <?php
+                    foreach ($option_groups as $option_group) {
+                        self::_render_option_group($option_group);
+                    }
+                    // render empty option group
+                ?>
+            </div>
+            <div class="toolbar">
+                <span class="expand-close">
+                    <a href="#" class="expand_all">
+                        <?php esc_html_e( 'Expand', 'wiaas' ); ?>
+                    </a>
+                    /
+                    <a href="#" class="close_all"><?php esc_html_e( 'Close', 'wiaas' ); ?></a>
+                </span>
+            </div>
+		</div>
+		<?php
+	}
+
+	private static function _render_option_group($group) {
+	    $group_options = isset($group['options']) ? $group['options'] : array();
+	    $id = $group['id'];
+
+        ?>
+            <div id="wiaas_option_group_<?php echo esc_attr( $id ); ?>" class="wc-metabox closed">
+                <h3>
+                    <a
+                            href="#"
+                            data-id="<?php echo esc_attr( $id ); ?>"
+                            class="delete delete_wiaas_option_group">
+                        <?php esc_html_e( 'Remove', 'wiaas' ); ?>
+                    </a>
+                    <div class="handlediv" title="<?php esc_attr_e( 'Click to toggle', 'wiaas' ); ?>"></div>
+                    <strong id="wiaas_option_group_<?php echo esc_attr( $id ); ?>_title">
+                        <?php echo $group['name']; ?>
+                    </strong>
+                </h3>
+                <div class="wc-metabox-content">
+                    <table cellpadding="0" cellspacing="0">
+                        <tbody>
+                        <tr>
+                            <td>
+                                <label><?php esc_html_e( 'Name', 'wiaas' ); ?>:</label>
+                                <input
+                                        type="text"
+                                        data-id="<?php echo esc_attr( $id ); ?>"
+                                        class="wiaas_option_group_name"
+                                        name="wiaas_option_groups[<?php echo esc_attr( $id ); ?>][name]"
+                                        value="<?php echo esc_attr( $group['name'] ); ?>" />
+                                <input
+                                        type="hidden"
+                                        name="wiaas_option_groups[<?php echo esc_attr( $id ); ?>][id]"
+                                        value="<?php echo esc_attr( $id ); ?>" />
+                            </td>
+                            <td rowspan="3">
+                                <label><?php esc_html_e( 'Options:', 'wiaas' ); ?></label>
+                                <select
+                                        class="wc-product-search"
+                                        multiple="multiple"
+                                        style="width: 50%;"
+                                        name="wiaas_option_groups[<?php echo esc_attr( $id ); ?>][options][]"
+                                        data-sortable="true"
+                                        data-placeholder="<?php esc_attr_e( 'Search for a product&hellip;', 'wiaas' ); ?>"
+                                        data-action="woocommerce_json_search_products"
+                                        data-exclude="">
+		                            <?php
+		                            foreach ( $group_options as $group_option ) {
+			                            echo '<option value="' . esc_attr( $group_option->get_id() ) . '"' . selected( true, true, false ) . '>' . wp_kses_post( $group_option->get_formatted_name() ) . '</option>';
+		                            }
+		                            ?>
+                                </select>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <label>
+                                    <input
+                                            type="checkbox"
+                                            data-id="<?php echo esc_attr( $id ); ?>"
+                                            class="checkbox wiaas_option_group_default"
+                                        <?php checked( $group['default'], true ); ?>
+                                            name="wiaas_option_groups[<?php echo esc_attr( $id ); ?>][default]"
+                                            value="1" />
+                                    <?php esc_html_e( 'Set as default', 'wiaas' ); ?>
+                                </label>
+                            </td>
+                        </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+		<?php
+    }
+
+	public static function meta_box_javascript() {
+        ?>
+        <script type="text/javascript">
+            jQuery(document).ready(function ($) {
+                $("#wiaas_add_option_group").click(function (event) {
+                    event.preventDefault();
+
+                    var data = {
+                        post:<?php echo isset( $_GET['post'] ) ? $_GET['post'] : 0; ?>,
+                        action: 'wiaas_create_empty_option_group'
+                    };
+
+                    $.post(ajaxurl, data, function (response) {
+                        $('#wiaas_package_option_groups_list').append(response);
+                    });
+                });
+
+                $('#wiaas_package_option_groups').delegate('.delete_wiaas_option_group', 'click', function (event) {
+                    event.preventDefault();
+                    if (confirm("<?php _e( 'Are you sure you would like to remove this option group?', 'wiaas' ); ?>")) {
+                        var id = $(this).data('id');
+                        $('#wiaas_option_group_' + id).slideUp().remove();
+                    }
+                });
+
+                $('#wiaas_package_option_groups').delegate('.wiaas_option_group_name', 'change', function (event) {
+                    event.preventDefault();
+
+                    var name = $(this).val();
+                    var id = $(this).data('id');
+
+                    $(`#wiaas_option_group_${id}_title`).text(name);
+
+                });
+
+                $('#wiaas_package_option_groups').delegate('.wiaas_option_group_default', 'change', function (event) {
+                    event.preventDefault();
+
+                    var id = $(this).data('id');
+
+                    $(`:input.wiaas_option_group_default`).each(function() {
+                        var group_id = $(this).data('id');
+                        if (group_id !== id) {
+                            $(this).prop('checked', false);
+                        }
+                    });
+
+                });
+            });
+        </script>
+		<?php
+	}
+
+	public static function process_meta_box($package_id) {
+
+		$package = wc_get_product($package_id);
+
+		$posted_option_groups = isset( $_POST['wiaas_option_groups'] ) ? $_POST['wiaas_option_groups'] : array();
+
+		error_log(print_r($posted_option_groups, true));
+
+		$option_groups = array();
+
+		foreach ($posted_option_groups as $id => $posted_option_group) {
+		    $option_group = array(
+		          'id' => $posted_option_group['id'],
+                  'name' => $posted_option_group['name'],
+                  'default' => $posted_option_group['default'],
+                  'options' => array()
+            );
+			$option_group['options'] = isset( $posted_option_group['options'] ) ?
+				array_filter( array_map( 'intval', (array) $posted_option_group['options'] ) ) :
+				array();
+
+			$option_groups[] = $option_group;
+        }
+
+		Wiaas_Package_Option_Groups::set_package_option_groups(
+			$package,
+			$posted_option_groups);
+	}
+}
+
+Wiaas_Admin_Package_Option_Groups::init();
--- a/backend/app/plugins/wiaas/includes/api/class-wiaas-cart-api.php
+++ b/backend/app/plugins/wiaas/includes/api/class-wiaas-cart-api.php
@@ -72,10 +72,9 @@ class Wiaas_Cart_API {
 		$count = 0;

 		foreach ($items as $key => $item) {
-			if (isset($item['bundled_by'])) {
-				continue;
+			if (isset($item['_wiaas_standard_package'])) {
+				$count++;
 			}
-			$count++;
 		}

 		return new WP_REST_Response(array(
@@ -94,17 +93,52 @@ class Wiaas_Cart_API {
 		$result = array();

 		foreach ($items as $key => $item) {
-			if (isset($item['bundled_by'])) {
+			if (!isset($item['_wiaas_standard_package'])) {
 				continue;
 			}

 			$package = wc_get_product($item['product_id']);

+			// Retrieve package addons
+			$addon_cart_items = Wiaas_Package_Addon::get_cart_item_addons($item);
+			$additional_packages = array();
+
+			foreach ($addon_cart_items as $addon_cart_item) {
+				$additional_package = wc_get_product($addon_cart_item['product_id']);
+				$additional_packages[] = array(
+					'idAdditionalPackage' => $additional_package->get_id(),
+					'packageName' => $additional_package->get_title(),
+					'prices' => array(
+						'fixedExtra' => $addon_cart_item['_wiaas_payment']['minimal_fixed_price'],
+						'recurentExtra' => $addon_cart_item['_wiaas_payment']['recurrent_price'],
+						'servicesExtra' => $addon_cart_item['_wiaas_payment']['minimal_services_price'],
+					)
+				);
+			}
+
+			// Retrieve package options
+			$option_cart_items = Wiaas_Package_Option_Groups::get_cart_item_options($item);
+			$package_options = array();
+			foreach ($option_cart_items as $option_cart_item) {
+				$option_package = wc_get_product($option_cart_item['product_id']);
+				$package_options[] = array(
+					'idOptionPackage' => $option_package->get_id(),
+					'groupName' => $option_package->get_title(),
+					'packageName' => $option_package->get_title(),
+					'prices' => array(
+						'fixedExtra' => $item['_wiaas_payment']['minimal_fixed_price'],
+						'recurentExtra' => $item['_wiaas_payment']['recurrent_price'],
+						'servicesExtra' => $item['_wiaas_payment']['minimal_services_price'],
+					)
+				);
+			}
+
+
 			$result[] = array(
 				'idPackage' => $item['product_id'],
 				'key' => $item['key'],
 				'packageName' => $package->get_title(),
-				'additionalPackages' => array(),
+				'additionalPackages' => $additional_packages,
 				'areAdditionalAvailable' => true,
 				'areOptionsAvailable' => true,
 				'bids' => array(),
@@ -112,21 +146,21 @@ class Wiaas_Cart_API {
 				'country' => array(
 					'currency' => 'SEK'
 				),
-				'options' => array(),
+				'options' => $package_options,
 				'quantity' => $item['quantity'],

-				'idPayType' => $item['_wiaas_price']['id'],
-				'payType' => $item['_wiaas_price']['payment_type'],
- 				'periodUnit' => $item['_wiaas_price']['period_unit'],
- 				'idPrice' => $item['_wiaas_price']['id'],
-				'fixedPrice' => $item['_wiaas_price']['minimal_fixed_price'],
-				'recurentPrice' => $item['_wiaas_price']['recurrent_price'],
-				'servicesPrice' => $item['_wiaas_price']['minimal_services_price'],
+				'idPayType' => $item['_wiaas_payment']['id'],
+				'payType' => $item['_wiaas_payment']['payment_type'],
+ 				'periodUnit' => $item['_wiaas_payment']['period_unit'],
+ 				'idPrice' => $item['_wiaas_payment']['id'],
+				'fixedPrice' => $item['_wiaas_payment']['minimal_fixed_price'],
+				'recurentPrice' => $item['_wiaas_payment']['recurrent_price'],
+				'servicesPrice' => $item['_wiaas_payment']['minimal_services_price'],

 				'totalPrices' => array(
-					'fixedPrice' => $item['_wiaas_price']['minimal_fixed_price'],
-					'recurentPrice' => $item['_wiaas_price']['recurrent_price'],
-					'servicesPrice' => $item['_wiaas_price']['minimal_services_price'],
+					'fixedPrice' => $item['_wiaas_payment']['minimal_fixed_price'],
+					'recurentPrice' => $item['_wiaas_payment']['recurrent_price'],
+					'servicesPrice' => $item['_wiaas_payment']['minimal_services_price'],
 				),

 				'status' => 'available',
@@ -136,6 +170,7 @@ class Wiaas_Cart_API {
 		return new WP_REST_Response(
 			array(
 				'cartItems' => $result,
+				'items' => $items,
 				'totalPrice' => ''
 			)
 		);
@@ -162,22 +197,10 @@ class Wiaas_Cart_API {
 	 */
 	public static function add_package_to_cart() {
 		$package_id = $_POST['package_id'];
-		$price_id = $_POST['price_id'];

-		$package = wc_get_product($package_id);
-		$prices = Wiaas_Package_Pricing::get_package_prices($package);
-		$selected_price = $prices[$price_id];
-
-		WC()->session->set('wiaas_price_' . $package_id, $price_id);
-
-		$success = WC()->cart->add_to_cart(
-			$package_id,
-			1,
-			0,
-			array(),
-			array(
-				'_wiaas_price' => $selected_price,
-			));
+		$success = WC()->cart->add_to_cart($package_id, 1, 0, array(), array(
+			'_wiaas_standard_package' => true
+		));

 		if ($success) {
 			return new WP_REST_Response(array(
--- a/backend/app/plugins/wiaas/includes/class-wiaas-admin.php
+++ b/backend/app/plugins/wiaas/includes/class-wiaas-admin.php
@@ -8,6 +8,8 @@ class Wiaas_Admin {

 	public static function init() {
 		require_once dirname( __FILE__ ) . '/admin/package/class-wiaas-admin-package-pricing.php';
+		require_once dirname( __FILE__ ) . '/admin/package/class-wiaas-admin-package-addon.php';
+		require_once dirname( __FILE__ ) . '/admin/package/class-wiaas-admin-package-option-groups.php';
 	}
 }

--- a/backend/app/plugins/wiaas/includes/class-wiaas-order.php
+++ b/backend/app/plugins/wiaas/includes/class-wiaas-order.php
@@ -85,7 +85,7 @@ class Wiaas_Order {
 		$data = $response->get_data();

 		# apply overrides
-		$data = self::_append_products_info($data, $order, $request);
+		$data = self::_append_packages($data, $order, $request);

 		$data = self::_append_order_process($data, $order, $request);

@@ -168,27 +168,26 @@ class Wiaas_Order {
 	 *
 	 * @return mixed
 	 */
-	private static function _append_products_info($data, $order, $request) {
+	private static function _append_packages($data, $order, $request) {
 		$line_items = array();
+
+		$order_items = $order->get_items( 'line_item' );
+
 		foreach ($data['line_items'] as $index => $product_line) {
+
+			$item = $order->get_item($product_line['id']);
+
 			// add only product lines that represent product bundles
-			if (empty($product_line['bundled_by'])) {
+			if (isset($item['wiaas_standard_package'])) {

-				$item = $order->get_item($product_line['id']);
-				$payment = $item->get_meta('_wiaas_payment', true);
-
-				# lock all products to `Purchase` payment type
-				$product_line['payment_type'] = $payment['payment_type'];
-
-				# lock all products to have no service
-				$product_line['service_price'] = $payment['minimal_services_price'];
-				$product_line['service_contract_period'] = $payment['services_contract_period'];
-				$product_line['max_contract_period'] = $payment['max_contract_period'];
-				$product_line['period_unit'] = $payment['period_unit'];
-
-				# simplify payment for all products
-				$product_line['recurring_price'] = $payment['recurrent_price'];
-				$product_line['pay_period'] = $payment['package_pay_period'];
+				# get payment type info
+				$product_line['payment_type'] = $item['wiaas_payment_type'];
+				$product_line['service_price'] = floatval($item['wiaas_service_price']);
+				$product_line['service_contract_period'] = floatval($item['wiaas_service_contract_period']);
+				$product_line['max_contract_period'] = floatval($item['wiaas_max_contract_period']);
+				$product_line['period_unit'] = $item['wiaas_period_unit'];
+				$product_line['recurring_price'] = floatval($item['wiaas_recurring_price']);
+				$product_line['pay_period'] = floatval($item['wiaas_pay_period']);

 				# collect status from  order
 				if ($data['status'] === 'completed') {
@@ -198,11 +197,32 @@ class Wiaas_Order {
 				} else {
 					$product_line['status'] = 'processing';
 				}
+
 				$product_line['short_desc'] = $product_line['status'];

 				# collect completion data from order
 				$product_line['date_completed'] = $data['date_completed'];

+				// collect package addons
+				$product_line['additional_packages'] = array();
+				$addon_items = Wiaas_Package_Addon::get_order_item_addons($order_items, $item);
+				foreach ($addon_items as $addon_item) {
+					$product_line['additional_packages'][] = array(
+						'id' => $addon_item->get_id(),
+						'name' => $addon_item->get_name(),
+					);
+				}
+
+				// collect package options
+				$product_line['options'] = array();
+				$option_items = Wiaas_Package_Option_Groups::get_order_item_options($order_items, $item);
+				foreach ($option_items as $option_item) {
+					$product_line['options'][] = array(
+						'id' => $option_item->get_id(),
+						'name' => $option_item->get_name(),
+					);
+				}
+
 				$line_items[] = $product_line;
 			}
 		}
--- a/backend/app/plugins/wiaas/includes/class-wiaas-package.php
+++ b/backend/app/plugins/wiaas/includes/class-wiaas-package.php
@@ -4,8 +4,27 @@ class Wiaas_Package {

 	public static function init() {
 		require_once dirname( __FILE__ ) . '/package/class-wiaas-package-pricing.php';
+		require_once dirname( __FILE__ ) . '/package/class-wiaas-package-addon.php';
+		require_once dirname( __FILE__ ) . '/package/class-wiaas-package-option-groups.php';
+
+		add_action( 'woocommerce_checkout_create_order_line_item', array( __CLASS__, 'add_order_item_meta' ), 10, 3 );

 		add_filter('woocommerce_rest_prepare_product_object', array(__CLASS__, 'transform_rest_package'), 999, 3);
+
+		add_filter( 'woocommerce_hidden_order_itemmeta', array( __CLASS__, 'hidden_order_item_meta' ) );
+	}
+
+	public static function add_order_item_meta( $order_item, $cart_item_key, $cart_item ){
+		if (isset($cart_item['_wiaas_standard_package'])) {
+			$order_item->add_meta_data( '_wiaas_standard_package', $cart_item['_wiaas_standard_package'], true );
+		}
+	}
+
+	public static function hidden_order_item_meta( $hidden ) {
+
+		return array_merge( $hidden, array(
+			'_wiaas_standard_package',
+		) );
 	}

 	/**
@@ -21,11 +40,48 @@ class Wiaas_Package {

 		$data = self::_append_package_prices($data, $package, $request);

+		$data = self::_append_grouped_products($data, $package, $request);
+
 		$response->set_data($data);

 		return $response;
 	}

+	private static function _append_grouped_products($data, $package, $request) {
+
+		$data['additional_packages'] = array();
+		$addons = Wiaas_Package_Addon::get_package_addons($package);
+		foreach ($addons as $addon) {
+			$data['additional_packages'][] = array(
+				'id' => $addon->get_id(),
+				'name' => $addon->get_name(),
+				'description' => $addon->get_description(),
+				'prices' => array_values(Wiaas_Package_Pricing::get_package_prices($addon))
+			);
+		}
+
+		$data['groups'] = array();
+		$option_groups = Wiaas_Package_Option_Groups::get_package_option_groups($package);
+		foreach ($option_groups as $option_group) {
+			$data['groups'][$option_group['id']] = array(
+				'id' => $option_group['id'],
+				'name' => $option_group['name'],
+				'options' => array()
+			);
+			foreach ($option_group['options'] as $option_package) {
+				$data['groups'][$option_group['id']]['options'][] = array(
+					'id' => $option_package->get_id(),
+					'name' => $option_package->get_name(),
+					'description' => $option_package->get_description(),
+					'default' => 0,
+					'prices' => array_values(Wiaas_Package_Pricing::get_package_prices($option_package))
+				);
+			}
+		}
+
+		return $data;
+	}
+
 	/**
 	 * Append configured package prices on package json response
 	 * @param $data
--- a/backend/app/plugins/wiaas/includes/package/class-wiaas-package-addon.php
+++ b/backend/app/plugins/wiaas/includes/package/class-wiaas-package-addon.php
@@ -0,0 +1,146 @@
+<?php
+
+class Wiaas_Package_Addon {
+
+	private static $package_addons_meta_key = '_wiaas_package_addons';
+
+	private static $cart_item_addon_items_key = '_wiaas_addon_items';
+
+	private static $cart_item_addon_parent_key = '_wiaas_addon_for';
+
+	public static function init() {
+
+		self::_add_addons_hooks();
+
+		add_action( 'woocommerce_checkout_create_order_line_item', array( __CLASS__, 'add_order_item_meta' ), 10, 3 );
+
+		add_filter( 'woocommerce_hidden_order_itemmeta', array( __CLASS__, 'hidden_order_item_meta' ) );
+	}
+
+	private static function _add_addons_hooks() {
+		// Add bundle-specific cart item data based on posted vars.
+		add_filter( 'woocommerce_add_cart_item_data', array( __CLASS__, 'add_cart_item_data' ), 10, 2 );
+
+		// Add addon items to the cart.
+		add_action( 'woocommerce_add_to_cart', array( __CLASS__, 'add_addons_to_cart' ), 10, 6 );
+	}
+
+	private static function _remove_addons_hooks() {
+
+		remove_filter( 'woocommerce_add_cart_item_data', array( __CLASS__, 'add_cart_item_data' ));
+
+		remove_action('woocommerce_add_to_cart', array( __CLASS__, 'add_addons_to_cart' ));
+	}
+
+	public static function add_order_item_meta( $order_item, $cart_item_key, $cart_item ){
+		if (isset($cart_item[self::$cart_item_addon_items_key])) {
+			$order_item->add_meta_data( self::$cart_item_addon_items_key, $cart_item[self::$cart_item_addon_items_key] );
+		}
+		if (isset($cart_item[self::$cart_item_addon_parent_key])) {
+			$order_item->add_meta_data( self::$cart_item_addon_parent_key, $cart_item[self::$cart_item_addon_parent_key], true );
+		}
+	}
+
+	public static function hidden_order_item_meta( $hidden ) {
+
+		return array_merge( $hidden, array(
+			self::$cart_item_addon_items_key,
+			self::$cart_item_addon_parent_key,
+		) );
+	}
+
+	public static function add_cart_item_data($cart_item_data, $package_id) {
+
+		// If cart item that will be added is actually requested package
+		if ($_POST['package_id'] = $package_id) {
+			// Prepare additional data for later use.
+			if ( ! isset( $cart_item_data[self::$cart_item_addon_items_key] ) ) {
+				$cart_item_data[self::$cart_item_addon_items_key ] = array();
+			}
+		}
+
+		return $cart_item_data;
+	}
+
+	public static function add_addons_to_cart($cart_item_key, $package_id, $quantity, $variation_id, $variation, $cart_item_data) {
+
+		$is_addon_parent = $_POST['package_id'] = $package_id && isset($cart_item_data[self::$cart_item_addon_items_key]);
+		$has_selected_addons = isset($_POST['addons']) && is_array($_POST['addons']);
+
+		self::_remove_addons_hooks();
+
+		if ($is_addon_parent && $has_selected_addons) {
+			$addons_ids = $_POST['addons'];
+
+			foreach ($addons_ids as $addon_id) {
+				$addon_package = wc_get_product($addon_id);
+				if (is_object($addon_package)) {
+
+					$addon_cart_item_key = WC()->cart->add_to_cart($addon_id);
+
+					if ($addon_cart_item_key) {
+						WC()->cart->cart_contents[$addon_cart_item_key][self::$cart_item_addon_parent_key] = $cart_item_key;
+
+						WC()->cart->cart_contents[ $cart_item_key ][self::$cart_item_addon_items_key][] = $addon_cart_item_key;
+					}
+				}
+			}
+		}
+
+		self::_add_addons_hooks();
+	}
+
+	public static function get_cart_item_addons($cart_item) {
+		$addon_cart_items = array();
+
+		if (isset($cart_item[self::$cart_item_addon_items_key])) {
+			$addon_cart_items_ids = $cart_item[self::$cart_item_addon_items_key];
+
+			foreach ($addon_cart_items_ids as $addon_cart_item_id) {
+				$addon_cart_item  = WC()->cart->get_cart_item($addon_cart_item_id);
+
+				if (isset($addon_cart_item)) {
+					$addon_cart_items[] = $addon_cart_item;
+				}
+			}
+		}
+
+		return $addon_cart_items;
+	}
+
+	public static function get_order_item_addons($order_items, $parent_order_item) {
+		$addon_order_items = array();
+
+		if (isset($parent_order_item['wiaas_addon_items']) && isset($parent_order_item['bundle_cart_key'])) {
+			foreach ($order_items as $order_item) {
+				if (isset($order_item['bundle_cart_key']) && $order_item['wiaas_addon_for'] === $parent_order_item['bundle_cart_key']) {
+					$addon_order_items[] = $order_item;
+				}
+			}
+		}
+
+		return $addon_order_items;
+	}
+
+	public static function set_package_addons($package, $children_ids) {
+		$package->update_meta_data( self::$package_addons_meta_key, $children_ids );
+		$package->save_meta_data();
+	}
+
+	public static function get_package_addons($package) {
+		$addon_ids = $package->get_meta( self::$package_addons_meta_key );
+
+		$addons =  array();
+
+		foreach ($addon_ids as $addon_id) {
+			$addon_package = wc_get_product( $addon_id );
+			if (is_object($addon_package)) {
+				$addons[] = $addon_package;
+			}
+		}
+
+		return $addons;
+	}
+}
+
+Wiaas_Package_Addon::init();
--- a/backend/app/plugins/wiaas/includes/package/class-wiaas-package-option-groups.php
+++ b/backend/app/plugins/wiaas/includes/package/class-wiaas-package-option-groups.php
@@ -0,0 +1,158 @@
+<?php
+
+class Wiaas_Package_Option_Groups {
+
+	private static $package_option_groups_meta_key = '_wiaas_package_option_groups';
+
+	private static $cart_item_option_items_key = '_wiaas_option_items';
+
+	private static $cart_item_option_parent_key = '_wiaas_option_for';
+
+	public static function init() {
+
+		self::_add_options_hooks();
+
+		add_action( 'woocommerce_checkout_create_order_line_item', array( __CLASS__, 'add_order_item_meta' ), 10, 3 );
+
+		add_filter( 'woocommerce_hidden_order_itemmeta', array( __CLASS__, 'hidden_order_item_meta' ) );
+	}
+
+	private static function _add_options_hooks() {
+		// Add bundle-specific cart item data based on posted vars.
+		add_filter( 'woocommerce_add_cart_item_data', array( __CLASS__, 'add_cart_item_data' ), 10, 2 );
+
+		// Add option items to the cart.
+		add_action( 'woocommerce_add_to_cart', array( __CLASS__, 'add_options_to_cart' ), 10, 6 );
+	}
+
+	private static function _remove_options_hooks() {
+
+		remove_filter( 'woocommerce_add_cart_item_data', array( __CLASS__, 'add_cart_item_data' ));
+
+		remove_action('woocommerce_add_to_cart', array( __CLASS__, 'add_options_to_cart' ));
+	}
+
+	public static function add_order_item_meta( $order_item, $cart_item_key, $cart_item ){
+		if (isset($cart_item[self::$cart_item_option_items_key])) {
+			$order_item->add_meta_data( self::$cart_item_option_items_key, $cart_item[self::$cart_item_option_items_key] );
+		}
+		if (isset($cart_item[self::$cart_item_option_parent_key])) {
+			$order_item->add_meta_data( self::$cart_item_option_parent_key, $cart_item[self::$cart_item_option_parent_key], true );
+		}
+	}
+
+	public static function hidden_order_item_meta( $hidden ) {
+
+		return array_merge( $hidden, array(
+			self::$cart_item_option_items_key,
+			self::$cart_item_option_parent_key,
+		) );
+	}
+
+	public static function set_package_option_groups($package, $groups_data) {
+		$package->update_meta_data( self::$package_option_groups_meta_key, $groups_data );
+		$package->save_meta_data();
+	}
+
+	public static function add_cart_item_data($cart_item_data, $package_id) {
+
+		// If cart item that will be added is actually requested package
+		if ($_POST['package_id'] = $package_id) {
+			// Prepare additional data for later use.
+			if ( ! isset( $cart_item_data[self::$cart_item_option_items_key] ) ) {
+				$cart_item_data[self::$cart_item_option_items_key ] = array();
+			}
+		}
+
+		return $cart_item_data;
+	}
+
+	public static function add_options_to_cart($cart_item_key, $package_id, $quantity, $variation_id, $variation, $cart_item_data) {
+
+		$is_option_parent = $_POST['package_id'] = $package_id && isset($cart_item_data[self::$cart_item_option_items_key]);
+		$has_selected_options = isset($_POST['options']) && is_array($_POST['options']);
+
+		if ($is_option_parent && $has_selected_options) {
+
+			self::_remove_options_hooks();
+
+			$options_ids = $_POST['options'];
+
+			foreach ($options_ids as $option_id) {
+				$option_package = wc_get_product($option_id);
+				if (is_object($option_package)) {
+
+					$option_cart_item_key = WC()->cart->add_to_cart($option_id);
+
+					if ($option_cart_item_key) {
+						WC()->cart->cart_contents[$option_cart_item_key][self::$cart_item_option_parent_key] = $cart_item_key;
+
+						WC()->cart->cart_contents[ $cart_item_key ][self::$cart_item_option_items_key][] = $option_cart_item_key;
+					}
+				}
+			}
+
+			self::_add_options_hooks();
+		}
+	}
+
+	public static function get_cart_item_options($cart_item) {
+		$option_cart_items = array();
+
+		if (isset($cart_item[self::$cart_item_option_items_key])) {
+			$option_cart_items_ids = $cart_item[self::$cart_item_option_items_key];
+
+			foreach ($option_cart_items_ids as $option_cart_item_id) {
+				$option_cart_item  = WC()->cart->get_cart_item($option_cart_item_id);
+
+				if (isset($option_cart_item)) {
+					$option_cart_items[] = $option_cart_item;
+				}
+			}
+		}
+
+		return $option_cart_items;
+	}
+
+	public static function get_order_item_options($order_items, $parent_order_item) {
+		$option_order_items = array();
+
+		if (isset($parent_order_item['wiaas_option_items']) && isset($parent_order_item['bundle_cart_key'])) {
+			foreach ($order_items as $order_item) {
+				if (isset($order_item['bundle_cart_key']) && $order_item['wiaas_option_for'] === $parent_order_item['bundle_cart_key']) {
+					$option_order_items[] = $order_item;
+				}
+			}
+		}
+
+		return $option_order_items;
+	}
+
+	public static function get_package_option_groups($package) {
+
+		$groups_data = $package->get_meta( self::$package_option_groups_meta_key );
+
+		$option_groups =  array();
+
+		foreach ($groups_data as $group_data) {
+			$group = array(
+				'id' => $group_data['id'],
+				'name' => $group_data['name'],
+				'default' => $group_data['default'],
+				'options' => array()
+			);
+
+			foreach ($group_data['options'] as $option_id) {
+				$option_package = wc_get_product( $option_id );
+				if (is_object($option_package)) {
+					$group['options'][] = $option_package;
+				}
+			}
+			$option_groups[] = $group;
+		}
+
+		return $option_groups;
+	}
+}
+
+Wiaas_Package_Option_Groups::init();
--- a/backend/app/plugins/wiaas/includes/package/class-wiaas-package-pricing.php
+++ b/backend/app/plugins/wiaas/includes/package/class-wiaas-package-pricing.php
@@ -51,10 +51,33 @@ class Wiaas_Package_Pricing {
 	private static $package_prices_meta_key = '_wiaas_pricing_rules';

 	public static function init() {
+		add_action( 'woocommerce_checkout_create_order_line_item', array( __CLASS__, 'add_order_item_meta' ), 10, 3 );

-		add_filter( 'woocommerce_product_get_price', array( __CLASS__, 'on_get_price' ), 10, 2 );
+		add_filter( 'woocommerce_hidden_order_itemmeta', array( __CLASS__, 'hidden_order_item_meta' ) );

-		add_filter('woocommerce_checkout_create_order_line_item_object', array( __CLASS__, 'record_price_for_order_line_item' ), 10, 4);
+		add_filter( 'woocommerce_add_cart_item_data', array( __CLASS__, 'add_cart_item_data' ), 10, 2 );
+
+		add_action( 'woocommerce_before_calculate_totals', array( __CLASS__, 'on_calculate_totals' ), 99, 1);
+
+		add_action( 'woocommerce_cart_loaded_from_session', array( __CLASS__, 'on_calculate_totals' ), 99, 1);
+	}
+
+	public static function add_cart_item_data($cart_item_data, $package_id) {
+
+		if ( isset( $_POST[ 'price_id' ]) &&
+		     WC_Product_Factory::get_product_type( $package_id ) === 'bundle') {
+			$selected_price_id = $_POST['price_id'];
+			$package = wc_get_product( $package_id );
+
+			$configured_package_prices = self::get_package_prices($package);
+
+			$selected_price = $configured_package_prices[$selected_price_id];
+
+			if (isset($selected_price)) {
+				$cart_item_data['_wiaas_payment'] = $selected_price;
+			}
+		}
+		return $cart_item_data;
 	}

 	/**
@@ -74,30 +97,24 @@ class Wiaas_Package_Pricing {
 	}

 	/**
-	 * Retrieve customer selected package price from session when adding package to cart
-	 * @param $base_price
-	 * @param $product
-	 *
-	 * @return mixed
+	 * Update package cart item with `minimal_fixed_price` as its price
+	 * so resulting totals would be sum of these prices
+	 * @param $cart
 	 */
-	public static function on_get_price($base_price, $package) {
-		if ( empty( $package ) ||
-		     empty( $base_price ) ||
-		     $package->get_type() !== 'bundle' ||
-		     !isset(WC()->session)) {
-			return $base_price;
+	public static function on_calculate_totals($cart) {
+
+		foreach ($cart->cart_contents as $key => $cart_item) {
+			if (isset($cart_item['_wiaas_payment']))  {
+
+				$price = $cart_item['_wiaas_payment'];
+
+				WC()->cart->cart_contents[ $key ]['data']->set_price( $price['minimal_fixed_price'] );
+			}
+
+			if (isset($cart_item['bundled_by'])) {
+				WC()->cart->cart_contents[ $key ]['data']->set_price( 0 );
+			}
 		}
-		$result_price = $base_price;
-
-		$preferred_price_id = WC()->session->get('wiaas_price_' . $package->get_id(), null);
-
-		if (isset($preferred_price_id)) {
-			$prices = self::get_package_prices($package);
-			$preferred_price = $prices[$preferred_price_id];
-			$result_price = $preferred_price['minimal_fixed_price'];
-		}
-
-		return $result_price;
 	}

 	/**
@@ -109,12 +126,32 @@ class Wiaas_Package_Pricing {
 	 *
 	 * @return mixed
 	 */
-	public static function record_price_for_order_line_item($order_item, $cart_item_key, $cart_item, $order) {
-		if (wc_pb_is_bundle_container_cart_item($cart_item)) {
-			$order_item->add_meta_data('_wiaas_payment', $cart_item['_wiaas_price']);
-		}
+	public static function add_order_item_meta( $order_item, $cart_item_key, $cart_item ) {
+		if (wc_pb_is_bundle_container_cart_item($cart_item) && isset($cart_item['_wiaas_payment'])) {

-		return $order_item;
+			$payment = $cart_item['_wiaas_payment'];
+
+			$order_item->add_meta_data( '_wiaas_payment_type', $payment['payment_type'], true );
+			$order_item->add_meta_data( '_wiaas_service_price', $payment['minimal_services_price'], true );
+			$order_item->add_meta_data( '_wiaas_service_contract_period', $payment['services_contract_period'], true );
+			$order_item->add_meta_data( '_wiaas_max_contract_period', $payment['max_contract_period'], true );
+			$order_item->add_meta_data( '_wiaas_period_unit', $payment['period_unit'], true );
+			$order_item->add_meta_data( '_wiaas_recurring_price', $payment['recurrent_price'], true );
+			$order_item->add_meta_data( '_wiaas_pay_period', $payment['package_pay_period'], true );
+		}
+	}
+
+	public static function hidden_order_item_meta( $hidden ) {
+
+		return array_merge( $hidden, array(
+			'_wiaas_payment_type',
+			'_wiaas_service_price',
+			'_wiaas_service_contract_period',
+			'_wiaas_max_contract_period',
+			'_wiaas_period_unit',
+			'_wiaas_recurring_price',
+			'_wiaas_pay_period'
+		) );
 	}

 	/**
--- a/frontend/src/actions/coMarket/coMarketPackageDetailsActions.js
+++ b/frontend/src/actions/coMarket/coMarketPackageDetailsActions.js
@@ -71,16 +71,18 @@ export const fetchPackageDetails = (params) => {
    }
 }

-const generateOptions = (selectedOptions, selectedAdditionals, selectedAgreement) => {
-    const extraPackages = [];
+const collectPackageOptionsAndAdditionals = (selectedOptions, selectedAdditionals, selectedAgreement) => {
+    const optionPackages = [];
+    const additionalPackages = [];
    const unavailablePackages = [];
+
    if(selectedAdditionals && selectedAdditionals.length){
        selectedAdditionals.forEach(additional => {
            const selectedPrice = priceHelper.getSelectedPrice(additional, selectedAgreement);
            if(!selectedPrice){
                unavailablePackages.push(additional);
            }else{
-                extraPackages.push(additional.idAdditionalPackage);
+                additionalPackages.push(additional.idAdditionalPackage);
            }
        });
    }
@@ -91,12 +93,12 @@ const generateOptions = (selectedOptions, selectedAdditionals, selectedAgreement
            if(!selectedPrice){
                unavailablePackages.push(selectedOptions[idGroup]);
            }else{
-                extraPackages.push(selectedOptions[idGroup].idOptionPackage);
+                optionPackages.push(selectedOptions[idGroup].idOptionPackage);
            }
        });
    }

-    return {extraPackages, unavailablePackages};
+    return {optionPackages, additionalPackages, unavailablePackages};
 };

 const requestAddToCart = () => ({
@@ -104,20 +106,24 @@ const requestAddToCart = () => ({
 });

 export const addToCart = (addParams) => {
-    // const options = generateOptions(addParams.selectedOptions, addParams.selectedAdditionals, addParams.selectedAgreement);
+    const result = collectPackageOptionsAndAdditionals(
+        addParams.selectedOptions,
+        addParams.selectedAdditionals,
+        addParams.selectedAgreement);

    const params = {
        'package_id': addParams.selectedPackage.id,
        'price_id': addParams.selectedAgreement.idPrice,
-        //options: options.extraPackages
+        'addons': result.additionalPackages,
+        'options': result.optionPackages
    };

-    // if(options.unavailablePackages.length){
-    //     const unavailable = options.unavailablePackages.map((unavailable) =>{return unavailable.optionName || unavailable.packageName;});
-    //     const message = coMarketMessages.UNAVAILABLE_PACKAGES + ' ' + unavailable.join();
-    //
-    //     return dispatch => {dispatch(updateMessages([{code: 'warning', message}], coMarketMessages))};
-    // }
+    if(result.unavailablePackages.length){
+        const unavailable = result.unavailablePackages.map((unavailable) =>{return unavailable.optionName || unavailable.packageName;});
+        const message = coMarketMessages.UNAVAILABLE_PACKAGES + ' ' + unavailable.join();
+    
+        return dispatch => {dispatch(updateMessages([{code: 'warning', message}], coMarketMessages))};
+    }

    return dispatch => {
        dispatch(requestAddToCart());
--- a/frontend/src/containers/cart/style/Cart.scss
+++ b/frontend/src/containers/cart/style/Cart.scss
@@ -2,7 +2,7 @@

 #cart-count {
    vertical-align: middle;
-    color: $cart-count-color;
+    color: $accentColor;
    font-size: 1.5rem;
    border-radius: 1rem;
    font-family: arial,sans-serif;
--- a/frontend/src/containers/coMarket/CoMarketPackageDetailsContainer.jsx
+++ b/frontend/src/containers/coMarket/CoMarketPackageDetailsContainer.jsx
@@ -5,7 +5,7 @@ import WiaasBox from '../../mainComponents/box/WiaasBox.jsx';
 import {fetchPackageDetails, addToCart} from '../../actions/coMarket/coMarketPackageDetailsActions';
 import PackageInfo from './components/PackageInfo.jsx';
 import PackagePrice from './components/PackagePrice.jsx';
-import PackageOptions from './components/PackageOptions.jsx';
+import PackageOptionGroup from './components/PackageOptionGroup';
 import AdditionalPackages from './components/AdditionalPackages.jsx';
 import AgreementOptions from './components/AgreementOptions.jsx';
 import {coMarketTexts} from '../../constants/coMarketConstants';
@@ -64,21 +64,30 @@ class CoMarketPackageDetailsContainer extends Component {

                                    <Col xl="6" lg="7" md="12" xs="12">
                                        <div id="shop-package-buy-info">
-                                            {
-                                                selectedPackage.groups && Object.keys(selectedPackage.groups).length > 0 && selectedAgreement &&
-                                                <PackageOptions
-                                                    groups={selectedPackage.groups}
-                                                    country={selectedPackage.country}/>
-                                            }
+                                            <PackagePrice currency={selectedPackage.currency} />
+                                            <AgreementOptions
+                                                prices={selectedPackage.prices}
+                                                currency={selectedPackage.currency}/>
                                            {
                                                selectedPackage.additionalPackages && selectedPackage.additionalPackages.length > 0 && selectedAgreement &&
                                                <AdditionalPackages
                                                    additionalPackages={selectedPackage.additionalPackages}
-                                                    country={selectedPackage.country}/>
+                                                    currency={selectedPackage.currency}/>
+                                            }
+                                            {
+                                                selectedPackage.groups && Object.keys(selectedPackage.groups).length > 0 && selectedAgreement &&
+                                                (<div className="shop-package-options">
+                                                    {
+                                                        Object.keys(selectedPackage.groups).map(groupKey => {
+                                                            const group = selectedPackage.groups[groupKey];
+                                                            return (<PackageOptionGroup
+                                                                key={groupKey}
+                                                                group={group}
+                                                                currency={selectedPackage.currency}/>);
+                                                        })
+                                                    }
+                                                 </div>)
                                            }
-                                            <AgreementOptions
-                                                prices={selectedPackage.prices}
-                                                currency={selectedPackage.currency}/>
                                            <Row className="justify-content-end" style={{ marginTop: 30 }}>
                                                <Button id="add-to-cart-btn"
                                                        className="add-to-cart-btn"
--- a/frontend/src/containers/coMarket/components/AdditionalPackageItemContainer.jsx
+++ b/frontend/src/containers/coMarket/components/AdditionalPackageItemContainer.jsx
@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 import {connect} from 'react-redux';
-import {Label, Popover, PopoverBody, Input, Col} from 'reactstrap';
+import {Label, Popover, PopoverBody, Input, Col, Row} from 'reactstrap';
 import {selectAdditional, removetAdditional} from '../../../actions/coMarket/coMarketPackageDetailsActions';
 import PriceHelper from '../../../helpers/coMarket/PriceHelper';
 import {coMarketTexts} from '../../../constants/coMarketConstants';
@@ -34,7 +34,7 @@ class AdditionalPackageItem extends Component {
    }

    isChecked() {
-        return this.props.selectedAdditionals
+        return !!this.props.selectedAdditionals
            && this.props.selectedAdditionals.includes(this.props.additionalPackage);
    }

@@ -44,9 +44,9 @@ class AdditionalPackageItem extends Component {
        });
    }

-    getClass(isChecked) {
-        return isChecked ?
-            'selected-option' :
+    getClass() {
+        return this.isChecked() ?
+            'shop-package-option-selected' :
            '';
    }

@@ -55,62 +55,59 @@ class AdditionalPackageItem extends Component {
    }

    render() {
-        const {additionalPackage, country} = this.props;
+        const {additionalPackage, currency} = this.props;
        const isAvailable = this.isAvailable();
        const selectedPrice = priceHelper.getSelectedPrice(additionalPackage, this.props.selectedAgreement);
        const isChecked = this.isChecked();

        return (
-            <Col xl="4" lg="4" md="6" xs="6"  className="option-value">
-                <div className={'option-selection ' + this.getClass(isChecked)}>
-                    <Label check>
-                        <Input type="checkbox"
-                               onChange={this.handleOptionChange}
-                               name={'package-option-'+ additionalPackage.idAdditionalPackage}
-                               className="package-option-input"/>
-                           <div className="option-name">{this.formatName(additionalPackage.packageName)}</div>
-                           <div className="option-description" dangerouslySetInnerHTML={{__html: additionalPackage.shortDescription}}></div>
-                           {
-                               priceHelper.hasFixedPrice(selectedPrice) &&
-                               <div className="option-prices">
-                                   <table className="price-table option-price-table">
-                                       <thead>
-                                           <tr>
-                                               <th>{coMarketTexts.labels.ON_DELIVERY}</th>
-                                               <th>{coMarketTexts.labels.MONTHLY}</th>
-                                           </tr>
-                                       </thead>
-                                       <tbody>
-                                           <tr>
-                                               <td>{selectedPrice.fixedExtra > 0 ? selectedPrice.fixedExtra.toLocaleString() : 0} {country.currency}</td>
-                                               <td>
-                                                   <div className="option-value-text monthly-price">
-                                                   {
-                                                        priceHelper.hasRecurrentPrice(selectedPrice)
-                                                        ? priceHelper.sumPrices([selectedPrice.recurentExtra, selectedPrice.servicesExtra]).toLocaleString() + ' '
-                                                        : 0
-                                                    } {country.currency}
-                                                    </div>
-                                                </td>
-                                           </tr>
-                                       </tbody>
-                                   </table>
-                               </div>
-                           }
-
-                    </Label>
-                    {
-                        !isAvailable &&
-                        <span className="not-available">
-                            ({coMarketTexts.labels.NOT_AVAILABLE})
-                            <i className="price-info-btn fa fa-info-circle"
-                                aria-hidden="true"
-                                id={'info-additonal-' + additionalPackage.idAdditionalPackage}
-                                onClick={this.toggle}></i>
-                        </span>
-                    }
-                </div>
-
+            <div
+            id={'info-additonal-' + additionalPackage.idAdditionalPackage}
+            className={`shop-package-option d-flex ${this.getClass()}`}
+            >
+                <Label check className="d-flex flex-grow-1 flex-column">
+                    <div className="d-flex">
+                        <Col className="col-6 d-flex align-items-center">
+                            <Input type="checkbox"
+                                checked={isChecked}
+                                onChange={this.handleOptionChange}
+                                name={'package-option-'+ additionalPackage.idAdditionalPackage}
+                                className="package-option-input"
+                            />
+                            <span className="option-name">
+                                {this.formatName(additionalPackage.packageName)}
+                            </span>
+                        </Col>
+                        <Col className="col-3 d-flex align-items-center">
+                        {
+                            priceHelper.hasFixedPrice(selectedPrice) &&  (<span>
+                                {selectedPrice.fixedExtra && selectedPrice.fixedExtra.toLocaleString() + ' ' + currency}
+                            </span>)
+                        }
+                        </Col>
+                        <Col className="col-3 d-flex align-items-center">
+                        {
+                            priceHelper.hasFixedPrice(selectedPrice) && priceHelper.hasRecurrentPrice(selectedPrice) ?
+                            (<span>{priceHelper.sumPrices([selectedPrice.recurentExtra, selectedPrice.servicesExtra]).toLocaleString()} {currency}</span>) :
+                            <span>0</span>
+                        }
+                        </Col>
+                    </div>
+                    <div
+                    className="shop-package-option-description"
+                    dangerouslySetInnerHTML={{__html: additionalPackage.shortDescription}}
+                    ></div>
+                </Label>
+                {
+                    !isAvailable &&
+                    <span className="not-available">
+                        ({coMarketTexts.labels.NOT_AVAILABLE})
+                        <i className="price-info-btn fa fa-info-circle"
+                            aria-hidden="true"
+                            id={'info-additonal-' + additionalPackage.idAdditionalPackage}
+                            onClick={this.toggle}></i>
+                    </span>
+                }
                <Popover placement="bottom"
                            isOpen={this.state.popoverOpen}
                            target={'info-additonal-' + additionalPackage.idAdditionalPackage}
@@ -119,7 +116,7 @@ class AdditionalPackageItem extends Component {
                       {coMarketTexts.labels.SELECTION_NOT_AVAILABLE}
                   </PopoverBody>
                </Popover>
-            </Col>
+            </div>
        );
    }
 }
--- a/frontend/src/containers/coMarket/components/AdditionalPackages.jsx
+++ b/frontend/src/containers/coMarket/components/AdditionalPackages.jsx
@@ -5,19 +5,19 @@ import {coMarketTexts} from '../../../constants/coMarketConstants';

 class AdditionalPackages extends Component {
    render() {
-        const {additionalPackages, country} = this.props;
+        const {additionalPackages, currency} = this.props;
        return (
                <div className="shop-package-options">
-                    <h6 className="shop-package-label options-header">{coMarketTexts.labels.ADDITIONAL_PACKAGES}:</h6>
-                    <Row>
-                        {
-                            additionalPackages.map(additionalPackage => {
-                                return <AdditionalPackageItemContainer key={'additonal-' + additionalPackage.idAdditionalPackage}
-                                    country={country}
-                                    additionalPackage={additionalPackage}/>
-                            })
-                        }
-                    </Row>
+                    <h6 className="shop-package-option-header">
+                        {coMarketTexts.labels.ADDITIONAL_PACKAGES}:
+                    </h6>
+                    {
+                        additionalPackages.map(additionalPackage => {
+                            return <AdditionalPackageItemContainer key={'additonal-' + additionalPackage.idAdditionalPackage}
+                                currency={currency}
+                                additionalPackage={additionalPackage}/>
+                        })
+                    }
                </div>
        );
    }
--- a/frontend/src/containers/coMarket/components/AgreementOptionItemContainer.jsx
+++ b/frontend/src/containers/coMarket/components/AgreementOptionItemContainer.jsx
@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 import {connect} from 'react-redux';
-import {Label, Popover, PopoverBody, Input, Col, Row} from 'reactstrap';
+import {Label, Popover, PopoverBody, Input, Col} from 'reactstrap';
 import {selectAgreement} from '../../../actions/coMarket/coMarketPackageDetailsActions';
 import PriceHelper from '../../../helpers/coMarket/PriceHelper';
 import {coMarketTexts} from '../../../constants/coMarketConstants';
@@ -30,7 +30,7 @@ class AgreementOptionItem extends Component {

    getClass(selectedAgreement, price) {
        return selectedAgreement.idPaymentType === price.idPaymentType ?
-            'selected-option' :
+            'shop-package-option-selected' :
            '';
    }

@@ -38,11 +38,9 @@ class AgreementOptionItem extends Component {
        const {price, selectedAgreement, currency} = this.props;

        return (
-            <Row
-                className={`option-selection ${this.getClass(selectedAgreement, price)}`}
-            >
-                <Label check className="row flex-grow-1 no-wrap">
-                    <Col className="d-flex align-items-center">
+            <div className={`shop-package-option d-flex  ${this.getClass(selectedAgreement, price)}`}>
+                <Label check className="d-flex flex-grow-1 no-wrap">
+                    <Col className="d-flex align-items-center col-6">
                        <Input type="radio"
                               name="price-type"
                               onChange={this.handleOptionChange}
@@ -51,10 +49,10 @@ class AgreementOptionItem extends Component {
                               className="price-type-option"/>
                        <span className="option-name">{price.payType}</span>
                    </Col>
-                    <Col className="d-flex align-items-center">
+                    <Col className="d-flex align-items-center col-3">
                        <span>{price.fixedExtra.toLocaleString()} {currency}</span>
                    </Col>
-                    <Col className="d-flex align-items-center">
+                    <Col className="d-flex align-items-center col-3">
                        <span className="option-value-text monthly-price">
                        {
                            priceHelper.hasRecurrentPrice(price)
@@ -64,10 +62,12 @@ class AgreementOptionItem extends Component {
                    </span>
                    </Col>
                </Label>
-                <i className="price-info-btn fa fa-info-circle d-flex align-items-center"
-                   aria-hidden="true"
-                   id={'info-additonal-' + price.idPaymentType}
-                   onClick={this.toggle}></i>
+                <i
+                className="price-info-btn fa fa-info-circle d-flex align-items-center"
+                aria-hidden="true"
+                id={'info-additonal-' + price.idPaymentType}
+                onClick={this.toggle}
+                ></i>
                <Popover placement="bottom"
                            isOpen={this.state.popoverOpen}
                            target={'info-additonal-' + price.idPaymentType}
@@ -105,7 +105,7 @@ class AgreementOptionItem extends Component {
                       </div>
                   </PopoverBody>
                </Popover>
-            </Row>
+            </div>
        );
    }
 }
--- a/frontend/src/containers/coMarket/components/AgreementOptions.jsx
+++ b/frontend/src/containers/coMarket/components/AgreementOptions.jsx
@@ -1,86 +1,19 @@
 import React, {Component} from 'react';
-import {Row, Col} from 'reactstrap';
 import AgreementOptionItemContainer from './AgreementOptionItemContainer.jsx';
-import {coMarketTexts} from '../../../constants/coMarketConstants';
-import {connect} from "react-redux";

 class AgreementOptions extends Component {
-    constructor(props) {
-        super(props);
-
-        this.getFinalPrice = this.getFinalPrice.bind(this);
-        this.filterByAgreement = this.filterByAgreement.bind(this);
-    }
-
-    filterByAgreement(price) {
-        return price.idPaymentType === this.props.selectedAgreement.idPaymentType;
-    }
-
-    getExtra(selected, priceType) {
-        const extraPriceObj = selected.prices.find(this.filterByAgreement);
-        const extraPrice = extraPriceObj ? extraPriceObj[priceType] : 0;
-
-        return extraPrice;
-    }
-
-    getFinalPrice(selectedAgreement, selectedOptions, selectedAdditionals, priceType) {
-        let price = selectedAgreement ? selectedAgreement[priceType] : 0;
-
-        if(selectedAgreement && selectedOptions) {
-            Object.keys(selectedOptions).forEach((idGroup) => {
-                price += this.getExtra(selectedOptions[idGroup], priceType);
-            });
-        }
-        if(selectedAgreement && selectedAdditionals) {
-            selectedAdditionals.forEach((additional) => {
-                price += this.getExtra(additional, priceType);
-            });
-        }
-
-        return price;
-    }
-
    render() {
-        const {prices, currency, selectedAgreement, selectedOptions, selectedAdditionals} = this.props;
+        const {prices, currency} = this.props;
        return (
-                <div className="shop-package-pricing">
-                    <Row className="justify-content-end">
-                        <Col className="col-4">
-                            <h6 className="shop-package-label options-header">{coMarketTexts.labels.ON_DELIVERY}</h6>
-                        </Col>
-                        <Col className="col-4">
-                            <h6 className="shop-package-label options-header">{coMarketTexts.labels.MONTHLY}</h6>
-                        </Col>
-                    </Row>
-                    <div className="shop-package-options">
-                        {
-                            prices && prices.map((price) => {
-                                return (<AgreementOptionItemContainer key={'agreement-' + price.idPaymentType} currency={currency} price={price}/>)
-                            })
-                        }
-                    </div>
-                    <Row className="justify-content-end shop-package-calculated-price">
-                        <Col>
-                            <h6>Price:</h6>
-                        </Col>
-                        <Col className="col-4">
-                            {this.getFinalPrice(selectedAgreement, selectedOptions, selectedAdditionals, 'fixedExtra').toLocaleString()} {currency}
-                        </Col>
-                        <Col className="col-4">
-                            {(this.getFinalPrice(selectedAgreement, selectedOptions, selectedAdditionals, 'recurentExtra')
-                                + this.getFinalPrice(selectedAgreement, selectedOptions, selectedAdditionals, 'servicesExtra')).toLocaleString()}
-                            {' '}{currency}
-                        </Col>
-                    </Row>
+                <div className="shop-package-options shop-package-options-pricing">
+                    {
+                        prices && prices.map((price) => {
+                            return (<AgreementOptionItemContainer key={'agreement-' + price.idPaymentType} currency={currency} price={price}/>)
+                        })
+                    }
                </div>
        );
    }
 }

-const mapStateToProps = (state) => ({
-    selectedAgreement: state.coMarketPackageDetailsReducer.selectedAgreement,
-    selectedOptions: state.coMarketPackageDetailsReducer.selectedOptions,
-    selectedAdditionals: state.coMarketPackageDetailsReducer.selectedAdditionals
-});
-
-export default connect(mapStateToProps) (AgreementOptions);
+export default AgreementOptions;
--- a/frontend/src/containers/coMarket/components/PackageOptionGroup.jsx
+++ b/frontend/src/containers/coMarket/components/PackageOptionGroup.jsx
@@ -0,0 +1,80 @@
+import React, {Component} from 'react';
+import {Row, Col, Dropdown, DropdownToggle, DropdownMenu } from 'reactstrap';
+import PackageOptionItemContainer from './PackageOptionItemContainer';
+import {connect} from 'react-redux';
+
+class PackageOptionGroup extends Component {
+    constructor(props) {
+        super(props);
+
+        this.toggleDropdown = this.toggleDropdown.bind(this);
+        this.state = {
+            dropdownOpen: false
+        };
+    }
+
+    toggleDropdown(groupKey) {
+        this.setState({
+            dropdownOpen: !this.state.dropdownOpen
+       });
+    }
+
+    getClass() {
+        if (this.props.selectedOptions && this.props.selectedOptions[this.props.group.idGroup]) {
+            return 'shop-package-option-selected';
+        }
+        return undefined;
+    }
+
+    render() {
+        const {group, currency, selectedOptions} = this.props;
+        const selectedGroupOption = selectedOptions ? selectedOptions[group.idGroup] : undefined;
+
+        return (
+            <div key={'group-' + group.idGroup} className={this.getClass()}>
+                <Dropdown
+                    isOpen={this.state.dropdownOpen}
+                    toggle={this.toggleDropdown}
+                    className="w-100">
+                    <DropdownToggle
+                    caret
+                    className="w-100 d-flex justify-content-between align-items-center"
+                    tag="div"
+                    >
+                        <div className="d-flex flex-column flex-grow-1">
+                            <small className="shop-package-option-header"> {group.groupName}:</small>
+                            {
+                                selectedGroupOption ?
+                                    (<PackageOptionItemContainer
+                                        option={selectedGroupOption}
+                                        currency={currency}
+                                        idGroup={group.idGroup}
+                                        simplified
+                                    />) :
+                                    (<span>Select ...</span>)
+                            }
+                        </div>
+                    </DropdownToggle>
+                    <DropdownMenu className="w-100">
+                        {
+                            group.options.map(option => {
+                                return (<PackageOptionItemContainer
+                                    key={option.idOptionPackage}
+                                    option={option}
+                                    currency={currency}
+                                    idGroup={group.idGroup}/>)
+                            })
+                        }
+                    </DropdownMenu>
+                </Dropdown>
+            </div>
+        );
+    }
+}
+
+const mapStateToProps = (state) => ({
+    selectedAgreement: state.coMarketPackageDetailsReducer.selectedAgreement,
+    selectedOptions: state.coMarketPackageDetailsReducer.selectedOptions
+});
+
+export default connect(mapStateToProps) (PackageOptionGroup);
--- a/frontend/src/containers/coMarket/components/PackageOptionItemContainer.jsx
+++ b/frontend/src/containers/coMarket/components/PackageOptionItemContainer.jsx
@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 import {connect} from 'react-redux';
-import {Label, Popover, PopoverBody, Input, Col} from 'reactstrap';
+import {Label, Popover, PopoverBody, Input, Row, Col} from 'reactstrap';
 import {selectOption} from '../../../actions/coMarket/coMarketPackageDetailsActions';
 import PriceHelper from '../../../helpers/coMarket/PriceHelper';
 import {coMarketTexts} from '../../../constants/coMarketConstants';
@@ -30,14 +30,14 @@ class PackageOptionItem extends Component {
    }

    isChecked() {
-        return this.props.selectedOptions
-            && this.props.selectedOptions[this.props.idGroup]
+        return !!this.props.selectedOptions
+            && !!this.props.selectedOptions[this.props.idGroup]
            && this.props.selectedOptions[this.props.idGroup].idOptionPackage === this.props.option.idOptionPackage;
    }

-    getClass(isChecked) {
-        return isChecked ?
-            'selected-option' :
+    getClass() {
+        return this.isChecked() ?
+            'shop-package-option-selected' :
            '';
    }

@@ -46,63 +46,83 @@ class PackageOptionItem extends Component {
    }

    render() {
-        const {idGroup, option, country} = this.props;
+        const {idGroup, option, currency, simplified} = this.props;
        const selectedPrice = this.props.selectedAgreement ? priceHelper.getSelectedPrice(option, this.props.selectedAgreement) : null;
        const isChecked = this.isChecked();

-        return (
-            <Col xl="4" lg="4" md="6" xs="6" className="option-value">
-                <div className={'form-check-inline option-selection ' + this.getClass(isChecked)}>
-                    <Label check>
-                        <Input type="radio"
-                               name={'package-option-'+ idGroup}
-                               className="package-option-input"
-                               onChange={this.handleOptionChange}
-                               checked={isChecked}
-                               value={option.idOptionPackage}/>
-                           <div className="option-name">{this.formatName(option.optionName)}</div>
-                           <div className="option-description" dangerouslySetInnerHTML={{__html: option.shortDescription}}></div>
-                           {
-                               priceHelper.hasFixedPrice(selectedPrice) &&
-                               <div className="option-prices">
-                                   <table className="price-table option-price-table">
-                                       <thead>
-                                           <tr>
-                                               <th>{coMarketTexts.labels.ON_DELIVERY}</th>
-                                               <th>{coMarketTexts.labels.MONTHLY}</th>
-                                           </tr>
-                                       </thead>
-                                       <tbody>
-                                           <tr>
-                                               <td>{selectedPrice.fixedExtra && selectedPrice.fixedExtra.toLocaleString() + ' ' + country.currency} </td>
-                                               <td>
-                                                   {
-                                                        priceHelper.hasRecurrentPrice(selectedPrice) ?
-                                                        <div className="option-value-text monthly-price">
-                                                          {priceHelper.sumPrices([selectedPrice.recurentExtra, selectedPrice.servicesExtra]).toLocaleString()} {country.currency}
-                                                        </div>
-                                                        : <div className="option-value-text monthly-price"> 0 </div>
-                                                    }
-                                                </td>
-                                           </tr>
-                                       </tbody>
-                                   </table>
-                               </div>
-                           }
-                    </Label>
+        if (simplified) {
+            return (<div className="d-flex">
+                    <Col className="d-flex align-items-center col-6">
+                        <span className="option-name">
+                            {this.formatName(option.optionName)}
+                        </span>
+                    </Col>
+                    <Col className="d-flex align-items-center col-3">
                    {
-                        !selectedPrice &&
-                        <Label>
-                            <div className="not-available">
-                                ({coMarketTexts.labels.NOT_AVAILABLE})
-                                <i className="price-info-btn fa fa-info-circle"
-                                    aria-hidden="true"
-                                    id={'info-option-' + idGroup + '-' + option.idOptionPackage}
-                                    onClick={this.toggle}></i>
-                            </div>
-                        </Label>
+                        priceHelper.hasFixedPrice(selectedPrice) &&  (<span>
+                            {selectedPrice.fixedExtra && selectedPrice.fixedExtra.toLocaleString() + ' ' + currency}
+                        </span>)
                    }
+                    </Col>
+                    <Col className="d-flex align-items-center col-3">
+                    {
+                        priceHelper.hasFixedPrice(selectedPrice) && priceHelper.hasRecurrentPrice(selectedPrice) ?
+                        (<span>{priceHelper.sumPrices([selectedPrice.recurentExtra, selectedPrice.servicesExtra]).toLocaleString()} {currency}</span>) :
+                        <span>0</span>
+                    }
+                    </Col>
+            </div>)
+        }
+
+        return (
+            <div
+            id={'info-option-' + idGroup + '-' + option.idOptionPackage}
+            className={`shop-package-option d-flex ${this.getClass()}`}
+            >
+                <Label check className="d-flex flex-grow-1 flex-column">
+                <div className="d-flex">
+                    <Col className="col-6 d-flex align-items-center">
+                        <Input type="radio"
+                                        name={'package-option-'+ idGroup}
+                                        className="package-option-input"
+                                        onChange={this.handleOptionChange}
+                                        checked={isChecked}
+                                        value={option.idOptionPackage}/>
+                        <div className="option-name">
+                            {this.formatName(option.optionName)}
+                        </div>
+                    </Col>
+                    <Col className="col-3 d-flex align-items-center">
+                    {
+                        priceHelper.hasFixedPrice(selectedPrice) &&  (<span>
+                            {selectedPrice.fixedExtra && selectedPrice.fixedExtra.toLocaleString() + ' ' + currency}
+                        </span>)
+                    }
+                    </Col>
+                    <Col className="col-3 d-flex align-items-center">
+                    {
+                        priceHelper.hasFixedPrice(selectedPrice) && priceHelper.hasRecurrentPrice(selectedPrice) ?
+                        (<span>{priceHelper.sumPrices([selectedPrice.recurentExtra, selectedPrice.servicesExtra]).toLocaleString()} {currency}</span>) :
+                        <span>0</span>
+                    }
+                    </Col>
                </div>
+                <div
+                className="shop-package-option-description"
+                dangerouslySetInnerHTML={{__html: option.shortDescription}}></div>
+                </Label>
+                {
+                    !selectedPrice &&
+                    <Label>
+                        <div className="not-available">
+                            ({coMarketTexts.labels.NOT_AVAILABLE})
+                            <i className="price-info-btn fa fa-info-circle"
+                                aria-hidden="true"
+                                id={'info-option-' + idGroup + '-' + option.idOptionPackage}
+                                onClick={this.toggle}></i>
+                        </div>
+                    </Label>
+                }
                <Popover placement="bottom"
                            isOpen={this.state.popoverOpen}
                            target={'info-option-' + idGroup + '-' + option.idOptionPackage}
@@ -111,7 +131,7 @@ class PackageOptionItem extends Component {
                       {coMarketTexts.labels.SELECTION_NOT_AVAILABLE}
                   </PopoverBody>
                </Popover>
-            </Col>
+            </div>
        );
    }
 }
--- a/frontend/src/containers/coMarket/components/PackageOptions.jsx
+++ b/frontend/src/containers/coMarket/components/PackageOptions.jsx
@@ -1,35 +0,0 @@
-import React, {Component} from 'react';
-import {Row} from 'reactstrap';
-import PackageOptionItemContainer from './PackageOptionItemContainer.jsx';
-import {coMarketTexts} from '../../../constants/coMarketConstants';
-
-class PackageOptions extends Component {
-    render() {
-        const {groups, country} = this.props;
-        return (
-                <div className="shop-package-options">
-                    <h6 className="shop-package-label options-header">{coMarketTexts.labels.PACKAGE_OPTIONS}</h6>
-                        {
-                            Object.keys(groups).map(groupKey => {
-                                const group = groups[groupKey];
-                                return <div key={'group-' + group.idGroup} className="package-option">
-                                    <h6 className="shop-package-label"> {group.groupName}:</h6>
-                                    <Row>
-                                        {
-                                            group.options.map(option => {
-                                                return <PackageOptionItemContainer key={'option-' + group.idGroup + option.idOptionPackage}
-                                                    option={option}
-                                                    country={country}
-                                                    idGroup={group.idGroup}/>
-                                            })
-                                        }
-                                    </Row>
-                                </div>
-                            })
-                        }
-                </div>
-        );
-    }
-}
-
-export default PackageOptions;
--- a/frontend/src/containers/coMarket/components/PackagePrice.jsx
+++ b/frontend/src/containers/coMarket/components/PackagePrice.jsx
@@ -1,5 +1,6 @@
 import React, {Component} from 'react';
 import {connect} from 'react-redux';
+import { Col } from 'reactstrap';
 import {coMarketTexts} from '../../../constants/coMarketConstants';

 class PackagePrice extends Component {
@@ -38,34 +39,55 @@ class PackagePrice extends Component {
        return price;
    }

+    getFormatedFixedPrice(selectedAgreement, selectedOptions, selectedAdditionals) {
+        if (!selectedAgreement) {
+            return '-';
+        }
+
+        const finalPrice = this.getFinalPrice(
+            selectedAgreement,
+            selectedOptions,
+            selectedAdditionals,
+            'fixedExtra');
+        return `${finalPrice.toLocaleString()} ${this.props.currency}`
+    }
+
+    getFormatedRecurrentPrice(selectedAgreement, selectedOptions, selectedAdditionals) {
+        if (!selectedAgreement) {
+            return '-';
+        }
+
+        const recurrentExtra = this.getFinalPrice(selectedAgreement, selectedOptions, selectedAdditionals, 'recurentExtra');
+        const servicesExtra = this.getFinalPrice(selectedAgreement, selectedOptions, selectedAdditionals, 'servicesExtra');
+
+        return `${(recurrentExtra + servicesExtra).toLocaleString()} ${this.props.currency}`
+    }
+
    render() {
-        const {currency, selectedAgreement, selectedOptions, selectedAdditionals} = this.props;
+        const {selectedAgreement, selectedOptions, selectedAdditionals} = this.props;

        return (
-                <div className="selection-price">
-                    {
-                        selectedAgreement &&
-                        <table className="price-table main-price">
-                            <thead>
-                                <tr>
-                                    <th>{coMarketTexts.labels.ON_DELIVERY}</th>
-                                    <th>{coMarketTexts.labels.MONTHLY}</th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                <tr>
-                                    <td>
-                                        {this.getFinalPrice(selectedAgreement, selectedOptions, selectedAdditionals, 'fixedExtra').toLocaleString()} {currency}
-                                    </td>
-                                    <td>
-                                        {(this.getFinalPrice(selectedAgreement, selectedOptions, selectedAdditionals, 'recurentExtra')
-                                        + this.getFinalPrice(selectedAgreement, selectedOptions, selectedAdditionals, 'servicesExtra')).toLocaleString()}
-                                    {' '}{currency}
-                                    </td>
-                                </tr>
-                            </tbody>
-                        </table>
-                    }
+                <div className="shop-package-price d-flex flex-column">
+                    <div className="d-flex flex-grow-1 no-wrap">
+                        <Col className="col-3 offset-6">
+                            <h6>{coMarketTexts.labels.ON_DELIVERY}:</h6>
+                        </Col>
+                        <Col className="col-3">
+                            <h6>{coMarketTexts.labels.MONTHLY}:</h6>
+                        </Col>
+                    </div>
+                    <div className="d-flex flex-grow-1 no-wrap">
+                        <Col className="col-3 offset-6">
+                            <h4>
+                                {this.getFormatedFixedPrice(selectedAgreement, selectedOptions, selectedAdditionals)}
+                            </h4>
+                        </Col>
+                        <Col className="col-3">
+                            <h4>
+                                {this.getFormatedRecurrentPrice(selectedAgreement, selectedOptions, selectedAdditionals)}
+                            </h4>
+                        </Col>
+                    </div>
                </div>
        );
    }
--- a/frontend/src/containers/coMarket/style/CoMarketPackageDetailsContainer.scss
+++ b/frontend/src/containers/coMarket/style/CoMarketPackageDetailsContainer.scss
@@ -55,19 +55,50 @@
 #shop-package-buy-info{
    padding: 2rem;

-    .shop-package-pricing {
-        > div.row {
-            margin: 0 32px 0 0;
-        }
-    }
-
-    .shop-package-calculated-price {
-        font-weight: $font-weight;
-    }
-
    .shop-package-options{
        margin: 1rem 0;
-        border-bottom: 2px solid $title-color;
+        input[type=radio], input[type=checkbox] {
+            position: relative;
+            margin: 0 10px 0 0;
+        }
+        .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;
+            } 
+            &-header {
+                color: $font-light-color;
+            }           
+            &-description {
+                padding-top: 0.5rem;
+                font-size: $font-size-msmall;
+                margin-left: 38px;
+                color: $font-light-color;
+            }     
+            label {
+                cursor: pointer;
+                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-option:hover, label:hover, .dropdown:hover {
+            background: $hoverColor;
+        }
    }

    .not-available {
@@ -79,59 +110,19 @@
    }

    .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;
+        color: #fff;
+        background-color: $accentColor;
+        border: none;

    }

-    .selected-option {
-        background: $hoverColor;
-    }
-
-    .option-selection {
-        padding: 0.5rem 0;
-        margin: 0;
-        flex-wrap: nowrap;
-
-        > label {
-            cursor: pointer;
-            margin: 0;
-            flex-wrap: nowrap;
-        }
-
-        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;
    }
@@ -140,32 +131,11 @@
        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;
+        }
    }
 }
--- a/frontend/src/helpers/OrderHelper.js
+++ b/frontend/src/helpers/OrderHelper.js
@@ -38,10 +38,18 @@ export const fromWCOrder = (WCOrder) => {
                payPeriod: packageLine['pay_period'],
                shortDesc: packageLine['short_desc'],
                dateCompleted: formatDate(packageLine['date_completed']),
+                additionalPackages:  packageLine['additional_packages'].map(additionalPackage => ({
+                    idPackage: additionalPackage.id,
+                    packageName: additionalPackage.name,
+                })),
+                options: packageLine['options'].map(packageOption => ({
+                    idPackage: packageOption.id,
+                    packageName: packageOption.name,
+                })),
            };
        }),
        deliveryAddress: formatAddress(WCOrder.shipping),
        customer: WCOrder.customer,
-        commercialLead: WCOrder['commercial_lead']
+        commercialLead: WCOrder['commercial_lead'],
    }
 };
--- 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['minimal_fixed_price'],
+        servicesExtra: price['minimal_services_price'],
+        recurentExtra: price['recurrent_price']
+    }));
+}
+
+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,
@@ -11,22 +49,26 @@ export const fromWCPackage = wcPackage => {
        country: 'Sweden',
        countryCode: 'se',
        currency: 'SEK',
-        documents: [],
+        documents: [
+            {
+                idDocument: 1,
+                documentName: 'test1',
+                extension: '.php'
+            },
+            {
+                idDocument: 2,
+                documentName: 'test2',
+                extension: '.php'
+            }
+        ],
        shortDescription: wcPackage.description,
-        prices: wcPackage.prices.map(price => ({
-            idPrice: price.id,
-            idPaymentType: price.id,
-            payType: price['payment_type'],
-            isSameCompanyAsCl: false,
-            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: [],
+        prices: extractPrices(wcPackage.id, wcPackage.prices) || [],
+        groups: extractGroups(wcPackage.groups),
+        additionalPackages: wcPackage['additional_packages'].map(additionalPackage =>({
+            idAdditionalPackage: additionalPackage.id,
+            packageName: additionalPackage.name,
+            shortDescription: additionalPackage.description,
+            prices: extractPrices(additionalPackage.id, additionalPackage.prices)
+        })),
    }
 };
--- 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: #f16078;

 $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-strong-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;