spree_product_reviews 1.0.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 743b927cdaf050b3014719af7d93fd72298516fe5906b9c7ee78aa11ac0aa9b1
+  data.tar.gz: f5343a9a1f75dc591b02edd6b0d88b208da346a1d5ea8932f67165d6e64432af
+SHA512:
+  metadata.gz: 9809e4fd93893bc2172f1a848b075832182bf4079cf16580d4ae0e2552a119f7c5a20d9085f6760414f940db38165c9a9533c1368fe8f4c19bf58ddaa447d106
+  data.tar.gz: e8fae77c66014f097f38d40d6bd7382215814bbc5cfba008e9df280a5b1e8e30ff50a7a6867cec47bdf86ffd37ca03d29a100deadd16e0b6c7f13bac8879d1e1

data/app/controllers/spree/admin/product_reviews_controller.rb

@@ -0,0 +1,71 @@
+module Spree
+  module Admin
+    class ProductReviewsController < ResourceController
+      belongs_to "spree/product", find_by: :slug
+
+      before_action :find_product_review, only: [:approve, :edit, :update, :destroy, :attach_image, :purge_images]
+
+      def index
+        # optionally add filtering/sorting
+      end
+
+      def update
+        if @product_review.update(permitted_resource_params)
+          flash[:success] = Spree.t('product_review.flash_messages.update.success')
+          respond_to do |format|
+            format.turbo_stream { render turbo_stream: turbo_stream.replace("dialog_modal_lg", "") }
+            format.html { redirect_to admin_product_product_reviews_path(@product) }
+          end
+        else
+          render :edit
+        end
+      end
+
+      def approve
+        @product_review.update(approved: true)
+        flash[:success] = Spree.t(:review_approved)
+        redirect_to admin_product_product_reviews_path(@product_review.product)
+      end
+
+      def disapprove
+        @product_review.update(approved: false)
+        flash[:success] = Spree.t(:review_disapproved)
+        redirect_to admin_product_product_reviews_path(@product_review.product)
+      end
+
+      # --- Attach a single image ---
+      def attach_image
+        if params[:file].present?
+          @product_review.images.attach(params[:file])
+        end
+        head :ok
+      end
+
+      # DELETE /admin/products/:product_id/product_reviews/:id/purge_images
+      def purge_images
+        ids = params[:ids] || []
+        @product_review.images.where(id: ids).each(&:purge_later)
+
+        respond_to do |format|
+          format.json { head :ok }
+          format.html { redirect_back fallback_location: edit_admin_product_product_review_path(@product, @product_review) }
+        end
+      end
+
+      private
+
+      def permitted_resource_params
+        params.require(:product_review).permit(
+        :title,
+        :rating,
+        :review,
+        images: []
+        )
+      end
+
+      def find_product_review
+        @product_review = Spree::ProductReview.find(params[:id])
+      end
+    end
+  end
+end

data/app/controllers/spree/home_controller.rb

@@ -0,0 +1,7 @@
+module Spree
+  class HomeController < Spree::StoreController
+    def forbidden
+      render plain: "You are not authorized to access this page.", status: :forbidden
+    end
+  end
+end

data/app/controllers/spree/product_reviews_controller.rb

