Update all locales with the latest Transifex translations

fix payment methods loading on multi-distributor order cycle checkout page

.github/ISSUE_TEMPLATE/release.md

@@ -1,7 +1,7 @@
 ---
 name: Release task
 about: Track the process of a new release
-title: 'Release v'
+title: Release v
 labels: ''
 assignees: ''
 
@@ -18,7 +18,7 @@ assignees: ''
 
 - [ ] [Find build] of the release commit and copy it below.
 - [ ] Move this issue to Test Ready.
-- [ ] Notify testers.
+- [ ] Notify `@testers` in [#testing].
 - [ ] Test build: <!-- paste build link here, e.g. https://semaphore...builds/1234 -->
 
 ## Finish on Tuesday
@@ -44,5 +44,6 @@ The full process is described at https://github.com/openfoodfoundation/openfoodn
 [Draft new release]: https://github.com/openfoodfoundation/openfoodnetwork/releases/new?tag=v&title=v+Code+Name&body=Congrats%0A%0ADescription%0A%0A%23%23+User+facing+changes+:eyes:%0A%0A%0A%0A%23%23+Technical+changes+:wrench:%0A%0A
 [releases]: https://github.com/openfoodfoundation/openfoodnetwork/releases
 [#instance-managers]: https://app.slack.com/client/T02G54U79/CG7NJ966B
+[#testing]: https://openfoodnetwork.slack.com/app_redirect?channel=C02TZ6X00
 [Find build]: https://semaphoreci.com/openfoodfoundation/openfoodnetwork-2/branches/master
 [#global-community]: https://app.slack.com/client/T02G54U79/C59ADD8F2

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,6 +1,6 @@
 #### What? Why?
 
-Closes # <!-- Insert issue number here. -->
+- Closes # <!-- Insert issue number here. -->
 
 <!-- Explain why this change is needed and the solution you propose.
      Provide context for others to understand it. -->

.github/workflows/build.yml

@@ -3,12 +3,12 @@ name: Build
 on:
   workflow_dispatch:
   push:
-  pull_request:
     branches-ignore:    
-      - 'dependabot/*'
+      - 'dependabot/**'
+  pull_request:
 
 env:
-  DISABLE_KNAPSACK: true
+  DISABLE_KNAPSACK_PRO: false
   TIMEZONE: UTC
   COVERAGE: true
   RAILS_ENV: test
@@ -17,7 +17,7 @@ permissions:
   contents: read
 
 jobs:
-  rspec:
+  knapsack_rspec_controllers:
     runs-on: ubuntu-20.04
     services:
       postgres:
@@ -33,19 +33,15 @@ jobs:
           POSTGRES_USER: ofn
           POSTGRES_PASSWORD: f00d
     strategy:
-      matrix:
-        specs:
-          - "spec/controllers"
-          - "spec/models"
-          - "spec/lib"
-          - "spec/migrations"
-          - "spec/serializers"
-          - "spec/system/admin/[a-o0-9]*"
-          - "spec/system/admin/[p-z]*"
-          - "spec/system/consumer/[a-o0-9]*"
-          - "spec/system/consumer/[p-z]*"
-          - "engines/*/spec"
       fail-fast: false
+      matrix:
+        # [n] - where the n is a number of parallel jobs you want to run your tests on.
+        # Use a higher number if you have slow tests to split them between more parallel jobs.
+        # Remember to update the value of the `ci_node_index` below to (0..n-1).
+        ci_node_total: [8]
+        # Indexes for parallel jobs (starting from zero).
+        # E.g. use [0, 1] for 2 parallel jobs, [0, 1, 2] for 3 parallel jobs, etc.
+        ci_node_index: [0, 1, 2, 3, 4, 5, 6, 7]
     steps:
       - uses: actions/checkout@v3
 
@@ -72,7 +68,161 @@ jobs:
           bundle exec rake db:schema:load
 
       - name: Run tests
-        run: bundle exec rspec --profile -- ${{ matrix.specs }}
+
+        env:
+          KNAPSACK_PRO_TEST_SUITE_TOKEN_RSPEC: 864ef557d85ea8e603e086c0387d5154
+          KNAPSACK_PRO_CI_NODE_TOTAL: ${{ matrix.ci_node_total }}
+          KNAPSACK_PRO_CI_NODE_INDEX: ${{ matrix.ci_node_index }}
+          KNAPSACK_PRO_LOG_LEVEL: info
+          # if you use Knapsack Pro Queue Mode you must set below env variable
+          # to be able to retry CI build and run previously recorded tests
+          # https://github.com/KnapsackPro/knapsack_pro-ruby#knapsack_pro_fixed_queue_split-remember-queue-split-on-retry-ci-node
+          # KNAPSACK_PRO_FIXED_QUEUE_SPLIT: false
+          # RSpec split test files by test examples feature - it's optional
+          # https://knapsackpro.com/faq/question/how-to-split-slow-rspec-test-files-by-test-examples-by-individual-it
+          #KNAPSACK_PRO_RSPEC_SPLIT_BY_TEST_EXAMPLES: true
+          KNAPSACK_PRO_TEST_FILE_PATTERN: "{spec/controllers/**/*_spec.rb}" 
+        
+        run: |
+          bundle exec rake knapsack_pro:rspec
+
+  knapsack_rspec_models:
+    runs-on: ubuntu-20.04
+    services:
+      postgres:
+        image: postgres:10
+        ports: ["5432:5432"]
+        options: >-
+          --health-cmd pg_isready
+          --health-interval 10s
+          --health-timeout 5s
+          --health-retries 5
+        env:
+          POSTGRES_DB: open_food_network_test
+          POSTGRES_USER: ofn
+          POSTGRES_PASSWORD: f00d
+    strategy:
+      fail-fast: false
+      matrix:
+        # [n] - where the n is a number of parallel jobs you want to run your tests on.
+        # Use a higher number if you have slow tests to split them between more parallel jobs.
+        # Remember to update the value of the `ci_node_index` below to (0..n-1).
+        ci_node_total: [7]
+        # Indexes for parallel jobs (starting from zero).
+        # E.g. use [0, 1] for 2 parallel jobs, [0, 1, 2] for 3 parallel jobs, etc.
+        ci_node_index: [0, 1, 2, 3, 4, 5, 6]
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Setup redis
+        uses: supercharge/redis-github-action@1.4.0
+        with: 
+          redis-version: 6
+
+      - name: Set up Ruby
+        uses: ruby/setup-ruby@v1
+        with:
+          bundler-cache: true # runs 'bundle install' and caches installed gems automatically
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
+      - name: Install JS dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Set up database
+        run: |
+          bundle exec rake db:create
+          bundle exec rake db:schema:load
+
+      - name: Run tests
+
+        env:
+          KNAPSACK_PRO_TEST_SUITE_TOKEN_RSPEC: 09476e2ce491c12083df62768667c674
+          KNAPSACK_PRO_CI_NODE_TOTAL: ${{ matrix.ci_node_total }}
+          KNAPSACK_PRO_CI_NODE_INDEX: ${{ matrix.ci_node_index }}
+          KNAPSACK_PRO_LOG_LEVEL: info
+          # if you use Knapsack Pro Queue Mode you must set below env variable
+          # to be able to retry CI build and run previously recorded tests
+          # https://github.com/KnapsackPro/knapsack_pro-ruby#knapsack_pro_fixed_queue_split-remember-queue-split-on-retry-ci-node
+          # KNAPSACK_PRO_FIXED_QUEUE_SPLIT: false
+          # RSpec split test files by test examples feature - it's optional
+          # https://knapsackpro.com/faq/question/how-to-split-slow-rspec-test-files-by-test-examples-by-individual-it
+          #KNAPSACK_PRO_RSPEC_SPLIT_BY_TEST_EXAMPLES: true
+          KNAPSACK_PRO_TEST_FILE_PATTERN: "{spec/models/**/*_spec.rb}" 
+        
+        run: |
+          bundle exec rake knapsack_pro:rspec
+
+  knapsack_rspec_system_admin:
+    runs-on: ubuntu-20.04
+    services:
+      postgres:
+        image: postgres:10
+        ports: ["5432:5432"]
+        options: >-
+          --health-cmd pg_isready
+          --health-interval 10s
+          --health-timeout 5s
+          --health-retries 5
+        env:
+          POSTGRES_DB: open_food_network_test
+          POSTGRES_USER: ofn
+          POSTGRES_PASSWORD: f00d
+    strategy:
+      fail-fast: false
+      matrix:
+        # [n] - where the n is a number of parallel jobs you want to run your tests on.
+        # Use a higher number if you have slow tests to split them between more parallel jobs.
+        # Remember to update the value of the `ci_node_index` below to (0..n-1).
+        ci_node_total: [10]
+        # Indexes for parallel jobs (starting from zero).
+        # E.g. use [0, 1] for 2 parallel jobs, [0, 1, 2] for 3 parallel jobs, etc.
+        ci_node_index: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] 
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Setup redis
+        uses: supercharge/redis-github-action@1.4.0
+        with: 
+          redis-version: 6
+
+      - name: Set up Ruby
+        uses: ruby/setup-ruby@v1
+        with:
+          bundler-cache: true # runs 'bundle install' and caches installed gems automatically
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
+      - name: Install JS dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Set up database
+        run: |
+          bundle exec rake db:create
+          bundle exec rake db:schema:load
+
+      - name: Run tests
+
+        env:
+          KNAPSACK_PRO_TEST_SUITE_TOKEN_RSPEC: ff2456e64c9f2aa5157eb0daf711d3c3
+          KNAPSACK_PRO_CI_NODE_TOTAL: ${{ matrix.ci_node_total }}
+          KNAPSACK_PRO_CI_NODE_INDEX: ${{ matrix.ci_node_index }}
+          KNAPSACK_PRO_LOG_LEVEL: info
+          # if you use Knapsack Pro Queue Mode you must set below env variable
+          # to be able to retry CI build and run previously recorded tests
+          # https://github.com/KnapsackPro/knapsack_pro-ruby#knapsack_pro_fixed_queue_split-remember-queue-split-on-retry-ci-node
+          KNAPSACK_PRO_FIXED_QUEUE_SPLIT: true
+          # RSpec split test files by test examples feature - it's optional
+          # https://knapsackpro.com/faq/question/how-to-split-slow-rspec-test-files-by-test-examples-by-individual-it
+          #KNAPSACK_PRO_RSPEC_SPLIT_BY_TEST_EXAMPLES: true
+          KNAPSACK_PRO_TEST_FILE_PATTERN: "{spec/system/admin/**/*_spec.rb}" 
+
+        run: |
+          bundle exec rake knapsack_pro:queue:rspec
 
       - name: Archive failed tests screenshots
         if: failure()
@@ -83,7 +233,233 @@ jobs:
           retention-days: 7
           if-no-files-found: ignore
 
-  test-the-rest:
+  knapsack_rspec_system_consumer:
+    runs-on: ubuntu-20.04
+    services:
+      postgres:
+        image: postgres:10
+        ports: ["5432:5432"]
+        options: >-
+          --health-cmd pg_isready
+          --health-interval 10s
+          --health-timeout 5s
+          --health-retries 5
+        env:
+          POSTGRES_DB: open_food_network_test
+          POSTGRES_USER: ofn
+          POSTGRES_PASSWORD: f00d
+    strategy:
+      fail-fast: false
+      matrix:
+        # [n] - where the n is a number of parallel jobs you want to run your tests on.
+        # Use a higher number if you have slow tests to split them between more parallel jobs.
+        # Remember to update the value of the `ci_node_index` below to (0..n-1).
+        ci_node_total: [10]
+        # Indexes for parallel jobs (starting from zero).
+        # E.g. use [0, 1] for 2 parallel jobs, [0, 1, 2] for 3 parallel jobs, etc.
+        ci_node_index: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] 
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Setup redis
+        uses: supercharge/redis-github-action@1.4.0
+        with: 
+          redis-version: 6
+
+      - name: Set up Ruby
+        uses: ruby/setup-ruby@v1
+        with:
+          bundler-cache: true # runs 'bundle install' and caches installed gems automatically
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
+      - name: Install JS dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Set up database
+        run: |
+          bundle exec rake db:create
+          bundle exec rake db:schema:load
+
+      - name: Run tests
+
+        env:
+          KNAPSACK_PRO_TEST_SUITE_TOKEN_RSPEC: e52bd4390c853e6c5bdfe4d0334586c1
+          KNAPSACK_PRO_CI_NODE_TOTAL: ${{ matrix.ci_node_total }}
+          KNAPSACK_PRO_CI_NODE_INDEX: ${{ matrix.ci_node_index }}
+          KNAPSACK_PRO_LOG_LEVEL: info
+          # if you use Knapsack Pro Queue Mode you must set below env variable
+          # to be able to retry CI build and run previously recorded tests
+          # https://github.com/KnapsackPro/knapsack_pro-ruby#knapsack_pro_fixed_queue_split-remember-queue-split-on-retry-ci-node
+          KNAPSACK_PRO_FIXED_QUEUE_SPLIT: true
+          # RSpec split test files by test examples feature - it's optional
+          # https://knapsackpro.com/faq/question/how-to-split-slow-rspec-test-files-by-test-examples-by-individual-it
+          #KNAPSACK_PRO_RSPEC_SPLIT_BY_TEST_EXAMPLES: true
+          KNAPSACK_PRO_TEST_FILE_PATTERN: "{spec/system/consumer/**/*_spec.rb}" 
+
+        run: |
+          bundle exec rake knapsack_pro:queue:rspec
+
+      - name: Archive failed tests screenshots
+        if: failure()
+        uses: actions/upload-artifact@v3
+        with:
+          name: failed-tests-screenshots
+          path: tmp/capybara/screenshots/*.png
+          retention-days: 7
+          if-no-files-found: ignore
+
+  knapsack_rspec_engines:
+    runs-on: ubuntu-20.04
+    services:
+      postgres:
+        image: postgres:10
+        ports: ["5432:5432"]
+        options: >-
+          --health-cmd pg_isready
+          --health-interval 10s
+          --health-timeout 5s
+          --health-retries 5
+        env:
+          POSTGRES_DB: open_food_network_test
+          POSTGRES_USER: ofn
+          POSTGRES_PASSWORD: f00d
+    strategy:
+      fail-fast: false
+      matrix:
+        # [n] - where the n is a number of parallel jobs you want to run your tests on.
+        # Use a higher number if you have slow tests to split them between more parallel jobs.
+        # Remember to update the value of the `ci_node_index` below to (0..n-1).
+        ci_node_total: [5]
+        # Indexes for parallel jobs (starting from zero).
+        # E.g. use [0, 1] for 2 parallel jobs, [0, 1, 2] for 3 parallel jobs, etc.
+        ci_node_index: [0, 1, 2, 3, 4]
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Setup redis
+        uses: supercharge/redis-github-action@1.4.0
+        with: 
+          redis-version: 6
+
+      - name: Set up Ruby
+        uses: ruby/setup-ruby@v1
+        with:
+          bundler-cache: true # runs 'bundle install' and caches installed gems automatically
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
+      - name: Install JS dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Set up database
+        run: |
+          bundle exec rake db:create
+          bundle exec rake db:schema:load
+
+      - name: Run tests
+
+        env:
+          KNAPSACK_PRO_TEST_SUITE_TOKEN_RSPEC: d6ea7ceb766404ccd016c19aa2c81b1c
+          KNAPSACK_PRO_CI_NODE_TOTAL: ${{ matrix.ci_node_total }}
+          KNAPSACK_PRO_CI_NODE_INDEX: ${{ matrix.ci_node_index }}
+          KNAPSACK_PRO_LOG_LEVEL: info
+          # if you use Knapsack Pro Queue Mode you must set below env variable
+          # to be able to retry CI build and run previously recorded tests
+          # https://github.com/KnapsackPro/knapsack_pro-ruby#knapsack_pro_fixed_queue_split-remember-queue-split-on-retry-ci-node
+          # KNAPSACK_PRO_FIXED_QUEUE_SPLIT: false
+          # RSpec split test files by test examples feature - it's optional
+          # https://knapsackpro.com/faq/question/how-to-split-slow-rspec-test-files-by-test-examples-by-individual-it
+          #KNAPSACK_PRO_RSPEC_SPLIT_BY_TEST_EXAMPLES: true
+          KNAPSACK_PRO_TEST_FILE_PATTERN: "{spec/lib/**/*_spec.rb,spec/migrations/**/*_spec.rb,spec/serializers/**/*_spec.rb,engines/**/*_spec.rb}"
+
+        run: |
+          bundle exec rake knapsack_pro:rspec
+
+      - name: Archive failed tests screenshots
+        if: failure()
+        uses: actions/upload-artifact@v3
+        with:
+          name: failed-tests-screenshots
+          path: tmp/capybara/screenshots/*.png
+          retention-days: 7
+          if-no-files-found: ignore
+
+  knapsack_rspec_test_the_rest:
+    runs-on: ubuntu-20.04
+    services:
+      postgres:
+        image: postgres:10
+        ports: ["5432:5432"]
+        options: >-
+          --health-cmd pg_isready
+          --health-interval 10s
+          --health-timeout 5s
+          --health-retries 5
+        env:
+          POSTGRES_DB: open_food_network_test
+          POSTGRES_USER: ofn
+          POSTGRES_PASSWORD: f00d
+    strategy:
+      fail-fast: false
+      matrix:
+        # [n] - where the n is a number of parallel jobs you want to run your tests on.
+        # Use a higher number if you have slow tests to split them between more parallel jobs.
+        # Remember to update the value of the `ci_node_index` below to (0..n-1).
+        ci_node_total: [5]
+        # Indexes for parallel jobs (starting from zero).
+        # E.g. use [0, 1] for 2 parallel jobs, [0, 1, 2] for 3 parallel jobs, etc.
+        ci_node_index: [0, 1, 2, 3, 4]
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Setup redis
+        uses: supercharge/redis-github-action@1.4.0
+        with: 
+          redis-version: 6
+
+      - name: Set up Ruby
+        uses: ruby/setup-ruby@v1
+        with:
+          bundler-cache: true # runs 'bundle install' and caches installed gems automatically
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
+      - name: Install JS dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Set up database
+        run: |
+          bundle exec rake db:create
+          bundle exec rake db:schema:load
+
+      - name: Run tests
+
+        env:
+          KNAPSACK_PRO_TEST_SUITE_TOKEN_RSPEC: e3b8800198d2d89b70c7edbdd85f8fd8
+          KNAPSACK_PRO_CI_NODE_TOTAL: ${{ matrix.ci_node_total }}
+          KNAPSACK_PRO_CI_NODE_INDEX: ${{ matrix.ci_node_index }}
+          KNAPSACK_PRO_LOG_LEVEL: info
+          # if you use Knapsack Pro Queue Mode you must set below env variable
+          # to be able to retry CI build and run previously recorded tests
+          # https://github.com/KnapsackPro/knapsack_pro-ruby#knapsack_pro_fixed_queue_split-remember-queue-split-on-retry-ci-node
+          # KNAPSACK_PRO_FIXED_QUEUE_SPLIT: false
+          # RSpec split test files by test examples feature - it's optional
+          # https://knapsackpro.com/faq/question/how-to-split-slow-rspec-test-files-by-test-examples-by-individual-it
+          #KNAPSACK_PRO_RSPEC_SPLIT_BY_TEST_EXAMPLES: true
+          KNAPSACK_PRO_TEST_FILE_EXCLUDE_PATTERN: "{engines/**/*_spec.rb,spec/models/**/*_spec.rb,spec/controllers/**/*_spec.rb,spec/serializers/**/*_spec.rb,spec/lib/**/*_spec.rb,spec/migrations/**/*_spec.rb,spec/system/**/*_spec.rb}"
+                                            
+        
+        run: |
+          bundle exec rake knapsack_pro:rspec
+
+  non_knapsack_jest_karma:
     runs-on: ubuntu-20.04
     services:
       postgres:
