Adds HPOS compatibility by ibndawood · Pull Request #2345 · facebook/facebook-for-woocommerce

ibndawood · 2022-10-28T14:42:18Z

Changes proposed in this Pull Request:

Closes #2260.

Thank you @mikkamp for your research on HPOS compatibility. This PR is built on top of @mikkamp's inputs. Since the HPOS upgrade recipe is updated, I ran the check again. I concur with the findings in #2260.

This PR:

Adds a check to set the screen_id based on order data store. The screen_id is used to enqueue facebook-for-woocommerce-modal, wc-facebook-google-product-category-fields and to render the render_modal_template.
Sets the order and orders page URL in the acceptance test.
Sets the HPOS compatibility to true.

Do the changed files pass phpcs checks? Please remove phpcs:ignore comments in changed files and fix any issues, or delete if not practical.

Detailed test instructions:

Enable HPOS and initial sync of orders by following the instructions given here: https://github.com/woocommerce/woocommerce/wiki/High-Performance-Order-Storage-Upgrade-Recipe-Book#how-to-enable-hpos
Generate the build for this branch and install.
Navigate to WooCommerce > Settings > Advanced > Custom data stores and set Data store for orders option to Use the WooCommerce orders tables.
Navigate to WooCommerce > Orders and click on any single order.
Click on view source and verify facebook-for-woocommerce-modal, wc-facebook-google-product-category-fields and tmpl-facebook-for-woocommerce-modal are enqueued.
Navigate to WooCommerce > Settings > Advanced > Custom data stores and set Data store for orders option to Use the WordPress posts table.
Navigate to WooCommerce > Orders and click on any single order.
Click on view source and verify facebook-for-woocommerce-modal, wc-facebook-google-product-category-fields and tmpl-facebook-for-woocommerce-modal are enqueued.

Additional details:

As noted in #2260, there are changes that need to be addressed in the SkyVerge framework for HPOS compatibility. However, based on internal discussions, the part of the framework code that requires changing is not used by the plugin. I need additional eyes here to verify that the matches listed in this comment #2260 (comment) do not affect the plugin.

I am unable to run the Acceptance test which has 2 other code changes.

Changelog entry

Add - HPOS Compatibility

…facebook-for-woocommerce into add/2260-hpos-compatibility

rawdreeg

Thanks, @ibndawood. I could verify facebook-for-woocommerce-modal, wc-facebook-google-product-category-fields and tmpl-facebook-for-woocommerce-modal are enqueued correctly enqueued.

