Update all locales with the latest Transifex translations

Fixing 'unsaved' alert behaviour for order cycle edit forms

.browserslistrc

@@ -1 +1,2 @@
 defaults
+IE 11

.dockerignore

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

.env.development

@@ -1,7 +1,11 @@
 # ENV vars for the development environment
 # Override locally with `.env.development.local`
+#
+# You may also want to use this when testing other environments locally:
+#
+#     cp .env.development .env.local
 
-SECRET_TOKEN="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
+SECRET_TOKEN="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
 
 OFN_REDIS_URL="redis://localhost:6379/1"
 OFN_REDIS_JOBS_URL="redis://localhost:6379/2"

.env.test

@@ -1,6 +1,11 @@
 # ENV vars for the test environment
 # Override locally with `.env.test.local`
 
-SECRET_TOKEN="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
+SECRET_TOKEN="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
+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/FUNDING.yml

@@ -0,0 +1,13 @@
+# These are supported funding model platforms
+
+github: openfoodfoundation
+patreon: # Replace with a single Patreon username
+open_collective: #
+ko_fi: # Replace with a single Ko-fi username
+tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
+community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
+liberapay: # Replace with a single Liberapay username
+issuehunt: # Replace with a single IssueHunt username
+otechie: # Replace with a single Otechie username
+lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
+custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']

.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: ''
 
@@ -10,7 +10,6 @@ assignees: ''
 ## Preparation on Thursday
 
 - [ ] Merge pull requests in the [Ready To Go] column
-- [ ] Merge [Transifex pull request]
 - [ ] Include translations: `tx pull --force`
 - [ ] [Draft new release]. Look at previous [releases] for inspiration.
 - [ ] Notify [#instance-managers] of user-facing changes.
@@ -18,26 +17,13 @@ assignees: ''
 ## Testing
 
 - [ ] [Find build] of the release commit and copy it below.
-- [ ] Move this issue to Test Ready and notify testers.
-- [ ] Test: :warning: link to the build of the release commit https://semaphoreci.com/openfoodfoundation/openfoodnetwork-2/branches/master
+- [ ] Move this issue to Test Ready.
+- [ ] Notify `@testers` in [#testing].
+- [ ] Test build: <!-- paste build link here, e.g. https://semaphore...builds/1234 -->
 
 ## Finish on Tuesday
 
-- [ ] Update translations unless content has been removed from config/locales/en.yml between this release draft and current master.
-  <details><summary>Command line instructions</summary>
-  <pre>
-  git checkout master # same version as the release draft
-  git fetch upstream
-  git diff upstream/master -- config/locales/en.yml
-  tx pull --force # if no changes or only additions in the locale
-  git checkout --detach # if we need to commit new translations
-  git commit -a -m "Update translations"
-  git tag vx.y.z # put the release number in here
-  git push upstream vx.y.z
-  </pre>
-  </details>
-- [ ] 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>
@@ -57,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

@@ -10,24 +10,30 @@ on:
   pull_request:
     branches: [ "master" ]
 
+permissions:
+  contents: read
+
 jobs:
   brakeman-scan:
+    permissions:
+      contents: read  # for actions/checkout to fetch code
+      security-events: write  # for github/codeql-action/upload-sarif to upload SARIF results
     name: Brakeman Scan
     runs-on: ubuntu-latest
     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
 
@@ -39,6 +45,6 @@ jobs:
 
     # 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,18 +3,22 @@ name: Build
 on:
   workflow_dispatch:
   push:
+    branches-ignore:    
+      - 'dependabot/**'
   pull_request:
 
 env:
-  DISABLE_KNAPSACK: true
+  DISABLE_KNAPSACK_PRO: false
   TIMEZONE: UTC
   COVERAGE: true
-  RSPEC_RETRY_RETRY_COUNT: 3
   RAILS_ENV: test
 
+permissions:
+  contents: read
+
 jobs:
-  rspec:
-    runs-on: ubuntu-18.04
+  knapsack_rspec_controllers:
+    runs-on: ubuntu-20.04
     services:
       postgres:
         image: postgres:10
@@ -29,30 +33,31 @@ jobs:
           POSTGRES_USER: ofn
           POSTGRES_PASSWORD: f00d
     strategy:
-      matrix:
-        specs:
-          - "spec/controllers"
-          - "spec/models"
-          - "spec/features/admin/[a-o0-9]*_spec.rb"
-          - "spec/lib"
-          - "spec/migrations"
-          - "spec/serializers"
-          - "spec/system/admin/[a-o0-9]*_spec.rb"
-          - "spec/system/admin/[p-z]*_spec.rb"
-          - "spec/system/consumer"
-          - "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
@@ -63,19 +68,399 @@ jobs:
           bundle exec rake db:schema:load
 
       - name: Run tests
-        run: bundle exec rspec --profile -- ${{ matrix.specs }}
+
+        env:
+          KNAPSACK_PRO_TEST_SUITE_TOKEN_RSPEC: 864ef557d85ea8e603e086c0387d5154
+          KNAPSACK_PRO_CI_NODE_TOTAL: ${{ matrix.ci_node_total }}
+          KNAPSACK_PRO_CI_NODE_INDEX: ${{ matrix.ci_node_index }}
+          KNAPSACK_PRO_LOG_LEVEL: info
+          # if you use Knapsack Pro Queue Mode you must set below env variable
+          # to be able to retry CI build and run previously recorded tests
+          # https://github.com/KnapsackPro/knapsack_pro-ruby#knapsack_pro_fixed_queue_split-remember-queue-split-on-retry-ci-node
+          # KNAPSACK_PRO_FIXED_QUEUE_SPLIT: false
+          # RSpec split test files by test examples feature - it's optional
+          # https://knapsackpro.com/faq/question/how-to-split-slow-rspec-test-files-by-test-examples-by-individual-it
+          #KNAPSACK_PRO_RSPEC_SPLIT_BY_TEST_EXAMPLES: true
+          KNAPSACK_PRO_TEST_FILE_PATTERN: "{spec/controllers/**/*_spec.rb}" 
+        
+        run: |
+          bundle exec rake knapsack_pro:rspec
+
+  knapsack_rspec_models:
+    runs-on: ubuntu-20.04
+    services:
+      postgres:
+        image: postgres:10
+        ports: ["5432:5432"]
+        options: >-
+          --health-cmd pg_isready
+          --health-interval 10s
+          --health-timeout 5s
+          --health-retries 5
+        env:
+          POSTGRES_DB: open_food_network_test
+          POSTGRES_USER: ofn
+          POSTGRES_PASSWORD: f00d
+    strategy:
+      fail-fast: false
+      matrix:
+        # [n] - where the n is a number of parallel jobs you want to run your tests on.
+        # Use a higher number if you have slow tests to split them between more parallel jobs.
+        # Remember to update the value of the `ci_node_index` below to (0..n-1).
+        ci_node_total: [7]
+        # Indexes for parallel jobs (starting from zero).
+        # E.g. use [0, 1] for 2 parallel jobs, [0, 1, 2] for 3 parallel jobs, etc.
+        ci_node_index: [0, 1, 2, 3, 4, 5, 6]
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Setup redis
+        uses: supercharge/redis-github-action@1.4.0
+        with: 
+          redis-version: 6
+
+      - name: Set up Ruby
+        uses: ruby/setup-ruby@v1
+        with:
+          bundler-cache: true # runs 'bundle install' and caches installed gems automatically
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version-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-20.04
+    services:
+      postgres:
+        image: postgres:10
+        ports: ["5432:5432"]
+        options: >-
+          --health-cmd pg_isready
+          --health-interval 10s
+          --health-timeout 5s
+          --health-retries 5
+        env:
+          POSTGRES_DB: open_food_network_test
+          POSTGRES_USER: ofn
+          POSTGRES_PASSWORD: f00d
+    strategy:
+      fail-fast: false
+      matrix:
+        # [n] - where the n is a number of parallel jobs you want to run your tests on.
+        # Use a higher number if you have slow tests to split them between more parallel jobs.
+        # Remember to update the value of the `ci_node_index` below to (0..n-1).
+        ci_node_total: [10]
+        # Indexes for parallel jobs (starting from zero).
+        # E.g. use [0, 1] for 2 parallel jobs, [0, 1, 2] for 3 parallel jobs, etc.
+        ci_node_index: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] 
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Setup redis
+        uses: supercharge/redis-github-action@1.4.0
+        with: 
+          redis-version: 6
+
+      - name: Set up Ruby
+        uses: ruby/setup-ruby@v1
+        with:
+          bundler-cache: true # runs 'bundle install' and caches installed gems automatically
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version-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-18.04
+  knapsack_rspec_system_consumer:
+    runs-on: ubuntu-20.04
+    services:
+      postgres:
+        image: postgres:10
+        ports: ["5432:5432"]
+        options: >-
+          --health-cmd pg_isready
+          --health-interval 10s
+          --health-timeout 5s
+          --health-retries 5
+        env:
+          POSTGRES_DB: open_food_network_test
+          POSTGRES_USER: ofn
+          POSTGRES_PASSWORD: f00d
+    strategy:
+      fail-fast: false
+      matrix:
+        # [n] - where the n is a number of parallel jobs you want to run your tests on.
+        # Use a higher number if you have slow tests to split them between more parallel jobs.
+        # Remember to update the value of the `ci_node_index` below to (0..n-1).
+        ci_node_total: [10]
+        # Indexes for parallel jobs (starting from zero).
+        # E.g. use [0, 1] for 2 parallel jobs, [0, 1, 2] for 3 parallel jobs, etc.
+        ci_node_index: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] 
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Setup redis
+        uses: supercharge/redis-github-action@1.4.0
+        with: 
+          redis-version: 6
+
+      - name: Set up Ruby
+        uses: ruby/setup-ruby@v1
+        with:
+          bundler-cache: true # runs 'bundle install' and caches installed gems automatically
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version-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-20.04
+    services:
+      postgres:
+        image: postgres:10
+        ports: ["5432:5432"]
+        options: >-
+          --health-cmd pg_isready
+          --health-interval 10s
+          --health-timeout 5s
+          --health-retries 5
+        env:
+          POSTGRES_DB: open_food_network_test
+          POSTGRES_USER: ofn
+          POSTGRES_PASSWORD: f00d
+    strategy:
+      fail-fast: false
+      matrix:
+        # [n] - where the n is a number of parallel jobs you want to run your tests on.
+        # Use a higher number if you have slow tests to split them between more parallel jobs.
+        # Remember to update the value of the `ci_node_index` below to (0..n-1).
+        ci_node_total: [5]
+        # Indexes for parallel jobs (starting from zero).
+        # E.g. use [0, 1] for 2 parallel jobs, [0, 1, 2] for 3 parallel jobs, etc.
+        ci_node_index: [0, 1, 2, 3, 4]
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Setup redis
+        uses: supercharge/redis-github-action@1.4.0
+        with: 
+          redis-version: 6
+
+      - name: Set up Ruby
+        uses: ruby/setup-ruby@v1
+        with:
+          bundler-cache: true # runs 'bundle install' and caches installed gems automatically
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version-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-20.04
+    services:
+      postgres:
+        image: postgres:10
+        ports: ["5432:5432"]
+        options: >-
+          --health-cmd pg_isready
+          --health-interval 10s
+          --health-timeout 5s
+          --health-retries 5
+        env:
+          POSTGRES_DB: open_food_network_test
+          POSTGRES_USER: ofn
+          POSTGRES_PASSWORD: f00d
+    strategy:
+      fail-fast: false
+      matrix:
+        # [n] - where the n is a number of parallel jobs you want to run your tests on.
+        # Use a higher number if you have slow tests to split them between more parallel jobs.
+        # Remember to update the value of the `ci_node_index` below to (0..n-1).
+        ci_node_total: [5]
+        # Indexes for parallel jobs (starting from zero).
+        # E.g. use [0, 1] for 2 parallel jobs, [0, 1, 2] for 3 parallel jobs, etc.
+        ci_node_index: [0, 1, 2, 3, 4]
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Setup redis
+        uses: supercharge/redis-github-action@1.4.0
+        with: 
+          redis-version: 6
+
+      - name: Set up Ruby
+        uses: ruby/setup-ruby@v1
+        with:
+          bundler-cache: true # runs 'bundle install' and caches installed gems automatically
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version-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-20.04
     services:
       postgres:
         image: postgres:10
