Merge pull request #12848 from rioug/12770-product-preview

Product preview
openfoodfoundation · Sep 19, 2024 · 562a245 · 562a245
2 parents 2809194 + 40c4d38
commit 562a245
Show file tree

Hide file tree

Showing 47 changed files with 1,090 additions and 533 deletions.
diff --git a/app/assets/javascripts/templates/active_selector.html.haml b/app/assets/javascripts/templates/active_selector.html.haml
@@ -1,2 +1,3 @@
+- # NOTE: make sure that any changes in this template are reflected in app/views/admin/products_v3/product_preview.turbo_stream.haml
 %li{ "ng-class": "{active: selector.active}" }
   %a{ tooltip: "{{selector.object.value}}", "tooltip-placement": "bottom", "ng-transclude": true, "ng-class": "{active: selector.active, 'has-tip': selector.object.value}" }
diff --git a/app/assets/javascripts/templates/filter_selector.html.haml b/app/assets/javascripts/templates/filter_selector.html.haml
@@ -1,3 +1,4 @@
+- # NOTE: make sure that any changes in this template are reflected in app/views/admin/products_v3/product_preview.turbo_stream.haml
 %ul
   %active-selector{ "ng-repeat": "selector in allSelectors", "ng-show": "ifDefined(selector.fits, true)" }
     %span{"ng-bind" => "::selector.object.name"}
diff --git a/app/assets/javascripts/templates/product_modal.html.haml b/app/assets/javascripts/templates/product_modal.html.haml
@@ -1,3 +1,4 @@
+- # NOTE: make sure that any changes in this template are reflected in app/views/admin/products_v3/product_preview.turbo_stream.haml
 .row
   .columns.small-12.medium-6.large-6.product-header
     %h3{"ng-bind" => "::product.name"}

diff --git a/app/components/admin_tooltip_component.rb b/app/components/admin_tooltip_component.rb
@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+class AdminTooltipComponent < ViewComponent::Base
+  def initialize(text:, link_text:, placement: "top", link: "", link_class: "")
+    @text = text
+    @link_text = link_text
+    @placement = placement
+    @link = link
+    @link_class = link_class
+  end
+end
diff --git a/app/components/admin_tooltip_component/admin_tooltip_component.html.haml b/app/components/admin_tooltip_component/admin_tooltip_component.html.haml
@@ -0,0 +1,8 @@
+%div{"data-controller": "tooltip", "data-tooltip-placement-value": @placement }
+  %a{"data-tooltip-target": "element", href: @link, class: @link_class}
+    = @link_text 
+  .tooltip-container
+    .tooltip{"data-tooltip-target": "tooltip"}
+      = sanitize @text
+      .arrow{"data-tooltip-target": "arrow"}
+
diff --git a/app/components/modal_component.rb b/app/components/modal_component.rb
@@ -1,11 +1,15 @@
 # frozen_string_literal: true
 
 class ModalComponent < ViewComponent::Base
-  def initialize(id:, close_button: true, instant: false, modal_class: :small)
+  def initialize(id:, close_button: true, instant: false, modal_class: :small, **options)
     @id = id
     @close_button = close_button
     @instant = instant
     @modal_class = modal_class
+    @options = options
+    @data_controller = "modal #{@options.delete(:'data-controller')}".squish
+    @data_action =
+      "keyup@document->modal#closeIfEscapeKey #{@options.delete(:'data-action')}".squish
   end
 
   private

diff --git a/app/components/modal_component/modal_component.html.haml b/app/components/modal_component/modal_component.html.haml
@@ -1,4 +1,4 @@
-%div{ id: @id, "data-controller": "modal", "data-action": "keyup@document->modal#closeIfEscapeKey", "data-modal-instant-value": @instant }
+%div{ id: @id, "data-controller": @data_controller, "data-action": @data_action, "data-modal-instant-value": @instant, **@options }
   .reveal-modal-bg.fade{ "data-modal-target": "background", "data-action": "click->modal#close" }
   .reveal-modal.fade.modal-component{ "data-modal-target": "modal", class: @modal_class }
     = content