Summary: # Add REST API Framework for local APIs called by AJAX ## Changes proposed in this Pull Request: - Introduces a comprehensive REST API framework for Facebook for WooCommerce - Migrates existing API functionality to the new structured system - Improves security with proper nonce handling and request validation - Adds JavaScript integration for secure client-side API calls - Provides extensive documentation for future development Closes #2345 (Replace with actual issue number if applicable) ## Description This PR introduces a new REST API framework for Facebook for WooCommerce that provides a structured, secure, and extensible way to handle API requests between the WordPress admin and Facebook services. The previous implementation used ad-hoc REST endpoints with inconsistent validation and error handling. This new framework standardizes how we define endpoints, validate requests, and expose functionality to JavaScript, making the codebase more maintainable and secure. ### Key Components 1. **Controller** (`includes/API/REST/Controller.php`): - Central registry for all REST API endpoints - Manages endpoint registration and initialization - Maintains constants for endpoint handlers and JS-enabled requests 2. **AbstractRESTEndpoint** (`includes/API/REST/AbstractRESTEndpoint.php`): - Base class for all endpoint handlers - Provides common functionality for permission checks and response formatting - Handles JS API definitions generation 3. **Request** (`includes/API/REST/Request.php`): - Base class for request validation and parameter handling - Sanitizes and validates all incoming data - Provides structured access to request parameters 4. **JS_Exposable** (`includes/API/REST/Traits/JS_Exposable.php`): - Trait for exposing endpoints to JavaScript - Defines interface for JS API integration - Generates API definitions for client-side consumption 5. **InitializeRestAPI** (`includes/API/REST/InitializeRestAPI.php`): - Initializes the REST API framework - Generates JavaScript API definitions - Handles script enqueuing and localization ### Security Improvements The new framework significantly improves security: - Nonces are no longer exposed globally in JavaScript - Each page that needs API access creates its own API client with a fresh nonce - All request parameters are properly validated and sanitized - Structured error handling prevents leaking sensitive information - Clear separation between public and private endpoints ### Migration Strategy We've migrated the existing functionality from `MetaExtension` to the new framework: - Settings update endpoint (`/settings/update`) - Uninstall endpoint (`/settings/uninstall`) The Connection screen has been updated to use the new API framework, ensuring backward compatibility while leveraging the improved architecture. ## Do the changed files pass phpcs checks? Yes, all new and modified files pass phpcs checks. No phpcs:ignore comments were added. ## Screenshots [Validating old functionality is not broken] ![Screenshot 2025-03-12 at 5 24 03 PM](https://github.com/user-attachments/assets/89871e6b-3c46-4592-8376-7a34ef3c07fc) ![Screenshot 2025-03-12 at 5 25 12 PM](https://github.com/user-attachments/assets/b2cc9c13-e3a3-485b-aa44-e42129e9437a) ## Detailed test instructions ### 1. Basic Functionality 1. Install and activate the plugin 2. Go to WooCommerce > Facebook 3. Verify the connection page loads correctly with no JavaScript errors 4. Check browser console for any errors related to API initialization ### 2. Legacy Connection Flow 1. If not connected, click "Get Started" 2. Complete the Facebook connection flow 3. Verify you're redirected back to WooCommerce and connection is established 4. Check that catalog ID, pixel ID, and other settings are properly saved 5. Verify the connection details are displayed correctly on the settings page ### 3. Enhanced Onboarding 1. Connect to Facebook using the enhanced onboarding flow 2. Verify the iframe splash page loads correctly and displays the Facebook onboarding interface 3. Complete the connection process through the iframe 4. Verify the connection to MICE is established and settings are saved correctly 5. Check that the iframe resizes properly when content changes ### 4. Disconnection Flow 1. With an active connection, click "Disconnect" 2. Confirm the disconnection in the confirmation dialog 3. Verify all Facebook integration settings are cleared 4. Verify the connection page returns to the unconnected state 5. Verify you can reconnect successfully after disconnection ### 5. JavaScript API Testing 1. Open browser developer tools (F12) 2. Go to Console tab 3. Test API client creation: ```javascript // Get a fresh nonce (you'll need to be on the settings page) const nonce = wp_create_nonce('wp_rest'); // Create API client const fbAPI = FacebookWooCommerceAPIFactory(nonce); // Examine available methods console.log(Object.keys(fbAPI)); ``` 4. Test uninstall endpoint (only if you're willing to disconnect): ```javascript fbAPI.uninstallSettings() .then(response => console.log('Success:', response)) .catch(error => console.error('Error:', error)); ``` 5. Verify the page reloads and connection is removed ### 6. Error Handling 1. Test invalid API calls to verify error handling: ```javascript // Missing required parameters fbAPI.updateSettings({}) .then(response => console.log('Success:', response)) .catch(error => console.log('Error correctly caught:', error)); ``` 2. Verify appropriate error messages are displayed ## Additional details - The framework is designed to be extensible, making it easy to add new endpoints in the future - Comprehensive documentation on new endpoint process is provided in `includes/API/REST/README.md` Pull Request resolved: #2928 Test Plan: Imported from GitHub, without a `Test Plan:` line. **!---- (auto-generated) DO NOT EDIT OR PUT ANYTHING AFTER THIS LINE ----!** MFTRunTestsScript Run / Test Suite: sa_checkout / Test Collection: www / Diff Version V9 https://internalfb.com/intern/testinfra/testrun/9570149282153152 MFTRunTestsScript Run / Test Suite: sa_checkout / Test Collection: bloks / Diff Version V9 https://internalfb.com/intern/testinfra/testrun/1970325111022726 Reviewed By: vinkmeta Differential Revision: D70733325 Pulled By: sol-loup fbshipit-source-id: f2275644ac6447d3940294d916020f1a484ca92e

