spree_product_reviews 1.0.0

data/app/views/spree/product_reviews/_form.html.erb

@@ -0,0 +1,275 @@
+<% section ||= local_assigns[:section] || @page_section %>
+
+<script>
+  const MAX_FILES = <%= section&.preferred_max_images_upload || 5 %>;
+  const MAX_FILE_SIZE = (<%= section&.preferred_max_image_size_mb || 5 %>) * 1024 * 1024;
+  const THUMB_SIZE = <%= section&.preferred_thumbnail_size || 72 %>;
+</script>
+
+<div class="review-form-container mb-8 p-4 border border-gray-200 rounded-md shadow-sm bg-white">
+      <%= form_for [:product, product_review],
+      url: spree.product_product_reviews_path(@product),
+      html: { multipart: true, data: { turbo: false } } do |f| %>
+    <% if product_review.errors.any? %>
+      <div class="error-messages bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
+        <h2 class="font-bold mb-2"><%= pluralize(product_review.errors.count, "error") %> prohibited this review from being saved:</h2>
+        <ul class="list-disc list-inside">
+          <% product_review.errors.full_messages.each do |message| %>
+            <li><%= message %></li>
+          <% end %>
+        </ul>
+      </div>
+    <% end %>
+
+<style>
+  .rating-group {
+    display: inline-flex;
+  }
+  
+  .rating__icon {
+    pointer-events: none;
+  }
+  
+  .rating__input {
+    position: absolute !important;
+    left: -9999px !important;
+  }
+  
+  .rating__input--none {
+    display: none;
+  }
+  
+  .rating__label {
+    cursor: pointer;
+    padding: 0 0.1em;
+    font-size: 2rem;
+  }
+  
+  .rating__icon--star {
+    color: orange;
+  }
+  
+  .rating__input:checked ~ .rating__label .rating__icon--star {
+    color: #ddd;
+  }
+  
+  .rating-group:hover .rating__label .rating__icon--star {
+    color: orange;
+  }
+  
+  .rating__input:hover ~ .rating__label .rating__icon--star {
+    color: #ddd;
+  }
+</style>
+
+<div class="form-group mb-4">
+  <%= f.label :rating, Spree.t("product_review_rating"), class: "block mb-2 font-medium text-gray-700" %>
+  <div class="rating-group">
+    <%# Hidden input to ensure no default selection - user must choose a rating %>
+    <input class="rating__input rating__input--none" disabled checked name="<%= f.object_name %>[rating]" id="<%= f.object_name %>_rating_none" value="0" type="radio">
+    
+    <% (1..5).each do |i| %>
+      <label aria-label="<%= i %> <%= 'star'.pluralize(i) %>" class="rating__label" for="<%= f.object_name %>_rating_<%= i %>">
+        <span class="rating__icon rating__icon--star">★</span>
+      </label>
+      <%= f.radio_button :rating, i, id: "#{f.object_name}_rating_#{i}", required: true, class: "rating__input" %>
+    <% end %>
+  </div>
+</div>
+
+    <div class="form-group mb-4">
+      <%= f.label :title, Spree.t("review_title"), class: "block mb-2 font-medium" %>
+      <%= f.text_field :title, required: true, class: "focus:border-primary focus:ring-primary text-base bg-accent rounded-md border-accent py-2 px-4 w-full" %>
+    </div>
+
+    <div class="form-group mb-4">
+      <%= f.label :review, Spree.t("page_blocks.product_review_form.placeholder_default"), class: "block mb-2 font-medium" %>
+      <%= f.text_area :review, required: true, class: "focus:border-primary focus:ring-primary text-base bg-accent rounded-md border-accent py-2 px-4 w-full", rows: 4, placeholder: block.preferred_placeholder %>
+    </div>
+
+    <div class="form-group mb-4">
+  <%= f.label :images, "Upload images (optional)", class: "block mb-2 font-medium text-gray-700" %>
+
+  <%= f.file_field :images,
+        multiple: true,
+        accept: "image/*",
+        direct_upload: true,
+        class: "hidden",
+        id: "review-image-upload" %>
+
+        <label
+        for="review-image-upload"
+        class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium
+               border border-gray-300 rounded-md cursor-pointer
+               bg-white text-gray-700
+               hover:bg-gray-50 hover:text-gray-900
+               transition select-none">
+      
+        <!-- Upload icon -->
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 16 16"
+          class="w-4 h-4 flex-shrink-0"
+          fill="currentColor"
+          aria-hidden="true">
+          <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5"/>
+          <path d="M7.646 1.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 2.707V11.5a.5.5 0 0 1-1 0V2.707L5.354 4.854a.5.5 0 1 1-.708-.708z"/>
+        </svg>
+      
+        <!-- Text -->
+        <span>Upload images</span>
+      </label>
+      
+  <p class="mt-1 text-xs text-gray-400">
+    Max <%= section&.preferred_max_images_upload || 5 %> images · JPG / PNG / GIF · Max <%= section&.preferred_max_image_size_mb || 5 %>MB each
+  </p>
+
+  <!-- Validation errors -->
+  <div id="review-image-errors"
+       class="hidden mt-2 text-sm text-red-600 bg-red-50 border border-red-200 rounded px-3 py-2">
+  </div>
+
+  <!-- Preview grid -->
+  <div id="review-image-preview"
+       class="mt-3 grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 gap-3">
+  </div>
+
+  <!-- Upload progress -->
+  <div id="review-upload-progress" class="hidden mt-3">
+    <div class="h-1.5 w-full bg-gray-200 rounded">
+      <div id="review-upload-bar"
+           class="h-1.5 bg-primary-600 rounded transition-all"
+           style="width:0%">
+      </div>
+    </div>
+    <p class="text-xs text-gray-500 mt-1">Uploading images…</p>
+  </div>
+</div>
+
+    <div class="form-group mb-4">
+      <div class="flex items-center">
+        <%= f.check_box :show_identifier, class: "mr-2" %>
+        <%= f.label :show_identifier, "Show my name in the review", class: "text-sm text-gray-600" %>
+      </div>
+    </div>
+
+    <% button_class = "btn-primary" %>
+    <% button_class = "btn-secondary" if block.preferred_button_style == "secondary" %>
+    <%= f.submit block.preferred_button_text, class: "#{button_class} py-2 px-6 rounded-md text-white font-medium" %>
+  <% end %>
+</div>
+<script>
+(() => {
+  const MAX_FILES = <%= section&.preferred_max_images_upload || 5 %>
+  const MAX_FILE_SIZE = (<%= section&.preferred_max_image_size_mb || 5 %>) * 1024 * 1024
+
+  const input = document.getElementById("review-image-upload")
+  const preview = document.getElementById("review-image-preview")
+  const errors = document.getElementById("review-image-errors")
+  const progressWrapper = document.getElementById("review-upload-progress")
+  const progressBar = document.getElementById("review-upload-bar")
+
+  if (!input) return
+
+  let filesStore = []
+
+  function showError(message) {
+    errors.textContent = message
+    errors.classList.remove("hidden")
+  }
+
+  function clearError() {
+    errors.textContent = ""
+    errors.classList.add("hidden")
+  }
+
+  function syncInputFiles() {
+    const dt = new DataTransfer()
+    filesStore.forEach(f => dt.items.add(f))
+    input.files = dt.files
+  }
+
+  function renderPreviews() {
+  preview.innerHTML = ""
+
+  filesStore.forEach((file, index) => {
+    const wrapper = document.createElement("div")
+    wrapper.className =
+      "relative group overflow-hidden h-24 " +
+      "flex items-center justify-center rounded border bg-gray-100"
+
+    const img = document.createElement("img")
+    img.src = URL.createObjectURL(file)
+    img.className =
+       "w-full h-full object-cover"
+    img.loading = "lazy"
+
+    const removeBtn = document.createElement("button")
+removeBtn.type = "button"
+removeBtn.innerHTML = "&times;"
+
+removeBtn.className =
+  "absolute top-1 right-1 z-50 pointer-events-auto " +
+  "w-8 h-8 flex items-center justify-center " +
+  "rounded-full text-gray-900 shadow-md " +
+  "hover:bg-white transition"
+
+removeBtn.style.background = "rgba(255,255,255,0.45)"
+removeBtn.style.backdropFilter = "blur(8px)"
+removeBtn.style.webkitBackdropFilter = "blur(8px)"
+
+    removeBtn.addEventListener("click", () => {
+      filesStore.splice(index, 1)
+      syncInputFiles()
+      renderPreviews()
+    })
+
+    wrapper.appendChild(img)
+    wrapper.appendChild(removeBtn)
+    preview.appendChild(wrapper)
+  })
+}
+
+  input.addEventListener("change", () => {
+    clearError()
+
+    const newFiles = Array.from(input.files)
+
+    if (filesStore.length + newFiles.length > MAX_FILES) {
+      showError(`You can upload a maximum of ${MAX_FILES} images.`)
+      input.value = ""
+      return
+    }
+
+    for (const file of newFiles) {
+      if (file.size > MAX_FILE_SIZE) {
+        showError(`"${file.name}" exceeds 5MB.`)
+        input.value = ""
+        return
+      }
+    }
+
+    filesStore = filesStore.concat(newFiles)
+    syncInputFiles()
+    renderPreviews()
+  })
+
+  /* ActiveStorage progress */
+  document.addEventListener("direct-upload:initialize", () => {
+    progressWrapper.classList.remove("hidden")
+    progressBar.style.width = "0%"
+  })
+
+  document.addEventListener("direct-upload:progress", e => {
+    progressBar.style.width = `${e.detail.progress}%`
+  })
+
+  document.addEventListener("direct-upload:end", () => {
+    progressBar.style.width = "100%"
+    setTimeout(() => {
+      progressWrapper.classList.add("hidden")
+      progressBar.style.width = "0%"
+    }, 400)
+  })
+})()
+</script>