@@ -0,0 +1,72 @@
+module Spree
+  class ProductReviewsController < Spree::StoreController
+    helper Spree::BaseHelper
+    before_action :load_product, only: %i[index new create destroy]
+    before_action :authenticate_user!, only: %i[new create]
+
+    def new
+      @product_review = Spree::ProductReview.new(product: @product)
+      authorize! :create, @product_review
+    end
+
+    def create
+      @product_review = Spree::ProductReview.new(product_review_params)
+      @product_review.product = @product
+      @product_review.purchase_date = spree_current_user.recent_purchase_date_for @product
+      @product_review.user = spree_current_user
+      @product_review.ip_address = request.remote_ip
+      @product_review.locale = I18n.locale.to_s
+      @product_review.product_name = @product.name
+
+      authorize! :create, @product_review
+
+      if Spree::ProductReview.exists?(user_id: spree_current_user.id, product_id: @product.id)
+        flash[:error] = "You have already reviewed this product."
+        redirect_to spree.product_path(@product) and return
+      end
+
+      if @product_review.save
+        flash[:success] = Spree.t("product_review.flash_messages.create.success")
+        redirect_to spree.product_path(@product)
+      else
+        flash[:error] = Spree.t("product_review.flash_messages.create.failure")
+        render :new
+      end
+    end
+
+    def index
+      @product_reviews = @product.product_reviews.approved.order(created_at: :desc)
+    end
+
+    def destroy
+      @product_review = Spree::ProductReview.find(params[:id])
+      @product_review.destroy
+      # Force CanCanCan to reload abilities for the current user
+      session[:_csrf_token] = nil
+      redirect_to spree.product_path(@product), notice: Spree.t(:review_deleted)
+    end
+
+    private
+
+    def load_product
+      @product = Spree::Product.friendly.find(params[:product_id])
+    end
+
+    def product_review_params
+      params.require(:product_review).permit(
+        :rating,
+        :review,
+        :show_identifier,
+        :title,
+        images: []
+      )
+    end
+
+    def authenticate_user!
+      return if spree_current_user
+
+      session[:spree_user_return_to] = request.fullpath
+      redirect_to spree.login_path, alert: Spree.t(:please_log_in)
+    end
+  end
+end

data/app/models/spree/page_blocks/product_review_form.rb

@@ -0,0 +1,13 @@
+module Spree
+  module PageBlocks
+    class ProductReviewForm < Spree::PageBlock
+      preference :button_text, :string, default: Spree.t("page_blocks.product_review_form.button_text_default")
+      preference :placeholder, :string, default: Spree.t("page_blocks.product_review_form.placeholder_default")
+      preference :button_style, :string, default: "primary"
+      validates :preferred_button_style, inclusion: { in: %w[primary secondary] }
+      def icon_name
+        "forms"
+      end
+    end
+  end
+end

data/app/models/spree/page_blocks/products/reviews.rb

@@ -0,0 +1,37 @@
+module Spree
+  module PageBlocks
+    module Products
+      class Reviews < Spree::PageBlock
+
+        preference :star_color, :string, default: '#FFA500'
+        preference :display_numbers, :boolean, default: true
+        preference :star_font_size, :integer, default: 16
+
+        def self.block_name
+          "Reviews & Ratings"
+        end
+
+        def self.display_name
+          "Reviews"
+        end
+
+        def editor_name
+          "Reviews"
+        end
+
+        def icon_name
+          "input-spark"
+        end
+
+        def render(view_context, locals = {})
+          view_context.render(
+            partial: "spree/page_blocks/products/reviews/reviews",
+            locals: locals.merge(block: self)
+          )
+        rescue ActionView::MissingTemplate
+          ""
+        end
+      end
+    end
+  end
+end

data/app/models/spree/page_sections/add_a_review.rb