@@ -122,12 +498,8 @@ jobs:
         run: |
           bundle exec rake db:create
           bundle exec rake db:schema:load
-
       - name: Run JS tests
         run: bundle exec rake karma:run
 
       - name: Run jest tests
         run: yarn jest
-
-      - name: Run all other tests
-        run: bundle exec rake ofn:specs:run:excluding_folders["models,controllers,serializers,features,lib,migrations,system"]

.prettierignore

@@ -1,6 +1,8 @@
 # Basically, ignore everythings expect app/webpacker/controllers/*.js and app/webpacker/packs/*.js
 *.css
 *.scss
+# Except v2
+!/app/webpacker/css/admin/v2/**/*.scss
 *.md
 *.yml
 *.yaml

.rubocop_todo.yml

@@ -440,6 +440,7 @@ Metrics/BlockNesting:
 # Configuration parameters: CountComments, Max, CountAsOne.
 Metrics/ClassLength:
   Exclude:
+    - 'app/components/products_table_component.rb'
     - 'app/controllers/admin/customers_controller.rb'
     - 'app/controllers/admin/enterprises_controller.rb'
     - 'app/controllers/admin/order_cycles_controller.rb'
@@ -681,7 +682,7 @@ Rails/ActiveRecordOverride:
 # This cop supports unsafe autocorrection (--autocorrect-all).
 Rails/ApplicationController:
   Exclude:
-    - 'engines/dfc_provider/app/controllers/dfc_provider/api/base_controller.rb'
+    - 'engines/dfc_provider/app/controllers/dfc_provider/base_controller.rb'
 
 # Offense count: 6
 # This cop supports unsafe autocorrection (--autocorrect-all).

.tx/config

@@ -1,7 +1,7 @@
 [main]
 host = https://www.transifex.com
 
-[open-food-network.enyml]
+[o:open-food-foundation:p:open-food-network:r:enyml]
 file_filter = config/locales/<lang>.yml
 source_lang = en
 type = YML

GETTING_STARTED.md

@@ -68,6 +68,8 @@ To login as the default user, use:
 
     email: ofn@example.com
     password: ofn123
+    
+Seee [Locale and sample data] about loading data.
 
 ### Testing
 
@@ -81,7 +83,7 @@ Then the main application tests can be run with:
 
 The tests of all custom engines can be run with:
 
-    bundle exec rake ofn:specs:engines:rspec
+    bundle exec rspec ./engines
 
 Note: If your OS is not explicitly supported in the setup guides then not all tests may pass. However, you may still be able to develop.
 