Summary: # Add REST API Framework for local APIs called by AJAX ## Changes proposed in this Pull Request: - Introduces a comprehensive REST API framework for Facebook for WooCommerce - Migrates existing API functionality to the new structured system - Improves security with proper nonce handling and request validation - Adds JavaScript integration for secure client-side API calls - Provides extensive documentation for future development Closes facebook#2345 (Replace with actual issue number if applicable) ## Description This PR introduces a new REST API framework for Facebook for WooCommerce that provides a structured, secure, and extensible way to handle API requests between the WordPress admin and Facebook services. The previous implementation used ad-hoc REST endpoints with inconsistent validation and error handling. This new framework standardizes how we define endpoints, validate requests, and expose functionality to JavaScript, making the codebase more maintainable and secure. ### Key Components 1. **Controller** (`includes/API/REST/Controller.php`): - Central registry for all REST API endpoints - Manages endpoint registration and initialization - Maintains constants for endpoint handlers and JS-enabled requests 2. **AbstractRESTEndpoint** (`includes/API/REST/AbstractRESTEndpoint.php`): - Base class for all endpoint handlers - Provides common functionality for permission checks and response formatting - Handles JS API definitions generation 3. **Request** (`includes/API/REST/Request.php`): - Base class for request validation and parameter handling - Sanitizes and validates all incoming data - Provides structured access to request parameters 4. **JS_Exposable** (`includes/API/REST/Traits/JS_Exposable.php`): - Trait for exposing endpoints to JavaScript - Defines interface for JS API integration - Generates API definitions for client-side consumption 5. **InitializeRestAPI** (`includes/API/REST/InitializeRestAPI.php`): - Initializes the REST API framework - Generates JavaScript API definitions - Handles script enqueuing and localization ### Security Improvements The new framework significantly improves security: - Nonces are no longer exposed globally in JavaScript - Each page that needs API access creates its own API client with a fresh nonce - All request parameters are properly validated and sanitized - Structured error handling prevents leaking sensitive information - Clear separation between public and private endpoints ### Migration Strategy We've migrated the existing functionality from `MetaExtension` to the new framework: - Settings update endpoint (`/settings/update`) - Uninstall endpoint (`/settings/uninstall`) The Connection screen has been updated to use the new API framework, ensuring backward compatibility while leveraging the improved architecture. ## Do the changed files pass phpcs checks? Yes, all new and modified files pass phpcs checks. No phpcs:ignore comments were added. ## Screenshots [Validating old functionality is not broken] ![Screenshot 2025-03-12 at 5 24 03 PM](https://github.com/user-attachments/assets/89871e6b-3c46-4592-8376-7a34ef3c07fc) ![Screenshot 2025-03-12 at 5 25 12 PM](https://github.com/user-attachments/assets/b2cc9c13-e3a3-485b-aa44-e42129e9437a) ## Detailed test instructions ### 1. Basic Functionality 1. Install and activate the plugin 2. Go to WooCommerce > Facebook 3. Verify the connection page loads correctly with no JavaScript errors 4. Check browser console for any errors related to API initialization ### 2. Legacy Connection Flow 1. If not connected, click "Get Started" 2. Complete the Facebook connection flow 3. Verify you're redirected back to WooCommerce and connection is established 4. Check that catalog ID, pixel ID, and other settings are properly saved 5. Verify the connection details are displayed correctly on the settings page ### 3. Enhanced Onboarding 1. Connect to Facebook using the enhanced onboarding flow 2. Verify the iframe splash page loads correctly and displays the Facebook onboarding interface 3. Complete the connection process through the iframe 4. Verify the connection to MICE is established and settings are saved correctly 5. Check that the iframe resizes properly when content changes ### 4. Disconnection Flow 1. With an active connection, click "Disconnect" 2. Confirm the disconnection in the confirmation dialog 3. Verify all Facebook integration settings are cleared 4. Verify the connection page returns to the unconnected state 5. Verify you can reconnect successfully after disconnection ### 5. JavaScript API Testing 1. Open browser developer tools (F12) 2. Go to Console tab 3. Test API client creation: ```javascript // Get a fresh nonce (you'll need to be on the settings page) const nonce = wp_create_nonce('wp_rest'); // Create API client const fbAPI = FacebookWooCommerceAPIFactory(nonce); // Examine available methods console.log(Object.keys(fbAPI)); ``` 4. Test uninstall endpoint (only if you're willing to disconnect): ```javascript fbAPI.uninstallSettings() .then(response => console.log('Success:', response)) .catch(error => console.error('Error:', error)); ``` 5. Verify the page reloads and connection is removed ### 6. Error Handling 1. Test invalid API calls to verify error handling: ```javascript // Missing required parameters fbAPI.updateSettings({}) .then(response => console.log('Success:', response)) .catch(error => console.log('Error correctly caught:', error)); ``` 2. Verify appropriate error messages are displayed ## Additional details - The framework is designed to be extensible, making it easy to add new endpoints in the future - Comprehensive documentation on new endpoint process is provided in `includes/API/REST/README.md` Pull Request resolved: facebook#2928 Test Plan: Imported from GitHub, without a `Test Plan:` line. **!---- (auto-generated) DO NOT EDIT OR PUT ANYTHING AFTER THIS LINE ----!** MFTRunTestsScript Run / Test Suite: sa_checkout / Test Collection: www / Diff Version V9 https://internalfb.com/intern/testinfra/testrun/9570149282153152 MFTRunTestsScript Run / Test Suite: sa_checkout / Test Collection: bloks / Diff Version V9 https://internalfb.com/intern/testinfra/testrun/1970325111022726 Reviewed By: vinkmeta Differential Revision: D70733325 Pulled By: sol-loup fbshipit-source-id: f2275644ac6447d3940294d916020f1a484ca92e