@@ -0,0 +1,80 @@
+module Spree
+  module PageSections
+    class AddAReview < Spree::PageSection
+      TOP_PADDING_DEFAULT = 30
+      BOTTOM_PADDING_DEFAULT = 30
+      TOP_BORDER_WIDTH_DEFAULT = 0
+      BOTTOM_BORDER_WIDTH_DEFAULT = 0
+
+      preference :allow_unverified_purchase_reviews, :boolean, default: true
+
+      preference :heading_no_review_yet, :string, default: Spree.t("add_a_review_heading")
+      preference :heading_pending_review, :string, default: Spree.t("thanks_for_review_heading_pending")
+      preference :heading_review_approved, :string, default: Spree.t("thanks_for_review_heading")
+
+      preference :heading_size, :string, default: "large"
+      preference :heading_alignment, :string, default: "center"
+      preference :display, :string, default: "stacked"
+
+      validates :preferred_heading_size, inclusion: { in: %w[small medium large] }
+      validates :preferred_heading_alignment, inclusion: { in: %w[left center right] }
+      validates :preferred_display, inclusion: { in: %w[stacked inline] }
+      #New Sections
+      preference :rating_color, :string, default: '#FFA500'
+      preference :title_font_size, :integer, default: 18
+
+      preference :review_star_color, :string, default: '#FFA500'
+      preference :review_font_size, :integer, default: 14
+
+      preference :verified_badge_color, :string, default: '#00a63e'
+
+      preference :max_images_upload, :integer, default: 5
+      preference :max_image_size_mb, :integer, default: 5
+
+      preference :thumbnail_size, :integer, default: 72
+
+      def self.role
+        "content"
+      end
+
+      def display_name
+        "Add a Review"
+      end
+
+      def blocks_available?
+        true
+      end
+
+      def default_blocks
+        [
+          Spree::PageBlocks::Text.new(
+            text: Spree.t(:add_a_review_text),
+            preferred_text_alignment: "center",
+            preferred_container_alignment: "center",
+            preferred_bottom_padding: 30,
+            preferred_width_desktop: "75"
+          ),
+          Spree::PageBlocks::ProductReviewForm.new,
+        ]
+      end
+
+      def available_blocks_to_add
+        [
+          Spree::PageBlocks::Heading,
+          Spree::PageBlocks::Text,
+          Spree::PageBlocks::Image,
+          Spree::PageBlocks::ProductReviewForm,
+        ]
+      end
+
+      def icon_name
+        "device-ipad-horizontal-star"
+      end
+
+      def links_available?
+        false
+      end
+    end
+  end
+end
+

data/app/models/spree/page_sections/product_details_decorator.rb

@@ -0,0 +1,10 @@
+module Spree
+  module PageSections
+    module ProductDetailsDecorator
+      def available_blocks_to_add
+        super + [Spree::PageBlocks::Products::Reviews]
+      end
+    end
+  end
+end
+Spree::PageSections::ProductDetails.prepend(Spree::PageSections::ProductDetailsDecorator)

data/app/models/spree/product_review.rb

@@ -0,0 +1,73 @@
+module Spree
+  class ProductReview < Spree::Base
+    belongs_to :product, class_name: "Spree::Product"
+    belongs_to :user, class_name: Spree.user_class.to_s
+    belongs_to :variant, class_name: "Spree::Variant", optional: true
+
+    has_many_attached :images, dependent: :purge_later
+
+    validates :product, presence: true
+    validates :user, presence: true
+    validates :rating, presence: true, numericality: { only_integer: true, greater_than_or_equal_to: 1, less_than_or_equal_to: 5 }
+    validates :title, presence: true
+    validates :review, presence: true
+    validate :validate_max_images
+    validate :validate_image_size
+    attribute :show_identifier, :boolean, default: true
+
+    scope :approved, -> { where(approved: true) }
+    scope :pending, -> { where(approved: false) }
+
+    def pending?
+      !approved?
+    end
+
+    def approve!
+      update(approved: true)
+    end
+
+    def reject!
+      update(approved: false)
+    end
+
+    def validate_max_images
+      return unless images.attached?
+    
+      section = Spree::PageSections::AddAReview.first
+      max = section&.preferred_max_images_upload || 5
+    
+      if images.count > max
+        errors.add(:images, "Maximum #{max} images allowed")
+      end
+    end
+
+    def validate_image_size
+      return unless images.attached?
+    
+      section = Spree::PageSections::AddAReview.first
+      max_mb = section&.preferred_max_image_size_mb || 5
+      max_bytes = max_mb.megabytes
+    
+      images.each do |image|
+        if image.blob.byte_size > max_bytes
+          errors.add(
+            :images,
+            "Each image must be smaller than #{max_mb}MB"
+          )
+        end
+      end
+    end    
+
+    def reviewer_name
+      if user&.name && show_identifier
+        user.name
+      else
+        "Anonymous"
+      end
+    end
+
+    def review_date
+      created_at.strftime("%B %d, %Y at %I:%M%p")
+    end
+  end
+end

