checkout UI optimisation for mobile screens

.github/dependabot.yml

@@ -0,0 +1,13 @@
+version: 2
+updates:
+  - package-ecosystem: "npm" # or "pip", "maven", etc.
+    directory: "/" # location of the manifest file
+    schedule:
+      interval: "daily" # or "weekly", "monthly"
+    target-branch: "FTPI-1288"
+
+  - package-ecosystem: "npm"
+    directory: "/"
+    schedule:
+      interval: "weekly"
+    target-branch: "dev"

.github/workflows/change-review.yml

@@ -7,120 +7,22 @@ on:
     branches: ['dev']
     types: [opened, synchronize, reopened]
 
-env:
-  WC_MIN_SUPPORTED_VERSION: '7.4.1'
-  WP_MIN_SUPPORTED_VERSION: '6.0'
-  PHP_MIN_SUPPORTED_VERSION: '7.4'
-
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}
   cancel-in-progress: true
 
 jobs:
-  generate-wc-compat-matrix:
-    name: "Generate the matrix for woocommerce compatibility dynamically"
-    runs-on: ubuntu-20.04
-    outputs:
-      matrix: ${{ steps.generate_matrix.outputs.matrix }}
-    steps:
-      - name: "Generate matrix"
-        id: generate_matrix
-        run: |
-          WC_VERSIONS=$( echo "[\"$WC_MIN_SUPPORTED_VERSION\", \"latest\", \"beta\"]" )
-          MATRIX_INCLUDE=$( echo "[{\"woocommerce\":\"$WC_MIN_SUPPORTED_VERSION\",\"wordpress\":\"$WP_MIN_SUPPORTED_VERSION\",\"gutenberg\":\"13.6.0\",\"php\":\"$PHP_MIN_SUPPORTED_VERSION\"}]" )
-          echo "matrix={\"woocommerce\":$WC_VERSIONS,\"wordpress\":[\"latest\"],\"gutenberg\":[\"latest\"],\"php\":[\"7.4\"], \"include\":$MATRIX_INCLUDE}" >> $GITHUB_OUTPUT
-
-  woocommerce-compatibility:
-    name: "WC compatibility"
-    needs: generate-wc-compat-matrix
-    runs-on: ubuntu-20.04
-    env:
-      WP_VERSION: ${{ matrix.wordpress }}
-      WC_VERSION: ${{ matrix.woocommerce }}
-      GUTENBERG_VERSION: ${{ matrix.gutenberg }}
-    strategy:
-      fail-fast:    false
-      max-parallel: 10
-      matrix: ${{ fromJSON(needs.generate-wc-compat-matrix.outputs.matrix) }}
-    steps:
-      # clone the repository
-      - uses: actions/checkout@v3
-      # enable dependencies caching
-      - uses: actions/cache@v3
-        with:
-          path: ~/.cache/composer/
-          key: ${{ runner.os }}-composer-${{ hashFiles('composer.lock') }}
-      # setup PHP, but without debug extensions for reasonable performance
-      - uses: shivammathur/setup-php@v2
-        with:
-          php-version: ${{ matrix.php }}
-          tools: composer
-          coverage: xdebug
-      # run CI checks
-      - run: bash bin/run-ci-tests.bash
-      # report to codecov
-      - name: Upload coverage reports to Codecov
-        uses: codecov/codecov-action@v3
-        with:
-          token: ${{ secrets.CODE_COV_TOKEN }}
-          files: ./coverage.xml
-          verbose: true
-
-  generate-wc-compat-beta-matrix:
-    name: "Generate the matrix for compatibility-woocommerce-beta dynamically"
-    runs-on: ubuntu-20.04
-    outputs:
-      matrix: ${{ steps.generate_matrix.outputs.matrix }}
-    steps:
-      - name: "Generate matrix"
-        id: generate_matrix
-        run: |
-          PHP_VERSIONS=$( echo "[\"$PHP_MIN_SUPPORTED_VERSION\", \"8.0\", \"8.1\"]" )
-          echo "matrix={\"woocommerce\":[\"beta\"],\"wordpress\":[\"latest\"],\"gutenberg\":[\"latest\"],\"php\":$PHP_VERSIONS}" >> $GITHUB_OUTPUT
-
-  # a dedicated job, as allowed to fail
-  compatibility-woocommerce-beta:
-    name: Environment - WC beta
-    needs: generate-wc-compat-beta-matrix
-    runs-on: ubuntu-20.04
-    strategy:
-      fail-fast: false
-      matrix: ${{ fromJSON(needs.generate-wc-compat-beta-matrix.outputs.matrix) }}
-    env:
-      WP_VERSION: ${{ matrix.wordpress }}
-      WC_VERSION: ${{ matrix.woocommerce }}
-      GUTENBERG_VERSION: ${{ matrix.gutenberg }}
-    steps:
-      # clone the repository
-      - uses: actions/checkout@v3
-      # enable dependencies caching
-      - uses: actions/cache@v3
-        with:
-          path: ~/.cache/composer/
-          key:  ${{ runner.os }}-composer-${{ hashFiles('composer.lock') }}
-      # setup PHP, but without debug extensions for reasonable performance
-      - uses: shivammathur/setup-php@v2
-        with:
-          php-version: ${{ matrix.php }}
-          tools:       composer
-          coverage:    none
-      # Check if php version is greater than 8.0 and install phpunit 9
-      - uses: ./.github/actions/check-php-version-phpunit-support
-        with:
-          php-version: ${{ matrix.php }}
-      # run CI checks
-      - run: bash bin/run-ci-tests.bash
   phpcs:
     name: PHPCS
     strategy:
       matrix:
         operating-system: [ 'ubuntu-latest' ]
