TT-9792 Add support to blocks based checkout (#47)

* chore: updated makefile

* chore: added blocks based checkout support

* chore: added env example

* chore: added eslint rules

* docs: added section for blocks checkout in readme

* chore: updated publish workflow

* chore: updated woocommerce setup

* fix: mounting of autosuggest component for blocks based checkout

* chore: addressed issue when selecting suggestion

* fix: extra w3w prefix on thank you page

* chore: added docker compose env var

* chore: removed matrix env vars for docker compose file

* chore: added missing env var for github action

* chore: updated test workflow github action

* chore: updated docker compose

* tests: ignoring resizeobserver loop error

* chore: updated managed spec

* chore: updated tests

* fix: w3w on blocks based order confirmation

* chore: removed blocks based tests from matrix

* chore: updated env example

* chore: bumped alpha version

* chore: fixed missing w3w on admin order

* chore: linting change

* chore: updated version

Author: chaddgrimm

.env.example

@@ -0,0 +1,14 @@
+# Blocks based checkout started on version 8.3.2 onwards
+WOOCOMMERCE_VERSION=9.6.2
+WORDPRESS_VERSION=6.7.2
+WORDPRESS_THEME=twentytwentyfive
+PHP_VERSION=8.1
+
+
+# WOOCOMMERCE_VERSION: 8.0.4 # Not using blocks
+# WOOCOMMERCE_VERSION=5.7.1
+# WORDPRESS_VERSION=5.9.0
+# WORDPRESS_THEME=twentytwentyone
+# PHP_VERSION=7.4
+
+API_KEY=YOUR_W3W_API_KEY

.github/workflows/publish.yaml

@@ -11,13 +11,26 @@ jobs:
     steps:
       - name: Install SVN
         run: |
-          sudo apt-get install subversion -y
+          sudo apt-get install subversion nodejs -y
       - uses: actions/checkout@v4
       - name: Setup version env
         run: |
           VERSION=${GITHUB_REF_NAME#v}
           echo Version: $VERSION
           echo "VERSION=$VERSION" >> $GITHUB_ENV
+      - name: Update version
+        run: |
+          sed -i 's/define(.W3W_PLUGIN_VERSION.,\s*.*)/define('\''W3W_PLUGIN_VERSION'\'', '\'$VERSION\'');/' w3w-autosuggest/w3w-autosuggest.php
+          sed -i 's/\* Version:\s*.*/* Version:           '$VERSION'/' w3w-autosuggest/w3w-autosuggest.php
+          sed -i 's/Stable tag: .*/Stable tag: '$VERSION'/' w3w-autosuggest/README.txt
+          sed -i 's/"version": "[^"]*"/"version": "'$VERSION'"/' w3w-autosuggest-blocks/package.json
+          sed -i 's/"version": "[^"]*"/"version": "'$VERSION'"/' w3w-autosuggest-blocks/src/block.json
+      - name: Build w3w-autosuggest-blocks
+        run: |
+          pushd w3w-autosuggest-blocks
+          npm install
+          npm run build
+          popd
       - name: Checkout from Wordpress SVN
         run: |
           svn co https://plugins.svn.wordpress.org:443/3-word-address-validation-field "$HOME/svn" --trust-server-cert --non-interactive

.github/workflows/test.yaml

@@ -8,12 +8,30 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: ['14.x']
+        include:
+          - node-version: '14.x'
+            WORDPRESS_VERSION: 5.7.2
+            PHP_VERSION: 7.4
+            WOOCOMMERCE_VERSION: 5.7.1
+            WORDPRESS_THEME: twentytwenty
     steps:
       - name: Checkout
         uses: actions/checkout@v4
-      - run: |
+      - name: Start WordPress
+        run: |
           docker compose -f ./docker-compose.yaml up -d
+        env:
+          WORDPRESS_VERSION: ${{ matrix.WORDPRESS_VERSION }}
+          PHP_VERSION: ${{ matrix.PHP_VERSION }}
+          WOOCOMMERCE_VERSION: ${{ matrix.WOOCOMMERCE_VERSION }}
+          WORDPRESS_THEME: ${{ matrix.WORDPRESS_THEME }}
+      - name: Show Docker logs on failure
+        if: failure()
+        run: |
+          echo "=== Docker Compose ps ==="
+          docker compose -f ./docker-compose.yaml ps
+          echo "=== Docker Compose logs ==="
+          docker compose -f ./docker-compose.yaml logs --no-color
       - name: Use Node.js
         uses: actions/setup-node@v4
         with:

.gitignore

@@ -208,10 +208,17 @@ intermediate
 .idea
 cache
 test/database/data/*
+test/wordpress/*
 node_modules
 autosuggest
 videos
 screenshots
 *.zip
 *.env
-3-word-address-validation-field
+3-word-address-validation-field
+
+
+test/wordpress*
+test/database/data*
+
+w3w-autosuggest/public/blocks/*

Dockerfile

@@ -1,21 +1,35 @@
+ARG WORDPRESS_VERSION=5.9.0
+ARG PHP_VERSION=7.4
+
 FROM alpine:3.19.0 AS build-dependencies
 
 WORKDIR /dependencies
 
 ARG WOOCOMMERCE_VERSION=5.4.1
 
-RUN apk add wget unzip
-RUN wget https://downloads.wordpress.org/plugin/woocommerce.${WOOCOMMERCE_VERSION}.zip -O woocommerce.zip
-RUN unzip woocommerce.zip
+RUN apk add --no-cache wget unzip
+
+RUN wget https://downloads.wordpress.org/plugin/woocommerce.${WOOCOMMERCE_VERSION}.zip -O woocommerce.zip \
+    && unzip woocommerce.zip \
+    && rm woocommerce.zip
 
-FROM wordpress:5.9.0-php7.4-apache
+FROM wordpress:${WORDPRESS_VERSION}-php${PHP_VERSION}-apache AS development
 
 ENV WORDPRESS_DB_NAME=wordpress
 ENV WORDPRESS_DB_USER=root
 ENV WORDPRESS_DB_PASSWORD=wordpress
 ENV WORDPRESS_DB_HOST=mysql:3306
 ENV WORDPRESS_DEBUG=1
 
+RUN apt update && apt install -y less
+
+RUN groupadd -g 1000 wp_user && \
+    useradd -m -u 1000 -g wp_user wp_user
+
+# Set proper permissions for WordPress directories
+RUN chown -R wp_user:wp_user /var/www/html && \
+    chown -R wp_user:wp_user /usr/src/wordpress
+
 RUN sed -i "11i php_value upload_max_filesize 256M" /usr/src/wordpress/.htaccess && \
     sed -i "12i php_value post_max_size 256M" /usr/src/wordpress/.htaccess
 
@@ -24,4 +38,6 @@ WORKDIR /usr/src/wordpress
 COPY --from=build-dependencies \
     /dependencies/woocommerce ./wp-content/plugins/woocommerce
 
+USER wp_user
+
 WORKDIR /var/www/html

README.md

@@ -56,9 +56,11 @@ In order to contribute to this project you should follow the guide to modifying
 
 3. Commit your changes to a suitably named branch and open a PR with the relevant details of your changes included. If you are working from a JIRA ticket you should try to include the name of the JIRA ticket in your commit in square braces, e.g. _"[TT-1234] My PR which resolves issues X"_
 
-**TODO**
+4. Once your PR has been reviewed and merged the CI pipeline should automatically deploy your changes to the WordPress plugin version control repository (SVN) once a release with a tag is created.
 
-4. Once your PR has been reviewed and merged the CI pipeline should automatically deploy your changes to the WordPress plugin version control repository (SVN).
+### Notes
+
+WooCommerce has introduced blocks based checkout starting v8.3 omnwards. If you're working on any features related to blocks based checkout, there's a specific directory dedicated to it under `w3w-autosuggest-blocks`. This project needs to be bundled using webpack via `wp-scripts` tooling. During development you can run `npm run start` and `npm run build` to bundle the scripts which will be added to `w3w-autosuggest` directory and will be included once the extension is published.
 
 ### Testing changes
 
@@ -69,3 +71,5 @@ docker compose up -d
 cd test
 npm t
 ```
+
+> :bulb: Ensure that you have a `.env` file (use the `.env.example` as a reference) before running the docker compose command above.

docker-compose.yaml

@@ -1,11 +1,14 @@
-version: '3.8'
-
 services:
-  wordpress:
+  app:
     platform: linux/amd64
     build:
       dockerfile: Dockerfile
       context: .
+      target: development
+      args:
+        WOOCOMMERCE_VERSION: $WOOCOMMERCE_VERSION
+        WORDPRESS_VERSION: $WORDPRESS_VERSION
+        PHP_VERSION: $PHP_VERSION
     container_name: w3w-wp
     healthcheck:
       test: ['CMD', 'curl', '-f', 'http://localhost:80']
@@ -22,13 +25,41 @@ services:
       WORDPRESS_CONFIG_EXTRA: |
         define('DISABLE_WP_CRON', 'true');
     volumes:
-      - ./w3w-autosuggest:/var/www/html/wp-content/plugins/w3w-autosuggest
+      - wordpress_data:/var/www/html
+      - ./w3w-autosuggest:/var/www/html/wp-content/plugins/w3w-autosuggest:rw
     ports:
       - 8080:80
     depends_on:
       mysql:
         condition: service_healthy
 
+  woocommerce:
+    platform: linux/amd64
+    build:
+      dockerfile: test/woocommerce/Dockerfile
+      context: .
+      target: setup-woocommerce
+    container_name: w3w-wp-setup
+    depends_on:
+      app:
+        condition: service_healthy
+    volumes:
+      - wordpress_data:/var/www/html
+    environment:
+      WORDPRESS_LOCALE: en_GB
+      WORDPRESS_DB_HOST: mysql:3306
+      WORDPRESS_DB_NAME: wordpress
+      WORDPRESS_DB_USER: wordpress
+      WORDPRESS_DB_PASSWORD: wordpress
+      WORDPRESS_WEBSITE_TITLE: 'what3words'
+      WORDPRESS_WEBSITE_URL: 'http://localhost:8080'
+      WORDPRESS_WEBSITE_URL_WITHOUT_HTTP: 'localhost:8080'
+      WORDPRESS_WEBSITE_POST_URL_STRUCTURE: '/%year%/%monthnum%/%day%/%postname%/'
+      WORDPRESS_ADMIN_USER: 'what3words'
+      WORDPRESS_ADMIN_PASSWORD: 'what3words'
+      WORDPRESS_ADMIN_EMAIL: 'developer@what3words.com'
+      WORDPRESS_THEME: $WORDPRESS_THEME
+
   mysql:
     platform: linux/amd64
     image: mysql:5.7
@@ -47,5 +78,8 @@ services:
       MYSQL_PASSWORD: wordpress
       MYSQL_DATABASE: wordpress
     volumes:
-      - ./test/database/data:/var/lib/mysql
-      - ./test/database/sql/wordpress-5.7.2.sql:/docker-entrypoint-initdb.d/wordpress-5.7.2.sql
+      - db_data:/var/lib/mysql
+
+volumes:
+  wordpress_data:
+  db_data:

makefile

@@ -1,5 +1,12 @@
 PLUGIN := 3-word-address-validation-field
 
+# Define the version (this is your single source of truth)
+VERSION := 4.0.17
+
+# Define file paths
+PLUGIN_FILE := w3w-autosuggest/w3w-autosuggest.php
+README_FILE := w3w-autosuggest/README.txt
+
 .PHONY: check_wp_compatibility
 check_wp_compatibility:
 	@echo "Checking plugin: $(PLUGIN)"
@@ -9,20 +16,34 @@ check_wp_compatibility:
 	TESTED_VERSION=$$(echo $$PLUGIN_INFO_CLEAN | grep -o '"tested":"[^"]*"' | cut -d '"' -f 4); \
 	LATEST_VERSION=$$(echo $$PLUGIN_INFO_CLEAN | grep -o '"version":"[^"]*"' | cut -d '"' -f 4); \
 	if [ -z "$$TESTED_VERSION" ] || [ "$$TESTED_VERSION" = "null" ]; then \
-		echo "Could not retrieve plugin information for $(PLUGIN) or the plugin has not been tested."; \
+		echo "::error::Could not retrieve plugin information for $(PLUGIN) or the plugin has not been tested."; \
+		exit 1; \
 	elif [ -z "$$LATEST_VERSION" ] || [ "$$LATEST_VERSION" = "null" ]; then \
-		echo "Could not retrieve the latest version for $(PLUGIN)."; \
+		echo "::error::Could not retrieve the latest version for $(PLUGIN)."; \
+		exit 1; \
 	else \
 		echo "Plugin version: $$LATEST_VERSION"; \
 		echo "Tested up to: $$TESTED_VERSION"; \
-		echo "Current WordPress version: $$CURRENT_WP_VERSION"; \
 		if [ "$$(echo $$CURRENT_WP_VERSION | cut -d '.' -f 1)" -gt "$$(echo $$TESTED_VERSION | cut -d '.' -f 1)" ]; then \
-			echo "Warning: The plugin hasn't been tested with the latest WordPress major release."; \
+			echo "::error::The plugin hasn't been tested with the latest WordPress major release."; \
 			exit 1; \
 		elif [ "$$(echo $$CURRENT_WP_VERSION | cut -d '.' -f 2)" -gt "$$(echo $$TESTED_VERSION | cut -d '.' -f 2)" ]; then \
-			echo "Warning: The plugin hasn't been tested with the latest minor release of WordPress."; \
+			echo "::error::The plugin hasn't been tested with the latest minor release of WordPress - $$CURRENT_WP_VERSION"; \
 			exit 1; \
 		else \
-			echo "The plugin is tested with your current version of WordPress."; \
+			echo "::notice::The plugin is tested with your current version of WordPress"; \
 		fi; \
 	fi
+
+
+.PHONY: update-version
+update-version:
+	@echo "Updating version to $(VERSION)..."
+	@sed -i '' -e 's/define(.W3W_PLUGIN_VERSION.,\s*.*)/define('\''W3W_PLUGIN_VERSION'\'', '\''$(VERSION)'\'')/' $(PLUGIN_FILE)
+	@sed -i '' -e 's/\* Version:\s*.*/* Version:           $(VERSION)/' $(PLUGIN_FILE)
+	@sed -i '' -e 's/Stable tag: .*/Stable tag: $(VERSION)/' $(README_FILE)
+	@sed -i '' -e 's/"version": "[^"]*"/"version": "$(VERSION)"/' w3w-autosuggest-blocks/package.json
+	@sed -i '' -e 's/"version": "[^"]*"/"version": "$(VERSION)"/' w3w-autosuggest-blocks/src/block.json
+	@echo "Version updated to $(VERSION)"
+
+

test/cypress/integration/common/step_definitions/cart.steps.ts

@@ -3,13 +3,13 @@ import { Given, When } from 'cypress-cucumber-preprocessor/steps';
 Given('a customer has an item in their cart', () => {
   cy.visit('/shop')
     .get('a.button')
-    .click()
+    .click({ force: true })
     .get('.added_to_cart')
     .should('be.visible');
 });
 
 When('they go to checkout', () => {
   cy.visit('/cart')
     .get('a.checkout-button')
-    .click()
+    .click({ force: true })
 });

test/cypress/integration/fluidcheckout/plugin.steps.ts

@@ -27,51 +27,51 @@ Then('they see autosuggest when they open shipping', () => {
   );
 
   cy.wait(500);
-  cy.get('#shipping_first_name').click().type(fname);
-  cy.get('#shipping_last_name').click().type(lname);
-  cy.get('#shipping_address_1').click().type(add1);
-  cy.get('#shipping_city').click().type(city);
-  cy.get('#shipping_postcode').click().type(postcode);
+  cy.get('#shipping_first_name').click({ force: true }).type(fname);
+  cy.get('#shipping_last_name').click({ force: true }).type(lname);
+  cy.get('#shipping_address_1').click({ force: true }).type(add1);
+  cy.get('#shipping_city').click({ force: true }).type(city);
+  cy.get('#shipping_postcode').click({ force: true }).type(postcode);
 
   // Start cruft - due to setTimeouts and other Fluid Checkout weirdness, this bit of cruft is necessary here
   cy.wait(500);
   cy.get(
     '#fc-expansible-form-section__toggle--shipping_w3w > .collapsible-content__inner > .expansible-section__toggle-plus'
   )
     .focus()
-    .click();
+    .click({ force: true });
   cy.wait('@update');
   cy.get(
     '#fc-expansible-form-section__toggle--shipping_w3w > .collapsible-content__inner > .expansible-section__toggle-plus'
   )
     .focus()
-    .click();
+    .click({ force: true });
   cy.wait(500);
   // end cruft
 
   cy.get('#w3w-shipping').scrollIntoView().type(hint);
-  cy.get('[data-testid="suggestion-0"]').click();
+  cy.get('[data-testid="suggestion-0"]').click({ force: true });
   cy.get('#w3w-shipping')
     .invoke('val')
     .should('match', /^\/\/\/(\w+.){2}\w+$/i);
   cy.get(
     '[data-step-id="shipping"] > .fc-step__actions > .fc-step__next-step'
-  ).click();
+  ).click({ force: true });
 });
 
 And('they see autosuggest when they open billing', () => {
   const hint = 'm.a.s';
 
   cy.wait(200);
-  cy.get('#billing_same_as_shipping').click();
+  cy.get('#billing_same_as_shipping').click({ force: true });
   cy.get(
     '#fc-expansible-form-section__toggle--billing_w3w > .collapsible-content__inner > .expansible-section__toggle-plus'
   )
     .scrollIntoView()
-    .click();
+    .click({ force: true });
   cy.get(`#w3w-billing`).focus().wait(300);
-  cy.get('#w3w-billing').click().type(hint, { delay: 300 });
-  cy.get('[data-testid="suggestion-0"]').click();
+  cy.get('#w3w-billing').click({ force: true }).type(hint, { delay: 300 });
+  cy.get('[data-testid="suggestion-0"]').click({ force: true });
   cy.get('#w3w-billing')
     .invoke('val')
     .should('match', /^\/\/\/(\w+.){2}\w+$/i);