data/app/views/spree/product_reviews/_images.html.erb

@@ -0,0 +1,80 @@
+<%
+  section ||= local_assigns[:section]
+  max_images = section&.preferred_max_images_upload || 5
+  thumb_size = section&.preferred_thumbnail_size || 72
+  images = review.images.select(&:blob).first(max_images)
+  return if images.empty?
+  many_images = images.size > 4
+  cols =
+    images.size == 1 ? 'grid-cols-1' :
+    images.size == 2 ? 'grid-cols-2' :
+    images.size == 3 ? 'grid-cols-3' :
+                       'grid-cols-3 sm:grid-cols-4'
+%>
+
+<div class="mt-2 w-full">
+
+  <%# --- Swiper slider for medium+ screens --- %>
+  <div
+    class="hidden md:block"
+    data-controller="swiper lightbox"
+    data-swiper-options-value='{"slidesPerView":"auto","spaceBetween":4,"freeMode":true}'
+  >
+    <div class="swiper h-[70px] w-full overflow-hidden cursor-grab active:cursor-grabbing">
+      <div class="swiper-wrapper flex gap-1 pr-6">
+        <% images.each do |image| %>
+          <% full_w = image.blob.metadata[:width]  || 2000 %>
+          <% full_h = image.blob.metadata[:height] || 2000 %>
+          <% thumb = image.variant(
+            resize_to_fill: [thumb_size, thumb_size],
+            saver: { quality: 70 }
+          ) %>
+
+          <div class="swiper-slide !h-[<%= thumb_size %>px]" style="width:<%= thumb_size %>px; border-radius:10%; overflow:hidden;">
+            <%= link_to(
+              main_app.rails_blob_path(image, only_path: true),
+              data: { pswp_width: full_w, pswp_height: full_h },
+              class: "block w-full h-full overflow-hidden rounded-xl border border-gray-200"
+            ) do %>
+              <%= image_tag(
+                main_app.rails_representation_path(thumb, only_path: true),
+                width: thumb_size,
+                height: thumb_size,
+                loading: "lazy",
+                decoding: "async",
+                class: "w-full h-full object-cover rounded-xl"
+              ) %>
+            <% end %>
+          </div>
+        <% end %>
+      </div>
+    </div>
+  </div>
+
+  <%# --- Grid for mobile / small screens --- %>
+  <div class="md:hidden grid gap-1 <%= cols %>" data-controller="lightbox">
+    <% images.each do |image| %>
+      <% full_w = image.blob.metadata[:width]  || 2000 %>
+      <% full_h = image.blob.metadata[:height] || 2000 %>
+      <% thumb = image.variant(
+        resize_to_fill: [thumb_size, thumb_size],
+        saver: { quality: 70 }
+      ) %>
+
+      <%= link_to(
+        main_app.rails_blob_path(image, only_path: true),
+        data: { pswp_width: full_w, pswp_height: full_h },
+        class: "aspect-square block overflow-hidden rounded-xl border border-gray-200",
+        style: "border-radius: 10px;"
+      ) do %>
+        <%= image_tag(
+          main_app.rails_representation_path(thumb, only_path: true),
+          loading: "lazy",
+          decoding: "async",
+          class: "w-full h-full object-cover rounded-xl"
+        ) %>
+      <% end %>
+    <% end %>
+  </div>
+
+</div>

