Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'trunk' into dev/pnpm-settings-tweaks

This commit is contained in:
Vladimir Reznichenko 2024-09-19 14:06:27 +02:00
parent 24ab3558d2 ec9cdbdbf7
commit 49957200fc
124 changed files with 3320 additions and 1710 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
.github/workflows/stalebot.yml vendored
View File

@ -1,51 +1,52 @@
name: 'Process stale needs-feedback issues'
on:
schedule:
- cron: '21 0 * * *'
workflow_dispatch:
schedule:
- cron: '21 0 * * *'
workflow_dispatch:
permissions: { }
permissions: {}
jobs:
stale:
runs-on: ubuntu-20.04
permissions:
contents: read
issues: write
pull-requests: write
steps:
- name: Scan issues
uses: actions/stale@v9.0.0
with:
repo-token: ${{ secrets.GITHUB_TOKEN }}
stale-issue-message: "As a part of this repository's maintenance, this issue is being marked as stale due to inactivity. Please feel free to comment on it in case we missed something.\n\n###### After 7 days with no activity this issue will be automatically be closed."
close-issue-message: 'This issue was closed because it has been 14 days with no activity.'
operations-per-run: 140
days-before-stale: -1
days-before-close: -1
days-before-issue-stale: 7
days-before-issue-close: 7
stale-issue-label: 'status: stale'
stale-pr-label: 'status: stale'
exempt-issue-labels: 'type: enhancement'
only-issue-labels: 'needs: author feedback'
close-issue-label: "status: can't reproduce"
ascending: true
- name: Process Stale Flaky Test Issues
uses: actions/stale@v9.0.0
with:
repo-token: ${{ secrets.GITHUB_TOKEN }}
only-issue-labels: 'metric: flaky e2e test'
days-before-stale: -1
days-before-close: -1
days-before-issue-stale: 5
days-before-issue-close: 2
stale-issue-label: 'status: stale'
stale-issue-message: 'This issue is being marked as stale due to inactivity. It will be auto-closed if no further activity occurs within the next 2 days.'
close-issue-message: 'Auto-closed due to inactivity. Please re-open if you believe this issue is still valid.'
close-issue-reason: 'not_planned'
remove-stale-when-updated: true
exempt-all-assignees: false
enable-statistics: true
ascending: true
operations-per-run: 120
stale:
runs-on: ubuntu-20.04
permissions:
contents: read
issues: write
pull-requests: write
steps:
- name: Scan issues
uses: actions/stale@v9.0.0
with:
repo-token: ${{ secrets.GITHUB_TOKEN }}
stale-issue-message: "As a part of this repository's maintenance, this issue is being marked as stale due to inactivity. Please feel free to comment on it in case we missed something.\n\n###### After 7 days with no activity this issue will be automatically be closed."
close-issue-message: 'This issue was closed because it has been 14 days with no activity.'
operations-per-run: 140
days-before-stale: -1
days-before-close: -1
days-before-issue-stale: 7
days-before-issue-close: 7
stale-issue-label: 'status: stale'
stale-pr-label: 'status: stale'
exempt-issue-labels: 'type: enhancement'
only-issue-labels: 'needs: author feedback'
close-issue-label: "status: can't reproduce"
ascending: true
- name: Process Stale Flaky Test Issues
uses: actions/stale@v9.0.0
with:
repo-token: ${{ secrets.GITHUB_TOKEN }}
only-issue-labels: 'metric: flaky e2e test'
exempt-issue-labels: 'metric: skipped test'
days-before-stale: -1
days-before-close: -1
days-before-issue-stale: 5
days-before-issue-close: 2
stale-issue-label: 'status: stale'
stale-issue-message: 'This issue is being marked as stale due to inactivity. It will be auto-closed if no further activity occurs within the next 2 days.'
close-issue-message: 'Auto-closed due to inactivity. Please re-open if you believe this issue is still valid.'
close-issue-reason: 'not_planned'
remove-stale-when-updated: true
exempt-all-assignees: false
enable-statistics: true
ascending: true
operations-per-run: 120

31
.husky/post-checkout
View File

@ -1,35 +1,30 @@
#!/usr/bin/env bash
. "$(dirname "$0")/_/husky.sh"
# '1' is branch
# The hook documentation: https://git-scm.com/docs/githooks.html#_post_checkout
CHECKOUT_TYPE=$3
redColoured='\033[0;31m'
HEAD_NEW=$2
HEAD_PREVIOUS=$1
whiteColoured='\033[0m'
orangeColoured='\033[1;33m'
# '1' is a branch checkout
if [ "$CHECKOUT_TYPE" = '1' ]; then
canUpdateDependencies='no'
# Prompt about pnpm versions mismatch when switching between branches.
currentPnpmVersion=$( ( command -v pnpm > /dev/null && pnpm -v ) || echo 'n/a' )
currentPnpmVersion=$( ( command -v pnpm > /dev/null && pnpm -v 2>/dev/null ) || echo 'n/a' )
targetPnpmVersion=$( grep packageManager package.json | sed -nr 's/.+packageManager.+pnpm@([[:digit:].]+).+/\1/p' )
if [ "$currentPnpmVersion" != "$targetPnpmVersion" ]; then
printf "${redColoured}pnpm versions mismatch: in use '$currentPnpmVersion', needed '$targetPnpmVersion'. Here some hints how to solve this:\n"
printf "${redColoured}* actualize environment: 'nvm use && pnpm -v' (the most common case)\n"
printf "${redColoured}* install: 'npm install -g pnpm@$targetPnpmVersion'\n"
else
canUpdateDependencies='yes'
printf "${orangeColoured}pnpm versions mismatch: in use '$currentPnpmVersion', needed '$targetPnpmVersion'. If you are working on something in this branch, here are some hints on how to solve this:\n"
printf "${orangeColoured}* actualize environment: 'nvm use && pnpm -v' (the most common case)\n"
printf "${orangeColoured}* install: 'npm install -g pnpm@$targetPnpmVersion'\n"
fi
# Auto-refresh dependencies when switching between branches.
changedManifests=$( ( git diff --name-only HEAD ORIG_HEAD | grep -E '(package.json|pnpm-lock.yaml|pnpm-workspace.yaml|composer.json|composer.lock)$' ) || echo '' )
changedManifests=$( ( git diff --name-only $HEAD_NEW $HEAD_PREVIOUS | grep -E '(package.json|pnpm-lock.yaml|pnpm-workspace.yaml|composer.json|composer.lock)$' ) || echo '' )
if [ -n "$changedManifests" ]; then
printf "${whiteColoured}It was a change in the following file(s) - refreshing dependencies:\n"
printf "${whiteColoured}The following file(s) in the new branch differs from the original one, dependencies might need to be refreshed:\n"
printf "${whiteColoured} %s\n" $changedManifests
if [ "$canUpdateDependencies" = 'yes' ]; then
pnpm install --frozen-lockfile
else
printf "${redColoured}Skipping dependencies refresh. Please actualize pnpm version and execute 'pnpm install --frozen-lockfile' manually.\n"
fi
printf "${orangeColoured}If you are working on something in this branch, ensure to refresh dependencies with 'pnpm install --frozen-lockfile'\n"
fi
fi

2
.husky/post-merge
View File

@ -1,6 +1,8 @@
#!/usr/bin/env bash
. "$(dirname "$0")/_/husky.sh"
# The hook documentation: https://git-scm.com/docs/githooks.html#_post_merge
changedManifests=$( ( git diff --name-only HEAD ORIG_HEAD | grep -E '(package.json|pnpm-lock.yaml|pnpm-workspace.yaml|composer.json|composer.lock)$' ) || echo '' )
if [ -n "$changedManifests" ]; then
printf "It was a change in the following file(s) - refreshing dependencies:\n"

7
changelog.txt
View File