@@ -90,16 +475,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
@@ -108,12 +498,8 @@ jobs:
         run: |
           bundle exec rake db:create
           bundle exec rake db:schema:load
-
       - name: Run JS tests
         run: bundle exec rake karma:run
 
       - name: Run jest tests
         run: yarn jest
-
-      - name: Run all other tests
-        run: bundle exec rake ofn:specs:run:excluding_folders["models,controllers,serializers,features,lib,migrations,system"]

.github/workflows/linters.yml

@@ -1,5 +1,7 @@
 name: Linters
 on: [push, pull_request]
+permissions:
+  contents: read # to fetch code (actions/checkout)
 jobs:
   rubocop:
     name: runner / rubocop
@@ -16,3 +18,24 @@ jobs:
           reporter: github-pr-check
           level: error
           fail_on_error: true
+  prettier:
+    name: runner / prettier
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out code
+        uses: actions/checkout@v3
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version-file: .node-version
+
+      - name: Install JS dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: prettier
+        uses: EPMatt/reviewdog-action-prettier@v1
+        with:
+          github_token: ${{ secrets.github_token }}
+          reporter: github-pr-check
+          level: error
+          fail_on_error: true

.github/workflows/mapi.yml

@@ -1,13 +1,18 @@
 name: 'Mayhem for API'
-on: [push]
+on: workflow_dispatch
+permissions:
+  contents: read # to fetch code (actions/checkout)
 jobs:
   test:
+    permissions:
+      contents: read # to fetch code (actions/checkout)
+      security-events: write # to upload SARIF results (github/codeql-action/upload-sarif)
     if: ${{ github.repository_owner == 'openfoodfoundation' }}
     runs-on: ubuntu-latest
     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
@@ -34,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,10 +50,12 @@ vendor/bundle/
 coverage
 /reports/
 !/reports/README.md
-/spec/components/stories/**/*.stories.json
 
 /public/packs
 /public/packs-test
 /yarn-error.log
 yarn-debug.log*
 .yarn-integrity
+
+/config/credentials.yml.enc
+/config/master.key

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+ yarn pretty-quick --check --staged

.node-version

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

.prettierignore