Summary: # Add REST API Framework for local APIs called by AJAX ## Changes proposed in this Pull Request: - Introduces a comprehensive REST API framework for Facebook for WooCommerce - Migrates existing API functionality to the new structured system - Improves security with proper nonce handling and request validation - Adds JavaScript integration for secure client-side API calls - Provides extensive documentation for future development Closes #2345 (Replace with actual issue number if applicable) ## Description This PR introduces a new REST API framework for Facebook for WooCommerce that provides a structured, secure, and extensible way to handle API requests between the WordPress admin and Facebook services. The previous implementation used ad-hoc REST endpoints with inconsistent validation and error handling. This new framework standardizes how we define endpoints, validate requests, and expose functionality to JavaScript, making the codebase more maintainable and secure. ### Key Components 1. **Controller** (`includes/API/REST/Controller.php`): - Central registry for all REST API endpoints - Manages endpoint registration and initialization - Maintains constants for endpoint handlers and JS-enabled requests 2. **AbstractRESTEndpoint** (`includes/API/REST/AbstractRESTEndpoint.php`): - Base class for all endpoint handlers - Provides common functionality for permission checks and response formatting - Handles JS API definitions generation 3. **Request** (`includes/API/REST/Request.php`): - Base class for request validation and parameter handling - Sanitizes and validates all incoming data - Provides structured access to request parameters 4. **JS_Exposable** (`includes/API/REST/Traits/JS_Exposable.php`): - Trait for exposing endpoints to JavaScript - Defines interface for JS API integration - Generates API definitions for client-side consumption 5. **InitializeRestAPI** (`includes/API/REST/InitializeRestAPI.php`): - Initializes the REST API framework - Generates JavaScript API definitions - Handles script enqueuing and localization ### Security Improvements The new framework significantly improves security: - Nonces are no longer exposed globally in JavaScript - Each page that needs API access creates its own API client with a fresh nonce - All request parameters are properly validated and sanitized - Structured error handling prevents leaking sensitive information - Clear separation between public and private endpoints ### Migration Strategy We've migrated the existing functionality from `MetaExtension` to the new framework: - Settings update endpoint (`/settings/update`) - Uninstall endpoint (`/settings/uninstall`) The Connection screen has been updated to use the new API framework, ensuring backward compatibility while leveraging the improved architecture. ## Do the changed files pass phpcs checks? Yes, all new and modified files pass phpcs checks. No phpcs:ignore comments were added. ## Screenshots [Validating old functionality is not broken] ![Screenshot 2025-03-12 at 5 24 03 PM](https://github.com/user-attachments/assets/89871e6b-3c46-4592-8376-7a34ef3c07fc) ![Screenshot 2025-03-12 at 5 25 12 PM](https://github.com/user-attachments/assets/b2cc9c13-e3a3-485b-aa44-e42129e9437a) ## Detailed test instructions ### 1. Basic Functionality 1. Install and activate the plugin 2. Go to WooCommerce > Facebook 3. Verify the connection page loads correctly with no JavaScript errors 4. Check browser console for any errors related to API initialization ### 2. Legacy Connection Flow 1. If not connected, click "Get Started" 2. Complete the Facebook connection flow 3. Verify you're redirected back to WooCommerce and connection is established 4. Check that catalog ID, pixel ID, and other settings are properly saved 5. Verify the connection details are displayed correctly on the settings page ### 3. Enhanced Onboarding 1. Connect to Facebook using the enhanced onboarding flow 2. Verify the iframe splash page loads correctly and displays the Facebook onboarding interface 3. Complete the connection process through the iframe 4. Verify the connection to MICE is established and settings are saved correctly 5. Check that the iframe resizes properly when content changes ### 4. Disconnection Flow 1. With an active connection, click "Disconnect" 2. Confirm the disconnection in the confirmation dialog 3. Verify all Facebook integration settings are cleared 4. Verify the connection page returns to the unconnected state 5. Verify you can reconnect successfully after disconnection ### 5. JavaScript API Testing 1. Open browser developer tools (F12) 2. Go to Console tab 3. Test API client creation: ```javascript // Get a fresh nonce (you'll need to be on the settings page) const nonce = wp_create_nonce('wp_rest'); // Create API client const fbAPI = FacebookWooCommerceAPIFactory(nonce); // Examine available methods console.log(Object.keys(fbAPI)); ``` 4. Test uninstall endpoint (only if you're willing to disconnect): ```javascript fbAPI.uninstallSettings() .then(response => console.log('Success:', response)) .catch(error => console.error('Error:', error)); ``` 5. Verify the page reloads and connection is removed ### 6. Error Handling 1. Test invalid API calls to verify error handling: ```javascript // Missing required parameters fbAPI.updateSettings({}) .then(response => console.log('Success:', response)) .catch(error => console.log('Error correctly caught:', error)); ``` 2. Verify appropriate error messages are displayed ## Additional details - The framework is designed to be extensible, making it easy to add new endpoints in the future - Comprehensive documentation on new endpoint process is provided in `includes/API/REST/README.md` Pull Request resolved: #2928 Test Plan: Imported from GitHub, without a `Test Plan:` line. **!---- (auto-generated) DO NOT EDIT OR PUT ANYTHING AFTER THIS LINE ----!** MFTRunTestsScript Run / Test Suite: sa_checkout / Test Collection: www / Diff Version V9 https://internalfb.com/intern/testinfra/testrun/9570149282153152 MFTRunTestsScript Run / Test Suite: sa_checkout / Test Collection: bloks / Diff Version V9 https://internalfb.com/intern/testinfra/testrun/1970325111022726 Reviewed By: vinkmeta Differential Revision: D70733325 Pulled By: sol-loup fbshipit-source-id: f2275644ac6447d3940294d916020f1a484ca92e

