spree_product_reviews 1.0.0

data/app/views/spree/admin/product_reviews/_product_review.html.erb

@@ -0,0 +1,89 @@
+<tr id="<%= dom_id(product_review) %>">
+  <td class="w-10 cursor-pointer" data-action="click->row-link#openLink">
+    <% if product_review.approved? %>
+      <span class="badge badge-shipped">
+        <i class="ti ti-check"></i> Approved
+      </span>
+    <% elsif product_review.approved == false %>
+      <span class="badge badge-canceled">
+        <i class="ti ti-x"></i> Disapproved
+      </span>
+    <% else %>
+      <span class="badge badge-pending">
+        <i class="ti ti-progress"></i> Pending
+      </span>
+    <% end %>
+  </td>
+
+  <td><%= product_review.user&.email || "Guest" %></td>
+  <td><%= product_review.title %></td>
+  <td><%= product_review.rating %></td>
+  <td><%= l(product_review.created_at, format: :short) %></td>
+  <td>
+    <% if product_review.images.attached? %>
+      <div data-controller="lightbox" class="flex gap-1">
+        <% product_review.images.each do |img| %>
+          <% next unless img.blob.present? %>
+          <% thumb = img.variant(resize_to_limit: [50, 50], saver: { quality: 70 }) %>
+
+          <%= link_to main_app.rails_blob_path(img, only_path: true),
+                      data: {
+                        pswp_width: img.blob.metadata[:width]  || 2000,
+                        pswp_height: img.blob.metadata[:height] || 2000
+                      },
+                      class: "inline-block rounded border border-gray-200 admin-review-thumb" do %>
+            <%= image_tag main_app.rails_representation_path(thumb, only_path: true),
+                          width: 50,
+                          height: 50,
+                          class: "rounded",
+                          loading: "lazy",
+                          decoding: "async" %>
+          <% end %>
+        <% end %>
+      </div>
+    <% end %>
+  </td>
+
+  <td class="actions">
+    <% if product_review.approved? %>
+      <%= button_to "Disapprove",
+            disapprove_admin_product_product_review_path(
+              product_review.product,
+              product_review
+            ),
+            method: :get,
+            class: "btn btn-warning btn-sm mr-2" %>
+    <% else %>
+      <%= link_to Spree.t(:approve),
+            approve_admin_product_product_review_path(
+              product_review.product,
+              product_review
+            ),
+            method: :get,
+            class: "btn btn-success btn-sm mr-2" %>
+    <% end %>
+
+<% if can? :edit, product_review %>
+  <%= link_to_edit(
+    product_review,
+    no_text: true,
+    url: edit_admin_product_product_review_path(
+      product_review.product,
+      product_review,
+      return_to: request.fullpath
+    )
+  ) %>
+<% end %>
+
+    <% if can? :destroy, product_review %>
+      <%= link_to_delete(
+            product_review,
+            url: admin_product_product_review_path(
+              product_review.product,
+              product_review
+            ),
+            no_text: true
+          ) %>
+    <% end %>
+  </td>
+</tr>

data/app/views/spree/admin/product_reviews/_table.html.erb

@@ -0,0 +1,31 @@
+<% colspan = 6 %> <!-- Fix: define colspan -->
+
+<table class="table">
+  <thead>
+    <tr>
+      <th><%= Spree.t(:status) %></th>
+      <th><%= Spree.t(:email) %></th>
+      <th><%= Spree.t(:review_title) %></th>
+      <th><%= Spree.t(:product_review_rating) %></th>
+      <th><%= Spree.t(:date) %></th>
+      <th><%= Spree.t(:review_images) %></th>
+      <th></th>
+    </tr>
+  </thead>
+
+  <tbody>
+    <%= render partial: "spree/admin/product_reviews/product_review",
+               collection: @product_reviews,
+               cached: spree_base_cache_scope %>
+
+    <% if @product_reviews.empty? %>
+      <tr>
+        <td colspan="<%= colspan %>">
+          <div class="text-muted p-5 d-flex align-items-center w-100 justify-content-center">
+            <%= Spree.t(:no_resource_found, resource: Spree.t(:product_reviews)) %>
+          </div>
+        </td>
+      </tr>
+    <% end %>
+  </tbody>
+</table>

data/app/views/spree/admin/product_reviews/edit.html.erb