data/app/models/spree/product_reviews_ability.rb

@@ -0,0 +1,25 @@
+module Spree
+  class ProductReviewsAbility
+    include CanCan::Ability
+
+    def initialize(user)
+      user ||= Spree.user_class.new
+      Rails.logger.info "[ProductReviewsAbility] user=#{user.inspect}, roles=#{user.spree_roles.map(&:name).inspect}"
+      if user.has_spree_role? "admin"
+        can :manage, Spree::ProductReview
+      elsif user.persisted?
+        can :create, Spree::ProductReview
+        can :update, Spree::ProductReview do |review|
+          review.user_id == user.id
+        end
+        can :destroy, Spree::ProductReview do |review|
+          review.user_id == user.id
+        end
+      else
+        can :read, Spree::ProductReview, approved: true
+        cannot :create, Spree::ProductReview
+        cannot %i[update destroy], Spree::ProductReview
+      end
+    end
+  end
+end

data/app/models/spree_product_reviews/spree/product_decorator.rb

@@ -0,0 +1,13 @@
+module SpreeProductReviews
+  module Spree
+    module ProductDecorator
+      def self.prepended(base)
+        base.has_many :product_reviews, class_name: 'Spree::ProductReview', dependent: :destroy
+      end
+
+      ::Spree::Product.prepend self
+    end
+  end
+end
+
+Spree::Product.prepend SpreeProductReviews::Spree::ProductDecorator

data/app/models/spree_product_reviews/spree/product_review_decorator.rb

@@ -0,0 +1,12 @@
+module SpreeProductReviews
+  module Spree
+    module ProductReviewDecorator
+      def self.prepended(base)
+        #base.has_one_attached :attachment
+        #base.has_many_attached :images
+      end
+    end
+  end
+end
+
+Spree::ProductReview.prepend SpreeProductReviews::Spree::ProductReviewDecorator if defined?(Spree::ProductReview)

data/app/models/spree_product_reviews/spree/user_decorator.rb

@@ -0,0 +1,22 @@
+module SpreeProductReviews
+  module Spree
+    module UserDecorator
+      def self.prepended(base)
+        base.has_many :product_reviews, class_name: "Spree::ProductReview", dependent: :destroy, foreign_key: :user_id
+      end
+
+      def product_review_for(product)
+        product_reviews.find_by(product_id: product.id, user_id: id)
+      end
+
+      def recent_purchase_date_for(product)
+        orders.joins(:line_items, :variants).where(
+          spree_variants: { product_id: product.id }
+        ).order("spree_orders.completed_at DESC").first&.completed_at
+      end
+    end
+  end
+end
+
+Spree.user_class.prepend SpreeProductReviews::Spree::UserDecorator
+

data/app/views/spree/admin/page_blocks/forms/_product_review_form.html.erb

@@ -0,0 +1,22 @@
+<div class="form-group">
+  <%= f.label :preferred_button_text %>
+  <%= f.text_field :preferred_button_text, data: { action: 'auto-submit#submit' }, class: 'form-control' %>
+</div>
+<div class="form-group">
+  <%= f.label :preferred_placeholder %>
+  <%= f.text_field :preferred_placeholder, data: { action: 'auto-submit#submit' }, class: 'form-control' %>
+</div>
+<% content_for(:design_tab) do %>
+  <div class="form-group">
+    <%= f.label :preferred_button_style %>
+    <%= f.select :preferred_button_style, options_for_select(['primary', 'secondary'], @page_block.preferred_button_style), {}, { class: 'custom-select', data: {  action: 'auto-submit#submit' } } %>
+  </div>
+  <style>
+    .form-group:has(#page_block_preferred_top_padding) {
+      display: none;
+    }
+    .form-group:has(#page_block_preferred_bottom_padding) {
+      display: none;
+    }
+  </style>
+<% end %>

