Refactoring WordPress Plugin

[igorbenic]

Changes

1.3.0

1. Improved performance of Lemon Squeezy in Block Editor on core Buttons
2. Added option to pre-fill logged-in user's data on Checkout
3. Added option to pre-fill data from URL query string following the same checkout pre-fill pattern
4. Added option to define Custom Data when using LS button block
5. Added option to define text and background colors for LS button block
6. Added option to enter Test API key and with that enable Test Mode
7. Moved to wp-scripts

1. Improved performance

Issues:

• When adding any core "Buttons" block, that is, buttons in the Block Editor, the plugin would start loading LemonSqueezy stores and validate the API key. Products would be loaded as well since after Stores were loaded, the first one was assigned.
• On "Update/Publish" button, sometimes the block would start looping through and getting products and such for every button that's there.

Solved By: Adding a Toggle to apply LS checkout on such button. By that, the LS would retrieve stores and products only when requested and the loop wasn't happening anymore.

Default state	Toggled

2. Added option to pre-fill logged-in user's data on Checkout

If toggled and the user is logged in, we're adding the user's full name (First & Last name) and the email as the parameters of the checkout query string.

{PRODUCT_URL}?checkout[email]=email&checkout[name]=Name

All Options:

3. Added option to pre-fill data from URL query string

If toggled, we'll check for the $_GET['checkout'] parameters. If such URL has this parameters, we'll add them to the checkout URL to pre-fill data.

4. Added option to define Custom Data when using LS button block

https://github.com/Make-Lemonade/lemonsqueezy-wp/assets/1537130/86fe3f1f-712d-4379-9d20-35be181f5b9d

5. Added option to define text and background colors for LS button block

Users can now pick up the text and background color for the button of the LS block.

6. Added option to enter Test API key and with that enable Test Mode

Issue: Even if I always had "test mode" enabled by default, the OAuth flow will always set me with the Production API key.

Solved by: Adding a manual way of entering an API key that allows us to set the Test API key. If such key is present in the database, we're filtering the get_option method and retrieve such key instead of the one given by OAuth flow. That way, we're making sure that everything is using the Test key.

In the video, you can notice the "Products" change a bit in the title as we move from production to test.

https://github.com/Make-Lemonade/lemonsqueezy-wp/assets/1537130/b797fc3c-89b6-41dd-869f-22c12d05ed69

7. Moved to wp-scripts

By moving to wp-scripts package, we're using the standard way of creating blocks which uses the correct dependencies and more "bulletproof" for future releases of the Block editor.

The creation of the plugin ZIP file has not changed. It now uses plugin-zip given by wp-scripts. The parameter files is set in package.json that lists all the files that can go in the ZIP file.

The ZIP is also moved to the folder bundled as it was with gulp so all flows should work fine as well. When building the files using yarn build, we're following the same flow as before:

1. Lint JS
2. Build files for production
3. Create a ZIP

Testing

Installation

• [ ] Run yarn install to install everything needed
• [ ] Try to disconnect and connect to LemonSqueezy in the admin area
• [ ] Try finding and adding the LemonSqueezy block
• [ ] Save the page/post where it is and check it on the front
• [ ] Repeat for regular Button as well

---

LemonSqueezy Block

• [ ] Add LS block, pick a store and a product
• [ ] Choose the overlay option
• [ ] Save and check if the overlay is triggered on the front

---

• [ ] Add LS block, pick a store and a product
• [ ] Choose to pre-fill user data
• [ ] Save and check the email is pre-filled on the checkout
• [ ] Check for both regular checkout link and overlay
• [ ] Make sure the user has first, last or both names set
• [ ] Check again if such data is there as well

---

• [ ] Add LS block, pick a store and a product
• [ ] Choose to pre-fill data from URL & save
• [ ] Add query strings to the Page you're viewing, such as ?checkout[email]=EMAIL&checkout[billing_address][country]=US&checkout[billing_address][zip]=35005&checkout[tax_number]=GB123456789
• [ ] Check for both regular checkout link and overlay if the data is pre-filled

---

• [ ] Add LS block, pick a store and a product
• [ ] Add custom data such as in the video above & save
• [ ] Check the URL of the button on the front if there are query strings set with something like checkout[custom][YOUR_DATA]=VALUE

---

Core Buttons Block

• [ ] Open the Networks tab in Web inspector
• [ ] Add core Buttons block,
• [ ] There shouldn't be any requests to get stores or validate API keys for LS WP REST routes
• [ ] Toggle to apply LS checkout
• [ ] It should show the inputs for LemonSqueezy and populate the data
• [ ] Repeat checks for existing options as above (Pre-fill data, Overlay)

[height[bot]]

Link Height tasks by mentioning a task ID in the pull request title or commit messages, or description and comments with the keyword link (e.g. "Link T-123").

💡Tip: You can also use "Close T-X" to automatically close a task when the pull request is merged.

[igorbenic]

@mauryaratan pushed fixes for:

1. React error in console
2. Button colors not showing

Regarding the product status, API doesn't allow it as it returns: "Filter parameter status is not allowed." as an error message.

This part wasn't discussed for the scope of this project. I'll see with @jrfarr to define the next phase of it so I can write a paginated query of this REST API inside WordPress and filter out draft products.

We could now show the status next to the name "Product Name (Draft)" if it's a draft (empty if published) for a better UX.

We can include the other fields as well in the next phase if needed.