data/app/views/spree/product_reviews/_pending.html.erb

@@ -0,0 +1,15 @@
+<% return unless defined?(product_review) && product_review.present? %>
+<div class="mx-auto py-8">
+  <div class="review-form-container mb-8 p-4 border border-gray-200 rounded-md shadow-sm">
+    <% if product_review.approved? %>
+      <p class="text-sm text-green-600 mb-4">
+        <%= section&.preferred_heading_review_approved.presence || "Thanks for your review!" %>
+      </p>
+    <% else %>
+      <p class="text-sm text-gray-600 mb-4">
+        <%= section&.preferred_heading_pending_review.presence || "Thanks for your review! It is currently pending approval." %>
+      </p>
+    <% end %>
+    <%= render "spree/product_reviews/review", product_review: product_review %>
+  </div>
+</div>

data/app/views/spree/product_reviews/_review.html.erb

@@ -0,0 +1,38 @@
+<% return unless defined?(product_review) && product_review.present? %>
+
+<hr class="my-6 border-gray-200 dark:border-gray-700" />
+
+<div class="gap-3 p-4 sm:flex sm:items-start">
+  <div class="shrink-0 space-y-2 sm:w-48 md:w-72">
+    <div class="flex items-center gap-0.5">
+      <% product_review.rating.times do %>
+        <%#= icon("star", class: "h-4 w-4 text-yellow-300") %>
+        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24" fill="#FFA500"  class="h-4 w-4 text-yellow-300 icon icon-tabler icons-tabler-filled icon-tabler-star"><path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+          <path d="M8.243 7.34l-6.38 .925l-.113 .023a1 1 0 0 0 -.44 1.684l4.622 4.499l-1.09 6.355l-.013 .11a1 1 0 0 0 1.464 .944l5.706 -3l5.693 3l.1 .046a1 1 0 0 0 1.352 -1.1l-1.091 -6.355l4.624 -4.5l.078 -.085a1 1 0 0 0 -.633 -1.62l-6.38 -.926l-2.852 -5.78a1 1 0 0 0 -1.794 0l-2.853 5.78z" />
+        </svg>
+      <% end %>
+      <span class="sr-only">Rating: <%= product_review.rating %> out of 5</span>
+    </div>
+
+    <div class="space-y-0.5">
+      <p class="text-base font-semibold text-gray-900 dark:text-white"><%= product_review.reviewer_name %></p>
+      <p class="text-sm font-normal text-gray-500 dark:text-gray-400"><%= product_review.review_date %></p>
+    </div>
+
+    <% if product_review.purchase_date.present? %>
+      <div class="inline-flex items-center gap-1">
+        <%#= icon("rosette-discount-check", class: "h-5 w-5 text-primary-700 dark:text-primary-500") %>
+        <svg aria-hidden="true"  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24" fill="oklch(62.7% .194 149.214)"  class="h-5 w-5 text-primary-700 dark:text-primary-500 icon icon-tabler icons-tabler-filled icon-tabler-rosette-discount-check">
+          <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+          <path d="M12.01 2.011a3.2 3.2 0 0 1 2.113 .797l.154 .145l.698 .698a1.2 1.2 0 0 0 .71 .341l.135 .008h1a3.2 3.2 0 0 1 3.195 3.018l.005 .182v1c0 .27 .092 .533 .258 .743l.09 .1l.697 .698a3.2 3.2 0 0 1 .147 4.382l-.145 .154l-.698 .698a1.2 1.2 0 0 0 -.341 .71l-.008 .135v1a3.2 3.2 0 0 1 -3.018 3.195l-.182 .005h-1a1.2 1.2 0 0 0 -.743 .258l-.1 .09l-.698 .697a3.2 3.2 0 0 1 -4.382 .147l-.154 -.145l-.698 -.698a1.2 1.2 0 0 0 -.71 -.341l-.135 -.008h-1a3.2 3.2 0 0 1 -3.195 -3.018l-.005 -.182v-1a1.2 1.2 0 0 0 -.258 -.743l-.09 -.1l-.697 -.698a3.2 3.2 0 0 1 -.147 -4.382l.145 -.154l.698 -.698a1.2 1.2 0 0 0 .341 -.71l.008 -.135v-1l.005 -.182a3.2 3.2 0 0 1 3.013 -3.013l.182 -.005h1a1.2 1.2 0 0 0 .743 -.258l.1 -.09l.698 -.697a3.2 3.2 0 0 1 2.269 -.944zm3.697 7.282a1 1 0 0 0 -1.414 0l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.32 1.497l2 2l.094 .083a1 1 0 0 0 1.32 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z" />
+        </svg>
+        <p class="text-sm font-medium text-green-600 dark:text-white">Verified purchase</p>
+      </div>
+    <% end %>
+  </div>
+  <div class="mt-4 min-w-0 flex-1 space-y-4 sm:mt-0">
+    <h3 class="text-lg font-semibold"><%= product_review.title %></h3>
+    <p class="text-base font-normal"><%= product_review.review %></p>
+    <%= render "spree/product_reviews/images", review: product_review %>
+  </div>
+</div>