data/app/views/spree/admin/page_blocks/forms/_reviews.html.erb

@@ -0,0 +1,52 @@
+<p class="text-muted">This block shows the product’s average rating and total reviews.</p>
+<hr>
+<h5 class="mb-3">Appearance</h5><br>
+<div class="mb-4 form-group"
+     data-controller="color-picker"
+     data-color-picker-clear-value="false"
+     data-color-picker-default-color-value="<%= f.object.preferred_star_color.presence || '#FFA500' %>">
+  <div class="d-flex align-items-center">
+    <%= f.hidden_field :preferred_star_color,
+      data: { color_picker_target: "input", action: "change->auto-submit#submit" },
+      autocomplete: "off" %>
+    <div>
+      <label class="mb-0">Ratings Color</label><br>
+      <span data-color-picker-target="value" class="text-muted">
+        <%= f.object.preferred_star_color.presence || '#FFA500' %>
+      </span>
+    </div>
+    <div class="ml-auto" style="width:40px">
+      <div data-color-picker-target="picker" class="border d-inline-block rounded-circle" style="height: 40px; width: 40px; background-color: <%= f.object.preferred_star_color.presence || '#FFA500' %>;" role="button" aria-label="toggle color picker dialog"></div>
+    </div>
+  </div>
+</div>
+<div class="form-group">
+  <label>Display Review Count</label>
+  <%= f.select :preferred_display_numbers,
+        options_for_select([["Yes", true], ["No", false]], f.object.preferred_display_numbers),
+        {},
+        class: "custom-select",
+        data: { action: "change->auto-submit#submit" } %>
+</div>
+<div class="form-group">
+  <label>Ratings Size</label>
+  <div data-controller="better-slider"
+       data-better-slider-label-for-min-value=""
+       data-better-slider-unit-value="px">
+    <div class="flex flex-row w-full">
+      <%= f.number_field :preferred_star_font_size,
+            type: 'range',
+            min: 10,
+            max: 40,
+            step: 1,
+            class: 'custom-range',
+            data: {
+              better_slider_target: "rangeInput",
+              action: "change->auto-submit#submit"
+            } %>
+    </div>
+    <span data-better-slider-target="currentValueLabel">
+      <%= f.object.preferred_star_font_size %>px
+    </span>
+  </div>
+</div>

data/app/views/spree/admin/page_sections/forms/_add_a_review.html.erb