@@ -129,3 +131,4 @@ If these commands succeed, you should be able to [continue the setup process](#g
 [rubocop]: https://rubocop.readthedocs.io/en/latest/
 [karma]: https://github.com/openfoodfoundation/openfoodnetwork/wiki/Karma
 [slack-dev]: https://openfoodnetwork.slack.com/messages/C2GQ45KNU
+[Locale and sample data]: https://github.com/openfoodfoundation/openfoodnetwork/wiki/Locale-and-sample-data

Gemfile

@@ -135,6 +135,9 @@ gem 'flipper-active_record'
 gem 'flipper-ui'
 
 gem "view_component"
+gem 'view_component_reflex', '3.1.14.pre9'
+
+gem 'mini_portile2', '~> 2.8'
 
 group :production, :staging do
   gem 'ddtrace'
@@ -150,10 +153,10 @@ group :test, :development do
   gem "factory_bot_rails", '6.2.0', require: false
   gem 'fuubar', '~> 2.5.1'
   gem 'json_spec', '~> 1.1.4'
-  gem 'knapsack'
+  gem 'knapsack_pro'
   gem 'letter_opener', '>= 1.4.1'
   gem 'rspec-rails', ">= 3.5.2"
-  gem 'rspec-retry'
+  gem 'rspec-retry', require: false
   gem 'rswag-specs'
   gem 'shoulda-matchers'
   gem 'timecop'
@@ -164,9 +167,8 @@ group :test do
   gem 'pdf-reader'
   gem 'rails-controller-testing'
   gem 'simplecov', require: false
-  gem 'test-prof'
-  gem 'vcr'
-  gem 'webmock'
+  gem 'vcr', require: false
+  gem 'webmock', require: false
   # See spec/spec_helper.rb for instructions
   # gem 'perftools.rb'
 end

Gemfile.lock

@@ -93,7 +93,7 @@ GEM
       rails-html-sanitizer (~> 1.1, >= 1.2.0)
     active_model_serializers (0.8.4)
       activemodel (>= 3.0)
-    active_storage_validations (1.0.2)
+    active_storage_validations (1.0.3)
       activejob (>= 5.2.0)
       activemodel (>= 5.2.0)
       activestorage (>= 5.2.0)
@@ -158,34 +158,31 @@ GEM
     awesome_nested_set (3.5.0)
       activerecord (>= 4.0.0, < 7.1)
     aws-eventstream (1.2.0)
-    aws-partitions (1.651.0)
-    aws-sdk-core (3.165.1)
+    aws-partitions (1.669.0)
+    aws-sdk-core (3.168.2)
       aws-eventstream (~> 1, >= 1.0.2)
       aws-partitions (~> 1, >= 1.651.0)
       aws-sigv4 (~> 1.5)
       jmespath (~> 1, >= 1.6.1)
-    aws-sdk-kms (1.59.0)
+    aws-sdk-kms (1.60.0)
       aws-sdk-core (~> 3, >= 3.165.0)
       aws-sigv4 (~> 1.1)
-    aws-sdk-s3 (1.117.0)
+    aws-sdk-s3 (1.117.2)
       aws-sdk-core (~> 3, >= 3.165.0)
       aws-sdk-kms (~> 1)
       aws-sigv4 (~> 1.4)
     aws-sigv4 (1.5.2)
       aws-eventstream (~> 1, >= 1.0.2)
-    axlsx_styler (1.1.0)
-      activesupport (>= 3.1)
-      caxlsx (>= 2.0.2)
     bcrypt (3.1.18)
     bigdecimal (3.0.2)
     bindata (2.4.12)
     bindex (0.8.1)
-    bootsnap (1.13.0)
+    bootsnap (1.15.0)
       msgpack (~> 1.2)
-    bugsnag (6.24.2)
+    bugsnag (6.25.0)
       concurrent-ruby (~> 1.0)
     builder (3.2.4)
-    bullet (7.0.3)
+    bullet (7.0.4)
       activesupport (>= 3.0.0)
       uniform_notifier (~> 1.11)
     cable_ready (5.0.0.pre9)
@@ -197,7 +194,7 @@ GEM
       railties (>= 5.2)
       thread-local (>= 1.1.0)
     cancancan (1.15.0)
-    capybara (3.37.1)
+    capybara (3.38.0)
       addressable
       matrix
       mini_mime (>= 0.1.3)
@@ -206,14 +203,13 @@ GEM
       rack-test (>= 0.6.3)
       regexp_parser (>= 1.5, < 3.0)
       xpath (~> 3.2)
-    caxlsx (3.1.1)
+    caxlsx (3.3.0)
       htmlentities (~> 4.3, >= 4.3.4)
       marcel (~> 1.0)
       nokogiri (~> 1.10, >= 1.10.4)
       rubyzip (>= 1.3.0, < 3)
     choice (0.2.0)
     chronic (0.10.2)
-    cliver (0.3.2)
     coderay (1.1.3)
     coffee-rails (5.0.0)
       coffee-script (>= 2.2.0)
@@ -232,9 +228,9 @@ GEM
     crass (1.0.6)
     css_parser (1.11.0)
       addressable
-    cuprite (0.13)
-      capybara (>= 2.1, < 4)
-      ferrum (~> 0.11.0)
+    cuprite (0.14.3)
+      capybara (~> 3.0)
+      ferrum (~> 0.13.0)
     database_cleaner (2.0.1)
       database_cleaner-active_record (~> 2.0.0)
     database_cleaner-active_record (2.0.0)
@@ -245,8 +241,8 @@ GEM
       debase-ruby_core_source (= 0.10.12)
       msgpack
     debase-ruby_core_source (0.10.12)
-    debug (1.6.3)
-      irb (>= 1.3.6)
+    debug (1.7.0)
+      irb (>= 1.5.0)
       reline (>= 0.3.1)
     debugger-linecache (1.2.0)
     devise (4.8.1)
@@ -262,13 +258,12 @@ GEM
     devise-token_authenticatable (1.1.0)
       devise (>= 4.0.0, < 5.0.0)
     diff-lcs (1.5.0)
-    digest (3.1.0)
+    digest (3.1.1)
     docile (1.4.0)
     dotenv (2.8.1)
     dotenv-rails (2.8.1)
       dotenv (= 2.8.1)
       railties (>= 3.2)
-    dry-inflector (0.2.1)
     erubi (1.11.0)
     et-orbi (1.2.7)
       tzinfo
@@ -285,10 +280,10 @@ GEM
     faraday-follow_redirects (0.3.0)
       faraday (>= 1, < 3)
     faraday-net_http (3.0.1)
-    ferrum (0.11)
+    ferrum (0.13)
       addressable (~> 2.5)
-      cliver (~> 0.3)
       concurrent-ruby (~> 1.1)
+      webrick (~> 1.7)
       websocket-driver (>= 0.6, < 0.8)
     ffaker (2.21.0)
     ffi (1.15.5)
@@ -356,16 +351,16 @@ GEM
       activerecord (>= 3.0)
     io-console (0.5.11)
     ipaddress (0.8.3)
-    irb (1.4.2)
+    irb (1.5.1)
       reline (>= 0.3.0)
-    jmespath (1.6.1)
+    jmespath (1.6.2)
     jquery-rails (4.4.0)
       rails-dom-testing (>= 1, < 3)
       railties (>= 4.2.0)
       thor (>= 0.14, < 2.0)
     jquery-ui-rails (4.2.1)
       railties (>= 3.2.16)
-    json (2.6.2)
+    json (2.6.3)
     json-jwt (1.16.0)
       activesupport (>= 4.2)
       aes_key_wrap
@@ -380,7 +375,7 @@ GEM
     jsonapi-serializer (2.2.0)
       activesupport (>= 4.2)
     jwt (2.5.0)
-    knapsack (4.0.0)
+    knapsack_pro (3.6.0)
       rake
     launchy (2.5.0)
       addressable (~> 2.7)
@@ -390,7 +385,7 @@ GEM
     listen (3.7.1)
       rb-fsevent (~> 0.10, >= 0.10.3)
       rb-inotify (~> 0.9, >= 0.9.10)
-    loofah (2.19.0)
+    loofah (2.19.1)
       crass (~> 1.0.2)
       nokogiri (>= 1.5.9)
     mail (2.7.1)
@@ -414,7 +409,7 @@ GEM
       money (~> 6.12)
     money (6.16.0)
       i18n (>= 0.6.4, <= 2)
-    msgpack (1.5.4)
+    msgpack (1.6.0)
     multi_json (1.15.0)
     multi_xml (0.6.0)
     net-protocol (0.1.3)
@@ -422,7 +417,7 @@ GEM
     net-smtp (0.3.2)
       net-protocol
     nio4r (2.5.8)
-    nokogiri (1.13.9)
+    nokogiri (1.13.10)
       mini_portile2 (~> 2.8.0)
       racc (~> 1.4)
     oauth2 (1.4.11)
@@ -456,9 +451,9 @@ GEM
       activerecord (>= 5.2)
       request_store (~> 1.1)
     parallel (1.22.1)
-    paranoia (2.6.0)
+    paranoia (2.6.1)
       activerecord (>= 5.1, < 7.1)
-    parser (3.1.2.1)
+    parser (3.1.3.0)
       ast (~> 2.4.1)
     paypal-sdk-core (0.3.4)
       multi_json (~> 1.0)
@@ -472,7 +467,7 @@ GEM
       ruby-rc4
       ttfunk
     pg (1.2.3)
-    power_assert (2.0.1)
+    power_assert (2.0.2)
     pry (0.13.1)
       coderay (~> 1.1)
       method_source (~> 1.0)
@@ -480,7 +475,7 @@ GEM
     puma (5.6.5)
       nio4r (~> 2.0)
     raabro (1.4.0)
-    racc (1.6.0)
+    racc (1.6.1)
     rack (2.2.4)
     rack-mini-profiler (2.3.4)
       rack (>= 1.2.0)
@@ -527,9 +522,9 @@ GEM
       activesupport (>= 4.2)
       choice (~> 0.2.0)
       ruby-graphviz (~> 1.2)
-    rails-html-sanitizer (1.4.3)
-      loofah (~> 2.3)
-    rails-i18n (7.0.5)
+    rails-html-sanitizer (1.4.4)
+      loofah (~> 2.19, >= 2.19.1)
+    rails-i18n (7.0.6)
       i18n (>= 0.7, < 2)
       railties (>= 6.0.0, < 8)
     rails_safe_tasks (1.0.0)
@@ -550,7 +545,7 @@ GEM
       ffi (~> 1.0)
     redcarpet (3.5.1)
     redis (4.8.0)
-    regexp_parser (2.6.0)
+    regexp_parser (2.6.1)
     reline (0.3.1)
       io-console (~> 0.5)
     request_store (1.5.0)
@@ -565,9 +560,8 @@ GEM
     roadie-rails (3.0.0)
       railties (>= 5.1, < 7.1)
       roadie (~> 5.0)
-    rodf (1.1.1)
+    rodf (1.2.0)
       builder (>= 3.0)
-      dry-inflector (~> 0.1)
       rubyzip (>= 1.0)
     roo (2.9.0)
       nokogiri (~> 1)
@@ -595,17 +589,17 @@ GEM
     rspec-retry (0.6.2)
       rspec-core (> 3.3)
     rspec-support (3.10.3)
-    rswag-api (2.7.0)
+    rswag-api (2.8.0)
       railties (>= 3.1, < 7.1)
-    rswag-specs (2.7.0)
+    rswag-specs (2.8.0)
       activesupport (>= 3.1, < 7.1)
       json-schema (>= 2.2, < 4.0)
       railties (>= 3.1, < 7.1)
       rspec-core (>= 2.14)
-    rswag-ui (2.7.0)
+    rswag-ui (2.8.0)
       actionpack (>= 3.1, < 7.1)
       railties (>= 3.1, < 7.1)
-    rubocop (1.37.1)
+    rubocop (1.40.0)
       json (~> 2.3)
       parallel (~> 1.10)
       parser (>= 3.1.2.1)
@@ -615,9 +609,9 @@ GEM
       rubocop-ast (>= 1.23.0, < 2.0)
       ruby-progressbar (~> 1.7)
       unicode-display_width (>= 1.4.0, < 3.0)
-    rubocop-ast (1.23.0)
+    rubocop-ast (1.24.0)
       parser (>= 3.1.1.0)
-    rubocop-rails (2.17.1)
+    rubocop-rails (2.17.3)
       activesupport (>= 4.2.0)
       rack (>= 1.1)
       rubocop (>= 1.33.0, < 2.0)
@@ -642,8 +636,8 @@ GEM
     semantic_range (3.0.0)
     shoulda-matchers (5.2.0)
       activesupport (>= 5.2.0)
-    sidekiq (6.5.7)
-      connection_pool (>= 2.2.5)
+    sidekiq (6.5.8)
+      connection_pool (>= 2.2.5, < 3)
       rack (~> 2.0)
       redis (>= 4.5.0, < 5)
     sidekiq-scheduler (4.0.3)
@@ -657,9 +651,8 @@ GEM
       simplecov_json_formatter (~> 0.1)
     simplecov-html (0.12.3)
     simplecov_json_formatter (0.1.3)
-    spreadsheet_architect (4.2.0)
-      axlsx_styler (>= 1.0.0, < 2)
-      caxlsx (>= 2.0.2, < 4)
+    spreadsheet_architect (5.0.0)
+      caxlsx (>= 3.3.0, < 4)
       rodf (>= 1.0.0, < 2)
     spring (4.1.0)
     spring-commands-rspec (1.0.4)
@@ -689,19 +682,18 @@ GEM
       railties (>= 5.2)
       redis
     stringex (2.8.5)
-    stripe (7.1.0)
+    stripe (8.0.0)
     swd (1.3.0)
       activesupport (>= 3)
       attr_required (>= 0.0.5)
       httpclient (>= 2.4)
     temple (0.8.2)
-    test-prof (1.0.10)
-    test-unit (3.5.5)
+    test-unit (3.5.7)
       power_assert
     thor (1.2.1)
     thread-local (1.1.0)
     tilt (2.0.11)
-    timecop (0.9.5)
+    timecop (0.9.6)
     timeout (0.3.0)
     ttfunk (1.7.0)
     tzinfo (2.0.5)
@@ -718,10 +710,14 @@ GEM
       activemodel (>= 3.0.0)
       public_suffix
     vcr (6.1.0)
-    view_component (2.74.1)
+    view_component (2.79.0)
       activesupport (>= 5.0.0, < 8.0)
       concurrent-ruby (~> 1.0)
       method_source (~> 1.0)
+    view_component_reflex (3.1.14.pre9)
+      rails (>= 5.2, < 8.0)
+      stimulus_reflex (>= 3.5.0.pre2)
+      view_component (>= 2.28.0)
     view_component_storybook (0.11.1)
       view_component (>= 2.36)
     warden (1.2.9)
@@ -743,6 +739,7 @@ GEM
       rack-proxy (>= 0.6.1)
       railties (>= 5.2)
       semantic_range (>= 2.3.0)
+    webrick (1.7.0)
     websocket-driver (0.7.5)
       websocket-extensions (>= 0.1.0)
     websocket-extensions (0.1.5)
@@ -750,11 +747,11 @@ GEM
       chronic (>= 0.6.3)
     wicked_pdf (2.6.3)
       activesupport
-    wkhtmltopdf-binary (0.12.6.5)
+    wkhtmltopdf-binary (0.12.6.6)
     xml-simple (1.1.8)
     xpath (3.2.0)
       nokogiri (~> 1.8)
-    zeitwerk (2.6.1)
+    zeitwerk (2.6.6)
 
 PLATFORMS
   ruby
@@ -824,11 +821,12 @@ DEPENDENCIES
   json_spec (~> 1.1.4)
   jsonapi-serializer
   jwt (~> 2.3)
-  knapsack
+  knapsack_pro
   letter_opener (>= 1.4.1)
   listen
   mime-types
   mimemagic (> 0.3.5)
+  mini_portile2 (~> 2.8)
   mini_racer (= 0.4.0)
   monetize (~> 1.11)
   oauth2 (~> 1.4.7)
@@ -880,12 +878,12 @@ DEPENDENCIES
   stimulus_reflex (= 3.5.0.pre9)
   stringex (~> 2.8.5)
   stripe
-  test-prof
   test-unit (~> 3.5)
   timecop
   valid_email2
   vcr
   view_component
+  view_component_reflex (= 3.1.14.pre9)
   view_component_storybook
   web!
   web-console

README.md

@@ -35,7 +35,13 @@ We also have a [Super Admin Guide][super-admin-guide] to help with configuration
 
 If you'd like to help out with testing, please introduce yourself on the #testing channel on [Slack][slack-invite] and download the [ZenHub browser extension][zenhub] to view the development pipeline. Also, do have a look in our [Welcome New QAs board](https://github.com/orgs/openfoodfoundation/projects/1) for some good first issues, both on manual and automated testing (RSpec/Capybara).
 
-We use [BrowserStack](https://www.browserstack.com/) as a manual testing tool. BrowserStack provides open source projects with unlimited and free of charge accounts. A big thanks to them! 
+We use [BrowserStack](https://www.browserstack.com/) as a manual testing tool. BrowserStack provides open source projects with unlimited and free of charge accounts. A big thanks to them!
+
+
+We use [KnapsackPro](https://knapsackpro.com/) for optimal parallelisation of our automated tests. KnapsackPro offers unlimited plans for non-commercial open source projects, like ours - a big thanks to them!
+
+![image](https://user-images.githubusercontent.com/49817236/201330047-e64147a7-d91c-4c10-bd4d-ca519d8fe945.png)
+
 
 ## Licence
 

Rakefile

@@ -8,6 +8,3 @@ require_relative 'config/application'
 
 Openfoodnetwork::Application.load_tasks
 
-if !ENV['DISABLE_KNAPSACK'] && defined?(Knapsack)
-  Knapsack.load_tasks
-end

app/assets/javascripts/admin/bulk_product_update.js.coffee

@@ -261,7 +261,8 @@ angular.module("ofn.admin").controller "AdminProductEditCtrl", ($scope, $timeout
         product = BulkProducts.find product.id
         variant.unit_value  = parseFloat(match[1].replace(",", "."))
         variant.unit_value  = null if isNaN(variant.unit_value)
-        variant.unit_value *= product.variant_unit_scale if variant.unit_value && product.variant_unit_scale
+        if variant.unit_value && product.variant_unit_scale
+          variant.unit_value = parseFloat(window.bigDecimal.multiply(variant.unit_value, product.variant_unit_scale, 2))
         variant.unit_description = match[3]
 
   $scope.incrementLimit = ->

app/assets/javascripts/admin/line_items/controllers/line_items_controller.js.coffee

@@ -5,6 +5,8 @@ angular.module("admin.lineItems").controller 'LineItemsCtrl', ($scope, $timeout,
   $scope.confirmDelete = true
   $scope.startDate = moment().startOf('day').subtract(7, 'days').format('YYYY-MM-DD')
   $scope.endDate = moment().startOf('day').format('YYYY-MM-DD')
+  $scope.previousDates = { startDate: $scope.startDate, endDate: $scope.endDate }
+  $scope.datesChangedOnCancelEvent = false
   $scope.bulkActions = [ { name: t("admin.orders.bulk_management.actions_delete"), callback: 'deleteLineItems' } ]
   $scope.selectedUnitsProduct = {}
   $scope.selectedUnitsVariant = {}
@@ -26,9 +28,27 @@ angular.module("admin.lineItems").controller 'LineItemsCtrl', ($scope, $timeout,
     $scope.refreshData()
 
   $scope.$watchCollection "[startDate, endDate]", (newValues, oldValues) ->
-    if newValues != oldValues
-      $scope.refreshData()
-      
+    if newValues != oldValues && !$scope.datesChangedOnCancelEvent
+        state = $scope.refreshData()
+        if (state == "cancel")
+          $scope.datesChangedOnCancelEvent = true
+          $scope.cancelDateChange()
+  
+  $scope.cancelDateChange = ->
+    # Reset the date filters to the previous values
+    $scope.startDate = $scope.previousDates.startDate
+    $scope.endDate = $scope.previousDates.endDate
+    # throw a flatpickr:change event to change the date back in the datepicker
+    event = new CustomEvent('flatpickr:change', {
+      detail: { 
+        startDate: $scope.previousDates.startDate,
+        endDate: $scope.previousDates.endDate
+      }
+    })
+    window.dispatchEvent(event)
+    $timeout ->
+      $scope.datesChangedOnCancelEvent = false
+ 
   $scope.refreshData = ->
     unless !$scope.orderCycleFilter? || $scope.orderCycleFilter == ''
       $scope.setOrderCycleDateRange()
@@ -38,6 +58,8 @@ angular.module("admin.lineItems").controller 'LineItemsCtrl', ($scope, $timeout,
 
     return unless moment($scope.formattedStartDate).isValid() and moment($scope.formattedEndDate).isValid()
 
+    return "cancel" unless $scope.confirmRefresh()
+
     $scope.loadOrders()
     $scope.loadLineItems()
 
@@ -45,6 +67,11 @@ angular.module("admin.lineItems").controller 'LineItemsCtrl', ($scope, $timeout,
       $scope.loadAssociatedData()
 
     $scope.dereferenceLoadedData()
+    
+    $timeout ->
+      # update the previous dates with the current ones since loading was successful
+      $scope.previousDates.startDate = $scope.startDate
+      $scope.previousDates.endDate = $scope.endDate
 
   $scope.setOrderCycleDateRange = ->
     start_date = OrderCycles.byID[$scope.orderCycleFilter].orders_open_at

app/assets/javascripts/admin/order_cycles/controllers/order_cycle_basic_controller.js.coffee

@@ -38,3 +38,4 @@ angular.module('admin.orderCycles')
     $scope.removeCoordinatorFee = ($event, index) ->
       $event.preventDefault()
       OrderCycle.removeCoordinatorFee(index)
+      $scope.order_cycle_form.$dirty = true

app/assets/javascripts/admin/products/controllers/units_controller.js.coffee

@@ -36,7 +36,7 @@ angular.module("admin.products")
           $scope.product.master.unit_description = match[3]
       else
         value = $scope.product.master.unit_value
-        value /= $scope.product.variant_unit_scale if $scope.product.master.unit_value && $scope.product.variant_unit_scale
+        value = window.bigDecimal.divide(value, $scope.product.variant_unit_scale, 2) if $scope.product.master.unit_value && $scope.product.variant_unit_scale
         $scope.product.master.unit_value_with_description = value + " " + $scope.product.master.unit_description
 
     $scope.processUnitPrice = ->

app/assets/javascripts/admin/services/bulk_products.js.coffee

@@ -65,7 +65,8 @@ angular.module("ofn.admin").factory "BulkProducts", (ProductResource, dataFetche
     variantUnitValue: (product, variant) ->
       if variant.unit_value?
         if product.variant_unit_scale
-          @divideAsInteger variant.unit_value, product.variant_unit_scale
+          variant_unit_value = @divideAsInteger variant.unit_value, product.variant_unit_scale
+          parseFloat(window.bigDecimal.round(variant_unit_value, 2))
         else
           variant.unit_value
       else

app/components/pagination_component.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+class PaginationComponent < ViewComponentReflex::Component
+  def initialize(pagy:, data:)
+    super
+    @count = pagy.count
+    @page = pagy.page
+    @per_page = pagy.items
+    @pages = pagy.pages
+    @next = pagy.next
+    @prev = pagy.prev
+    @data = data
+    @series = pagy.series
+  end
+end

app/components/pagination_component/pagination_component.html.haml

@@ -0,0 +1,16 @@
+= component_controller do
+  %nav{"aria-label": "pagination"}
+    .pagination
+      .pagination-prev{data: @prev.nil? ? nil : @data, "data-page": @prev, class: "#{'inactive' if @prev.nil?}"}
+        = I18n.t "components.pagination.previous"
+      .pagination-pages
+        - @series.each do |page|
+          - if page == :gap
+            .pagination-gap
+              …
+          - else
+            .pagination-page{data: @data, "data-page": page, class: "#{'active' if page.to_i == @page}"}
+              = page
+      .pagination-next{data: @next.nil? ? nil : @data, "data-page": @next, class: "#{'inactive' if @next.nil?}"}
+        = I18n.t "components.pagination.next"
+

app/components/pagination_component/pagination_component.scss

@@ -0,0 +1,69 @@
+nav {
+  .pagination {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    font-size: 14px;
+
+    .pagination-prev, .pagination-next {
+      cursor: pointer;
+
+      &:after, &:before {
+        font-size: 2em;
+        position: relative;
+        top: 3px;
+      }
+
+      &.inactive {
+        cursor: default;
+        color: $disabled-dark;
+      }
+    }
+
+    .pagination-prev {
+      margin-left: 10px;
+
+      &:before {
+        content: "‹";
+        margin-left: 10px;
+        margin-right: 10px;
+      }
+    }
+
+    .pagination-next {
+      margin-right: 10px;
+
+      &:after {
+        content: "›";
+        margin-left: 10px;
+        margin-right: 10px;
+      }
+    }
+
+
+    .pagination-pages {
+      display: flex;
+      align-items: flex-end;
+
+      .pagination-gap, .pagination-page {
+        padding: 0 0.5rem;
+        margin-left: 10px;
+        margin-right: 10px;
+      }
+
+      .pagination-gap {
+        color: $disabled-dark;
+      }
+
+      .pagination-page {
+        color: $color-4;
+        cursor: pointer;
+        &.active {
+          border-top: 3px solid $spree-blue;
+          color: $spree-blue;
+          cursor: default;
+        }
+      }
+    }
+  }
+}

app/components/product_component.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+class ProductComponent < ViewComponentReflex::Component
+  def initialize(product:, columns:)
+    super
+    @product = product
+    @image = @product.images[0] if product.images.any?
+    @columns = columns.map { |c|
+      {
+        id: c[:value],
+        value: column_value(c[:value])
+      }
+    }
+  end
+
+  def column_value(column)
+    case column
+    when 'name'
+      @product.name
+    when 'price'
+      @product.price
+    when 'unit'
+      "#{@product.unit_value} #{@product.variant_unit}"
+    when 'producer'
+      @product.supplier.name
+    when 'category'
+      @product.taxons.map(&:name).join(', ')
+    end
+  end
+end

app/components/product_component/product_component.html.haml

@@ -0,0 +1,6 @@
+%tr
+  - @columns.each do |column|
+    %td.products_column{class: column[:id]}
+      - if column[:id] == "name" && @image
+        = image_tag @image.url(:mini)
+      = column[:value]

app/components/products_table_component.rb

@@ -0,0 +1,152 @@
+# frozen_string_literal: true
+
+class ProductsTableComponent < ViewComponentReflex::Component
+  include Pagy::Backend
+
+  SORTABLE_COLUMNS = ["name"].freeze
+  SELECTABLE_COMUMNS = [{ label: I18n.t("admin.products_page.columns_selector.price"),
+                          value: "price" },
+                        { label: I18n.t("admin.products_page.columns_selector.unit"),
+                          value: "unit" },
+                        { label: I18n.t("admin.products_page.columns_selector.producer"),
+                          value: "producer" },
+                        { label: I18n.t("admin.products_page.columns_selector.category"),
+                          value: "category" }].sort { |a, b|
+    a[:label] <=> b[:label]
+  }.freeze
+  PER_PAGE_VALUE = [10, 25, 50, 100].freeze
+  PER_PAGE = PER_PAGE_VALUE.map { |value| { label: value, value: value } }
+  NAME_COLUMN = { label: I18n.t("admin.products_page.columns.name"), value: "name",
+                  sortable: true }.freeze
+
+  def initialize(user:)
+    super
+    @user = user
+    @selectable_columns = SELECTABLE_COMUMNS
+    @columns_selected = ["price", "unit"]
+    @per_page = PER_PAGE
+    @per_page_selected = [10]
+    @categories = [{ label: "All", value: "all" }] +
+                  Spree::Taxon.order(:name)
+                    .map { |taxon| { label: taxon.name, value: taxon.id.to_s } }
+    @categories_selected = ["all"]
+    @producers = [{ label: "All", value: "all" }] +
+                 OpenFoodNetwork::Permissions.new(@user)
+                   .managed_product_enterprises.is_primary_producer.by_name
+                   .map { |producer| { label: producer.name, value: producer.id.to_s } }
+    @producers_selected = ["all"]
+    @page = 1
+    @sort = { column: "name", direction: "asc" }
+    @search_term = ""
+  end
+
+  def before_render
+    fetch_products
+    refresh_columns
+  end
+
+  def search_term
+    @search_term = element.dataset['value']
+  end
+
+  def toggle_column
+    column = element.dataset['value']
+    @columns_selected = if @columns_selected.include?(column)
+                          @columns_selected - [column]
+                        else
+                          @columns_selected + [column]
+                        end
+  end
+
+  def click_sort
+    @sort = { column: element.dataset['sort-value'],
+              direction: element.dataset['sort-direction'] == "asc" ? "desc" : "asc" }
+  end
+
+  def toggle_per_page
+    selected = element.dataset['value'].to_i
+    @per_page_selected = [selected] if PER_PAGE_VALUE.include?(selected)
+  end
+
+  def toggle_category
+    category_clicked = element.dataset['value']
+    @categories_selected = toggle_selector_with_filter(category_clicked, @categories_selected)
+  end
+
+  def toggle_producer
+    producer_clicked = element.dataset['value']
+    @producers_selected = toggle_selector_with_filter(producer_clicked, @producers_selected)
+  end
+
+  def change_page
+    page = element.dataset['page'].to_i
+    @page = page if page > 0
+  end
+
+  private
+
+  def refresh_columns
+    @columns = @columns_selected.map { |column|
+      { label: I18n.t("admin.products_page.columns.#{column}"), value: column,
+        sortable: SORTABLE_COLUMNS.include?(column) }
+    }.sort! { |a, b| a[:label] <=> b[:label] }
+    @columns.unshift(NAME_COLUMN)
+  end
+
+  def toggle_selector_with_filter(clicked, selected)
+    selected = if selected.include?(clicked)
+                 selected - [clicked]
+               else
+                 selected + [clicked]
+               end
+
+    if clicked == "all" || selected.empty?
+      selected = ["all"]
+    elsif selected.include?("all") && selected.length > 1
+      selected -= ["all"]
+    end
+    selected
+  end
+
+  def fetch_products
+    product_query = OpenFoodNetwork::Permissions.new(@user).editable_products.merge(product_scope)
+    @products = product_query.ransack(ransack_query).result
+    @pagy, @products = pagy(@products, items: @per_page_selected.first, page: @page)
+  end
+
+  def product_scope
+    scope = if @user.has_spree_role?("admin") || @user.enterprises.present?
+              Spree::Product
+            else
+              Spree::Product.active
+            end
+
+    scope.includes(product_query_includes)
+  end
+
+  def ransack_query
+    query = { s: "#{@sort[:column]} #{@sort[:direction]}" }
+
+    query = if @producers_selected.include?("all")
+              query.merge({ supplier_id_eq: "" })
+            else
+              query.merge({ supplier_id_in: @producers_selected })
+            end
+
+    query = query.merge({ name_cont: @search_term }) if @search_term.present?
+
+    if @categories_selected.include?("all")
+      query.merge({ primary_taxon_id_eq: "" })
+    else
+      query.merge({ primary_taxon_id_in: @categories_selected })
+    end
+  end
+
+  def product_query_includes
+    [
+      master: [:images],
+      variants: [:default_price, :stock_locations, :stock_items, :variant_overrides,
+                 { option_values: :option_type }]
+    ]
+  end
+end

app/components/products_table_component/products_table_component.html.haml

@@ -0,0 +1,21 @@
+= component_controller(class: "products-table") do
+  .products-table-form
+    .products-table-form_filter_results
+      = render(SearchInputComponent.new(value: @search_term, data: reflex_data_attributes(:search_term)))
+    .products-table-form_categories_selector
+      = render(SelectorWithFilterComponent.new(title: t("admin.products_page.filters.categories.title"), selected: @categories_selected, items: @categories, data: reflex_data_attributes(:toggle_category), selected_items_i18n_key: "admin.products_page.filters.categories.selected_categories"))
+    .products-table-form_producers_selector
+      = render(SelectorWithFilterComponent.new(title: t("admin.products_page.filters.producers.title"), selected: @producers_selected, items: @producers, data: reflex_data_attributes(:toggle_producer), selected_items_i18n_key: "admin.products_page.filters.producers.selected_producers"))
+    .products-table-form_per-page_selector
+      = render(SelectorComponent.new(title: t('admin.products_page.filters.per_page', count: @per_page_selected[0]), selected: @per_page_selected, items: @per_page, data: reflex_data_attributes(:toggle_per_page)))
+    .products-table-form_columns_selector
+      = render(SelectorComponent.new(title: t("admin.products_page.filters.columns"), selected: @columns_selected, items: @selectable_columns, data: reflex_data_attributes(:toggle_column)))
+
+  .products-table_table
+    %table
+      = render(TableHeaderComponent.new(columns: @columns, sort: @sort, data: reflex_data_attributes(:click_sort)))
+      %tbody
+        = render(ProductComponent.with_collection(@products, columns: @columns))
+
+  .products-table-form_pagination
+    = render(PaginationComponent.new(pagy: @pagy, data: reflex_data_attributes(:change_page)))

app/components/products_table_component/products_table_component.scss

@@ -0,0 +1,47 @@
+.products-table {
+  .products-table-form {
+    display: grid;
+    grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) );
+    grid-gap: 10px;
+    margin-bottom: 10px;
+  }
+
+  .products-table_table {
+    box-shadow: 0 10px 10px -1px rgb(0 0 0 / 10%);
+  }
+
+  .products-table-form_pagination {
+    position: relative;
+    top: -15px;
+
+    nav, .pagination {
+      margin-top: 0;
+      padding-top: 0;
+    }
+  }
+}
+
+.products-table.loading {
+  .products-table-form_pagination, .products-table_table {
+    position: relative;
+
+    &:before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-color: rgba(255, 255, 255, 0.5);
+    }
+  }
+
+  .products-table_table {
+    &:before {
+      background-position: center;
+      background-repeat: no-repeat;
+      background-size: 50px 50px;
+      background-image: url("../images/spinning-circles.svg");
+    }
+  }
+}

app/components/search_input_component.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+class SearchInputComponent < ViewComponentReflex::Component
+  def initialize(value: nil, data: {})
+    super
+    @value = value
+    @data = data
+  end
+end

app/components/search_input_component/search_input_component.html.haml

@@ -0,0 +1,5 @@
+= component_controller do
+  %div.search-input
+    %input{type: 'text', placeholder: t("components.search_input.placeholder"), id: 'search_query', data: {action: 'debounced:input->search-input#search'}, value: @value}
+    .search-button{data: @data}
+      %i.fa.fa-search

app/components/search_input_component/search_input_component.scss

@@ -0,0 +1,23 @@
+.search-input {
+  border: 1px solid $disabled-light;
+  height: 3em;
+  display: flex;
+  line-height: 3em;
+  align-items: center;
+
+  input {
+    border: none;
+    height: 3em;
+    width: 100%;
+    box-sizing: border-box;
+    padding-right: 5px;
+  }
+
+  .search-button {
+    padding-right: 10px;
+    padding-left: 5px;
+    cursor: pointer;
+    color: $color-4;
+  }
+
+}

app/components/selector_component.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+class SelectorComponent < ViewComponentReflex::Component
+  def initialize(title:, selected:, items:, data: {})
+    super
+    @title = title
+    @items = items.map do |item|
+      {
+        label: item[:label],
+        value: item[:value],
+        selected: selected.include?(item[:value])
+      }
+    end
+    @selected = selected
+    @data = data
+  end
+end

app/components/selector_component/selector_component.html.haml

@@ -0,0 +1,11 @@
+= component_controller do
+  .selector.selector-close
+    .selector-main{ data: { action: "click->selector#toggle" } }
+      .selector-main-title 
+        = @title
+      .selector-arrow
+    .selector-wrapper
+      .selector-items
+        - @items.each do |item|
+          .selector-item{ class: ("selected" if item[:selected]), data: @data, "data-value": item[:value] }
+            = item[:label]

app/components/selector_component/selector_component.scss

@@ -0,0 +1,86 @@
+.selector {
+  position: relative;
+
+  .selector-main {
+    border: 1px solid $disabled-light;
+    height: 3em;
+    position: relative;
+    cursor: pointer;
+
+    .selector-main-title {
+      line-height: 3em;
+      padding-left: 10px;
+      padding-right: 10px;
+    }
+    
+    .selector-arrow {
+      position: absolute;
+      right: 0px;
+      height: 3em;
+      width: 1.5em;
+      top: -1px;
+
+      &:after {
+        content: "";
+        position: absolute;
+        top: 50%;
+        right: 5px;
+        margin-top: -5px;
+        width: 0;
+        height: 0;
+        border-left: 5px solid transparent;
+        border-right: 5px solid transparent;
+        border-top: 5px solid $disabled-light;
+      }
+    }
+  }
+
+  .selector-wrapper {
+    position: absolute;
+    left: 0px;
+    right: 0px;
+    z-index: 1;
+    background-color: white;
+    margin-top: -1px;
+    border: 1px solid $disabled-light;
+
+    .selector-items {
+      overflow-y: auto;
+      min-height: 6em;
+  
+      .selector-item {
+        padding-left: 10px;
+        padding-right: 10px;
+        border-bottom: 1px solid $disabled-light;
+        position: relative;
+        height: 3em;
+        line-height: 3em;
+
+        &:hover {
+          background-color: #eee;
+          cursor: pointer;
+        }
+
+        &:last-child {
+          border-bottom: none;
+        }
+
+        &.selected {
+          &:after {
+            content: "✓";
+            display: inline-block;
+            position: absolute;
+            right: 10px;
+          }
+        }
+      }
+    }
+  }
+  
+
+  &.selector-close {
+    .selector-wrapper {
+      display: none;
+    }
+  }
+}

app/components/selector_with_filter_component.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+class SelectorWithFilterComponent < SelectorComponent
+  def initialize(title:, selected:, items:, data: {},
+                 selected_items_i18n_key: 'components.selector_with_filter.selected_items')
+    super(title: title, selected: selected, items: items, data: data)
+    @selected_items = items.select { |item| @selected.include?(item[:value]) }
+    @selected_items_i18n_key = selected_items_i18n_key
+    @items = items
+  end
+end

app/components/selector_with_filter_component/selector_with_filter_component.html.haml

@@ -0,0 +1,22 @@
+= component_controller do
+  .super-selector.selector.selector-close
+    .selector-main{ data: { action: "click->selector-with-filter#toggle" } }
+      .super-selector-label
+        = @title
+      .super-selector-selected-items
+        - case @selected_items.length
+        - when 1, 2
+          - @selected_items.each do |item|
+            .super-selector-selected-item
+              = item[:label]
+        - else
+          .super-selector-selected-item
+            = t(@selected_items_i18n_key, count: @selected_items.length)
+      .selector-arrow
+    .selector-wrapper
+      .super-selector-search
+        %input{type: "text", placeholder: t("components.selector_with_filter.search_placeholder"), data: { action: "debounced:input->selector-with-filter#filter" } }
+      .selector-items
+        - @items.each do |item|
+          .selector-item{ class: ("selected" if item[:selected]), data: @data.merge({ "selector-with-filter-target": "items" }), "data-value": item[:value] }
+            = item[:label]

app/components/selector_with_filter_component/selector_with_filter_component.scss

@@ -0,0 +1,51 @@
+
+.super-selector {
+  position: relative;
+
+  .selector-main {
+    .super-selector-label {
+      padding-left: 5px;
+      padding-right: 5px;
+      margin-left: 10px;
+      position: absolute;
+      top: -1em;
+      background-color: white;
+    }
+  }
+
+  .super-selector-selected-items {
+    margin-left: 5px;
+    margin-right: 2em;
+    margin-top: 7px;
+    display: flex;
+
+    .super-selector-selected-item {
+      border: 1px solid $pale-blue;
+      background-color: $spree-light-blue;
+      border-radius: 20px;
+      height: 2em;
+      padding-left: 10px;
+      padding-right: 10px;
+      display: inline-block;
+      margin-right: 5px;
+      padding-top: 2px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+  .selector-wrapper {
+    .super-selector-search {
+      border-bottom: 1px solid $disabled-light;
+      padding: 10px 5px;
+
+      input {
+        border: 1px solid $disabled-light;
+        box-sizing: border-box;
+        border-radius: 4px;
+        width: 100%;
+      }
+    }
+  }
+}

app/components/table_header_component.rb

@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+class TableHeaderComponent < ViewComponentReflex::Component
+  def initialize(columns:, sort:, data: {})
+    super
+    @columns = columns
+    @sort = sort
+    @data = data
+  end
+end

app/components/table_header_component/table_header_component.html.haml

@@ -0,0 +1,7 @@
+
+= component_controller do
+  %thead.table-header
+    %tr
+      - @columns.each do |column|
+        %th{class: (column[:sortable] ? "th-sortable " : "" ) + (@sort[:column] == column[:value] ? " th-sorted-#{@sort[:direction]}" : ""), data: (@data if column[:sortable] == true), "data-sort-value": column[:value], "data-sort-direction": @sort[:direction]}
+          = column[:label]

app/components/table_header_component/table_header_component.scss

@@ -0,0 +1,23 @@
+thead.table-header {
+  th {
+    &.th-sortable {
+      cursor: pointer;
+    }
+    &.th-sorted-asc, &.th-sorted-desc {
+      &:after {
+        display: inline-block;
+        padding-left: 10px;
+      } 
+    }
+    &.th-sorted-asc {
+      &:after {
+        content: "⇧";
+      }
+    }
+    &.th-sorted-desc {
+      &:after {
+        content: "⇩";
+      }
+    }
+  }
+}

app/constraints/feature_toggle_constraint.rb

@@ -1,5 +1,7 @@
 # frozen_string_literal: true
 
+require "open_food_network/feature_toggle"
+
 class FeatureToggleConstraint
   def initialize(feature_name)
     @feature = feature_name
@@ -10,6 +12,6 @@ class FeatureToggleConstraint
   end
 
   def current_user(request)
-    request.env['warden'].user
+    request.env['warden']&.user
   end
 end

app/controllers/admin/customers_controller.rb

@@ -116,21 +116,7 @@ module Admin
 
     # Fetches tags for all customers of the enterprise and returns a hash indexed by customer_id
     def customer_tags_by_id
-      customer_tags = ::ActsAsTaggableOn::Tag.
-        joins(:taggings).
-        includes(:taggings).
-        where(taggings:
-                { taggable_type: 'Customer',
-                  taggable_id: Customer.of(managed_enterprise_id),
-                  context: 'tags' })
-
-      customer_tags.each_with_object({}) do |tag, indexed_hash|
-        tag.taggings.each do |tagging|
-          customer_id = tagging.taggable_id
-          indexed_hash[customer_id] ||= []
-          indexed_hash[customer_id] << tag.name
-        end
-      end
+      BatchTaggableTagsQuery.call(Customer.of(managed_enterprise_id))
     end
   end
 end

app/controllers/admin/products_controller.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+module Admin
+  class ProductsController < Spree::Admin::BaseController
+    def index; end
+  end
+end

app/controllers/admin/reports_controller.rb

@@ -48,15 +48,7 @@ module Admin
                       else
                         I18n.t(:name, scope: [:admin, :reports, @report_type])
                       end
-
-      # Initialize data
-      params[:display_summary_row] = true if request.get?
-      @params_fields_to_show = if request.get?
-                                 @report.columns.keys - @report.fields_to_hide
-                               else
-                                 params[:fields_to_show]
-                               end
-
+      @rendering_options = rendering_options
       @data = Reporting::FrontendData.new(spree_current_user)
     end
   end

app/controllers/admin/subscriptions_controller.rb

@@ -162,25 +162,20 @@ module Admin
       [:index]
     end
 
+    def managed_enterprise_id
+      Enterprise.managed_by(spree_current_user).select('enterprises.id').
+        find_by(id: params[:enterprise_id])
+    end
+
     def subscription_params
       @subscription_params ||= PermittedAttributes::Subscription.new(params).call.
         to_h.with_indifferent_access
     end
 
     def payment_method_tags_by_id
-      payment_method_tags = ::ActsAsTaggableOn::Tag.
-        joins(:taggings).
-        includes(:taggings).
-        where(taggings: { taggable_type: "Spree::PaymentMethod",
-                          taggable_id: Spree::PaymentMethod.from(Enterprise.managed_by(spree_current_user).
-                          select('enterprises.id').find_by(id: params[:enterprise_id])),
-                          context: 'tags' })
-
-      payment_method_tags.each_with_object({}) do |tag, hash|
-        payment_method_id = tag.taggings.first.taggable_id
-        hash[payment_method_id] ||= []
-        hash[payment_method_id] << tag.name
-      end
+      @payment_method_tags_by_id ||= BatchTaggableTagsQuery.call(
+        Spree::PaymentMethod.from(managed_enterprise_id)
+      )
     end
   end
 end

app/controllers/concerns/reports_actions.rb

@@ -62,4 +62,37 @@ module ReportsActions
   def i18n_scope
     'admin.reports'
   end
+
+  def rendering_options
+    @rendering_options ||= ReportRenderingOptions.where(
+      user: spree_current_user,
+      report_type: report_type,
+      report_subtype: report_subtype
+    ).first_or_create do |report_rendering_options|
+      report_rendering_options.options = {
+        fields_to_show: if request.get?
+                          @report.columns.keys -
+                            @report.fields_to_hide
+                        else
+                          params[:fields_to_show]
+                        end,
+        display_summary_row: request.get?,
+        display_header_row: false
+      }
+    end
+    update_rendering_options
+    @rendering_options
+  end
+
+  def update_rendering_options
+    return unless request.post?
+
+    @rendering_options.update(
+      options: {
+        fields_to_show: params[:fields_to_show],
+        display_summary_row: params[:display_summary_row].present?,
+        display_header_row: params[:display_header_row].present?
+      }
+    )
+  end
 end

app/helpers/spree/admin/navigation_helper.rb

@@ -34,6 +34,7 @@ module Spree
           link = link_to_with_icon(options[:icon], titleized_label, destination_url)
           css_classes << 'tab-with-icon'
         else
+          titleized_label = raw("<span class='text'>#{titleized_label}</span>")
           link = link_to(titleized_label, destination_url)
         end
 

app/models/enterprise.rb

@@ -6,9 +6,9 @@ class Enterprise < ApplicationRecord
   # The next Rails version will have named variants but we need to store them
   # ourselves for now.
   LOGO_SIZES = {
-    thumb: { resize_to_limit: [100, 100] },
-    small: { resize_to_limit: [180, 180] },
-    medium: { resize_to_limit: [300, 300] },
+    thumb: { gravity: "Center", resize: "100x100^", crop: '100x100+0+0' },
+    small: { gravity: "Center", resize: "180x180^", crop: '180x180+0+0' },
+    medium: { gravity: "Center", resize: "300x300^", crop: '300x300+0+0' },
   }.freeze
   PROMO_IMAGE_SIZES = {
     thumb: { resize_to_limit: [100, 100] },
@@ -16,19 +16,6 @@ class Enterprise < ApplicationRecord
     large: { resize_to_fill: [1200, 260] },
   }.freeze
 
-  self.ignored_columns = %i(terms_and_conditions_file_name
-                            terms_and_conditions_content_type
-                            terms_and_conditions_file_size
-                            terms_and_conditions_updated_at
-                            logo_file_name
-                            logo_content_type
-                            logo_file_size
-                            logo_updated_at
-                            promo_image_file_name
-                            promo_image_content_type
-                            promo_image_file_size
-                            promo_image_updated_at)
-
   searchable_attributes :sells, :is_primary_producer
   searchable_associations :properties
   searchable_scopes :is_primary_producer, :is_distributor, :is_hub, :activated, :visible,

app/models/enterprise_group.rb

@@ -5,15 +5,6 @@ require 'open_food_network/locking'
 class EnterpriseGroup < ApplicationRecord
   include PermalinkGenerator
 
-  self.ignored_columns = %i(logo_file_name
-                            logo_content_type
-                            logo_file_size
-                            logo_updated_at
-                            promo_image_file_name
-                            promo_image_content_type
-                            promo_image_file_size
-                            promo_image_updated_at)
-
   acts_as_list
 
   has_and_belongs_to_many :enterprises, join_table: 'enterprise_groups_enterprises'

app/models/product_import/entry_validator.rb

@@ -299,7 +299,7 @@ module ProductImport
         entry.public_send("#{type}_category_id=", index[category])
       else
         mark_as_invalid(entry, attribute: "#{type}_category",
-                               error: I18n.t('admin.product_import.model.not_found'))
+                               error: I18n.t('admin.product_import.model.category_not_found'))
       end
     end
 

app/models/product_import/spreadsheet_entry.rb

@@ -68,7 +68,7 @@ module ProductImport
 
     def invalid_attributes
       invalid_attrs = {}
-      errors = @product_validations ? self.errors.messages.merge(@product_validations.messages) : self.errors.messages
+      errors = @product_validations ? @product_validations.messages.merge(self.errors.messages) : self.errors.messages
       errors.each do |attr, message|
         invalid_attrs[attr.to_s] = "#{attr.to_s.capitalize} #{message.first}"
       end

app/models/product_import/unit_converter.rb

@@ -54,7 +54,7 @@ module ProductImport
     end
 
     def assign_weight_or_volume_attributes
-      units = @attrs['units'].to_f
+      units = @attrs['units'].to_d
       unit_type = @attrs['unit_type'].to_s.downcase
 
       return unless valid_unit_type? unit_type

app/models/report_rendering_options.rb

@@ -0,0 +1,6 @@
+# frozen_string_literal: true
+
+class ReportRenderingOptions < ApplicationRecord
+  belongs_to :user, class_name: "Spree::User"
+  serialize :options, Hash
+end

app/models/spree/address.rb

@@ -29,12 +29,7 @@ module Spree
     delegate :name, to: :state, prefix: true, allow_nil: true
 
     def self.default
-      country = begin
-        DefaultCountry.country
-      rescue StandardError
-        Spree::Country.first
-      end
-      new(country: country)
+      new(country: DefaultCountry.country)
     end
 
     def full_name

app/models/spree/country.rb

@@ -6,6 +6,12 @@ module Spree
 
     validates :name, :iso_name, presence: true
 
+    def self.cached_find_by(attrs)
+      Rails.cache.fetch("countries/#{attrs.hash}", expires_in: 1.hour) do
+        find_by(attrs)
+      end
+    end
+
     def <=>(other)
       name <=> other.name
     end

app/models/spree/image.rb

@@ -9,13 +9,6 @@ module Spree
       large: { resize_to_limit: [600, 600] },
     }.freeze
 
-    self.ignored_columns = %i(attachment_file_name
-                              attachment_content_type
-                              attachment_file_size
-                              attachment_updated_at
-                              attachment_width
-                              attachment_height)
-
     has_one_attached :attachment
 
     validates :attachment, attached: true, content_type: %r{\Aimage/(png|jpeg|gif|jpg|svg\+xml|webp)\Z}

app/models/spree/line_item.rb

@@ -28,6 +28,7 @@ module Spree
     before_validation :adjust_quantity
     before_validation :copy_price
     before_validation :copy_tax_category
+    before_validation :copy_dimensions
 
     validates :variant, presence: true
     validates :quantity, numericality: {
@@ -122,6 +123,15 @@ module Spree
       self.tax_category = variant.product.tax_category
     end
 
+    def copy_dimensions
+      return unless variant
+
+      self.weight ||= computed_weight_from_variant
+      self.height ||= variant.height
+      self.width ||= variant.width
+      self.depth ||= variant.depth
+    end
+
     def amount
       price * quantity
     end
@@ -226,6 +236,14 @@ module Spree
 
     private
 
+    def computed_weight_from_variant
+      if variant.product.variant_unit == "weight"
+        variant.unit_value / variant.product.variant_unit_scale
+      else
+        variant.weight
+      end
+    end
+
     def update_inventory
       return unless changed?
 

app/models/spree/user.rb

@@ -37,7 +37,7 @@ module Spree
                             foreign_key: :owner_id, inverse_of: :owner
     has_many :customers
     has_many :credit_cards
-
+    has_many :report_rendering_options, class_name: "::ReportRenderingOptions", dependent: :destroy
     accepts_nested_attributes_for :enterprise_roles, allow_destroy: true
 
     accepts_nested_attributes_for :bill_address

app/models/terms_of_service_file.rb

@@ -5,11 +5,6 @@ class TermsOfServiceFile < ApplicationRecord
 
   validates :attachment, attached: true
 
-  self.ignored_columns = %i(attachment_file_name
-                            attachment_content_type
-                            attachment_file_size
-                            attachment_updated_at)
-
   # The most recently uploaded file is the current one.
   def self.current
     order(:id).last

app/queries/batch_taggable_tags_query.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+class BatchTaggableTagsQuery
+  def self.call(taggables)
+    ::ActsAsTaggableOn::Tag.
+      joins(:taggings).
+      includes(:taggings).
+      where(taggings:
+        {
+          taggable_type: taggables.model.to_s,
+          taggable_id: taggables,
+          context: 'tags'
+        }).order("tags.name").each_with_object({}) do |tag, indexed_hash|
+      tag.taggings.each do |tagging|
+        indexed_hash[tagging.taggable_id] ||= []
+        indexed_hash[tagging.taggable_id] << tag.name
+      end
+    end
+  end
+end

app/reflexes/example_reflex.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+class ExampleReflex < ApplicationReflex
+  # Add Reflex methods in this file.
+  #
+  # All Reflex instances include CableReady::Broadcaster and expose the following properties:
+  #
+  #   - connection  - the ActionCable connection
+  #   - channel     - the ActionCable channel
+  #   - request     - an ActionDispatch::Request proxy for the socket connection
+  #   - session     - the ActionDispatch::Session store for the current visitor
+  #   - flash       - the ActionDispatch::Flash::FlashHash for the current request
+  #   - url         - the URL of the page that triggered the reflex
+  #   - params      - parameters from the element's closest form (if any)
+  #   - element     - a Hash like object that represents the HTML element that triggered the reflex
+  #     - signed    - use a signed Global ID to map dataset attribute to a model
+  #                   eg. element.signed[:foo]
+  #     - unsigned  - use an unsigned Global ID to map dataset attribute to a model
+  #                   eg. element.unsigned[:foo]
+  #   - cable_ready - a special cable_ready that can broadcast to the current visitor
+  #                   (no brackets needed)
+  #   - reflex_id   - a UUIDv4 that uniquely identies each Reflex
+  #   - tab_id      - a UUIDv4 that uniquely identifies the browser tab
+  #
+  # Example:
+  #
+  #   before_reflex do
+  #     # throw :abort # this will prevent the Reflex from continuing
+  #     # learn more about callbacks at https://docs.stimulusreflex.com/rtfm/lifecycle
+  #   end
+  #
+  #   def example(argument=true)
+  #     # Your logic here...
+  #     # Any declared instance variables will be made available to the Rails controller and view.
+  #   end
+  #
+  # Learn more at: https://docs.stimulusreflex.com/rtfm/reflex-classes
+end

app/serializers/api/admin/exchange_serializer.rb

@@ -42,12 +42,18 @@ module Api
           .visible_variants_for_outgoing_exchanges_to(object.receiver)
       end
 
+      def preloaded_tag_list
+        return object.tag_list unless options[:preloaded_tags]
+
+        options.dig(:preloaded_tags, object.id) || []
+      end
+
       def tag_list
-        object.tag_list.join(",")
+        preloaded_tag_list.join(",")
       end
 
       def tags
-        object.tag_list.map{ |t| { text: t } }
+        preloaded_tag_list.map { |tag| { text: tag } }
       end
     end
   end

app/serializers/api/admin/order_cycle_serializer.rb

@@ -34,7 +34,8 @@ module Api
 
         ActiveModel::ArraySerializer.
           new(scoped_exchanges, each_serializer: Api::Admin::ExchangeSerializer,
-                                current_user: options[:current_user])
+                                current_user: options[:current_user],
+                                preloaded_tags: BatchTaggableTagsQuery.call(scoped_exchanges))
       end
 
       def editable_variants_for_incoming_exchanges

app/services/default_country.rb

@@ -10,6 +10,6 @@ class DefaultCountry
   end
 
   def self.country
-    Spree::Country.find_by(iso: ENV["DEFAULT_COUNTRY_CODE"]) || Spree::Country.first
+    Spree::Country.cached_find_by(iso: ENV["DEFAULT_COUNTRY_CODE"]) || Spree::Country.first
   end
 end

app/services/default_stock_location.rb

@@ -5,17 +5,6 @@
 class DefaultStockLocation
   NAME = 'default'
 
-  def self.create!
-    country = Spree::Country.find_by(iso: ENV['DEFAULT_COUNTRY_CODE'])
-    state = country.states.first
-    Spree::StockLocation.create!(name: NAME, country_id: country.id, state_id: state.id,
-                                 backorderable_default: false)
-  end
-
-  def self.destroy_all
-    Spree::StockLocation.where(name: NAME).destroy_all
-  end
-
   def self.find_or_create
     Spree::StockLocation.find_or_create_by(name: NAME)
   end

app/services/order_available_payment_methods.rb

@@ -30,8 +30,14 @@ class OrderAvailablePaymentMethods
       distributor.payment_methods
     else
       distributor.payment_methods.where(
-        id: order_cycle.distributor_payment_methods.select(:payment_method_id)
+        id: available_distributor_payment_methods_ids
       )
     end.available.select(&:configured?)
   end
+
+  def available_distributor_payment_methods_ids
+    order_cycle.distributor_payment_methods
+      .where(distributor_id: distributor.id)
+      .select(:payment_method_id)
+  end
 end

app/services/order_available_shipping_methods.rb

@@ -30,8 +30,14 @@ class OrderAvailableShippingMethods
       distributor.shipping_methods
     else
       distributor.shipping_methods.where(
-        id: order_cycle.distributor_shipping_methods.select(:shipping_method_id)
+        id: available_distributor_shipping_methods_ids
       )
     end.frontend.to_a
   end
+
+  def available_distributor_shipping_methods_ids
+    order_cycle.distributor_shipping_methods
+      .where(distributor_id: distributor.id)
+      .select(:shipping_method_id)
+  end
 end

app/views/admin/enterprises/_form.html.haml

@@ -5,12 +5,6 @@
       %legend= t(".#{ item[:name] }.legend")
       = render "admin/enterprises/form/#{ item[:form_name] || item[:name] }", f: f
 
-  - when 'address'
-    = f.fields_for :address do |af|
-      %fieldset.alpha.no-border-bottom{ id: "#{item[:name]}_panel", data: { "tabs-and-panels-target": "panel" }}
-        %legend= t(".#{ item[:name] }.legend")
-        = render 'admin/enterprises/form/address', af: af
-
   - when 'enterprise_permissions'
     %fieldset.alpha.no-border-bottom{ id: "#{item[:name]}_panel", data: { "tabs-and-panels-target": "panel" }}
       %legend= t(".#{ item[:name] }.legend")

app/views/admin/enterprises/_new_form.html.haml

@@ -87,22 +87,21 @@
       = af.text_field :city, { placeholder: t(:city_placeholder)}
     .five.columns.omega
       = af.text_field :zipcode, { placeholder: t(:postcode_placeholder)}
-  %div{"data-controller": "dependant-select", "data-dependant-select-options-value": countries_with_states }
+  %div{"data-controller": "dependent-select", "data-dependent-select-options-value": countries_with_states }
     .row
       .three.columns.alpha
         = af.label :state_id, t(:state)
         \/
         = af.label :country_id, t(:country)
       .four.columns
-        = af.select :country_id, available_countries.map { |c| [c.name, c.id] }, {}, { "data-controller": "tom-select", "data-dependant-select-target": "source", "data-action": "dependant-select#handleSelectChange", class: "primary" }
+        = af.select :country_id, available_countries.map { |c| [c.name, c.id] }, {}, { "data-controller": "tom-select", "data-dependent-select-target": "source", "data-action": "dependent-select#handleSelectChange", class: "primary" }
       .five.columns.omega
-        = af.select :state_id, @enterprise.address.country.states.map { |s| [s.name, s.id] }, {}, { "data-controller": "tom-select", "data-dependant-select-target": "select", class: "primary" }
+        = af.select :state_id, @enterprise.address.country.states.map { |s| [s.name, s.id] }, {}, { "data-controller": "tom-select", "data-dependent-select-target": "select", class: "primary" }
   .row
     .three.columns.alpha
       = af.label :latitude, t(:latitude)
       \/
       = af.label :longitude, t(:longitude)
-      %span.required *
       %div{'ofn-with-tip' => t('latitude_longitude_tip')}
         %a= t('admin.whats_this')
     .four.columns

app/views/admin/enterprises/form/_address.html.haml

@@ -1,54 +1,54 @@
 -# redo denoting required fields in the whole project
-.row
-  = t(:required_fields)
-  (
-  %span.required *
-  )
-.row
-  .three.columns.alpha
-    = af.label :address1, t(:address)
+= f.fields_for :address do |af|
+  .row
+    = t(:required_fields)
+    (
     %span.required *
-  .eight.columns.omega
-    = af.text_field :address1, { placeholder: t(:address_placeholder) }
-.row
-  .alpha.three.columns
-    = af.label :address2, t(:address2)
-  .eight.columns.omega
-    = af.text_field :address2
-.row
-  .three.columns.alpha
-    = af.label :city, t(:city)
-    \/
-    = af.label :zipcode, t(:postcode)
-    %span.required *
-  .four.columns
-    = af.text_field :city, { placeholder: t(:city_placeholder) }
-  .four.columns.omega
-    = af.text_field :zipcode, { placeholder: t(:postcode_placeholder) }
-.row{"data-controller": "dependent-select", "data-dependent-select-options-value": countries_with_states }
-  .three.columns.alpha
-    = af.label :state_id, t(:state)
-    \/
-    = af.label :country_id, t(:country)
-    %span.required *
-  .four.columns
-    = af.select :state_id, @enterprise.address.country.states.map { |s| [s.name, s.id] }, {}, { "data-controller": "tom-select", "data-dependent-select-target": "select", class: "primary" }
-  .four.columns.omega{ data: { controller: "primary-details" }}
-    = af.select :country_id, available_countries.map { |c| [c.name, c.id] }, {}, { "data-controller": "tom-select", "data-dependent-select-target": "source", "data-action": "dependent-select#handleSelectChange", class: "primary" }
-.row
-  .three.columns.alpha
-    = af.label :latitude, t(:latitude)
-    \/
-    = af.label :longitude, t(:longitude)
-    %span.required *
-    = render partial: 'admin/shared/tooltip', locals: {tooltip_text: t('latitude_longitude_tip')}
-  .four.columns
-    = af.text_field :latitude, { placeholder: t(:latitude_placeholder) }
-  .four.columns.omega
-    = af.text_field :longitude, { placeholder: t(:longitude_placeholder) }
-.row
-  .three.columns.alpha
-    = " ".html_safe
-  .five.columns.omega
-    = check_box_tag "use_geocoder"
-    = label_tag "use_geocoder", t('use_geocoder')
+    )
+  .row
+    .three.columns.alpha
+      = af.label :address1, t(:address)
+      %span.required *
+    .eight.columns.omega
+      = af.text_field :address1, { placeholder: t(:address_placeholder) }
+  .row
+    .alpha.three.columns
+      = af.label :address2, t(:address2)
+    .eight.columns.omega
+      = af.text_field :address2
+  .row
+    .three.columns.alpha
+      = af.label :city, t(:city)
+      \/
+      = af.label :zipcode, t(:postcode)
+      %span.required *
+    .four.columns
+      = af.text_field :city, { placeholder: t(:city_placeholder) }
+    .four.columns.omega
+      = af.text_field :zipcode, { placeholder: t(:postcode_placeholder) }
+  .row{"data-controller": "dependent-select", "data-dependent-select-options-value": countries_with_states }
+    .three.columns.alpha
+      = af.label :state_id, t(:state)
+      \/
+      = af.label :country_id, t(:country)
+      %span.required *
+    .four.columns
+      = af.select :state_id, @enterprise.address.country.states.map { |s| [s.name, s.id] }, {}, { "data-controller": "tom-select", "data-dependent-select-target": "select", class: "primary" }
+    .four.columns.omega{ data: { controller: "primary-details" }}
+      = af.select :country_id, available_countries.map { |c| [c.name, c.id] }, {}, { "data-controller": "tom-select", "data-dependent-select-target": "source", "data-action": "dependent-select#handleSelectChange", class: "primary" }
+  .row
+    .three.columns.alpha
+      = af.label :latitude, t(:latitude)
+      \/
+      = af.label :longitude, t(:longitude)
+      = render partial: 'admin/shared/tooltip', locals: {tooltip_text: t('latitude_longitude_tip')}
+    .four.columns
+      = af.text_field :latitude, { placeholder: t(:latitude_placeholder) }
+    .four.columns.omega
+      = af.text_field :longitude, { placeholder: t(:longitude_placeholder) }
+  .row
+    .three.columns.alpha
+      = " ".html_safe
+    .five.columns.omega
+      = check_box_tag "use_geocoder"
+      = label_tag "use_geocoder", t('use_geocoder')

app/views/admin/enterprises/form/_business_address.html.haml

@@ -9,6 +9,7 @@
   .three.columns.alpha
     = bf.label :address1, t('.address1')
     %i.text-big.icon-question-sign{ "data-controller": "help-modal-link", "data-action": "click->help-modal-link#open", "data-help-modal-link-target-value": "business_address_info_modal" }
+  .eight.columns.omega
     = bf.text_field :address1, { placeholder: t(".address1_placeholder") }
 .row
   .alpha.three.columns
@@ -24,16 +25,16 @@
     = bf.text_field :city, { placeholder: t(:city_placeholder) }
   .four.columns.omega
     = bf.text_field :zipcode, { placeholder: t(:postcode_placeholder) }
-.row
+.row{"data-controller": "dependent-select", "data-dependent-select-options-value": countries_with_states }
   .three.columns.alpha
     = bf.label :country_id, t(:country)
     \/
     = bf.label :state_id, t(:state)
-  %div{"data-controller": "dependant-select", "data-dependant-select-options-value": countries_with_states }
-    .four.columns
-      = bf.select :country_id, available_countries.map { |c| [c.name, c.id] }, {}, { "data-controller": "tom-select", "data-dependant-select-target": "source", "data-action": "dependant-select#handleSelectChange", class: "primary" }
-    .four.columns.omega
-      = bf.select :state_id, @enterprise.address.country.states.map { |s| [s.name, s.id] }, {}, { "data-controller": "tom-select", "data-dependant-select-target": "select", class: "primary" }
+  .four.columns
+    = bf.select :country_id, options_for_select(available_countries.map { |c| [c.name, c.id] }, @enterprise.business_address.country_id), {}, { "data-controller": "tom-select", "data-dependent-select-target": "source", "data-action": "dependent-select#handleSelectChange", class: "primary" }
+  .four.columns.omega
+    - states = @enterprise.business_address.country.present? ? @enterprise.business_address.country&.states&.map { |s| [s.name, s.id] } : []
+    = bf.select :state_id, states, {}, { "data-controller": "tom-select", "data-dependent-select-target": "select", class: "primary" }
 
 .row
   .three.columns.alpha

app/views/admin/enterprises/form/_images.html.haml

@@ -4,7 +4,8 @@
     %br
     100 x 100 pixels
   .omega.eight.columns
-    %img{ class: 'image-field-group__preview-image', ng: { src: '{{ Enterprise.logo.medium }}', if: 'Enterprise.logo' } }
+    %img{ class: 'image-field-group__preview-image', ng: { src: '{{ Enterprise.logo.thumb }}', if: 'Enterprise.logo' } }
+    %br
     = f.file_field :logo
     %a.button.red{ href: '', ng: {click: 'removeLogo()', if: 'Enterprise.logo'} }
       = t('.remove_logo')

app/views/admin/enterprises/form/_primary_details.html.haml

@@ -32,6 +32,8 @@
     .four.columns.omega
       = f.radio_button :sells, "any", 'ng-model' => 'Enterprise.sells', data: {action: "change->primary-details#enterpriseSellsChanged"}
       = f.label :sells, t('.any'), value: "any"
+      %span{ style: "width: 30px; height: 30px;", class: "hidden", data: { "primary-details-target": "spinner" } }
+        = render partial: "components/admin_spinner"
 .row
   .three.columns.alpha
     %label= t('.visible_in_search')

app/views/admin/products/index.html.haml

@@ -0,0 +1,8 @@
+
+- content_for :page_title do
+  = t('admin.products_page.title')
+
+= render partial: 'spree/admin/shared/product_sub_menu'
+
+#products_page
+  = render(ProductsTableComponent.new(user: spree_current_user))

app/views/admin/reports/_date_range_form.html.haml

@@ -4,7 +4,7 @@
 .row.date-range-filter
   .alpha.two.columns= label_tag nil, t(:date_range)
   .omega.fourteen.columns
-    = f.text_field "#{field}_gt", :class => 'datetimepicker datepicker-from', :placeholder => t(:start), data: { controller: "flatpickr", "flatpickr-enable-time-value": true }
+    = f.text_field "#{field}_gt", :class => 'datetimepicker datepicker-from', :placeholder => t(:start), data: { controller: "flatpickr", "flatpickr-enable-time-value": true, "flatpickr-default-date-value": "startOfDay" }
     %span.range-divider
       %i.icon-arrow-right
-    = f.text_field "#{field}_lt", :class => 'datetimepicker datepicker-to', :placeholder => t(:stop), data: { controller: "flatpickr", "flatpickr-enable-time-value": true }
+    = f.text_field "#{field}_lt", :class => 'datetimepicker datepicker-to', :placeholder => t(:stop), data: { controller: "flatpickr", "flatpickr-enable-time-value": true, "flatpickr-default-date-value": "endOfDay" }

app/views/admin/reports/_rendering_options.html.haml

@@ -16,16 +16,16 @@
       .omega.fourteen.columns
         - if @report.header_option?
           %span.inline-checkbox{ style: "margin-right: 1rem;" }
-            = check_box_tag :display_header_row, true, params[:display_header_row]
+            = check_box_tag :display_header_row, true, @rendering_options.options[:display_header_row]
             = label_tag :display_header_row, t(".header_row")
         - if @report.summary_row_option?
           %span.inline-checkbox
-            = check_box_tag :display_summary_row, true, params[:display_summary_row], { "data-csv-select-target": "checkbox" }
+            = check_box_tag :display_summary_row, true, @rendering_options.options[:display_summary_row], { "data-csv-select-target": "checkbox" }
             = label_tag :display_summary_row, t(".summary_row"), { "data-csv-select-target": "label" }
 
 - if @report.available_headers.present?
   .row
     .alpha.two.columns= label_tag nil, t(:report_columns)
     .omega.fourteen.columns
-      = render MultipleCheckedSelectComponent.new(name: "fields_to_show", options: @report.available_headers, selected: @params_fields_to_show)
+      = render MultipleCheckedSelectComponent.new(name: "fields_to_show", options: @report.available_headers, selected: @rendering_options.options[:fields_to_show])
   

app/views/admin/reports/filters/_orders_and_distributors.html.haml

@@ -1 +1,5 @@
 = render 'admin/reports/date_range_form', f: f
+
+.row
+  .alpha.two.columns= label_tag nil, t(:report_hubs)
+  .omega.fourteen.columns= f.collection_select(:distributor_id_in, @data.orders_distributors, :id, :name, {}, {class: "select2 fullwidth", multiple: true})

app/views/admin/reports/index.html.haml

@@ -15,6 +15,5 @@
           %td
             - if report_subtypes.empty?
               - name = I18n.t(:name, scope: [:admin, :reports, report_type])
-              - url = main_app.admin_report_url(report_type: report_type)
-              = link_to name, url
+              - report_subtypes = [[name, nil]]
             = render partial: "report_subtype", locals: { report_subtypes: report_subtypes, report_type: report_type }

app/views/admin/subscriptions/_new_subscription_dialog.html.haml

@@ -4,6 +4,6 @@
 
   = form_with url: "/admin/subscriptions/new", method: :get  do |f|
     .text-left.margin-bottom-30
-      = select_tag "subscription[shop_id]", options_from_collection_for_select(@shops, "id", "name"), { "data-controller": "tom-select", "data-dependant-select-target": "source", "data-action": "dependant-select#handleSelectChange", class: "primary" }
+      = select_tag "subscription[shop_id]", options_from_collection_for_select(@shops, "id", "name"), { "data-controller": "tom-select", "data-dependent-select-target": "source", "data-action": "dependent-select#handleSelectChange", class: "primary" }
     .text-center
-      = f.submit "Continue", class: "button red icon-plus"
+      = f.submit "Continue", class: "button red icon-plus"

app/views/checkout/_platform_terms_of_service.html.haml

@@ -1,4 +1,10 @@
 %p
-  %input{ type: "checkbox", id: "accept_terms", ng: { model: "platform_tos_accepted", init: "platform_tos_accepted = #{platform_tos_already_accepted?}" } }
-  %label.small{for: "platform_tos_accepted"}
+  %input{ type: "checkbox",
+    id: "accept_terms",
+    ng: {
+      model: "platform_tos_accepted",
+      init: "platform_tos_accepted = #{platform_tos_already_accepted?}"
+    }
+  }
+  %label.small{for: "accept_terms"}
     = t(".message_html", tos_link: link_to_platform_terms)

app/views/split_checkout/_details.html.haml

@@ -50,16 +50,16 @@
         = bill_address.text_field :zipcode, { placeholder: t("split_checkout.step1.address.zipcode.placeholder") }
         = f.error_message_on "bill_address.zipcode"
 
-      %div{ "data-controller": "dependant-select", "data-dependant-select-options-value": countries_with_states }
+      %div{ "data-controller": "dependent-select", "data-dependent-select-options-value": countries_with_states }
         - bill_address_country = @order.bill_address.country || DefaultCountry.country
 
         %div.checkout-input
           = bill_address.label :country_id, t("split_checkout.step1.address.country_id.label")
-          = bill_address.select :country_id, countries, { selected: bill_address_country.id }, { "data-dependant-select-target": "source", "data-action": "dependant-select#handleSelectChange" }
+          = bill_address.select :country_id, countries, { selected: bill_address_country.id }, { "data-dependent-select-target": "source", "data-action": "dependent-select#handleSelectChange" }
 
         %div.checkout-input
           = bill_address.label :state_id, t("split_checkout.step1.address.state_id.label")
-          = bill_address.select :state_id, states_for_country(bill_address_country), { selected: @order.bill_address&.state_id }, { "data-dependant-select-target": "select" }
+          = bill_address.select :state_id, states_for_country(bill_address_country), { selected: @order.bill_address&.state_id }, { "data-dependent-select-target": "select" }
 
       - if spree_current_user
         %div.checkout-input
@@ -130,16 +130,16 @@
           = ship_address.text_field :zipcode, { placeholder: t("split_checkout.step1.address.zipcode.placeholder") }
           = f.error_message_on "ship_address.zipcode"
 
-        %div{ "data-controller": "dependant-select", "data-dependant-select-options-value": countries_with_states }
+        %div{ "data-controller": "dependent-select", "data-dependent-select-options-value": countries_with_states }
           - ship_address_country = @order.ship_address.country || DefaultCountry.country
 
           %div.checkout-input
             = ship_address.label :country_id, t("split_checkout.step1.address.country_id.label")
-            = ship_address.select :country_id, countries, { selected: ship_address_country.id }, { "data-dependant-select-target": "source", "data-action": "dependant-select#handleSelectChange" }
+            = ship_address.select :country_id, countries, { selected: ship_address_country.id }, { "data-dependent-select-target": "source", "data-action": "dependent-select#handleSelectChange" }
 
           %div.checkout-input
             = ship_address.label :state_id, t("split_checkout.step1.address.state_id.label")
-            = ship_address.select :state_id, states_for_country(ship_address_country), { selected: @order.ship_address&.state_id }, { "data-dependant-select-target": "select" }
+            = ship_address.select :state_id, states_for_country(ship_address_country), { selected: @order.ship_address&.state_id }, { "data-dependent-select-target": "select" }
 
     - if spree_current_user
       %div.checkout-input{ "data-toggle-target": "content", style: "display: #{display_ship_address ? 'block' : 'none'}" }

app/views/spree/admin/orders/_filters.html.haml

@@ -54,6 +54,6 @@
     .actions.filter-actions
       %a.button.icon-search{'ng-click' => 'fetchResults()'}
         = t(:filter_results)
-      %a.button{'ng-click' => 'clearFilters()', "id": "clear_filters_button"}
+      %a.button{'ng-click' => 'clearFilters()', "id": "clear_filters_button", "class": ("secondary" if feature?(:admin_style_v2, spree_current_user)) }
         =  t(:clear_filters)
           

app/views/spree/admin/orders/bulk_management.html.haml

@@ -23,8 +23,8 @@
       %br
         %div{ data: { controller: "flatpickr", "flatpickr-mode-value": "range", "flatpickr-default-date": "{{ [startDate, endDate] }}" } }
           %input.datepicker.fullwidth{ class: "datepicker", data: { "flatpickr-target": "instance" } }
-          %input{ type: "text", id: 'start_date_filter', 'ng-model': "startDate", data: { "flatpickr-target": "start" }, style: "display: none;", "confirm-change": "confirmRefresh()" }
-          %input{ type: "text", id: 'end_date_filter', 'ng-model': "endDate", data: { "flatpickr-target": "end" }, style: "display: none;", "confirm-change": "confirmRefresh()"}
+          %input{ type: "text", id: 'start_date_filter', 'ng-model': "startDate", data: { "flatpickr-target": "start" }, style: "display: none;" }
+          %input{ type: "text", id: 'end_date_filter', 'ng-model': "endDate", data: { "flatpickr-target": "end" }, style: "display: none;" }
     .one.column  
     .filter_select{ :class => "three columns" }
       %label{ :for => 'supplier_filter' }

app/views/spree/admin/orders/index.html.haml

@@ -95,17 +95,17 @@
       %td.align-center
         %span{'ng-bind-html' => 'order.display_total'}
       %td.actions
-        %div.row-loading-icons
-          %div{ng: {show: 'rowStatus[order.id] == "loading"', cloak: true}, style: "width: 30px; height: 30px;"}
-            = render partial: "components/spinner"
-          %i.success.icon-ok-sign{ng: {show: 'rowStatus[order.id] == "success"'} }
-          %i.error.icon-remove-sign.with-tip{ng: {show: 'rowStatus[order.id] == "error"'}, 'ofn-with-tip' => t('.order_not_updated')}
-        %a.icon_link.with-tip.icon-edit.no-text{'ng-href' => '{{order.edit_path}}', 'data-action' => 'edit', 'ofn-with-tip' => t('.edit')}
-        %div{'ng-if' => 'order.ready_to_ship'}
-          %button.icon-road.icon_link.with-tip.no-text{'ng-click' => 'shipOrder(order)', rel: 'nofollow', 'ofn-with-tip' => t('.ship')}
-        %div{'ng-if' => 'order.ready_to_capture'}
-          %button.icon-capture.icon_link.no-text{'ng-click' => 'capturePayment(order)', rel: 'nofollow', 'ofn-with-tip' => t('.capture')}
-
+        .flex
+          %div.row-loading-icons
+            %div{ng: {show: 'rowStatus[order.id] == "loading"', cloak: true}, style: "width: 30px; height: 30px;"}
+              = render partial: "components/spinner"
+            %i.success.icon-ok-sign{ng: {show: 'rowStatus[order.id] == "success"'} }
+            %i.error.icon-remove-sign.with-tip{ng: {show: 'rowStatus[order.id] == "error"'}, 'ofn-with-tip' => t('.order_not_updated')}
+          %a.icon_link.with-tip.icon-edit.no-text{'ng-href' => '{{order.edit_path}}', 'data-action' => 'edit', 'ofn-with-tip' => t('.edit')}
+          %div{'ng-if' => 'order.ready_to_ship'}
+            %button.icon-road.icon_link.with-tip.no-text{'ng-click' => 'shipOrder(order)', rel: 'nofollow', 'ofn-with-tip' => t('.ship')}
+          %div{'ng-if' => 'order.ready_to_capture'}
+            %button.icon-capture.icon_link.no-text{'ng-click' => 'capturePayment(order)', rel: 'nofollow', 'ofn-with-tip' => t('.capture')}
 .sixteen.columns.alpha#loading{ 'ng-show' => 'RequestMonitor.loading' }
   = render partial: "components/admin_spinner"
   %h1

app/views/spree/admin/shared/_head.html.haml

@@ -3,6 +3,8 @@
 = csrf_meta_tags
 = action_cable_meta_tag
 
+= action_cable_meta_tag
+
 %title
   - if content_for? :html_title
     = yield :html_title
@@ -10,7 +12,7 @@
     = t(controller.controller_name, :default => controller.controller_name.titleize)
   = " - OFN #{t(:administration)}"
 
-%link{:href => "https://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600&subset=latin,cyrillic,greek,vietnamese", :rel => "stylesheet", :type => "text/css"}
+%link{:href => "https://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,700&subset=latin,cyrillic,greek,vietnamese", :rel => "stylesheet", :type => "text/css"}
 
 = stylesheet_pack_tag 'admin-styles', media: "screen, print"
 = render "layouts/bugsnag_js"

app/views/spree/admin/shared/_product_sub_menu.html.haml

@@ -4,3 +4,5 @@
     = tab :properties
     = tab :variant_overrides, url: main_app.admin_inventory_path, match_path: '/inventory'
     = tab :import, url: main_app.admin_product_import_path, match_path: '/product_import'
+    - if feature?(:new_products_page, spree_current_user)
+      = tab :new_products, url: main_app.admin_new_products_path, match_path: '/new_products'

app/views/spree/layouts/admin.html.haml

@@ -3,7 +3,7 @@
   %head{"data-hook" => "admin_inside_head"}
     = render :partial => 'spree/admin/shared/head'
 
-  %body.admin
+  %body.admin{ "class": ("admin-v2" if feature?(:admin_style_v2, spree_current_user)) }
     - if content_for?(:main_ng_app_name)
       - if content_for?(:main_ng_ctrl_name)
         %div{ "ng-app" => yield(:main_ng_app_name).strip.html_safe, "ng-controller" => yield(:main_ng_ctrl_name).strip.html_safe }

app/webpacker/controllers/csv_select_controller.js

@@ -1,21 +1,31 @@
 import { Controller } from "stimulus";
 
 export default class extends Controller {
-  static targets = ["reportType", "checkbox", "label"]
+  static targets = ["reportType", "checkbox", "label"];
 
   handleSelectChange() {
-    this.reportTypeTarget.value == "csv" ? this.disableField() : this.enableField()
+    this.reportTypeTarget.value == "csv"
+      ? this.disableField()
+      : this.enableField();
   }
 
   disableField() {
-    this.checkboxTarget.checked = false;
-    this.checkboxTarget.disabled = true;
-    this.labelTarget.classList.add("disabled");
+    if (this.hasCheckboxTarget) {
+      this.checkboxTarget.checked = false;
+      this.checkboxTarget.disabled = true;
+    }
+    if (this.hasLabelTarget) {
+      this.labelTarget.classList.add("disabled");
+    }
   }
 
   enableField() {
-    this.checkboxTarget.checked = true;
-    this.checkboxTarget.disabled = false;
-    this.labelTarget.classList.remove("disabled");
+    if (this.hasCheckboxTarget) {
+      this.checkboxTarget.checked = true;
+      this.checkboxTarget.disabled = false;
+    }
+    if (this.hasLabelTarget) {
+      this.labelTarget.classList.remove("disabled");
+    }
   }
 }

app/webpacker/controllers/flatpickr_controller.js

@@ -17,7 +17,10 @@ import ShortcutButtonsPlugin from "shortcut-buttons-flatpickr";
 import labelPlugin from "flatpickr/dist/plugins/labelPlugin/labelPlugin";
 
 export default class extends Flatpickr {
-  static values = { enableTime: Boolean, mode: String };
+  /*
+   * defaultDate (optional): "startOfDay" | "endOfDay"
+   */
+  static values = { enableTime: Boolean, mode: String, defaultDate: String };
   static targets = ["start", "end"];
   locales = {
     ar: ar,
@@ -51,6 +54,7 @@ export default class extends Flatpickr {
       plugins: this.plugins(mode, datetimepicker),
       mode,
     };
+    window.addEventListener("flatpickr:change", this.onChangeEvent.bind(this));
   }
 
   clear(e) {
@@ -59,6 +63,26 @@ export default class extends Flatpickr {
 
   open() {
     this.fp.element.dispatchEvent(new Event("focus"));
+    if (!this.fp.selectedDates.length) {
+      this.setDefaultDateValue();
+    }
+  }
+  onChangeEvent(e) {
+    if (
+      this.modeValue == "range" &&
+      this.hasStartTarget &&
+      this.hasEndTarget &&
+      e.detail.startDate &&
+      e.detail.endDate
+    ) {
+      // date range mode
+      this.startTarget.value = e.detail.startDate;
+      this.endTarget.value = e.detail.endDate;
+      this.fp.setDate([e.detail.startDate, e.detail.endDate]);
+    } else if (e.detail.date) {
+      // single date mode
+      this.fp.setDate(e.detail.date);
+    }
   }
 
   change(selectedDates, dateStr, instance) {
@@ -118,4 +142,16 @@ export default class extends Flatpickr {
         break;
     }
   };
+
+  setDefaultDateValue() {
+    if (this.defaultDateValue === "startOfDay") {
+      this.fp.setDate(moment().startOf("day").format());
+    } else if (this.defaultDateValue === "endOfDay") {
+      /*
+       * We use "startOf('day')" of tomorrow in order to not lose
+       * the records between [23:59:00 ~ 23:59:59] of today
+       */
+      this.fp.setDate(moment().add(1, "days").startOf("day").format());
+    }
+  }
 }

app/webpacker/controllers/index.js

@@ -0,0 +1,16 @@
+// Load all the controllers within this directory and all subdirectories.
+// Controller files must be named *_controller.js.
+import { Application } from "stimulus";
+import { definitionsFromContext } from "stimulus/webpack-helpers";
+import StimulusReflex from "stimulus_reflex";
+import consumer from "../channels/consumer";
+import controller from "../controllers/application_controller";
+import CableReady from "cable_ready";
+
+const application = Application.start();
+const context = require.context("controllers", true, /_controller\.js$/);
+application.load(definitionsFromContext(context));
+application.consumer = consumer;
+StimulusReflex.initialize(application, { controller, isolate: true });
+StimulusReflex.debug = process.env.RAILS_ENV === "development";
+CableReady.initialize({ consumer });

app/webpacker/controllers/primary_details_controller.js

@@ -3,6 +3,7 @@ import CableReady from "cable_ready";
 
 export default class extends Controller {
   static values = { primaryProducer: String, enterpriseSells: String };
+  static targets = ["spinner"];
 
   primaryProducerChanged(event) {
     this.primaryProducerValue = event.currentTarget.checked;
@@ -12,6 +13,7 @@ export default class extends Controller {
   enterpriseSellsChanged(event) {
     if (event.currentTarget.checked) {
       this.enterpriseSellsValue = event.currentTarget.value;
+      this.spinnerTarget.classList.remove("hidden");
       this.makeRequest();
     }
   }
@@ -25,6 +27,9 @@ export default class extends Controller {
       }
     )
       .then((data) => data.json())
-      .then(CableReady.perform);
+      .then((operation) => {
+        CableReady.perform(operation);
+        this.spinnerTarget.classList.add("hidden");
+      });
   }
 }

app/webpacker/controllers/products_table_controller.js

@@ -0,0 +1,46 @@
+import ApplicationController from "./application_controller";
+
+export default class extends ApplicationController {
+  connect() {
+    super.connect();
+    document.addEventListener(
+      "stimulus-reflex:before",
+      this.handleBeforeReflex.bind(this)
+    );
+    document.addEventListener(
+      "stimulus-reflex:after",
+      this.handleAfterReflex.bind(this)
+    );
+  }
+
+  disconnect() {
+    super.disconnect();
+    document.removeEventListener(
+      "stimulus-reflex:before",
+      this.handleBeforeReflex.bind(this)
+    );
+    document.removeEventListener(
+      "stimulus-reflex:after",
+      this.handleAfterReflex.bind(this)
+    );
+  }
+
+  handleBeforeReflex(event) {
+    if (event.detail.reflex.indexOf("ProductsTableComponent#") !== -1) {
+      this.showLoading();
+    }
+  }
+
+  handleAfterReflex(event) {
+    if (event.detail.reflex.indexOf("ProductsTableComponent#") !== -1) {
+      this.hideLoading();
+    }
+  }
+
+  showLoading() {
+    this.element.classList.add("loading");
+  }
+  hideLoading() {
+    this.element.classList.remove("loading");
+  }
+}

app/webpacker/controllers/search-input_controller.js

@@ -0,0 +1,28 @@
+import ApplicationController from "./application_controller";
+
+export default class extends ApplicationController {
+  connect() {
+    super.connect();
+    this.element
+      .querySelector("input")
+      .addEventListener("keydown", this.searchOnEnter);
+  }
+
+  disconnect() {
+    super.disconnect();
+    this.element
+      .querySelector("input")
+      .removeEventListener("keydown", this.searchOnEnter);
+  }
+
+  searchOnEnter = (e) => {
+    if (e.key === "Enter") {
+      this.element.querySelector(".search-button").click();
+    }
+  };
+
+  search(e) {
+    this.element.querySelector(".search-button").dataset["value"] =
+      e.target.value;
+  }
+}

app/webpacker/controllers/selector_controller.js

@@ -0,0 +1,52 @@
+import ApplicationController from "./application_controller";
+
+export default class extends ApplicationController {
+  connect() {
+    super.connect();
+    window.addEventListener("click", this.closeOnClickOutside);
+    this.computeItemsHeight();
+  }
+
+  disconnect() {
+    super.disconnect();
+    window.removeEventListener("click", this.closeOnClickOutside);
+  }
+
+  initialize() {
+    this.close();
+  }
+
+  afterReflex() {
+    this.computeItemsHeight();
+  }
+
+  toggle = (event) => {
+    event.preventDefault();
+    this.element.querySelector(".selector").classList.toggle("selector-close");
+  };
+
+  // Private
+  closeOnClickOutside = (event) => {
+    if (
+      !this.element.contains(event.target) &&
+      this.isVisible(this.element.querySelector(".selector-wrapper"))
+    ) {
+      this.close();
+    }
+  };
+
+  computeItemsHeight = () => {
+    const items = this.element.querySelector(".selector-items");
+    const rect = items.getBoundingClientRect();
+    items.style.maxHeight = `calc(100vh - ${rect.height}px)`;
+  };
+
+  isVisible = (element) => {
+    const style = window.getComputedStyle(element);
+    return style.display !== "none" && style.visibility !== "hidden";
+  };
+
+  close = () => {
+    this.element.querySelector(".selector").classList.add("selector-close");
+  };
+}

app/webpacker/controllers/selector_with_filter_controller.js

@@ -0,0 +1,15 @@
+import SelectorController from "./selector_controller";
+
+export default class extends SelectorController {
+  static targets = ["items"];
+
+  filter = (event) => {
+    const query = event.target.value;
+
+    this.itemsTargets.forEach((el, i) => {
+      el.style.display = el.textContent.toLowerCase().includes(query)
+        ? ""
+        : "none";
+    });
+  };
+}

app/webpacker/controllers/sticky_controller.js

@@ -15,7 +15,7 @@ export default class extends Controller {
     this.containerTarget.style.bottom = "-1px";
     const observer = new IntersectionObserver(
       ([e]) => {
-        e.target.classList.toggle("sticked", e.intersectionRatio < 1);
+        e.target.classList.toggle("sticked", e.intersectionRatio <= 1);
       },
       { threshold: [1] }
     );

app/webpacker/css/admin/all.scss

@@ -120,3 +120,12 @@
 @import "components/tom_select";
 
 @import 'app/components/help_modal_component/help_modal_component';
+@import "app/components/product_component/product_component";
+@import "app/components/selector_component/selector_component";
+@import "app/components/products_table_component/products_table_component";
+@import "app/components/selector_with_filter_component/selector_with_filter_component";
+@import "app/components/pagination_component/pagination_component";
+@import "app/components/table_header_component/table_header_component";
+@import "app/components/search_input_component/search_input_component";
+
+@import "v2/main.scss";

app/webpacker/css/admin/components/navigation.scss

@@ -78,7 +78,6 @@ nav.menu {
       text-transform: uppercase;
       position: relative;
       text-align: center;
-      font-weight: 600;      
 
       i {
         display: inline;

app/webpacker/css/admin/openfoodnetwork.scss

@@ -195,7 +195,7 @@ table#listing_enterprise_groups {
 }
 
 .fullwidth_inputs {
-  input[type=text], select {
+  #{$text-inputs}, select {
     width: 100%;
   }
 }

app/webpacker/css/admin/shared/forms.scss

@@ -1,12 +1,11 @@
-input[type="text"],
-input[type="password"],
-input[type="email"],
+$text-inputs:
+  "input[type=text], input[type=password], input[type=email], input[type=url], input[type=tel]";
+
+#{$text-inputs},
 input[type="date"],
 input[type="datetime"],
 input[type="time"],
-input[type="url"],
 input[type="number"],
-input[type="tel"],
 textarea, fieldset {
   @include border-radius($border-radius);
   padding: 7px 10px;

app/webpacker/css/admin/v2/components/buttons.scss

@@ -0,0 +1,66 @@
+/* Overide buttons.scss app/webpacker/css/admin/components/buttons.scss */
+
+@mixin backgroundAndBorder($color) {
+  background-color: $color;
+  border: 2px solid $color;
+}
+
+input[type="submit"],
+select[type="submit"],
+.select2-container-multi [type="submit"].select2-choices,
+input[type="button"],
+select[type="button"],
+.select2-container-multi [type="button"].select2-choices,
+button,
+.button,
+.actions a:not([class*="icon-"]),
+.admin__section-header .ofn-drop-down // Same behavior as the button
+{
+  &.disabled,
+  &[disabled] {
+    @include backgroundAndBorder($v2-light-grey);
+  }
+
+  &:not(.disabled):not([disabled]):not(.secondary) {
+    // Change the color of the button only if it's not disabled
+    @include backgroundAndBorder($v2-blue-light);
+
+    &:hover {
+      @include backgroundAndBorder($v2-blue);
+      box-shadow: $v2-box-shadow;
+    }
+  }
+
+  &.secondary {
+    background-color: $white;
+    border: 2px solid $v2-blue-light;
+    color: $v2-blue-light;
+
+    &:hover {
+      background-color: $v2-blue-lightest;
+      color: $v2-blue;
+      box-shadow: $v2-box-shadow;
+    }
+  }
+
+  &.active {
+    @include backgroundAndBorder($v2-blue);
+  }
+}
+
+#table-filter .actions {
+  /* used to draw a line on the right and left of the actions buttons 
+  We can then remove the dropshadow on the buttons */
+  &:before,
+  &:after {
+    background-color: $v2-light-grey; // same color as the border of the fieldset. see forms.scss
+    height: 1px;
+    content: attr(data-initials);
+    flex-grow: 1; // make the line as long as it can
+  }
+}
+
+#table-filter fieldset:has(.actions) {
+  // do not apply border to filter actions as it's drawn by the #table-filter .actions before and after pseudo elements
+  border-bottom: 0;
+}

app/webpacker/css/admin/v2/components/progress.scss

@@ -0,0 +1,9 @@
+/* Overide app/webpacker/css/admin/components/progress.scss file */
+
+#progress {
+  background-color: $v2-blue;
+}
+
+#loading {
+  color: $v2-blue;
+}

app/webpacker/css/admin/v2/components/tables.scss

@@ -0,0 +1,73 @@
+/* Overide tables.scss app/webpacker/css/admin/components/tables.scss */
+
+table thead th {
+  background-color: $v2-medium-light-grey;
+  border: none;
+  color: $v2-blue;
+  text-transform: capitalize;
+  font-size: 13px;
+
+  a {
+    border: none;
+    color: $v2-blue;
+  }
+}
+
+table tbody tr {
+  &:first-child th,
+  &:first-child td {
+    border-top: none; // Don't show the top border of the first row
+  }
+  td:not(:first-child) {
+    border-left: none; // Only show left border on the first cells, as it indicates the order state by its color
+  }
+
+  td {
+    border-bottom: none; // By default, do not show the border of the cells
+    border-right: none;
+    border-top: none;
+
+    border-bottom: 2px solid $v2-medium-light-grey;
+    &.actions {
+      border-bottom: 2px solid $v2-medium-light-grey !important; // needs to be important because of already defined with important
+    }
+    > .flex {
+      display: flex;
+      column-gap: 10px;
+    }
+  }
+  &.even,
+  &.odd {
+    td {
+      background-color: transparent; // Do not use odd and even colors for background
+    }
+  }
+}
+
+table th.actions,
+table td.actions {
+  // Special for icons in the actions column
+  [class*="icon-"].no-text {
+    border: 2px solid $v2-blue-light;
+    background-color: $v2-blue-lightest;
+
+    &:hover {
+      border-color: $v2-blue;
+      background-color: $v2-blue-light;
+      box-shadow: $v2-box-shadow;
+
+      &:before {
+        color: white;
+      }
+    }
+  }
+}
+
+table#listing_orders td {
+  // When the table is the listing of orders, we need to increase the height of the cells
+  padding: 20px 0;
+
+  &.actions {
+    padding-left: 20px;
+  }
+}