@ -1,5 +1,12 @@
== Changelog ==
= 9.3.2 2024-09-18 =
- Fix - Improve the product importer's handling of filepaths under Windows [#51456](https://github.com/woocommerce/woocommerce/pull/51456)
- Fix - Revert changes related to low stock product notifications [#51441](https://github.com/woocommerce/woocommerce/pull/51441)
- Fix - Resolve a bug where manually triggering `added_to_cart` event without a button element caused an Exception [#51449](https://github.com/woocommerce/woocommerce/pull/51449)
= 9.3.1 2024-09-12 =
* Tweak - Disable remote logging feature by default [#51312](https://github.com/woocommerce/woocommerce/pull/51312)

2
docs/building-a-woo-store/adding-a-custom-field-to-variable-products.md
View File

@ -254,4 +254,4 @@ Displaying the variation in the front store works a bit differently for variable
## How to find hooks?
Everyone will have their own preferred way, but for me, the quickest way is to look in the WooCommere plugin code. The code for each data section can be found in `/woocommerce/includes/admin/meta-boxes/views`. To view how the inventory section is handled check the `html-product-data-inventory.php` file, and for variations take a look at `html-variation-admin.php`.
Everyone will have their own preferred way, but for me, the quickest way is to look in the WooCommerce plugin code. The code for each data section can be found in `/woocommerce/includes/admin/meta-boxes/views`. To view how the inventory section is handled check the `html-product-data-inventory.php` file, and for variations take a look at `html-variation-admin.php`.

78
docs/cart-and-checkout-blocks/checkout-payment-methods/payment-method-integration.md
View File

@ -43,12 +43,16 @@ The options you feed the configuration instance should be an object in this shap
```js
const options = {
name: 'my_payment_method',
content: <div>A React node</div>,
edit: <div>A React node</div>,
title: 'My Mayment Method',
description: 'A setence or two about your payment method',
gatewayId: 'gateway-id',
content: <ReactNode />,
edit: <ReactNode />,
canMakePayment: () => true,
paymentMethodId: 'new_payment_method',
supports: {
features: [],
style: [],
},
};
```
@ -59,6 +63,18 @@ Here's some more details on the configuration options:
This should be a unique string (wise to try to pick something unique for your gateway that wouldn't be used by another implementation) that is used as the identifier for the gateway client side. If `paymentMethodId` is not provided, `name` is used for `paymentMethodId` as well.
#### `title` (optional)
This should be a human readable string with the name of your payment method. It should be sentence capitalised. It is displayed to the merchant in the editor when viewing the Checkout block to indicate which express payment methods are active. If it is not provided, the `name` will be used as the title.
#### `description` (optional)
This is one or two sentences maximum describing your payment gateway. It should be sentence capitalised. It is displayed to the merchant in the editor when viewing the Checkout block to indicate which express payment methods are active.
#### `gatewayId` (optional)
This is the ID of the Payment Gateway that your plugin registers server side, and which registers the express payment method. It is used to link your express payment method on the clinet, to a payment gateway defined on the server. It is used to direct the merchant to the right settings page within the editor. If this is not provided, the merchant will be redirected to the general Woo payment settings page.
#### `content` (required)
This should be a React node that will output in the express payment method area when the block is rendered in the frontend. It will be cloned in the rendering process. When cloned, this React node will receive props passed in from the checkout payment method interface that will allow your component to interact with checkout data (more on [these props later](#props-fed-to-payment-method-nodes)).
@ -97,7 +113,11 @@ This is the only optional configuration object. The value of this property is wh
This is an array of payment features supported by the gateway. It is used to crosscheck if the payment method can be used for the content of the cart. By default payment methods should support at least `products` feature. If no value is provided then this assumes that `['products']` are supported.
---
#### `supports:style`
This is an array of style variations supported by the express payment method. These are styles that are applied across all the active express payment buttons and can be controlled from the express payment block in the editor. Supported values for these are one of `['height', 'borderRadius']`.
![Express Checkout Uniform Styles](https://github.com/user-attachments/assets/f0f99f3f-dca7-42b0-8685-3b098a825020)
### Payment Methods - `registerPaymentMethod( options )`
@ -139,23 +159,24 @@ The options you feed the configuration instance are the same as those for expres
A big part of the payment method integration is the interface that is exposed for payment methods to use via props when the node provided is cloned and rendered on block mount. While all the props are listed below, you can find more details about what the props reference, their types etc via the [typedefs described in this file](https://github.com/woocommerce/woocommerce/blob/trunk/plugins/woocommerce-blocks/assets/js/types/type-defs/payment-method-interface.ts).
| Property | Type | Description | Values |
| ------------------------ | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `activePaymentMethod` | String | The slug of the current active payment method in the checkout. | - |
| `billing` | Object | Contains everything related to billing. | `billingAddress`, `cartTotal`, `currency`, `cartTotalItems`, `displayPricesIncludingTax`, `appliedCoupons`, `customerId` |
| `cartData` | Object | Data exposed from the cart including items, fees, and any registered extension data. Note that this data should be treated as immutable (should not be modified/mutated) or it will result in errors in your application. | `cartItems`, `cartFees`, `extensions` |
| `checkoutStatus` | Object | The current checkout status exposed as various boolean state. | `isCalculating`, `isComplete`, `isIdle`, `isProcessing` |
| Property | Type | Description | Values |
| ------------------------ | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `activePaymentMethod` | String | The slug of the current active payment method in the checkout. | - |
| `billing` | Object | Contains everything related to billing. | `billingAddress`, `cartTotal`, `currency`, `cartTotalItems`, `displayPricesIncludingTax`, `appliedCoupons`, `customerId` |
| `cartData` | Object | Data exposed from the cart including items, fees, and any registered extension data. Note that this data should be treated as immutable (should not be modified/mutated) or it will result in errors in your application. | `cartItems`, `cartFees`, `extensions` |
| `checkoutStatus` | Object | The current checkout status exposed as various boolean state. | `isCalculating`, `isComplete`, `isIdle`, `isProcessing` |
| `components` | Object | It exposes React components that can be implemented by your payment method for various common interface elements used by payment methods. | <!-- markdownlint-disable-line no-inline-html --><ul><li>`ValidationInputError`: a container for holding validation errors which typically you'll include after any inputs.</li><li>[`PaymentMethodLabel`](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/e089ae17043fa525e8397d605f0f470959f2ae95/assets/js/payment-method-extensions/payment-methods/paypal/index.js#L37-L40): use this component for the payment method label, including an optional icon.</li><li>`PaymentMethodIcons`: a React component used for displaying payment method icons.</li><li>- `LoadingMask`: a wrapper component that handles displaying a loading state when the isLoading prop is true. Exposes the [LoadingMask component](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/c9074a4941919987dbad16a80f358b960336a09d/assets/js/base/components/loading-mask/index.js)</li></ul> |
| `emitResponse` | Object | Contains some constants that can be helpful when using the event emitter. Read the _[Emitting Events](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/e267cd96a4329a4eeef816b2ef627e113ebb72a5/docs/extensibility/checkout-flow-and-events.md#emitting-events)_ section for more details. | <!-- markdownlint-disable-line no-inline-html --><ul><li>`noticeContexts`: This is an object containing properties referencing areas where notices can be targeted in the checkout. The object has the following properties: <ul><li>`PAYMENTS`: This is a reference to the notice area in the payment methods step.</li><li>`EXPRESS_PAYMENTS`: This is a reference to the notice area in the express payment methods step.</li></ul></li><li>`responseTypes`: This is an object containing properties referencing the various response types that can be returned by observers for some event emitters. It makes it easier for autocompleting the types and avoiding typos due to human error. The types are `SUCCESS`, `FAIL`, `ERROR`. The values for these types also correspond to the [payment status types](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/34e17c3622637dbe8b02fac47b5c9b9ebf9e3596/src/Payments/PaymentResult.php#L21) from the [checkout endpoint response from the server](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/34e17c3622637dbe8b02fac47b5c9b9ebf9e3596/src/RestApi/StoreApi/Schemas/CheckoutSchema.php#L103-L113).</li></ul> |
| `eventRegistration` | object | Contains all the checkout event emitter registration functions. These are functions the payment method can register observers on to interact with various points in the checkout flow (see [this doc](./checkout-flow-and-events.md) for more info). | `onCheckoutValidation`, `onCheckoutSuccess`, `onCheckoutFail`, `onPaymentSetup`, `onShippingRateSuccess`, `onShippingRateFail`, `onShippingRateSelectSuccess`, `onShippingRateSelectFail` |
| `onClick` | Function | **Provided to express payment methods** that should be triggered when the payment method button is clicked (which will signal to checkout the payment method has taken over payment processing) | - |
| `onClose` | Function | **Provided to express payment methods** that should be triggered when the express payment method modal closes and control is returned to checkout. | - |
| `onSubmit` | Function | Submits the checkout and begins processing | - |
| `paymentStatus` | Object | Various payment status helpers. Note, your payment method does not have to handle setting this status client side. Checkout will handle this via the responses your payment method gives from observers registered to [checkout event emitters](./checkout-flow-and-events.md). | `isPristine`, `isStarted`, `isProcessing`, `isFinished`, `hasError`, `hasFailed`, `isSuccessful` (see below for explanation) |
| `setExpressPaymentError` | Function | Receives a string and allows express payment methods to set an error notice for the express payment area on demand. This can be necessary because some express payment method processing might happen outside of checkout events. | - |
| `shippingData` | Object | Contains all shipping related data (outside of the shipping status). | `shippingRates`, `shippingRatesLoading`, `selectedRates`, `setSelectedRates`, `isSelectingRate`, `shippingAddress`, `setShippingAddress`, and `needsShipping` |
| `eventRegistration` | object | Contains all the checkout event emitter registration functions. These are functions the payment method can register observers on to interact with various points in the checkout flow (see [this doc](./checkout-flow-and-events.md) for more info). | `onCheckoutValidation`, `onCheckoutSuccess`, `onCheckoutFail`, `onPaymentSetup`, `onShippingRateSuccess`, `onShippingRateFail`, `onShippingRateSelectSuccess`, `onShippingRateSelectFail` |
| `onClick` | Function | **Provided to express payment methods** that should be triggered when the payment method button is clicked (which will signal to checkout the payment method has taken over payment processing) | - |
| `onClose` | Function | **Provided to express payment methods** that should be triggered when the express payment method modal closes and control is returned to checkout. | - |
| `onSubmit` | Function | Submits the checkout and begins processing | - |
| `buttonAttributes` | Object | Styles set by the merchant that should be respected by all express payment buttons | `height, borderRadius` |
| `paymentStatus` | Object | Various payment status helpers. Note, your payment method does not have to handle setting this status client side. Checkout will handle this via the responses your payment method gives from observers registered to [checkout event emitters](./checkout-flow-and-events.md). | `isPristine`, `isStarted`, `isProcessing`, `isFinished`, `hasError`, `hasFailed`, `isSuccessful`(see below for explanation) |
| `setExpressPaymentError` | Function | Receives a string and allows express payment methods to set an error notice for the express payment area on demand. This can be necessary because some express payment method processing might happen outside of checkout events. | - |
| `shippingData` | Object | Contains all shipping related data (outside of the shipping status). | `shippingRates`, `shippingRatesLoading`, `selectedRates`, `setSelectedRates`, `isSelectingRate`, `shippingAddress`, `setShippingAddress`, and `needsShipping` |
| `shippingStatus` | Object | Various shipping status helpers. | <!-- markdownlint-disable-line no-inline-html --><ul><li>`shippingErrorStatus`: an object with various error statuses that might exist for shipping</li><li>`shippingErrorTypes`: an object containing all the possible types for shipping error status</li></ul> |
| `shouldSavePayment` | Boolean | Indicates whether or not the shopper has selected to save their payment method details (for payment methods that support saved payments). True if selected, false otherwise. Defaults to false. | - |
| `shouldSavePayment` | Boolean | Indicates whether or not the shopper has selected to save their payment method details (for payment methods that support saved payments). True if selected, false otherwise. Defaults to false. | - |
- `isPristine`: This is true when the current payment status is `PRISTINE`.
- `isStarted`: This is true when the current payment status is `EXPRESS_STARTED`.
@ -167,6 +188,29 @@ A big part of the payment method integration is the interface that is exposed fo
Any registered `savedTokenComponent` node will also receive a `token` prop which includes the id for the selected saved token in case your payment method needs to use it for some internal logic. However, keep in mind, this is just the id representing this token in the database (and the value of the radio input the shopper checked), not the actual customer payment token (since processing using that usually happens on the server for security).
### Button Attributes for Express Payment Methods
This API provides a way to synchronise the look and feel of the express payment buttons for a coherent shopper experience. Express Payment Methods must prefer the values provided in the `buttonAttributes`, and use it's own configuration settings as backup when the buttons are rendered somewhere other than the Cart or Checkout block.
For example, in your button component, you would do something like this:
```js
// Get your extension specific settings and set defaults if not available
let {
borderRadius = '4',
height = '48',
} = getButtonSettingsFromConfig();
// In a cart & checkout block context, we receive `buttonAttributes` as a prop which overwrite the extension specific settings
if ( typeof buttonAttributes !== 'undefined' ) {
height = buttonAttributes.height;
borderRadius = buttonAttributes.borderRadius;
}
...
return &lt;button style={height: `${height}px`, borderRadius: `${borderRadius}px`} /&gt;
```
## Server Side Integration
### Processing Payment

8
docs/docs-manifest.json
View File

@ -83,7 +83,7 @@
"menu_title": "Add Custom Fields to Products",
"tags": "how-to",
"edit_url": "https://github.com/woocommerce/woocommerce/edit/trunk/docs/building-a-woo-store/adding-a-custom-field-to-variable-products.md",
"hash": "fe8cf43940f5166bf69f102aa4643cbe32415b1167d6b6d8968d434a4d113879",
"hash": "df61c93febc234fe0dbb4826a20ae120b153ab6f6c92d8778177fcac8d6696fe",
"url": "https://raw.githubusercontent.com/woocommerce/woocommerce/trunk/docs/building-a-woo-store/adding-a-custom-field-to-variable-products.md",
"id": "64b686dcd5fdd4842be2fc570108231d5a8bfc1b"
}
@ -223,7 +223,7 @@
"menu_title": "Payment Method Integration",
"tags": "reference",
"edit_url": "https://github.com/woocommerce/woocommerce/edit/trunk/docs/cart-and-checkout-blocks/checkout-payment-methods/payment-method-integration.md",
"hash": "138ffbf27e79ec8b35d2c46e87e3663c203d91fc9ba3f76c43f3cbe76258e5bf",
"hash": "015aae25bb331364c224fe8eb2b7675e4cbed0a9e6bee0dde5f5311388161b0a",
"url": "https://raw.githubusercontent.com/woocommerce/woocommerce/trunk/docs/cart-and-checkout-blocks/checkout-payment-methods/payment-method-integration.md",
"id": "c9a763b6976ecf03aeb961577c17c31f1ac7c420",
"links": {
@ -1229,7 +1229,7 @@
"menu_title": "Core critical flows",
"tags": "reference",
"edit_url": "https://github.com/woocommerce/woocommerce/edit/trunk/docs/quality-and-best-practices/core-critical-flows.md",
"hash": "34109195216ebcb5b23e741391b9f355ba861777a5533d4ef1e341472cb5209e",
"hash": "c7122979df14f46646b3f1472ba071bc560b99e6462c5790a9aeaa3b4238ce15",
"url": "https://raw.githubusercontent.com/woocommerce/woocommerce/trunk/docs/quality-and-best-practices/core-critical-flows.md",
"id": "e561b46694dba223c38b87613ce4907e4e14333a"
},
@ -1804,5 +1804,5 @@
"categories": []
}
],
"hash": "47dc2a7e213e1e9d83e93a85dafdf8c7b539cc5474b4166eb6398b734d150ff3"
"hash": "a88d9ea54465c8bbd820042a92df79cbd48943e785b418fcaa04d0c0e66116c0"
}

4
packages/js/product-editor/changelog/update-dataviews_package Normal file
View File

@ -0,0 +1,4 @@
Significance: minor
Type: update
Update @wordpress/dataviews package and fix class names for products dataviews app.

2
packages/js/product-editor/package.json
View File

@ -56,7 +56,7 @@
"@wordpress/compose": "wp-6.0",
"@wordpress/core-data": "wp-6.0",
"@wordpress/data": "wp-6.0",
"@wordpress/dataviews": "^4.2.0",
"@wordpress/dataviews": "^4.3.0",
"@wordpress/date": "wp-6.0",
"@wordpress/deprecated": "wp-6.0",
"@wordpress/edit-post": "wp-6.0",

10
packages/js/product-editor/src/products.scss
View File

@ -1,15 +1,15 @@
@include wordpress-admin-schemes();
.woocommerce_page_woocommerce-products-dashboard #wpadminbar,
.woocommerce_page_woocommerce-products-dashboard #adminmenumain {
.product_page_woocommerce-products-dashboard #wpadminbar,
.product_page_woocommerce-products-dashboard #adminmenumain {
display: none;
}
.woocommerce_page_woocommerce-products-dashboard #wpcontent {
.product_page_woocommerce-products-dashboard #wpcontent {
margin-left: 0;
}
body.woocommerce_page_woocommerce-products-dashboard #woocommerce-products-dashboard {
body.product_page_woocommerce-products-dashboard #woocommerce-products-dashboard {
@include wp-admin-reset("#woocommerce-products-dashboard");
@include reset;
display: block !important;
@ -40,7 +40,7 @@ body.js.is-fullscreen-mode {
}
}
.woocommerce_page_woocommerce-products-dashboard {
.product_page_woocommerce-products-dashboard {
@import "products-app/sidebar-dataviews/style.scss";
@import "products-app/product-edit/style.scss";
}

2
plugins/woocommerce-admin/client/customize-store/assembler-hub/editor.tsx
View File

@ -23,6 +23,7 @@ import { GlobalStylesRenderer } from '@wordpress/edit-site/build-module/componen
/**
* Internal dependencies
*/
import { trackEvent } from '../tracking';
import { editorIsLoaded } from '../utils';
import { BlockEditorContainer } from './block-editor-container';
@ -63,6 +64,7 @@ export const Editor = ( { isLoading }: { isLoading: boolean } ) => {
useEffect( () => {
if ( ! isLoading ) {
editorIsLoaded();
trackEvent( 'customize_your_store_assembler_hub_editor_loaded' );
}
}, [ isLoading ] );

26
plugins/woocommerce-admin/client/marketplace/components/category-selector/category-selector.scss
View File

@ -1,13 +1,17 @@
@import "../../stylesheets/_variables.scss";
.woocommerce-marketplace__category-selector {
position: relative;
display: flex;
align-items: stretch;
margin: $grid-unit-20 0 0 0;
margin: 0;
overflow-x: auto;
}
.woocommerce-marketplace__category-item {
cursor: pointer;
white-space: nowrap;
margin-bottom: 0;
.components-dropdown {
height: 100%;
@ -50,7 +54,6 @@
.woocommerce-marketplace__category-selector--full-width {
display: none;
margin-top: $grid-unit-15;
}
@media screen and (max-width: $break-medium) {
@ -122,3 +125,22 @@
background-color: $gray-900;
}
}
.woocommerce-marketplace__category-navigation-button {
border: none;
position: absolute;
top: 0;
bottom: 0;
height: 100%;
width: 50px;
}
.woocommerce-marketplace__category-navigation-button--prev {
background: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
left: 0;
}
.woocommerce-marketplace__category-navigation-button--next {
background: linear-gradient(to left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
right: 0;
}

232
plugins/woocommerce-admin/client/marketplace/components/category-selector/category-selector.tsx
View File

@ -1,20 +1,21 @@
/**
* External dependencies
*/
import { useState, useEffect } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { useState, useEffect, useRef } from '@wordpress/element';
import { useQuery } from '@woocommerce/navigation';
import clsx from 'clsx';
import { Icon } from '@wordpress/components';
import { useDebounce } from '@wordpress/compose';
import { __ } from '@wordpress/i18n';
/**
* Internal dependencies
*/
import CategoryLink from './category-link';
import CategoryDropdown from './category-dropdown';
import { Category, CategoryAPIItem } from './types';
import { fetchCategories } from '../../utils/functions';
import './category-selector.scss';
import { ProductType } from '../product-list/types';
import CategoryDropdown from './category-dropdown';
import './category-selector.scss';
const ALL_CATEGORIES_SLUGS = {
[ ProductType.extension ]: '_all',
@ -29,32 +30,21 @@ interface CategorySelectorProps {
export default function CategorySelector(
props: CategorySelectorProps
): JSX.Element {
const [ visibleItems, setVisibleItems ] = useState< Category[] >( [] );
const [ dropdownItems, setDropdownItems ] = useState< Category[] >( [] );
const [ selected, setSelected ] = useState< Category >();
const [ isLoading, setIsLoading ] = useState( false );
const [ categoriesToShow, setCategoriesToShow ] = useState< Category[] >(
[]
);
const [ isOverflowing, setIsOverflowing ] = useState( false );
const [ scrollPosition, setScrollPosition ] = useState<
'start' | 'middle' | 'end'
>( 'start' );
const categorySelectorRef = useRef< HTMLUListElement >( null );
const selectedCategoryRef = useRef< HTMLLIElement >( null );
const query = useQuery();
useEffect( () => {
// If no category is selected, show All as selected
let categoryToSearch = ALL_CATEGORIES_SLUGS[ props.type ];
if ( query.category ) {
categoryToSearch = query.category;
}
const allCategories = visibleItems.concat( dropdownItems );
const selectedCategory = allCategories.find(
( category ) => category.slug === categoryToSearch
);
if ( selectedCategory ) {
setSelected( selectedCategory );
}
}, [ query.category, props.type, visibleItems, dropdownItems ] );
useEffect( () => {
setIsLoading( true );
@ -72,21 +62,125 @@ export default function CategorySelector(
return category.slug !== '_featured';
} );
// Split array into two from 7th item
const visibleCategoryItems = categories.slice( 0, 7 );
const dropdownCategoryItems = categories.slice( 7 );
setVisibleItems( visibleCategoryItems );
setDropdownItems( dropdownCategoryItems );
setCategoriesToShow( categories );
} )
.catch( () => {
setVisibleItems( [] );
setDropdownItems( [] );
setCategoriesToShow( [] );
} )
.finally( () => {
setIsLoading( false );
} );
}, [ props.type ] );
}, [ props.type, setCategoriesToShow ] );
useEffect( () => {
// If no category is selected, show All as selected
let categoryToSearch = ALL_CATEGORIES_SLUGS[ props.type ];
if ( query.category ) {
categoryToSearch = query.category;
}
const selectedCategory = categoriesToShow.find(
( category ) => category.slug === categoryToSearch
);
if ( selectedCategory ) {
setSelected( selectedCategory );
}
}, [ query.category, props.type, categoriesToShow ] );
useEffect( () => {
if ( selectedCategoryRef.current ) {
selectedCategoryRef.current.scrollIntoView( {
block: 'nearest',
inline: 'center',
} );
}
}, [ selected ] );
function checkOverflow() {
if (
categorySelectorRef.current &&
categorySelectorRef.current.parentElement?.scrollWidth
) {
const isContentOverflowing =
categorySelectorRef.current.scrollWidth >
categorySelectorRef.current.parentElement.scrollWidth;
setIsOverflowing( isContentOverflowing );
}
}
function checkScrollPosition() {
const ulElement = categorySelectorRef.current;
if ( ! ulElement ) {
return;
}
const { scrollLeft, scrollWidth, clientWidth } = ulElement;
if ( scrollLeft < 10 ) {
setScrollPosition( 'start' );
return;
}
if ( scrollLeft + clientWidth < scrollWidth ) {
setScrollPosition( 'middle' );
return;
}
if ( scrollLeft + clientWidth === scrollWidth ) {
setScrollPosition( 'end' );
}
}
const debouncedCheckOverflow = useDebounce( checkOverflow, 300 );
const debouncedScrollPosition = useDebounce( checkScrollPosition, 100 );
function scrollCategories( scrollAmount: number ) {
if ( categorySelectorRef.current ) {
categorySelectorRef.current.scrollTo( {
left: categorySelectorRef.current.scrollLeft + scrollAmount,
behavior: 'smooth',
} );
}
}
function scrollToNextCategories() {
scrollCategories( 200 );
}
function scrollToPrevCategories() {
scrollCategories( -200 );
}
useEffect( () => {
window.addEventListener( 'resize', debouncedCheckOverflow );
const ulElement = categorySelectorRef.current;
if ( ulElement ) {
ulElement.addEventListener( 'scroll', debouncedScrollPosition );
}
return () => {
window.removeEventListener( 'resize', debouncedCheckOverflow );
if ( ulElement ) {
ulElement.removeEventListener(
'scroll',
debouncedScrollPosition
);
}
};
}, [ debouncedCheckOverflow, debouncedScrollPosition ] );
useEffect( () => {
checkOverflow();
}, [ categoriesToShow ] );
function mobileCategoryDropdownLabel() {
const allCategoriesText = __( 'All Categories', 'woocommerce' );
@ -102,16 +196,6 @@ export default function CategorySelector(
return selected.label;
}
function isSelectedInDropdown() {
if ( ! selected ) {
return false;
}
return dropdownItems.find(
( category ) => category.slug === selected.slug
);
}
if ( isLoading ) {
return (
<>
@ -131,50 +215,62 @@ export default function CategorySelector(
return (
<>
<ul className="woocommerce-marketplace__category-selector">
{ visibleItems.map( ( category ) => (
<ul
className="woocommerce-marketplace__category-selector"
aria-label="Categories"
ref={ categorySelectorRef }
>
{ categoriesToShow.map( ( category ) => (
<li
className="woocommerce-marketplace__category-item"
key={ category.slug }
ref={
category.slug === selected?.slug
? selectedCategoryRef
: null
}
>
<CategoryLink
{ ...category }
selected={ category.slug === selected?.slug }
aria-current={ category.slug === selected?.slug }
/>
</li>
) ) }
<li className="woocommerce-marketplace__category-item">
{ dropdownItems.length > 0 && (
<CategoryDropdown
type={ props.type }
label={ __( 'More', 'woocommerce' ) }
categories={ dropdownItems }
buttonClassName={ clsx(
'woocommerce-marketplace__category-item-button',
{
'woocommerce-marketplace__category-item-button--selected':
isSelectedInDropdown(),
}
) }
contentClassName="woocommerce-marketplace__category-item-content"
arrowIconSize={ 20 }
selected={ selected }
/>
) }
</li>
</ul>
<div className="woocommerce-marketplace__category-selector--full-width">
<CategoryDropdown
type={ props.type }
label={ mobileCategoryDropdownLabel() }
categories={ visibleItems.concat( dropdownItems ) }
categories={ categoriesToShow }
buttonClassName="woocommerce-marketplace__category-dropdown-button"
className="woocommerce-marketplace__category-dropdown"
contentClassName="woocommerce-marketplace__category-dropdown-content"
selected={ selected }
/>
</div>
{ isOverflowing && (
<>
<button
onClick={ scrollToPrevCategories }
className="woocommerce-marketplace__category-navigation-button woocommerce-marketplace__category-navigation-button--prev"
hidden={ scrollPosition === 'start' }
aria-label="Scroll to previous categories"
tabIndex={ -1 }
>
<Icon icon="arrow-left-alt2" />
</button>
<button
onClick={ scrollToNextCategories }
className="woocommerce-marketplace__category-navigation-button woocommerce-marketplace__category-navigation-button--next"
hidden={ scrollPosition === 'end' }
aria-label="Scroll to next categories"
tabIndex={ -1 }
>
<Icon icon="arrow-right-alt2" />
</button>
</>
) }
</>
);
}

2
plugins/woocommerce-admin/client/marketplace/components/constants.ts
View File

@ -10,7 +10,7 @@ export const MARKETPLACE_SEARCH_API_PATH =
'/wp-json/wccom-extensions/1.0/search';
export const MARKETPLACE_CATEGORY_API_PATH =
'/wp-json/wccom-extensions/1.0/categories';
export const MARKETPLACE_ITEMS_PER_PAGE = 60;
export const MARKETPLACE_ITEMS_PER_PAGE = 60; // This should match the number of results returned by the API
export const MARKETPLACE_SEARCH_RESULTS_PER_PAGE = 8;
export const MARKETPLACE_CART_PATH = MARKETPLACE_HOST + '/cart/';
export const MARKETPLACE_RENEW_SUBSCRIPTON_PATH =

443
plugins/woocommerce-admin/client/marketplace/components/content/content.tsx
View File

@ -1,22 +1,29 @@
/**
* External dependencies
*/
import { useContext, useEffect, useState } from '@wordpress/element';
import {
useContext,
useEffect,
useState,
useCallback,
} from '@wordpress/element';
import { useQuery } from '@woocommerce/navigation';
import { speak } from '@wordpress/a11y';
import { __, sprintf } from '@wordpress/i18n';
/**
* Internal dependencies
*/
import './content.scss';
import { Product, ProductType, SearchResultType } from '../product-list/types';
import { Product, ProductType } from '../product-list/types';
import { getAdminSetting } from '~/utils/admin-settings';
import Discover from '../discover/discover';
import Products from '../products/products';
import SearchResults from '../search-results/search-results';
import MySubscriptions from '../my-subscriptions/my-subscriptions';
import { MarketplaceContext } from '../../contexts/marketplace-context';
import { fetchSearchResults } from '../../utils/functions';
import { fetchSearchResults, getProductType } from '../../utils/functions';
import { SubscriptionsContextProvider } from '../../contexts/subscriptions-context';
import { SearchResultsCountType } from '../../contexts/types';
import {
recordMarketplaceView,
recordLegacyTabView,
@ -26,149 +33,350 @@ import Promotions from '../promotions/promotions';
import ConnectNotice from '~/marketplace/components/connect-notice/connect-notice';
import PluginInstallNotice from '../woo-update-manager-plugin/plugin-install-notice';
import SubscriptionsExpiredExpiringNotice from '~/marketplace/components/my-subscriptions/subscriptions-expired-expiring-notice';
import LoadMoreButton from '../load-more-button/load-more-button';
export default function Content(): JSX.Element {
const marketplaceContextValue = useContext( MarketplaceContext );
const [ products, setProducts ] = useState< Product[] >( [] );
const { setIsLoading, selectedTab, setHasBusinessServices } =
marketplaceContextValue;
const [ allProducts, setAllProducts ] = useState< Product[] >( [] );
const [ filteredProducts, setFilteredProducts ] = useState< Product[] >(
[]
);
const [ currentPage, setCurrentPage ] = useState( 1 );
const [ totalPagesCategory, setTotalPagesCategory ] = useState( 1 );
const [ totalPagesExtensions, setTotalPagesExtensions ] = useState( 1 );
const [ totalPagesThemes, setTotalPagesThemes ] = useState( 1 );
const [ totalPagesBusinessServices, setTotalPagesBusinessServices ] =
useState( 1 );
const [ firstNewProductId, setFirstNewProductId ] = useState< number >( 0 );
const [ isLoadingMore, setIsLoadingMore ] = useState( false );
const {
isLoading,
setIsLoading,
selectedTab,
setHasBusinessServices,
setSearchResultsCount,
} = marketplaceContextValue;
const query = useQuery();
// On initial load of the in-app marketplace, fetch extensions, themes and business services
// and check if there are any business services available on WCCOM
useEffect( () => {
const categories = [ '', 'themes', 'business-services' ];
const abortControllers = categories.map( () => new AbortController() );
const searchCompleteAnnouncement = ( count: number ): void => {
speak(
sprintf(
// translators: %d is the number of products found.
__( '%d products found', 'woocommerce' ),
count
)
);
};
categories.forEach( ( category: string, index ) => {
const params = new URLSearchParams();
if ( category !== '' ) {
params.append( 'category', category );
}
const tagProductsWithType = (
products: Product[],
type: ProductType
): Product[] => {
return products.map( ( product ) => ( {
...product,
type,
} ) );
};
const wccomSettings = getAdminSetting( 'wccomHelper', false );
if ( wccomSettings.storeCountry ) {
params.append( 'country', wccomSettings.storeCountry );
}
fetchSearchResults( params, abortControllers[ index ].signal ).then(
( productList ) => {
if ( category === 'business-services' ) {
setHasBusinessServices( productList.length > 0 );
}
}
);
return () => {
abortControllers.forEach( ( controller ) => {
controller.abort();
} );
};
} );
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [] );
// Get the content for this screen
useEffect( () => {
const loadMoreProducts = useCallback( () => {
setIsLoadingMore( true );
const params = new URLSearchParams();
const abortController = new AbortController();
if (
query.tab === undefined ||
( query.tab &&
[ '', 'discover', 'my-subscriptions' ].includes( query.tab ) )
) {
return;
if ( query.category && query.category !== '_all' ) {
params.append( 'category', query.category );
}
setIsLoading( true );
setProducts( [] );
const params = new URLSearchParams();
if ( query.tab === 'themes' || query.tab === 'business-services' ) {
params.append( 'category', query.tab );
}
if ( query.term ) {
params.append( 'term', query.term );
}
if ( query.category ) {
params.append(
'category',
query.category === '_all' ? '' : query.category
);
} else if ( query?.tab === 'themes' ) {
params.append( 'category', 'themes' );
} else if ( query?.tab === 'business-services' ) {
params.append( 'category', 'business-services' );
} else if ( query?.tab === 'search' ) {
params.append( 'category', 'extensions-themes-business-services' );
}
const wccomSettings = getAdminSetting( 'wccomHelper', false );
if ( wccomSettings.storeCountry ) {
params.append( 'country', wccomSettings.storeCountry );
}
params.append( 'page', ( currentPage + 1 ).toString() );
fetchSearchResults( params, abortController.signal )
.then( ( productList ) => {
setProducts( productList );
setAllProducts( ( prevProducts ) => {
const flattenedPrevProducts = Array.isArray(
prevProducts[ 0 ]
)
? prevProducts.flat()
: prevProducts;
const newProducts = productList.products.filter(
( newProduct ) =>
! flattenedPrevProducts.some(
( prevProduct ) =>
prevProduct.id === newProduct.id
)
);
if ( newProducts.length > 0 ) {
setFirstNewProductId( newProducts[ 0 ].id ?? 0 );
}
const combinedProducts = [
...flattenedPrevProducts,
...newProducts,
];
return combinedProducts;
} );
speak( __( 'More products loaded', 'woocommerce' ) );
setCurrentPage( ( prevPage ) => prevPage + 1 );
setIsLoadingMore( false );
} )
.catch( () => {
setProducts( [] );
speak( __( 'Error loading more products', 'woocommerce' ) );
} )
.finally( () => {
// we are recording both the new and legacy events here for now
// they're separate methods to make it easier to remove the legacy one later
const marketplaceViewProps = {
view: query?.tab,
search_term: query?.term,
product_type: query?.section,
category: query?.category,
};
recordMarketplaceView( marketplaceViewProps );
recordLegacyTabView( marketplaceViewProps );
setIsLoading( false );
setIsLoadingMore( false );
} );
return () => {
abortController.abort();
};
}, [
currentPage,
query.category,
query.term,
query.tab,
setIsLoadingMore,
] );
useEffect( () => {
// if it's a paginated request, don't use this effect
if ( currentPage > 1 ) {
return;
}
const categories: Array< {
category: keyof SearchResultsCountType;
type: ProductType;
} > = [
{ category: 'extensions', type: ProductType.extension },
{ category: 'themes', type: ProductType.theme },
{
category: 'business-services',
type: ProductType.businessService,
},
];
const abortControllers = categories.map( () => new AbortController() );
setIsLoading( true );
setAllProducts( [] );
// If query.category is present and not '_all', only fetch that category
if ( query.category && query.category !== '_all' ) {
const params = new URLSearchParams();
params.append( 'category', query.category );
if ( query.term ) {
params.append( 'term', query.term );
}
const wccomSettings = getAdminSetting( 'wccomHelper', false );
if ( wccomSettings.storeCountry ) {
params.append( 'country', wccomSettings.storeCountry );
}
fetchSearchResults( params, abortControllers[ 0 ].signal )
.then( ( productList ) => {
setAllProducts( productList.products );
setTotalPagesCategory( productList.totalPages );
setSearchResultsCount( {
[ query.tab ]: productList.totalProducts,
} );
searchCompleteAnnouncement( productList.totalProducts );
} )
.catch( () => {
setAllProducts( [] );
} )
.finally( () => {
setIsLoading( false );
} );
} else {
// Fetch all tabs when query.term or query.category changes
Promise.all(
categories.map( ( { category, type }, index ) => {
const params = new URLSearchParams();
if ( category !== 'extensions' ) {
params.append( 'category', category );
}
if ( query.term ) {
params.append( 'term', query.term );
}
const wccomSettings = getAdminSetting(
'wccomHelper',
false
);
if ( wccomSettings.storeCountry ) {
params.append( 'country', wccomSettings.storeCountry );
}
return fetchSearchResults(
params,
abortControllers[ index ].signal
).then( ( productList ) => {
const typedProducts = tagProductsWithType(
productList.products,
type
);
if ( category === 'business-services' ) {
setHasBusinessServices( typedProducts.length > 0 );
}
return {
products: typedProducts,
totalPages: productList.totalPages,
totalProducts: productList.totalProducts,
type,
};
} );
} )
)
.then( ( results ) => {
const combinedProducts = results.flatMap(
( result ) => result.products
);
setAllProducts( combinedProducts );
setSearchResultsCount( {
extensions: results.find(
( i ) => i.type === 'extension'
)?.totalProducts,
themes: results.find( ( i ) => i.type === 'theme' )
?.totalProducts,
'business-services': results.find(
( i ) => i.type === 'business-service'
)?.totalProducts,
} );
results.forEach( ( result ) => {
switch ( result.type ) {
case ProductType.extension:
setTotalPagesExtensions( result.totalPages );
break;
case ProductType.theme:
setTotalPagesThemes( result.totalPages );
break;
case ProductType.businessService:
setTotalPagesBusinessServices(
result.totalPages
);
break;
}
} );
searchCompleteAnnouncement(
results.reduce( ( acc, curr ) => {
return acc + curr.totalProducts;
}, 0 )
);
} )
.catch( () => {
setAllProducts( [] );
} )
.finally( () => {
setIsLoading( false );
} );
}
return () => {
abortControllers.forEach( ( controller ) => {
controller.abort();
} );
};
}, [
query.tab,
query.term,
query.category,
query?.tab,
setHasBusinessServices,
setIsLoading,
query?.section,
setSearchResultsCount,
currentPage,
] );
// Filter the products based on the selected tab
useEffect( () => {
let filtered: Product[] | null;
switch ( selectedTab ) {
case 'extensions':
filtered = allProducts.filter(
( p ) => p.type === ProductType.extension
);
break;
case 'themes':
filtered = allProducts.filter(
( p ) => p.type === ProductType.theme
);
break;
case 'business-services':
filtered = allProducts.filter(
( p ) => p.type === ProductType.businessService
);
break;
default:
filtered = [];
}
setFilteredProducts( filtered );
}, [ selectedTab, allProducts ] );
// Record tab view events when the query changes
useEffect( () => {
const marketplaceViewProps = {
view: query?.tab,
search_term: query?.term,
product_type: query?.section,
category: query?.category,
};
recordMarketplaceView( marketplaceViewProps );
recordLegacyTabView( marketplaceViewProps );
}, [ query?.tab, query?.term, query?.section, query?.category ] );
// Reset current page when tab, term, or category changes
useEffect( () => {
setCurrentPage( 1 );
setFirstNewProductId( 0 );
}, [ selectedTab, query?.category, query?.term ] );
// Maintain product focus for accessibility
useEffect( () => {
if ( firstNewProductId ) {
setTimeout( () => {
const firstNewProduct = document.getElementById(
`product-${ firstNewProductId }`
);
if ( firstNewProduct ) {
firstNewProduct.focus();
}
}, 0 );
}
}, [ firstNewProductId ] );
const renderContent = (): JSX.Element => {
switch ( selectedTab ) {
case 'extensions':
return (
<Products
products={ products }
categorySelector={ true }
type={ ProductType.extension }
/>
);
case 'themes':
return (
<Products
products={ products }
categorySelector={ true }
type={ ProductType.theme }
/>
);
case 'business-services':
return (
<Products
products={ products }
products={ filteredProducts }
categorySelector={ true }
type={ ProductType.businessService }
/>
);
case 'search':
return (
<SearchResults
products={ products }
type={ SearchResultType.all }
type={ getProductType( selectedTab ) }
/>
);
case 'discover':
@ -184,10 +392,29 @@ export default function Content(): JSX.Element {
}
};
const shouldShowLoadMoreButton = () => {
if ( ! query.category || query.category === '_all' ) {
// Check against total pages for the selected tab
switch ( selectedTab ) {
case 'extensions':
return currentPage < totalPagesExtensions;
case 'themes':
return currentPage < totalPagesThemes;
case 'business-services':
return currentPage < totalPagesBusinessServices;
default:
return false;
}
} else {
// Check against totalPagesCategory for specific category
return currentPage < totalPagesCategory;
}
};
return (
<div className="woocommerce-marketplace__content">
<Promotions />
<InstallNewProductModal products={ products } />
<InstallNewProductModal products={ filteredProducts } />
{ selectedTab !== 'business-services' &&
selectedTab !== 'my-subscriptions' && <ConnectNotice /> }
{ selectedTab !== 'business-services' && <PluginInstallNotice /> }
@ -197,11 +424,15 @@ export default function Content(): JSX.Element {
{ selectedTab !== 'business-services' && (
<SubscriptionsExpiredExpiringNotice type="expiring" />
) }
{ selectedTab !== 'business-services' && (
<SubscriptionsExpiredExpiringNotice type="missing" />
) }
{ renderContent() }
{ ! isLoading && shouldShowLoadMoreButton() && (
<LoadMoreButton
onLoadMore={ loadMoreProducts }
isBusy={ isLoadingMore }
disabled={ isLoadingMore }
/>
) }
</div>
);
}

15
plugins/woocommerce-admin/client/marketplace/components/header/header.scss
View File

@ -5,6 +5,7 @@
background: #fff;
border-bottom: 1px solid $gutenberg-gray-300;
display: grid;
gap: $medium-gap;
grid-template: "mktpl-title mktpl-search mktpl-meta" 60px
"mktpl-tabs mktpl-tabs mktpl-tabs" auto / 1fr 320px 36px;
padding: 0 $content-spacing-large;
@ -73,17 +74,3 @@
padding: 0 $content-spacing-small;
}
}
.woocommerce-marketplace__search {
margin-right: $medium-gap;
margin-top: 10px;
input[type="search"] {
all: unset;
flex-grow: 1;
}
@media (width <= $breakpoint-medium) {
margin: $content-spacing-small;
}
}

37
plugins/woocommerce-admin/client/marketplace/components/load-more-button/load-more-button.tsx Normal file
View File

@ -0,0 +1,37 @@
/**
* External dependencies
*/
import { Button } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { speak } from '@wordpress/a11y';
import { queueRecordEvent } from '@woocommerce/tracks';
interface LoadMoreProps {
onLoadMore: () => void;
isBusy: boolean;
disabled: boolean;
}
export default function LoadMoreButton( props: LoadMoreProps ) {
const { onLoadMore, isBusy, disabled } = props;
function handleClick() {
queueRecordEvent( 'marketplace_load_more_button_clicked', {} );
onLoadMore();
}
if ( isBusy ) {
speak( __( 'Loading more products', 'woocommerce' ) );
}
return (
<Button
className="woocommerce-marketplace__load-more"
variant={ 'secondary' }
onClick={ handleClick }
isBusy={ isBusy }
disabled={ disabled }
>
{ __( 'Load more', 'woocommerce' ) }
</Button>
);
}

2
plugins/woocommerce-admin/client/marketplace/components/product-card/product-card.tsx
View File

@ -191,6 +191,8 @@ function ProductCard( props: ProductCardProps ): JSX.Element {
return (
<Card
className={ classNames }
id={ `product-${ product.id }` }
tabIndex={ -1 }
aria-hidden={ isLoading }
style={ inlineCss() }
>

7
plugins/woocommerce-admin/client/marketplace/components/product-list-content/no-results.tsx
View File

@ -3,7 +3,6 @@
*/
import { __ } from '@wordpress/i18n';
import { useEffect, useState } from '@wordpress/element';
import { useQuery } from '@woocommerce/navigation';
/**
* Internal dependencies
@ -22,8 +21,6 @@ export default function NoResults( props: {
} ): JSX.Element {
const [ productGroups, setProductGroups ] = useState< ProductGroup[] >();
const [ isLoading, setIsLoading ] = useState( false );
const query = useQuery();
const showCategorySelector = query.tab === 'search' && query.section;
const productGroupsForSearchType = {
[ SearchResultType.all ]: [
'most-popular',
@ -123,10 +120,6 @@ export default function NoResults( props: {
}
function categorySelector() {
if ( ! showCategorySelector ) {
return <></>;
}
if ( props.type === SearchResultType.all ) {
return <></>;
}

2
plugins/woocommerce-admin/client/marketplace/components/product-list/types.ts
View File

@ -1,5 +1,7 @@
export type SearchAPIJSONType = {
products: Array< SearchAPIProductType >;
total_pages: number;
total_products: number;
};
export type SearchAPIProductType = {

19
plugins/woocommerce-admin/client/marketplace/components/products/products.scss
View File

@ -9,10 +9,21 @@
}
}
.woocommerce-marketplace__sub-header {
display: flex;
.woocommerce-marketplace__customize-your-store-button {
margin: 16px 0 6px auto;
}
align-items: center;
justify-content: space-between;
gap: 32px;
}
.woocommerce-marketplace__sub-header__categories {
flex: 1;
overflow-x: auto;
position: relative;
}
.woocommerce-marketplace__customize-your-store-button {
flex-shrink: 0;
}

71
plugins/woocommerce-admin/client/marketplace/components/products/products.tsx
View File

@ -1,7 +1,7 @@
/**
* External dependencies
*/
import { __, _n, sprintf } from '@wordpress/i18n';
import { __ } from '@wordpress/i18n';
import {
createInterpolateElement,
useContext,
@ -24,7 +24,6 @@ import ProductListContent from '../product-list-content/product-list-content';
import ProductLoader from '../product-loader/product-loader';
import NoResults from '../product-list-content/no-results';
import { Product, ProductType, SearchResultType } from '../product-list/types';
import { MARKETPLACE_ITEMS_PER_PAGE } from '../constants';
import { ADMIN_URL } from '~/utils/admin-settings';
import { ThemeSwitchWarningModal } from '~/customize-store/intro/warning-modals';
@ -54,12 +53,10 @@ const LABELS = {
export default function Products( props: ProductsProps ) {
const marketplaceContextValue = useContext( MarketplaceContext );
const { isLoading, selectedTab } = marketplaceContextValue;
const { isLoading } = marketplaceContextValue;
const label = LABELS[ props.type ].label;
const singularLabel = LABELS[ props.type ].singularLabel;
const query = useQuery();
const category = query?.category;
const perPage = props.perPage ?? MARKETPLACE_ITEMS_PER_PAGE;
interface Theme {
stylesheet?: string;
}
@ -94,42 +91,30 @@ export default function Products( props: ProductsProps ) {
}
// Store the total number of products before we slice it later.
const productTotalCount = props.products?.length ?? 0;
const products = props.products?.slice( 0, perPage ) ?? [];
let title = sprintf(
// translators: %s: plural item type (e.g. extensions, themes)
__( '0 %s found', 'woocommerce' ),
label
);
if ( productTotalCount > 0 ) {
title = sprintf(
// translators: %1$s: number of items, %2$s: singular item label, %3$s: plural item label
_n( '%1$s %2$s', '%1$s %3$s', productTotalCount, 'woocommerce' ),
productTotalCount,
singularLabel,
label
);
}
const products = props.products ?? [];
const labelForClassName =
label === 'business services' ? 'business-services' : label;
const baseContainerClass = 'woocommerce-marketplace__search-';
const baseProductListTitleClass = 'product-list-title--';
const containerClassName = clsx( baseContainerClass + labelForClassName );
const productListTitleClassName = clsx(
'woocommerce-marketplace__product-list-title',
baseContainerClass + baseProductListTitleClass + labelForClassName,
{ 'is-loading': isLoading }
);
const viewAllButonClassName = clsx(
'woocommerce-marketplace__view-all-button',
baseContainerClass + 'button-' + labelForClassName
);
if ( isLoading ) {
return (
<>
{ props.categorySelector && (
<CategorySelector type={ props.type } />
) }
<ProductLoader hasTitle={ false } type={ props.type } />
</>
);
}
if ( products.length === 0 ) {
let type = SearchResultType.all;
@ -154,28 +139,14 @@ export default function Products( props: ProductsProps ) {
: ''
);
if ( isLoading ) {
return (
<>
{ props.categorySelector && (
<CategorySelector type={ props.type } />
) }
<ProductLoader hasTitle={ false } type={ props.type } />
</>
);
}
return (
<div className={ containerClassName }>
{ selectedTab === 'search' && (
<h2 className={ productListTitleClassName }>
{ isLoading ? ' ' : title }
</h2>
) }
<div className="woocommerce-marketplace__sub-header">
{ props.categorySelector && (
<CategorySelector type={ props.type } />
) }
<nav className="woocommerce-marketplace__sub-header">
<div className="woocommerce-marketplace__sub-header__categories">
{ props.categorySelector && (
<CategorySelector type={ props.type } />
) }
</div>
{ props.type === 'theme' && (
<Button
className="woocommerce-marketplace__customize-your-store-button"
@ -192,7 +163,7 @@ export default function Products( props: ProductsProps ) {
} }
/>
) }
</div>
</nav>
{ isModalOpen && (
<ThemeSwitchWarningModal
setIsModalOpen={ setIsModalOpen }

19
plugins/woocommerce-admin/client/marketplace/components/search-results/search-results.scss
View File

@ -1,19 +0,0 @@
@import "../../stylesheets/_variables.scss";
.woocommerce-marketplace__search-results {
.woocommerce-marketplace {
&__view-all-button {
margin-top: 24px;
}
}
.woocommerce-marketplace__product-list-content--collapsed {
.woocommerce-marketplace__product-card {
&:nth-child(n+7) {
display: none;
@media screen and (min-width: $breakpoint-huge) {
display: block;
}
}
}
}
}

193
plugins/woocommerce-admin/client/marketplace/components/search-results/search-results.tsx
View File

@ -1,193 +0,0 @@
/**
* External dependencies
*/
import { useQuery } from '@woocommerce/navigation';
import { useContext } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
/**
* Internal dependencies
*/
import './search-results.scss';
import { Product, ProductType, SearchResultType } from '../product-list/types';
import Products from '../products/products';
import NoResults from '../product-list-content/no-results';
import { MarketplaceContext } from '../../contexts/marketplace-context';
import {
MARKETPLACE_ITEMS_PER_PAGE,
MARKETPLACE_SEARCH_RESULTS_PER_PAGE,
} from '../../../marketplace/components/constants';
export interface SearchResultProps {
products: Product[];
type: SearchResultType;
}
export default function SearchResults( props: SearchResultProps ): JSX.Element {
const extensionList = props.products.filter(
( product ) => product.type === ProductType.extension
);
const themeList = props.products.filter(
( product ) => product.type === ProductType.theme
);
const businessServiceList = props.products.filter(
( product ) => product.type === ProductType.businessService
);
const hasExtensions = extensionList.length > 0;
const hasThemes = themeList.length > 0;
const hasBusinessServices = businessServiceList.length > 0;
const hasOnlyExtensions =
hasExtensions && ! hasThemes && ! hasBusinessServices;
const hasOnlyThemes = hasThemes && ! hasExtensions && ! hasBusinessServices;
const hasOnlyBusinessServices =
hasBusinessServices && ! hasExtensions && ! hasThemes;
const marketplaceContextValue = useContext( MarketplaceContext );
const { isLoading, hasBusinessServices: canShowBusinessServices } =
marketplaceContextValue;
const query = useQuery();
const showCategorySelector = query.section ? true : false;
const searchTerm = query.term ? query.term : '';
type Overrides = {
categorySelector?: boolean;
showAllButton?: boolean;
perPage?: number;
};
function productsComponent(
products: Product[],
type: ProductType,
overrides: Overrides = {}
) {
return (
<Products
products={ products }
type={ type }
categorySelector={
overrides.categorySelector ?? showCategorySelector
}
searchTerm={ searchTerm }
showAllButton={ overrides.showAllButton ?? true }
perPage={ overrides.perPage ?? MARKETPLACE_ITEMS_PER_PAGE }
/>
);
}
function extensionsComponent( overrides: Overrides = {} ) {
return productsComponent(
extensionList,
ProductType.extension,
overrides
);
}
function themesComponent( overrides: Overrides = {} ) {
return productsComponent( themeList, ProductType.theme, overrides );
}
function businessServicesComponent( overrides: Overrides = {} ) {
return productsComponent(
businessServiceList,
ProductType.businessService,
overrides
);
}
const content = () => {
if ( query?.section === SearchResultType.extension ) {
return extensionsComponent( { showAllButton: false } );
}
if ( query?.section === SearchResultType.theme ) {
return themesComponent( { showAllButton: false } );
}
if ( query?.section === SearchResultType.businessService ) {
return businessServicesComponent( { showAllButton: false } );
}
// Components can handle their isLoading state. So we can put all three on the page.
if ( isLoading ) {
return (
<>
{ extensionsComponent() }
{ themesComponent() }
{ businessServicesComponent() }
</>
);
}
// If we did finish loading items, and there are no results, show the no results component.
if (
! isLoading &&
! hasExtensions &&
! hasThemes &&
! hasBusinessServices
) {
return (
<NoResults
type={ SearchResultType.all }
showHeading={ true }
heading={
canShowBusinessServices
? __(
'No extensions, themes or business services found…',
'woocommerce'
)
: __(
'No extensions or themes found…',
'woocommerce'
)
}
/>
);
}
// If we're done loading, we can put these components on the page.
return (
<>
{ hasExtensions
? extensionsComponent( {
categorySelector: hasOnlyExtensions || undefined,
showAllButton: hasOnlyExtensions
? false
: undefined,
perPage: hasOnlyExtensions
? MARKETPLACE_ITEMS_PER_PAGE
: MARKETPLACE_SEARCH_RESULTS_PER_PAGE,
} )
: null }
{ hasThemes
? themesComponent( {
categorySelector: hasOnlyThemes || undefined,
showAllButton: hasOnlyThemes ? false : undefined,
perPage: hasOnlyThemes
? MARKETPLACE_ITEMS_PER_PAGE
: MARKETPLACE_SEARCH_RESULTS_PER_PAGE,
} )
: null }
{ hasBusinessServices
? businessServicesComponent( {
categorySelector:
hasOnlyBusinessServices || undefined,
showAllButton: hasOnlyBusinessServices
? false
: undefined,
perPage: hasOnlyBusinessServices
? MARKETPLACE_ITEMS_PER_PAGE
: MARKETPLACE_SEARCH_RESULTS_PER_PAGE,
} )
: null }
</>
);
};
return (
<div className="woocommerce-marketplace__search-results">
{ content() }
</div>
);
}

28
plugins/woocommerce-admin/client/marketplace/components/search/search.scss
View File

@ -2,29 +2,15 @@
.woocommerce-marketplace__search {
grid-area: mktpl-search;
background: $gutenberg-gray-100;
border: 1.5px solid transparent;
border-radius: 2px;
display: flex;
height: 40px;
padding: 4px 8px 4px 12px;
input[type="search"] {
all: unset;
flex-grow: 1;
}
&:focus-within {
background: #fff;
border-color: var(--wp-admin-theme-color, #3858e9);
}
margin-top: 15px;
width: 320px;
@media (width <= $breakpoint-medium) {
margin: $grid-unit-20 $grid-unit-20 $grid-unit-10 $grid-unit-20;
width: calc(100% - $grid-unit-20 * 2);
.components-input-control__input {
font-size: 13px !important;
}
}
}
.woocommerce-marketplace__search-button {
all: unset;
cursor: pointer;
}

83
plugins/woocommerce-admin/client/marketplace/components/search/search.tsx
View File

@ -2,26 +2,20 @@
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import { Icon, search } from '@wordpress/icons';
import { useContext, useEffect, useState } from '@wordpress/element';
import { useEffect, useState } from '@wordpress/element';
import { navigateTo, getNewPath, useQuery } from '@woocommerce/navigation';
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
// eslint-disable-next-line @woocommerce/dependency-group
import { SearchControl } from '@wordpress/components';
// The @ts-ignore is needed because the SearchControl types are not exported from the @wordpress/components package,
// even though the component itself is. This is likely due to an older version of the package being used.
/**
* Internal dependencies
*/
import './search.scss';
import { MARKETPLACE_PATH } from '../constants';
import { MarketplaceContext } from '../../contexts/marketplace-context';
const searchPlaceholder = __(
'Search for extensions, themes, and business services',
'woocommerce'
);
const searchPlaceholderNoBusinessServices = __(
'Search for extensions and themes',
'woocommerce'
);
/**
* Search component.
@ -30,14 +24,10 @@ const searchPlaceholderNoBusinessServices = __(
*/
function Search(): JSX.Element {
const [ searchTerm, setSearchTerm ] = useState( '' );
const { hasBusinessServices } = useContext( MarketplaceContext );
const searchPlaceholder = __( 'Search Marketplace', 'woocommerce' );
const query = useQuery();
const placeholder = hasBusinessServices
? searchPlaceholder
: searchPlaceholderNoBusinessServices;
useEffect( () => {
if ( query.term ) {
setSearchTerm( query.term );
@ -46,21 +36,16 @@ function Search(): JSX.Element {
}
}, [ query.term ] );
useEffect( () => {
if ( query.tab !== 'search' ) {
setSearchTerm( '' );
}
}, [ query.tab ] );
const runSearch = () => {
const term = searchTerm.trim();
const newQuery: { term?: string; tab?: string } = query;
const newQuery: { term?: string; tab?: string } = {};
if ( term !== '' ) {
newQuery.term = term;
newQuery.tab = 'search';
// If we're on 'Discover' or 'My subscriptions' when a search is initiated, move to the extensions tab
if ( ! newQuery.tab || newQuery.tab === 'my-subscriptions' ) {
newQuery.tab = 'extensions';
}
newQuery.term = searchTerm.trim();
// When the search term changes, we reset the query string on purpose.
navigateTo( {
url: getNewPath( newQuery, MARKETPLACE_PATH, {} ),
@ -69,12 +54,6 @@ function Search(): JSX.Element {
return [];
};
const handleInputChange = (
event: React.ChangeEvent< HTMLInputElement >
) => {
setSearchTerm( event.target.value );
};
const handleKeyUp = ( event: { key: string } ) => {
if ( event.key === 'Enter' ) {
runSearch();
@ -86,32 +65,14 @@ function Search(): JSX.Element {
};
return (
<div className="woocommerce-marketplace__search">
<label
className="screen-reader-text"
htmlFor="woocommerce-marketplace-search-query"
>
{ placeholder }
</label>
<input
id="woocommerce-marketplace-search-query"
value={ searchTerm }
className="woocommerce-marketplace__search-input"
type="search"
name="woocommerce-marketplace-search-query"
placeholder={ placeholder }
onChange={ handleInputChange }
onKeyUp={ handleKeyUp }
/>
<button
id="woocommerce-marketplace-search-button"
className="woocommerce-marketplace__search-button"
aria-label={ __( 'Search', 'woocommerce' ) }
onClick={ runSearch }
>
<Icon icon={ search } size={ 32 } />
</button>
</div>
<SearchControl
label={ searchPlaceholder }
placeholder={ searchPlaceholder }
value={ searchTerm }
onChange={ setSearchTerm }
onKeyUp={ handleKeyUp }
className="woocommerce-marketplace__search"
/>
);
}

12
plugins/woocommerce-admin/client/marketplace/components/tabs/tabs.scss
View File

@ -45,6 +45,18 @@
text-align: center;
z-index: 26;
}
&__update-count-extensions,
&__update-count-themes,
&__update-count-business-services {
background-color: $gutenberg-gray-300;
color: $gutenberg-gray-700;
&.is-active {
background-color: #000;
color: #fff;
}
}
}
@media (width <= $breakpoint-medium) {

130
plugins/woocommerce-admin/client/marketplace/components/tabs/tabs.tsx
View File

@ -2,7 +2,7 @@
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import { useContext, useEffect, useState } from '@wordpress/element';
import { useContext, useEffect, useState, useMemo } from '@wordpress/element';
import { Button } from '@wordpress/components';
import clsx from 'clsx';
import { getNewPath, navigateTo, useQuery } from '@woocommerce/navigation';
@ -35,63 +35,26 @@ interface Tabs {
const wccomSettings = getAdminSetting( 'wccomHelper', {} );
const wooUpdateCount = wccomSettings?.wooUpdateCount ?? 0;
const tabs: Tabs = {
search: {
name: 'search',
title: __( 'Search results', 'woocommerce' ),
showUpdateCount: false,
updateCount: 0,
},
discover: {
name: 'discover',
title: __( 'Discover', 'woocommerce' ),
showUpdateCount: false,
updateCount: 0,
},
extensions: {
name: 'extensions',
title: __( 'Extensions', 'woocommerce' ),
showUpdateCount: false,
updateCount: 0,
},
themes: {
name: 'themes',
title: __( 'Themes', 'woocommerce' ),
showUpdateCount: false,
updateCount: 0,
},
'business-services': {
name: 'business-services',
title: __( 'Business services', 'woocommerce' ),
showUpdateCount: false,
updateCount: 0,
},
'my-subscriptions': {
name: 'my-subscriptions',
title: __( 'My subscriptions', 'woocommerce' ),
showUpdateCount: true,
updateCount: wooUpdateCount,
},
};
const setUrlTabParam = ( tabKey: string ) => {
const setUrlTabParam = ( tabKey: string, query: Record< string, string > ) => {
const term = query.term ? { term: query.term.trim() } : {};
navigateTo( {
url: getNewPath(
{ tab: tabKey === DEFAULT_TAB_KEY ? undefined : tabKey },
MARKETPLACE_PATH,
{}
term
),
} );
};
const getVisibleTabs = ( selectedTab: string, hasBusinessServices = false ) => {
const getVisibleTabs = (
selectedTab: string,
hasBusinessServices = false,
tabs: Tabs
) => {
if ( selectedTab === '' ) {
return tabs;
}
const currentVisibleTabs = { ...tabs };
if ( selectedTab !== 'search' ) {
delete currentVisibleTabs.search;
}
if ( ! hasBusinessServices ) {
delete currentVisibleTabs[ 'business-services' ];
}
@ -101,7 +64,9 @@ const getVisibleTabs = ( selectedTab: string, hasBusinessServices = false ) => {
const renderTabs = (
marketplaceContextValue: MarketplaceContextType,
visibleTabs: Tabs
visibleTabs: Tabs,
tabs: Tabs,
query: Record< string, string >
) => {
const { selectedTab, setSelectedTab } = marketplaceContextValue;
@ -110,7 +75,7 @@ const renderTabs = (
return;
}
setSelectedTab( tabKey );
setUrlTabParam( tabKey );
setUrlTabParam( tabKey, query );
};
const tabContent = [];
@ -143,7 +108,15 @@ const renderTabs = (
{ tabs[ tabKey ]?.title }
{ tabs[ tabKey ]?.showUpdateCount &&
tabs[ tabKey ]?.updateCount > 0 && (
<span className="woocommerce-marketplace__update-count">
<span
className={ clsx(
'woocommerce-marketplace__update-count',
`woocommerce-marketplace__update-count-${ tabKey }`,
{
'is-active': tabKey === selectedTab,
}
) }
>
<span> { tabs[ tabKey ]?.updateCount } </span>
</span>
) }
@ -157,23 +130,70 @@ const renderTabs = (
const Tabs = ( props: TabsProps ): JSX.Element => {
const { additionalClassNames } = props;
const marketplaceContextValue = useContext( MarketplaceContext );
const { selectedTab, setSelectedTab, hasBusinessServices } =
const { selectedTab, isLoading, setSelectedTab, hasBusinessServices } =
marketplaceContextValue;
const [ visibleTabs, setVisibleTabs ] = useState( getVisibleTabs( '' ) );
const { searchResultsCount } = marketplaceContextValue;
const query: Record< string, string > = useQuery();
const tabs: Tabs = useMemo(
() => ( {
discover: {
name: 'discover',
title: __( 'Discover', 'woocommerce' ),
showUpdateCount: false,
updateCount: 0,
},
extensions: {
name: 'extensions',
title: __( 'Extensions', 'woocommerce' ),
showUpdateCount: !! query.term && ! isLoading,
updateCount: searchResultsCount.extensions,
},
themes: {
name: 'themes',
title: __( 'Themes', 'woocommerce' ),
showUpdateCount: !! query.term && ! isLoading,
updateCount: searchResultsCount.themes,
},
'business-services': {
name: 'business-services',
title: __( 'Business services', 'woocommerce' ),
showUpdateCount: !! query.term && ! isLoading,
updateCount: searchResultsCount[ 'business-services' ],
},
'my-subscriptions': {
name: 'my-subscriptions',
title: __( 'My subscriptions', 'woocommerce' ),
showUpdateCount: true,
updateCount: wooUpdateCount,
},
} ),
[ query, isLoading, searchResultsCount ]
);
const [ visibleTabs, setVisibleTabs ] = useState(
getVisibleTabs( '', false, tabs )
);
useEffect( () => {
if ( query?.tab && tabs[ query.tab ] ) {
setSelectedTab( query.tab );
} else if ( Object.keys( query ).length > 0 ) {
setSelectedTab( DEFAULT_TAB_KEY );
}
}, [ query, setSelectedTab ] );
}, [ query, setSelectedTab, tabs ] );
useEffect( () => {
setVisibleTabs( getVisibleTabs( selectedTab, hasBusinessServices ) );
}, [ selectedTab, hasBusinessServices ] );
setVisibleTabs(
getVisibleTabs( selectedTab, hasBusinessServices, tabs )
);
if ( selectedTab === 'business-services' && ! hasBusinessServices ) {
setUrlTabParam( 'extensions', query );
}
}, [ selectedTab, hasBusinessServices, query, tabs ] );
return (
<nav
className={ clsx(
@ -181,7 +201,7 @@ const Tabs = ( props: TabsProps ): JSX.Element => {
additionalClassNames || []
) }
>
{ renderTabs( marketplaceContextValue, visibleTabs ) }
{ renderTabs( marketplaceContextValue, visibleTabs, tabs, query ) }
</nav>
);
};

33
plugins/woocommerce-admin/client/marketplace/contexts/marketplace-context.tsx
View File

@ -1,12 +1,17 @@
/**
* External dependencies
*/
import { useState, useEffect, createContext } from '@wordpress/element';
import {
useState,
useEffect,
useCallback,
createContext,
} from '@wordpress/element';
/**
* Internal dependencies
*/
import { MarketplaceContextType } from './types';
import { SearchResultsCountType, MarketplaceContextType } from './types';
import { getAdminSetting } from '../../utils/admin-settings';
export const MarketplaceContext = createContext< MarketplaceContextType >( {
@ -18,6 +23,12 @@ export const MarketplaceContext = createContext< MarketplaceContextType >( {
addInstalledProduct: () => {},
hasBusinessServices: false,
setHasBusinessServices: () => {},
searchResultsCount: {
extensions: 0,
themes: 0,
'business-services': 0,
},
setSearchResultsCount: () => {},
} );
export function MarketplaceContextProvider( props: {
@ -29,6 +40,22 @@ export function MarketplaceContextProvider( props: {
[]
);
const [ hasBusinessServices, setHasBusinessServices ] = useState( false );
const [ searchResultsCount, setSearchResultsCountState ] =
useState< SearchResultsCountType >( {
extensions: 0,
themes: 0,
'business-services': 0,
} );
const setSearchResultsCount = useCallback(
( updatedCounts: Partial< SearchResultsCountType > ) => {
setSearchResultsCountState( ( prev ) => ( {
...prev,
...updatedCounts,
} ) );
},
[]
);
/**
* Knowing installed products will help us to determine which products
@ -59,6 +86,8 @@ export function MarketplaceContextProvider( props: {
addInstalledProduct,
hasBusinessServices,
setHasBusinessServices,
searchResultsCount,
setSearchResultsCount,
};
return (

10
plugins/woocommerce-admin/client/marketplace/contexts/types.ts
View File

@ -8,6 +8,12 @@ import { Options } from '@wordpress/notices';
*/
import { Subscription } from '../components/my-subscriptions/types';
export interface SearchResultsCountType {
extensions: number;
themes: number;
'business-services': number;
}
export type MarketplaceContextType = {
isLoading: boolean;
setIsLoading: ( isLoading: boolean ) => void;
@ -17,6 +23,10 @@ export type MarketplaceContextType = {
addInstalledProduct: ( slug: string ) => void;
hasBusinessServices: boolean;
setHasBusinessServices: ( hasBusinessServices: boolean ) => void;
searchResultsCount: SearchResultsCountType;
setSearchResultsCount: (
updatedCounts: Partial< SearchResultsCountType >
) => void;
};
export type SubscriptionsContextType = {

25
plugins/woocommerce-admin/client/marketplace/utils/functions.tsx
View File

@ -107,7 +107,11 @@ async function fetchJsonWithCache(
async function fetchSearchResults(
params: URLSearchParams,
abortSignal?: AbortSignal
): Promise< Product[] > {
): Promise< {
products: Product[];
totalPages: number;
totalProducts: number;
} > {
const url =
MARKETPLACE_HOST +
MARKETPLACE_SEARCH_API_PATH +
@ -151,9 +155,12 @@ async function fetchSearchResults(
};
}
);
resolve( products );
const totalPages = ( json as SearchAPIJSONType ).total_pages;
const totalProducts = ( json as SearchAPIJSONType )
.total_products;
resolve( { products, totalPages, totalProducts } );
} )
.catch( () => reject );
.catch( reject );
} );
}
@ -174,6 +181,17 @@ async function fetchDiscoverPageData(): Promise< ProductGroup[] > {
}
}
function getProductType( tab: string ): ProductType {
switch ( tab ) {
case 'themes':
return ProductType.theme;
case 'business-services':
return ProductType.businessService;
default:
return ProductType.extension;
}
}
function fetchCategories( type: ProductType ): Promise< CategoryAPIItem[] > {
const url = new URL( MARKETPLACE_HOST + MARKETPLACE_CATEGORY_API_PATH );
@ -478,6 +496,7 @@ export {
fetchCategories,
fetchDiscoverPageData,
fetchSearchResults,
getProductType,
fetchSubscriptions,
refreshSubscriptions,
getInstallUrl,

10
plugins/woocommerce-admin/client/marketplace/utils/tracking.ts
View File

@ -42,11 +42,6 @@ function recordMarketplaceView( props: MarketplaceViewProps ) {
eventProps.category = '_all';
}
// User clicks the `View All` button on search results
if ( view && view === 'search' && product_type && ! category ) {
eventProps.category = '_all';
}
recordEvent( 'marketplace_view', eventProps );
}
@ -80,11 +75,6 @@ function recordLegacyTabView( props: MarketplaceViewProps ) {
case 'themes':
oldEventProps.section = 'themes';
break;
case 'search':
oldEventName = 'extensions_view_search';
oldEventProps.section = view;
oldEventProps.search_term = search_term || '';
break;
case 'my-subscriptions':
oldEventName = 'subscriptions_view';
oldEventProps.section = 'helper';

2
plugins/woocommerce-admin/client/task-lists/setup-task-list/components/task-list-completed.tsx
View File

@ -29,7 +29,7 @@ export const TaskListCompleted = ( {
className="woocommerce-task-card woocommerce-homescreen-card completed"
>
<CardHeader size="medium">
<div className="wooocommerce-task-card__header">
<div className="woocommerce-task-card__header">
<img src={ HeaderImage } alt="Completed" />
<h2>
{ __(

4
plugins/woocommerce-beta-tester/changelog/dev-simulate-error-before-wp-loaded Normal file
View File

@ -0,0 +1,4 @@
Significance: patch
Type: enhancement
Improve remote logging tool to simulate core error early in the request lifecycle before wp fully loaded

27
plugins/woocommerce-beta-tester/woocommerce-beta-tester.php
View File

@ -143,10 +143,30 @@ add_action(
/**
* Simulate a WooCommerce error for remote logging testing.
*
* @throws Exception A simulated WooCommerce error if the option is set.
* This function adds a filter to the 'woocommerce_template_path' hook
* that throws an exception, then triggers the filter by calling WC()->template_path().
*
* @throws Exception A simulated WooCommerce error for testing purposes.
*/
function simulate_woocommerce_error() {
throw new Exception( 'Simulated WooCommerce error for remote logging test' );
// Return if WooCommerce is not loaded.
if ( ! function_exists( 'WC' ) || ! class_exists( 'WooCommerce' ) ) {
return;
}
// Define a constant to prevent the error from being caught by the WP Error Handler.
if ( ! defined( 'WP_SANDBOX_SCRAPING' ) ) {
define( 'WP_SANDBOX_SCRAPING', true );
}
add_filter(
'woocommerce_template_path',
function() {
throw new Exception( 'Simulated WooCommerce error for remote logging test' );
}
);
WC()->template_path();
}
$simulate_error = get_option( 'wc_beta_tester_simulate_woocommerce_php_error', false );
@ -155,7 +175,8 @@ if ( $simulate_error ) {
delete_option( 'wc_beta_tester_simulate_woocommerce_php_error' );
if ( 'core' === $simulate_error ) {
add_action( 'woocommerce_loaded', 'simulate_woocommerce_error' );
// Hook into the plugin_loaded action to simulate the error early before WP fully initializes.
add_action( 'plugin_loaded', 'simulate_woocommerce_error' );
} elseif ( 'beta-tester' === $simulate_error ) {
throw new Exception( 'Test PHP exception from WooCommerce Beta Tester' );
}

2
plugins/woocommerce-blocks/.wp-env.json
View File

@ -1,5 +1,5 @@
{
"core": null,
"core": "https://wordpress.org/wordpress-latest.zip",
"phpVersion": "7.4",
"plugins": [
"https://github.com/WP-API/Basic-Auth/archive/master.zip",

18
plugins/woocommerce-blocks/assets/js/blocks-registry/payment-methods/express-payment-method-config.ts
View File

@ -19,6 +19,9 @@ export default class ExpressPaymentMethodConfig
implements ExpressPaymentMethodConfigInstance
{
public name: string;
public title: string;
public description: string;
public gatewayId: string;
public content: ReactNode;
public edit: ReactNode;
public paymentMethodId?: string;
@ -27,13 +30,28 @@ export default class ExpressPaymentMethodConfig
constructor( config: ExpressPaymentMethodConfiguration ) {
// validate config
const readableName =
typeof config.name === 'string'
? config.name.replace( /[_-]/g, ' ' )
: config.name;
const trimedDescription =
typeof config?.description === 'string' &&
config.description.length > 130
? config.description.slice( 0, 130 ) + '...'
: config.description;
ExpressPaymentMethodConfig.assertValidConfig( config );
this.name = config.name;
this.title = config.title || readableName;
this.description = trimedDescription || '';
this.gatewayId = config.gatewayId || '';
this.content = config.content;
this.edit = config.edit;
this.paymentMethodId = config.paymentMethodId || this.name;
this.supports = {
features: config?.supports?.features || [ 'products' ],
style: config?.supports?.style || [],
};
this.canMakePaymentFromConfig = config.canMakePayment;
}

202
plugins/woocommerce-blocks/assets/js/blocks/cart-checkout-shared/block-settings/express-payment-settings.tsx Normal file
View File

@ -0,0 +1,202 @@
/**
* External dependencies
*/
import { InspectorControls, HeightControl } from '@wordpress/block-editor';
import {
PanelBody,
ToggleControl,
RadioControl,
Notice,
} from '@wordpress/components';
import ExternalLinkCard from '@woocommerce/editor-components/external-link-card';
import { __ } from '@wordpress/i18n';
import type { BlockAttributes } from '@wordpress/blocks';
import { select } from '@wordpress/data';
import { PAYMENT_STORE_KEY } from '@woocommerce/block-data';
import { ADMIN_URL } from '@woocommerce/settings';
const allStyleControls = [ 'height', 'borderRadius' ];
const atLeastOnePaymentMethodSupportsOneOf = ( styleControl: string[] ) => {
const availableExpressMethods =
select( PAYMENT_STORE_KEY ).getAvailableExpressPaymentMethods();
return Object.values( availableExpressMethods ).reduce(
( acc, currentValue ) => {
return (
acc ||
currentValue?.supportsStyle.some( ( el ) =>
styleControl.includes( el )
)
);
},
false
);
};
const ExpressPaymentButtonStyleControls = ( {
attributes,
setAttributes,
}: {
attributes: BlockAttributes;
setAttributes: ( attrs: BlockAttributes ) => void;
} ) => {
const { buttonHeight, buttonBorderRadius } = attributes;
return (
<>
{ atLeastOnePaymentMethodSupportsOneOf( [ 'height' ] ) && (
<RadioControl
label={ __( 'Button height', 'woocommerce' ) }
selected={ buttonHeight }
options={ [
{
label: __( 'Small (40px)', 'woocommerce' ),
value: '40',
},
{
label: __( 'Medium (48px)', 'woocommerce' ),
value: '48',
},
{
label: __( 'Large (55px)', 'woocommerce' ),
value: '55',
},
] }
onChange={ ( newValue: string ) =>
setAttributes( { buttonHeight: newValue } )
}
/>
) }
{ atLeastOnePaymentMethodSupportsOneOf( [ 'borderRadius' ] ) && (
<div className="border-radius-control-container">
<HeightControl
label={ __( 'Button border radius', 'woocommerce' ) }
value={ buttonBorderRadius }
onChange={ ( newValue: string ) => {
const valueOnly = newValue.replace( 'px', '' );
setAttributes( {
buttonBorderRadius: valueOnly,
} );
} }
/>
</div>
) }
</>
);
};
const ExpressPaymentToggle = ( {
attributes,
setAttributes,
}: {
attributes: BlockAttributes;
setAttributes: ( attrs: BlockAttributes ) => void;
} ) => {
if ( attributes.showButtonStyles ) {
return (
<ExpressPaymentButtonStyleControls
attributes={ attributes }
setAttributes={ setAttributes }
/>
);
}
return null;
};
const ExpressPaymentMethods = () => {
const availableExpressMethods =
select( PAYMENT_STORE_KEY ).getAvailableExpressPaymentMethods();
if ( Object.entries( availableExpressMethods ).length < 1 ) {
return (
<p className="wc-block-checkout__controls-text">
{ __(
'You currently have no express payment integrations active.',
'woocommerce'
) }
</p>
);
}
return (
<>
<p className="wc-block-checkout__controls-text">
{ __(
'You currently have the following express payment integrations active.',
'woocommerce'
) }
</p>
{ Object.values( availableExpressMethods ).map( ( values ) => {
return (
<ExternalLinkCard
key={ values.name }
href={ `${ ADMIN_URL }admin.php?page=wc-settings&tab=checkout&section=${ encodeURIComponent(
values.gatewayId
) }` }
title={ values.title }
description={ values.description }
/>
);
} ) }
</>
);
};
const toggleLabel = (
<>
{ __( 'Apply uniform styles', 'woocommerce' ) }{ ' ' }
<span className="express-payment-styles-beta-badge">Beta</span>
</>
);
export const ExpressPaymentControls = ( {
attributes,
setAttributes,
}: {
attributes: BlockAttributes;
setAttributes: ( attrs: BlockAttributes ) => void;
} ) => {
return (
<InspectorControls>
{ atLeastOnePaymentMethodSupportsOneOf( allStyleControls ) && (
<PanelBody
title={ __( 'Button Settings', 'woocommerce' ) }
className="express-payment-button-settings"
>
<ToggleControl
label={ toggleLabel }
checked={ attributes.showButtonStyles }
onChange={ () =>
setAttributes( {
showButtonStyles: ! attributes.showButtonStyles,
} )
}
help={ __(
'Sets a consistent style for express payment buttons.',
'woocommerce'
) }
/>
<Notice
status="warning"
isDismissible={ false }
className="wc-block-checkout__notice express-payment-styles-notice"
>
<strong>{ __( 'Note', 'woocommerce' ) }:</strong>{ ' ' }
{ __(
'Some payment methods might not yet support all style controls',
'woocommerce'
) }
</Notice>
<ExpressPaymentToggle
attributes={ attributes }
setAttributes={ setAttributes }
/>
</PanelBody>
) }
<PanelBody title={ __( 'Express Payment Methods', 'woocommerce' ) }>
<ExpressPaymentMethods />
</PanelBody>
</InspectorControls>
);
};

2
plugins/woocommerce-blocks/assets/js/blocks/cart-checkout-shared/block-settings/index.tsx
View File

@ -34,3 +34,5 @@ export const BlockSettings = ( {
</InspectorControls>
);
};
export { ExpressPaymentControls } from './express-payment-settings';

13
plugins/woocommerce-blocks/assets/js/blocks/cart-checkout-shared/payment-methods/express-payment-methods.js → plugins/woocommerce-blocks/assets/js/blocks/cart-checkout-shared/payment-methods/express-payment-methods.tsx
View File

@ -21,10 +21,22 @@ import { useDispatch, useSelect } from '@wordpress/data';
*/
import PaymentMethodErrorBoundary from './payment-method-error-boundary';
import { STORE_KEY as PAYMENT_STORE_KEY } from '../../../data/payment/constants';
import { useExpressPaymentContext } from '../../cart-checkout-shared/payment-methods/express-payment/express-payment-context';
const ExpressPaymentMethods = () => {
const { isEditor } = useEditorContext();
const { showButtonStyles, buttonHeight, buttonBorderRadius } =
useExpressPaymentContext();
// API for passing styles to express payment buttons
const buttonAttributes = showButtonStyles
? {
height: buttonHeight,
borderRadius: buttonBorderRadius,
}
: undefined;
const { activePaymentMethod, paymentMethodData } = useSelect(
( select ) => {
const store = select( PAYMENT_STORE_KEY );
@ -150,6 +162,7 @@ const ExpressPaymentMethods = () => {
onError: onExpressPaymentError,
setExpressPaymentError:
deprecatedSetExpressPaymentError,
buttonAttributes,
} ) }
</li>
) : null;

0
plugins/woocommerce-blocks/assets/js/blocks/cart-checkout-shared/payment-methods/express-payment/checkout-express-payment.js → plugins/woocommerce-blocks/assets/js/blocks/cart-checkout-shared/payment-methods/express-payment/checkout-express-payment.tsx
View File

21
plugins/woocommerce-blocks/assets/js/blocks/cart-checkout-shared/payment-methods/express-payment/express-payment-context.ts Normal file
View File

@ -0,0 +1,21 @@
/**
* External dependencies
*/
import { useContext, createContext } from '@wordpress/element';
type ExpressPaymentContextProps = {
showButtonStyles: boolean;
buttonHeight: string;
buttonBorderRadius: string;
};
export const ExpressPaymentContext: React.Context< ExpressPaymentContextProps > =
createContext< ExpressPaymentContextProps >( {
showButtonStyles: false,
buttonHeight: '48',
buttonBorderRadius: '4',
} );
export const useExpressPaymentContext = () => {
return useContext( ExpressPaymentContext );
};

2
plugins/woocommerce-blocks/assets/js/blocks/cart-checkout-shared/payment-methods/express-payment/index.js
View File

@ -1,2 +1,2 @@
export { default as CartExpressPayment } from './cart-express-payment.js';
export { default as CheckoutExpressPayment } from './checkout-express-payment.js';
export { default as CheckoutExpressPayment } from './checkout-express-payment';

3
plugins/woocommerce-blocks/assets/js/blocks/cart-checkout-shared/payment-methods/express-payment/style.scss
View File

@ -14,6 +14,7 @@ $border-width: 1px;
> li {
margin: 0;
width: 100%;
overflow: hidden;
> img {
width: 100%;
@ -95,7 +96,7 @@ $border-width: 1px;
.wc-block-components-express-payment--cart {
.wc-block-components-express-payment__event-buttons {
> li {
padding-bottom: $gap;
padding-bottom: $gap-small;
text-align: center;
width: 100%;

3
plugins/woocommerce-blocks/assets/js/blocks/cart-checkout-shared/payment-methods/test/__mocks__/editor-context.ts Normal file
View File

@ -0,0 +1,3 @@
// This needs to be defined in a separate file because we are mocking an import.
// The only way to do this is to define the mock and import it BEFORE the module being mocked.
export default jest.fn( () => ( { isEditor: false } ) );

187
plugins/woocommerce-blocks/assets/js/blocks/cart-checkout-shared/payment-methods/test/__mocks__/express-payment-props.ts Normal file
View File

@ -0,0 +1,187 @@
// This is the shape of the API exposed to the express payment methods via props
// Note that this is a public API!
export const getExpectedExpressPaymentProps = ( name: string ) => ( {
activePaymentMethod: undefined,
billing: {
appliedCoupons: [],
billingAddress: {
address_1: '',
address_2: '',
city: '',
company: '',
country: '',
first_name: '',
last_name: '',
phone: '',
postcode: '',
state: '',
},
billingData: {
address_1: '',
address_2: '',
city: '',
company: '',
country: '',
first_name: '',
last_name: '',
phone: '',
postcode: '',
state: '',
},
cartTotal: {
label: 'Total',
value: 0,
},
cartTotalItems: [
{
key: 'total_items',
label: 'Subtotal:',
value: 0,
valueWithTax: 0,
},
{
key: 'total_fees',
label: 'Fees:',
value: 0,
valueWithTax: 0,
},
{
key: 'total_discount',
label: 'Discount:',
value: 0,
valueWithTax: 0,
},
{
key: 'total_tax',
label: 'Taxes:',
value: 0,
valueWithTax: 0,
},
{
key: 'total_shipping',
label: 'Shipping:',
value: 0,
valueWithTax: 0,
},
],
currency: {
code: 'USD',
decimalSeparator: '.',
minorUnit: 2,
prefix: '&#36;',
suffix: '',
symbol: '&#36;',
thousandSeparator: ',',
},
customerId: 1,
displayPricesIncludingTax: false,
},
buttonAttributes: {
borderRadius: '4',
height: '48',
},
cartData: {
cartFees: [],
cartItems: [],
extensions: {},
},
checkoutStatus: {
isCalculating: false,
isComplete: false,
isIdle: true,
isProcessing: false,
},
components: {
LoadingMask: expect.any( Function ),
PaymentMethodIcons: expect.any( Function ),
PaymentMethodLabel: expect.any( Function ),
ValidationInputError: expect.any( Function ),
},
emitResponse: {
noticeContexts: {
BILLING_ADDRESS: 'wc/checkout/billing-address',
CART: 'wc/cart',
CHECKOUT: 'wc/checkout',
CHECKOUT_ACTIONS: 'wc/checkout/checkout-actions',
CONTACT_INFORMATION: 'wc/checkout/contact-information',
EXPRESS_PAYMENTS: 'wc/checkout/express-payments',
ORDER_INFORMATION: 'wc/checkout/additional-information',
PAYMENTS: 'wc/checkout/payments',
SHIPPING_ADDRESS: 'wc/checkout/shipping-address',
SHIPPING_METHODS: 'wc/checkout/shipping-methods',
},
responseTypes: {
ERROR: 'error',
FAIL: 'failure',
SUCCESS: 'success',
},
},
eventRegistration: {
onCheckoutAfterProcessingWithError: expect.any( Function ),
onCheckoutAfterProcessingWithSuccess: expect.any( Function ),
onCheckoutBeforeProcessing: expect.any( Function ),
onCheckoutFail: expect.any( Function ),
onCheckoutSuccess: expect.any( Function ),
onCheckoutValidation: expect.any( Function ),
onCheckoutValidationBeforeProcessing: expect.any( Function ),
onPaymentProcessing: expect.any( Function ),
onPaymentSetup: expect.any( Function ),
onShippingRateFail: expect.any( Function ),
onShippingRateSelectFail: expect.any( Function ),
onShippingRateSelectSuccess: expect.any( Function ),
onShippingRateSuccess: expect.any( Function ),
},
name,
onClick: expect.any( Function ),
onClose: expect.any( Function ),
onError: expect.any( Function ),
onSubmit: expect.any( Function ),
paymentStatus: {
hasError: false,
hasFailed: false,
isDoingExpressPayment: false,
isFinished: false,
isIdle: true,
isPristine: true,
isProcessing: false,
isReady: false,
isStarted: false,
isSuccessful: false,
},
setExpressPaymentError: expect.any( Function ),
shippingData: {
isSelectingRate: false,
needsShipping: true,
selectedRates: {},
setSelectedRates: expect.any( Function ),
setShippingAddress: expect.any( Function ),
shippingAddress: {
address_1: '',
address_2: '',
city: '',
company: '',
country: '',
first_name: '',
last_name: '',
phone: '',
postcode: '',
state: '',
},
shippingRates: [],
shippingRatesLoading: false,
},
shippingStatus: {
shippingErrorStatus: {
hasError: false,
hasInvalidAddress: false,
isPristine: true,
isValid: false,
},
shippingErrorTypes: {
INVALID_ADDRESS: 'invalid_address',
NONE: 'none',
UNKNOWN: 'unknown_error',
},
},
shouldSavePayment: false,
} );

139
plugins/woocommerce-blocks/assets/js/blocks/cart-checkout-shared/payment-methods/test/express-payment-methods.tsx Normal file
View File

@ -0,0 +1,139 @@
/**
* External dependencies
*/
import { render, screen } from '@testing-library/react';
import { PAYMENT_STORE_KEY } from '@woocommerce/block-data';
import {
registerExpressPaymentMethod,
__experimentalDeRegisterExpressPaymentMethod,
} from '@woocommerce/blocks-registry';
import { dispatch } from '@wordpress/data';
/**
* Internal dependencies
*/
import mockEditorContext from './__mocks__/editor-context';
import { getExpectedExpressPaymentProps } from './__mocks__/express-payment-props';
import ExpressPaymentMethods from '../express-payment-methods';
jest.mock( '@woocommerce/base-context', () => ( {
useEditorContext: mockEditorContext,
} ) );
// Button styles are disabled by default. We need to mock the express payment context
// to enable them.
jest.mock( '../express-payment/express-payment-context', () => {
return {
useExpressPaymentContext: jest.fn().mockReturnValue( {
showButtonStyles: true,
buttonHeight: '48',
buttonBorderRadius: '4',
} ),
};
} );
const mockExpressPaymentMethodNames = [ 'paypal', 'google pay', 'apple pay' ];
const MockExpressButton = jest.fn( ( { name } ) => (
<div className="boo">{ `${ name } button` }</div>
) );
const MockEditorExpressButton = jest.fn( ( { name } ) => (
<div>{ `${ name } preview` }</div>
) );
const registerMockExpressPaymentMethods = () => {
mockExpressPaymentMethodNames.forEach( ( name ) => {
registerExpressPaymentMethod( {
name,
title: `${ name } payment method`,
description: `A test ${ name } payment method`,
gatewayId: 'test-express-payment-method',
paymentMethodId: name,
content: <MockExpressButton name={ name } />,
edit: <MockEditorExpressButton name={ name } />,
canMakePayment: () => true,
supports: {
features: [ 'products' ],
},
} );
} );
dispatch( PAYMENT_STORE_KEY ).__internalUpdateAvailablePaymentMethods();
};
const deregisterMockExpressPaymentMethods = () => {
mockExpressPaymentMethodNames.forEach( ( name ) => {
__experimentalDeRegisterExpressPaymentMethod( name );
} );
};
describe( 'Express payment methods', () => {
afterAll( () => {
jest.restoreAllMocks();
} );
describe( 'No payment methods available', () => {
it( 'should display no registered payment methods', () => {
render( <ExpressPaymentMethods /> );
const noPaymentMethods = screen.queryAllByText(
/No registered Payment Methods/
);
expect( noPaymentMethods.length ).toEqual( 1 );
} );
} );
describe( 'Payment methods available', () => {
beforeAll( () => {
registerMockExpressPaymentMethods();
} );
afterAll( () => {
deregisterMockExpressPaymentMethods();
} );
describe( 'In a frontend context', () => {
it( 'should display the element provided by paymentMethods.content', () => {
render( <ExpressPaymentMethods /> );
mockExpressPaymentMethodNames.forEach( ( name ) => {
const btn = screen.getByText( `${ name } button` );
expect( btn ).toBeVisible();
} );
} );
it( 'should pass the correct properties to the rendered element', () => {
render( <ExpressPaymentMethods /> );
mockExpressPaymentMethodNames.forEach( ( name ) => {
expect( MockExpressButton ).toHaveBeenCalledWith(
getExpectedExpressPaymentProps( name ),
{}
);
} );
// This is a bit out of place, but the console warning is triggered when the
// usePaymentMethodInterface hook is called so we need to expect it here otherwise
// the test fails on unexpected console warnings.
expect( console ).toHaveWarnedWith(
'isPristine is deprecated since version 9.6.0. Please use isIdle instead. See: https://github.com/woocommerce/woocommerce-blocks/pull/8110'
);
} );
} );
describe( 'In an editor context', () => {
beforeEach( () => {
mockEditorContext.mockImplementation( () => ( {
isEditor: true,
} ) );
} );
it( 'should display the element provided by paymentMethods.edit', () => {
render( <ExpressPaymentMethods /> );
mockExpressPaymentMethodNames.forEach( ( name ) => {
const btn = screen.getByText( `${ name } preview` );
expect( btn ).toBeVisible();
} );
} );
it( 'should pass the correct properties to the rendered element', () => {
render( <ExpressPaymentMethods /> );
mockExpressPaymentMethodNames.forEach( ( name ) => {
expect( MockEditorExpressButton ).toHaveBeenCalledWith(
getExpectedExpressPaymentProps( name ),
{}
);
} );
} );
} );
} );
} );

23
plugins/woocommerce-blocks/assets/js/blocks/cart-checkout-shared/types.ts Normal file
View File

@ -0,0 +1,23 @@
export type ExpressCheckoutAttributes = {
className?: string;
buttonHeight: string;
showButtonStyles: boolean;
buttonBorderRadius: string;
lock: {
move: boolean;
remove: boolean;
};
};
export type ExpressCartAttributes = {
className: string;
buttonHeight: string;
showButtonStyles: boolean;
buttonBorderRadius: string;
};
export type ExpressPaymentSettings = {
showButtonStyles: boolean;
buttonHeight: string;
buttonBorderRadius: string;
};

12
plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/cart-express-payment-block/block.json
View File

@ -13,6 +13,18 @@
"lock": false
},
"attributes": {
"showButtonStyles": {
"type": "boolean",
"default": false
},
"buttonHeight": {
"type": "string",
"default": "48"
},
"buttonBorderRadius": {
"type": "string",
"default": "4"
},
"lock": {
"type": "object",
"default": {

22
plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/cart-express-payment-block/edit.tsx
View File

@ -4,17 +4,23 @@
import { useBlockProps } from '@wordpress/block-editor';
import { useExpressPaymentMethods } from '@woocommerce/base-context/hooks';
import clsx from 'clsx';
import { ExpressPaymentControls } from '@woocommerce/blocks/cart-checkout-shared';
import type { BlockAttributes } from '@wordpress/blocks';
/**
* Internal dependencies
*/
import Block from './block';
import './editor.scss';
import type { ExpressCartAttributes } from '../../../cart-checkout-shared/types';
import { ExpressPaymentContext } from '../../../cart-checkout-shared/payment-methods/express-payment/express-payment-context';
export const Edit = ( {
attributes,
setAttributes,
}: {
attributes: { className: string };
attributes: ExpressCartAttributes;
setAttributes: ( attrs: BlockAttributes ) => void;
} ): JSX.Element | null => {
const { paymentMethods, isInitialized } = useExpressPaymentMethods();
const hasExpressPaymentMethods = Object.keys( paymentMethods ).length > 0;
@ -24,7 +30,9 @@ export const Edit = ( {
hasExpressPaymentMethods,
} ),
} );
const { className } = attributes;
const { className, showButtonStyles, buttonHeight, buttonBorderRadius } =
attributes;
if ( ! isInitialized || ! hasExpressPaymentMethods ) {
return null;
@ -32,7 +40,15 @@ export const Edit = ( {
return (
<div { ...blockProps }>
<Block className={ className } />
<ExpressPaymentControls
attributes={ attributes }
setAttributes={ setAttributes }
/>
<ExpressPaymentContext.Provider
value={ { showButtonStyles, buttonHeight, buttonBorderRadius } }
>
<Block className={ className } />
</ExpressPaymentContext.Provider>
</div>
);
};

35
plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/cart-express-payment-block/editor.scss
View File

@ -32,3 +32,38 @@
display: block;
}
}
.express-payment-styles-notice {
margin-bottom: $gap;
}
.express-payment-styles-beta-badge {
margin-left: $grid-unit-10;
padding: 3px $grid-unit-10;
height: $grid-unit-30;
border-radius: $radius-block-ui;
background-color: $gray-900;
color: $white;
align-items: center;
font-size: $helptext-font-size;
line-height: 1;
}
// Disabled changing units from px for border radius control
.border-radius-control-container select {
pointer-events: none;
}
.button-height-control + .border-radius-control-container {
margin-top: $grid-unit-30;
}
// Center images rendered in place of buttons in the editor
.wc-block-components-express-payment {
.wc-block-components-express-payment__event-buttons {
> li {
pointer-events: none;
user-select: none;
}
}
}

28
plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/cart-express-payment-block/frontend.tsx
View File

@ -1,6 +1,32 @@
/**
* External dependencies
*/
import { getValidBlockAttributes } from '@woocommerce/base-utils';
/**
* Internal dependencies
*/
import Block from './block';
import { ExpressPaymentContext } from '../../../cart-checkout-shared/payment-methods/express-payment/express-payment-context';
import metadata from './block.json';
import { ExpressCheckoutAttributes } from '../../../cart-checkout-shared/types';
export default Block;
const FrontendBlock = ( attributes: ExpressCheckoutAttributes ) => {
const validAttributes = getValidBlockAttributes(
metadata.attributes,
attributes
);
const { showButtonStyles, buttonHeight, buttonBorderRadius, className } =
validAttributes;
return (
<ExpressPaymentContext.Provider
value={ { showButtonStyles, buttonHeight, buttonBorderRadius } }
>
<Block className={ className } />
</ExpressPaymentContext.Provider>
);
};
export default FrontendBlock;

12
plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-express-payment-block/block.json
View File

@ -13,6 +13,18 @@
"lock": false
},
"attributes": {
"showButtonStyles": {
"type": "boolean",
"default": false
},
"buttonHeight": {
"type": "string",
"default": "48"
},
"buttonBorderRadius": {
"type": "string",
"default": "4"
},
"className": {
"type": "string",
"default": ""

1
plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-express-payment-block/block.tsx
View File

@ -10,7 +10,6 @@ import { CheckoutExpressPayment } from '../../../cart-checkout-shared/payment-me
const Block = ( { className }: { className?: string } ): JSX.Element | null => {
const { cartNeedsPayment } = useStoreCart();
if ( ! cartNeedsPayment ) {
return null;
}

26
plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-express-payment-block/edit.tsx
View File

@ -4,23 +4,23 @@
import { useBlockProps } from '@wordpress/block-editor';
import { useExpressPaymentMethods } from '@woocommerce/base-context/hooks';
import clsx from 'clsx';
import { ExpressPaymentControls } from '@woocommerce/blocks/cart-checkout-shared';
import type { BlockAttributes } from '@wordpress/blocks';
/**
* Internal dependencies
*/
import Block from './block';
import './editor.scss';
import type { ExpressCheckoutAttributes } from '../../../cart-checkout-shared/types';
import { ExpressPaymentContext } from '../../../cart-checkout-shared/payment-methods/express-payment/express-payment-context';
export const Edit = ( {
attributes,
setAttributes,
}: {
attributes: {
className?: string;
lock: {
move: boolean;
remove: boolean;
};
};
attributes: ExpressCheckoutAttributes;
setAttributes: ( attrs: BlockAttributes ) => void;
} ): JSX.Element | null => {
const { paymentMethods, isInitialized } = useExpressPaymentMethods();
const hasExpressPaymentMethods = Object.keys( paymentMethods ).length > 0;
@ -39,9 +39,19 @@ export const Edit = ( {
return null;
}
const { buttonHeight, buttonBorderRadius, showButtonStyles } = attributes;
return (
<div { ...blockProps }>
<Block />
<ExpressPaymentControls
attributes={ attributes }
setAttributes={ setAttributes }
/>
<ExpressPaymentContext.Provider
value={ { showButtonStyles, buttonHeight, buttonBorderRadius } }
>
<Block />
</ExpressPaymentContext.Provider>
</div>
);
};

35
plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-express-payment-block/editor.scss
View File

@ -27,3 +27,38 @@
margin: 0 0 1em;
}
}
.express-payment-styles-notice {
margin-bottom: $gap;
}
.express-payment-styles-beta-badge {
margin-left: $grid-unit-10;
padding: 3px $grid-unit-10;
height: $grid-unit-30;
border-radius: $radius-block-ui;
background-color: $gray-900;
color: $white;
align-items: center;
font-size: $helptext-font-size;
line-height: 1;
}
// Disabled changing units from px for border radius control
.border-radius-control-container select {
pointer-events: none;
}
.button-height-control + .border-radius-control-container {
margin-top: $grid-unit-30;
}
// Center images rendered in place of buttons in the editor
.wc-block-components-express-payment {
.wc-block-components-express-payment__event-buttons {
> li {
pointer-events: none;
user-select: none;
}
}
}

32
plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-express-payment-block/frontend.tsx Normal file
View File

@ -0,0 +1,32 @@
/**
* External dependencies
*/
import { getValidBlockAttributes } from '@woocommerce/base-utils';
/**
* Internal dependencies
*/
import Block from './block';
import { ExpressPaymentContext } from '../../../cart-checkout-shared/payment-methods/express-payment/express-payment-context';
import metadata from './block.json';
import { ExpressCheckoutAttributes } from '../../../cart-checkout-shared/types';
const FrontendBlock = ( attributes: ExpressCheckoutAttributes ) => {
const validAttributes = getValidBlockAttributes(
metadata.attributes,
attributes
);
const { showButtonStyles, buttonHeight, buttonBorderRadius } =
validAttributes;
return (
<ExpressPaymentContext.Provider
value={ { showButtonStyles, buttonHeight, buttonBorderRadius } }
>
<Block />
</ExpressPaymentContext.Provider>
);
};
export default FrontendBlock;

10
plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-express-payment-block/types.ts Normal file
View File

@ -0,0 +1,10 @@
export type ExpressCheckoutAttributes = {
className?: string;
buttonHeight: string;
showButtonStyles: boolean;
buttonBorderRadius: string;
lock: {
move: boolean;
remove: boolean;
};
};

2
plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/register-components.ts
View File

@ -33,7 +33,7 @@ registerCheckoutBlock( {
component: lazy(
() =>
import(
/* webpackChunkName: "checkout-blocks/express-payment" */ './checkout-express-payment-block/block'
/* webpackChunkName: "checkout-blocks/express-payment" */ './checkout-express-payment-block/frontend'
)
),
} );

3
plugins/woocommerce-blocks/assets/js/data/payment/test/check-payment-methods.tsx
View File

@ -123,6 +123,9 @@ const registerMockPaymentMethods = ( savedCards = true ) => {
};
registerExpressPaymentMethod( {
name,
title: 'Express Payment Method',
description: 'A test express payment method',
gatewayId: 'test-express-payment-method',
content: <Content />,
edit: <div>An express payment method</div>,
canMakePayment: mockedExpressCanMakePayment,

3
plugins/woocommerce-blocks/assets/js/data/payment/test/selectors.js
View File

@ -123,6 +123,9 @@ const registerMockPaymentMethods = ( savedCards = true ) => {
};
registerExpressPaymentMethod( {
name,
title: `${ name } express payment method`,
description: `${ name } express payment method description`,
gatewayId: 'woo',
content: <Content />,
edit: <div>An express payment method</div>,
canMakePayment: () => true,

29
plugins/woocommerce-blocks/assets/js/data/payment/utils/check-payment-methods.ts
View File

@ -163,11 +163,30 @@ export const checkPaymentMethodsCanPay = async ( express = false ) => {
| PaymentMethodConfigInstance
| ExpressPaymentMethodConfigInstance
) => {
const { name } = paymentMethod;
availablePaymentMethods = {
...availablePaymentMethods,
[ paymentMethod.name ]: { name },
};
if ( express ) {
const { name, title, description, gatewayId, supports } =
paymentMethod as ExpressPaymentMethodConfigInstance;
availablePaymentMethods = {
...availablePaymentMethods,
[ paymentMethod.name ]: {
name,
title,
description,
gatewayId,
supportsStyle: supports?.style,
},
};
} else {
const { name } = paymentMethod as PaymentMethodConfigInstance;
availablePaymentMethods = {
...availablePaymentMethods,
[ paymentMethod.name ]: {
name,
},
};
}
};
// Order payment methods.

41
plugins/woocommerce-blocks/assets/js/types/type-defs/payments.ts
View File

@ -31,6 +31,7 @@ export interface SupportsConfiguration {
features?: string[];
// Deprecated, in favour of showSavedCards and showSaveOption
savePaymentInfo?: boolean;
style?: string[];
}
// we assign a value in the class for supports.features
@ -119,10 +120,28 @@ export interface PaymentMethodConfiguration {
savedTokenComponent?: ReactNode | null;
}
export type ExpressPaymentMethodConfiguration = Omit<
PaymentMethodConfiguration,
'icons' | 'label' | 'ariaLabel' | 'placeOrderButtonLabel'
>;
export interface ExpressPaymentMethodConfiguration {
// A unique string to identify the payment method client side.
name: string;
// A human readable title for the payment method.
title?: string;
// A human readable description for the payment method.
description?: string;
// The gateway ID for the payment method.
gatewayId?: string;
// A react node for your payment method UI.
content: ReactNode;
// A react node to display a preview of your payment method in the editor.
edit: ReactNode;
// A callback to determine whether the payment method should be shown in the checkout.
canMakePayment: CanMakePaymentCallback;
// A unique string to represent the payment method server side. If not provided, defaults to name.
paymentMethodId?: string;
// Object that describes various features provided by the payment method.
supports: SupportsConfiguration;
// A React node that contains logic handling any processing your payment method has to do with saved payment methods if your payment method supports them
savedTokenComponent?: ReactNode | null;
}
export type PaymentMethods =
| Record< string, PaymentMethodConfigInstance >
@ -131,7 +150,16 @@ export type PaymentMethods =
/**
* Used to represent payment methods in a context where storing objects is not allowed, i.e. in data stores.
*/
export type PlainPaymentMethods = Record< string, { name: string } >;
export type PlainPaymentMethods = Record<
string,
{
name: string;
title: string;
description: string;
gatewayId: string;
supportsStyle: string[];
}
>;
/**
* Used to represent payment methods in a context where storing objects is not allowed, i.e. in data stores.
@ -159,6 +187,9 @@ export interface PaymentMethodConfigInstance {
export interface ExpressPaymentMethodConfigInstance {
name: string;
title: string;
description: string;
gatewayId: string;
content: ReactNode;
edit: ReactNode;
paymentMethodId?: string;

2
plugins/woocommerce-blocks/tests/e2e/tests/local-pickup/local-pickup.merchant.block_theme.spec.ts
View File

@ -184,7 +184,7 @@ test.describe( 'Merchant → Local Pickup Settings', () => {
).toBeVisible();
} );
test( 'updating the title in WC Settings updates the local pickup text in the block and vice/versa', async ( {
test.skip( 'updating the title in WC Settings updates the local pickup text in the block and vice/versa', async ( {
page,
localPickupUtils,
admin,

6
plugins/woocommerce-blocks/tests/e2e/tests/product-collection/product-collection.block_theme.spec.ts
View File

@ -87,7 +87,11 @@ test.describe( 'Product Collection', () => {
await admin.createNewPost();
} );
test( 'does not render', async ( { page, editor, pageObject } ) => {
test.skip( 'does not render', async ( {
page,
editor,
pageObject,
} ) => {
await pageObject.insertProductCollection();
await pageObject.chooseCollectionInPost( 'featured' );
await pageObject.addFilter( 'Price Range' );

4
plugins/woocommerce-blocks/tests/e2e/tests/product-collection/register-product-collection-tester.block_theme.spec.ts
View File

@ -235,7 +235,7 @@ test.describe( 'Product Collection registration', () => {
await expect( previewButtonLocator ).toBeHidden();
} );
test( 'Should display properly in Product Catalog template', async ( {
test.skip( 'Should display properly in Product Catalog template', async ( {
pageObject,
editor,
} ) => {
@ -357,7 +357,7 @@ test.describe( 'Product Collection registration', () => {
} );
} );
test( 'Product picker should be shown when selected product is deleted', async ( {
test.skip( 'Product picker should be shown when selected product is deleted', async ( {
pageObject,
admin,
editor,

2
plugins/woocommerce/.wp-env.json
View File

@ -1,5 +1,5 @@
{
"core": null,
"core": "https://wordpress.org/wordpress-latest.zip",
"phpVersion": "7.4",
"plugins": [ "." ],
"config": {

4
plugins/woocommerce/changelog/47899-try-poc-express-checkout-button-styles Normal file
View File

@ -0,0 +1,4 @@
Significance: minor
Type: add
Adds unified styles for the express checkout block

4
plugins/woocommerce/changelog/50688-add-sync-cart-checkout Normal file
View File

@ -0,0 +1,4 @@
Significance: minor
Type: add
Synchronise the express payment controls between the Cart & Checkout blocks

4
plugins/woocommerce/changelog/50791-feature-express-payment-improvements Normal file
View File

@ -0,0 +1,4 @@
Significance: minor
Type: add
Improve the express checkout experience with several design tweak, uniform button styles and editor improvements

4
plugins/woocommerce/changelog/50983-add-express-payment-methods-to-sidebar Normal file
View File

@ -0,0 +1,4 @@
Significance: minor
Type: add
Available express payment methods are visible in the editor when selecting the express payment block

4
plugins/woocommerce/changelog/51109-remove-dark-mode Normal file
View File

@ -0,0 +1,4 @@
Significance: patch
Type: tweak
Comment: This is part of a bigger feature that will have its own changelog entry

4
plugins/woocommerce/changelog/51296-try-supports-express-payment-controls Normal file
View File

@ -0,0 +1,4 @@
Significance: patch
Type: tweak
UX improvements to the express payment block in the editor

4
plugins/woocommerce/changelog/51309-update-21591-in-app-category-selector Normal file
View File

@ -0,0 +1,4 @@
Significance: patch
Type: update
Update In-App Marketplace category selector

4
plugins/woocommerce/changelog/51313-update-wccom-21595-in-app-search-component Normal file
View File

@ -0,0 +1,4 @@
Significance: minor
Type: update
Replace marketplace search component with SearchControl from @wordpress/components

4
plugins/woocommerce/changelog/51342-fix-21596-search-loading-state Normal file
View File

@ -0,0 +1,4 @@
Significance: patch
Type: fix
Fix the loading state for the In-App Marketplace search

4
plugins/woocommerce/changelog/51422-e2e-external-expand-wpcom-suite-part3 Normal file
View File

@ -0,0 +1,4 @@
Significance: patch
Type: update
Expand the e2e suite we're running on WPCOM part #3.

4
plugins/woocommerce/changelog/51434-add-wccom-21568-in-app-load-more-button Normal file
View File

@ -0,0 +1,4 @@
Significance: minor
Type: add
Added a Load More button to product lists on the Extensions page, to request additional search results from WooCommerce.com.

4
plugins/woocommerce/changelog/51449-dev-harden-added-to-cart
View File

@ -1,4 +0,0 @@
Significance: patch
Type: fix
Fix bug where manually triggering `added_to_cart` event without a button element caused an Exception.

4
plugins/woocommerce/changelog/51484-patch-25 Normal file
View File

@ -0,0 +1,4 @@
Significance: patch
Type: tweak
Comment: Fix typo (task-list-completed.tsx)

4
plugins/woocommerce/changelog/51510-e2e-skip-skip-flaky-e2e-tests-until-fixed Normal file
View File

@ -0,0 +1,4 @@
Significance: patch
Type: tweak
Comment: This PR skips 4 e2e tests and makes no other changes

4
plugins/woocommerce/changelog/add-50832-loading-time Normal file
View File

@ -0,0 +1,4 @@
Significance: patch
Type: dev
Track customize_your_store_assembler_hub_editor_loaded event to measure CYS loading time

4
plugins/woocommerce/changelog/e2e-fix-stalebot-ignore-skipped-test-issues Normal file
View File

@ -0,0 +1,4 @@
Significance: patch
Type: dev
Exclude skipped e2e test issues from stale bot closure

4
plugins/woocommerce/changelog/fix-51472-fix-deprecation-notice Normal file
View File

@ -0,0 +1,4 @@
Significance: patch
Type: fix
Wrap parse_str under a check to resolve deprecation notice

4
plugins/woocommerce/changelog/k6-performance-fix-my-account-open-orders-test Normal file
View File

@ -0,0 +1,4 @@
Significance: patch
Type: fix
Fix k6 performance test that checks for incorrect title when viewing order page

4
plugins/woocommerce/changelog/refactor-wccom-21576-search-tab Normal file
View File

@ -0,0 +1,4 @@
Significance: minor
Type: update
Change the way search results are displayed in the in-app marketplace

4
plugins/woocommerce/changelog/tweak-21597-in-app-search-results-count Normal file
View File

@ -0,0 +1,4 @@
Significance: minor
Type: add
Add search result counts to the in-app marketplace header tabs (Extensions area)

4
plugins/woocommerce/changelog/update-dataviews_package Normal file
View File

@ -0,0 +1,4 @@
Significance: minor
Type: update
[ Experimental ] Moved experimental product dataviews menu to Product top menu.

4
plugins/woocommerce/changelog/update-rest-api-global-unique-id Normal file
View File

@ -0,0 +1,4 @@
Significance: minor
Type: add
Add global_unique_id parameter to products REST API

4
plugins/woocommerce/includes/admin/importers/class-wc-product-csv-importer-controller.php
View File

@ -125,6 +125,7 @@ class WC_Product_CSV_Importer_Controller {
// Check that file is within an allowed location.
if ( $is_valid_file ) {
$normalized_path = wp_normalize_path( $path );
$in_valid_location = false;
$valid_locations = array();
$valid_locations[] = ABSPATH;
@ -135,7 +136,8 @@ class WC_Product_CSV_Importer_Controller {
}
foreach ( $valid_locations as $valid_location ) {
if ( 0 === stripos( $path, trailingslashit( realpath( $valid_location ) ) ) ) {
$normalized_location = wp_normalize_path( realpath( $valid_location ) );
if ( 0 === stripos( $normalized_path, trailingslashit( $normalized_location ) ) ) {
$in_valid_location = true;
break;
}

24
plugins/woocommerce/includes/data-stores/class-wc-product-data-store-cpt.php
View File

@ -656,21 +656,21 @@ class WC_Product_Data_Store_CPT extends WC_Data_Store_WP implements WC_Object_Da
// Fire actions to let 3rd parties know the stock is about to be changed.
if ( $product->is_type( 'variation' ) ) {
/**
* Action to signal that the value of 'stock_quantity' for a variation is about to change.
*
* @param WC_Product $product The variation whose stock is about to change.
*
* @since 4.9
*/
* Action to signal that the value of 'stock_quantity' for a variation is about to change.
*
* @since 4.9
*
* @param int $product The variation whose stock is about to change.
*/
do_action( 'woocommerce_variation_before_set_stock', $product );
} else {
/**
* Action to signal that the value of 'stock_quantity' for a product is about to change.
*
* @param WC_Product $product The product whose stock is about to change.
*
* @since 4.9
*/
* Action to signal that the value of 'stock_quantity' for a product is about to change.
*
* @since 4.9
*
* @param int $product The product whose stock is about to change.
*/
do_action( 'woocommerce_product_before_set_stock', $product );
}
break;

12
plugins/woocommerce/includes/rest-api/Controllers/Version3/class-wc-rest-products-controller.php
View File

@ -259,6 +259,18 @@ class WC_REST_Products_Controller extends WC_REST_Products_V2_Controller {
}
}
if ( ! empty( $request['global_unique_id'] ) ) {
$global_unique_ids = array_map( 'trim', explode( ',', $request['global_unique_id'] ) );
$args['meta_query'] = $this->add_meta_query( // phpcs:ignore WordPress.DB.SlowDBQuery.slow_db_query_meta_query
$args,
array(
'key' => '_global_unique_id',
'value' => $global_unique_ids,
'compare' => 'IN',
)
);
}
// Filter by tax class.
if ( ! empty( $request['tax_class'] ) ) {
$args['meta_query'] = $this->add_meta_query( // WPCS: slow query ok.

34
plugins/woocommerce/includes/wc-stock-functions.php
View File

@ -242,10 +242,31 @@ function wc_trigger_stock_change_notifications( $order, $changes ) {
return;
}
$order_notes = array();
$order_notes = array();
$no_stock_amount = absint( get_option( 'woocommerce_notify_no_stock_amount', 0 ) );
foreach ( $changes as $change ) {
$order_notes[] = $change['product']->get_formatted_name() . ' ' . $change['from'] . '&rarr;' . $change['to'];
$order_notes[] = $change['product']->get_formatted_name() . ' ' . $change['from'] . '&rarr;' . $change['to'];
$low_stock_amount = absint( wc_get_low_stock_amount( wc_get_product( $change['product']->get_id() ) ) );
if ( $change['to'] <= $no_stock_amount ) {
/**
* Action to signal that the value of 'stock_quantity' for a variation is about to change.
*
* @since 4.9
*
* @param int $product The variation whose stock is about to change.
*/
do_action( 'woocommerce_no_stock', wc_get_product( $change['product']->get_id() ) );
} elseif ( $change['to'] <= $low_stock_amount ) {
/**
* Action to signal that the value of 'stock_quantity' for a product is about to change.
*
* @since 4.9
*
* @param int $product The product whose stock is about to change.
*/
do_action( 'woocommerce_low_stock', wc_get_product( $change['product']->get_id() ) );
}
if ( $change['to'] < 0 ) {
/**
@ -312,8 +333,6 @@ function wc_trigger_stock_change_actions( $product ) {
do_action( 'woocommerce_low_stock', $product );
}
}
add_action( 'woocommerce_variation_set_stock', 'wc_trigger_stock_change_actions' );
add_action( 'woocommerce_product_set_stock', 'wc_trigger_stock_change_actions' );
/**
* Increase stock levels for items within an order.
@ -485,11 +504,8 @@ function wc_get_low_stock_amount( WC_Product $product ) {
$low_stock_amount = $product->get_low_stock_amount();
if ( '' === $low_stock_amount && $product->is_type( 'variation' ) ) {
$parent_product = wc_get_product( $product->get_parent_id() );
if ( $parent_product instanceof WC_Product ) {
$low_stock_amount = $parent_product->get_low_stock_amount();
}
$product = wc_get_product( $product->get_parent_id() );
$low_stock_amount = $product->get_low_stock_amount();
}
if ( '' === $low_stock_amount ) {

2
plugins/woocommerce/readme.txt
View File

@ -4,7 +4,7 @@ Tags: online store, ecommerce, shop, shopping cart, sell online
Requires at least: 6.5
Tested up to: 6.6
Requires PHP: 7.4
Stable tag: 9.2.3
Stable tag: 9.3.2
License: GPLv3
License URI: https://www.gnu.org/licenses/gpl-3.0.html

4
plugins/woocommerce/src/Admin/Features/ProductDataViews/Init.php
View File

@ -109,9 +109,9 @@ class Init {
}
$ptype_obj = get_post_type_object( 'product' );
add_submenu_page(
'woocommerce',
'edit.php?post_type=product',
$ptype_obj->labels->name,
esc_html__( 'All Products', 'woocommerce' ),
esc_html__( 'All Products ( new )', 'woocommerce' ),
'manage_woocommerce',
'woocommerce-products-dashboard',
array( $this, 'woocommerce_products_dashboard' ),

12
plugins/woocommerce/src/Admin/WCAdminHelper.php
View File

@ -154,11 +154,13 @@ class WCAdminHelper {
'post_type' => 'product',
);
parse_str( wp_parse_url( $url, PHP_URL_QUERY ), $url_params );
foreach ( $params as $key => $param ) {
if ( isset( $url_params[ $key ] ) && $url_params[ $key ] === $param ) {
return true;
$query_string = wp_parse_url( $url, PHP_URL_QUERY );
if ( $query_string ) {
parse_str( $query_string, $url_params );
foreach ( $params as $key => $param ) {
if ( isset( $url_params[ $key ] ) && $url_params[ $key ] === $param ) {
return true;
}
}
}

14
plugins/woocommerce/src/Blocks/BlockTypes/CartExpressPaymentBlock.php
View File

@ -11,4 +11,18 @@ class CartExpressPaymentBlock extends AbstractInnerBlock {
* @var string
*/
protected $block_name = 'cart-express-payment-block';
/**
* Uniform default_styles for the express payment buttons
*
* @var boolean
*/
protected $default_styles = null;
/**
* Current styles for the express payment buttons
*
* @var boolean
*/
protected $current_styles = null;
}

127
plugins/woocommerce/src/Blocks/BlockTypes/CheckoutExpressPaymentBlock.php
View File

@ -1,6 +1,9 @@
<?php
namespace Automattic\WooCommerce\Blocks\BlockTypes;
use Automattic\WooCommerce\Blocks\Utils\CartCheckoutUtils;
use Exception;
/**
* CheckoutExpressPaymentBlock class.
*/
@ -11,4 +14,128 @@ class CheckoutExpressPaymentBlock extends AbstractInnerBlock {
* @var string
*/
protected $block_name = 'checkout-express-payment-block';
/**
* Default styles for the express payment buttons
*
* @var boolean
*/
protected $default_styles = null;
/**
* Current styles for the express payment buttons
*
* @var boolean
*/
protected $current_styles = null;
/**
* Initialise the block
*/
protected function initialize() {
parent::initialize();
$this->default_styles = array(
'showButtonStyles' => false,
'buttonHeight' => '48',
'buttonBorderRadius' => '4',
);
add_action( 'save_post', array( $this, 'sync_express_payment_attrs' ), 10, 2 );
}
/**
* Synchorize the express payment attributes between the Cart and Checkout pages.
*
* @param int $post_id Post ID.
* @param WP_Post $post Post object.
*/
public function sync_express_payment_attrs( $post_id, $post ) {
if ( wc_get_page_id( 'cart' ) === $post_id ) {
$cart_or_checkout = 'cart';
} elseif ( wc_get_page_id( 'checkout' ) === $post_id ) {
$cart_or_checkout = 'checkout';
} else {
return;
}
// This is not a proper save action, maybe an autosave, so don't continue.
if ( empty( $post->post_status ) || 'inherit' === $post->post_status ) {
return;
}
$block_name = 'woocommerce/' . $cart_or_checkout;
$page_id = 'woocommerce_' . $cart_or_checkout . '_page_id';
$template_name = 'page-' . $cart_or_checkout;
// Check if we are editing the cart/checkout page and that it contains a Cart/Checkout block.
// Cast to string for Cart/Checkout page ID comparison because get_option can return it as a string, so better to compare both values as strings.
if ( ! empty( $post->post_type ) && 'wp_template' !== $post->post_type && ( false === has_block( $block_name, $post ) || (string) get_option( $page_id ) !== (string) $post_id ) ) {
return;
}
// Check if we are editing the Cart/Checkout template and that it contains a Cart/Checkout block.
if ( ( ! empty( $post->post_type ) && ! empty( $post->post_name ) && $template_name !== $post->post_name && 'wp_template' === $post->post_type ) || false === has_block( $block_name, $post ) ) {
return;
}
if ( empty( $post->post_content ) ) {
return;
}
try {
// Parse the post content to get the express payment attributes of the current page.
$blocks = parse_blocks( $post->post_content );
$attrs = CartCheckoutUtils::find_express_checkout_attributes( $blocks, $cart_or_checkout );
if ( ! is_array( $attrs ) ) {
return;
}
$updated_attrs = array_merge( $this->default_styles, $attrs );
// We need to sync the attributes between the Cart and Checkout pages.
$other_page = 'cart' === $cart_or_checkout ? 'checkout' : 'cart';
$this->update_other_page_with_express_payment_attrs( $other_page, $updated_attrs );
} catch ( Exception $e ) {
wc_get_logger()->log( 'error', 'Error updating express payment attributes: ' . $e->getMessage() );
}
}
/**
* Update the express payment attributes in the other page (Cart or Checkout).
*
* @param string $cart_or_checkout The page to update.
* @param array $updated_attrs The updated attributes.
*/
private function update_other_page_with_express_payment_attrs( $cart_or_checkout, $updated_attrs ) {
$page_id = 'cart' === $cart_or_checkout ? wc_get_page_id( 'cart' ) : wc_get_page_id( 'checkout' );
if ( -1 === $page_id ) {
return;
}
$post = get_post( $page_id );
if ( empty( $post->post_content ) ) {
return;
}
$blocks = parse_blocks( $post->post_content );
CartCheckoutUtils::update_blocks_with_new_attrs( $blocks, $cart_or_checkout, $updated_attrs );
$updated_content = serialize_blocks( $blocks );
remove_action( 'save_post', array( $this, 'sync_express_payment_attrs' ), 10, 2 );
wp_update_post(
array(
'ID' => $page_id,
'post_content' => $updated_content,
),
false,
false
);
add_action( 'save_post', array( $this, 'sync_express_payment_attrs' ), 10, 2 );
}
}

4
plugins/woocommerce/src/Blocks/Utils/BlockTemplateUtils.php
View File

@ -481,7 +481,7 @@ class BlockTemplateUtils {
* @return boolean
*/
public static function theme_has_template( $template_name ) {
return ! ! self::get_theme_template_path( $template_name, 'wp_template' );
return (bool) self::get_theme_template_path( $template_name, 'wp_template' );
}
/**
@ -491,7 +491,7 @@ class BlockTemplateUtils {
* @return boolean
*/
public static function theme_has_template_part( $template_name ) {
return ! ! self::get_theme_template_path( $template_name, 'wp_template_part' );
return (bool) self::get_theme_template_path( $template_name, 'wp_template_part' );
}
/**

47
plugins/woocommerce/src/Blocks/Utils/CartCheckoutUtils.php
View File

@ -108,7 +108,7 @@ class CartCheckoutUtils {
}
$array_without_accents = array_map(
function( $value ) {
function ( $value ) {
return is_array( $value )
? self::deep_sort_with_accents( $value )
: remove_accents( wc_strtolower( html_entity_decode( $value ) ) );
@ -129,7 +129,7 @@ class CartCheckoutUtils {
$shipping_zones = \WC_Shipping_Zones::get_zones();
$formatted_shipping_zones = array_reduce(
$shipping_zones,
function( $acc, $zone ) {
function ( $acc, $zone ) {
$acc[] = [
'id' => $zone['id'],
'title' => $zone['zone_name'],
@ -146,4 +146,47 @@ class CartCheckoutUtils {
];
return $formatted_shipping_zones;
}
/**
* Recursively search the checkout block to find the express checkout block and
* get the button style attributes
*
* @param array $blocks Blocks to search.
* @param string $cart_or_checkout The block type to check.
*/
public static function find_express_checkout_attributes( $blocks, $cart_or_checkout ) {
$express_block_name = 'woocommerce/' . $cart_or_checkout . '-express-payment-block';
foreach ( $blocks as $block ) {
if ( ! empty( $block['blockName'] ) && $express_block_name === $block['blockName'] && ! empty( $block['attrs'] ) ) {
return $block['attrs'];
}
if ( ! empty( $block['innerBlocks'] ) ) {
$answer = self::find_express_checkout_attributes( $block['innerBlocks'], $cart_or_checkout );
if ( $answer ) {
return $answer;
}
}
}
}
/**
* Given an array of blocks, find the express payment block and update its attributes.
*
* @param array $blocks Blocks to search.
* @param string $cart_or_checkout The block type to check.
* @param array $updated_attrs The new attributes to set.
*/
public static function update_blocks_with_new_attrs( &$blocks, $cart_or_checkout, $updated_attrs ) {
$express_block_name = 'woocommerce/' . $cart_or_checkout . '-express-payment-block';
foreach ( $blocks as $key => &$block ) {
if ( ! empty( $block['blockName'] ) && $express_block_name === $block['blockName'] ) {
$blocks[ $key ]['attrs'] = $updated_attrs;
}
if ( ! empty( $block['innerBlocks'] ) ) {
self::update_blocks_with_new_attrs( $block['innerBlocks'], $cart_or_checkout, $updated_attrs );
}
}
}
}

Some files were not shown because too many files have changed in this diff Show More