From c38b1fc7b32fd9bc312164e9c2466384ecbc8547 Mon Sep 17 00:00:00 2001
From: jitendra <jitendra@webkul.com>
Date: Mon, 10 Sep 2018 14:50:08 +0530
Subject: [PATCH] First commit

---
 config/carriers.php                           |  11 +
 .../Webkul/Product/src/Models/Product.php     |  16 +
 .../src/Product/ConfigurableOption.php        | 228 ++++++++++++
 .../Webkul/Product/src/Product/Gallery.php    |  25 ++
 packages/Webkul/Product/src/Product/Price.php |   2 +-
 .../Webkul/Product/src/Product/Review.php     |  15 +-
 .../Shop/src/Resources/assets/sass/app.scss   | 343 +++++-------------
 .../Webkul/Shop/src/Resources/lang/en/app.php |   5 +-
 .../views/products/list/card.blade.php        |   6 +-
 .../Resources/views/products/review.blade.php |  24 +-
 .../Resources/views/products/view.blade.php   |  67 ++--
 .../views/products/view/attributes.blade.php  |   2 +-
 .../view/configurable-options.blade.php       | 182 ++++++++--
 .../views/products/view/gallery.blade.php     |   2 +-
 .../views/products/view/reviews.blade.php     |  13 +-
 public/themes/default/assets/css/shop.css     | 337 +++++------------
 .../vendor/mail/html/promotion.blade.php      |   2 +-
 17 files changed, 697 insertions(+), 583 deletions(-)
 create mode 100644 config/carriers.php
 create mode 100644 packages/Webkul/Product/src/Product/ConfigurableOption.php
 create mode 100644 packages/Webkul/Product/src/Product/Gallery.php

diff --git a/config/carriers.php b/config/carriers.php
new file mode 100644
index 000000000..a4bfc47c5
--- /dev/null
+++ b/config/carriers.php
@@ -0,0 +1,11 @@
+<?php
+
+return [
+    [
+        'code' => 'flatrate',
+        'name' => 'Flat Rate',
+        'class' => 'Webkul\Shipping\Calculators\FlatRate'
+    ]
+];
+
+?>
\ No newline at end of file
diff --git a/packages/Webkul/Product/src/Models/Product.php b/packages/Webkul/Product/src/Models/Product.php
index 31795327a..b0aa76fb2 100644
--- a/packages/Webkul/Product/src/Models/Product.php
+++ b/packages/Webkul/Product/src/Models/Product.php
@@ -132,6 +132,22 @@ class Product extends Model
         return $this->attribute_family->custom_attributes->pluck('code')->contains($attribute);
     }
 