-        php-versions: ['7.4','8.0' ,'8.1' ]
+        php-versions: ['7.4','8.0' ,'8.1', '8.2', '8.3', '8.4' ]
         phpunit-versions: ['7.5.20','latest']
     runs-on: ${{ matrix.operating-system }}
     steps:
       - name: Checkout code
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
       - name: "Validate composer.json and composer.lock"
         run: composer validate --strict
       - name: Setup PHP

.gitpod.yml

@@ -2,7 +2,8 @@ image:
     file: .gitpod.Dockerfile
 
 tasks:
-  - init: open ./tests/PHPUnit/README.md
+  - init: |
+      curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar && chmod +x wp-cli.phar && sudo mv wp-cli.phar /usr/local/bin/wp && pnpm add -g pnpm
 
 
 vscode:

.nvmrc

@@ -1 +1 @@
-16.18.0
+v20

CHANGELOG.md

@@ -1,5 +1,8 @@
 # Changelog
 
+## 3.2.0 | 18-09-2025
+### Version Changes
+- [CHANGED] WooCommerce checkout UI optimisation for mobile screens
 ## 3.1.0 | 28-08-2025
 General Update
 ### Version Changes

Makefile

@@ -13,6 +13,11 @@ down:
 	docker-compose -f .docker/docker-compose.yml  down
 
 
+clean:
+	rm -rf node_modules/
+	rm *.zip
+
+
 dev-js:
 	npm run start
 

assets/js/checkout.js

@@ -1,9 +1,9 @@
-jQuery( function ( $ ) {
+jQuery( ( $ ) => {
 	$.blockUI({message: '<p> Loading Payment Modal...</p>'});
 	let payment_made = false;
-	const redirectPost = function (location, args) {
+	const redirectPost = (location, args) => {
 		let form = "";
-		$.each(args, function (key, value) {
+		$.each(args, (key, value) => {
 			// value = value.split('"').join('\"')
 			form += '<input type="hidden" name="' + key + '" value="' + value + '">';
 		});
@@ -20,7 +20,7 @@ jQuery( function ( $ ) {
 			currency: flw_payment_args.currency,
 			payment_options: flw_payment_args.payment_options,
 			redirect_url: flw_payment_args.redirect_url,
-			onclose: function () {
+			onclose: () => {
 				$.unblockUI();
 				if (payment_made) {
 					$.blockUI({message: '<p> confirming transaction ...</p>'});
@@ -31,7 +31,7 @@ jQuery( function ( $ ) {
 				}
 			},
 			callback: function (response) {
-				let tr = response.tx_ref;
+				const tr = response.tx_ref;
 				if ( 'successful' === response.status ) {
 					payment_made = true;
 					$.blockUI({message: '<p> confirming transaction ...</p>'});
@@ -54,6 +54,6 @@ jQuery( function ( $ ) {
 			},
 		}
 	}
-	let payload = processData();
-	let x = window.FlutterwaveCheckout(payload);
+	const payload = processData();
+	const x = window.FlutterwaveCheckout(payload);
 } );