@@ -0,0 +1,103 @@
+<% content_for :page_title do %>
+  <%= Spree.t(:edit_product_review) %>
+<% end %>
+
+<% content_for :page_actions do %>
+  <%= link_to(Spree.t(:back), params[:return_to].presence || admin_product_product_reviews_path(@product), class: "btn btn-secondary") %>
+<% end %>
+
+<div class="card">
+  <div class="card-body">
+
+    <%= form_with( model: [:admin, @product, @product_review], id: dom_id(@product_review, :edit), data: { turbo: true } ) do |f| %>
+
+      <div class="form-group mb-3">
+        <%= f.label :title, Spree.t(:review_title) %>
+        <%= f.text_field :title, class: "form-control" %>
+      </div>
+
+      <div class="form-group mb-3">
+        <%= f.label :review, Spree.t(:review) %>
+        <%= f.text_area :review, class: "form-control", rows: 5 %>
+      </div>
+
+      <div class="form-group mb-4">
+        <%= f.label :rating, Spree.t(:product_review_rating) %>
+        <div class="btn-group d-flex gap-2" data-rating-group>
+          <% (1..5).each do |i| %>
+            <label
+              class="btn btn-outline-primary <%= 'active' if @product_review.rating == i %>" data-rating-button >
+              <%= f.radio_button :rating, i, checked: @product_review.rating == i, class: "d-none" %>
+              <%= i %>
+            </label>
+          <% end %>
+        </div>
+      </div>
+      <% if @product_review.images.attached? %>
+        <div class="card mb-4">
+          <div class="card-header d-flex justify-content-between align-items-center">
+            <strong>Images</strong>
+            <button type="button" class="btn btn-sm btn-danger" data-review-delete data-url="<%= purge_images_admin_product_product_review_path(@product, @product_review) %>">
+              <i class="ti ti-trash"></i> Delete Selected
+            </button>
+          </div>
+          <div class="card-body d-flex flex-wrap gap-3">
+            <% @product_review.images.each do |img| %>
+              <% thumb = img.variant(resize_to_limit: [120, 120], saver: { quality: 70 }) %>
+              <div class="position-relative review-image-thumb" id="review_image_<%= img.id %>">
+                <div class="form-check position-absolute top-0 start-0 m-1">
+                  <input type="checkbox" class="form-check-input" value="<%= img.id %>">
+                </div>
+                <%= image_tag(
+                      main_app.rails_representation_path(thumb, only_path: true),
+                      class: "rounded border",
+                      loading: "lazy"
+                    ) %>
+              </div>
+            <% end %>
+          </div>
+        </div>
+      <% end %>
+    <% end %>
+  </div>
+</div>
+
+<script>
+document.addEventListener("click", async function(event) {
+  const ratingBtn = event.target.closest("[data-rating-button]")
+  if (ratingBtn) {
+    const group = ratingBtn.closest("[data-rating-group]")
+    group.querySelectorAll("[data-rating-button]").forEach(btn => {
+      btn.classList.remove("active")
+      btn.querySelector("input[type='radio']").checked = false
+    })
+    ratingBtn.classList.add("active")
+    ratingBtn.querySelector("input[type='radio']").checked = true
+    return
+  }
+  const button = event.target.closest("[data-review-delete]")
+  if (!button) return
+  event.preventDefault()
+  if (button.dataset.processing === "true") return
+  button.dataset.processing = "true"
+  const form = button.closest("form") || document
+  const checked = form.querySelectorAll(".review-image-thumb input[type='checkbox']:checked")
+  const ids = Array.from(checked).map(cb => cb.value)
+  if (ids.length === 0) { button.dataset.processing = "false"; return }
+  if (!confirm("Delete selected images?")) { button.dataset.processing = "false"; return }
+  try {
+    const token = document.querySelector("meta[name='csrf-token']").content
+    const response = await fetch(button.dataset.url, {
+      method: "DELETE",
+      headers: { "X-CSRF-Token": token, "Content-Type": "application/json" },
+      body: JSON.stringify({ ids })
+    })
+    if (!response.ok) throw new Error("Delete failed")
+    ids.forEach(id => form.querySelector(`#review_image_${id}`)?.remove())
+  } catch(e) {
+    alert("Failed to delete images")
+  } finally {
+    button.dataset.processing = "false"
+  }
+})
+</script>

data/app/views/spree/admin/product_reviews/index.html.erb