diff --git a/app/components/vertical_ellipsis_menu/component_controller.js b/app/components/vertical_ellipsis_menu/component_controller.js
@@ -8,6 +8,10 @@ export default class extends Controller {
     window.addEventListener("click", this.#hideIfClickedOutside);
   }
 
+  disconnect() {
+    window.removeEventListener("click", this.#hideIfClickedOutside);
+  }
+
   toggle() {
     this.contentTarget.classList.toggle("show");
   }

diff --git a/app/controllers/admin/product_preview_controller.rb b/app/controllers/admin/product_preview_controller.rb
@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+module Admin
+  class ProductPreviewController < Spree::Admin::BaseController
+    def show
+      @product = Spree::Product.find(params[:id])
+      authorize! :show, @product
+
+      respond_with do |format|
+        format.turbo_stream {
+          render "admin/products_v3/product_preview", status: :ok
+        }
+      end
+    end
+
+    private
+
+    def model_class
+      Spree::Product
+    end
+  end
+end
diff --git a/app/models/spree/ability.rb b/app/models/spree/ability.rb
@@ -29,7 +29,6 @@ def initialize(user)
         can :update, Order do |order, token|
           order.user == user || (order.token && token == order.token)
         end
-        can [:index, :read], Product
         can [:index, :read], ProductProperty
         can [:index, :read], Property
         can :create, Spree::User

diff --git a/app/views/admin/products_v3/_product_row.html.haml b/app/views/admin/products_v3/_product_row.html.haml
@@ -40,3 +40,4 @@
         "data-modal-link-target-value": "product-delete-modal", "class": "delete",
         "data-modal-link-modal-dataset-value": {'data-delete-path': admin_product_destroy_path(product)}.to_json }
       = t('admin.products_page.actions.delete')
+    = link_to t('admin.products_page.actions.preview'), admin_product_preview_path(product), {"data-turbo-stream": "" } 
diff --git a/app/views/admin/products_v3/index.html.haml b/app/views/admin/products_v3/index.html.haml
@@ -20,3 +20,4 @@
     = render partial: 'delete_modal', locals: { object_type: }
   #modal-component
   #edit_image_modal
+  #product-preview-modal-container
diff --git a/app/views/admin/products_v3/product_preview.turbo_stream.haml b/app/views/admin/products_v3/product_preview.turbo_stream.haml
@@ -0,0 +1,119 @@
+= turbo_stream.update "product-preview-modal-container" do
+  = render ModalComponent.new(id: "product-preview-modal", instant: true, modal_class: "big") do
+    #product-preview{ "data-controller": "tabs" }
+      %h1
+        = t("admin.products_page.product_preview.product_preview")
+      %dl.admin-tabs
+        %dd
+          %a{ data: { "tabs-target": "tab", "action": "tabs#select" } }
+            = t("admin.products_page.product_preview.shop_tab")
+        %dd
+          %a{ data: { "tabs-target": "tab", "action": "tabs#select" } }
+            = t("admin.products_page.product_preview.product_details_tab")
+      .tabs-content
+        .content.active
+          %div{ data: { "tabs-target": "content" } }
+            .product-thumb
+              %a
+                - if @product.group_buy
+                  %span.product-thumb__bulk-label
+                    = t(".bulk")
+                = image_tag @product.image&.url(:small) || Spree::Image.default_image_url(:small)
+
+            .summary
+              .summary-header
+                %h3
+                  %a
+                    %span
+                      = @product.name
+                - if @product.description
+                  .product-description{ "data-controller": "add-blank-to-link" }
+                    - # description is sanitized in Spree::Product#description method
+                    = @product.description.html_safe
+
+                - if @product.variants.first.supplier.visible
+                  %div
+                    .product-producer
+                      = t :products_from
+                      %span
+                        %a 
+                          = @product.variants.first.supplier.name
+                .product-properties.filter-shopfront.property-selectors
+                  .filter-shopfront.property-selectors.inline-block
+                    %ul
+                      - @product.properties_including_inherited.each do |property|
+                        %li
+                          - if property[:value].present?
+                            = render AdminTooltipComponent.new(text: property[:value], link_text: property[:name], placement: "bottom")
+                          - else
+                            %a
+                              %span
+                                = property[:name] 
+            .shop-variants
+              - @product.variants.sort { |v1, v2| v1.name_to_display <=> v2.name_to_display }.sort { |v1, v2| v1.unit_value <=> v2.unit_value }.each do |variant|
+                .variants.row
+                  .small-3.columns.variant-name
+                    - if variant.display_name.present?
+                      .inline
+                        = variant.display_name
+                    .variant-unit
+                      = variant.unit_to_display
+                  .small-4.medium-3.columns.variant-price
+                    = number_to_currency(variant.price)
+                    .unit-price.variant-unit-price
+                      = render AdminTooltipComponent.new(text: t("js.shopfront.unit_price_tooltip"), link_text: "", placement: "top", link_class: "question-mark-icon")
+                      - # TODO use an helper
+                      - unit_price = UnitPrice.new(variant)
+                      - price_per_unit = variant.price / (unit_price.denominator || 1)
+                      = "#{number_to_currency(price_per_unit)}&nbsp;/&nbsp;#{unit_price.unit}".html_safe
+
+
+                  .medium-3.columns.total-price
+                    %span
+                      = number_to_currency(0.00) 
+                  .small-5.medium-3.large-3.columns.variant-quantity-column.text-right
+                    .variant-quantity-inputs
+                      %button.add-variant
+                        = t("js.shopfront.variant.add_to_cart")
+
+                    - # TODO can't check the shop preferrence here, display by default ?
+                    - if !variant.on_demand && variant.on_hand <= 3
+                      .variant-remaining-stock
+                        = t("js.shopfront.variant.remaining_in_stock", quantity: variant.on_hand)
+
+          %div{ data: { "tabs-target": "content" } }
+            .row
+              .columns.small-12.medium-6.large-6.product-header
+                %h3
+                  = @product.name
+                %span
+                  %em 
+                    = t("products_from")
+                  %span
+                    = @product.variants.first.supplier.name
+
+                %br
+
+                .filter-shopfront.property-selectors.inline-block
+                  %ul
+                    - @product.properties_including_inherited.each do |property|
+                      %li
+                        - if property[:value].present?
+                          = render AdminTooltipComponent.new(text: property[:value], link_text: property[:name], placement: "bottom")
+                        - else
+                          %a
+                            %span
+                              = property[:name] 
+
+
+                - if @product.description
+                  .product-description{ 'data-controller': "add-blank-to-link" }
+                    %p.text-small
+                      - # description is sanitized in Spree::Product#description method
+                      = @product.description.html_safe
+
+              .columns.small-12.medium-6.large-6.product-img
+                - if @product.image
+                  %img{ src: @product.image.url(:large) }
+                -else
+                  %img.placeholder{ src: Spree::Image.default_image_url(:large) }
diff --git a/app/views/admin/shared/_tooltip.html.haml b/app/views/admin/shared/_tooltip.html.haml
diff --git a/app/views/admin/shared/_whats_this_tooltip.html.haml b/app/views/admin/shared/_whats_this_tooltip.html.haml
@@ -1 +1 @@
-= render partial: 'admin/shared/tooltip', locals: {link_class: "" ,link: nil, link_text: t('admin.whats_this'),  tooltip_text: tooltip_text}
+= render AdminTooltipComponent.new(text: tooltip_text, link_text: t('admin.whats_this'), link: nil)
diff --git a/app/views/shop/products/_form.html.haml b/app/views/shop/products/_form.html.haml
@@ -1,3 +1,4 @@
+- # NOTE: make sure that any changes in this template are reflected in app/views/admin/products_v3/product_preview.turbo_stream.haml
 = cache_with_locale do
   %form{action: main_app.cart_path}
     %products{"ng-init" => "refreshStaleData()", "ng-show" => "order_cycle.order_cycle_id != null", "ng-cloak" => true }

diff --git a/app/views/shop/products/_shop_variant.html.haml b/app/views/shop/products/_shop_variant.html.haml
@@ -1,3 +1,4 @@
+- # NOTE: make sure that any changes in this template are reflected in app/views/admin/products_v3/product_preview.turbo_stream.haml
 = cache_with_locale do
   .small-3.columns.variant-name
     .inline{"ng-if" => "::variant.display_name"} {{ ::variant.display_name }}

diff --git a/app/views/shop/products/_shop_variant_no_group_buy.html.haml b/app/views/shop/products/_shop_variant_no_group_buy.html.haml
@@ -1,3 +1,4 @@
+- # NOTE: make sure that any changes in this template are reflected in app/views/admin/products_v3/product_preview.turbo_stream.haml
 = cache_with_locale do
   .small-5.medium-3.large-3.columns.variant-quantity-column.text-right{"ng-if" => "::!variant.product.group_buy"}
 

diff --git a/app/views/shop/products/_shop_variant_with_group_buy.html.haml b/app/views/shop/products/_shop_variant_with_group_buy.html.haml
@@ -1,3 +1,4 @@
+- # NOTE: make sure that any changes in this template are reflected in app/views/admin/products_v3/product_preview.turbo_stream.haml
 = cache_with_locale do
   .small-5.medium-3.large-3.columns.variant-quantity-column.text-right{"ng-if" => "::variant.product.group_buy"}
 

diff --git a/app/views/shop/products/_summary.html.haml b/app/views/shop/products/_summary.html.haml
@@ -1,3 +1,4 @@
+- # NOTE: make sure that any changes in this template are reflected in app/views/admin/products_v3/product_preview.turbo_stream.haml
 = cache_with_locale do
   .product-thumb
     %a{"ng-click" => "triggerProductModal()"}

diff --git a/app/views/spree/admin/orders/_table_row.html.haml b/app/views/spree/admin/orders/_table_row.html.haml
@@ -45,7 +45,7 @@
     %div.row-loading-icons
       - if local_assigns[:success]
         %i.success.icon-ok-sign{"data-controller": "ephemeral"}
-    = render partial: 'admin/shared/tooltip', locals: {link_class: "icon_link with-tip icon-edit no-text" ,link: edit_admin_order_path(order), link_text: "",  tooltip_text: t('spree.admin.orders.index.edit')}
+    = render AdminTooltipComponent.new(text: t('spree.admin.orders.index.edit'), link_text: "", link: edit_admin_order_path(order), link_class: "icon_link with-tip icon-edit no-text")
     - if order.ready_to_ship?
       %form
         = render ShipOrderComponent.new(order: order)

diff --git a/app/views/spree/admin/products/edit.html.haml b/app/views/spree/admin/products/edit.html.haml
@@ -11,9 +11,13 @@
 = render :partial => 'spree/shared/error_messages', :locals => { :target => @product }
 
 = form_for [:admin, @product], :url => admin_product_path(@product, @url_filters), :method => :put, :html => { :multipart => true } do |f|
-  %fieldset.no-border-top{'ng-app' => 'admin.products'}
+  %fieldset.no-border-top{'ng-app': 'admin.products', 'data-turbo': true, 'data-controller': "product-preview"}
     = render :partial => 'form', :locals => { :f => f }
     .form-buttons.filter-actions.actions
+      = link_to t("admin.products_page.actions.preview"), Rails.application.routes.url_helpers.admin_product_preview_path(@product), {"data-turbo-stream": "" , class: "button secondary"} 
+
       = button t(:update), 'icon-refresh'
 
       = button_link_to t(:cancel), products_return_to_url(@url_filters), icon: 'icon-remove'
+
+    #product-preview-modal-container
diff --git a/app/webpacker/css/admin_v3/all.scss b/app/webpacker/css/admin_v3/all.scss
@@ -132,3 +132,5 @@
 @import "app/webpacker/css/admin/trix.scss";
 
 @import "terms_of_service_banner"; // admin_v3
+
+@import "pages/product_preview"; // admin_v3
diff --git a/app/webpacker/css/admin_v3/components/navigation.scss b/app/webpacker/css/admin_v3/components/navigation.scss
@@ -1,11 +1,60 @@
 // Navigation
 //---------------------------------------------------
+
+@mixin menu-display {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+@mixin menu-link {
+  a {
+    display: inline-block;
+    padding: 16px 20px;
+    color: $color-9 !important;
+    text-align: center;
+    position: relative;
+    font-size: 14px;
+    font-weight: 600;
+
+    &:hover {
+      color: $red !important;
+
+      &:after {
+        content: "";
+        position: absolute;
+        bottom: 0;
+        left: 20px;
+        right: 20px;
+        height: 3px;
+        background: $red;
+      }
+    }
+
+    &.active {
+      @extend :hover;
+    }
+  }
+}
+
 .inline-menu {
   margin: 0;
   -webkit-margin-before: 0;
   -webkit-padding-start: 0;
 }
 
+// tabs
+/// use the same styling as #admin-menu via menu-display and menu-link mixins
+dl.admin-tabs {
+  box-shadow: $box-shadow;
+  @include menu-display;
+
+  dd {
+    width: auto;
+    padding: 0;
+    @include menu-link;
+  }
+}
+
 nav.menu {
   ul {
     list-style: none;
@@ -95,33 +144,10 @@ nav.menu {
   }
 
   ul {
-    display: flex;
-    flex-wrap: wrap;
+    @include menu-display;
 
     li {
-      a {
-        display: inline-block;
-        padding: 16px 20px;
-        color: $color-9 !important;
-        text-align: center;
-        position: relative;
-        font-size: 14px;
-        font-weight: 600;
-
-        &:hover {
-          color: $red !important;
-
-          &:after {
-            content: "";
-            position: absolute;
-            bottom: 0;
-            left: 20px;
-            right: 20px;
-            height: 3px;
-            background: $red;
-          }
-        }
-      }
+      @include menu-link;
 
       &.selected a {
         @extend a, :hover;