Canceling an order: clicking on cancel btn or cancel action in dropdown

.env

@@ -52,8 +52,6 @@ SMTP_PASSWORD="f00d"
 
 # see="https://developers.google.com/maps/documentation/javascript/get-api-key
 # GOOGLE_MAPS_API_KEY="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
-# see https://developers.google.com/maps/documentation/javascript/localization#Region
-# GOOGLE_MAPS_REGION="XX"
 
 # Stripe details for instance account
 # Find these under 'Developers' -> 'API keys' in your Stripe account dashboard.
@@ -63,9 +61,3 @@ SMTP_PASSWORD="f00d"
 # STRIPE_INSTANCE_PUBLISHABLE_KEY="pk_test_xxxx" # This can be a test key or a live key
 # STRIPE_CLIENT_ID="ca_xxxx" # This can be a development ID or a production ID
 # STRIPE_ENDPOINT_SECRET="whsec_xxxx"
-
-# New relic settings
-# see: https://one.eu.newrelic.com/admin-portal/, Administration > API keys to get the license key
-# NEW_RELIC_AGENT_ENABLED=true
-# NEW_RELIC_APP_NAME="Open Food Network"
-# NEW_RELIC_LICENSE_KEY="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"

.env.development

@@ -5,8 +5,6 @@
 #
 #     cp .env.development .env.local
 
-VERBOSE_QUERY_LOGS=true
-
 SECRET_TOKEN="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
 
 OFN_REDIS_URL="redis://localhost:6379/1"

.env.test

@@ -2,11 +2,8 @@
 # Override locally with `.env.test.local`
 
 SECRET_TOKEN="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
-STRIPE_INSTANCE_SECRET_KEY="bogus_key"
+STRIPE_SECRET_TEST_API_KEY="bogus_key"
 STRIPE_CUSTOMER="bogus_customer"
-STRIPE_ACCOUNT="bogus_account"
-STRIPE_CLIENT_ID="bogus_client_id"
-STRIPE_PUBLIC_TEST_API_KEY="bogus_stripe_publishable_key"
 
 SITE_URL="test.host"
 

.github/ISSUE_TEMPLATE/release.md

@@ -7,26 +7,21 @@ assignees: ''
 
 ---
 
-## 1. Preparation on Thursday
+## Preparation on Thursday
 
 - [ ] Merge pull requests in the [Ready To Go] column
-- [ ] Include translations: `script/release/update_locales`
-- [ ] Increment version number: `git push upstream HEAD:refs/tags/vX.Y.Z`
-    - Major: if server changes are required (eg. provision with ofn-install)
-    - Minor: larger change that is irreversible (eg. migration deleting data)
-    - Patch: all others. Shortcut: `script/release/tag`
+- [ ] Include translations: `tx pull --force`
 - [ ] [Draft new release]. Look at previous [releases] for inspiration.