ibndawood added 4 commits October 28, 2022 19:22

Sets the screen ID according to the orders data store

2b4b58f

Sets the correct orders and order page according to data store used

62c3033

Sets HPOS compatibility to true

13989e7

Rename to to resolve ambiguity

44f995d

github-actions bot added changelog: add A new feature, function, or functionality was added. type: enhancement The issue is a request for an enhancement. labels Oct 28, 2022

ibndawood added 2 commits October 28, 2022 20:14

Rename variable screen_order to order_screen_id to resolve ambiguity

81a33da

Merge branch 'add/2260-hpos-compatibility' of github.com:woocommerce/…

4909c4c

…facebook-for-woocommerce into add/2260-hpos-compatibility

ibndawood marked this pull request as ready for review October 28, 2022 15:00

ibndawood requested a review from a team October 28, 2022 15:01

rawdreeg approved these changes Oct 31, 2022

View reviewed changes

budzanowski mentioned this pull request Oct 31, 2022

Declare HPOS compatibility. #2337

Closed

ibndawood merged commit 80f4fa9 into develop Oct 31, 2022

ibndawood deleted the add/2260-hpos-compatibility branch October 31, 2022 12:59

ibndawood mentioned this pull request Nov 1, 2022

Replace an Internal namespace class method used in HPOS compatibility #2350

Merged

1 task

ibndawood mentioned this pull request Nov 15, 2022

v2.6.29 and v2.6.30 #2369

Merged

sol-loup mentioned this pull request Mar 13, 2025

[ReviewReady] Rest API endpoint framework for WP-local APIs #2928

Closed

sol-loup mentioned this pull request Mar 25, 2025

fix terminology #2966

Closed

7 tasks

This was referenced May 2, 2025

[LINTFIX] Fixes for AdminNoticeHandler.php #3131

Closed

[LINTFIX] Fixes for Dependencies.php #3132

Closed

[LINTFIX] Fixes for Compatibility.php #3133

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Adds HPOS compatibility#2345

Adds HPOS compatibility#2345
ibndawood merged 6 commits intodevelopfrom
add/2260-hpos-compatibility

ibndawood commented Oct 28, 2022 •

edited

Loading

Uh oh!

rawdreeg left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

ibndawood commented Oct 28, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes proposed in this Pull Request:

Detailed test instructions:

Additional details:

Changelog entry

Uh oh!

rawdreeg left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

ibndawood commented Oct 28, 2022 •

edited

Loading