data/app/views/spree/products/_json_ld.html.erb

@@ -0,0 +1,97 @@
+<script type="application/ld+json" data-test-id="product-json-ld">
+  <% first_or_default_variant = product.first_or_default_variant(current_currency) %>
+  <% approved_reviews = product.product_reviews.where(approved: true) %>
+
+  {
+    "@context": "https://schema.org/",
+    "@type": "Product",
+    "name": <%= product.name.to_json.html_safe %>,
+    "url": <%= spree.product_url(product, host: current_store.url_or_custom_domain).to_json.html_safe %>,
+
+    <% if product.featured_image %>
+    "image": [
+      <%= spree_image_url(product.featured_image, width: 630, height: 630).to_json.html_safe %>
+    ],
+    <% end %>
+
+    <% if product.description.present? %>
+    "description": <%= strip_tags(product.description).to_json.html_safe %>,
+    <% end %>
+
+    <% if !product.has_variants? %>
+      <% if first_or_default_variant.sku.present? %>
+        "sku": <%= first_or_default_variant.sku.to_json.html_safe %>,
+      <% end %>
+    <% elsif selected_variant %>
+      <% if selected_variant.sku.present? %>
+        "sku": <%= selected_variant.sku.to_json.html_safe %>,
+      <% end %>
+    <% end %>
+
+    <% if product.brand %>
+    "brand": {
+      "@type": "Brand",
+      "name": <%= product.brand_name.to_json.html_safe %>
+    },
+    <% end %>
+
+    <%# --- Inject Aggregate Rating & Reviews if available --- %>
+    <% if approved_reviews.any? %>
+    "aggregateRating": {
+      "@type": "AggregateRating",
+      "ratingValue": <%= approved_reviews.average(:rating).to_f.round(1) %>,
+      "reviewCount": <%= approved_reviews.count %>
+    },
+    "review": <%= raw(
+      approved_reviews.limit(5).map do |review|
+        {
+          "@type": "Review",
+          author: {
+            "@type": "Person",
+            name: review.user&.email&.split('@')&.first || "Anonymous"
+          },
+          reviewRating: {
+            "@type": "Rating",
+            ratingValue: review.rating,
+            bestRating: 5
+          },
+          reviewBody: review.review,
+          datePublished: review.created_at.strftime("%Y-%m-%d")
+        }
+      end.to_json
+    ) %>,
+    <% end %>
+
+    <% if product.has_variants? %>
+    "offers": {
+      "@type": "AggregateOffer",
+      "lowPrice": <%= product.variants.map(&:price).min.to_f.round(2) %>,
+      "highPrice": <%= product.variants.map(&:price).max.to_f.round(2) %>,
+      "offerCount": <%= product.variants.count %>,
+      "priceCurrency": <%= current_currency.to_json.html_safe %>,
+      "offers": [
+        <%= raw(
+          product.variants.map { |variant|
+            render(
+              partial: "spree/products/json_ld_variant",
+              locals: { product: product, variant: variant }
+            ).strip
+          }.join(",")
+        ) %>
+      ]
+    }
+    <% else %>
+    "offers": {
+      "@type": "Offer",
+      "price": <%= first_or_default_variant.price.to_f.round(2) %>,
+      "priceCurrency": <%= current_currency.to_json.html_safe %>,
+      "availability": "https://schema.org/<%= first_or_default_variant.in_stock? ? 'InStock' : 'OutOfStock' %>",
+      "url": <%= spree.product_url(product, host: current_store.url_or_custom_domain).to_json.html_safe %>
+    }
+    <% end %>
+  }
+</script>
+
+<script type="application/ld+json">
+  <%= product_json_ld_breadcrumbs(product).to_json.html_safe %>
+</script>