-    - Select new release tag
-    - _Generate release notes_ and check to ensure all items are arranged in the right category.
-- [ ] Notify [#instance-managers] of user-facing :eyes:, API :warning: and experimental :construction: changes.
+- [ ] Notify [#instance-managers] of user-facing changes.
 
-## 2. Testing
+## Testing
 
+- [ ] [Find build] of the release commit and copy it below.
 - [ ] Move this issue to Test Ready.
 - [ ] Notify `@testers` in [#testing].
-- [ ] Test build: [Deploy to Staging] with release tag.
+- [ ] Test build: <!-- paste build link here, e.g. https://semaphore...builds/1234 -->
 
-## 3. Finish on Tuesday
+## Finish on Tuesday
 
 - [ ] Publish and notify [#global-community] (this is automatically posted with a plugin)
 - [ ] Deploy the new release to all managed instances.
@@ -34,7 +29,7 @@ assignees: ''
   <pre>
   cd ofn-install
   git pull
-  ansible-playbook --limit all_prod --extra-vars "git_version=vX.Y.Z" playbooks/deploy.yml
+  ansible-playbook --limit all-prod --extra-vars "git_version=vx.y.z" playbooks/deploy.yml
   </pre>
   </details>
 - [ ] Notify [#instance-managers]:
@@ -45,9 +40,9 @@ The full process is described at https://github.com/openfoodfoundation/openfoodn
 
 [Ready To Go]: #zenhub
 [Transifex pull request]: https://github.com/openfoodfoundation/openfoodnetwork/pulls?utf8=%E2%9C%93&q=is%3Apr+is%3Aopen+head%3Atransifex
-[Draft new release]: https://github.com/openfoodfoundation/openfoodnetwork/releases/new?tag=v&title=v+Code+Name&body=Congrats%0A%0ADescription%0A%0A
+[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
-[Deploy to Staging]: https://github.com/openfoodfoundation/openfoodnetwork/actions/workflows/stage.yml
+[Find build]: https://semaphoreci.com/openfoodfoundation/openfoodnetwork-2/branches/master
 [#global-community]: https://app.slack.com/client/T02G54U79/C59ADD8F2

.github/PULL_REQUEST_TEMPLATE.md

@@ -20,12 +20,7 @@
 
 <!-- Please select one for your PR and delete the other. -->
 
-Changelog Category (reviewers may add a label for the release notes):
-
-- [ ] User facing changes
-- [ ] API changes (V0, V1, DFC or Webhook)
-- [ ] Technical changes only
-- [ ] Feature toggled
+Changelog Category: User facing changes | Technical changes
 
 <!-- Choose a pull request title above which explains your change to a
      a user of the Open Food Network app. -->

.github/release.yml

@@ -1,37 +0,0 @@
-changelog:
-  # Categorise according to what an instance manager needs to know
-  categories:
-    # Add the right label if anything appears in here.
-    # Then re-generate the release notes.
-    - title: "❓❓❓ Uncategorised ❓❓❓"
-      labels:
-        - '*'
-      exclude:
-        labels:
-          - api changes
-          - dependencies
-          - feature toggled
-          - technical changes only
-          - user facing changes
-
-    # Posted in advance for #instance-managers
-    - title: "User-facing changes 👀"
-      labels:
-        - user facing changes
-
-    - title: "API changes ⚠️"
-      labels:
-        - api changes
-
-    - title: "Experimental features for testing 🚧" # may be tested by instance managers
-      labels:
-        - feature toggled
-
-    # Instance managers ignore below
-    - title: "Technical changes 🛠️"
-      labels:
-        - technical changes only
-
-    - title: "Dependencies 📦"
-      labels:
-        - dependencies

.github/workflows/build.yml

@@ -17,8 +17,8 @@ permissions:
   contents: read
 
 jobs:
-  controllers:
-    runs-on: ubuntu-22.04
+  knapsack_rspec_controllers:
+    runs-on: ubuntu-20.04
     services:
       postgres:
         image: postgres:10
@@ -85,8 +85,8 @@ jobs:
           git show --no-patch # the commit being tested (which is often a merge due to actions/checkout@v3)
           bundle exec rake knapsack_pro:rspec
 
-  models:
-    runs-on: ubuntu-22.04
+  knapsack_rspec_models:
+    runs-on: ubuntu-20.04
     services:
       postgres:
         image: postgres:10
@@ -106,10 +106,10 @@ jobs:
         # [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]
+        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]
+        ci_node_index: [0, 1, 2, 3, 4, 5, 6]
     steps:
       - uses: actions/checkout@v3
 
@@ -154,8 +154,8 @@ jobs:
         run: |
           bundle exec rake knapsack_pro:rspec
 
-  system_admin:
-    runs-on: ubuntu-22.04
+  knapsack_rspec_system_admin:
+    runs-on: ubuntu-20.04
     services:
       postgres:
         image: postgres:10
@@ -175,10 +175,10 @@ jobs:
         # [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: [13]
+        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, 10, 11, 12] 
+        ci_node_index: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] 
     steps:
       - uses: actions/checkout@v3
 
@@ -232,8 +232,8 @@ jobs:
           retention-days: 7
           if-no-files-found: ignore
 
-  system_consumer:
-    runs-on: ubuntu-22.04
+  knapsack_rspec_system_consumer:
+    runs-on: ubuntu-20.04
     services:
       postgres:
         image: postgres:10
@@ -253,10 +253,10 @@ jobs:
         # [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: [12]
+        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, 10, 11] 
+        ci_node_index: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] 
     steps:
       - uses: actions/checkout@v3
 
@@ -310,8 +310,8 @@ jobs:
           retention-days: 7
           if-no-files-found: ignore
 
-  engines:
-    runs-on: ubuntu-22.04
+  knapsack_rspec_engines:
+    runs-on: ubuntu-20.04
     services:
       postgres:
         image: postgres:10
@@ -331,10 +331,10 @@ jobs:
         # [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: [2]
+        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]
+        ci_node_index: [0, 1, 2, 3, 4]
     steps:
       - uses: actions/checkout@v3
 
@@ -388,8 +388,8 @@ jobs:
           retention-days: 7
           if-no-files-found: ignore
 
-  test_the_rest:
-    runs-on: ubuntu-22.04
+  knapsack_rspec_test_the_rest:
+    runs-on: ubuntu-20.04
     services:
       postgres:
         image: postgres:10
@@ -459,7 +459,7 @@ jobs:
           bundle exec rake knapsack_pro:rspec
 
   non_knapsack_jest_karma:
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-20.04
     services:
       postgres:
         image: postgres:10

.github/workflows/mapi.yml

@@ -28,7 +28,7 @@ jobs:
       with:
         mapi-token: ${{ secrets.MAPI_TOKEN }}
         api-url: http://localhost:3000
-        api-spec: swagger/v1.yaml
+        api-spec: swagger/v1/swagger.yaml
         target: openfoodfoundation/openfoodnetwork
         duration: 1min
         sarif-report: mapi.sarif

.github/workflows/stage.yml

@@ -1,66 +0,0 @@
-name: "Deploy to Staging"
-
-on:
-  pull_request_target:
-    types: [labeled]
-  workflow_dispatch:
-    inputs:
-      server:
-        description: "Staging Server"
-        type: choice
-        required: true
-        options:
-          - staging.openfoodnetwork.org.uk
-          - staging.openfoodnetwork.org.au
-          - staging.coopcircuits.fr
-      commit_ref:
-        description: "Commit Reference"
-        type: string
-        required: false
-
-jobs:
-  deploy_pr:
-    if: contains(fromJSON('["pr-staged-uk", "pr-staged-au", "pr-staged-fr"]'), github.event.label.name)
-    runs-on: ubuntu-latest
-    steps:
-      - name: "Check user has write access"
-        uses: "lannonbr/repo-permission-check-action@2.0.2"
-        with:
-          permission: "write"
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-      
-      - name: Configure deployment key
-        if: success()
-        run: |
-          install -m 600 -D /dev/null ~/.ssh/id_rsa
-          echo "${{ secrets.DEPLOYMENT_KEY }}" > ~/.ssh/id_rsa
-          echo "${{ secrets.DEPLOYMENT_HOSTS }}" > ~/.ssh/known_hosts
-
-      - name: Deploy to Staging
-        if: success()
-        run: |
-          ssh ofn-deploy@${{ github.event.label.description }} -o LogLevel=ERROR "pull-request-${{ github.event.pull_request.number }} ."
-
-  deploy_branch:
-    if: ${{ inputs.server }}
-    runs-on: ubuntu-latest
-    steps:
-      - name: "Check user has write access"
-        uses: "lannonbr/repo-permission-check-action@2.0.2"
-        with:
-          permission: "write"
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          
-      - name: Configure deployment key
-        if: success()
-        run: |
-          install -m 600 -D /dev/null ~/.ssh/id_rsa
-          echo "${{ secrets.DEPLOYMENT_KEY }}" > ~/.ssh/id_rsa
-          echo "${{ secrets.DEPLOYMENT_HOSTS }}" > ~/.ssh/known_hosts
-
-      - name: Deploy to Staging
-        if: success()
-        run: |
-          ssh ofn-deploy@${{ inputs.server }} -o LogLevel=ERROR "$GITHUB_REF_NAME ${{ inputs.commit_ref || github.sha }}"

.husky/pre-commit

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

.prettierignore

@@ -1,27 +1,17 @@
-# Ignore a lot of things, but we should enable where it can be helpful.
-
+# 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
 
-# JS
-# Enabled: app/webpacker/controllers/*.js and app/webpacker/packs/*.js
 babel.config.js
 postcss.config.js
 
-# SCSS
-# Enabled: most of admin
-/app/webpacker/css/admin/globals/mixins.scss
-/app/webpacker/css/admin/globals/variables.scss
-/app/webpacker/css/admin/shared/
-/app/webpacker/css/admin_v3/globals/variables.scss
-/app/webpacker/css/darkswarm/
-/app/webpacker/css/mail/
-/app/webpacker/css/shared/
-
-# More
 /app/assets/
 /config/
 /coverage/

.prettierrc.json

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

.rubocop_styleguide.yml

@@ -25,7 +25,6 @@ Metrics/BlockLength:
   AllowedMethods: [
     "class_eval",
     "collection",
-    "configure",
     "context",
     "delete",
     "describe",
@@ -39,28 +38,16 @@ Metrics/BlockLength:
     "put",
     "resource",
     "resources",
-    "response",
     "scenario",
     "shared_examples",
-    "shared_examples_for",
     "xdescribe",
   ]
 
-Metrics/ParameterLists:
-  CountKeywordArgs: false
-
 Rails/ApplicationRecord:
   Exclude:
     # Migrations should not contain application code:
     - "db/migrate/*.rb"
 
-# Allow many-to-many associations without explicit model.
-# - It avoids the additional code of a model class.
-# - It simplifies the declaration of the association.
-# - Rails may know that there are no callbacks associated.
-Rails/HasAndBelongsToMany:
-  Enabled: false
-
 Rails/SkipsModelValidations:
   AllowedMethods:
     - "touch"
@@ -70,10 +57,6 @@ Rails/SkipsModelValidations:
     - "update_column"
     - "update_columns"
 
-Rails/OutputSafety:
-  Exclude:
-    - 'spec/**/*'
-
 Style/Documentation:
   Enabled: false
 
@@ -105,8 +88,6 @@ Naming/VariableNumber:
   AllowedIdentifiers:
     - street_address_1
     - street_address_2
-  AllowedPatterns:
-    - _v[\d]+
 
 Bundler/DuplicatedGem:
   Enabled: false

.ruby-version

@@ -1 +1 @@
-3.1.4
+3.0.3

CONTRIBUTING.md

@@ -71,5 +71,5 @@ From here, your pull request will progress through the [Review, Test, Merge & De
 [slack-dev]: https://openfoodnetwork.slack.com/messages/C2GQ45KNU
 [ofn-transifex]: https://www.transifex.com/open-food-foundation/open-food-network/
 [i18n]: https://github.com/openfoodfoundation/openfoodnetwork/wiki/Internationalisation-%28i18n%29
-[welcome-dev]: https://github.com/orgs/openfoodfoundation/projects/5
+[welcome-dev]: https://github.com/orgs/openfoodfoundation/projects/2
 [ci]: https://github.com/openfoodfoundation/openfoodnetwork/wiki/Continuous-Integration

Gemfile

@@ -1,10 +1,9 @@
 # frozen_string_literal: true
 
 source 'https://rubygems.org'
+ruby "3.0.3"
 git_source(:github) { |repo_name| "https://github.com/#{repo_name}.git" }
 
-ruby File.read('.ruby-version').chomp
-
 gem 'dotenv-rails', require: 'dotenv/rails-now' # Load ENV vars before other gems
 
 gem 'rails'
@@ -15,11 +14,11 @@ gem "aws-sdk-s3", require: false
 gem "image_processing"
 
 gem 'activemerchant', '>= 1.78.0'
+gem 'rexml'
 gem 'angular-rails-templates', '>= 0.3.0'
 gem 'awesome_nested_set'
-gem 'ransack', '~> 4.1.0'
+gem 'ransack', '~> 2.6.0'
 gem 'responders'
-gem 'rexml'
 gem 'webpacker', '~> 5'
 
 gem 'i18n'
@@ -32,7 +31,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 "validates_lengths_from_database"
 gem "valid_email2"
 
 gem "catalog", path: "./engines/catalog"
@@ -65,7 +63,6 @@ gem 'devise-token_authenticatable'
 gem 'jwt', '~> 2.3'
 gem 'oauth2', '~> 1.4.7' # Used for Stripe Connect
 
-gem 'datafoodconsortium-connector'
 gem 'jsonapi-serializer'
 gem 'pagy', '~> 5.1'
 
@@ -73,8 +70,8 @@ gem 'rswag-api'
 gem 'rswag-ui'
 
 gem 'omniauth_openid_connect'
+gem 'openid_connect', '~> 1.3'
 gem 'omniauth-rails_csrf_protection'
-gem 'openid_connect'
 
 gem 'angularjs-rails', '1.8.0'
 gem 'bugsnag'
@@ -93,18 +90,19 @@ gem 'bootsnap', require: false
 gem 'geocoder'
 gem 'gmaps4rails'
 gem 'mimemagic', '> 0.3.5'
-gem 'paper_trail'
+gem 'paper_trail', '~> 12.1'
 gem 'rack-rewrite'
 gem 'rack-timeout'
 gem 'roadie-rails'
 
+gem 'hiredis'
 gem 'puma'
-gem 'redis'
+gem 'redis', '>= 4.0', require: ['redis', 'redis/connection/hiredis']
 gem 'sidekiq'
 gem 'sidekiq-scheduler'
 
-gem "cable_ready", "5.0.1"
-gem "stimulus_reflex", "3.5.0.rc3"
+gem "cable_ready", "5.0.0.rc2"
+gem "stimulus_reflex", "3.5.0.rc2"
 
 gem 'combine_pdf'
 gem 'wicked_pdf'
@@ -116,8 +114,12 @@ gem 'spreadsheet_architect' # write spreadsheets
 
 gem 'whenever', require: false
 
+gem 'test-unit', '~> 3.5'
+
 gem 'coffee-rails', '~> 5.0.0'
 
+gem 'mini_racer'
+
 gem 'angular_rails_csrf'
 
 gem 'jquery-rails', '4.4.0'
@@ -133,18 +135,13 @@ gem 'flipper-ui'
 gem "view_component"
 gem 'view_component_reflex', '3.1.14.pre9'
 
-# mini_portile2 is needed when installing with Vargant
-# https://openfoodnetwork.slack.com/archives/CEBMTRCNS/p1668439152992899
 gem 'mini_portile2', '~> 2.8'
 
 gem "faraday"
 gem "private_address_check"
 
-gem 'newrelic_rpm'
-
-gem 'invisible_captcha'
-
 group :production, :staging do
+  gem 'ddtrace'
   gem 'sd_notify' # For better Systemd process management. Used by Puma.
 end
 
@@ -153,7 +150,6 @@ group :test, :development do
   gem 'capybara'
   gem 'cuprite'
   gem 'database_cleaner', require: false
-  gem 'debug', '>= 1.0.0'
   gem "factory_bot_rails", '6.2.0', require: false
   gem 'fuubar', '~> 2.5.1'
   gem 'json_spec', '~> 1.1.4'
@@ -161,10 +157,10 @@ group :test, :development do
   gem 'letter_opener', '>= 1.4.1'
   gem 'rspec-rails', ">= 3.5.2"
   gem 'rspec-retry', require: false
-  gem 'rswag'
+  gem 'rswag-specs'
   gem 'shoulda-matchers'
-  gem 'stimulus_reflex_testing'
   gem 'timecop'
+  gem 'debug', '>= 1.0.0'
 end
 
 group :test do
@@ -179,11 +175,10 @@ end
 
 group :development do
   gem 'debugger-linecache'
+  gem 'rails-erd'
   gem 'foreman'
   gem 'listen'
   gem 'pry', '~> 0.13.0'
-  gem 'query_count'
-  gem 'rails-erd'
   gem 'rubocop'
   gem 'rubocop-rails'
   gem 'spring'

README.md

@@ -1,4 +1,5 @@
 [![Build](https://github.com/openfoodfoundation/openfoodnetwork/actions/workflows/build.yml/badge.svg)](https://github.com/openfoodfoundation/openfoodnetwork/actions/workflows/build.yml)
+[![Code Climate](https://codeclimate.com/github/openfoodfoundation/openfoodnetwork.png)](https://codeclimate.com/github/openfoodfoundation/openfoodnetwork)
 
 # Open Food Network
 
@@ -44,7 +45,7 @@ We use [KnapsackPro](https://knapsackpro.com/) for optimal parallelisation of ou
 
 ## Licence
 
-Copyright (c) 2012 - 2024 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

Rakefile

@@ -7,3 +7,4 @@
 require_relative 'config/application'
 
 Openfoodnetwork::Application.load_tasks
+

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

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

app/assets/javascripts/admin/all.js

@@ -7,6 +7,7 @@
 
 // jquery and angular
 //= require jquery2
+//= require jquery_ujs
 //= require jquery.ui.all
 //= require jquery.powertip
 //= require jquery.cookie
@@ -68,6 +69,25 @@
 //= require textAngular.min.js
 //= require i18n/translations
 //= require darkswarm/i18n.translate.js
+//= require moment/min/moment.min.js
+//= require moment/locale/ar.js
+//= require moment/locale/ca.js
+//= require moment/locale/de.js
+//= require moment/locale/en-gb.js
+//= require moment/locale/es.js
+//= require moment/locale/fil.js
+//= require moment/locale/fr.js
+//= require moment/locale/it.js
+//= require moment/locale/nb.js
+//= require moment/locale/nl-be.js
+//= require moment/locale/pt-br.js
+//= require moment/locale/pt.js
+//= require moment/locale/ru.js
+//= require moment/locale/sv.js
+//= require moment/locale/tr.js
+//= require moment/locale/pl.js
+
+//= require js-big-decimal/dist/web/js-big-decimal.min.js
 
 // foundation
 //= require ../shared/mm-foundation-tpls-0.9.0-20180826174721.min.js

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

@@ -113,7 +113,7 @@ angular.module("ofn.admin").controller "AdminProductEditCtrl", ($scope, $timeout
     (DirtyProducts.count() > 0 and confirm(t("unsaved_changes_confirmation"))) or (DirtyProducts.count() == 0)
 
   editProductUrl = (product, variant) ->
-    "/admin/products/" + product.id + ((if variant then "/variants/" + variant.id else "")) + "/edit"
+    "/admin/products/" + product.permalink_live + ((if variant then "/variants/" + variant.id else "")) + "/edit"
 
   $scope.editWarn = (product, variant) ->
     if confirm_unsaved_changes()
@@ -135,7 +135,6 @@ angular.module("ofn.admin").controller "AdminProductEditCtrl", ($scope, $timeout
       display_name: null
       on_hand: null
       price: null
-      tax_category_id: null
     DisplayProperties.setShowVariants product.id, true
 
 
@@ -163,7 +162,7 @@ angular.module("ofn.admin").controller "AdminProductEditCtrl", ($scope, $timeout
         if confirm(t("are_you_sure"))
           $http(
             method: "DELETE"
-            url: "/api/v0/products/" + product.id + "/variants/" + variant.id
+            url: "/api/v0/products/" + product.permalink_live + "/variants/" + variant.id
           ).then (response) ->
             $scope.removeVariant(product, variant)
     else
@@ -248,6 +247,7 @@ angular.module("ofn.admin").controller "AdminProductEditCtrl", ($scope, $timeout
     else
       product.variant_unit = product.variant_unit_scale = null
 
+    $scope.packVariant product, product.master if product.master
 
     if product.variants
       for id, variant of product.variants
@@ -298,6 +298,7 @@ filterSubmitProducts = (productsToFilter) ->
       if product.hasOwnProperty("id")
         filteredProduct = {id: product.id}
         filteredVariants = []
+        filteredMaster = null
         hasUpdatableProperty = false
 
         if product.hasOwnProperty("variants")
@@ -307,6 +308,16 @@ filterSubmitProducts = (productsToFilter) ->
             variantHasUpdatableProperty = result.hasUpdatableProperty
             filteredVariants.push filteredVariant  if variantHasUpdatableProperty
 
+        if product.master?.hasOwnProperty("unit_value")
+          filteredMaster ?= { id: product.master.id }
+          filteredMaster.unit_value = product.master.unit_value
+        if product.master?.hasOwnProperty("unit_description")
+          filteredMaster ?= { id: product.master.id }
+          filteredMaster.unit_description = product.master.unit_description
+        if product.master?.hasOwnProperty("display_as")
+          filteredMaster ?= { id: product.master.id }
+          filteredMaster.display_as = product.master.display_as
+
         if product.hasOwnProperty("sku")
           filteredProduct.sku = product.sku
           hasUpdatableProperty = true
@@ -335,9 +346,18 @@ filterSubmitProducts = (productsToFilter) ->
         if product.hasOwnProperty("category_id")
           filteredProduct.primary_taxon_id = product.category_id
           hasUpdatableProperty = true
+        if product.hasOwnProperty("tax_category_id")
+          filteredProduct.tax_category_id = product.tax_category_id
+          hasUpdatableProperty = true
         if product.hasOwnProperty("inherits_properties")
           filteredProduct.inherits_properties = product.inherits_properties
           hasUpdatableProperty = true
+        if product.hasOwnProperty("available_on")
+          filteredProduct.available_on = product.available_on
+          hasUpdatableProperty = true
+        if filteredMaster?
+          filteredProduct.master_attributes = filteredMaster
+          hasUpdatableProperty = true
         if filteredVariants.length > 0 # Note that the name of the property changes to enable mass assignment of variants attributes with rails
           filteredProduct.variants_attributes = filteredVariants
           hasUpdatableProperty = true
@@ -372,9 +392,6 @@ filterSubmitVariant = (variant) ->
     if variant.hasOwnProperty("display_name")
       filteredVariant.display_name = variant.display_name
       hasUpdatableProperty = true
-    if variant.hasOwnProperty("tax_category_id")
-      filteredVariant.tax_category_id = variant.tax_category_id
-      hasUpdatableProperty = true
     if variant.hasOwnProperty("display_as")
       filteredVariant.display_as = variant.display_as
       hasUpdatableProperty = true

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

@@ -0,0 +1,5 @@
+ angular.module("admin.dropdown").directive "linksDropdown", ($window)->
+  restrict: "C"
+  scope:
+    links: "="
+  templateUrl: "admin/links_dropdown.html"

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

@@ -11,8 +11,14 @@ angular.module("admin.indexUtils").directive "objForUpdate", (switchClass, pendi
         pendingChanges.remove(scope.object().id, scope.attr)
         scope.clear()
       else
+        change =
+          object: scope.object()
+          type: scope.type
+          attr: scope.attr
+          value: if value? then value else ""
+          scope: scope
         scope.pending()
-        addPendingChange(scope.attr, value ? "")
+        pendingChanges.add(scope.object().id, scope.attr, change)
 
     scope.reset = (value) ->
       scope.savedValue = value
@@ -28,33 +34,3 @@ angular.module("admin.indexUtils").directive "objForUpdate", (switchClass, pendi
 
     scope.clear = ->
       switchClass( element, "", ["update-pending", "update-error", "update-success"], false )
-
-    # When a list of customer is filtered and we removed the "filtered value" from a customer, we
-    # want to make sure the customer is updated. IE. filtering by tag, and removing said tag.
-    # Deleting the "filtered value" from a customer will remove the customer entry, thus
-    # removing "objForUpdate" directive from the active scope. That means $watch won't pick up
-    # the attribute changed.
-    # To ensure the customer is still updated, we check on the $destroy event to see if
-    # the attribute has changed, if so we queue up the change.
-    scope.$on '$destroy', (value) ->
-      # No update
-      return if scope.object()[scope.attr] is scope.savedValue
-
-      # For some reason the code attribute is removed from the object when cleared, so we add
-      # an emptyvalue so it gets updated properly
-      if scope.attr is "code" and scope.object()[scope.attr] is undefined
-        scope.object()["code"] = ""
-
-      # Queuing up change
-      addPendingChange(scope.attr, scope.object()[scope.attr])
-
-    # private
-
-    addPendingChange = (attr, value) ->
-      change =
-        object: scope.object()
-        type: scope.type
-        attr: attr
-        value: value
-        scope: scope
-      pendingChanges.add(scope.object().id, attr, change)

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

@@ -9,7 +9,6 @@ angular.module("admin.lineItems").controller 'LineItemsCtrl', ($scope, $timeout,
   $scope.sharedResource = false
   $scope.columns = Columns.columns
   $scope.sorting = SortOptions
-  $scope.sorting.toggle("order_date")
   $scope.pagination = LineItems.pagination
   $scope.per_page_options = [
     {id: 15, name: t('js.admin.orders.index.per_page', results: 15)},
@@ -23,10 +22,6 @@ angular.module("admin.lineItems").controller 'LineItemsCtrl', ($scope, $timeout,
     "order_bill_address_phone",
     "order_bill_address_firstname",
     "order_bill_address_lastname",
-    "order_bill_address_full_name",
-    "order_bill_address_full_name_reversed",
-    "order_bill_address_full_name_with_comma",
-    "order_bill_address_full_name_with_comma_reversed",
     "variant_product_supplier_name",
     "order_email",
     "order_number",
@@ -65,8 +60,6 @@ angular.module("admin.lineItems").controller 'LineItemsCtrl', ($scope, $timeout,
     $scope.dereferenceLoadedData()
 
   $scope.loadOrders = ->
-    return $scope.orders = [] unless $scope.line_items.length
-
     RequestMonitor.load $scope.orders = Orders.index(
       "q[id_in][]": $scope.line_items.map((line_item) -> line_item.order.id)
     )
@@ -85,7 +78,6 @@ angular.module("admin.lineItems").controller 'LineItemsCtrl', ($scope, $timeout,
       "q[order_order_cycle_id_eq]": $scope.orderCycleFilter,
       "q[order_completed_at_gteq]": if formattedStartDate then formattedStartDate else undefined,
       "q[order_completed_at_lt]": if formattedEndDate then formattedEndDate else undefined,
-      "q[s]": "order_completed_at desc",
       "page": $scope.page,
       "per_page": $scope.per_page
     )
@@ -129,16 +121,16 @@ angular.module("admin.lineItems").controller 'LineItemsCtrl', ($scope, $timeout,
     else
       StatusMessage.display 'failure', t "unsaved_changes_error"
 
-  $scope.cancelOrder = (order, sendEmailCancellation, restock_items) ->
+  $scope.cancelOrder = (order, sendEmailCancellation) ->
     return $http(
       method: 'GET'
-      url: "/admin/orders/#{order.number}/fire?e=cancel&send_cancellation_email=#{sendEmailCancellation}&restock_items=#{restock_items}")
+      url: "/admin/orders/#{order.number}/fire?e=cancel&send_cancellation_email=#{sendEmailCancellation}")
   
   $scope.deleteLineItem = (lineItem) ->
     if lineItem.order.item_count == 1
-      ofnCancelOrderAlert((confirm, sendEmailCancellation, restock_items) ->
+      ofnCancelOrderAlert((confirm, sendEmailCancellation) ->
         if confirm
-          $scope.cancelOrder(lineItem.order, sendEmailCancellation, restock_items).then(->
+          $scope.cancelOrder(lineItem.order, sendEmailCancellation).then(->
             $scope.refreshData()
           )
         else
@@ -160,11 +152,11 @@ angular.module("admin.lineItems").controller 'LineItemsCtrl', ($scope, $timeout,
       willCancelOrders = true if (order.item_count == itemsPerOrder.get(order).length)
 
     if willCancelOrders
-      ofnCancelOrderAlert((confirm, sendEmailCancellation, restock_items) ->
+      ofnCancelOrderAlert((confirm, sendEmailCancellation) ->
         if confirm
           itemsPerOrder.forEach (items, order) =>
             if order.item_count == items.length
-              $scope.cancelOrder(order, sendEmailCancellation, restock_items).then(-> $scope.refreshData())
+              $scope.cancelOrder(order, sendEmailCancellation).then(-> $scope.refreshData())
             else
               Promise.all(LineItems.delete(item) for item in items).then(-> $scope.refreshData())
       , "js.admin.deleting_item_will_cancel_order")   

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

@@ -33,4 +33,6 @@ angular.module('admin.orderCycles').factory('Enterprise', ($resource) ->
     variantsOf: (product) ->
       if product.variants.length > 0
         variant.id for variant in product.variants
+      else
+        [product.master_id]
   })

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

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

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

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

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

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

app/assets/javascripts/admin/payments/services/payment.js.coffee

@@ -42,10 +42,8 @@ angular.module('admin.payments').factory 'Payment', (AdminStripeElements, curren
 
     submit: =>
       munged = @preprocess()
-      PaymentResource.create({order_id: munged.order_id}, munged, (response, headers, status) ->
-        rawHtml = Object.values(response).join('').replace('[object Object]true', '')
-        document.body.innerHTML = rawHtml
-        $window.history.pushState({}, '', "/admin/orders/" + munged.order_id + "/payments")
+      PaymentResource.create({order_id: munged.order_id}, munged, (response, headers, status)=>
+        $window.location.pathname = "/admin/orders/" + munged.order_id + "/payments"
       , (response) ->
         StatusMessage.display 'error', t("spree.admin.payments.source_forms.stripe.error_saving_payment")
       )

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

@@ -2,9 +2,6 @@ angular.module("admin.products").factory "VariantUnitManager", (availableUnits)
   class VariantUnitManager
     @units:
       'weight':
-        0.001:
-          name: 'mg'
-          system: 'metric'
         1.0:
           name: 'g'
           system: 'metric'
@@ -24,21 +21,12 @@ angular.module("admin.products").factory "VariantUnitManager", (availableUnits)
         0.001:
           name: 'mL'
           system: 'metric'
-        0.01:
-          name: 'cL'
-          system: 'metric'
-        0.1:
-          name: 'dL'
-          system: 'metric'
         1.0:
           name: 'L'
           system: 'metric'
         1000.0:
           name: 'kL'
           system: 'metric'
-        4.54609:
-          name: 'gal'
-          system: 'metric'
       'items':
         1:
           name: 'items'
@@ -72,13 +60,8 @@ angular.module("admin.products").factory "VariantUnitManager", (availableUnits)
 
     @compatibleUnitScales: (scale, unitType) ->
       scaleSystem = @units[unitType][scale]['system']
-      if availableUnits
-        available = availableUnits.split(",")
-        (parseFloat(scale) for scale, scaleInfo of @units[unitType] when scaleInfo['system'] == scaleSystem and available.includes(scaleInfo['name'])).sort (a, b) ->
-          a - b
-      else
-        (parseFloat(scale) for scale, scaleInfo of @units[unitType] when scaleInfo['system'] == scaleSystem).sort (a, b) ->
-          a - b
+      (parseFloat(scale) for scale, scaleInfo of @units[unitType] when scaleInfo['system'] == scaleSystem).sort (a, b) ->
+         a - b
 
     @systemOfMeasurement: (scale, unitType) ->
       if @units[unitType][scale]

app/assets/javascripts/admin/spree/base.js.erb

@@ -32,6 +32,9 @@ jQuery(function($) {
     });
   }
 
+  // Make flash messages dissapear
+  setTimeout('$(".flash").fadeOut()', 5000);
+
   // Highlight hovered table column
   $('table tbody tr td.actions a').hover(function(){
     var tr = $(this).closest('tr');

app/assets/javascripts/admin/spree/images/index.js.coffee

@@ -0,0 +1,15 @@
+$ ->
+  ($ '#new_image_link').click (event) ->
+    event.preventDefault()
+
+    ($ '.no-objects-found').hide()
+
+    ($ this).hide()
+    $.ajax
+      type: 'GET'
+      url: @href
+      data: (
+        authenticity_token: AUTH_TOKEN
+      )
+      success: (r) ->
+        ($ '#images').html r

app/assets/javascripts/admin/spree/images/new.js.coffee

@@ -0,0 +1,7 @@
+($ '#cancel_link').click (event) ->
+  event.preventDefault()
+
+  ($ '.no-objects-found').show()
+
+  ($ '#new_image_link').show()
+  ($ '#images').html('')

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

@@ -1,6 +1,22 @@
 // Shipments AJAX API
 
 $(document).ready(function() {
+
+  handle_ship_click = function(){
+    var link = $(this);
+    var shipment_number = link.data('shipment-number');
+    var url = Spree.url( Spree.routes.orders_api + "/" + order_number + "/shipments/" + shipment_number + "/ship.json");
+    $.ajax({
+      type: "PUT",
+      url: url
+    }).done(function( msg ) {
+      window.location.reload();
+    }).error(function( msg ) {
+      console.log(msg);
+    });
+  }
+  $('[data-hook=admin_order_edit_form] a.ship').click(handle_ship_click);
+
   //handle shipping method edit click
   $('a.edit-method').click(toggleMethodEdit);
   $('a.cancel-method').click(toggleMethodEdit);
@@ -21,7 +37,7 @@ $(document).ready(function() {
       console.log(msg);
     });
   }
-  $('.admin-order-edit-form a.save-method').click(handle_shipping_method_save);
+  $('[data-hook=admin_order_edit_form] a.save-method').click(handle_shipping_method_save);
 
   //handle tracking info edit/delete
 
@@ -48,8 +64,8 @@ $(document).ready(function() {
     return Spree.url( Spree.routes.orders_api + "/" + order_number + "/shipments/" + shipmentNumber + ".json");
   }
 
-  $('.admin-order-edit-form a.save-tracking').click(saveTrackingInfo);
-  $('.admin-order-edit-form a.delete-tracking').click(deleteTrackingInfo);
+  $('[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
 
@@ -80,8 +96,8 @@ $(document).ready(function() {
     }); 
   }
 
-  $('.admin-order-edit-form a.save-note').click(saveNote);
-  $('.admin-order-edit-form a.delete-note').click(deleteNote);
+  $('[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) {

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

@@ -50,11 +50,11 @@ $(document).ready(function() {
       if (quantity > maxQuantity) {
         quantity = maxQuantity;
         save.parents('tr').find('input.line_item_quantity').val(maxQuantity);
-        ofnAlert(t("js.admin.orders.quantity_unavailable"));
-      } else {
-        adjustItems(shipment_number, variant_id, quantity, true);
+        ofnAlert(t("js.admin.orders.quantity_adjusted"));
       }
+      toggleItemEdit();
 
+      adjustItems(shipment_number, variant_id, quantity, true);
       return false;
     }
     $('a.save-item').click(handle_save_click);
@@ -100,7 +100,6 @@ adjustItems = function(shipment_number, variant_id, quantity, restock_item){
         doAdjustItems(shipment_number, variant_id, quantity, inventory_units, restock_item, () => {
           var redirectTo = new URL(Spree.routes.cancel_order.toString());
           redirectTo.searchParams.append("send_cancellation_email", sendEmailCancellation);
-          redirectTo.searchParams.append("restock_item", restock_item);
           window.location.href = redirectTo.toString();
         });
       }

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

@@ -10,12 +10,6 @@ angular.module("admin.utils").directive "variantAutocomplete", ($timeout) ->
         element.select2
           placeholder: t('admin.orders.select_variant')
           minimumInputLength: 3
-          formatInputTooShort: ->
-            t('admin.select2.minimal_search_length', count: 3)
-          formatSearching: ->
-            t('admin.select2.searching')
-          formatNoMatches: ->
-            t('admin.select2.no_matches')
           ajax:
             url: Spree.routes.variants_search
             datatype: "json"

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

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

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

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

app/assets/javascripts/admin_minimal.js

@@ -1,15 +0,0 @@
-// This is a manifest file that'll be compiled into including all the files listed below.
-// Add new JavaScript/Coffee code in separate files in this directory and they'll automatically
-// be included in the compiled file accessible from http://example.com/assets/application.js
-// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
-// the compiled file.
-//
-
-//= require jquery2
-//= require admin/spree/spree-select2
-//= require admin/spree/handlebar_extensions
-
-//= require i18n/translations
-//= require darkswarm/i18n.translate.js
-
-window.angular = { module: function(noop){ return { value: function(){} } } }

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

@@ -29,6 +29,24 @@
 #
 #= require angular-flash.min.js
 #
+#= require moment/min/moment.min.js
+#= require moment/locale/ar.js
+#= require moment/locale/ca.js
+#= require moment/locale/de.js
+#= require moment/locale/en-gb.js
+#= require moment/locale/es.js
+#= require moment/locale/fil.js
+#= require moment/locale/fr.js
+#= require moment/locale/it.js
+#= require moment/locale/nb.js
+#= require moment/locale/nl-be.js
+#= require moment/locale/pt-br.js
+#= require moment/locale/pt.js
+#= require moment/locale/ru.js
+#= require moment/locale/sv.js
+#= require moment/locale/tr.js
+#= require moment/locale/pl.js
+#
 #= require modernizr
 #
 #= require foundation-sites/js/foundation.js
@@ -49,3 +67,11 @@ document.addEventListener "turbo:before-render", ->
     rootscope = null
     window.injector = null
   true
+
+document.addEventListener "ajax:beforeSend", (event) =>
+  window.Turbo.navigator.adapter.progressBar.setValue(0)
+  window.Turbo.navigator.adapter.progressBar.show()
+
+document.addEventListener "ajax:complete", (event) =>
+  window.Turbo.navigator.adapter.progressBar.setValue(100)
+  window.Turbo.navigator.adapter.progressBar.hide()

app/assets/javascripts/darkswarm/controllers/checkout/accordion_controller.js.coffee

@@ -0,0 +1,22 @@
+angular.module('Darkswarm').controller "AccordionCtrl", ($scope, localStorageService, $timeout, $document, CurrentHub) ->
+  $scope.accordionSections = ["details", "billing", "shipping", "payment"]
+  $scope.accordion = { details: true, billing: true, shipping: true, payment: true }
+
+  $scope.show = (section) ->
+    $scope.accordion[section] = true
+
+  $scope.scrollTo = (section) ->
+    # Scrolling is confused by our position:fixed top bar - add an offset to scroll
+    # to the correct location, plus 5px buffer
+    offset_height = $("nav.top-bar").height() + 5
+    $document.scrollTo($("##{section}"), offset_height, 400)
+
+  $scope.$on 'purchaseFormInvalid', (event, form) ->
+    # Scroll to first invalid section
+    for section in $scope.accordionSections
+      if not form[section].$valid
+        $scope.show section
+        $timeout ->
+          $scope.scrollTo(section)
+        , 50
+        break

app/assets/javascripts/darkswarm/controllers/checkout/billing_controller.js.coffee

@@ -0,0 +1,12 @@
+angular.module('Darkswarm').controller "BillingCtrl", ($scope, $timeout, $controller) ->
+  angular.extend this, $controller('FieldsetMixin', {$scope: $scope})
+
+  $scope.name = "billing"
+  $scope.nextPanel = "shipping"
+
+  $scope.summary = ->
+    [$scope.order.bill_address.address1,
+    $scope.order.bill_address.city,
+    $scope.order.bill_address.zipcode]
+
+  $timeout $scope.onTimeout

app/assets/javascripts/darkswarm/controllers/checkout/checkout_controller.js.coffee

@@ -0,0 +1,43 @@
+angular.module('Darkswarm').controller "CheckoutCtrl", ($scope, localStorageService, Checkout, CurrentUser, CurrentHub, $http) ->
+  $scope.Checkout = Checkout
+  $scope.submitted = false
+
+  # Bind to local storage
+  $scope.fieldsToBind = ["bill_address", "email", "payment_method_id", "shipping_method_id", "ship_address"]
+  prefix = "order_#{Checkout.order.id}#{CurrentUser.id or ""}#{CurrentHub.hub.id}"
+
+  for field in $scope.fieldsToBind
+    localStorageService.bind $scope, "Checkout.order.#{field}", Checkout.order[field], "#{prefix}_#{field}"
+
+  localStorageService.bind $scope, "Checkout.ship_address_same_as_billing", true, "#{prefix}_sameasbilling"
+  localStorageService.bind $scope, "Checkout.default_bill_address", false, "#{prefix}_defaultasbilladdress"
+  localStorageService.bind $scope, "Checkout.default_ship_address", false, "#{prefix}_defaultasshipaddress"
+
+  $scope.order = Checkout.order # Ordering is important
+  $scope.secrets = Checkout.secrets
+
+  $scope.enabled = !!CurrentUser.id?
+
+  $scope.purchase = (event, form) ->
+    event.preventDefault()
+    $scope.formdata = form
+    $scope.submitted = true
+
+    if CurrentUser.id
+      $scope.validateForm(form)
+    else
+      $scope.ensureUserIsGuest()
+
+  $scope.validateForm = ->
+    if $scope.formdata.$valid
+      $scope.Checkout.purchase()
+    else
+      $scope.$broadcast 'purchaseFormInvalid', $scope.formdata
+
+  $scope.ensureUserIsGuest = (callback = null) ->
+    $http.post("/user/registered_email", {email: $scope.order.email})
+      .then (response)->
+        window.CableReady.perform(response.data)
+      .catch ->
+        $scope.validateForm() if $scope.submitted
+        callback() if callback

app/assets/javascripts/darkswarm/controllers/checkout/country_controller.js.coffee

@@ -0,0 +1,8 @@
+angular.module('Darkswarm').controller "CountryCtrl", ($scope, availableCountries) ->
+
+  $scope.countries = availableCountries
+
+  $scope.countriesById = $scope.countries.reduce (obj, country) ->
+    obj[country.id] = country
+    obj
+  , {}

app/assets/javascripts/darkswarm/controllers/checkout/details_controller.js.coffee

@@ -0,0 +1,24 @@
+angular.module('Darkswarm').controller "DetailsCtrl", ($scope, $timeout, $http, CurrentUser, SpreeUser, $controller) ->
+  angular.extend this, $controller('FieldsetMixin', {$scope: $scope})
+
+  $scope.name = "details"
+  $scope.nextPanel = "billing"
+
+  $scope.login_or_next = (event) ->
+    event.preventDefault()
+    unless CurrentUser.id
+      $scope.ensureUserIsGuest($scope.next)
+      return
+
+    $scope.next()
+
+  $scope.summary = ->
+    [$scope.fullName(),
+    $scope.order.email,
+    $scope.order.bill_address.phone]
+
+  $scope.fullName = ->
+    [$scope.order.bill_address.firstname ? null,
+    $scope.order.bill_address.lastname ? null].join(" ").trim()
+
+  $timeout $scope.onTimeout

app/assets/javascripts/darkswarm/controllers/checkout/payment_controller.js.coffee

@@ -0,0 +1,19 @@
+angular.module('Darkswarm').controller "PaymentCtrl", ($scope, $timeout, savedCreditCards, Dates, $controller) ->
+  angular.extend this, $controller('FieldsetMixin', {$scope: $scope})
+
+  $scope.savedCreditCards = savedCreditCards
+  $scope.name = "payment"
+  $scope.months = Dates.months
+  $scope.years = Dates.years
+
+  $scope.secrets.card_month = "1"
+  $scope.secrets.card_year = moment().year()
+
+  for card in savedCreditCards when card.is_default
+    $scope.secrets.selected_card = card.id
+    break
+
+  $scope.summary = ->
+    [$scope.Checkout.paymentMethod()?.name]
+
+  $timeout $scope.onTimeout

app/assets/javascripts/darkswarm/controllers/checkout/shipping_controller.js.coffee

@@ -0,0 +1,11 @@
+angular.module('Darkswarm').controller "ShippingCtrl", ($scope, $timeout, ShippingMethods, $controller) ->
+  angular.extend this, $controller('FieldsetMixin', {$scope: $scope})
+
+  $scope.ShippingMethods = ShippingMethods
+  $scope.name = "shipping"
+  $scope.nextPanel = "payment"
+
+  $scope.summary = ->
+    [$scope.Checkout.shippingMethod()?.name]
+  
+  $timeout $scope.onTimeout 

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

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

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

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

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

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

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

@@ -33,9 +33,9 @@ angular.module('Darkswarm').factory 'Products', (OrderCycleResource, OrderCycle,
           prices = (v.price for v in product.variants)
           product.price = Math.min.apply(null, prices)
         product.hasVariants = product.variants?.length > 0
-        product.primaryImage = product.image?.small_url if product.image
+        product.primaryImage = product.images[0]?.small_url if product.images
         product.primaryImageOrMissing = product.primaryImage || "/noimage/small.png"
-        product.largeImage = product.image?.large_url if product.image
+        product.largeImage = product.images[0]?.large_url if product.images
 
     dereference: ->
       for product in @fetched_products

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

@@ -0,0 +1,10 @@
+.ofn-drop-down
+  %span
+    %i.icon-check
+    {{ 'admin.actions' | t }}
+    %i{ 'ng-class' => "expanded && 'icon-caret-up' || !expanded && 'icon-caret-down'" }
+  %div.menu{ 'ng-show' => "expanded" }
+    %a.menu_item{ 'ng-repeat' => "link in links", href: '{{link.url}}', target: "{{link.target || '_self'}}", data: { method: "{{ link.method || 'get' }}", confirm: "{{link.confirm}}" } }
+      %span
+        %i{ ng: { class: "link.icon" } }
+      %span {{ link.name }}

app/assets/javascripts/templates/admin/panels/exchange_products_distributed.html.haml

@@ -19,7 +19,7 @@
             .name {{ product.name }}
           .supplier {{ product.supplier_name }}
 
-        .exchange-product-variant{'ng-repeat' => 'variant in product.variants | visibleVariants:exchange:order_cycle.visible_variants_for_outgoing_exchanges | filter:variantSuppliedToOrderCycle as filteredVariants'}
+        .exchange-product-variant{'ng-repeat' => 'variant in product.variants | visibleVariants:exchange:order_cycle.visible_variants_for_outgoing_exchanges | filter:variantSuppliedToOrderCycle'}
           %label
             %input{ type: 'checkbox', name: 'order_cycle_outgoing_exchange_{{ $parent.$parent.$index }}_variants_{{ variant.id }}',
               value: 1,
@@ -27,8 +27,5 @@
               'id' => 'order_cycle_outgoing_exchange_{{ $parent.$parent.$index }}_variants_{{ variant.id }}',
               'ng-disabled' => '!order_cycle.editable_variants_for_outgoing_exchanges.hasOwnProperty(exchange.enterprise_id) || order_cycle.editable_variants_for_outgoing_exchanges[exchange.enterprise_id].indexOf(variant.id) < 0' }
             {{ variant.label }}
-        
-        %em{ 'ng-if' => 'filteredVariants.length === 0' }
-          {{ 'js.admin.panels.exchange_products.no_variants' | t }}
 
     %div{ 'ng-include' => "'admin/panels/exchange_products_panel_footer.html'" }

app/assets/javascripts/templates/admin/panels/exchange_products_panel_header.html.haml

@@ -1,7 +1,5 @@
 .exchange-load-all-variants
   %div
     {{ 'js.admin.panels.exchange_products.variants_loaded' | t:{ num_of_variants_loaded: enterprises[exchange.enterprise_id].loaded_variants, total_number_of_variants: exchangeTotalVariants(exchange) } }}
-    %em{ 'ng-if': 'enterprises[exchange.enterprise_id].loaded_variants > exchangeTotalVariants(exchange)' }
-      {{ 'js.admin.panels.exchange_products.some_variants_hidden' | t }}
     %a{ 'ng-click' => 'loadAllExchangeProducts(exchange)', 'ng-show' => 'enterprises[exchange.enterprise_id].last_page_loaded < enterprises[exchange.enterprise_id].num_of_pages' }
       {{ 'js.admin.panels.exchange_products.load_all_variants' | t }}

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

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

app/assets/javascripts/templates/partials/hub_details.html.haml

@@ -14,7 +14,7 @@
             {{'hubs_delivery' | t}}
     .row
       .columns.small-12
-        %a.cta-hub{"ng-href" => "{{::enterprise.path}}#/shop_panel", "ng-attr-target" => "{{ embedded_layout ? '_blank' : undefined}}",
+        %a.cta-hub{"ng-href" => "{{::enterprise.path}}#/shop", "ng-attr-target" => "{{ embedded_layout ? '_blank' : undefined}}",
         "ng-class" => "{primary: enterprise.active, secondary: !enterprise.active}",
         "ng-click" => "$close()",
         "ofn-change-hub" => "enterprise"}

app/assets/javascripts/templates/partials/producer_details.html.haml

@@ -12,7 +12,7 @@
     .row
       .columns.small-12
         %a.cta-hub{"ng-repeat" => "hub in enterprise.hubs | filter:{id: '!'+enterprise.id} | orderBy:'-active'",
-        "ng-href" => "{{::hub.path}}#/shop_panel", "ofn-empties-cart" => "hub",
+        "ng-href" => "{{::hub.path}}#/shop", "ofn-empties-cart" => "hub",
         "ng-class" => "::{primary: hub.active, secondary: !hub.active}",
         "ng-click" => "$close()",
         "ofn-change-hub" => "hub"}

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

@@ -11,10 +11,10 @@
       %filter-selector{ 'selector-set' => "productPropertySelectors", objects: "[product] | propertiesWithValuesOf" }
 
     .product-description{"ng-if" => "product.description_html"}
-      %p.text-small{"ng-bind-html" => "::product.description_html", "data-controller" => "add-blank-to-link"}
+      %p.text-small{"ng-bind-html" => "::product.description_html"}
 
   .columns.small-12.medium-6.large-6.product-img
     %img{"ng-src" => "{{::product.largeImage}}", "ng-if" => "::product.largeImage"}
-    %img.placeholder{ src: Spree::Image.default_image_url(:large), "ng-if" => "::!product.largeImage"}
+    %img.placeholder{ src: "/noimage/large.png", "ng-if" => "::!product.largeImage"}
 
 %ng-include{src: "'partials/close.html'"}

app/assets/javascripts/templates/shared/question_mark_with_tooltip_icon.html.haml

@@ -1 +1 @@
-.question-mark-icon{"ng-class" => "{open: tt_isOpen}", type: 'button'}
+%button.question-mark-icon{"ng-class" => "{open: tt_isOpen}", type: 'button'}

app/channels/scoped_channel.rb

@@ -1,13 +0,0 @@
-# frozen_string_literal: true
-
-class ScopedChannel < ApplicationCable::Channel
-  class << self
-    def for_id(id)
-      "ScopedChannel:#{id}"
-    end
-  end
-
-  def subscribed
-    stream_from "ScopedChannel:#{params[:id]}"
-  end
-end

app/channels/session_channel.rb

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

app/components/confirm_modal_component.rb

@@ -1,29 +1,11 @@
 # frozen_string_literal: true
 
 class ConfirmModalComponent < ModalComponent
-  # @param actions_alignment_class [String] possible classes: 'justify-space-around', 'justify-end'
-  def initialize(
-    id:,
-    reflex: nil,
-    controller: nil,
-    message: nil,
-    confirm_actions: nil,
-    confirm_reflexes: nil,
-    confirm_button_class: :primary,
-    confirm_button_text: I18n.t('js.admin.modals.confirm'),
-    cancel_button_text: I18n.t('js.admin.modals.cancel'),
-    actions_alignment_class: 'justify-space-around'
-  )
-    super(id:, close_button: true)
+  def initialize(id:, confirm_actions: nil, controllers: nil, message: nil)
+    super(id: id, close_button: true)
     @confirm_actions = confirm_actions
-    @reflex = reflex
-    @confirm_reflexes = confirm_reflexes
-    @controller = controller
+    @controllers = controllers
     @message = message
-    @confirm_button_class = confirm_button_class
-    @confirm_button_text = confirm_button_text
-    @cancel_button_text = cancel_button_text
-    @actions_alignment_class = actions_alignment_class
   end
 
   private

app/components/confirm_modal_component/confirm_modal_component.html.haml

@@ -1,10 +1,10 @@
-%div{ id: @id, "data-controller": "modal #{@controller}", "data-action": "keyup@document->modal#closeIfEscapeKey", "data-#{@controller}-reflex-value": @reflex }
+%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.modal-component{ "data-modal-target": "modal" }
+  .reveal-modal.fade.tiny.help-modal{ "data-modal-target": "modal" }
     = content
 
     = render @message if @message
 
-    %div{ class: "modal-actions #{@actions_alignment_class}" }
-      %input{ class: "button icon-plus #{close_button_class}", type: 'button', value: @cancel_button_text, "data-action": "click->modal#close" }
-      %input{ id: 'modal-confirm-button', class: "button icon-plus #{@confirm_button_class}", type: 'button', value: @confirm_button_text, "data-action": @confirm_actions, "data-reflex": @confirm_reflexes }
+    .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

@@ -1,22 +1,4 @@
 .modal-actions {
   display: flex;
-
-  &.justify-space-around {
-    justify-content: space-around;
-  }
-
-  &.justify-end {
-    justify-content: flex-end;
-    input[type="button"] {
-      margin: 0 5px;
-    }
-
-    @media only screen and (max-width: 1024px) {
-      flex-direction: column;
-      justify-content: space-around;
-      input[type="button"] {
-        margin: 5px 0;
-      }
-    }
-  }
+  justify-content: space-around;
 }

app/components/help_modal_component.rb

@@ -2,6 +2,6 @@
 
 class HelpModalComponent < ModalComponent
   def initialize(id:, close_button: true)
-    super(id:, close_button:)
+    super(id: id, close_button: close_button)
   end
 end

app/components/help_modal_component/help_modal_component.html.haml

@@ -1,6 +1,6 @@
 %div{ id: @id, "data-controller": "help-modal", "data-action": "keyup@document->help-modal#closeIfEscapeKey" }
   .reveal-modal-bg.fade{ "data-help-modal-target": "background", "data-action": "click->help-modal#close" }
-  .reveal-modal.fade.small.modal-component{ "data-help-modal-target": "modal" }
+  .reveal-modal.fade.small.help-modal{ "data-help-modal-target": "modal" }
     = content
 
     - if close_button?

app/components/help_modal_component/help_modal_component.scss

@@ -0,0 +1,10 @@
+.help-modal {
+  visibility: visible;
+  position: fixed;
+  top: 3em;
+}
+
+/* prevent arrow on selected admin menu item appearing above modal */
+body.modal-open #admin-menu li.selected a::after {
+  z-index: 0;
+}

app/components/modal_component.rb

@@ -1,10 +1,9 @@
 # frozen_string_literal: true
 
 class ModalComponent < ViewComponent::Base
-  def initialize(id:, close_button: true, instant: false)
+  def initialize(id:, close_button: true)
     @id = id
     @close_button = close_button
-    @instant = instant
   end
 
   private

app/components/modal_component/modal_component.html.haml

@@ -1,8 +0,0 @@
-%div{ id: @id, "data-controller": "modal", "data-action": "keyup@document->modal#closeIfEscapeKey", "data-modal-instant-value": @instant }
-  .reveal-modal-bg.fade{ "data-modal-target": "background", "data-action": "click->modal#close" }
-  .reveal-modal.fade.small.modal-component{ "data-modal-target": "modal" }
-    = content
-
-    - if close_button?
-      .text-center
-        %input{ class: "button icon-plus #{close_button_class}", type: 'button', value: t('js.admin.modals.close'), "data-action": "click->modal#close" }

app/components/modal_component/modal_component.scss

@@ -1,24 +0,0 @@
-// class name 'modal' is already taken by 'custom-alert' and 'custom-confirm'.
-.modal-component {
-  visibility: visible;
-  position: fixed;
-  top: 3em;
-  &.in {
-    padding: 1.2rem;
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-  p {
-    margin-bottom: 0.5em;
-  }
-}
-
-/* prevent arrow on selected admin menu item appearing above modal */
-body.modal-open #admin-menu li.selected a::after {
-  z-index: 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]

app/components/products_table_component.rb

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

app/components/products_table_component/products_table_component.html.haml

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

app/components/products_table_component/products_table_component.scss

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

app/components/search_input_component.rb

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

app/components/search_input_component/search_input_component.html.haml

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

app/components/search_input_component/search_input_component.scss

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

app/components/selector_component.rb

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

app/components/selector_component/selector_component.html.haml

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

app/components/selector_component/selector_component.scss

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

app/components/selector_with_filter_component.rb

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

app/components/selector_with_filter_component/selector_with_filter_component.html.haml

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

app/components/selector_with_filter_component/selector_with_filter_component.scss

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

app/components/ship_order_component.html.haml

@@ -1,8 +0,0 @@
-= render ConfirmModalComponent.new(id: dom_id(@order, :ship), confirm_reflexes: "click->Admin::OrdersReflex#ship", controller: "orders", reflex: "Admin::Orders#ship") do
-  %div{class: "margin-bottom-30"}
-    %p= t('spree.admin.orders.shipment.mark_as_shipped_message_html')
-  %div{class: "margin-bottom-30"}
-    = hidden_field_tag :id, @order.id
-    = label_tag do
-      = check_box_tag :send_shipment_email, "1", true
-      = t('spree.admin.orders.shipment.mark_as_shipped_label_message')

app/components/ship_order_component.rb

@@ -1,7 +0,0 @@
-# frozen_string_literal: true
-
-class ShipOrderComponent < ViewComponent::Base
-  def initialize(order:)
-    @order = order
-  end
-end

app/components/table_header_component.rb

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

app/components/table_header_component/table_header_component.html.haml

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

app/components/table_header_component/table_header_component.scss

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

app/components/vertical_ellipsis_menu/component.html.haml

@@ -1,4 +0,0 @@
-.vertical-ellipsis-menu{ "data-controller": "vertical-ellipsis-menu--component" }
-  %i.fa.fa-ellipsis-v{ "data-action": "click->vertical-ellipsis-menu--component#toggle" }
-  .vertical-ellipsis-menu-content{ "data-vertical-ellipsis-menu--component-target": "content" }
-    = content

app/components/vertical_ellipsis_menu/component.rb

@@ -1,6 +0,0 @@
-# frozen_string_literal: true
-
-module VerticalEllipsisMenu
-  class Component < ViewComponent::Base
-  end
-end

app/components/vertical_ellipsis_menu/component.scss

@@ -1,59 +0,0 @@
-.vertical-ellipsis-menu {
-  position: relative;
-
-  i.fa-ellipsis-v {
-    cursor: pointer;
-    display: block;
-    text-align: center;
-    border-radius: 3px;
-    background-color: white;
-    padding: 9px 14px;
-  }
-
-  .vertical-ellipsis-menu-content {
-    position: absolute;
-    top: 0;
-    right: 0;
-    padding-top: 5px;
-    padding-bottom: 5px;
-    background-color: white;
-    box-shadow: $box-shadow;
-    border-radius: 3px;
-    min-width: 80px;
-    display: none;
-    z-index: 100;
-
-    &.show {
-      display: block;
-    }
-
-    & > a {
-      display: block;
-      padding: 5px 10px;
-      cursor: pointer;
-      text-align: left;
-      border-left: 3px solid white;
-      color: $near-black;
-      text-decoration: none;
-      border-bottom: none;
-
-      &:hover {
-        background-color: $light-grey;
-        border-left: 3px solid $spree-blue;
-      }
-
-      &.delete {
-        color: $red;
-
-        &:hover {
-          border-left: 3px solid $red;
-          background-color: $fair-pink;
-        }
-      }
-    }
-  }
-}
-
-table.products td .vertical-ellipsis-menu {
-  float: right;
-}

app/components/vertical_ellipsis_menu/component_controller.js

@@ -1,25 +0,0 @@
-import { Controller } from "stimulus";
-
-export default class extends Controller {
-  static targets = ["content"];
-
-  connect() {
-    super.connect();
-    window.addEventListener("click", this.#hideIfClickedOutside);
-  }
-
-  toggle() {
-    this.contentTarget.classList.toggle("show");
-  }
-
-  #hideIfClickedOutside = (event) => {
-    if (this.element.contains(event.target)) {
-      return;
-    }
-    this.#hide();
-  };
-
-  #hide() {
-    this.contentTarget.classList.remove("show");
-  }
-}

app/controllers/admin/bulk_line_items_controller.rb

@@ -11,8 +11,9 @@ module Admin
 
       @line_items = order_permissions.
         editable_line_items.where(order_id: orders).
-        includes(:variant).
-        ransack(params[:q]).result.order(:id)
+        includes(variant: { option_values: :option_type }).
+        ransack(params[:q]).result.
+        reorder('spree_line_items.order_id ASC, spree_line_items.id ASC')
 
       @pagy, @line_items = pagy(@line_items) if pagination_required?
 
@@ -34,8 +35,7 @@ module Admin
       # and https://www.postgresql.org/docs/current/static/sql-select.html#SQL-FOR-UPDATE-SHARE
       order.with_lock do
         if order.contents.update_item(@line_item, line_item_params)
-          # No Content, does not trigger ng resource auto-update
-          render body: nil, status: :no_content
+          render body: nil, status: :no_content # No Content, does not trigger ng resource auto-update
         else
           render json: { errors: @line_item.errors }, status: :precondition_failed
         end