@@ -0,0 +1,15 @@
+<% content_for :page_title do %>
+  <%= page_header_back_button spree.admin_product_path(@product) %>
+  <span><%= Spree.t(:product_reviews) %></span>
+<% end %>
+
+<% content_for :page_actions do %>
+<% end %>
+
+<div class="card p-0">
+  <div class="card-body p-0">
+    <div class="table-responsive" id="<%= dom_id(@product, :product_reviews) %>">
+      <%= render "spree/admin/product_reviews/table" %>
+    </div>
+  </div>
+</div>

data/app/views/spree/admin/product_reviews/update.turbo_stream.erb

@@ -0,0 +1 @@
+<%= turbo_stream.replace dom_id(@product_review), partial: "spree/admin/product_reviews/product_review", locals: { product_review: @product_review } %>

data/app/views/spree/page_blocks/products/reviews/_reviews.html.erb

@@ -0,0 +1,42 @@
+<%
+  star_color      = block.preferred_star_color.presence || '#FFA500'
+  star_size       = block.preferred_star_font_size || 16
+  show_numbers    = block.preferred_display_numbers
+%>
+
+<%
+  product = local_assigns[:product] || @product
+  return unless product
+
+  if spree_current_user
+    reviews = product.product_reviews.where(
+      "approved = ? OR user_id = ?",
+      true,
+      spree_current_user.id
+    )
+  else
+    reviews = product.product_reviews.where(approved: true)
+  end
+%>
+
+<% return unless reviews.any? %>
+
+<%
+  avg_rating = reviews.average(:rating).to_f
+  full_stars = avg_rating.floor
+  half_star  = (avg_rating - full_stars) >= 0.5
+%>
+
+<div class="reviews-summary mb-0">
+  <div class="flex items-center mb-0 mt-2">
+  <div class="flex gap-0.5" style="color:<%= star_color %>; font-size:<%= star_size %>px;">
+      <% full_stars.times { %><span>★</span><% } %>
+      <% if half_star %><span>★</span><% end %>
+      <% (5 - full_stars - (half_star ? 1 : 0)).times do %>
+        <span class="text-gray-300">☆</span>
+      <% end %>
+    </div>
+
+    <% if show_numbers %><div class="ml-2 text-gray-600 text-sm">(<%= reviews.count %> <%= "review".pluralize(reviews.count) %>)</div><% end %>
+  </div>
+</div>

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

@@ -0,0 +1,75 @@
+<%
+  section ||= local_assigns[:section] || @page_section
+  product = local_assigns[:product] || (section.try(:product)) || @product
+  user_reviewed = spree_current_user&.product_review_for(product)
+  user_purchased = spree_current_user&.recent_purchase_date_for(product).present?
+  allow_unverified = section&.preferred_allow_unverified_purchase_reviews
+  show_form = spree_current_user && (user_purchased || allow_unverified)
+%>
+
+<div id="section-<%= section.id %>" class="section-add-a-review">
+  <div class="page-container" style="<%= section_styles(section) %>">
+    <div class="flex flex-col items-center">
+      <h2 class="<%= section.preferred_heading_size == 'small' ? 'text-lg' : 'text-2xl' %> font-medium">
+        <% if spree_current_user %>
+          <% if user_reviewed&.pending? %>
+            <%= section.preferred_heading_pending_review %>
+          <% elsif user_reviewed&.approved? %>
+            <%= section.preferred_heading_review_approved %>
+          <% else %>
+            <%= section.preferred_heading_no_review_yet %>
+          <% end %>
+        <% else %>
+          <%= section.preferred_heading_no_review_yet %>
+        <% end %>
+      </h2>
+
+      <%# --- CACHE STATIC BLOCKS --- %>
+      <% cache_unless page_builder_enabled?,
+           [spree_base_cache_scope.call(section), "static-blocks", section.updated_at] do %>
+        <% section.blocks.includes(:rich_text_text).where.not(type: "Spree::PageBlocks::ProductReviewForm").each do |block| %>
+          <% case block.type %>
+          <% when "Spree::PageBlocks::Heading" %>
+            <h3 class="<%= block.preferred_size == 'small' ? 'text-lg' : 'text-2xl' %> font-medium" <%= block_attributes(block) %>>
+              <%= block.text %>
+            </h3>
+          <% when "Spree::PageBlocks::Text" %>
+            <div class="max-w-prose text-md leading-relaxed font-normal" <%= block_attributes(block) %>>
+              <%= block.text %>
+            </div>
+          <% when "Spree::PageBlocks::Image" %>
+            <div class="flex justify-center" <%= block_attributes(block) %>>
+              <%= render "spree/page_blocks/image", block: block %>
+            </div>
+          <% end %>
+        <% end %>
+      <% end %>
+
+      <% section.blocks.where(type: "Spree::PageBlocks::ProductReviewForm").each do |block| %>
+        <% if show_form %>
+          <div class="flex-1 w-full">
+            <% if user_reviewed %>
+              <%= render "spree/product_reviews/pending", product_review: user_reviewed, section: section %>
+            <% else %>
+              <%= render "spree/product_reviews/form",
+                         product: product,
+                         product_review: Spree::ProductReview.new(product: product),
+                         block: block,
+                         section: section %>
+            <% end %>
+          </div>
+        <% else %>
+          <div class="text-sm text-gray-600 mt-4">
+            <% if spree_current_user %>
+              <p>You must purchase this product to leave a review.</p>
+            <% else %>
+              <p>Please <a href="<%= spree_login_path(redirect_to: request.fullpath) %>" class="text-blue-600 underline">log in</a> to leave a review.</p>
+            <% end %>
+          </div>
+        <% end %>
+      <% end %>
+    </div>
+  </div>
+</div>
+
+<%= render 'spree/page_sections/product_reviews', product: product, section: section %>