+    /**
+     * @param string $key
+     *
+     * @return bool
+     */
+    public function isSaleable()
+    {
+        if($this->status) {
+            if($this->inventories->sum('qty')) {
+                return true;
+            }
+        }
+    
+        return false;
+    }
+
     /**
      * Get an attribute from the model.
      *
diff --git a/packages/Webkul/Product/src/Product/ConfigurableOption.php b/packages/Webkul/Product/src/Product/ConfigurableOption.php
new file mode 100644
index 000000000..6cb84ad3d
--- /dev/null
+++ b/packages/Webkul/Product/src/Product/ConfigurableOption.php
@@ -0,0 +1,228 @@
+<?php
+
+namespace Webkul\Product\Product;
+
+use Webkul\Attribute\Repositories\AttributeOptionRepository as AttributeOption;
+use Webkul\Product\Product\Gallery;
+use Webkul\Product\Product\Price;
+
+class ConfigurableOption extends AbstractProduct
+{
+    /**
+     * AttributeOptionRepository object
+     *
+     * @var array
+     */
+    protected $attributeOption;
+
+    /**
+     * Gallery object
+     *
+     * @var array
+     */
+    protected $gallery;
+
+    /**
+     * Price object
+     *
+     * @var array
+     */
+    protected $price;
+
+    /**
+     * Create a new controller instance.
+     *
+     * @param  Webkul\Attribute\Repositories\AttributeOptionRepository $attributeOption
+     * @param  Webkul\Product\Product\Gallery                          $gallery
+     * @param  Webkul\Product\Product\Price                            $price
+     * @return void
+     */
+    public function __construct(
+        AttributeOption $attributeOption,
+        Gallery $gallery,
+        Price $price
+    )
+    {
+        $this->attributeOption = $attributeOption;
+
+        $this->gallery = $gallery;
+
+        $this->price = $price;
+    }
+
+    /**
+     * Returns the allowed variants
+     *
+     * @param Product $product
+     * @return float
+     */
+    public function getAllowProducts($product)
+    {
+        $variants = [];
+
+        foreach ($product->variants as $variant) {
+            if ($variant->isSaleable()) {
+                $variants[] = $variant;
+            }
+        }
+        
+        return $variants;
+    }
+
+    /**
+     * Returns the allowed variants JSON
+     *
+     * @param Product $product
+     * @return float
+     */
+    public function getConfigurationConfig($product)
+    {
+        $options = $this->getOptions($product, $this->getAllowProducts($product));
+
+        $config = [
+            'attributes' => $this->getAttributesData($product, $options),
+            'index' => isset($options['index']) ? $options['index'] : [],
+            'variant_prices' => $this->getVariantPrices($product),
+            'variant_images' => $this->getVariantImages($product),
+            'chooseText' => trans('shop::app.products.choose-option')
+        ];
+
+        return $config;
+    }
+
+    /**
+     * Get allowed attributes
+     *
+     * @param Product $product
+     * @return array
+     */
+    public function getAllowAttributes($product)
+    {
+        return $product->super_attributes;
+    }
+
+    /**
+     * Get Configurable Product Options
+     *
+     * @param Product $currentProduct
+     * @param array $allowedProducts
+     * @return array
+     */
+    public function getOptions($currentProduct, $allowedProducts)
+    {
+        $options = [];
+
+        $allowAttributes = $this->getAllowAttributes($currentProduct);
+
+        foreach ($allowedProducts as $product) {
+
+            $productId = $product->id;
+
+            foreach ($allowAttributes as $productAttribute) {
+                $productAttributeId = $productAttribute->id;
+
+                $attributeValue = $product->{$productAttribute->code};
+
+                $options[$productAttributeId][$attributeValue][] = $productId;
+
+                $options['index'][$productId][$productAttributeId] = $attributeValue;
+            }
+        }
+
+        return $options;
+    }
+
+    /**
+     * Get product attributes
+     *
+     * @param Product $product
+     * @param array $options
+     * @return array
+     */
+    public function getAttributesData($product, array $options = [])
+    {
+        $defaultValues = [];
+
+        $attributes = [];
+
+        foreach ($product->super_attributes as $attribute) {
+
+            $attributeOptionsData = $this->getAttributeOptionsData($attribute, $options);
+
+            if ($attributeOptionsData) {
+                $attributeId = $attribute->id;
+
+                $attributes[] = [
+                    'id' => $attributeId,
+                    'code' => $attribute->code,
+                    'label' => $attribute->name,
+                    'options' => $attributeOptionsData
+                ];
+            }
+        }
+
+        return $attributes;
+    }
+
+    /**
+     * @param Attribute $attribute
+     * @param array $options
+     * @return array
+     */
+    protected function getAttributeOptionsData($attribute, $options)
+    {
+        $attributeOptionsData = [];
+
+        foreach ($attribute->options as $attributeOption) {
+
+            $optionId = $attributeOption->id;
+
+            if(isset($options[$attribute->id][$optionId])) {
+                $attributeOptionsData[] = [
+                    'id' => $optionId,
+                    'label' => $attributeOption->label,
+                    'products' => $options[$attribute->id][$optionId]
+                ];
+            }
+        }
+
+        return $attributeOptionsData;
+    }
+
+    /**
+     * Get product prices for configurable variations
+     *
+     * @param Product $product
+     * @return array
+     */
+    protected function getVariantPrices($product)
+    {
+        $prices = [];
+
+        foreach ($this->getAllowProducts($product) as $variant) {
+            $prices[$variant->id] = [
+                'regular_price' => $variant->price,
+                'final_price' => $this->price->getMinimalPrice($variant),
+            ];
+        }
+
+        return $prices;
+    }
+
+    /**
+     * Get product images for configurable variations
+     *
+     * @param Product $product
+     * @return array
+     */
+    protected function getVariantImages($product)
+    {
+        $images = [];
+
+        foreach ($this->getAllowProducts($product) as $variant) {
+            $images[$variant->id] = $this->gallery->getImages($variant);
+        }
+
+        return $images;
+    }
+}
\ No newline at end of file
diff --git a/packages/Webkul/Product/src/Product/Gallery.php b/packages/Webkul/Product/src/Product/Gallery.php
new file mode 100644
index 000000000..7e47592c1
--- /dev/null
+++ b/packages/Webkul/Product/src/Product/Gallery.php
@@ -0,0 +1,25 @@
+<?php
+
+namespace Webkul\Product\Product;
+
+use Webkul\Attribute\Repositories\AttributeOptionRepository as AttributeOption;
+
+class Gallery extends AbstractProduct
+{
+    /**
+     * Retrieve collection of gallery images
+     *
+     * @param Product $product
+     * @return array
+     */
+    public function getImages($product)
+    {
+        $images[] = [
+            'small_image_url' => '',
+            'medium_image_url' => '',
+            'large_image_url' => '',
+        ];
+
+        return $images;
+    }
+}
\ No newline at end of file
diff --git a/packages/Webkul/Product/src/Product/Price.php b/packages/Webkul/Product/src/Product/Price.php
index f07417649..98e10e4f4 100644
--- a/packages/Webkul/Product/src/Product/Price.php
+++ b/packages/Webkul/Product/src/Product/Price.php
@@ -78,7 +78,7 @@ class Price extends AbstractProduct
     public function getSpecialPrice($product)
     {
         if($this->haveSpecialPrice($product)) {
-                return $product->special_price;
+            return $product->special_price;
         } else {
             return $product->price;
         }
diff --git a/packages/Webkul/Product/src/Product/Review.php b/packages/Webkul/Product/src/Product/Review.php
index 7028d3d8a..f9c60e3eb 100644
--- a/packages/Webkul/Product/src/Product/Review.php
+++ b/packages/Webkul/Product/src/Product/Review.php
@@ -4,6 +4,17 @@ namespace Webkul\Product\Product;
 
 class Review extends AbstractProduct
 {
+    /**
+     * Returns the product's avg rating
+     *
+    * @param Product $product
+     * @return float
+     */
+    public function getReviews($product)
+    {
+        return $product->reviews()->where('status', 'approved');
+    }
+
     /**
      * Returns the product's avg rating
      *
@@ -12,7 +23,7 @@ class Review extends AbstractProduct
      */
     public function getAverageRating($product)
     {
-        return round($product->reviews->average('rating'));
+        return number_format(round($product->reviews()->where('status', 'approved')->average('rating'), 2), 1);
     }
 
     /**
@@ -23,7 +34,7 @@ class Review extends AbstractProduct
      */
     public function getTotalReviews($product)
     {
-        return $product->reviews()->count();
+        return $product->reviews()->where('status', 'approved')->count();
     }
 
     /**
diff --git a/packages/Webkul/Shop/src/Resources/assets/sass/app.scss b/packages/Webkul/Shop/src/Resources/assets/sass/app.scss
index 8e9ed7f32..e9c6882b4 100644
--- a/packages/Webkul/Shop/src/Resources/assets/sass/app.scss
+++ b/packages/Webkul/Shop/src/Resources/assets/sass/app.scss
@@ -509,6 +509,15 @@ section.slider-block {
         .product-ratings {
             width: 100%;
             margin-bottom: 14px;
+
+            .icon {
+                width: 16px;
+                height: 16px;
+            }
+
+            .total-reviews {
+                display: none;
+            }
         }
 
         .cart-fav-seg {
@@ -974,15 +983,10 @@ section.slider-block {
     //edit form ends
 }
 //account ends here
-
-
-
-
 //customers page css ends here
 
 // product pages css starts here
-
-section.product-detail, section.product-review {
+section.product-detail {
     font-size: 16px;
     color: $product-font-color;
 
@@ -995,119 +999,6 @@ section.product-detail, section.product-review {
         flex-flow: row;
         margin-top: 21px;
 
-        .mixed-group {
-
-            .single-image {
-                padding: 2px;
-
-                img {
-                    height: 280px;
-                    width: 280px;
-                }
-            }
-
-            .details {
-
-                .product-name {
-                    margin-top: 20px;
-                    font-size: 24px;
-                    margin-bottom: 20px;
-                }
-
-                .product-price {
-                    margin-bottom: 14px;
-                }
-            }
-        }
-
-        .rating-reviews {
-            margin-top: 30px;
-
-            .title-inline {
-                display: inline-flex;
-                align-items: center;
-                justify-content: space-between;
-                margin-bottom: 20px;
-                width: 100%;
-
-                button {
-                    float: right;
-                    border-radius: 0px !important;
-                }
-            }
-
-            .overall {
-                display: flex;
-                flex-direction: row;
-                align-items: center;
-                justify-content: space-between;
-                height: 150px;
-
-                .left-side {
-                    margin-bottom: 20px;
-
-                    .number{
-                        font-size: 34px;
-                    }
-                }
-
-                .right-side {
-                    display: block;
-
-                    .rater {
-                        display: inline-flex;
-                        align-items: center;
-
-                        .star {
-                            width: 50px;
-                            height: 20px;
-                            padding: 1px;
-                            margin-right: 8px;
-                        }
-
-                        .line-bar {
-                            height: 4px;
-                            width: 158px;
-                            margin-right: 12px;
-                            background: $bar-color;
-
-                            .line-value {
-                                height: 4px;
-                                width: 100px;
-                                background-color: $dark-blue-shade;
-                            }
-                        }
-                    }
-                }
-
-            }
-
-            .reviews {
-                margin-top: 34px;
-                margin-bottom: 90px;
-
-                .review {
-                    margin-bottom: 25px;
-
-                    .title {
-                        margin-bottom: 5px;
-                    }
-
-                    .stars {
-                        margin-bottom: 15px;
-                    }
-                    .message {
-                        margin-bottom: 10px;
-                    }
-                }
-                .view-all {
-                    margin-top:15px;
-                    color: $logo-color;
-                    margin-bottom:15px;
-                }
-            }
-        }
-
         div.product-image-group {
             display:flex;
             flex-direction: row;
@@ -1139,20 +1030,32 @@ section.product-detail, section.product-review {
         }
 
         .details {
+            .product-price {
+                margin-bottom: 14px;
+            }
+
+            .product-ratings {
+                margin-bottom: 20px;
+
+                .icon {
+                    width: 16px;
+                    height: 16px;
+                }
+
+                .total-reviews {
+                    display: inline-block;
+                    margin-left: 15px;
+                }
+            }
 
             .product-heading {
                 font-size: 24px;
                 color: $product-font-color;
-                margin-bottom: 14px;
-            }
-
-            .rating {
-                color: $product-font-color;
-                margin-bottom: 14px;
+                margin-bottom: 15px;
             }
 
             .product-price {
-                margin-bottom: 14px;
+                margin-bottom: 15px;
                 font-size: 24px;
 
                 .special-price {
@@ -1161,11 +1064,13 @@ section.product-detail, section.product-review {
             }
 
             .stock-status {
-                margin-bottom: 14px;
+                margin-bottom: 15px;
             }
 
             .description {
-                margin-bottom: 14px;
+                margin-bottom: 15px;
+                padding-bottom: 15px;
+                border-bottom: solid 1px rgba(162, 162, 162, 0.2)
             }
 
             .full-specifications {
@@ -1188,145 +1093,81 @@ section.product-detail, section.product-review {
             .attributes {
                 display: block;
                 width: 100%;
-
-                .attribute {
-                    height: 39px;
-                    margin-bottom: 20px;
-
-                    .title {
-                        float: left;
-                        height: 100%;
-                        min-width: 130px;
-                        padding-top: 9px;
-                    }
-
-                    .values {
-                        display: inline-flex;
-
-                        .colors {
-                            margin-right:5px;
-                        }
-                        .colors:last-child {
-                            margin-right: 0;
-                        }
-
-                        .red {
-                            height: 37px;
-                            width: 37px;
-                            background: red;
-                            border: 1px solid $border-color;
-                            border-radius:  2px;
-                        }
-
-                        .blue {
-                            height: 37px;
-                            width: 37px;
-                            background: blue;
-                            border: 1px solid $border-color;
-                            border-radius:  2px;
-                        }
-
-                        .green {
-                            height: 37px;
-                            width: 37px;
-                            background: green;
-                            border: 1px solid $border-color;
-                            border-radius:  2px;
-                        }
-
-                        .size {
-                            margin-right:5px;
-                            line-height: 38px;
-                            height: 37px;
-                            width: 60px;
-                            border: 1px solid $border-color;
-                            border-radius:  2px;
-                            text-align: center;
-                            vertical-align: middle;
-                        }
-                        .size:last-child {
-                            margin-right: 0;
-                        }
-
-                        .quantity {
-                            .values {
-                                .control {
-                                    height: 37px !important;
-                                    width: 30px !important;
-                                }
-                            }
-                        }
-                    }
-                }
+                border-bottom: solid 1px rgba(162, 162, 162, 0.2);
             }
 
             .full-description {
                 font-size: 16px;
             }
+        }
+    }
+}
 
-            .rating-reviews {
-                margin-top: 30px;
+.rating-reviews {
 
-                .title {
-                    margin-bottom: 15px;
-                    font-weight: 600;
-                }
+    .rating-header {
+        font-weight: 600;
+        padding: 20px 0;
+    }
 
-                .overall {
-                    margin-bottom: 5px;
+    .stars {
+        .icon {
+            width: 16px;
+            height: 16px;
+        }
+    }
 
-                    .review-info {
-                        .number {
-                            font-size: 34px;
-                        }
-                    }
+    .overall {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
 
-                    button {
-                        float: right;
-                        border-radius: 0px !important;
-                    }
-
-                }
-
-                .reviews {
-                    margin-top: 34px;
-                    margin-bottom: 80px;
-
-                    .review {
-                        margin-bottom: 25px;
-
-                        .stars {
-                            margin-bottom: 15px;
-                            display: inline-block;
-
-                            .icon {
-                                width: 18px;
-                                height: 18px;
-                            }
-                        }
-
-                        .message {
-                            margin-bottom: 10px;
-                        }
-
-                        .reviewer-details {
-                            color: #5E5E5E;
-                        }
-                    }
-
-                    .view-all {
-                        margin-top:15px;
-                        color: $logo-color;
-                        margin-bottom:15px;
-                    }
-                }
+        .review-info {
+            .number {
+                font-size: 34px;
             }
+
+            .total-reviews {
+                margin-top: 10px;
+            }
+        }
+    }
+
+    .reviews {
+        margin-top: 40px;
+        margin-bottom: 40px;
+
+        .review {
+            margin-bottom: 25px;
+
+            .title {
+                margin-bottom: 5px;
+            }
+
+            .stars {
+                margin-bottom: 15px;
+                display: inline-block;
+            }
+
+            .message {
+                margin-bottom: 10px;
+            }
+
+            .reviewer-details {
+                color: #5E5E5E;
+            }
+        }
+
+        .view-all {
+            margin-top:15px;
+            color: $logo-color;
+            margin-bottom:15px;
         }
     }
 }
 
 /* cart pages and elements css begins here */
-
 section.cart {
     color: $product-font-color;
     font-size: 16px;
diff --git a/packages/Webkul/Shop/src/Resources/lang/en/app.php b/packages/Webkul/Shop/src/Resources/lang/en/app.php
index 914f33216..f2aaaf9a6 100644
--- a/packages/Webkul/Shop/src/Resources/lang/en/app.php
+++ b/packages/Webkul/Shop/src/Resources/lang/en/app.php
@@ -49,6 +49,9 @@ return [
         'specification' => 'Specification',
         'total-reviews' => ':total Reviews',
         'by' => 'By :name',
-        'up-sell-title' => 'We found other products you might like!'
+        'up-sell-title' => 'We found other products you might like!',
+        'reviews-title' => 'Ratings & Reviews',
+        'write-review-btn' => 'Write Review',
+        'choose-option' => 'Choose an option'
     ]
 ];
\ No newline at end of file
diff --git a/packages/Webkul/Shop/src/Resources/views/products/list/card.blade.php b/packages/Webkul/Shop/src/Resources/views/products/list/card.blade.php
index 34f182e1a..4a8597386 100644
--- a/packages/Webkul/Shop/src/Resources/views/products/list/card.blade.php
+++ b/packages/Webkul/Shop/src/Resources/views/products/list/card.blade.php
@@ -22,11 +22,7 @@
         
         @include ('shop::products.price', ['product' => $product])
 
-        @if ($product->reviews->count())
-
-            @include ('shop::products.review', ['product' => $product])
-
-        @endif
+        @include ('shop::products.review', ['product' => $product])
 
         @include ('shop::products.add-to', ['product' => $product])
     
diff --git a/packages/Webkul/Shop/src/Resources/views/products/review.blade.php b/packages/Webkul/Shop/src/Resources/views/products/review.blade.php
index f5cd7d9ed..fb9c2f09c 100644
--- a/packages/Webkul/Shop/src/Resources/views/products/review.blade.php
+++ b/packages/Webkul/Shop/src/Resources/views/products/review.blade.php
@@ -1,11 +1,19 @@
-<div class="product-ratings">
+@inject ('reviewHelper', 'Webkul\Product\Product\Review')
 
-    @inject ('reviewHelper', 'Webkul\Product\Product\Review')
+@if ($total = $reviewHelper->getTotalReviews($product))
+    <div class="product-ratings">
 
-    @for ($i = 1; $i <= $reviewHelper->getAverageRating($product); $i++)
+        <span class="stars">
+            @for ($i = 1; $i <= round($reviewHelper->getAverageRating($product)); $i++)
 
-        <span class="icon star-icon"></span>
-    
-    @endfor
-    
-</div>
\ No newline at end of file
+                <span class="icon star-icon"></span>
+            
+            @endfor
+        </span>
+
+        <div class="total-reviews">
+            {{ __('shop::app.products.total-reviews', ['total' => $total]) }}
+        </div>
+        
+    </div>
+@endif
\ No newline at end of file
diff --git a/packages/Webkul/Shop/src/Resources/views/products/view.blade.php b/packages/Webkul/Shop/src/Resources/views/products/view.blade.php
index 8e776dd5f..c42e1a245 100644
--- a/packages/Webkul/Shop/src/Resources/views/products/view.blade.php
+++ b/packages/Webkul/Shop/src/Resources/views/products/view.blade.php
@@ -10,53 +10,56 @@
 
         <div class="layouter">
 
-            @include ('shop::products.view.gallery')
+            <form action="" style="display: inherit;">
 
-            <div class="details">
+                @csrf()
 
-                <div class="product-heading">
-                    <span>{{ $product->name }}</span>
-                </div>
+                <input type="hidden" name="product">
+                
+                <input type="hidden" name="selected_configurable_option">
 
-                <div class="rating">
-                    <img src="{{ bagisto_asset('images/5star.svg') }}" />
-                    75 Ratings & 11 Reviews
-                </div>
+                @include ('shop::products.view.gallery')
 
-                @include ('shop::products.price', ['product' => $product])
+                <div class="details">
 
-                @include ('shop::products.view.stock')
+                    <div class="product-heading">
+                        <span>{{ $product->name }}</span>
+                    </div>
 
-                <br/>
+                    @include ('shop::products.review', ['product' => $product])
 
-                <div class="description">
-                    {{ $product->short_description }}
-                </div>
+                    @include ('shop::products.price', ['product' => $product])
 
-                @if ($product->type == 'configurable')
+                    @include ('shop::products.view.stock')
+
+
+                    <div class="description">
+                        {{ $product->short_description }}
+                    </div>
 
                     @include ('shop::products.view.configurable-options')
-                
-                @endif
 
-                <accordian :title="{{ __('shop::app.products.description') }}" :active="true">
-                    <div slot="header">
-                        {{ __('shop::app.products.description') }}
-                        <i class="icon expand-icon right"></i>
-                    </div>
-
-                    <div slot="body">
-                        <div class="full-description">
-                            {{ $product->description }}
+                    <accordian :title="'{{ __('shop::app.products.description') }}'" :active="true">
+                        <div slot="header">
+                            {{ __('shop::app.products.description') }}
+                            <i class="icon expand-icon right"></i>
                         </div>
-                    </div>
-                </accordian>
 
-                @include ('shop::products.view.attributes')
+                        <div slot="body">
+                            <div class="full-description">
+                                {{ $product->description }}
+                            </div>
+                        </div>
+                    </accordian>
 
-                @include ('shop::products.view.reviews')
+                    @include ('shop::products.view.attributes')
+
+                    @include ('shop::products.view.reviews')
+
+                </div>
+                
+            </form>
 
-            </div>
         </div>
 
         @include ('shop::products.view.up-sells')
diff --git a/packages/Webkul/Shop/src/Resources/views/products/view/attributes.blade.php b/packages/Webkul/Shop/src/Resources/views/products/view/attributes.blade.php
index c78988d35..be235e343 100644
--- a/packages/Webkul/Shop/src/Resources/views/products/view/attributes.blade.php
+++ b/packages/Webkul/Shop/src/Resources/views/products/view/attributes.blade.php
@@ -1,6 +1,6 @@
 @inject ('productViewHelper', 'Webkul\Product\Product\View')
 
-<accordian :title="{{ __('shop::app.products.specification') }}" :active="false">
+<accordian :title="'{{ __('shop::app.products.specification') }}'" :active="false">
     <div slot="header">
         {{ __('shop::app.products.specification') }}
         <i class="icon expand-icon right"></i>
diff --git a/packages/Webkul/Shop/src/Resources/views/products/view/configurable-options.blade.php b/packages/Webkul/Shop/src/Resources/views/products/view/configurable-options.blade.php
index 1ebdb1f39..f6cad3173 100644
--- a/packages/Webkul/Shop/src/Resources/views/products/view/configurable-options.blade.php
+++ b/packages/Webkul/Shop/src/Resources/views/products/view/configurable-options.blade.php
@@ -1,33 +1,165 @@
-<div class="attributes">
+@if ($product->type == 'configurable')
 
-    <div class="attribute color">
-        <div class="title">Color</div>
+    @inject ('configurableOptionHelper', 'Webkul\Product\Product\ConfigurableOption')
 
-        <div class="values">
-            <div class="colors red"></div>
-            <div class="colors blue"></div>
-            <div class="colors green"></div>
-        </div>
-    </div>
 
-    <div class="attribute size">
-        <div class="title">Size</div>
+    <product-options></product-options>
 
-        <div class="values">
-            <div class="size xl">XL</div>
-            <div class="size xxl">XXL</div>
-            <div class="size xxxl">XXXL</div>
-        </div>
-    </div>
+    @push('scripts')
 
-    <div class="attribute quantity">
-        <div class="title">Quantity</div>
+        <script type="text/x-template" id="product-options-template">
+            <div class="attributes">
 
-        <div class="values">
-            <div class="size">1</div>
-        </div>
-    </div>
+                <div v-for='(attribute, index) in childAttributes' class="attribute control-group" :class="[errors.has('super_attribute[' + attribute.id + ']') ? 'has-error' : '']">
+                    <label class="reqiured">@{{ attribute.label }}</label>
 
-</div>
+                    <select v-validate="'required'" class="control" :name="['super_attribute[' + attribute.id + ']']" :disabled="attribute.disabled" @change="configure(attribute, $event.target.value)">
 
-<hr/>
\ No newline at end of file
+                        <option  v-for='(option, index) in attribute.options' :value="option.id">@{{ option.label }}</option>
+                        
+                    </select>
+
+                    <span class="control-error" v-if="errors.has('super_attribute[' + attribute.id + ']')">@{{ errors.first('super_attribute[' + attribute.id + ']') }}</span>
+                </div>
+
+            </div>
+        </script>
+
+        <script>
+            Vue.component('product-options', {
+
+                template: '#product-options-template',
+
+                data: () => ({
+                    config: @json($configurableOptionHelper->getConfigurationConfig($product)),
+                    childAttributes: []
+                }),
+
+                created () {
+                    var childAttributes = this.childAttributes,
+                        attributes = this.config.attributes,
+                        index = attributes.length,
+                        attribute;
+
+                    while (index--) {
+                        // attribute = Object.assign({}, attributes[index]);
+                        attribute = attributes[index];
+
+                        attribute.options = [];
+
+                        if (index) {
+                            attribute.disabled = true;
+                        } else {
+                            this.fillSelect(attribute);
+                        }
+
+                        attribute = Object.assign(attribute, {
+                            childAttributes: childAttributes.slice(),
+                            prevAttribute: attributes[index - 1],
+                            nextAttribute: attributes[index + 1]
+                        });
+
+                        childAttributes.unshift(attribute);
+                    }
+                },
+
+                methods: {
+                    configure (attribute, value) {
+                        // this.simpleProduct = this._getSimpleProductId(attribute);
+
+                        if (value) {
+                            if (attribute.nextAttribute) {
+                                attribute.nextAttribute.disabled = false;
+                                this.fillSelect(attribute.nextAttribute);
+                                this.resetChildren(attribute.nextAttribute);
+                            } else {
+                                //Set product id hidden value
+                            }
+                        } else {
+                            this.resetChildren(attribute);
+                        }
+
+                        // this.reloadPrice();
+                        // this.changeProductImage();
+                    },
+
+                    fillSelect (attribute) {
+                        var options = this.getAttributeOptions(attribute.id),
+                            prevOption,
+                            index = 1,
+                            products,
+                            i,
+                            j;
+
+                        attribute.options = [];
+                        attribute.options[0] = {'id': '', 'label': this.config.chooseText, 'products': []};
+
+                        if (attribute.prevAttribute) {
+                            prevOption = attribute.prevAttribute.options[attribute.prevAttribute.selectedIndex];
+                        }
+
+                        // console.log(attribute)
+
+                        if (options) {
+                            for (i = 0; i < options.length; i++) {
+                                products = [];
+
+                                if (prevOption) {
+                                    for (j = 0; j < options[i].products.length; j++) {
+                                        if (prevOption.products &&
+                                            prevOption.products.indexOf(options[i].products[j]) > -1) {
+                                            products.push(options[i].products[j]);
+                                        }
+                                    }
+                                } else {
+                                    products = options[i].products.slice(0);
+                                }
+
+                                if (products.length > 0) {
+                                    options[i].products = products;
+                                    attribute.options[index] = options[i];
+
+                                    index++;
+                                }
+                            }
+                        }
+                    },
+
+                    resetChildren (attribute) {
+                        if (attribute.childAttributes) {
+                            attribute.childAttributes.forEach(function (set) {
+                                set.selectedIndex = 0;
+                                set.disabled = true;
+                            });
+                        }
+                    },
+                    
+                    getAttributeOptions (attributeId) {
+                        var this_this = this,
+                            options;
+
+                        
+                        this.config.attributes.forEach(function(attribute, index) {
+                            if (attribute.id == attributeId) {
+                                options = attribute.options;
+                            }    
+                        })
+
+                        return options;
+                    },
+
+                    reloadPrice () {
+
+                    },
+
+                    changeProductImage () {
+
+                    },
+                }
+
+            });
+
+        </script>
+    @endpush
+
+@endif
\ No newline at end of file
diff --git a/packages/Webkul/Shop/src/Resources/views/products/view/gallery.blade.php b/packages/Webkul/Shop/src/Resources/views/products/view/gallery.blade.php
index bbe5e664d..4c7805a6d 100644
--- a/packages/Webkul/Shop/src/Resources/views/products/view/gallery.blade.php
+++ b/packages/Webkul/Shop/src/Resources/views/products/view/gallery.blade.php
@@ -7,7 +7,7 @@
         <img src="{{ bagisto_asset('images/jeans.jpg') }}" />
     </div>
 
-    <div class="product-hero-image">
+    <div class="product-hero-image" id="product-hero-image">
         <img src="{{ bagisto_asset('images/jeans_big.jpg') }}" />
         <img class="wishlist" src="{{ bagisto_asset('images/wish.svg') }}" />
         <img class="share" src="{{ bagisto_asset('images/icon-share.svg') }}" />
diff --git a/packages/Webkul/Shop/src/Resources/views/products/view/reviews.blade.php b/packages/Webkul/Shop/src/Resources/views/products/view/reviews.blade.php
index b84816615..11e8eb560 100644
--- a/packages/Webkul/Shop/src/Resources/views/products/view/reviews.blade.php
+++ b/packages/Webkul/Shop/src/Resources/views/products/view/reviews.blade.php
@@ -2,8 +2,8 @@
 
 @if ($total = $reviewHelper->getTotalReviews($product))
 <div class="rating-reviews">
-    <div class="title">
-        Ratings & Reviews
+    <div class="rating-header">
+        {{ __('shop::app.products.reviews-title') }}
     </div>
 
     <div class="overall">
@@ -14,7 +14,7 @@
             </span>
 
             <span class="stars">
-                @for ($i = 1; $i <= $reviewHelper->getAverageRating($product); $i++)
+                @for ($i = 1; $i <= round($reviewHelper->getAverageRating($product)); $i++)
 
                     <span class="icon star-icon"></span>
                 
@@ -27,13 +27,15 @@
 
         </div>
 
-        <a href="{{ route('shop.reviews.create', $product->url_key) }}" class="btn btn-lg btn-primary">Write Review</a>
+        <a href="{{ route('shop.reviews.create', $product->url_key) }}" class="btn btn-lg btn-primary">
+            {{ __('shop::app.products.write-review-btn') }}
+        </a>
 
     </div>
 
     <div class="reviews">
 
-        @foreach ($product->reviews()->paginate(5) as $review)
+        @foreach ($reviewHelper->getReviews($product)->paginate(5) as $review)
             <div class="review">
                 <div class="title">
                     {{ $review->title }}
@@ -65,7 +67,6 @@
 
         <a href="{{ route('shop.reviews.index', $product->url_key) }}" class="view-all">View All</a>
 
-        <hr/>
     </div>
 </div>
 @endif
\ No newline at end of file
diff --git a/public/themes/default/assets/css/shop.css b/public/themes/default/assets/css/shop.css
index 334d9adaa..2eb091bee 100644
--- a/public/themes/default/assets/css/shop.css
+++ b/public/themes/default/assets/css/shop.css
@@ -599,6 +599,15 @@ section.slider-block div.slider-content div.slider-control .light-right-icon {
   margin-bottom: 14px;
 }
 
+.main-container-wrapper .product-card .product-ratings .icon {
+  width: 16px;
+  height: 16px;
+}
+
+.main-container-wrapper .product-card .product-ratings .total-reviews {
+  display: none;
+}
+
 .main-container-wrapper .product-card .cart-fav-seg {
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
@@ -1086,16 +1095,16 @@ section.slider-block div.slider-content div.slider-control .light-right-icon {
   padding: 25px;
 }
 
-section.product-detail, section.product-review {
+section.product-detail {
   font-size: 16px;
   color: #242424;
 }
 
-section.product-detail div.category-breadcrumbs, section.product-review div.category-breadcrumbs {
+section.product-detail div.category-breadcrumbs {
   display: inline;
 }
 
-section.product-detail div.layouter, section.product-review div.layouter {
+section.product-detail div.layouter {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -1106,134 +1115,7 @@ section.product-detail div.layouter, section.product-review div.layouter {
   margin-top: 21px;
 }
 
-section.product-detail div.layouter .mixed-group .single-image, section.product-review div.layouter .mixed-group .single-image {
-  padding: 2px;
-}
-
-section.product-detail div.layouter .mixed-group .single-image img, section.product-review div.layouter .mixed-group .single-image img {
-  height: 280px;
-  width: 280px;
-}
-
-section.product-detail div.layouter .mixed-group .details .product-name, section.product-review div.layouter .mixed-group .details .product-name {
-  margin-top: 20px;
-  font-size: 24px;
-  margin-bottom: 20px;
-}
-
-section.product-detail div.layouter .mixed-group .details .product-price, section.product-review div.layouter .mixed-group .details .product-price {
-  margin-bottom: 14px;
-}
-
-section.product-detail div.layouter .rating-reviews, section.product-review div.layouter .rating-reviews {
-  margin-top: 30px;
-}
-
-section.product-detail div.layouter .rating-reviews .title-inline, section.product-review div.layouter .rating-reviews .title-inline {
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-pack: justify;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
-  margin-bottom: 20px;
-  width: 100%;
-}
-
-section.product-detail div.layouter .rating-reviews .title-inline button, section.product-review div.layouter .rating-reviews .title-inline button {
-  float: right;
-  border-radius: 0px !important;
-}
-
-section.product-detail div.layouter .rating-reviews .overall, section.product-review div.layouter .rating-reviews .overall {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: row;
-          flex-direction: row;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-pack: justify;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
-  height: 150px;
-}
-
-section.product-detail div.layouter .rating-reviews .overall .left-side, section.product-review div.layouter .rating-reviews .overall .left-side {
-  margin-bottom: 20px;
-}
-
-section.product-detail div.layouter .rating-reviews .overall .left-side .number, section.product-review div.layouter .rating-reviews .overall .left-side .number {
-  font-size: 34px;
-}
-
-section.product-detail div.layouter .rating-reviews .overall .right-side, section.product-review div.layouter .rating-reviews .overall .right-side {
-  display: block;
-}
-
-section.product-detail div.layouter .rating-reviews .overall .right-side .rater, section.product-review div.layouter .rating-reviews .overall .right-side .rater {
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-}
-
-section.product-detail div.layouter .rating-reviews .overall .right-side .rater .star, section.product-review div.layouter .rating-reviews .overall .right-side .rater .star {
-  width: 50px;
-  height: 20px;
-  padding: 1px;
-  margin-right: 8px;
-}
-
-section.product-detail div.layouter .rating-reviews .overall .right-side .rater .line-bar, section.product-review div.layouter .rating-reviews .overall .right-side .rater .line-bar {
-  height: 4px;
-  width: 158px;
-  margin-right: 12px;
-  background: #D8D8D8;
-}
-
-section.product-detail div.layouter .rating-reviews .overall .right-side .rater .line-bar .line-value, section.product-review div.layouter .rating-reviews .overall .right-side .rater .line-bar .line-value {
-  height: 4px;
-  width: 100px;
-  background-color: #0031F0;
-}
-
-section.product-detail div.layouter .rating-reviews .reviews, section.product-review div.layouter .rating-reviews .reviews {
-  margin-top: 34px;
-  margin-bottom: 90px;
-}
-
-section.product-detail div.layouter .rating-reviews .reviews .review, section.product-review div.layouter .rating-reviews .reviews .review {
-  margin-bottom: 25px;
-}
-
-section.product-detail div.layouter .rating-reviews .reviews .review .title, section.product-review div.layouter .rating-reviews .reviews .review .title {
-  margin-bottom: 5px;
-}
-
-section.product-detail div.layouter .rating-reviews .reviews .review .stars, section.product-review div.layouter .rating-reviews .reviews .review .stars {
-  margin-bottom: 15px;
-}
-
-section.product-detail div.layouter .rating-reviews .reviews .review .message, section.product-review div.layouter .rating-reviews .reviews .review .message {
-  margin-bottom: 10px;
-}
-
-section.product-detail div.layouter .rating-reviews .reviews .view-all, section.product-review div.layouter .rating-reviews .reviews .view-all {
-  margin-top: 15px;
-  color: #0031f0;
-  margin-bottom: 15px;
-}
-
-section.product-detail div.layouter div.product-image-group, section.product-review div.layouter div.product-image-group {
+section.product-detail div.layouter div.product-image-group {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -1247,7 +1129,7 @@ section.product-detail div.layouter div.product-image-group, section.product-rev
   margin-right: 2.5%;
 }
 
-section.product-detail div.layouter div.product-image-group .side-group, section.product-review div.layouter div.product-image-group .side-group {
+section.product-detail div.layouter div.product-image-group .side-group {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -1258,195 +1140,152 @@ section.product-detail div.layouter div.product-image-group .side-group, section
   margin-right: 4px;
 }
 
-section.product-detail div.layouter div.product-image-group .product-hero-image, section.product-review div.layouter div.product-image-group .product-hero-image {
+section.product-detail div.layouter div.product-image-group .product-hero-image {
   display: block;
   position: relative;
 }
 
-section.product-detail div.layouter div.product-image-group .product-hero-image .wishlist, section.product-review div.layouter div.product-image-group .product-hero-image .wishlist {
+section.product-detail div.layouter div.product-image-group .product-hero-image .wishlist {
   position: absolute;
   top: 10px;
   right: 12px;
 }
 
-section.product-detail div.layouter div.product-image-group .product-hero-image .share, section.product-review div.layouter div.product-image-group .product-hero-image .share {
+section.product-detail div.layouter div.product-image-group .product-hero-image .share {
   position: absolute;
   top: 10px;
   right: 45px;
 }
 
-section.product-detail div.layouter .details .product-heading, section.product-review div.layouter .details .product-heading {
+section.product-detail div.layouter .details .product-price {
+  margin-bottom: 14px;
+}
+
+section.product-detail div.layouter .details .product-ratings {
+  margin-bottom: 20px;
+}
+
+section.product-detail div.layouter .details .product-ratings .icon {
+  width: 16px;
+  height: 16px;
+}
+
+section.product-detail div.layouter .details .product-ratings .total-reviews {
+  display: inline-block;
+  margin-left: 15px;
+}
+
+section.product-detail div.layouter .details .product-heading {
   font-size: 24px;
   color: #242424;
-  margin-bottom: 14px;
+  margin-bottom: 15px;
 }
 
-section.product-detail div.layouter .details .rating, section.product-review div.layouter .details .rating {
-  color: #242424;
-  margin-bottom: 14px;
-}
-
-section.product-detail div.layouter .details .product-price, section.product-review div.layouter .details .product-price {
-  margin-bottom: 14px;
+section.product-detail div.layouter .details .product-price {
+  margin-bottom: 15px;
   font-size: 24px;
 }
 
-section.product-detail div.layouter .details .product-price .special-price, section.product-review div.layouter .details .product-price .special-price {
+section.product-detail div.layouter .details .product-price .special-price {
   font-size: 24px;
 }
 
-section.product-detail div.layouter .details .stock-status, section.product-review div.layouter .details .stock-status {
-  margin-bottom: 14px;
+section.product-detail div.layouter .details .stock-status {
+  margin-bottom: 15px;
 }
 
-section.product-detail div.layouter .details .description, section.product-review div.layouter .details .description {
-  margin-bottom: 14px;
+section.product-detail div.layouter .details .description {
+  margin-bottom: 15px;
+  padding-bottom: 15px;
+  border-bottom: solid 1px rgba(162, 162, 162, 0.2);
 }
 
-section.product-detail div.layouter .details .full-specifications td, section.product-review div.layouter .details .full-specifications td {
+section.product-detail div.layouter .details .full-specifications td {
   padding: 10px 0;
   color: #5E5E5E;
 }
 
-section.product-detail div.layouter .details .full-specifications td:first-child, section.product-review div.layouter .details .full-specifications td:first-child {
+section.product-detail div.layouter .details .full-specifications td:first-child {
   padding-right: 40px;
 }
 
-section.product-detail div.layouter .details .accordian .accordian-header, section.product-review div.layouter .details .accordian .accordian-header {
+section.product-detail div.layouter .details .accordian .accordian-header {
   font-size: 16px;
   padding-left: 0;
   font-weight: 600;
 }
 
-section.product-detail div.layouter .details .attributes, section.product-review div.layouter .details .attributes {
+section.product-detail div.layouter .details .attributes {
   display: block;
   width: 100%;
+  border-bottom: solid 1px rgba(162, 162, 162, 0.2);
 }
 
-section.product-detail div.layouter .details .attributes .attribute, section.product-review div.layouter .details .attributes .attribute {
-  height: 39px;
-  margin-bottom: 20px;
-}
-
-section.product-detail div.layouter .details .attributes .attribute .title, section.product-review div.layouter .details .attributes .attribute .title {
-  float: left;
-  height: 100%;
-  min-width: 130px;
-  padding-top: 9px;
-}
-
-section.product-detail div.layouter .details .attributes .attribute .values, section.product-review div.layouter .details .attributes .attribute .values {
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-section.product-detail div.layouter .details .attributes .attribute .values .colors, section.product-review div.layouter .details .attributes .attribute .values .colors {
-  margin-right: 5px;
-}
-
-section.product-detail div.layouter .details .attributes .attribute .values .colors:last-child, section.product-review div.layouter .details .attributes .attribute .values .colors:last-child {
-  margin-right: 0;
-}
-
-section.product-detail div.layouter .details .attributes .attribute .values .red, section.product-review div.layouter .details .attributes .attribute .values .red {
-  height: 37px;
-  width: 37px;
-  background: red;
-  border: 1px solid #c7c7c7;
-  border-radius: 2px;
-}
-
-section.product-detail div.layouter .details .attributes .attribute .values .blue, section.product-review div.layouter .details .attributes .attribute .values .blue {
-  height: 37px;
-  width: 37px;
-  background: blue;
-  border: 1px solid #c7c7c7;
-  border-radius: 2px;
-}
-
-section.product-detail div.layouter .details .attributes .attribute .values .green, section.product-review div.layouter .details .attributes .attribute .values .green {
-  height: 37px;
-  width: 37px;
-  background: green;
-  border: 1px solid #c7c7c7;
-  border-radius: 2px;
-}
-
-section.product-detail div.layouter .details .attributes .attribute .values .size, section.product-review div.layouter .details .attributes .attribute .values .size {
-  margin-right: 5px;
-  line-height: 38px;
-  height: 37px;
-  width: 60px;
-  border: 1px solid #c7c7c7;
-  border-radius: 2px;
-  text-align: center;
-  vertical-align: middle;
-}
-
-section.product-detail div.layouter .details .attributes .attribute .values .size:last-child, section.product-review div.layouter .details .attributes .attribute .values .size:last-child {
-  margin-right: 0;
-}
-
-section.product-detail div.layouter .details .attributes .attribute .values .quantity .values .control, section.product-review div.layouter .details .attributes .attribute .values .quantity .values .control {
-  height: 37px !important;
-  width: 30px !important;
-}
-
-section.product-detail div.layouter .details .full-description, section.product-review div.layouter .details .full-description {
+section.product-detail div.layouter .details .full-description {
   font-size: 16px;
 }
 
-section.product-detail div.layouter .details .rating-reviews, section.product-review div.layouter .details .rating-reviews {
-  margin-top: 30px;
-}
-
-section.product-detail div.layouter .details .rating-reviews .title, section.product-review div.layouter .details .rating-reviews .title {
-  margin-bottom: 15px;
+.rating-reviews .rating-header {
   font-weight: 600;
+  padding: 20px 0;
 }
 
-section.product-detail div.layouter .details .rating-reviews .overall, section.product-review div.layouter .details .rating-reviews .overall {
-  margin-bottom: 5px;
+.rating-reviews .stars .icon {
+  width: 16px;
+  height: 16px;
 }
 
-section.product-detail div.layouter .details .rating-reviews .overall .review-info .number, section.product-review div.layouter .details .rating-reviews .overall .review-info .number {
+.rating-reviews .overall {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+}
+
+.rating-reviews .overall .review-info .number {
   font-size: 34px;
 }
 
-section.product-detail div.layouter .details .rating-reviews .overall button, section.product-review div.layouter .details .rating-reviews .overall button {
-  float: right;
-  border-radius: 0px !important;
+.rating-reviews .overall .review-info .total-reviews {
+  margin-top: 10px;
 }
 
-section.product-detail div.layouter .details .rating-reviews .reviews, section.product-review div.layouter .details .rating-reviews .reviews {
-  margin-top: 34px;
-  margin-bottom: 80px;
+.rating-reviews .reviews {
+  margin-top: 40px;
+  margin-bottom: 40px;
 }
 
-section.product-detail div.layouter .details .rating-reviews .reviews .review, section.product-review div.layouter .details .rating-reviews .reviews .review {
+.rating-reviews .reviews .review {
   margin-bottom: 25px;
 }
 
-section.product-detail div.layouter .details .rating-reviews .reviews .review .stars, section.product-review div.layouter .details .rating-reviews .reviews .review .stars {
+.rating-reviews .reviews .review .title {
+  margin-bottom: 5px;
+}
+
+.rating-reviews .reviews .review .stars {
   margin-bottom: 15px;
   display: inline-block;
 }
 
-section.product-detail div.layouter .details .rating-reviews .reviews .review .stars .icon, section.product-review div.layouter .details .rating-reviews .reviews .review .stars .icon {
-  width: 18px;
-  height: 18px;
-}
-
-section.product-detail div.layouter .details .rating-reviews .reviews .review .message, section.product-review div.layouter .details .rating-reviews .reviews .review .message {
+.rating-reviews .reviews .review .message {
   margin-bottom: 10px;
 }
 
-section.product-detail div.layouter .details .rating-reviews .reviews .review .reviewer-details, section.product-review div.layouter .details .rating-reviews .reviews .review .reviewer-details {
+.rating-reviews .reviews .review .reviewer-details {
   color: #5E5E5E;
 }
 
-section.product-detail div.layouter .details .rating-reviews .reviews .view-all, section.product-review div.layouter .details .rating-reviews .reviews .view-all {
+.rating-reviews .reviews .view-all {
   margin-top: 15px;
   color: #0031f0;
   margin-bottom: 15px;
diff --git a/resources/views/vendor/mail/html/promotion.blade.php b/resources/views/vendor/mail/html/promotion.blade.php
index 0debcf8a3..2b048f071 100644
--- a/resources/views/vendor/mail/html/promotion.blade.php
+++ b/resources/views/vendor/mail/html/promotion.blade.php
@@ -4,4 +4,4 @@
             {{ Illuminate\Mail\Markdown::parse($slot) }}
         </td>
     </tr>
-</table>
+</table>
\ No newline at end of file