@@ -0,0 +1,22 @@
+# Basically, ignore everythings expect app/webpacker/controllers/*.js and app/webpacker/packs/*.js
+*.css
+*.scss
+# Except v2
+!/app/webpacker/css/admin/v2/**/*.scss
+*.md
+*.yml
+*.yaml
+*.json
+*.html
+
+babel.config.js
+postcss.config.js
+
+/app/assets/
+/config/
+/coverage/
+/engines/
+/public/
+/spec/
+/tmp/
+/vendor/

.prettierrc.json

@@ -0,0 +1 @@
+{}

.rubocop_styleguide.yml

@@ -23,7 +23,7 @@ Metrics:
   Enabled: true
 
 Metrics/BlockLength:
-  IgnoredMethods: [
+  AllowedMethods: [
     "class_eval",
     "collection",
     "context",
@@ -41,8 +41,14 @@ Metrics/BlockLength:
     "resources",
     "scenario",
     "shared_examples",
+    "xdescribe",
   ]
 
+Rails/ApplicationRecord:
+  Exclude:
+    # Migrations should not contain application code:
+    - "db/migrate/*.rb"
+
 Rails/SkipsModelValidations:
   AllowedMethods:
     - "touch"

.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

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"
@@ -17,7 +17,7 @@ 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 'webpacker', '~> 5'
 
@@ -27,8 +27,9 @@ 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
 
 gem "valid_email2"
 
@@ -68,8 +69,11 @@ gem 'pagy', '~> 5.1'
 gem 'rswag-api'
 gem 'rswag-ui'
 
+gem 'omniauth_openid_connect'
+gem 'openid_connect', '~> 1.3'
+gem 'omniauth-rails_csrf_protection'
+
 gem 'angularjs-rails', '1.8.0'
-gem 'aws-sdk', '1.67.0'
 gem 'bugsnag'
 gem 'haml'
 gem 'redcarpet'
@@ -79,16 +83,15 @@ 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 'roadie-rails'
 
 gem 'hiredis'
@@ -97,15 +100,16 @@ gem 'redis', '>= 4.0', require: ['redis', 'redis/connection/hiredis']
 gem 'sidekiq'
 gem 'sidekiq-scheduler'
 
-gem "cable_ready", "5.0.0.pre3"
+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', github: "roo-rb/roo" # master is currently needed for Ruby 3.x (awaiting new release)
-gem 'spreadsheet_architect'
+gem 'roo' # read spreadsheets
+gem 'spreadsheet_architect' # write spreadsheets
 
 gem 'whenever', require: false
 
@@ -113,9 +117,7 @@ gem 'test-unit', '~> 3.5'
 
 gem 'coffee-rails', '~> 5.0.0'
 
-gem 'mini_racer', '0.4.0'
-
-gem 'uglifier', '>= 1.0.3'
+gem 'mini_racer'
 
 gem 'angular_rails_csrf'
 
@@ -123,15 +125,19 @@ 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'
 gem 'flipper-active_record'
 gem 'flipper-ui'
 
-gem "view_component", require: "view_component/engine"
+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'
@@ -140,8 +146,6 @@ group :production, :staging do
 end
 
 group :test, :development do
-  # Pretty printed test output
-  gem 'awesome_print'
   gem 'bullet'
   gem 'capybara'
   gem 'cuprite'
@@ -149,41 +153,37 @@ group :test, :development do
   gem "factory_bot_rails", '6.2.0', require: false
   gem 'fuubar', '~> 2.5.1'
   gem 'json_spec', '~> 1.1.4'
-  gem 'knapsack'
+  gem 'knapsack_pro'
   gem 'letter_opener', '>= 1.4.1'
   gem 'rspec-rails', ">= 3.5.2"
-  gem 'rspec-retry'
+  gem 'rspec-retry', require: false
   gem 'rswag-specs'
-  gem 'selenium-webdriver'
   gem 'shoulda-matchers'
   gem 'timecop'
-  gem 'webdrivers'
+  gem 'debug', '>= 1.0.0'
 end
 
 group :test do
-  gem 'byebug'
   gem 'pdf-reader'
   gem 'rails-controller-testing'
   gem 'simplecov', require: false
-  gem 'test-prof'
-  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 'pry-byebug', '~> 3.9.0'
   gem 'rubocop'
   gem 'rubocop-rails'
   gem 'spring'
   gem 'spring-commands-rspec'
   gem 'web-console'
 
-  gem "view_component_storybook", require: "view_component/storybook/engine"
-
   gem 'rack-mini-profiler', '< 3.0.0'
 end

README.md

@@ -33,18 +33,25 @@ 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
 
-Copyright (c) 2012 - 2021 Open Food Foundation, released under the AGPL licence.
+Copyright (c) 2012 - 2022 Open Food Foundation, released under the AGPL licence.
 
 [survey]: https://docs.google.com/a/eaterprises.com.au/forms/d/1zxR5vSiU9CigJ9cEaC8-eJLgYid8CR8er7PPH9Mc-30/edit#
 [slack-invite]: https://join.slack.com/t/openfoodnetwork/shared_invite/zt-9sjkjdlu-r02kUMP1zbrTgUhZhYPF~A
 [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/all.js

@@ -22,24 +22,6 @@
 //= require angular-rails-templates
 //= require lodash.underscore.js
 
-// datetimepicker  (fil, nb)
-//= require flatpickr/dist/flatpickr.min
-//= require flatpickr/dist/l10n/ar
-//= require flatpickr/dist/l10n/cat
-//= require flatpickr/dist/l10n/cy
-//= require flatpickr/dist/l10n/de
-//= require flatpickr/dist/l10n/es
-//= require flatpickr/dist/l10n/fr
-//= require flatpickr/dist/l10n/it
-//= require flatpickr/dist/l10n/nl
-//= require flatpickr/dist/l10n/pl
-//= require flatpickr/dist/l10n/pt
-//= require flatpickr/dist/l10n/ru
-//= require flatpickr/dist/l10n/sv
-//= require flatpickr/dist/l10n/tr
-//= require shortcut-buttons-flatpickr/dist/shortcut-buttons-flatpickr.min
-//= require flatpickr/dist/plugins/labelPlugin/labelPlugin
-
 // spree
 //= require admin/spree/spree
 //= require admin/spree/spree-select2
@@ -105,6 +87,8 @@
 //= require moment/locale/tr.js
 //= require moment/locale/pl.js
 
+//= require js-big-decimal/dist/web/js-big-decimal.min.js
+
 // foundation
 //= require ../shared/mm-foundation-tpls-0.9.0-20180826174721.min.js
 

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

@@ -256,12 +256,13 @@ angular.module("ofn.admin").controller "AdminProductEditCtrl", ($scope, $timeout
 
   $scope.packVariant = (product, variant) ->
     if variant.hasOwnProperty("unit_value_with_description")
-      match = variant.unit_value_with_description.match(/^([\d\.]+(?= |$)|)( |)(.*)$/)
+      match = variant.unit_value_with_description.match(/^([\d\.\,]+(?= |$)|)( |)(.*)$/)
       if match
         product = BulkProducts.find product.id
-        variant.unit_value  = parseFloat(match[1])
+        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/directives/display_as.js.coffee

@@ -39,9 +39,9 @@ angular.module("ofn.admin").directive "ofnDisplayAs", (OptionValueNamer) ->
       # get relevant variant properties
       variant = scope.$eval(attrs.ofnDisplayAs) # Like this so we can switch between 'master' and 'variant'
       if variant.unit_value_with_description?
-        match = variant.unit_value_with_description.match(/^([\d\.]+(?= |$)|)( |)(.*)$/)
+        match = variant.unit_value_with_description.match(/^([\d\.\,]+(?= |$)|)( |)(.*)$/)
         if match
-          unit_value  = parseFloat(match[1])
+          unit_value  = parseFloat(match[1].replace(",", "."))
           unit_value  = null if isNaN(unit_value)
           unit_value *= variant_unit_scale if unit_value && variant_unit_scale
           unit_description = match[3]

app/assets/javascripts/admin/dropdown/directives/dropdown.js.coffee

@@ -10,6 +10,7 @@
           scope.$emit "offClick"
 
     element.click (event) ->
+      return if event.target.closest(".ofn-drop-down").classList.contains "disabled" || event.target.classList.contains "disabled" 
       if !scope.expanded
         event.stopPropagation()
         scope.deregistrationCallback = scope.$on "offClick", ->

app/assets/javascripts/admin/enterprise_groups/controllers/side_menu_controller.js.coffee

@@ -1,15 +0,0 @@
-angular.module("admin.enterprise_groups")
-  .controller "sideMenuCtrl", ($scope, SideMenu) ->
-    $scope.menu = SideMenu
-    $scope.select = SideMenu.select
-
-    $scope.menu.setItems [
-      { name: 'primary_details', label: t('primary_details'), icon_class: "icon-user" }
-      { name: 'users', label: t('users'), icon_class: "icon-user" }
-      { name: 'about', label: t('about'), icon_class: "icon-pencil" }
-      { name: 'images', label: t('images'), icon_class: "icon-picture" }
-      { name: 'contact', label: t('admin_enterprise_groups_contact'), icon_class: "icon-phone" }
-      { name: 'web', label: t('admin_enterprise_groups_web'), icon_class: "icon-globe" }
-    ]
-
-    $scope.select(0)

app/assets/javascripts/admin/enterprises/controllers/country_controller.js.coffee

@@ -1,20 +0,0 @@
-# Used in enterprise new and edit forms to reset the state when the country is changed
-angular.module("admin.enterprises").controller 'countryCtrl', ($scope, $timeout, availableCountries) ->
-  $scope.address_type = "address"
-  $scope.countries = availableCountries
-
-  $scope.countriesById = $scope.countries.reduce (obj, country) ->
-    obj[country.id] = country
-    obj
-  , {}
-
-  $timeout ->
-    $scope.$watch 'Enterprise.' + $scope.address_type + '.country_id', (newID, oldID) ->
-      $scope.clearState() unless $scope.addressStateMatchesCountry()
-
-  $scope.clearState = ->
-    $scope.Enterprise[$scope.address_type].state_id = null
-
-  $scope.addressStateMatchesCountry = ->
-    $scope.countriesById[$scope.Enterprise[$scope.address_type].country_id].states.some (state) ->
-      state.id == $scope.Enterprise[$scope.address_type].state_id

app/assets/javascripts/admin/enterprises/controllers/enterprise_controller.js.coffee

@@ -1,9 +1,7 @@
 angular.module("admin.enterprises")
-  .controller "enterpriseCtrl", ($scope, $http, $window, NavigationCheck, enterprise, Enterprises, EnterprisePaymentMethods, EnterpriseShippingMethods, SideMenu, StatusMessage, RequestMonitor) ->
+  .controller "enterpriseCtrl", ($scope, $http, $window, NavigationCheck, enterprise, Enterprises, SideMenu, StatusMessage, RequestMonitor) ->
     $scope.Enterprise = enterprise
     $scope.Enterprises = Enterprises
-    $scope.PaymentMethods = EnterprisePaymentMethods.paymentMethods
-    $scope.ShippingMethods = EnterpriseShippingMethods.shippingMethods
     $scope.navClear = NavigationCheck.clear
     $scope.menu = SideMenu
     $scope.newManager = { id: null, email: (t('add_manager')) }
@@ -57,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/controllers/permalink_controller.js.coffee

@@ -1,27 +0,0 @@
-angular.module("admin.enterprises")
-  .controller "permalinkCtrl", ($scope, PermalinkChecker) ->
-    # locals
-    initialPermalink = $scope.Enterprise.permalink
-    pendingRequest = null
-
-    # variables on $scope
-    $scope.availablility = ""
-    $scope.checking = false
-
-    $scope.$watch "Enterprise.permalink", (newValue, oldValue) ->
-      if newValue == initialPermalink
-        $scope.availability = ""
-        return
-
-      $scope.checking = true
-      pendingRequest = PermalinkChecker.check(newValue)
-
-      pendingRequest.then (data) ->
-        if data.permalink == initialPermalink
-          $scope.availability = ""
-        else
-          $scope.availability = data.available
-        $scope.Enterprise.permalink = data.permalink
-        $scope.checking = false
-      , (data) ->
-        # Do nothing (this is hopefully an aborted request)

app/assets/javascripts/admin/enterprises/controllers/side_menu_controller.js.coffee

@@ -1,49 +0,0 @@
-angular.module("admin.enterprises")
-  .controller "sideMenuCtrl", ($scope, $parse, enterprise, SideMenu, enterprisePermissions) ->
-    $scope.Enterprise = enterprise
-    $scope.menu = SideMenu
-    $scope.select = SideMenu.select
-
-    $scope.menu.setItems [
-      { name: 'primary_details', label: t('primary_details'), icon_class: "icon-home" }
-      { name: 'address', label: t('address'), icon_class: "icon-map-marker" }
-      { name: 'contact', label: t('contact'), icon_class: "icon-phone" }
-      { name: 'social', label: t('social'), icon_class: "icon-twitter" }
-      { name: 'about', label: t('about'), icon_class: "icon-pencil" }
-      { name: 'business_details', label: t('business_details'), icon_class: "icon-briefcase" }
-      { name: 'images', label: t('images'), icon_class: "icon-picture" }
-      { name: 'properties', label: t('properties'), icon_class: "icon-tags", show: "showProperties()" }
-      { name: 'shipping_methods', label: t('shipping_methods'), icon_class: "icon-truck", show: "showShippingMethods()" }
-      { name: 'payment_methods', label: t('payment_methods'), icon_class: "icon-money", show: "showPaymentMethods()" }
-      { name: 'enterprise_fees', label: t('enterprise_fees'), icon_class: "icon-tasks", show: "showEnterpriseFees()" }
-      { name: 'enterprise_permissions', label: t('enterprise_permissions'), icon_class: "icon-plug" }
-      { name: 'inventory_settings', label: t('inventory_settings'), icon_class: "icon-list-ol", show: "enterpriseIsShop()" }
-      { name: 'tag_rules', label: t('tag_rules'), icon_class: "icon-random", show: "enterpriseIsShop()" }
-      { name: 'shop_preferences', label: t('shop_preferences'), icon_class: "icon-shopping-cart", show: "enterpriseIsShop()" }
-      { name: 'users', label: t('users'), icon_class: "icon-user" }
-    ]
-
-    SideMenu.init()
-
-    $scope.showItem = (item) ->
-      if item.show?
-        $parse(item.show)($scope)
-      else
-        true
-
-    $scope.showProperties = ->
-      !!$scope.Enterprise.is_primary_producer
-
-    $scope.showShippingMethods = ->
-      enterprisePermissions.can_manage_shipping_methods && $scope.Enterprise.sells != "none"
-
-    $scope.showPaymentMethods = ->
-      enterprisePermissions.can_manage_payment_methods && $scope.Enterprise.sells != "none"
-
-    $scope.showEnterpriseFees = ->
-      enterprisePermissions.can_manage_enterprise_fees && ($scope.Enterprise.sells != "none" || $scope.Enterprise.is_primary_producer)
-
-    $scope.enterpriseIsShop = ->
-      $scope.Enterprise.sells != "none"
-
-    $scope.menu.redirect_function('enterprise_permissions', '/admin/enterprise_relationships')

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/enterprises/services/enterprise_payment_methods.js.coffee

@@ -1,20 +0,0 @@
-angular.module("admin.enterprises")
-  .factory "EnterprisePaymentMethods", (enterprise, PaymentMethods) ->
-    new class EnterprisePaymentMethods
-      paymentMethods: PaymentMethods.all
-
-      constructor: ->
-        for payment_method in @paymentMethods
-          payment_method.selected = payment_method.id in enterprise.payment_method_ids
-
-      displayColor: ->
-        if @paymentMethods.length > 0 && @selectedCount() > 0
-          "blue"
-        else
-          "red"
-
-      selectedCount: ->
-        @paymentMethods.reduce (count, payment_method) ->
-          count++ if payment_method.selected
-          count
-        , 0

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

@@ -1,20 +0,0 @@
-angular.module("admin.enterprises")
-  .factory "EnterpriseShippingMethods", (enterprise, ShippingMethods) ->
-    new class EnterpriseShippingMethods
-      shippingMethods: ShippingMethods.all
-
-      constructor: ->
-        for shipping_method in @shippingMethods
-          shipping_method.selected = shipping_method.id in enterprise.shipping_method_ids
-
-      displayColor: ->
-        if @shippingMethods.length > 0 && @selectedCount() > 0
-          "blue"
-        else
-          "red"
-
-      selectedCount: ->
-        @shippingMethods.reduce (count, shipping_method) ->
-          count++ if shipping_method.selected
-          count
-        , 0

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/line_items/controllers/line_items_controller.js.coffee

@@ -3,14 +3,28 @@ 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.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
+  searchThrough = ["order_distributor_name",
+    "order_bill_address_phone",
+    "order_bill_address_firstname",
+    "order_bill_address_lastname",
+    "variant_product_supplier_name",
+    "order_email",
+    "order_number",
+    "product_name"].join("_or_") + "_cont"
 
   $scope.confirmRefresh = ->
     LineItems.allSaved() || confirm(t("unsaved_changes_warning"))
@@ -19,22 +33,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.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
@@ -42,49 +58,48 @@ 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[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,
+      "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
@@ -143,6 +158,10 @@ angular.module("admin.lineItems").controller 'LineItemsCtrl', ($scope, $timeout,
             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) ->
@@ -202,7 +221,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
@@ -246,5 +265,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/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

@@ -18,7 +18,8 @@ angular.module('admin.orderCycles')
       OrderCycle.exchangeDirection(exchange)
 
     $scope.enterprisesWithFees = ->
-      $scope.enterprises[id] for id in [OrderCycle.participatingEnterpriseIds()..., [OrderCycle.order_cycle.coordinator_id]...] when $scope.enterpriseFeesForEnterprise(id).length > 0
+      ids = [OrderCycle.participatingEnterpriseIds()..., [OrderCycle.order_cycle.coordinator_id]...]
+      $scope.enterprises[id] for id in Array.from(new Set(ids)) when $scope.enterpriseFeesForEnterprise(id).length > 0
 
     $scope.removeExchange = ($event, exchange) ->
       $event.preventDefault()
@@ -34,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/order_cycles/order_cycles.js.erb.coffee

@@ -1,21 +1,4 @@
 angular.module('admin.orderCycles', ['ngTagsInput', 'admin.indexUtils', 'admin.enterprises'])
-  .directive 'datetimepicker', ($timeout, $parse) ->
-    require: "ngModel"
-    link: (scope, element, attrs, ngModel) ->
-      $timeout ->
-        fp = flatpickr(element,  Object.assign({},
-                            window.FLATPICKR_DATETIME_DEFAULT, {
-                            onOpen: (selectedDates, dateStr, instance) ->
-                              instance.setDate(ngModel.$modelValue)
-                              instance.input.dispatchEvent(new Event('focus', { bubbles: true }));
-                            }));
-        fp.minuteElement.addEventListener "keyup", (e) ->
-          if !isNaN(event.target.value)
-            fp.setDate(fp.selectedDates[0].setMinutes(e.target.value), true)
-        fp.hourElement.addEventListener "keyup", (e) ->
-          if !isNaN(event.target.value)
-            fp.setDate(fp.selectedDates[0].setHours(e.target.value), true)            
-
   .directive 'ofnOnChange', ->
     (scope, element, attrs) ->
       element.bind 'change', ->

app/assets/javascripts/admin/order_cycles/services/order_cycle.js.coffee

@@ -93,9 +93,9 @@ angular.module('admin.orderCycles').factory 'OrderCycle', ($resource, $window, $
       variant_ids
 
     participatingEnterpriseIds: ->
-      suppliers = (exchange.enterprise_id for exchange in this.order_cycle.incoming_exchanges)
-      distributors = (exchange.enterprise_id for exchange in this.order_cycle.outgoing_exchanges)
-      jQuery.unique(suppliers.concat(distributors)).sort()
+      suppliers = (parseInt(exchange.enterprise_id) for exchange in this.order_cycle.incoming_exchanges)
+      distributors = (parseInt(exchange.enterprise_id) for exchange in this.order_cycle.outgoing_exchanges)
+      Array.from(new Set([suppliers..., distributors...]))
 
     exchangesByDirection: (direction) ->
       if direction == 'incoming'

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

@@ -20,7 +20,7 @@ angular.module("admin.orders").controller "orderCtrl", ($scope, shops, orderCycl
     $scope.distributor_id && $scope.order_cycle_id
 
   for oc in $scope.orderCycles
-    oc.name_and_status = "#{oc.name} (#{oc.status})"
+    oc.name_and_status = "#{oc.name} (#{t("admin.order_cycles.status.#{oc.status}")})"
 
   for shop in $scope.shops
     shop.disabled = !$scope.distributorHasOrderCycles(shop)

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

@@ -29,6 +29,8 @@ angular.module("admin.orders").controller "ordersCtrl", ($scope, $timeout, Reque
     $scope.q = {
       completed_at_not_null: true
     }
+    e = new CustomEvent("flatpickr_clear");
+    window.dispatchEvent(e)
 
   $scope.clearFilters = () ->
     KeyValueMapStore.clearKeyValueMap()

app/assets/javascripts/admin/payment_methods/controllers/payment_methods_controller.js.coffee

@@ -1,3 +0,0 @@
-angular.module("admin.paymentMethods").controller "paymentMethodsCtrl", ($scope, PaymentMethods) ->
-  $scope.findPaymentMethodByID = (id) ->
-    $scope.PaymentMethod = PaymentMethods.byID[id]

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
 
@@ -32,11 +38,11 @@ angular.module("admin.products")
         if match
           $scope.product.master.unit_value  = PriceParser.parse(match[1])
           $scope.product.master.unit_value  = null if isNaN($scope.product.master.unit_value)
-          $scope.product.master.unit_value *= $scope.product.variant_unit_scale if $scope.product.master.unit_value && $scope.product.variant_unit_scale
+          $scope.product.master.unit_value = window.bigDecimal.multiply($scope.product.master.unit_value, $scope.product.variant_unit_scale, 2) if $scope.product.master.unit_value && $scope.product.variant_unit_scale
           $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/products/controllers/variant_units_controller.js.coffee

@@ -23,10 +23,10 @@ angular.module("admin.products").controller "variantUnitsCtrl", ($scope, Variant
 
   $scope.updateValue = ->
     unit_value_human = angular.element('#unit_value_human').val()
-    $scope.unit_value = PriceParser.parse(unit_value_human) * $scope.scale
+    $scope.unit_value = bigDecimal.multiply(PriceParser.parse(unit_value_human), $scope.scale, 2)
 
   variant_unit_value = angular.element('#variant_unit_value').val()
-  $scope.unit_value_human = variant_unit_value / $scope.scale
+  $scope.unit_value_human = parseFloat(bigDecimal.divide(variant_unit_value, $scope.scale, 2))
 
   $timeout -> $scope.processUnitPrice()
   $timeout -> $scope.updateValue()

app/assets/javascripts/admin/products/services/product_image_service.js.coffee

@@ -13,3 +13,9 @@ angular.module("ofn.admin").factory "ProductImageService", (FileUploader, SpreeA
       @imageUploader.onSuccessItem = (image, response) =>
         product.thumb_url = response.thumb_url
         product.image_url = response.image_url
+      @imageUploader.onErrorItem = (image, response) =>
+        if Array.isArray(response.errors)
+          message = response.errors.join("\n")
+        else
+          message = response.error.toString()
+        alert(message)

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/shipping_methods/controllers/shipping_methods_controller.js.coffee

@@ -1,3 +0,0 @@
-angular.module("admin.shippingMethods").controller "shippingMethodsCtrl", ($scope, ShippingMethods) ->
-  $scope.findShippingMethodByID = (id) ->
-    $scope.ShippingMethod = ShippingMethods.byID[id]

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

@@ -39,25 +39,94 @@ $(document).ready(function() {
   }
   $('[data-hook=admin_order_edit_form] a.save-method').click(handle_shipping_method_save);
 
-  //handle tracking edit click
+  //handle tracking info edit/delete
+
+  // Show the input field to edit the tracking info
+  // And hide the input field when cancel is clicked
   $('a.edit-tracking').click(toggleTrackingEdit);
   $('a.cancel-tracking').click(toggleTrackingEdit);
 
-  handle_tracking_save = function(){
-    var link = $(this);
-    var shipment_number = link.data('shipment-number');
-    var tracking = link.parents('tbody').find('input#tracking').val();
-    var url = Spree.url( Spree.routes.orders_api + "/" + order_number + "/shipments/" + shipment_number + ".json");
+  saveTrackingInfo = function(){
+    let shipmentNumber = $(this).data('shipment-number');
+    let tracking = document.getElementById('tracking').value
 
+    makeApiCall(trackingUrl(shipmentNumber), { shipment: { tracking: tracking } } )
+  }
+
+  deleteTrackingInfo = function(){
+    let shipmentNumber = $(this).data('shipment-number');
+    let tracking = ''
+
+    confirmDelete(trackingUrl(shipmentNumber), { shipment: { tracking: tracking } })
+  }
+
+  trackingUrl = function(shipmentNumber){
+    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);
+
+  // handle note edit/delete
+
+  // Show the input field to edit the note
+  // And hide the input field when cancel is clicked
+  $('a.edit-note.icon-edit').click(toggleNoteEdit);
+  $('a.cancel-note').click(toggleNoteEdit);
+
+  saveNote = function(){
+    let note = document.getElementById('note').value
+    makeApiCall(getNoteUrl(), { note: note })
+  }
+
+  deleteNote = function(){
+    let note = ''
+    confirmDelete(getNoteUrl(), { note: note })
+  }
+
+  getNoteUrl = function(){
+    return Spree.url( Spree.routes.orders_api + "/" + order_number);
+  }
+
+  confirmDelete = function(url, params){
+    displayDeleteAlert(function(confirmation) {
+      if (confirmation) {
+        makeApiCall(url, params)
+      }
+    }); 
+  }
+
+  $('[data-hook=admin_order_edit_form] a.save-note').click(saveNote);
+  $('[data-hook=admin_order_edit_form] a.delete-note').click(deleteNote);
+
+  // Makes API call for notes/tracking info
+  makeApiCall = function(url, params) {
     $.ajax({
       type: "PUT",
       url: url,
-      data: { shipment: { tracking: tracking } }
+      data: params
     }).done(function( msg ) {
       window.location.reload();
     }).error(function( msg ) {
       console.log(msg);
     });
   }
-  $('[data-hook=admin_order_edit_form] a.save-tracking').click(handle_tracking_save);
+
+  displayDeleteAlert = function(callback) {
+    i18nKey = "are_you_sure";
+    $('#custom-confirm .message').html(
+      ` ${t(i18nKey)}
+              <div class="form">
+              </div>`);
+    $('#custom-confirm button.confirm').unbind( "click" ).click(() => {
+      $('#custom-confirm').hide();
+      callback(true);
+    });
+    $('#custom-confirm button.cancel').click(() => {
+      $('#custom-confirm').hide();
+      callback(false)
+    });
+    $('#custom-confirm').show();
+  }
+
 });

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

@@ -141,8 +141,26 @@ doAdjustItems = function(shipment_number, variant_id, quantity, inventory_units,
 
 toggleTrackingEdit = function(){
   var link = $(this);
-  link.parents('tbody').find('tr.edit-tracking').toggle();
-  link.parents('tbody').find('tr.show-tracking').toggle();
+  var parent_node = link.parents('tbody')
+  let input = parent_node.find('#tracking')[0]
+  parent_node.find('tr.edit-tracking').toggle();
+  // Set focus on input and
+  // put cursor at it's end
+  input.focus()
+  input.setSelectionRange(-1, -1)
+  parent_node.find('tr.show-tracking').toggle();
+}
+
+toggleNoteEdit = function(){
+  var link = $(this);
+  var parent_node = link.parents('tbody')
+  let input = parent_node.find('#note')[0]
+  parent_node.find('tr.edit-note').toggle();
+  // Set focus on input and
+  // put cursor at it's end
+  input.focus()
+  input.setSelectionRange(-1, -1)
+  parent_node.find('tr.show-note').toggle();
 }
 
 toggleMethodEdit = function(){
@@ -232,6 +250,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")}

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

@@ -8,13 +8,18 @@ handle_move = (e, data) ->
   node = data.rslt.o
   new_parent = data.rslt.np
 
-  url = Spree.url(base_url).clone()
-  url.pathname = url.pathname + '/' + node.attr("id")
+  url = new URL(Spree.routes.admin_taxonomy_taxons)
+  url.pathname = url.pathname + '/' + node.attr("id") 
+  data = {
+    _method: "put",
+    "taxon[position]": position,
+    "taxon[parent_id]": if !isNaN(new_parent.attr("id")) then new_parent.attr("id") else undefined
+  }
   $.ajax
     type: "POST",
     dataType: "json",
     url: url.toString(),
-    data: ({_method: "put", "taxon[parent_id]": new_parent.attr("id"), "taxon[position]": position }),
+    data: data,
     error: handle_ajax_error
 
   true
@@ -26,11 +31,16 @@ handle_create = (e, data) ->
   position = data.rslt.position
   new_parent = data.rslt.parent
 
+  data = {
+    "taxon[name]": name,
+    "taxon[position]": position
+    "taxon[parent_id]": if !isNaN(new_parent.attr("id")) then new_parent.attr("id") else undefined
+  }
   $.ajax
     type: "POST",
     dataType: "json",
     url: base_url.toString(),
-    data: ({"taxon[name]": name, "taxon[parent_id]": new_parent.attr("id"), "taxon[position]": position }),
+    data: data,
     error: handle_ajax_error,
     success: (data,result) ->
       node.attr('id', data.id)
@@ -39,8 +49,10 @@ handle_rename = (e, data) ->
   last_rollback = data.rlbk
   node = data.rslt.obj
   name = data.rslt.new_name
+  # change the name inside the main input field as well if taxon is the root one
+  document.getElementById("taxonomy_name").value = name if node.parents("[id]").attr("id") == "taxonomy_tree"
 
-  url = Spree.url(base_url).clone()
+  url = new URL(base_url)
   url.pathname = url.pathname + '/' + node.attr("id")
 
   $.ajax
@@ -53,8 +65,8 @@ handle_rename = (e, data) ->
 handle_delete = (e, data) ->
   last_rollback = data.rlbk
   node = data.rslt.obj
-  delete_url = base_url.clone()
-  delete_url.setPath delete_url.path() + '/' + node.attr("id")
+  delete_url = new URL(base_url)
+  delete_url.pathname = delete_url.pathname + '/' + node.attr("id")
   if confirm(Spree.translations.are_you_sure_delete)
     $.ajax
       type: "POST",

app/assets/javascripts/admin/subscriptions/directives/new_subscription_dialog.js.coffee

@@ -1,29 +0,0 @@
-angular.module("admin.subscriptions").directive 'newSubscriptionDialog', ($rootScope, $compile, $window, $templateCache, DialogDefaults, shops) ->
-  restrict: 'A'
-  scope: true
-  link: (scope, element, attr) ->
-    scope.submitted = false
-    scope.shops = shops
-    scope.shop_id = null
-
-    scope.newSubscription = ->
-      scope.new_subscription_form.$setPristine()
-      scope.submitted = true
-      if scope.shop_id?
-        $window.location.href = "/admin/subscriptions/new?subscription[shop_id]=#{scope.shop_id}"
-      return
-
-    # Compile modal template
-    template = $compile($templateCache.get('admin/new_subscription_dialog.html'))(scope)
-
-    # Set Dialog options
-    template.dialog(DialogDefaults)
-
-    # Link opening of dialog to click event on element
-    element.bind 'click', (e) ->
-      if shops.length == 1
-        scope.shop_id = shops[0].id
-        scope.newSubscription()
-      else
-        template.dialog('open')
-        $rootScope.$evalAsync()

app/assets/javascripts/admin/util.js.erb

@@ -1,70 +1,4 @@
 $(document).ready(function() {
-  var onClickButtons = function(index, fp) {
-    var date;
-    // Memorize index used for the 'Close' button
-    // (currently it has index of 1)  
-    var closeButtonIndex = 1; 
-    switch (index) {
-      case 0:
-        date = new Date();
-        break;
-      case closeButtonIndex:
-        fp.close();
-        break;
-    }
-    // Set the date unless clicked button was the 'Close' one
-    if (index != closeButtonIndex) {
-      fp.setDate(date, true);
-    }
-  }
-  window.FLATPICKR_DATE_DEFAULT = {
-    altInput: true,
-    altFormat: Spree.translations.flatpickr_date_format,
-    dateFormat: "Y-m-d",
-    locale: I18n.base_locale,
-    plugins: [
-        ShortcutButtonsPlugin({
-          button: [
-            {
-              label: Spree.translations.today
-            },
-            {
-              label: Spree.translations.close
-            }
-          ],
-          label: "or",
-          onClick: onClickButtons
-        }),
-        labelPlugin({})
-      ]
-  }
-  window.FLATPICKR_DATETIME_DEFAULT = Object.assign(
-    {},
-    window.FLATPICKR_DATE_DEFAULT,
-    {
-      altInput: true,
-      altFormat: Spree.translations.flatpickr_datetime_format,
-      dateFormat: "Y-m-d H:i",
-      enableTime: true,
-      time_24hr: true,
-      plugins: [
-        ShortcutButtonsPlugin({
-          button: [
-            {
-              label: Spree.translations.now
-            },
-            {
-              label: Spree.translations.close
-            }
-          ],
-          label: "or",
-          onClick: onClickButtons
-        }),
-        labelPlugin({})
-      ]
-    }
-  );
-  flatpickr(".datetimepicker", window.FLATPICKR_DATETIME_DEFAULT);
   $('a.close').click(function(event){
     event.preventDefault();
     $(this).parent().slideUp(250);

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

@@ -1,14 +0,0 @@
-angular.module("admin.utils").directive "datepicker", ($window, $timeout) ->
-  require: "ngModel"
-  link: (scope, element, attrs, ngModel) ->
-    $timeout ->
-      flapickrInstance = flatpickr(element,  Object.assign(
-                            {},
-                            $window.FLATPICKR_DATE_DEFAULT, {
-                            onOpen: (selectedDates, dateStr, instance) ->
-                              instance.setDate(ngModel.$modelValue)
-                            }
-                          ));
-      ngModel.$render = () ->
-        newValue = ngModel.$viewValue;
-        flapickrInstance?.setDate(newValue)

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

@@ -3,6 +3,7 @@ angular.module("admin.utils").directive "tagsWithTranslation", ($timeout) ->
   templateUrl: "admin/tags_input.html"
   scope:
     object: "="
+    form: "="
     tagsAttr: "@?"
     tagListAttr: "@?"
     findTags: "&"
@@ -18,7 +19,15 @@ angular.module("admin.utils").directive "tagsWithTranslation", ($timeout) ->
       scope.limitReached = scope.object[scope.tagsAttr].length >= scope.max if scope.max != undefined
       scope.object[scope.tagListAttr] = (tag.text for tag in scope.object[scope.tagsAttr]).join(",")
 
+    scope.$watch "object", (newObject) -> 
+      scope.object = newObject
+      init()
+
     $timeout ->
+      init()
+    
+    init = ->
+      return unless scope.object
       # Initialize properties if necessary
       scope.tagsAttr ||= "tags"
       scope.tagListAttr ||= "tag_list"

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

@@ -5,15 +5,16 @@ angular.module("admin.utils").factory "ErrorsParser", ->
       return defaultContent unless errors?
 
       errorsString = ""
-      if errors.length > 0
+      if Array.isArray(errors)
         # it is an array of errors
         errorsString = errors.join("\n") + "\n"
-      else
+      else if typeof errors == "object"
         # it is a hash of errors
         keys = Object.keys(errors)
         for key in keys
           errorsString += errors[key].join("\n") + "\n"
-
+      else # string
+        errorsString = errors
       this.defaultIfEmpty(errorsString, defaultContent)
 
     defaultIfEmpty: (content, defaultContent) =>

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

@@ -1,2 +1,3 @@
-angular.module("admin.utils", ["templates", "ngSanitize"]).config ($httpProvider) ->
+angular.module("admin.utils", ["templates", "ngSanitize"]).config ($httpProvider, $locationProvider) ->
+ $locationProvider.hashPrefix('')
  $httpProvider.defaults.headers.common["Accept"] = "application/json, text/javascript, */*"

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

@@ -20,3 +20,6 @@ angular.module('Darkswarm').controller "CreditCardsCtrl", ($scope, $http, Credit
     ).finally ->
       window.location.reload()
 
+
+  $scope.hasOneDefaultSavedCards = () ->
+    $scope.savedCreditCards.some((card) -> card.is_default)

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

@@ -26,4 +26,8 @@ angular.module('mm.foundation.offcanvas').directive 'offCanvasWrap', ($window) -
       # Bind hiding of the off-canvas that only happens when screen width is over 1024px.
       win.bind 'resize.body', ->
         isolatedScope.hide() if $(window).width() > 1024
+
+      win.bind 'click.body', (e) ->
+        if e.target.closest(".left-off-canvas-menu") == null && e.target.closest(".left-off-canvas-toggle") == null
+          isolatedScope.hide()
   }

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_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/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/new_subscription_dialog.html.haml

@@ -1,14 +0,0 @@
-#new-subscription-dialog
-  .text-normal.margin-bottom-30.text-center
-    = t('js.admin.subscriptions.new.please_select_a_shop')
-
-  %form{ name: 'new_subscription_form', novalidate: true, ng: { submit: "newSubscription()" }}
-
-    .text-center.margin-bottom-30
-      %input.ofn-select2.fullwidth#new_subscription_shop_id{ ng: { model: 'shop_id' }, required: true, name: 'shop_id', data: 'shops' }
-      %div{ ng: { show: "submitted && new_subscription_form.$pristine" } }
-        .error{ ng: { show: "new_subscription_form.shop_id.$error.required" } }
-          = t('js.admin.subscriptions.new.please_select_a_shop')
-
-    .text-center
-      %input.button.red.icon-plus{ type: 'submit', value: t('continue') }

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/partials/contact.html.haml

@@ -1,8 +1,12 @@
 %div.contact-container
-  %div.modal-centered{"ng-if" => "::enterprise.email_address || enterprise.website || enterprise.phone"}
+  %div.modal-centered{"ng-if" => "::enterprise.email_address || enterprise.website || enterprise.phone || enterprise.whatsapp_phone"}
     %p.modal-header {{'contact' | t}}
     %p{"ng-if" => "::enterprise.phone", "ng-bind" => "::enterprise.phone"}
 
+    %p{"ng-if" => "::enterprise.whatsapp_phone"}
+      %img{ src: image_path("/map_icons/social-logos/whatsapp.svg") }
+      %a{"ng-href" => "{{::enterprise.whatsapp_url}}", target: "_blank", "ng-bind" => "::enterprise.whatsapp_phone"}
+
     %p{"ng-if" => "::enterprise.email_address"}
       %a{"ng-href" => "{{::enterprise.email_address | stripUrl}}", target: "_blank", mailto: true}
         %span.obfuscatedEmail.email{"ng-bind" => "::enterprise.email_address | stripUrl"}

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

@@ -9,19 +9,19 @@
         %span{"ng-bind" => "::'item_cost' | t"}
       %li{"ng-if" => "::variant.fees.admin"}
         .right {{ ::variant.fees.admin | localizeCurrency }}
-        %span{"ng-bind" => "::'admin_fee' | t"}
+        %span{"ng-bind" => "::variant.fees_name.admin"}
       %li{"ng-if" => "::variant.fees.sales"}
         .right {{ ::variant.fees.sales | localizeCurrency }}
-        %span{"ng-bind" => "::'sales_fee' | t"}
+        %span{"ng-bind" => "::variant.fees_name.sales"}
       %li{"ng-if" => "::variant.fees.packing"}
         .right {{ ::variant.fees.packing | localizeCurrency }}
-        %span{"ng-bind" => "::'packing_fee' | t"}
+        %span{"ng-bind" => "::variant.fees_name.packing"}
       %li{"ng-if" => "::variant.fees.transport"}
         .right {{ ::variant.fees.transport | localizeCurrency }}
-        %span{"ng-bind" => "::'transport_fee' | t"}
+        %span{"ng-bind" => "::variant.fees_name.transport"}
       %li{"ng-if" => "::variant.fees.fundraising"}
         .right {{ ::variant.fees.fundraising | localizeCurrency }}
-        %span{"ng-bind" => "::'fundraising_fee' | t"}
+        %span{"ng-bind" => "::variant.fees_name.fundraising"}
       %li
         %strong
           .right = {{ ::variant.price_with_fees | localizeCurrency }}

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/application_cable/channel.rb

@@ -0,0 +1,6 @@
+# frozen_string_literal: true
+
+module ApplicationCable
+  class Channel < ActionCable::Channel::Base
+  end
+end

app/channels/application_cable/connection.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module ApplicationCable
+  class Connection < ActionCable::Connection::Base
+    identified_by :session_id, :current_user
+
+    def connect
+      # initializes Warden after a cold start, in case you're visitor #1
+      env["warden"].authenticated?
+      # the problem with only using session is that users often login on multiple devices
+      self.current_user = env["warden"].user
+      # the problem with only using user is that sometimes you might want to use SR before you login
+      self.session_id = request.session.id
+      # and so, we recommend using both
+
+      # this assumes that you want to enable SR for unauthenticated users
+      reject_unauthorized_connection unless current_user || session_id
+
+      # if you want to disable SR for unauthenticated users,
+      # comment out the line above and uncomment the line below
+      # reject_unauthorized_connection unless current_user
+    end
+  end
+end

app/components/confirm_modal_component.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+class ConfirmModalComponent < ModalComponent
+  def initialize(id:, confirm_actions: nil, controllers: nil, message: nil)
+    super(id: id, close_button: true)
+    @confirm_actions = confirm_actions
+    @controllers = controllers
+    @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 #{@controllers}", "data-action": "keyup@document->modal#closeIfEscapeKey" }
+  .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 }

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/multiple_checked_select_component.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+class MultipleCheckedSelectComponent < ViewComponent::Base
+  def initialize(name:, options:, selected:)
+    @name = name
+    @options = options.map { |option| [option[0], option[1].to_sym] }
+    @selected = selected.nil? ? [] : selected.map(&:to_sym)
+  end
+end

app/components/multiple_checked_select_component/multiple_checked_select_component.html.haml

@@ -0,0 +1,13 @@
+.ofn-drop-down.ofn-drop-down-v2{ data: { controller: "multiple-checked-select" } }
+  %div.ofn-drop-down-label{ "data-multiple-checked-select-target": "button" }
+    %span{class: "label"}= t('admin.columns')
+    %span{ class: "icon-caret-down", "data-multiple-checked-select-target": "caret" }
+  %div.menu{ class: "hidden", "data-multiple-checked-select-target": "options" }
+    %div.filter
+      %input{ type: "text", "data-multiple-checked-select-target": "filter", placeholder: I18n.t('components.multiple_checked_select.filter_placeholder') }
+    %hr
+    %div.menu_items
+      - @options.each do |option|
+        %label.menu_item{ "data-multiple-checked-select-target": "option", "data-value": option[1], "data-label": option[0] }
+          %input.redesigned-input{ type: "checkbox", checked: @selected.include?(option[1]), name: "#{@name}[]", value: option[1] }
+          = option[0]

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
+        = image_tag @image.url(:mini)
+      = column[:value]