data/app/views/spree/page_sections/_product_reviews.html.erb

@@ -0,0 +1,95 @@
+<%# Determine the correct product object from local assigns or fallback to @product %>
+<% product = local_assigns[:product] || @product %>
+<% section ||= local_assigns[:section] %>
+<% badge_color = section&.preferred_verified_badge_color || '#00a63e' %>
+
+<% if spree_current_user %>
+  <% product_reviews = product.product_reviews.where("approved = ? OR user_id = ?", true, spree_current_user.id).order(created_at: :desc) %>
+<% else %>
+  <% product_reviews = product.product_reviews.where(approved: true).order(created_at: :desc) %>
+<% end %>
+
+<div class="page-container mx-auto py-8 pb-6">
+  <h1 class="text-2xl font-bold mb-6 text-center"><%= Spree.t('customer_reviews') %></h1>
+
+  <% if product_reviews.any? %>
+    <% cache ["product-reviews", product.id, product_reviews.maximum(:updated_at)] do %>
+      <div class="reviews-summary mb-6">
+        <div class="flex items-center mb-2">
+          <div class="text-xl font-bold mr-2">
+            <%= product_reviews.average(:rating).to_f.round(1) %>
+          </div>
+            <%
+             star_color = section&.preferred_rating_color || '#FFA500'
+             star_size = section&.preferred_review_font_size || 14
+            %>
+            <div class="flex gap-0.5" style="color:<%= star_color %>; font-size:<%= star_size %>px;">
+            <% full_stars = product_reviews.average(:rating).to_f.floor %>
+            <% half_star = (product_reviews.average(:rating).to_f - full_stars) >= 0.5 %>
+            <% full_stars.times do %> <span>★</span> <% end %>
+            <% if half_star %> <span>★</span> <% end %>
+            <% (5 - full_stars - (half_star ? 1 : 0)).times do %>
+              <span class="text-gray-300">☆</span>
+            <% end %>
+          </div>
+          <div class="ml-2 text-gray-600">
+            (<%= product_reviews.count %> <%= 'review'.pluralize(product_reviews.count) %>)
+          </div>
+        </div>
+      </div>
+
+      <div class="reviews-list grid gap-3">
+        <% product_reviews.each do |review| %>
+          <div class="review-item border p-4 border-gray-200 py-4 rounded-md">
+            <div class="flex justify-between items-start mb-2">
+              <div>
+                <h3 class="font-medium" style="font-size:<%= section&.preferred_title_font_size || 18 %>px;"><%= review.title %></h3>
+                <%
+                review_star_color = section&.preferred_review_star_color || '#FFA500'
+                %>
+                <div style="color:<%= review_star_color %>;">
+                  <%= '★' * review.rating %>
+                  <%= '☆' * (5 - review.rating) %>
+                </div>
+              </div>
+              <div class="text-sm text-gray-500">
+                <%= l(review.created_at.to_date, format: :long) %>
+              </div>
+            </div>
+
+            <div
+             class="review-content my-2"
+             style="font-size:<%= section&.preferred_review_font_size || 14 %>px;">
+             <p><%= review.review %></p>
+            </div>
+
+            <%= render 'spree/product_reviews/images', review: review, section: section %>
+            
+            <% if review.show_identifier && review.user %>
+              <div class="review-author text-sm text-gray-600" style="display: flex;align-items: flex-end;height: 35px;column-gap: 5px;">
+                <%= Spree.t(:by) %> <span style="font-weight: 600;"><%= review.user.email.split('@').first %></span>
+                <% if review.purchase_date.present? %>
+                  <div class="inline-flex items-center gap-1 mt-1" style="color:<%= badge_color %>;">
+                    <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" class="h-4 w-4 text-green-600 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>
+                    <span class="text-sm font-medium">Verified purchase</span>
+                  </div>
+                <% end %>
+              </div>
+            <% end %>
+          </div>
+        <% end %>
+      </div>
+    <% end %>
+  <% else %>
+    <div class="p-6 rounded-md text-center">
+        <svg  width="80pt" height="80pt" id="Flat" viewBox="0 0 62 62" xmlns="http://www.w3.org/2000/svg"  class="mx-auto py-3"><path d="m16 26c0 12.15 9.85 22 22 22 2.23 0 4.38-.33 6.41-.95.73.59 1.6 1.15 2.61 1.6 3.7 1.66 7.04.95 8.04.7-1.1-1.13-2.67-3.04-3.79-5.8 5.3-4.01 8.73-10.38 8.73-17.55 0-12.15-9.85-22-22-22s-22 9.85-22 22z" fill="#b8c3d5"/><path d="m50 24h-24c-.55 0-1-.45-1-1s.45-1 1-1h24c.55 0 1 .45 1 1s-.45 1-1 1z" fill="#325068"/><path d="m50 18h-24c-.55 0-1-.45-1-1s.45-1 1-1h24c.55 0 1 .45 1 1s-.45 1-1 1z" fill="#325068"/><path d="m50 30h-24c-.55 0-1-.45-1-1s.45-1 1-1h24c.55 0 1 .45 1 1s-.45 1-1 1z" fill="#325068"/><path d="m50 36h-24c-.55 0-1-.45-1-1s.45-1 1-1h24c.55 0 1 .45 1 1s-.45 1-1 1z" fill="#325068"/><path d="m48 34c0 12.15-9.85 22-22 22-2.23 0-4.38-.33-6.41-.95-.73.59-1.6 1.15-2.61 1.6-3.7 1.66-7.04.95-8.04.7 1.1-1.13 2.67-3.04 3.79-5.8-5.3-4.01-8.73-10.38-8.73-17.55 0-12.15 9.85-22 22-22s22 9.85 22 22z" fill="#d3dce5"/><g fill="#536882"><path d="m19 32.78c-.26 0-.51-.1-.71-.29-.39-.39-.39-1.02 0-1.41l3.66-3.66c.39-.39 1.02-.39 1.41 0s.39 1.02 0 1.41l-3.66 3.66c-.2.2-.45.29-.71.29z"/><path d="m22.66 32.78c-.26 0-.51-.1-.71-.29l-3.66-3.66c-.39-.39-.39-1.02 0-1.41s1.02-.39 1.41 0l3.66 3.66c.39.39.39 1.02 0 1.41-.2.2-.45.29-.71.29z"/><path d="m29.34 32.78c-.26 0-.51-.1-.71-.29-.39-.39-.39-1.02 0-1.41l3.66-3.66c.39-.39 1.02-.39 1.41 0s.39 1.02 0 1.41l-3.66 3.66c-.2.2-.45.29-.71.29z"/><path d="m33 32.78c-.26 0-.51-.1-.71-.29l-3.66-3.66c-.39-.39-.39-1.02 0-1.41s1.02-.39 1.41 0l3.66 3.66c.39.39.39 1.02 0 1.41-.2.2-.45.29-.71.29z"/><path d="m32.47 42.59c-.36 0-.7-.19-.88-.53-1.1-2.07-3.24-3.35-5.58-3.35s-4.48 1.28-5.58 3.35c-.26.49-.87.67-1.35.41-.49-.26-.67-.87-.41-1.35 1.45-2.72 4.27-4.41 7.35-4.41s5.9 1.69 7.35 4.41c.26.49.08 1.09-.41 1.35-.15.08-.31.12-.47.12z"/></g></svg>
+      <div class="text-center text-gray-500 mt-6">
+        <p class="text-lg font-semibold"><%= Spree.t('no_reviews_yet') %></p>
+        <p class="mt-1 text-blue-600 text-sm"><%= Spree.t('be_the_first_to_write_a_review') %></p>
+      </div>
+    </div>
+  <% end %>
+</div>