[Grid view] Display product as a grid

app/assets/javascripts/darkswarm/controllers/order_cycle_controller.js.coffee

@@ -25,7 +25,7 @@ angular.module('Darkswarm').controller "OrderCycleChangeCtrl", ($scope, $rootSco
     Cart.reloadFinalisedLineItems()
     ChangeableOrdersAlert.reload()
     $rootScope.$broadcast 'orderCycleSelected'
-    event = new CustomEvent('orderCycleSelected')
+    event = new CustomEvent('orderCycleSelected', detail: { orderCycleId: $scope.order_cycle.order_cycle_id })
     window.dispatchEvent(event)
 
   $scope.closesInLessThan3Months = () ->

app/assets/javascripts/darkswarm/services/products.js.coffee

@@ -1,4 +1,4 @@
-angular.module('Darkswarm').factory 'Products', (OrderCycleResource, OrderCycle, Shopfront, currentHub, Dereferencer, Taxons, Properties, Cart, Variants) ->
+angular.module('Darkswarm').factory 'Products', (OrderCycleResource, OrderCycle, Shopfront, currentHub, Dereferencer, Taxons, Properties, Cart, Variants, productGridViewFeature) ->
   new class Products
     constructor: ->
       @update()
@@ -8,6 +8,10 @@ angular.module('Darkswarm').factory 'Products', (OrderCycleResource, OrderCycle,
     loading: true
 
     update: (params = {}, load_more = false) =>
+      if productGridViewFeature["enabled"] is true
+        console.warn "Products.update disabled..."
+        return
+
       @loading = true
       order_cycle_id = OrderCycle.order_cycle.order_cycle_id
 

app/controllers/enterprises_controller.rb

@@ -21,6 +21,8 @@ class EnterprisesController < BaseController
   def shop
     return redirect_to main_app.cart_path unless enough_stock?
 
+    @current_user = spree_current_user
+
     set_noindex_meta_tag
 
     @enterprise = current_distributor

app/controllers/products_controller.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+class ProductsController < BaseController
+  def index
+    @order_cycle_id = params[:order_cycle_id]
+  end
+end

app/helpers/injection_helper.rb

@@ -137,6 +137,16 @@ def inject_rails_flash
     inject_json "railsFlash", OpenStruct.new(flash.to_hash), Api::RailsFlashSerializer
   end
 
+  def inject_feature_flag
+    name = "productGridViewFeature"
+    json = if spree_current_user
+             { enabled: feature?(:product_grid_view, spree_current_user) }.to_json
+           else
+             { enabled: false }.to_json
+           end
+    render partial: "json/injection_ams", locals: { name:, json: }
+  end
+
   def inject_json_array(name, data, serializer, opts = {})
     opts = { each_serializer: serializer }.merge(opts)
     serializer = ActiveModel::ArraySerializer

app/views/layouts/darkswarm.html.haml

@@ -53,6 +53,7 @@
     = inject_rails_flash
     = inject_current_order
     = inject_currency_config
+    = inject_feature_flag
     = yield :injection_data
 
 

app/views/products/index.html.haml

@@ -0,0 +1,3 @@
+= turbo_frame_tag "shop-products" do
+  TODO Render products grid for order cycle 
+  = @order_cycle_id

app/views/shop/products/_form.html.haml

@@ -1,5 +1,5 @@
 - # 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
+= cache_with_locale(current_order_cycle&.id) do
   %form{action: main_app.cart_path}
     %products{"ng-init" => "refreshStaleData()", "ng-show" => "order_cycle.order_cycle_id != null", "ng-cloak" => true }
 
@@ -11,19 +11,34 @@
             .medium-12.large-9.columns.full
               = render partial: "shop/products/search_feedback"
 
-              .pad-top{ "infinite-scroll" => "loadMore()", "infinite-scroll-distance" => "1", "infinite-scroll-disabled" => 'Products.loading', "infinite-scroll-immediate-check": "false" }
-                %product.animate-repeat{"ng-controller" => "ProductNodeCtrl", "ng-repeat" => "product in Products.products track by product.id", "id" => "product-{{ product.id }}"}
-                  = render "shop/products/summary"
-                  .shop-variants
-                    .variants.row{"ng-controller": "ShopVariantCtrl", variant: 'variant', "ng-repeat" => "variant in product.variants | orderBy: ['name_to_display','unit_value'] track by variant.id", "id" => "variant-{{ variant.id }}", "ng-class" => "{'out-of-stock': !variant.on_demand && variant.on_hand == 0}"}
-                      = render "shop/products/shop_variant"
-                %product{"ng-show" => "Products.loading"}
-                  .summary
-                    .small-12.columns.text-center
-                      = t :products_loading
-                  .row.full
-                    .small-12.columns.text-center
-                      = render partial: "components/spinner"
+              - if feature?(:product_grid_view, @current_user)
+                - if current_order_cycle.present?
+                  = turbo_frame_tag("shop-products", src: order_cycle_products_path(current_order_cycle.id), "data-controller": "product-grid-view", "data-action": "orderCycleSelected@window->product-grid-view#updateProducts") do
+                    %product
+                      .summary
+                        .small-12.columns.text-center
+                          = t :products_loading
+                      .row.full
+                        .small-12.columns.text-center
+                          = render partial: "components/spinner"
+
+                - else
+                  = turbo_frame_tag("shop-products", "data-controller": "product-grid-view", "data-action": "orderCycleSelected@window->product-grid-view#updateProducts") do
+                     
+              - else
+                .pad-top{ "infinite-scroll" => "loadMore()", "infinite-scroll-distance" => "1", "infinite-scroll-disabled" => 'Products.loading', "infinite-scroll-immediate-check": "false" }
+                  %product.animate-repeat{"ng-controller" => "ProductNodeCtrl", "ng-repeat" => "product in Products.products track by product.id", "id" => "product-{{ product.id }}"}
+                    = render "shop/products/summary"
+                    .shop-variants
+                      .variants.row{"ng-controller": "ShopVariantCtrl", variant: 'variant', "ng-repeat" => "variant in product.variants | orderBy: ['name_to_display','unit_value'] track by variant.id", "id" => "variant-{{ variant.id }}", "ng-class" => "{'out-of-stock': !variant.on_demand && variant.on_hand == 0}"}
+                        = render "shop/products/shop_variant"
+                  %product{"ng-show" => "Products.loading"}
+                    .summary
+                      .small-12.columns.text-center
+                        = t :products_loading
+                    .row.full
+                      .small-12.columns.text-center
+                        = render partial: "components/spinner"
 
             .hide-for-medium-down.large-1.columns
               -# Space between products and filters

app/webpacker/controllers/product_grid_view_controller.js

@@ -0,0 +1,9 @@
+import { Controller } from "stimulus";
+
+export default class extends Controller {
+  updateProducts(ev) {
+    const orderCycleId = ev.detail.orderCycleId;
+    // Updating the turbo-frame source will reload the frame
+    this.element.src = `/order_cycles/${orderCycleId}/products`;
+  }
+}

config/routes.rb

@@ -63,6 +63,10 @@
     end
   end
 
+  resources :order_cycles, only: [] do
+    resources :products, only: [:index]
+  end
+
   namespace :stripe do
     resources :callbacks, only: [:index]
     resources :webhooks, only: [:create]

lib/open_food_network/feature_toggle.rb

@@ -73,6 +73,9 @@ def self.conditional_features
       "mo-dev" => <<~DESC,
         Show DFC Permissions interface to share data with Market.Organic.
       DESC
+      "product_grid_view" => <<~DESC,
+        Display shop products as a grid.
+      DESC
     }.merge(conditional_features).freeze;
 
     # Features you would like to be enabled to start with.

spec/helpers/injection_helper_spec.rb

@@ -99,4 +99,35 @@
     expect(injected_cards).to match "1234"
     expect(injected_cards).not_to match "4321"
   end
+
+  describe "#inject_feature_flag" do
+    subject(:feature_flag) { helper.inject_feature_flag }
+
+    let(:user) { create(:user) }
+
+    it "injects the produt grid feature flag" do
+      allow(helper).to receive(:spree_current_user).and_return user
+
+      expect(feature_flag).to match "productGridViewFeature"
+      expect(feature_flag).to match '"enabled":false'
+    end
+
+    context "with no user" do
+      it "injects a disabled product grid feature flag" do
+        allow(helper).to receive(:spree_current_user).and_return nil
+
+        expect(feature_flag).to match "productGridViewFeature"
+        expect(feature_flag).to match '"enabled":false'
+      end
+    end
+
+    context "with product grid feature enabled", feature: :product_grid_view do
+      it "injects an enabled product grid feature flag" do
+        allow(helper).to receive(:spree_current_user).and_return user
+
+        expect(feature_flag).to match "productGridViewFeature"
+        expect(feature_flag).to match '"enabled":true'
+      end
+    end
+  end
 end