Merge pull request #10976 from Matt-Yorkley/payment-localized-number

Require localized_number in Payment class

.dockerignore

@@ -2,3 +2,4 @@
 .gitignore
 log/*
 tmp/*
+node_modules/

.env.development

@@ -5,9 +5,17 @@
 #
 #     cp .env.development .env.local
 
+VERBOSE_QUERY_LOGS=true
+
 SECRET_TOKEN="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
 
 OFN_REDIS_URL="redis://localhost:6379/1"
 OFN_REDIS_JOBS_URL="redis://localhost:6379/2"
 
 SITE_URL="0.0.0.0:3000"
+
+# Deactivate rack-timeout in development.
+# https://github.com/zombocom/rack-timeout#configuring
+RACK_TIMEOUT_SERVICE_TIMEOUT="0"
+RACK_TIMEOUT_WAIT_TIMEOUT="0"
+RACK_TIMEOUT_WAIT_OVERTIME="0"

.env.test

@@ -6,3 +6,6 @@ STRIPE_SECRET_TEST_API_KEY="bogus_key"
 STRIPE_CUSTOMER="bogus_customer"
 
 SITE_URL="test.host"
+
+OPENID_APP_ID="test-provider"
+OPENID_APP_SECRET="12345"

.gitattributes

@@ -0,0 +1,11 @@
+# Set default behavior to automatically normalize line endings.
+* text=auto
+
+# Set line endings to LF, even on Windows. Otherwise, execution within Docker fails.
+# See https://docs.github.com/en/get-started/getting-started-with-git/configuring-git-to-handle-line-endings#per-repository-settings
+*.sh text eol=lf
+
+# Same thing for following files, but they don't have an sh extension
+pre-commit eol=lf
+webpack-dev-server eol=lf
+install-bundler eol=lf

.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,13 +18,12 @@ 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
 
-- [ ] Publish and notify [#global-community]:
-  > The next release is ready: https://github.com/openfoodfoundation/openfoodnetwork/releases/latest
+- [ ] Publish and notify [#global-community] (this is automatically posted with a plugin)
 - [ ] Deploy the new release to all managed instances.
   <details><summary>Command line instructions</summary>
   <pre>
@@ -44,5 +43,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/dependabot.yml

@@ -6,10 +6,12 @@ updates:
     schedule:
       interval: "daily"
     open-pull-requests-limit: 10
+    # Only specific requirements are specified in Gemfile, so don't touch it.
     versioning-strategy: lockfile-only
 
   - package-ecosystem: "npm"
     directory: "/"
     schedule:
       interval: "daily"
-    versioning-strategy: lockfile-only
+    # All versions are specified in package.json, so please update them.
+    versioning-strategy: increase

.github/workflows/brakeman-analysis.yml

@@ -23,17 +23,17 @@ jobs:
     steps:
     # Checkout the repository to the GitHub Actions runner
     - name: Checkout
-      uses: actions/checkout@v2
+      uses: actions/checkout@v3
 
     # Customize the ruby version depending on your needs
     - name: Setup Ruby
-      uses: actions/setup-ruby@v1
+      uses: ruby/setup-ruby@v1
       with:
         ruby-version: '2.7'
 
     - name: Setup Brakeman
       env:
-        BRAKEMAN_VERSION: '4.10' # SARIF support is provided in Brakeman version 4.10+
+        BRAKEMAN_VERSION: '5.4.0'
       run: |
         gem install brakeman --version $BRAKEMAN_VERSION
 
@@ -41,10 +41,11 @@ jobs:
     - name: Scan
       continue-on-error: true
       run: |
+        git show --no-patch # the commit being tested (which is often a merge due to actions/checkout@v3)
         brakeman -f sarif -o output.sarif.json .
 
     # Upload the SARIF file generated in the previous step
     - name: Upload SARIF
-      uses: github/codeql-action/upload-sarif@v1
+      uses: github/codeql-action/upload-sarif@v2
       with:
         sarif_file: output.sarif.json

.github/workflows/build.yml

@@ -3,10 +3,12 @@ name: Build
 on:
   workflow_dispatch:
   push:
+    branches-ignore:    
+      - 'dependabot/**'
   pull_request:
 
 env:
-  DISABLE_KNAPSACK: true
+  DISABLE_KNAPSACK_PRO: false
   TIMEZONE: UTC
   COVERAGE: true
   RAILS_ENV: test
@@ -15,8 +17,8 @@ permissions:
   contents: read
 
 jobs:
-  rspec:
-    runs-on: ubuntu-20.04
+  knapsack_rspec_controllers:
+    runs-on: ubuntu-22.04
     services:
       postgres:
         image: postgres:10
@@ -31,30 +33,31 @@ 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@v2
+      - 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@v2
+      - uses: actions/setup-node@v3
         with:
-          node-version: '14.15.5'
+          node-version-file: .node-version
 
       - name: Install JS dependencies
         run: yarn install --frozen-lockfile
@@ -65,19 +68,398 @@ 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: |
+          git show --no-patch # the commit being tested (which is often a merge due to actions/checkout@v3)
+          bundle exec rake knapsack_pro:rspec
+
+  knapsack_rspec_models:
+    runs-on: ubuntu-22.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-file: .node-version
+
+      - 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-22.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-file: .node-version
+
+      - 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()
-        uses: actions/upload-artifact@v2
+        uses: actions/upload-artifact@v3
         with:
           name: failed-tests-screenshots
           path: tmp/capybara/screenshots/*.png
           retention-days: 7
           if-no-files-found: ignore
 
-  test-the-rest:
-    runs-on: ubuntu-20.04
+  knapsack_rspec_system_consumer:
+    runs-on: ubuntu-22.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-file: .node-version
+
+      - 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-22.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-file: .node-version
+
+      - 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-22.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-file: .node-version
+
+      - 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-22.04
     services:
       postgres:
         image: postgres:10
@@ -92,16 +474,21 @@ jobs:
           POSTGRES_USER: ofn
           POSTGRES_PASSWORD: f00d
     steps:
-      - uses: actions/checkout@v2
+      - 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@v2
+      - uses: actions/setup-node@v3
         with:
-          node-version: '14.15.5'
+          node-version-file: .node-version
 
       - name: Install JS dependencies
         run: yarn install --frozen-lockfile
@@ -110,12 +497,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"]

.github/workflows/linters.yml

@@ -9,7 +9,11 @@ jobs:
     steps:
       - name: Check out code
         uses: actions/checkout@v1
+
       - uses: ruby/setup-ruby@v1
+
+      - run: git show --no-patch # the commit being tested (which is often a merge due to actions/checkout@v3)
+
       - name: rubocop
         uses: reviewdog/action-rubocop@v2
         with:
@@ -23,7 +27,17 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version-file: .node-version
+
+      - name: Install JS dependencies
+        run: yarn install --frozen-lockfile
+
+      - run: git show --no-patch # the commit being tested (which is often a merge due to actions/checkout@v3)
+
       - name: prettier
         uses: EPMatt/reviewdog-action-prettier@v1
         with:

.github/workflows/mapi.yml

@@ -12,7 +12,7 @@ jobs:
     strategy:
       fail-fast: true
     steps:
-    - uses: actions/checkout@v2
+    - uses: actions/checkout@v3
     - run: docker/build
     - run: docker-compose up --detach
     - run: until curl -f -s http://localhost:3000; do echo "waiting for api server"; sleep 1; done
@@ -39,13 +39,13 @@ jobs:
 
     # Archive HTML report
     - name: Archive Mayhem for API report
-      uses: actions/upload-artifact@v2
+      uses: actions/upload-artifact@v3
       with:
         name: mapi-report
         path: mapi.html
 
     # Upload SARIF file (only available on public repos or github enterprise)
     - name: Upload SARIF file
-      uses: github/codeql-action/upload-sarif@v1
+      uses: github/codeql-action/upload-sarif@v2
       with:
         sarif_file: mapi.sarif

.gitignore

@@ -50,7 +50,6 @@ vendor/bundle/
 coverage
 /reports/
 !/reports/README.md
-/spec/components/stories/**/*.stories.json
 
 /public/packs
 /public/packs-test

.node-version

@@ -1 +1 @@
-14.16.1
+17.9.1

.prettierignore

@@ -1,6 +1,5 @@
 # Basically, ignore everythings expect app/webpacker/controllers/*.js and app/webpacker/packs/*.js
-*.css
-*.scss
+
 *.md
 *.yml
 *.yaml
@@ -10,7 +9,10 @@
 babel.config.js
 postcss.config.js
 
-.storybook/
+/app/webpacker/css/darkswarm/
+/app/webpacker/css/mail/
+/app/webpacker/css/shared/
+
 /app/assets/
 /config/
 /coverage/

.prettierrc.json

@@ -1 +1,3 @@
-{}
+{
+  "printWidth": 100
+}

.rubocop_styleguide.yml

@@ -2,9 +2,8 @@
 #
 # These are the rules we agreed upon and we work towards.
 AllCops:
-  NewCops: disable
+  NewCops: enable
   SuggestExtensions: false
-  TargetRailsVersion: 5.0
   Exclude:
     - 'bin/**/*'
     - 'db/**/*'
@@ -41,6 +40,7 @@ Metrics/BlockLength:
     "resources",
     "scenario",
     "shared_examples",
+    "shared_examples_for",
     "xdescribe",
   ]
 

.storybook/main.js

@@ -1,7 +0,0 @@
-module.exports = {
-  stories: ['../spec/components/stories/**/*.stories.json'],
-  addons: [
-    '@storybook/addon-docs',
-    '@storybook/addon-controls',
-  ],
-};

.storybook/preview-head.html

@@ -1,2 +0,0 @@
-<link href='https://fonts.googleapis.com/css?family=Roboto:400,300italic,400italic,300,700,700italic|Oswald:300,400,700' rel='stylesheet' type='text/css'>
-<link rel="stylesheet" media="screen" href="http://localhost:3000/assets/darkswarm/all.css" />

.storybook/preview.js

@@ -1,5 +0,0 @@
-export const parameters = {
-  server: {
-    url: `http://localhost:3000/rails/stories`,
-  },
-};

.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

CONTRIBUTING.md

@@ -57,6 +57,7 @@ TL;DR:
 * Maintain a clean commit history
 * Use a style consistent with the rest of the codebase
 * Before submitting, [rebase your work][rebase] on the current master branch
+* After submitting, be sure to check the [CI test results](ci). Click on a ❌ result to view the logged results and investigate.
 
 From here, your pull request will progress through the [Review, Test, Merge & Deploy process][process].
 