@@ -0,0 +1,112 @@
+<div class="alert alert-warning"><p><%= Spree.t("admin.page_sections.product_reviews.display_description") %></p></div>
+<h6 style="font-size: 1rem; padding-bottom: 0.8rem;"><%= Spree.t("admin.page_sections.product_reviews.display_style.heading_options") %></h6>
+<div class="container">
+  <div class="form-group">
+    <%= f.label :preferred_heading_size, Spree.t("admin.page_builder.heading_size") %>
+    <%= f.select :preferred_heading_size, options_for_select([ ["Small", "small"], ["Medium", "medium"], ["Large", "large"] ], @page_section.preferred_heading_size ), {}, data: { action: "auto-submit#submit" }, class: "custom-select" %>
+  </div>
+  <div class="form-group">
+    <%= f.label :preferred_heading_alignment, Spree.t("admin.page_builder.heading_alignment") %>
+    <%= f.select :preferred_heading_alignment, options_for_select([ ["Left", "left"], ["Center", "center"], ["Right", "right"] ], @page_section.preferred_heading_alignment ), {}, data: { action: "auto-submit#submit" }, class: "custom-select" %>
+  </div>
+</div>
+<hr class="mb-4">
+<h6 style="font-size: 1rem; padding-bottom: 0.8rem;"><%= Spree.t("admin.page_sections.product_reviews.heading_labels.heading") %></h6>
+<div class="container">
+  <div class="form-group">
+    <%= f.label :preferred_heading_no_review_yet, Spree.t("admin.page_sections.product_reviews.heading_labels.no_review_yet") %>
+    <%= f.text_field :preferred_heading_no_review_yet, data: { action: "auto-submit#submit" }, class: "form-control" %>
+  </div>
+  <div class="form-group">
+    <%= f.label :preferred_heading_pending_review, Spree.t("admin.page_sections.product_reviews.heading_labels.review_pending") %>
+    <%= f.text_field :preferred_heading_pending_review, data: { action: "auto-submit#submit" }, class: "form-control" %>
+  </div>
+  <div class="form-group">
+    <%= f.label :preferred_heading_review_approved, Spree.t("admin.page_sections.product_reviews.heading_labels.review_approved") %>
+    <%= f.text_field :preferred_heading_review_approved, data: { action: "auto-submit#submit" }, class: "form-control" %>
+  </div>
+</div>
+<hr class="mb-4">
+<h6 style="font-size: 1rem; padding-bottom: 0.8rem;"><%= Spree.t("admin.page_sections.product_reviews.control_preferences.label") %></h6>
+<div class="container">
+  <div class="form-group">
+    <%= f.check_box :preferred_allow_unverified_purchase_reviews, class: "checkbox-input", data: { action: "auto-submit#submit" }, checked: @page_section.preferred_allow_unverified_purchase_reviews %>
+    <%= f.label :preferred_allow_unverified_purchase_reviews, Spree.t("admin.page_sections.product_reviews.control_preferences.allow_unverified_reviews") %>
+    <div class="alert alert-info" style="background-position: 20px 10px;">
+      <p><%= Spree.t("admin.page_sections.product_reviews.control_preferences.allow_unverified_reviews_enabled_description") %></p>
+      <p><%= Spree.t("admin.page_sections.product_reviews.control_preferences.allow_unverified_reviews_disabled_description") %></p>
+    </div>
+  </div>
+</div>
+<hr class="mb-4">
+<h6 style="font-size: 1rem; padding-bottom: 0.8rem;"><%= Spree.t("admin.page_sections.product_reviews.review_settings") %></h6>
+<div class="mb-4 form-group" data-controller="color-picker" data-color-picker-clear-value="false" data-color-picker-default-color-value="<%= f.object.preferred_rating_color || '#FFA500' %>">
+  <label>Rating Color</label>
+  <%= f.hidden_field :preferred_rating_color, data: { color_picker_target: "input", action: "change->auto-submit#submit" } %>
+  <div class="d-flex align-items-center">
+    <span data-color-picker-target="value" class="text-muted"><%= f.object.preferred_rating_color || '#FFA500' %></span>
+    <div class="ml-auto" style="width:40px">
+      <div data-color-picker-target="picker" class="border rounded-circle" style="height:40px;width:40px;background:<%= f.object.preferred_rating_color || '#FFA500' %>;" role="button"></div>
+    </div>
+  </div>
+</div>
+<div class="mb-4 form-group" data-controller="color-picker" data-color-picker-clear-value="false" data-color-picker-default-color-value="<%= f.object.preferred_review_star_color || '#FFA500' %>">
+  <label>Review Star Color</label>
+  <%= f.hidden_field :preferred_review_star_color, data: { color_picker_target: "input", action: "change->auto-submit#submit" } %>
+  <div class="d-flex align-items-center">
+    <span data-color-picker-target="value" class="text-muted"><%= f.object.preferred_review_star_color || '#FFA500' %></span>
+    <div class="ml-auto" style="width:40px"><div data-color-picker-target="picker" class="border rounded-circle" style="height:40px;width:40px;background:<%= f.object.preferred_review_star_color || '#FFA500' %>;" role="button"></div></div>
+  </div>
+</div>
+<div class="mb-4 form-group" data-controller="color-picker" data-color-picker-clear-value="false" data-color-picker-default-color-value="<%= f.object.preferred_verified_badge_color %>">
+  <label>Verified Badge Color</label>
+  <%= f.hidden_field :preferred_verified_badge_color, data: { color_picker_target: "input", action: "change->auto-submit#submit" } %>
+  <div class="d-flex align-items-center">
+    <span data-color-picker-target="value" class="text-muted">
+      <%= f.object.preferred_verified_badge_color %>
+    </span>
+    <div class="ml-auto" style="width:40px">
+      <div data-color-picker-target="picker" class="border rounded-circle" style="height:40px;width:40px;background:<%= f.object.preferred_verified_badge_color %>;" role="button"></div>
+    </div>
+  </div>
+</div>
+<div class="form-group">
+  <label>Title Font Size</label>
+  <div data-controller="better-slider" data-better-slider-unit-value="px">
+    <%= f.number_field :preferred_title_font_size, type: 'range', min: 12, max: 48, step: 1, class: 'custom-range', data: { better_slider_target: "rangeInput", action: "change->auto-submit#submit" } %>
+    <span data-better-slider-target="currentValueLabel"><%= f.object.preferred_title_font_size %>px</span>
+  </div>
+</div>
+<div class="form-group">
+  <label>Review Font Size</label>
+  <div data-controller="better-slider" data-better-slider-unit-value="px">
+    <%= f.number_field :preferred_review_font_size, type: 'range', min: 10, max: 30, step: 1, class: 'custom-range', data: { better_slider_target: "rangeInput", action: "change->auto-submit#submit" } %>
+    <span data-better-slider-target="currentValueLabel"> <%= f.object.preferred_review_font_size %>px </span>
+  </div>
+</div>
+<hr class="mb-4">
+<h6 style="font-size: 1rem; padding-bottom: 0.8rem;"><%= Spree.t("admin.page_sections.product_reviews.upload_preferences") %></h6>
+<div class="form-group">
+  <label>Max Images Upload</label>
+  <div data-controller="better-slider">
+    <%= f.number_field :preferred_max_images_upload, type: 'range', min: 1, max: 20, step: 1, class: 'custom-range', data: { better_slider_target: "rangeInput", action: "change->auto-submit#submit" } %>
+    <span data-better-slider-target="currentValueLabel"><%= f.object.preferred_max_images_upload %></span>
+  </div>
+</div>
+<div class="form-group">
+  <label>Max Image Size (MB)</label>
+  <div data-controller="better-slider">
+    <%= f.number_field :preferred_max_image_size_mb, type: 'range', min: 1, max: 20, step: 1, class: 'custom-range', data: { better_slider_target: "rangeInput", action: "change->auto-submit#submit" } %>
+    <span data-better-slider-target="currentValueLabel"><%= f.object.preferred_max_image_size_mb %> MB</span>
+  </div>
+</div>
+<div class="form-group">
+  <label>Thumbnail Size</label>
+  <div data-controller="better-slider" data-better-slider-unit-value="px">
+    <%= f.number_field :preferred_thumbnail_size, type: 'range', min: 10, max: 200, step: 1, class: 'custom-range', data: { better_slider_target: "rangeInput", action: "change->auto-submit#submit" } %>
+    <span data-better-slider-target="currentValueLabel"><%= f.object.preferred_thumbnail_size %>px</span>
+  </div>
+</div>
+<% content_for(:design_tab) do %>
+  <div class="form-group"><%= f.label :preferred_display, Spree.t("admin.page_sections.product_reviews.display_style.label") %><%= f.select :preferred_display, options_for_select([ [Spree.t("admin.page_sections.product_reviews.display_style.stacked"), "stacked"], [Spree.t("admin.page_sections.product_reviews.display_style.inline"), "inline"]], @page_section.preferred_display ), {}, data: { action: "auto-submit#submit" }, class: "custom-select" %></div>
+<% end %>