data/app/views/spree_product_reviews/admin/_product_reviews_dropdown.html.erb

@@ -0,0 +1,6 @@
+<%= link_to_with_icon(
+    "bubble-text",
+    "Reviews",
+    spree.admin_product_product_reviews_path(@product),
+    class: "dropdown-item",
+  ) %>

data/app/views/themes/default/spree/page_sections/_product_details.html.erb

@@ -0,0 +1,89 @@
+<turbo-frame id="main-product-<%= product.id %>" target="_top">
+  <% current_variant = @selected_variant || @variant_from_options || product.first_or_default_variant(current_currency) %>
+  <div class="main-product-container" style="<%= section_styles(section) %>">
+    <div
+      class="page-container lg:mb-16"
+      <%= 'data-controller=product-form' %>
+      data-product-form-required-options-value='<%= product.option_type_ids.map(&:to_s).to_json %>'
+      data-product-form-selected-variant-disabled-value='<%= !@selected_variant&.in_stock? %>'
+      data-product-form-variant-from-options-disabled-value='<%= !@variant_from_options&.in_stock? %>'
+      data-product-form-frame-name-value="main-product-<%= product.id %>"
+      data-product-form-url-value="<%= spree.product_url(product) %>">
+      <template data-product-form-target="spinnerTemplate">
+        <%= render "spree/shared/icons/spinner" %>
+      </template>
+
+      <div id="product-details-page" class="grid grid-cols-1 lg:grid-cols-12 gap-x-14">
+        <% images = product_media_gallery_images(product, selected_variant: @selected_variant, variant_from_options: @variant_from_options) %>
+
+        <div class="lg:col-span-7 relative">
+          <div class="lg:hidden mb-6">
+            <%= render 'spree/products/media_gallery', images: images, product: product %>
+          </div>
+          <div class="hidden lg:block" data-product-form-target="desktopMediaGallery">
+            <%= render 'spree/products/media_gallery', images: images, desktop: true, product: product %>
+          </div>
+        </div>
+
+        <div class="lg:col-span-5 lg:col-start-8">
+          <% show_waitlist_modal = spree.respond_to?(:waitlists_path) && current_variant.present? %>
+          <div
+            <% if show_waitlist_modal %>
+            data-controller="modal"
+            <% end %>
+            data-modal-allow-background-close="true"
+            class="h-full w-full waitlist-modal"
+            data-modal-backdrop-color-value="rgba(0,0,0,0.32)">
+            <%= form_with(url: spree.line_items_path, method: :post, data: { controller: "turbo-stream-form", product_form_target: "form" }) do |f| %>
+              <%= hidden_field_tag :variant_id, current_variant&.id %>
+
+              <div data-product-form-target="productDetails">
+                <% section.blocks.each do |block| %>
+                  <div <%= block_attributes(block) %>>
+                    <% case block.class.name %>
+                    <% when 'Spree::PageBlocks::Products::Title' %>
+                      <h1 class="text-2xl uppercase tracking-tight font-medium">
+                        <%= product.name %>
+                      </h1>
+                    <% when 'Spree::PageBlocks::Products::Brand' %>
+                      <% if product.brand_taxon %>
+                        <%= link_to spree.nested_taxons_path(product.brand_taxon), title: product.brand_name do %>
+                          <h3 class="text-sm lg:mt-0 inline-block mb-1">
+                            <%= product.brand_name %>
+                          </h3>
+                        <% end %>
+                      <% end %>
+                    <% when 'Spree::PageBlocks::Products::Price' %>
+                      <%= render 'spree/products/price', product: product, use_variant: true, selected_variant: @selected_variant, price_class: "lg:text-lg lg:font-medium", price_container_class: "w-full" %>
+                    <% when 'Spree::PageBlocks::Products::VariantPicker' %>
+                      <%= render 'spree/products/variant_picker', product: product, selected_variant: @selected_variant %>
+                    <% when 'Spree::PageBlocks::Products::QuantitySelector' %>
+                      <%= render 'spree/products/quantity_selector', product: product, selected_variant: @selected_variant %>
+                    <% when 'Spree::PageBlocks::Products::BuyButtons' %>
+                      <div class="flex w-full" data-controller='sticky-button'>
+                        <%= render 'spree/products/add_to_cart_button', product: product, selected_variant: @selected_variant, sticky_button_classes: "w-full" %>
+                        <%= render 'spree/products/add_to_wishlist', variant: current_variant, css_classes: 'btn-secondary ml-5 h-12 !py-0 !px-3 border-default', icon_size: 24 %>
+                      </div>
+                    <% when 'Spree::PageBlocks::Products::Description' %>
+                      <%= render 'spree/products/description', product: product, block: block, section: section %>
+                    <% when 'Spree::PageBlocks::Metafields' %>
+                      <%= render 'spree/products/metafields', product: product, block: block, section: section %>
+                      <% when 'Spree::PageBlocks::Products::RazorpayAffordability' %>
+                       <%= block.render(self, product: product) %>
+
+                      <% when 'Spree::PageBlocks::Products::Reviews' %>
+                        <%= block.render(self, product: product) %>
+                    <% end %>
+                  </div>
+                <% end %>
+              </div>
+            <% end %>
+
+            <%= render 'spree/products/add_to_waitlist', variant: current_variant if show_waitlist_modal %>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <%= render 'spree/products/json_ld', product: product, selected_variant: @selected_variant %>
+</turbo-frame>

data/config/initializers/spree_product_reviews.rb

@@ -0,0 +1,9 @@
+Rails.application.config.after_initialize do
+  Rails.application.config.spree_admin.product_dropdown_partials << "spree_product_reviews/admin/product_reviews_dropdown"
+  Spree::Ability.register_ability(Spree::ProductReviewsAbility)
+  Spree::Ability.register_ability(Spree::ProductReviewsAbility)
+
+  Rails.application.config.spree.page_sections << Spree::PageSections::AddAReview
+  Rails.application.config.spree.page_blocks << Spree::PageBlocks::ProductReviewForm
+end
+