@@ -70,4 +71,5 @@ From here, your pull request will progress through the [Review, Test, Merge & De
 [slack-dev]: https://openfoodnetwork.slack.com/messages/C2GQ45KNU
 [ofn-transifex]: https://www.transifex.com/open-food-foundation/open-food-network/
 [i18n]: https://github.com/openfoodfoundation/openfoodnetwork/wiki/Internationalisation-%28i18n%29
-[welcome-dev]: https://github.com/orgs/openfoodfoundation/projects/2
+[welcome-dev]: https://github.com/orgs/openfoodfoundation/projects/5
+[ci]: https://github.com/openfoodfoundation/openfoodnetwork/wiki/Continuous-Integration

Dockerfile

@@ -28,14 +28,18 @@ RUN apt-get update && apt-get install -y \
   gnupg
 
 # Setup ENV variables
-ENV PATH /usr/local/src/rbenv/shims:/usr/local/src/rbenv/bin:$PATH
+ENV PATH /usr/local/src/rbenv/shims:/usr/local/src/rbenv/bin:/usr/local/src/nodenv/shims:/usr/local/src/nodenv/bin:$PATH
 ENV RBENV_ROOT /usr/local/src/rbenv
+ENV NODENV_ROOT /usr/local/src/nodenv
 ENV CONFIGURE_OPTS --disable-install-doc
 ENV BUNDLE_PATH /bundles
 ENV LD_PRELOAD=/usr/lib/x86_64-linux-gnu/libjemalloc.so
 
 WORKDIR /usr/src/app
-COPY .ruby-version .
+
+# trim spaces and line return from .ruby-version file
+COPY .ruby-version .ruby-version.raw
+RUN cat .ruby-version.raw | tr -d '\r\t ' > .ruby-version
 
 # Install Rbenv & Ruby
 RUN git clone --depth 1 https://github.com/rbenv/rbenv.git ${RBENV_ROOT} && \
@@ -50,10 +54,19 @@ RUN sh -c "echo 'deb http://apt.postgresql.org/pub/repos/apt/ `lsb_release -cs`-
     apt-get update && \
     apt-get install -yqq --no-install-recommends postgresql-client-10 libpq-dev
 
-# Install NodeJs and yarn
-RUN curl -sL https://deb.nodesource.com/setup_14.x | bash - \
-    && apt-get install --no-install-recommends -y nodejs \
-    && npm install -g yarn
+
+# trim spaces and line return from .node-version file
+COPY .node-version .node-version.raw
+RUN cat .node-version.raw | tr -d '\r\t ' > .node-version
+
+# Install Node and Yarn with Nodenv
+RUN git clone --depth 1 https://github.com/nodenv/nodenv.git ${NODENV_ROOT} && \
+    git clone --depth 1 https://github.com/nodenv/node-build.git ${NODENV_ROOT}/plugins/node-build && \
+    git clone --depth 1 https://github.com/pine/nodenv-yarn-install.git ${NODENV_ROOT}/plugins/nodenv-yarn-install && \
+    git clone --depth 1 https://github.com/nodenv/nodenv-package-rehash.git ${NODENV_ROOT}/plugins/nodenv-package-rehash && \
+    echo 'eval "$(nodenv init -)"' >> /etc/profile.d/nodenv.sh && \
+    nodenv install $(cat .node-version) && \
+    nodenv global $(cat .node-version)
 
 # Install Chrome
 RUN wget --quiet -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add - && \

GETTING_STARTED.md

@@ -11,6 +11,9 @@ Head to our wiki on [Learning Rails](https://github.com/openfoodfoundation/openf
 The fastest way to make it work locally is to use Docker, you only need to setup git, see the [Docker setup guide](docker/README.md).
 Otherwise, for a local setup you will need:
 * Ruby and bundler (check current Ruby version in [.ruby-version](https://github.com/openfoodfoundation/openfoodnetwork/blob/master/.ruby-version) file)
+    - To manage versions, it's recommended to use [rbenv](https://github.com/rbenv/rbenv) or [RVM](https://rvm.io/)
+* Node and yarn (check current Node version in [.node-version](https://github.com/openfoodfoundation/openfoodnetwork/blob/master/.node-version) file)
+    - [nodevn](https://github.com/nodenv/nodenv) is recommended.
 * PostgreSQL database
 * Redis (for background jobs)
 * Chrome (for testing)
@@ -20,15 +23,13 @@ The following guides will provide OS-specific step-by-step instructions to get t
 - [Debian Setup Guide][debian]
 - [OSX Setup Guide][osx]
 
-If you are likely to need to manage multiple version of ruby on your local machine, we recommend version managers such as [rbenv](https://github.com/rbenv/rbenv) or [RVM](https://rvm.io/).
-
 For those new to Rails, the following tutorial will help get you up to speed with configuring a [Rails environment](http://guides.rubyonrails.org/getting_started.html).
 
 ### Get it
 
 So you have set up your local environment according to the requirements listed above. If you're planning on contributing code to the project (which we [LOVE](CONTRIBUTING.md)), it is a good idea to begin by forking this repo using the `Fork` button in the top-right corner of this screen. You should then be able to use `git clone` to copy your fork onto your local machine:
 
-    git clone https://github.com/YOUR_GITHUB_USERNAME_HERE/openfoodnetwork
+    git clone git@github.com:YOUR_GITHUB_USERNAME_HERE/openfoodnetwork.git
 
 Jump into your new local copy of the Open Food Network:
 
@@ -36,7 +37,7 @@ Jump into your new local copy of the Open Food Network:
 
 And then add an `upstream` remote that points to the main repo:
 
-    git remote add upstream https://github.com/openfoodfoundation/openfoodnetwork
+    git remote add upstream git@github.com:openfoodfoundation/openfoodnetwork.git
 
 Fetch the latest version of `master` from `upstream` (ie. the main repo):
 
@@ -47,14 +48,14 @@ Fetch the latest version of `master` from `upstream` (ie. the main repo):
 First, you need to create the database user the app will use by manually typing the following in your terminal:
 
 ```sh
-$ sudo -u postgres psql -c "CREATE USER ofn WITH SUPERUSER CREATEDB PASSWORD 'f00d'"
+sudo --login --user=postgres psql -c "CREATE USER ofn WITH SUPERUSER CREATEDB PASSWORD 'f00d'"
 ```
 
 This will create the "ofn" user as superuser and allowing it to create databases. If this command fails, check the [troubleshooting section](#creating-the-database) for an alternative.
 
 Next, it is _strongly recommended_ to run the setup script.
 ```sh
-$ script/setup
+./script/setup
 ```
 If the script succeeds you're ready to start developing. If not, take a look at the output as it should be informative enough to help you troubleshoot.
 
@@ -68,6 +69,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 +84,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.
 
@@ -111,13 +114,13 @@ Below are fixes to potential issues that can happen during the installation proc
 
 #### Creating the database
 
-If the ```$ sudo -u postgres psql -c "CREATE USER ofn WITH SUPERUSER CREATEDB PASSWORD 'f00d'"``` command doesn't work, you can run the following commands instead:
+If the `sudo -u postgres psql -c "CREATE USER ofn WITH SUPERUSER CREATEDB PASSWORD 'f00d'"` command doesn't work, you can run the following commands instead:
 ```
-$ createuser --superuser --pwprompt ofn
-Enter password for new role: f00d
-Enter it again: f00d
-$ createdb open_food_network_dev --owner=ofn
-$ createdb open_food_network_test --owner=ofn
+createuser --superuser --pwprompt ofn
+# Enter password for new role: f00d
+# Enter it again: f00d
+createdb open_food_network_dev --owner=ofn
+createdb open_food_network_test --owner=ofn
 ```
 If these commands succeed, you should be able to [continue the setup process](#get-it-running).
 
@@ -129,3 +132,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

@@ -6,7 +6,7 @@ git_source(:github) { |repo_name| "https://github.com/#{repo_name}.git" }
 
 gem 'dotenv-rails', require: 'dotenv/rails-now' # Load ENV vars before other gems
 
-gem 'rails', '>= 6.1.4'
+gem 'rails'
 
 # Active Storage
 gem "active_storage_validations"
@@ -14,11 +14,11 @@ gem "aws-sdk-s3", require: false
 gem "image_processing"
 
 gem 'activemerchant', '>= 1.78.0'
-gem 'rexml'
 gem 'angular-rails-templates', '>= 0.3.0'
 gem 'awesome_nested_set'
-gem 'ransack', '2.4.2'
+gem 'ransack', '~> 2.6.0'
 gem 'responders'
+gem 'rexml'
 gem 'webpacker', '~> 5'
 
 gem 'i18n'
@@ -27,7 +27,7 @@ gem 'rails-i18n'
 gem 'rails_safe_tasks', '~> 1.0'
 
 gem "activerecord-import"
-gem "db2fog", github: "openfoodfoundation/db2fog", branch: "rails-6"
+gem "db2fog", github: "openfoodfoundation/db2fog", branch: "rails-7"
 gem "fog-aws", "~> 2.0" # db2fog does not support v3
 gem "mime-types" # required by fog
 
@@ -63,12 +63,17 @@ gem 'devise-token_authenticatable'
 gem 'jwt', '~> 2.3'
 gem 'oauth2', '~> 1.4.7' # Used for Stripe Connect
 
+gem 'datafoodconsortium-connector'
 gem 'jsonapi-serializer'
 gem 'pagy', '~> 5.1'
 
 gem 'rswag-api'
 gem 'rswag-ui'
 
+gem 'omniauth_openid_connect'
+gem 'omniauth-rails_csrf_protection'
+gem 'openid_connect', '~> 1.3'
+
 gem 'angularjs-rails', '1.8.0'
 gem 'bugsnag'
 gem 'haml'
@@ -79,16 +84,16 @@ gem 'actionpack-action_caching'
 #   AMS is deprecated, we will introduce an alternative at some point
 gem "active_model_serializers", "0.8.4"
 gem 'activerecord-session_store'
-gem 'acts-as-taggable-on', '~> 8.1'
+gem 'acts-as-taggable-on'
 gem 'angularjs-file-upload-rails', '~> 2.4.1'
 gem 'bigdecimal', '3.0.2'
 gem 'bootsnap', require: false
 gem 'geocoder'
 gem 'gmaps4rails'
 gem 'mimemagic', '> 0.3.5'
-gem 'paper_trail', '~> 12.1.0'
+gem 'paper_trail', '~> 12.1'
 gem 'rack-rewrite'
-gem 'rack-ssl', require: 'rack/ssl'
+gem 'rack-timeout'
 gem 'roadie-rails'
 
 gem 'hiredis'
@@ -97,16 +102,16 @@ gem 'redis', '>= 4.0', require: ['redis', 'redis/connection/hiredis']
 gem 'sidekiq'
 gem 'sidekiq-scheduler'
 
-gem "cable_ready", "5.0.0.pre9"
-gem "stimulus_reflex", "3.5.0.pre9"
+gem "cable_ready", "5.0.0.rc2"
+gem "stimulus_reflex", "3.5.0.rc2"
 
 gem 'combine_pdf'
 gem 'wicked_pdf'
 gem 'wkhtmltopdf-binary'
 
 gem 'immigrant'
-gem 'roo'
-gem 'spreadsheet_architect'
+gem 'roo' # read spreadsheets
+gem 'spreadsheet_architect' # write spreadsheets
 
 gem 'whenever', require: false
 
@@ -114,7 +119,7 @@ gem 'test-unit', '~> 3.5'
 
 gem 'coffee-rails', '~> 5.0.0'
 
-gem 'mini_racer', '0.4.0'
+gem 'mini_racer'
 
 gem 'angular_rails_csrf'
 
@@ -122,8 +127,6 @@ gem 'jquery-rails', '4.4.0'
 gem 'jquery-ui-rails', '~> 4.2'
 gem "select2-rails", github: "openfoodfoundation/select2-rails", branch: "v349_with_thor_v1"
 
-gem 'ofn-qz', github: 'openfoodfoundation/ofn-qz', branch: 'ofn-rails-4'
-
 gem 'good_migrations'
 
 gem 'flipper'
@@ -131,10 +134,15 @@ gem 'flipper-active_record'
 gem 'flipper-ui'
 
 gem "view_component"
+gem 'view_component_reflex', '3.1.14.pre9'
+
+gem 'mini_portile2', '~> 2.8'
+
+gem "faraday"
+gem "private_address_check"
 
 group :production, :staging do
   gem 'ddtrace'
-  gem 'rack-timeout'
   gem 'sd_notify' # For better Systemd process management. Used by Puma.
 end
 
@@ -143,42 +151,41 @@ group :test, :development do
   gem 'capybara'
   gem 'cuprite'
   gem 'database_cleaner', require: false
+  gem 'debug', '>= 1.0.0'
   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', require: false
   gem 'rswag-specs'
   gem 'shoulda-matchers'
   gem 'timecop'
-  gem 'debug', '>= 1.0.0'
 end
 
 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
 
 group :development do
   gem 'debugger-linecache'
-  gem 'rails-erd'
   gem 'foreman'
   gem 'listen'
   gem 'pry', '~> 0.13.0'
+  gem 'query_count'
+  gem 'rails-erd'
   gem 'rubocop'
   gem 'rubocop-rails'
   gem 'spring'
   gem 'spring-commands-rspec'
   gem 'web-console'
 
-  gem "view_component_storybook"
-
   gem 'rack-mini-profiler', '< 3.0.0'
 end

Procfile

@@ -1,5 +1,5 @@
 # Foreman Procfile. Start all dev server processes with: `foreman start`
 
-rails:      bundle exec rails s -p 3000
+rails:      DEV_CACHING=true bundle exec rails s -p 3000
 webpack:    ./bin/webpack-dev-server
-sidekiq:    bundle exec sidekiq -q mailers -q default
+sidekiq:    DEV_CACHING=true bundle exec sidekiq -q mailers -q default

README.md

@@ -33,9 +33,15 @@ We also have a [Super Admin Guide][super-admin-guide] to help with configuration
 
 ## Testing
 
-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).
+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][welcome-qa] 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 [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)
 
-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! 
 
 ## Licence
 
@@ -46,5 +52,6 @@ Copyright (c) 2012 - 2022 Open Food Foundation, released under the AGPL licence.
 [ofn-handbook]: https://ofn-user-guide.gitbook.io/ofn-handbook/
 [ofn-install]: https://github.com/openfoodfoundation/ofn-install
 [super-admin-guide]: https://ofn-user-guide.gitbook.io/ofn-super-admin-guide
-[welcome-dev]: https://github.com/orgs/openfoodfoundation/projects/2
+[welcome-dev]: https://github.com/orgs/openfoodfoundation/projects/5
+[welcome-qa]: https://github.com/orgs/openfoodfoundation/projects/6
 [zenhub]: https://www.zenhub.com/extension

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/admin_ofn.js.coffee

@@ -12,5 +12,6 @@ angular.module("ofn.admin", [
   "admin.orders"
 ]).config ($httpProvider, $locationProvider, $qProvider) ->
   $httpProvider.defaults.headers.common["Accept"] = "application/json, text/javascript, */*"
+  # for the next line, you should also probably check file: app/assets/javascripts/admin/utils/utils.js.coffee
   $locationProvider.hashPrefix('')
   $qProvider.errorOnUnhandledRejections(false)

app/assets/javascripts/admin/all.js

@@ -7,7 +7,6 @@
 
 // jquery and angular
 //= require jquery2
-//= require jquery_ujs
 //= require jquery.ui.all
 //= require jquery.powertip
 //= require jquery.cookie

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/enterprises/controllers/enterprise_controller.js.coffee

@@ -55,28 +55,12 @@ angular.module("admin.enterprises")
         else
           alert ("#{manager.email}" + " " + t("is_already_manager"))
 
-    $scope.inviteManager = ->
-      $scope.invite_errors = $scope.invite_success = null
-      email = $scope.newUser
-
-      $http.post("/admin/manager_invitations", {email: email, enterprise_id: $scope.Enterprise.id}).then (response)->
-          $scope.addManager({id: response.data.user, email: email})
-          $scope.invite_success = t('user_invited', email: email)
-        .catch (response) ->
-          $scope.invite_errors = response.data.errors
-
-    $scope.resetModal = ->
-      $scope.newUser = $scope.invite_errors = $scope.invite_success = null
-
     $scope.removeLogo = ->
       $scope.performEnterpriseAction("removeLogo", "immediate_logo_removal_warning", "removed_logo_successfully")
 
     $scope.removePromoImage = ->
       $scope.performEnterpriseAction("removePromoImage", "immediate_promo_image_removal_warning", "removed_promo_image_successfully")
 
-    $scope.removeTermsAndConditions = ->
-      $scope.performEnterpriseAction("removeTermsAndConditions", "immediate_terms_and_conditions_removal_warning", "removed_terms_and_conditions_successfully")
-
     $scope.performEnterpriseAction = (enterpriseActionName, warning_message_key, success_message_key) ->
       return unless confirm($scope.translation(warning_message_key))
 

app/assets/javascripts/admin/enterprises/directives/terms_and_conditions_warning.js.coffee

@@ -1,32 +0,0 @@
-angular.module("admin.enterprises").directive 'termsAndConditionsWarning', ($rootScope, $compile, $templateCache, DialogDefaults, $timeout) ->
-  restrict: 'A'
-  scope: true
-
-  link: (scope, element, attr) ->
-    # This file input click handler will hold the browser file input dialog and show a warning modal
-    scope.hold_file_input_and_show_warning_modal = (event) ->
-      event.preventDefault()
-      scope.template = $compile($templateCache.get('admin/modals/terms_and_conditions_warning.html'))(scope)
-      if scope.template.dialog
-        scope.template.dialog(DialogDefaults)
-        scope.template.dialog('open')
-      $rootScope.$evalAsync()
-
-    element.bind 'click', scope.hold_file_input_and_show_warning_modal
-
-    # When the user presses continue in the warning modal, we open the browser file input dialog
-    scope.continue = ->
-      scope.template.dialog('close')
-      $rootScope.$evalAsync()
-
-      # unbind warning modal handler and click file input again to open the browser file input dialog
-      element.unbind('click').trigger('click')
-      # afterwards, bind warning modal handler again so that the warning is shown the next time
-      $timeout ->
-        element.bind 'click', scope.hold_file_input_and_show_warning_modal
-      return
-
-    scope.close = ->
-      scope.template.dialog('close')
-      $rootScope.$evalAsync()
-      return

app/assets/javascripts/admin/index_utils/directives/show_more.js.coffee

@@ -1,12 +0,0 @@
-angular.module("admin.indexUtils").component 'showMore',
-  templateUrl: 'admin/show_more.html'
-  bindings:
-    data: "="
-    limit: "="
-    increment: "="
-
-# For now, this component is not being used.
-# Something about binding "data" to a variable on the parent scope that is continually refreshed by
-# being assigned within an ng-repeat means that we get $digest iteration errors. Seems to be solved
-# by using the new "as" syntax for ng-repeat to assign and alias the outcome of the filters, but this
-# has the limitation of not being able to be limited AFTER the assignment has been made, which we need

app/assets/javascripts/admin/index_utils/services/sort_options.js.coffee

@@ -11,5 +11,6 @@ angular.module("admin.indexUtils").factory 'SortOptions', ->
       sortingExpr
 
     toggle: (predicate) ->
-      @reverse = (@predicate == predicate) && !@reverse
+      # predicate is a string or an array of strings
+      @reverse = (JSON.stringify(@predicate) == JSON.stringify(predicate)) && !@reverse
       @predicate = predicate

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

@@ -3,14 +3,31 @@ angular.module("admin.lineItems").controller 'LineItemsCtrl', ($scope, $timeout,
   $scope.RequestMonitor = RequestMonitor
   $scope.line_items = LineItems.all
   $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.bulkActions = [ { name: t("admin.orders.bulk_management.actions_delete"), callback: 'deleteLineItems' } ]
   $scope.selectedUnitsProduct = {}
   $scope.selectedUnitsVariant = {}
   $scope.sharedResource = false
   $scope.columns = Columns.columns
   $scope.sorting = SortOptions
+  $scope.sorting.toggle("order_date")
+  $scope.pagination = LineItems.pagination
+  $scope.per_page_options = [
+    {id: 15, name: t('js.admin.orders.index.per_page', results: 15)},
+    {id: 50, name: t('js.admin.orders.index.per_page', results: 50)},
+    {id: 100, name: t('js.admin.orders.index.per_page', results: 100)}
+  ]
+  $scope.page = 1
+  $scope.per_page = $scope.per_page_options[0].id
+  $scope.filterByVariantId = null
+  searchThrough = ["order_distributor_name",
+    "order_bill_address_phone",
+    "order_bill_address_firstname",
+    "order_bill_address_lastname",
+    "order_bill_address_full_name",
+    "variant_product_supplier_name",
+    "order_email",
+    "order_number",
+    "product_name"].join("_or_") + "_cont"
 
   $scope.confirmRefresh = ->
     LineItems.allSaved() || confirm(t("unsaved_changes_warning"))
@@ -19,26 +36,24 @@ angular.module("admin.lineItems").controller 'LineItemsCtrl', ($scope, $timeout,
     $scope.distributorFilter = ''
     $scope.supplierFilter = ''
     $scope.orderCycleFilter = ''
-    $scope.quickSearch = ''
+    $scope.query = ''
+    $scope.startDate = undefined
+    $scope.endDate = undefined
+    event = new CustomEvent('flatpickr:clear')
+    window.dispatchEvent(event)
 
   $scope.resetSelectFilters = ->
     $scope.resetFilters()
     $scope.refreshData()
 
-  $scope.$watchCollection "[startDate, endDate]", (newValues, oldValues) ->
-    if newValues != oldValues
-      $scope.refreshData()
-      
+  $scope.fetchResults = ->
+    # creates indirection in order to factorize the code between orders and bulk orders
+    # used in app/views/admin/shared/_angular_per_page_controls.html.haml
+    $scope.refreshData()
+
   $scope.refreshData = ->
-    unless !$scope.orderCycleFilter? || $scope.orderCycleFilter == ''
-      $scope.setOrderCycleDateRange()
+    return "cancel" unless $scope.confirmRefresh()
 
-    $scope.formattedStartDate = moment($scope.startDate).format()
-    $scope.formattedEndDate = moment($scope.endDate).add(1,'day').format()
-
-    return unless moment($scope.formattedStartDate).isValid() and moment($scope.formattedEndDate).isValid()
-
-    $scope.loadOrders()
     $scope.loadLineItems()
 
     unless $scope.initialized
@@ -46,49 +61,50 @@ angular.module("admin.lineItems").controller 'LineItemsCtrl', ($scope, $timeout,
 
     $scope.dereferenceLoadedData()
 
-  $scope.setOrderCycleDateRange = ->
-    start_date = OrderCycles.byID[$scope.orderCycleFilter].orders_open_at
-    end_date = OrderCycles.byID[$scope.orderCycleFilter].orders_close_at
-    format = "YYYY-MM-DD HH:mm:ss Z"
-    $scope.startDate = moment(start_date, format).format('YYYY-MM-DD')
-    $scope.endDate = moment(end_date, format).startOf('day').format('YYYY-MM-DD')
-
   $scope.loadOrders = ->
     RequestMonitor.load $scope.orders = Orders.index(
-      "q[state_not_eq]": "canceled",
-      "q[shipment_state_not_eq]": "shipped",
-      "q[completed_at_not_null]": "true",
-      "q[distributor_id_eq]": $scope.distributorFilter,
-      "q[order_cycle_id_eq]": $scope.orderCycleFilter,
-      "q[completed_at_gteq]": $scope.formattedStartDate,
-      "q[completed_at_lt]": $scope.formattedEndDate
+      "q[id_in][]": $scope.line_items.map((line_item) -> line_item.order.id)
     )
 
   $scope.loadLineItems = ->
+    [formattedStartDate, formattedEndDate] = $scope.formatDates($scope.startDate, $scope.endDate)
+
     RequestMonitor.load LineItems.index(
+      "q[#{searchThrough}]": $scope.query,
+      "q[variant_id_eq]": $scope.filterByVariantId if $scope.filterByVariantId,
       "q[order_state_not_eq]": "canceled",
       "q[order_shipment_state_not_eq]": "shipped",
       "q[order_completed_at_not_null]": "true",
       "q[order_distributor_id_eq]": $scope.distributorFilter,
       "q[variant_product_supplier_id_eq]": $scope.supplierFilter,
       "q[order_order_cycle_id_eq]": $scope.orderCycleFilter,
-      "q[order_completed_at_gteq]": $scope.formattedStartDate,
-      "q[order_completed_at_lt]": $scope.formattedEndDate
+      "q[order_completed_at_gteq]": if formattedStartDate then formattedStartDate else undefined,
+      "q[order_completed_at_lt]": if formattedEndDate then formattedEndDate else undefined,
+      "q[s]": "order_completed_at desc",
+      "page": $scope.page,
+      "per_page": $scope.per_page
     )
 
+  $scope.formatDates = (startDate, endDate) ->
+    formattedStartDate = moment(startDate).format('YYYY-MM-DD') if startDate
+    formattedEndDate = moment(endDate).add(1,'day').format('YYYY-MM-DD') if endDate
+    return [formattedStartDate, formattedEndDate]
+
   $scope.loadAssociatedData = ->
     RequestMonitor.load $scope.distributors = Enterprises.index(action: "visible", ams_prefix: "basic", "q[sells_in][]": ["own", "any"])
     RequestMonitor.load $scope.orderCycles = OrderCycles.index(ams_prefix: "basic", as: "distributor", "q[orders_close_at_gt]": "#{moment().subtract(90,'days').format()}")
     RequestMonitor.load $scope.suppliers = Enterprises.index(action: "visible", ams_prefix: "basic", "q[is_primary_producer_eq]": "true")
 
   $scope.dereferenceLoadedData = ->
-    RequestMonitor.load $q.all([$scope.orders.$promise, $scope.distributors.$promise, $scope.orderCycles.$promise, $scope.suppliers.$promise, $scope.line_items.$promise]).then ->
-      Dereferencer.dereferenceAttr $scope.orders, "distributor", Enterprises.byID
-      Dereferencer.dereferenceAttr $scope.orders, "order_cycle", OrderCycles.byID
+    RequestMonitor.load $q.all([$scope.distributors.$promise, $scope.orderCycles.$promise, $scope.suppliers.$promise, $scope.line_items.$promise]).then ->
       Dereferencer.dereferenceAttr $scope.line_items, "supplier", Enterprises.byID
-      Dereferencer.dereferenceAttr $scope.line_items, "order", Orders.byID
-      $scope.bulk_order_form.$setPristine()
-      StatusMessage.clear()
+      $scope.loadOrders()
+      RequestMonitor.load $q.all([$scope.orders.$promise]).then ->
+        Dereferencer.dereferenceAttr $scope.line_items, "order", Orders.byID  
+        Dereferencer.dereferenceAttr $scope.orders, "distributor", Enterprises.byID
+        Dereferencer.dereferenceAttr $scope.orders, "order_cycle", OrderCycles.byID
+        $scope.bulk_order_form.$setPristine()
+        StatusMessage.clear()
 
       unless $scope.initialized
         $scope.initialized = true
@@ -108,16 +124,16 @@ angular.module("admin.lineItems").controller 'LineItemsCtrl', ($scope, $timeout,
     else
       StatusMessage.display 'failure', t "unsaved_changes_error"
 
-  $scope.cancelOrder = (order, sendEmailCancellation) ->
+  $scope.cancelOrder = (order, sendEmailCancellation, restock_items) ->
     return $http(
       method: 'GET'
-      url: "/admin/orders/#{order.number}/fire?e=cancel&send_cancellation_email=#{sendEmailCancellation}")
+      url: "/admin/orders/#{order.number}/fire?e=cancel&send_cancellation_email=#{sendEmailCancellation}&restock_items=#{restock_items}")
   
   $scope.deleteLineItem = (lineItem) ->
     if lineItem.order.item_count == 1
-      ofnCancelOrderAlert((confirm, sendEmailCancellation) ->
+      ofnCancelOrderAlert((confirm, sendEmailCancellation, restock_items) ->
         if confirm
-          $scope.cancelOrder(lineItem.order, sendEmailCancellation).then(->
+          $scope.cancelOrder(lineItem.order, sendEmailCancellation, restock_items).then(->
             $scope.refreshData()
           )
         else
@@ -139,14 +155,18 @@ angular.module("admin.lineItems").controller 'LineItemsCtrl', ($scope, $timeout,
       willCancelOrders = true if (order.item_count == itemsPerOrder.get(order).length)
 
     if willCancelOrders
-      ofnCancelOrderAlert((confirm, sendEmailCancellation) ->
+      ofnCancelOrderAlert((confirm, sendEmailCancellation, restock_items) ->
         if confirm
           itemsPerOrder.forEach (items, order) =>
             if order.item_count == items.length
-              $scope.cancelOrder(order, sendEmailCancellation).then(-> $scope.refreshData())
+              $scope.cancelOrder(order, sendEmailCancellation, restock_items).then(-> $scope.refreshData())
             else
               Promise.all(LineItems.delete(item) for item in items).then(-> $scope.refreshData())
       , "js.admin.deleting_item_will_cancel_order")   
+    else
+      ofnDeleteLineItemsAlert(() ->
+        Promise.all(LineItems.delete(item) for item in lineItemsToDelete).then(-> $scope.refreshData())
+      , lineItemsToDelete.length)
 
   $scope.allBoxesChecked = ->
     checkedCount = $scope.filteredLineItems.reduce (count,lineItem) ->
@@ -161,6 +181,17 @@ angular.module("admin.lineItems").controller 'LineItemsCtrl', ($scope, $timeout,
   $scope.setSelectedUnitsVariant = (unitsProduct,unitsVariant) ->
     $scope.selectedUnitsProduct = unitsProduct
     $scope.selectedUnitsVariant = unitsVariant
+    $scope.filterByVariantId = unitsVariant.id
+    $scope.page = 1
+    $scope.refreshData()
+
+  $scope.resetSelectedUnitsVariant = ->
+    $scope.selectedUnitsProduct = { }
+    $scope.selectedUnitsVariant = { }
+    $scope.filterByVariantId = null
+    $scope.sharedResource = false
+    $scope.page = 1
+    $scope.refreshData()
 
   $scope.getLineItemScale = (lineItem) ->
     if lineItem.units_product && lineItem.units_variant && (lineItem.units_product.variant_unit == "weight" || lineItem.units_product.variant_unit == "volume") 
@@ -206,7 +237,7 @@ angular.module("admin.lineItems").controller 'LineItemsCtrl', ($scope, $timeout,
 
   $scope.getGroupBySizeFormattedValueWithUnitName = (value, unitsProduct, unitsVariant) ->
     scale = $scope.getScale(unitsProduct, unitsVariant)
-    if scale
+    if scale && value
       value = value / scale if scale != 28.35 && scale != 1 && scale != 453.6 # divide by scale if not smallest unit
       $scope.getFormattedValueWithUnitName(value, unitsProduct, unitsVariant, scale)
     else
@@ -250,5 +281,8 @@ angular.module("admin.lineItems").controller 'LineItemsCtrl', ($scope, $timeout,
       lineItem.final_weight_volume = LineItems.pristineByID[lineItem.id].final_weight_volume * lineItem.quantity / LineItems.pristineByID[lineItem.id].quantity
       $scope.weightAdjustedPrice(lineItem)
 
-  $scope.resetFilters()
-  $scope.refreshData()
+  $scope.changePage = (newPage) ->
+    $scope.page = newPage
+    $scope.refreshData()
+
+  $scope.resetSelectFilters()

app/assets/javascripts/admin/line_items/filters/variant_filter.js.coffee

@@ -1,6 +0,0 @@
-angular.module("admin.lineItems").filter "variantFilter", ->
-    return (lineItems,selectedUnitsProduct,selectedUnitsVariant,sharedResource) ->
-      filtered = []
-      filtered.push lineItem for lineItem in lineItems when (angular.equals(selectedUnitsProduct,{}) ||
-        (lineItem.units_product.id == selectedUnitsProduct.id && (sharedResource || lineItem.units_variant.id == selectedUnitsVariant.id ) ) )
-      filtered

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

@@ -18,7 +18,6 @@ angular.module('admin.orderCycles')
 
     $scope.submit = ($event, destination) ->
       $event.preventDefault()
-      NavigationCheck.clear()
       StatusMessage.display 'progress', t('js.saving')
       OrderCycle.update(destination, $scope.order_cycle_form)
 

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/order_cycles/controllers/order_cycle_exchanges_controller.js.coffee

@@ -35,7 +35,11 @@ angular.module('admin.orderCycles')
       OrderCycle.removeExchangeFee(exchange, index)
       $scope.order_cycle_form.$dirty = true
 
-    $scope.setPickupTimeFieldDirty = (index) ->
+    $scope.setPickupTimeFieldDirty = (index, pickup_time) ->
+      # if the pickup_time is already set we are in edit mode, so no need to set pickup_time field as dirty
+      # to show it is required (it has a red border when set to dirty)
+      return if pickup_time
+
       $timeout ->
         pickup_time_field_name = "order_cycle_outgoing_exchange_" + index + "_pickup_time"
         $scope.order_cycle_form[pickup_time_field_name].$setDirty()

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

@@ -33,9 +33,11 @@ angular.module("admin.orderCycles").controller "OrderCyclesCtrl", ($scope, $q, C
     StatusMessage.display 'notice', "You have unsaved changes" if newVal
 
   $scope.showMore = (days) ->
+    orderCycles = OrderCycles.index(ams_prefix: "index", 
+    "q[orders_close_at_gt]": "#{daysFromToday($scope.ordersCloseAtLimit - days)}", 
+    "q[orders_close_at_lteq]": "#{daysFromToday($scope.ordersCloseAtLimit)}"
+    )
     $scope.ordersCloseAtLimit -= days
-    existingIDs = Object.keys(OrderCycles.byID)
-    orderCycles = OrderCycles.index(ams_prefix: "index", "q[orders_close_at_gt]": "#{daysFromToday($scope.ordersCloseAtLimit)}", "q[id_not_in][]": existingIDs)
     orderCycles.$promise.then ->
       $scope.orderCycles.push(orderCycle) for orderCycle in orderCycles
       compileData()

app/assets/javascripts/admin/orders/controllers/bulk_cancel_controller.js.coffee

@@ -1,14 +0,0 @@
-angular.module("admin.orders").controller "bulkCancelCtrl", ($scope, $http, $timeout) ->
-
-  $scope.cancelOrder = (orderIds, sendEmailCancellation, restock_items) ->
-    $http(
-      method: 'post'
-      url: "/admin/orders/bulk_cancel?order_ids=#{orderIds}&send_cancellation_email=#{sendEmailCancellation}&restock_items=#{restock_items}" ).then(->
-        window.location.reload()
-      )
-
-  $scope.cancelSelectedOrders = ->
-    ofnCancelOrderAlert((confirm, sendEmailCancellation, restock_items) ->
-      if confirm
-        $scope.cancelOrder $scope.selected_orders, sendEmailCancellation, restock_items
-    )

app/assets/javascripts/admin/orders/controllers/bulk_invoice_controller.js.coffee

@@ -1,32 +0,0 @@
-angular.module("admin.orders").controller "bulkInvoiceCtrl", ($scope, $http, $timeout) ->
-  $scope.createBulkInvoice = ->
-    $scope.invoice_id = null
-    $scope.poll = 1
-    $scope.loading = true
-    $scope.message = null
-    $scope.error = null
-    $scope.poll_wait = 5 # 5 Seconds between each check
-    $scope.poll_retries = 80 # Maximum checks before stopping
-
-    $http.post('/admin/orders/invoices', {order_ids: $scope.selected_orders}).then (response) ->
-      $scope.invoice_id = response.data
-      $scope.pollBulkInvoice()
-
-  $scope.pollBulkInvoice = ->
-    $timeout($scope.nextPoll, $scope.poll_wait * 1000)
-
-  $scope.nextPoll = ->
-    $http.get('/admin/orders/invoices/'+$scope.invoice_id+'/poll').then (response) ->
-      $scope.loading = false
-      $scope.message = t('js.admin.orders.index.bulk_invoice_created')
-
-    .catch (response) ->
-      $scope.poll++
-
-      if $scope.poll > $scope.poll_retries
-        $scope.loading = false
-        $scope.error = t('js.admin.orders.index.bulk_invoice_failed')
-        return
-
-      $scope.pollBulkInvoice()
-

app/assets/javascripts/admin/orders/controllers/orders_controller.js.coffee

@@ -1,117 +0,0 @@
-angular.module("admin.orders").controller "ordersCtrl", ($scope, $timeout, RequestMonitor, Orders, SortOptions, $window, $filter, $location, KeyValueMapStore) ->
-  $scope.RequestMonitor = RequestMonitor
-  $scope.pagination = Orders.pagination
-  $scope.orders = Orders.all
-  $scope.sortOptions = SortOptions
-  $scope.per_page_options = [
-    {id: 15, name: t('js.admin.orders.index.per_page', results: 15)},
-    {id: 50, name: t('js.admin.orders.index.per_page', results: 50)},
-    {id: 100, name: t('js.admin.orders.index.per_page', results: 100)}
-  ]
-  $scope.selected_orders = []
-  $scope.checkboxes = {}
-  $scope.selected = false
-  $scope.select_all = false
-  $scope.poll = 0
-  $scope.rowStatus = {}
-
-  KeyValueMapStore.localStorageKey = 'ordersFilters'
-  KeyValueMapStore.storableKeys = ["q", "sorting", "page", "per_page"]
-
-  $scope.initialise = ->
-    unless KeyValueMapStore.restoreValues($scope)
-      $scope.setDefaults()
-
-    $scope.fetchResults()
-
-  $scope.setDefaults = ->
-    $scope.per_page = 15
-    $scope.q = {
-      completed_at_not_null: true
-    }
-    e = new CustomEvent("flatpickr_clear");
-    window.dispatchEvent(e)
-
-  $scope.clearFilters = () ->
-    KeyValueMapStore.clearKeyValueMap()
-    $scope.setDefaults()
-    $scope.fetchResults()
-
-  $scope.fetchResults = (page=1) ->
-    startDateWithTime = $scope.appendStringIfNotEmpty($scope.q?.completed_at_gteq, ' 00:00:00')
-    endDateWithTime = $scope.appendStringIfNotEmpty($scope.q?.completed_at_lteq, ' 23:59:59')
-
-    $scope.resetSelected()
-    params = {
-      'q[completed_at_gteq]': startDateWithTime,
-      'q[completed_at_lteq]': endDateWithTime,
-      'q[state_eq]': $scope.q?.state_eq,
-      'q[number_cont]': $scope.q?.number_cont,
-      'q[email_cont]': $scope.q?.email_cont,
-      'q[bill_address_firstname_start]': $scope.q?.bill_address_firstname_start,
-      'q[bill_address_lastname_start]': $scope.q?.bill_address_lastname_start,
-      # Set default checkbox values to null. See: https://github.com/openfoodfoundation/openfoodnetwork/pull/3076#issuecomment-440010498
-      'q[completed_at_not_null]': $scope.q?.completed_at_not_null || null,
-      'q[distributor_id_in][]': $scope.q?.distributor_id_in,
-      'q[order_cycle_id_in][]': $scope.q?.order_cycle_id_in,
-      'q[s]': $scope.sorting || 'completed_at desc',
-      shipping_method_id: $scope.q?.shipping_method_id,
-      per_page: $scope.per_page,
-      page: page
-    }
-    KeyValueMapStore.setStoredValues($scope)
-    RequestMonitor.load(Orders.index(params).$promise)
-
-  $scope.appendStringIfNotEmpty = (baseString, stringToAppend) ->
-    return baseString unless baseString
-    return baseString if baseString.endsWith(stringToAppend)
-
-    baseString + stringToAppend
-
-  $scope.resetSelected = ->
-    $scope.selected_orders.length = 0
-    $scope.selected = false
-    $scope.select_all = false
-    $scope.checkboxes = {}
-
-  $scope.toggleSelection = (id) ->
-    index = $scope.selected_orders.indexOf(id)
-
-    if index == -1
-      $scope.selected_orders.push(id)
-    else
-      $scope.selected_orders.splice(index, 1)
-
-  $scope.toggleAll = ->
-    $scope.selected_orders.length = 0
-    $scope.orders.forEach (order) ->
-      $scope.checkboxes[order.id] = $scope.select_all
-      $scope.selected_orders.push order.id if $scope.select_all
-
-  $scope.$watch 'sortOptions', (sort) ->
-    return unless sort && sort.predicate != ""
-
-    $scope.sorting = sort.getSortingExpr()
-    $scope.fetchResults()
-  , true
-
-  $scope.capturePayment = (order) ->
-    $scope.rowAction('capture', order)
-
-  $scope.shipOrder = (order) ->
-    $scope.rowAction('ship', order)
-
-  $scope.rowAction = (action, order) ->
-    $scope.rowStatus[order.id] = "loading"
-
-    Orders[action](order).$promise.then (data) ->
-      $scope.rowStatus[order.id] = "success"
-      $timeout(->
-        $scope.rowStatus[order.id] = null
-      , 1500)
-    , (error) ->
-      $scope.rowStatus[order.id] = "error"
-
-  $scope.changePage = (newPage) ->
-    $scope.page = newPage
-    $scope.fetchResults(newPage)

app/assets/javascripts/admin/orders/directives/invoices_modal.js.coffee

@@ -1,5 +0,0 @@
-angular.module("admin.orders").directive "invoicesModal", ($modal) ->
-  restrict: 'C'
-  link: (scope, elem, attrs, ctrl) ->
-    elem.on "click", (ev) =>
-      scope.uploadModal = $modal.open(templateUrl: 'admin/modals/bulk_invoice.html', controller: ctrl, scope: scope, windowClass: 'simple-modal')

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

@@ -21,8 +21,14 @@ angular.module("admin.products")
         else
           $scope.product.variant_unit = $scope.product.variant_unit_with_scale
           $scope.product.variant_unit_scale = null
-      else if $scope.product.variant_unit && $scope.product.variant_unit_scale
-        $scope.product.variant_unit_with_scale = VariantUnitManager.getUnitWithScale($scope.product.variant_unit, parseFloat($scope.product.variant_unit_scale))
+      else if $scope.product.variant_unit
+        # Preserves variant_unit_with_scale when form validation fails and reload triggers
+        if $scope.product.variant_unit_scale
+          $scope.product.variant_unit_with_scale = VariantUnitManager.getUnitWithScale(
+            $scope.product.variant_unit, parseFloat($scope.product.variant_unit_scale)
+          )
+        else
+          $scope.product.variant_unit_with_scale = $scope.product.variant_unit
       else
         $scope.product.variant_unit = $scope.product.variant_unit_scale = null
 
@@ -36,7 +42,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/resources/resources/enterprise_resource.js.coffee

@@ -14,7 +14,4 @@ angular.module("admin.resources").factory 'EnterpriseResource', ($resource) ->
     'removePromoImage':
       url: '/api/v0/enterprises/:id/promo_image.json'
       method: 'DELETE'
-    'removeTermsAndConditions':
-      url: '/api/v0/enterprises/:id/terms_and_conditions.json'
-      method: 'DELETE'
   })

app/assets/javascripts/admin/resources/services/enterprises.js.coffee

@@ -63,4 +63,3 @@ angular.module("admin.resources").factory 'Enterprises', ($q, $filter, Enterpris
 
     removeLogo: performActionOnEnterpriseResource(EnterpriseResource.removeLogo)
     removePromoImage: performActionOnEnterpriseResource(EnterpriseResource.removePromoImage)
-    removeTermsAndConditions: performActionOnEnterpriseResource(EnterpriseResource.removeTermsAndConditions)

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/assets/javascripts/admin/spree/orders/shipments.js.erb

@@ -15,7 +15,7 @@ $(document).ready(function() {
       console.log(msg);
     });
   }
-  $('[data-hook=admin_order_edit_form] a.ship').click(handle_ship_click);
+  $('.admin-order-edit-form a.ship').click(handle_ship_click);
 
   //handle shipping method edit click
   $('a.edit-method').click(toggleMethodEdit);
@@ -37,7 +37,7 @@ $(document).ready(function() {
       console.log(msg);
     });
   }
-  $('[data-hook=admin_order_edit_form] a.save-method').click(handle_shipping_method_save);
+  $('.admin-order-edit-form a.save-method').click(handle_shipping_method_save);
 
   //handle tracking info edit/delete
 
@@ -64,8 +64,8 @@ $(document).ready(function() {
     return Spree.url( Spree.routes.orders_api + "/" + order_number + "/shipments/" + shipmentNumber + ".json");
   }
 
-  $('[data-hook=admin_order_edit_form] a.save-tracking').click(saveTrackingInfo);
-  $('[data-hook=admin_order_edit_form] a.delete-tracking').click(deleteTrackingInfo);
+  $('.admin-order-edit-form a.save-tracking').click(saveTrackingInfo);
+  $('.admin-order-edit-form a.delete-tracking').click(deleteTrackingInfo);
 
   // handle note edit/delete
 
@@ -96,8 +96,8 @@ $(document).ready(function() {
     }); 
   }
 
-  $('[data-hook=admin_order_edit_form] a.save-note').click(saveNote);
-  $('[data-hook=admin_order_edit_form] a.delete-note').click(deleteNote);
+  $('.admin-order-edit-form a.save-note').click(saveNote);
+  $('.admin-order-edit-form a.delete-note').click(deleteNote);
 
   // Makes API call for notes/tracking info
   makeApiCall = function(url, params) {

app/assets/javascripts/admin/spree/orders/variant_autocomplete.js.erb

@@ -4,7 +4,8 @@ $(document).ready(function() {
 
   initAlert()
   initConfirm()
-  initCancelOrder()
+  initButtonCancel()
+  initLinkCancel()
 
   if ($('#variant_autocomplete_template').length > 0) {
     window.variantTemplate = Handlebars.compile($('#variant_autocomplete_template').text());
@@ -99,6 +100,7 @@ adjustItems = function(shipment_number, variant_id, quantity, restock_item){
         doAdjustItems(shipment_number, variant_id, quantity, inventory_units, restock_item, () => {
           var redirectTo = new URL(Spree.routes.cancel_order.toString());
           redirectTo.searchParams.append("send_cancellation_email", sendEmailCancellation);
+          redirectTo.searchParams.append("restock_item", restock_item);
           window.location.href = redirectTo.toString();
         });
       }
@@ -250,6 +252,18 @@ ofnCancelOrderAlert = function(callback, i18nKey) {
   $('#custom-confirm').show();
 }
 
+ofnDeleteLineItemsAlert = function(callback, count) {
+  $('#custom-confirm .message').html(`${t("js.admin.orders.delete_line_items_html", {count: count})}`);
+  $('#custom-confirm button.confirm').click(() => {
+    $('#custom-confirm').hide();
+    callback();
+  });
+  $('#custom-confirm button.cancel').click(() => {
+    $('#custom-confirm').hide();
+  });
+  $('#custom-confirm').show();
+}
+
 ofnConfirm = function(callback) {
   $('#custom-confirm .message').html(
       ` ${t("are_you_sure")}
@@ -264,17 +278,23 @@ ofnConfirm = function(callback) {
   $('#custom-confirm').show();
 }
 
-initCancelOrder = function() {
-    $('#cancel_order_form').submit(function(e){
-        ofnCancelOrderAlert((confirm, sendEmailCancellation, restock_items) => {
-            if (confirm) {
-                var redirectTo = new URL(Spree.routes.cancel_order.toString());
-                redirectTo.searchParams.append("send_cancellation_email", sendEmailCancellation);
-                redirectTo.searchParams.append("restock_items", restock_items);
-                window.location.href = redirectTo.toString();
-            }
-        });
-        e.preventDefault();
-        return false;
+initCancelAction = function(e){
+  ofnCancelOrderAlert((confirm, sendEmailCancellation, restock_items) => {
+      if (confirm) {
+          var redirectTo = new URL(Spree.routes.cancel_order.toString());
+          redirectTo.searchParams.append("send_cancellation_email", sendEmailCancellation);
+          redirectTo.searchParams.append("restock_items", restock_items);
+          window.location.href = redirectTo.toString();
+      }
     });
+  e.preventDefault();
+  return false;
+};
+
+initButtonCancel = function() {
+  $('#cancel_order_form').submit(initCancelAction)
+}
+
+initLinkCancel = function() {
+  $('#links-dropdown a[href$="cancel"]').click(initCancelAction);
 }

app/assets/javascripts/admin/spree/taxons/taxonomy.js.coffee

@@ -8,7 +8,7 @@ handle_move = (e, data) ->
   node = data.rslt.o
   new_parent = data.rslt.np
 
-  url = new URL(base_url)
+  url = new URL(Spree.routes.admin_taxonomy_taxons)
   url.pathname = url.pathname + '/' + node.attr("id") 
   data = {
     _method: "put",

app/assets/javascripts/admin/utils/services/status_message.js.coffee

@@ -5,8 +5,8 @@ angular.module("admin.utils").factory "StatusMessage", ->
       alert:    {style: {color: 'grey'}}
       notice:   {style: {color: 'grey'}}
       success:  {style: {color: '#9fc820'}}
-      failure:  {style: {color: '#da5354'}}
-      error:   {style: {color: '#da5354'}}
+      failure:  {style: {color: '#C85136'}}
+      error:   {style: {color: '#C85136'}}
 
     statusMessage:
       text: ""

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

@@ -1,2 +1,4 @@
-angular.module("admin.utils", ["templates", "ngSanitize"]).config ($httpProvider) ->
+angular.module("admin.utils", ["templates", "ngSanitize"]).config ($httpProvider, $locationProvider) ->
+ # for the next line, you should also probably check file: app/assets/javascripts/admin/admin_ofn.js.coffee
+ $locationProvider.hashPrefix('')
  $httpProvider.defaults.headers.common["Accept"] = "application/json, text/javascript, */*"

app/assets/javascripts/admin_minimal.js

@@ -0,0 +1,34 @@
+// This is a manifest file that'll be compiled into including all the files listed below.
+// Add new JavaScript/Coffee code in separate files in this directory and they'll automatically
+// be included in the compiled file accessible from http://example.com/assets/application.js
+// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
+// the compiled file.
+//
+
+//= require jquery2
+//= require admin/spree/spree-select2
+//= require admin/spree/handlebar_extensions
+
+//= require i18n/translations
+//= require darkswarm/i18n.translate.js
+//= require moment/min/moment.min.js
+//= require moment/locale/ar.js
+//= require moment/locale/ca.js
+//= require moment/locale/de.js
+//= require moment/locale/en-gb.js
+//= require moment/locale/es.js
+//= require moment/locale/fil.js
+//= require moment/locale/fr.js
+//= require moment/locale/it.js
+//= require moment/locale/nb.js
+//= require moment/locale/nl-be.js
+//= require moment/locale/pt-br.js
+//= require moment/locale/pt.js
+//= require moment/locale/ru.js
+//= require moment/locale/sv.js
+//= require moment/locale/tr.js
+//= require moment/locale/pl.js
+
+//= require js-big-decimal/dist/web/js-big-decimal.min.js
+
+window.angular = { module: function(noop){ return { value: function(){} } } }

app/assets/javascripts/darkswarm/all.js.coffee

@@ -67,11 +67,3 @@ document.addEventListener "turbo:before-render", ->
     rootscope = null
     window.injector = null
   true
-
-document.addEventListener "ajax:beforeSend", (event) =>
-  window.Turbo.navigator.adapter.progressBar.setValue(0)
-  window.Turbo.navigator.adapter.progressBar.show()
-
-document.addEventListener "ajax:complete", (event) =>
-  window.Turbo.navigator.adapter.progressBar.setValue(100)
-  window.Turbo.navigator.adapter.progressBar.hide()

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

@@ -25,6 +25,8 @@ angular.module('Darkswarm').controller "OrderCycleChangeCtrl", ($scope, $rootSco
     Cart.reloadFinalisedLineItems()
     ChangeableOrdersAlert.reload()
     $rootScope.$broadcast 'orderCycleSelected'
+    event = new CustomEvent('orderCycleSelected')
+    window.dispatchEvent(event)
 
   $scope.closesInLessThan3Months = () ->
     moment().diff(moment(OrderCycle.orders_close_at(),  "YYYY-MM-DD HH:mm:SS Z"), 'days') > -75

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

@@ -1,22 +0,0 @@
-angular.module('Darkswarm').controller "PageSelectionCtrl", ($scope, $rootScope, $location) ->
-  $scope.selectedPage = ->
-    # The path looks like `/contact` for the URL `https://ofn.org/shop#/contact`.
-    # We remove the slash at the beginning.
-    page = $location.path()[1..]
-
-    return $scope.whitelist[0] unless page
-
-    # If the path points to an unrelated path like `/login`, stay where we were.
-    return $scope.lastPage unless page in $scope.whitelist
-
-    $scope.lastPage = page
-    page
-
-  $scope.whitelistPages = (pages) ->
-    $scope.whitelist = pages
-    $scope.lastPage = pages[0]
-
-  # when an order cycle is changed, ensure the shop tab is active to save a click
-  $rootScope.$on "orderCycleSelected", ->
-    if $scope.selectedPage() != "shop"
-      $location.path("shop")

app/assets/javascripts/darkswarm/controllers/registration/registration_form_controller.js.coffee

@@ -7,8 +7,12 @@ angular.module('Darkswarm').controller "RegistrationFormCtrl", ($scope, Registra
     form.$valid
 
   $scope.create = (form) ->
-    $scope.disableButton()
-    EnterpriseRegistrationService.create($scope.enableButton) if $scope.valid(form)
+    if ($scope.valid(form)) 
+      $scope.disableButton()
+      EnterpriseRegistrationService.create().then(() ->
+        $scope.enableButton()
+      )
+    end
 
   $scope.update = (nextStep, form) ->
     EnterpriseRegistrationService.update(nextStep) if $scope.valid(form)

app/assets/javascripts/darkswarm/directives/fill_vertical.js.coffee

@@ -1,9 +0,0 @@
-angular.module('Darkswarm').directive "fillVertical", ($window)->
-  # Makes something fill the window vertically. Used on the Google Map.
-  restrict: 'A'
-  link: (scope, element, attrs)->
-    setSize = ->
-      element.css "height", ($window.innerHeight - element.offset().top)
-    setSize()
-    angular.element($window).bind "resize", ->
-      setSize()

app/assets/javascripts/darkswarm/directives/flash.js.coffee

@@ -17,9 +17,12 @@ angular.module('Darkswarm').directive "ofnFlash", (flash, $timeout, RailsFlashLo
     
     # Callback when a new flash message is pushed to flash service
     show = (message, type)=>
-      if message
-        $scope.flashes.push({message: message, type: typePairings[type]})
-        $timeout($scope.delete, 10000)
+      return unless message
+      # if same message already exists, don't add it again
+      return if $scope.flashes.some((flash) -> flash.message == message)
+
+      $scope.flashes.push({message: message, type: typePairings[type]})
+      $timeout($scope.delete, 10000)
 
     $scope.delete = ->
       $scope.flashes.shift()

app/assets/javascripts/darkswarm/directives/on_hand.js.coffee

@@ -1,4 +1,4 @@
-angular.module('Darkswarm').directive "ofnOnHand", (StockQuantity) ->
+angular.module('Darkswarm').directive "ofnOnHand", (StockQuantity, Messages) ->
   restrict: 'A'
   require: "ngModel"
   scope: true
@@ -16,7 +16,7 @@ angular.module('Darkswarm').directive "ofnOnHand", (StockQuantity) ->
     ngModel.$parsers.push (viewValue) ->
       available_quantity = scope.available_quantity()
       if parseInt(viewValue) > available_quantity
-        alert t("js.insufficient_stock", {on_hand: available_quantity})
+        Messages.flash({error: t("js.insufficient_stock", {on_hand: available_quantity})})
         viewValue = available_quantity
         ngModel.$setViewValue viewValue
         ngModel.$render()

app/assets/javascripts/darkswarm/directives/single_line_selectors.coffee

@@ -1,82 +0,0 @@
-angular.module('Darkswarm').directive 'singleLineSelectors', ($timeout, $filter) ->
-  restrict: 'E'
-  templateUrl: "single_line_selectors.html"
-  scope:
-    selectors: "="
-    objects: "&"
-    activeSelectors: "="
-    selectorName: "@activeSelectors"
-  link: (scope, element, attrs) ->
-    scope.fitting = false
-
-    scope.refit = ->
-      if scope.allSelectors?
-        scope.fitting = true
-        selector.fits = true for selector in scope.allSelectors
-        $timeout(loadWidths, 0, true).then ->
-          $timeout fit, 0, true
-
-    fit = ->
-      used = $(element).find("li.more").outerWidth(true)
-      used += selector.width for selector in scope.allSelectors when selector.fits
-      available = $(element).parent(".filter-shopfront").innerWidth() - used
-      if available > 0
-        for selector in scope.allSelectors when !selector.fits
-          available -= selector.width
-          selector.fits = true if available > 0
-      else
-        if scope.allSelectors.length > 0
-          for i in [scope.allSelectors.length-1..0]
-            selector = scope.allSelectors[i]
-            if !selector.fits
-              continue
-            else
-              if available < 0
-                selector.fits = false
-                available += selector.width
-      scope.fitting = false
-
-    loadWidths = ->
-      $(element).find("li").not(".more").each (i) ->
-        if i < scope.allSelectors.length
-          scope.allSelectors[i].width = $(this).outerWidth(true)
-        return null # So we don't exit the loop weirdly
-
-    scope.overFlowSelectors = ->
-      return [] unless scope.allSelectors?
-      $filter('filter')(scope.allSelectors, { fits: false })
-
-    scope.selectedOverFlowSelectors = ->
-      $filter('filter')(scope.overFlowSelectors(), { active: true })
-
-    # had to duplicate this to make overflow selectors work
-    scope.emit = ->
-      scope.activeSelectors = scope.allSelectors.filter (selector)->
-        selector.active
-      .map (selector) ->
-        selector.object.id
-
-    # From: http://stackoverflow.com/questions/4298612/jquery-how-to-call-resize-event-only-once-its-finished-resizing
-    debouncer = (func, timeout) ->
-      timeoutID = undefined
-      timeout = timeout or 50
-      ->
-        subject = this
-        args = arguments
-        clearTimeout timeoutID
-        timeoutID = setTimeout(->
-          func.apply subject, Array::slice.call(args)
-        , timeout)
-
-
-    # -- Event management
-    scope.$watchCollection "allSelectors", ->
-      scope.refit()
-
-    scope.$on "filtersToggled", ->
-      scope.refit()
-
-    $(window).resize debouncer (e) ->
-      scope.fitting = true
-      if scope.allSelectors?
-        $timeout fit, 0, true

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

@@ -2,6 +2,7 @@ angular.module('Darkswarm').factory "EnterpriseModal", ($modal, $rootScope, $htt
   # Build a modal popup for an enterprise.
   new class EnterpriseModal
     open: (enterprise)->
+      return if enterprise.visible == 'hidden'
       scope = $rootScope.$new(true) # Spawn an isolate to contain the enterprise
       scope.embedded_layout = window.location.search.indexOf("embedded_shopfront=true") != -1
 

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

@@ -55,6 +55,10 @@ angular.module('Darkswarm').factory "EnterpriseRegistrationService", ($http, Reg
       ).catch((response) ->
         Loading.clear()
         alert(t('failed_to_update_enterprise_unknown'))
+        if response.data.errors.instagram
+          igErr = document.querySelector("#instagram-error")
+          igErr.style.display = 'block'
+          igErr.textContent = response.data.errors.instagram[0]
       )
 
     prepare: =>

app/assets/javascripts/iehack.js

@@ -1,5 +0,0 @@
-$( document ).ready(function() {
-  $("#closeie").click(function() {
-    $("#ie-warning").hide(); 
-  });
-})

app/assets/javascripts/templates/admin/columns_dropdown.html.haml

@@ -1,11 +1,13 @@
-.ofn-drop-down.right#columns-dropdown{ ng: { controller: 'ColumnsDropdownCtrl' } }
-  %span{ :class => 'icon-reorder' }= "  #{t('admin.columns')}".html_safe
-  %span{ 'ng-class' => "expanded && 'icon-caret-up' || !expanded && 'icon-caret-down'" }
+.ofn-drop-down.ofn-drop-down-v2.right#columns-dropdown{ ng: { controller: 'ColumnsDropdownCtrl' } }
+  .ofn-drop-down-label
+    = "  #{t('admin.columns')}".html_safe
+    %span{ 'ng-class' => "expanded && 'icon-caret-up' || !expanded && 'icon-caret-down'" }
   %div.menu{ 'ng-show' => "expanded" }
-    %div.menu_item{ ng: { repeat: "column in columns", click: "toggle(column)", class: "{selected: column.visible}" } }
-      %span.check
-      %span.name {{ column.name }}
-    %hr
-    %div.menu_item.text-center
-      %input.fullwidth.orange{ type: "button", ng: { value: "saved() ? 'Saved': 'Saving'", show: "saved() || saving", disabled: "saved()" } }
-      %input.fullwidth.red{ type: "button", :value => t('admin.column_save_as_default').html_safe, ng: { show: "!saved() && !saving", click: "saveColumnPreferences(action)"} }
+    .menu_items
+      .menu_item{ ng: { repeat: "column in columns", click: "toggle(column);" } }
+        %input.redesigned-input{ type: "checkbox", ng: { checked: "column.visible" } }
+        {{ column.name }}
+      %hr
+      %div.menu_item.text-center
+        %input.fullwidth.orange{ type: "button", ng: { value: "saved() ? 'Saved': 'Saving'", show: "saved() || saving", disabled: "saved()" } }
+        %input.fullwidth.red{ type: "button", :value => t('admin.column_save_as_default').html_safe, ng: { show: "!saved() && !saving", click: "saveColumnPreferences(action)"} }

app/assets/javascripts/templates/admin/links_dropdown.html.haml

@@ -4,7 +4,16 @@
     {{ 'admin.actions' | t }}
     %i{ 'ng-class' => "expanded && 'icon-caret-up' || !expanded && 'icon-caret-down'" }
   %div.menu{ 'ng-show' => "expanded" }
-    %a.menu_item{ 'ng-repeat' => "link in links", href: '{{link.url}}', target: "{{link.target || '_self'}}", data: { method: "{{ link.method || 'get' }}", confirm: "{{link.confirm}}" } }
-      %span
-        %i{ ng: { class: "link.icon" } }
-      %span {{ link.name }}
+    %div{ 'ng-repeat' => "link in links" }
+      %a.menu_item{ 'ng-if': "link.method", href: '{{link.url}}', target: "{{link.target || '_self'}}", data: { method: "{{ link.method }}", "ujs-navigate": "false", confirm: "{{link.confirm}}" } }
+        %span
+          %i{ ng: { class: "link.icon" } }
+        %span {{ link.name }}
+      %a.menu_item{ 'ng-if': "link.confirm && !link.method", href: '{{link.url}}', target: "{{link.target || '_self'}}", "data-confirm": "{{link.confirm}}" }
+        %span
+          %i{ ng: { class: "link.icon" } }
+        %span {{ link.name }}
+      %a.menu_item{ 'ng-if': "!link.confirm && !link.method", href: '{{link.url}}', target: "{{link.target || '_self'}}" }
+        %span
+          %i{ ng: { class: "link.icon" } }
+        %span {{ link.name }}

app/assets/javascripts/templates/admin/modals/terms_and_conditions_warning.html.haml

@@ -1,14 +0,0 @@
-%div
-  .margin-bottom-30.text-center
-    .text-big
-      {{ 'js.admin.modals.terms_and_conditions_warning.title' | t }}
-  .margin-bottom-30
-    %p
-      {{ 'js.admin.modals.terms_and_conditions_warning.message_1' | t }}
-  .margin-bottom-30
-    %p
-      {{ 'js.admin.modals.terms_and_conditions_warning.message_2' | t }}
-
-  .text-center
-    %input.button.red{ type: 'button', value: t('js.admin.modals.close'), ng: { click: 'close()' } }
-    %input.button.red{ type: 'button', value: t('js.admin.modals.continue'), ng: { click: 'continue()' } }

app/assets/javascripts/templates/admin/save_bar.html.haml

@@ -3,7 +3,7 @@
     .seven.columns.alpha
       %h5#status-message{ ng: { show: "StatusMessage.invalidMessage == ''", style: 'StatusMessage.statusMessage.style' } }
         {{ StatusMessage.statusMessage.text || " " }}
-      %h5#status-message{ ng: { show: "StatusMessage.invalidMessage !== ''" }, style: 'color: #da5354' }
+      %h5#status-message{ ng: { show: "StatusMessage.invalidMessage !== ''" }, style: 'color: #C85136' }
         {{ StatusMessage.invalidMessage || " " }}
     .nine.columns.omega.text-right{ ng: { transclude: true } }
 

app/assets/javascripts/templates/admin/show_more.html.haml

@@ -1,3 +0,0 @@
-%div{ ng: { show: "data.length > limit" } }
-  %input{ type: 'button', value: t(:show_more), ng: { click: 'limit = limit + increment' } }
-  %input{ type: 'button', value: t(:show_all_with_more, num: '{{ data.length - limit }}'), ng: { click: 'limit = data.length' } }

app/assets/javascripts/templates/single_line_selectors.html.haml

@@ -1,14 +0,0 @@
--# In order for the single-line-selector scope to have access to the available selectors,
-%filter-selector{"selector-set" => "selectors", objects: "objects()", "active-selectors" => "activeSelectors", "all-selectors" => "allSelectors" }
-
-%ul{ ng: { if: "overFlowSelectors().length > 0 || fitting" } }
-  %li.more
-    %a.dropdown{ data: { dropdown: "{{ 'show-more-' + selectorName }}" }, ng: { class: "{active: selectedOverFlowSelectors().length > 0}" } }
-      %span
-        {{ 'js.more_items' | t:{ count: overFlowSelectors().length } }}
-      %i.ofn-i_052-point-down
-    .f-dropdown.text-right.content{ ng: { attr: { id: "{{ 'show-more-' + selectorName }}" } } }
-      %ul
-        %active-selector{ ng: { repeat: "selector in overFlowSelectors()", hide: "selector.fits" } }
-          %render-svg{path: "{{selector.object.icon}}", ng: { if: "selector.object.icon"}}
-          %span {{ selector.object.name }}

app/channels/session_channel.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+class SessionChannel < ApplicationCable::Channel
+  def self.for_request(request)
+    "SessionChannel:#{request.session.id}"
+  end
+
+  def subscribed
+    return reject if current_user.nil?
+
+    stream_from "SessionChannel:#{session_id}"
+  end
+end

app/components/confirm_modal_component.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+class ConfirmModalComponent < ModalComponent
+  def initialize(id:, confirm_actions: nil, reflex: nil, controller: nil, message: nil, confirm_reflexes: nil)
+    super(id: id, close_button: true)
+    @confirm_actions = confirm_actions
+    @reflex = reflex
+    @confirm_reflexes = confirm_reflexes
+    @controller = controller
+    @message = message
+  end
+
+  private
+
+  def close_button_class
+    "secondary"
+  end
+end

app/components/confirm_modal_component/confirm_modal_component.html.haml

@@ -0,0 +1,10 @@
+%div{ id: @id, "data-controller": "modal #{@controller}", "data-action": "keyup@document->modal#closeIfEscapeKey", "data-#{@controller}-reflex-value": @reflex }
+  .reveal-modal-bg.fade{ "data-modal-target": "background", "data-action": "click->modal#close" }
+  .reveal-modal.fade.tiny.help-modal{ "data-modal-target": "modal" }
+    = content
+
+    = render @message if @message
+
+    .modal-actions
+      %input{ class: "button icon-plus #{close_button_class}", type: 'button', value: t('js.admin.modals.cancel'), "data-action": "click->modal#close" }
+      %input{ class: "button icon-plus primary", type: 'button', value: t('js.admin.modals.confirm'), "data-action": @confirm_actions, "data-reflex": @confirm_reflexes }

app/components/confirm_modal_component/confirm_modal_component.scss

@@ -0,0 +1,4 @@
+.modal-actions {
+  display: flex;
+  justify-content: space-around;
+}

app/components/help_modal_component.rb

@@ -1,26 +1,7 @@
 # frozen_string_literal: true
 
-class HelpModalComponent < ViewComponent::Base
+class HelpModalComponent < ModalComponent
   def initialize(id:, close_button: true)
-    @id = id
-    @close_button = close_button
-  end
-
-  private
-
-  def close_button_class
-    if namespace == "admin"
-      "red"
-    else
-      "primary"
-    end
-  end
-
-  def close_button?
-    !!@close_button
-  end
-
-  def namespace
-    helpers.controller_path.split("/").first
+    super(id: id, close_button: close_button)
   end
 end

app/components/modal_component.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+class ModalComponent < ViewComponent::Base
+  def initialize(id:, close_button: true)
+    @id = id
+    @close_button = close_button
+  end
+
+  private
+
+  def close_button_class
+    if namespace == "admin"
+      "red"
+    else
+      "primary"
+    end
+  end
+
+  def close_button?
+    !!@close_button
+  end
+
+  def namespace
+    helpers.controller_path.split("/").first
+  end
+end

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,59 @@
+# frozen_string_literal: true
+
+class ProductComponent < ViewComponentReflex::Component
+  DATETIME_FORMAT = '%F %T'
+
+  def initialize(product:, columns:)
+    super
+    @product = product
+    @image = @product.images[0] if product.images.any?
+    @columns = columns.map do |c|
+      {
+        id: c[:value],
+        value: column_value(c[:value])
+      }
+    end
+  end
+
+  # This must be define when using ProductComponent.with_collection()
+  def collection_key
+    @product.id
+  end
+
+  # rubocop:disable Metrics/CyclomaticComplexity, Metrics/MethodLength
+  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(', ')
+    when 'sku'
+      @product.sku
+    when 'on_hand'
+      @product.on_hand || 0
+    when 'on_demand'
+      @product.on_demand
+    when 'tax_category'
+      @product.tax_category.name
+    when 'inherits_properties'
+      @product.inherits_properties
+    when 'available_on'
+      format_date(@product.available_on)
+    when 'import_date'
+      format_date(@product.import_date)
+    end
+  end
+  # rubocop:enable Metrics/CyclomaticComplexity, Metrics/MethodLength
+
+  private
+
+  def format_date(date)
+    date&.strftime(DATETIME_FORMAT) || ''
+  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&.attachment.present?
+        = image_tag @image.url(:mini)
+      = column[:value]

app/components/products_table_component.rb

@@ -0,0 +1,180 @@
+# frozen_string_literal: true
+
+class ProductsTableComponent < ViewComponentReflex::Component
+  include Pagy::Backend
+
+  SORTABLE_COLUMNS = ['name', 'import_date'].freeze
+  SELECTABLE_COLUMNS = [
+    { 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" },
+    { label: I18n.t("admin.products_page.columns_selector.sku"), value: "sku" },
+    { label: I18n.t("admin.products_page.columns_selector.on_hand"), value: "on_hand" },
+    { label: I18n.t("admin.products_page.columns_selector.on_demand"), value: "on_demand" },
+    { label: I18n.t("admin.products_page.columns_selector.tax_category"), value: "tax_category" },
+    {
+      label: I18n.t("admin.products_page.columns_selector.inherits_properties"),
+      value: "inherits_properties"
+    },
+    { label: I18n.t("admin.products_page.columns_selector.available_on"), value: "available_on" },
+    { label: I18n.t("admin.products_page.columns_selector.import_date"), value: "import_date" }
+  ].sort do |a, b|
+    a[:label] <=> b[:label]
+  end.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_COLUMNS
+    @columns_selected = ['unit', 'price', 'on_hand', 'category', 'import_date']
+    @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
+
+  # any change on a "reflex_data_attributes" (defined in the template) will trigger a re render
+  def before_render
+    fetch_products
+    refresh_columns
+  end
+
+  # Element refers to the component the data is set on
+  def search_term
+    # Element is SearchInputComponent
+    @search_term = element.dataset['value']
+  end
+
+  def toggle_column
+    # Element is SelectorComponent
+    column = element.dataset['value']
+    @columns_selected = if @columns_selected.include?(column)
+                          @columns_selected - [column]
+                        else
+                          @columns_selected + [column]
+                        end
+  end
+
+  def click_sort
+    # Element is TableHeaderComponent
+    @sort = {
+      column: element.dataset['sort-value'],
+      direction: element.dataset['sort-direction'] == "asc" ? "desc" : "asc"
+    }
+  end
+
+  def toggle_per_page
+    # Element is SelectorComponent
+    selected = element.dataset['value'].to_i
+    @per_page_selected = [selected] if PER_PAGE_VALUE.include?(selected)
+  end
+
+  def toggle_category
+    # Element is SelectorWithFilterComponent
+    category_clicked = element.dataset['value']
+    @categories_selected = toggle_selector_with_filter(category_clicked, @categories_selected)
+  end
+
+  def toggle_producer
+    # Element is SelectorWithFilterComponent
+    producer_clicked = element.dataset['value']
+    @producers_selected = toggle_selector_with_filter(producer_clicked, @producers_selected)
+  end
+
+  def change_page
+    # Element is PaginationComponent
+    page = element.dataset['page'].to_i
+    @page = page if page > 0
+  end
+
+  private
+
+  def refresh_columns
+    @columns = @columns_selected.map do |column|
+      {
+        label: I18n.t("admin.products_page.columns.#{column}"),
+        value: column,
+        sortable: SORTABLE_COLUMNS.include?(column)
+      }
+    end.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
+      ]
+    ]
+  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]