diff --git a/.github/automate-team-review-assignment-config.yml b/.github/automate-team-review-assignment-config.yml index aa51f321346..f1acbd2affe 100644 --- a/.github/automate-team-review-assignment-config.yml +++ b/.github/automate-team-review-assignment-config.yml @@ -17,9 +17,9 @@ when: - woo-fse - author: teamIs: - - vortex + - flux ignore: nameIs: assign: teams: - - vortex + - flux diff --git a/.github/workflows/storybook-pages.yml b/.github/workflows/storybook-pages.yml new file mode 100644 index 00000000000..0e84b6df80f --- /dev/null +++ b/.github/workflows/storybook-pages.yml @@ -0,0 +1,34 @@ +name: Storybook GitHub Pages + +on: + workflow_dispatch: + +permissions: + contents: write + +jobs: + deploy: + runs-on: ubuntu-latest + if: ${{ github.repository == 'woocommerce/woocommerce' }} + + steps: + - name: Checkout + uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7 + with: + ref: trunk + fetch-depth: 0 + + - name: Setup WooCommerce Monorepo + uses: ./.github/actions/setup-woocommerce-monorepo + with: + install: true + + - name: Build Storybook + run: pnpm --filter='@woocommerce/storybook' build-storybook --quiet + + - name: Deploy + uses: peaceiris/actions-gh-pages@4f9cc6602d3f66b9c108549d475ec49e8ef4d45e # v4.0.0 + with: + github_token: ${{ secrets.GITHUB_TOKEN }} + publish_dir: ./tools/storybook/storybook-static + force_orphan: true diff --git a/docs/building-a-woo-store/adding-a-custom-field-to-variable-products.md b/docs/building-a-woo-store/adding-a-custom-field-to-variable-products.md index e955b142144..3b7a53c9fe8 100644 --- a/docs/building-a-woo-store/adding-a-custom-field-to-variable-products.md +++ b/docs/building-a-woo-store/adding-a-custom-field-to-variable-products.md @@ -59,7 +59,7 @@ For our Woo extension, we'll be appending our field right at the end with `wooco Let's get started with creating a new class which will hold the code for the field. Add a new file with the name `class-product-fields.php` to the `/includes/admin/` folder. Within the class, we add our namespace, an abort if anyone tries to call the file directly and a \_\_construct method which calls the `hooks()` method: ```php -hooks(); + $this->hooks(); } private function hooks() {} @@ -93,19 +93,19 @@ With the class set up and being called, we can create a function to add the cust ```php public function add_field() { global $product_object; - ?> -
- '_new_stock_information', - 'label' => __( 'New Stock', 'woo_product_field' ), - 'description' => __( 'Information shown in store', 'woo_product_field' ), - 'desc_tip' => true, - 'value' => $product_object->get_meta( '_new_stock_information' ) + 'id' => '_new_stock_information', + 'label' => __( 'New Stock', 'woo_product_field' ), + 'description' => __( 'Information shown in store', 'woo_product_field' ), + 'desc_tip' => true, + 'value' => $product_object->get_meta( '_new_stock_information' ) ) - ); ?> -
- update_meta_data( '_new_stock_information', sanitize_text_field( $_POST['_new_stock_information'] ) ); - $product->save_meta_data(); + $product->update_meta_data( '_new_stock_information', sanitize_text_field( $_POST['_new_stock_information'] ) ); + $product->save_meta_data(); } } ``` @@ -142,12 +142,12 @@ If we add data and save the product, then the new meta data is inserted into the At this point you have a working extension that saves a custom field for a product as product meta. Showing the field in the store -If we want to display the new field in our store, then we can do this with the `get_meta()` method of the Woo product class: `$product->get_meta( '\_new_stock_information' )` +If we want to display the new field in our store, then we can do this with the `get_meta()` method of the Woo product class: `$product->get_meta( '\_new_stock_information' )` Let's get started by creating a new file /includes/class-product.php. You may have noticed that this is outside the `/admin/` folder as this code will run in the front. So when we set up the class, we also adjust the namespace accordingly: ```php -hooks(); + $this->hooks(); } private function hooks() { } @@ -190,9 +190,9 @@ In our function we output the stock information with the [appropriate escape fun ```php public function add_stock_info() { global $product; - ?> -

get_meta( '_new_stock_information' ) ); ?>

- ID ); + $variation_product = wc_get_product( $variation->ID ); woocommerce_wp_text_input( array( - 'id' => '\_new_stock_information' . '[' . $loop . ']', - 'label' => \_\_( 'New Stock Information', 'woo_product_field' ), - 'wrapper_class' => 'form-row form-row-full', - 'value' => $variation_product->get_meta( '\_new_stock_information' ) + 'id' => '\_new_stock_information' . '[' . $loop . ']', + 'label' => \_\_( 'New Stock Information', 'woo_product_field' ), + 'wrapper_class' => 'form-row form-row-full', + 'value' => $variation_product->get_meta( '\_new_stock_information' ) ) ); } @@ -242,8 +242,8 @@ For saving we use: public function save_variation_field( $variation_id, $i ) { if ( isset( $_POST['_new_stock_information'][$i] ) ) { $variation_product = wc_get_product( $variation_id ); - $variation_product->update_meta_data( '_new_stock_information', sanitize_text_field( $_POST['_new_stock_information'][$i] ) ); - $variation_product->save_meta_data(); + $variation_product->update_meta_data( '_new_stock_information', sanitize_text_field( $_POST['_new_stock_information'][$i] ) ); + $variation_product->save_meta_data(); } } ``` diff --git a/docs/building-a-woo-store/block-references.md b/docs/building-a-woo-store/block-references.md index 5ae993bb975..5ec221ebed1 100644 --- a/docs/building-a-woo-store/block-references.md +++ b/docs/building-a-woo-store/block-references.md @@ -1109,16 +1109,16 @@ The contents of this block will display when there are no products found. - **Supports:** align, color (background, gradients, link, text), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~ - **Attributes:** -## Product Filter (Experimental) - woocommerce/product-filter +## Product Filters (Experimental) - woocommerce/product-filters -A block that adds product filters to the product collection. +Let shoppers filter products displayed on the page. -- **Name:** woocommerce/product-filter +- **Name:** woocommerce/product-filters - **Category:** woocommerce -- **Ancestor:** woocommerce/product-filters +- **Ancestor:** - **Parent:** -- **Supports:** ~~html~~, ~~inserter~~, ~~reusable~~ -- **Attributes:** attributeId, filterType, heading, isPreview +- **Supports:** align, color (background, text), interactivity, layout (allowJustification, allowOrientation, allowVerticalAlignment, default, ~~allowInheriting~~), spacing (blockGap), typography (fontSize, textAlign), ~~inserter~~, ~~multiple~~ +- **Attributes:** overlay, overlayButtonStyle, overlayIcon, overlayIconSize ## Filter Options - woocommerce/product-filter-active @@ -1153,50 +1153,6 @@ Allows shoppers to reset this filter. - **Supports:** interactivity, ~~inserter~~ - **Attributes:** -## Filter Options - woocommerce/product-filter-price - -Enable customers to filter the product collection by choosing a price range. - -- **Name:** woocommerce/product-filter-price -- **Category:** woocommerce -- **Ancestor:** woocommerce/product-filter -- **Parent:** -- **Supports:** interactivity, ~~inserter~~ -- **Attributes:** inlineInput, showInputFields - -## Filter Options - woocommerce/product-filter-rating - -Enable customers to filter the product collection by rating. - -- **Name:** woocommerce/product-filter-rating -- **Category:** woocommerce -- **Ancestor:** woocommerce/product-filter -- **Parent:** -- **Supports:** color (text, ~~background~~), interactivity, ~~inserter~~ -- **Attributes:** className, displayStyle, isPreview, selectType, showCounts - -## Filter Options - woocommerce/product-filter-stock-status - -Enable customers to filter the product collection by stock status. - -- **Name:** woocommerce/product-filter-stock-status -- **Category:** woocommerce -- **Ancestor:** woocommerce/product-filter -- **Parent:** -- **Supports:** color (text, ~~background~~), interactivity, ~~html~~, ~~inserter~~, ~~multiple~~ -- **Attributes:** className, displayStyle, isPreview, selectType, showCounts - -## Product Filters (Experimental) - woocommerce/product-filters - -Let shoppers filter products displayed on the page. - -- **Name:** woocommerce/product-filters -- **Category:** woocommerce -- **Ancestor:** -- **Parent:** -- **Supports:** align, color (background, text), interactivity, layout (allowJustification, allowOrientation, allowVerticalAlignment, default, ~~allowInheriting~~), spacing (blockGap), typography (fontSize, textAlign), ~~inserter~~, ~~multiple~~ -- **Attributes:** overlay, overlayButtonStyle, overlayIcon, overlayIconSize - ## Product Filters Overlay (Experimental) - woocommerce/product-filters-overlay Display product filters in an overlay on top of a page. @@ -1219,6 +1175,50 @@ Display overlay navigation controls. - **Supports:** align (center, left, right), color (background, text), layout (default, ~~allowEditing~~), position (sticky), spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~inserter~~ - **Attributes:** align, buttonStyle, iconSize, navigationStyle, overlayMode, style, triggerType +## Filter Options - woocommerce/product-filter-price + +Enable customers to filter the product collection by choosing a price range. + +- **Name:** woocommerce/product-filter-price +- **Category:** woocommerce +- **Ancestor:** woocommerce/product-filter +- **Parent:** +- **Supports:** interactivity, ~~inserter~~ +- **Attributes:** inlineInput, showInputFields + +## Product Filter (Experimental) - woocommerce/product-filter + +A block that adds product filters to the product collection. + +- **Name:** woocommerce/product-filter +- **Category:** woocommerce +- **Ancestor:** woocommerce/product-filters +- **Parent:** +- **Supports:** inserter, ~~html~~, ~~reusable~~ +- **Attributes:** attributeId, filterType, heading, isPreview + +## Filter Options - woocommerce/product-filter-rating + +Enable customers to filter the product collection by rating. + +- **Name:** woocommerce/product-filter-rating +- **Category:** woocommerce +- **Ancestor:** woocommerce/product-filter +- **Parent:** +- **Supports:** color (text, ~~background~~), interactivity, ~~inserter~~ +- **Attributes:** className, displayStyle, isPreview, selectType, showCounts + +## Filter Options - woocommerce/product-filter-stock-status + +Enable customers to filter the product collection by stock status. + +- **Name:** woocommerce/product-filter-stock-status +- **Category:** woocommerce +- **Ancestor:** woocommerce/product-filter +- **Parent:** +- **Supports:** color (text, ~~background~~), interactivity, ~~html~~, ~~inserter~~ +- **Attributes:** className, displayStyle, isPreview, selectType, showCounts + ## Product Gallery (Beta) - woocommerce/product-gallery Showcase your products relevant images and media. diff --git a/docs/code-snippets/before-login--register-form.md b/docs/code-snippets/before-login--register-form.md index ca6e9dcfdc2..915f2cc5f7c 100644 --- a/docs/code-snippets/before-login--register-form.md +++ b/docs/code-snippets/before-login--register-form.md @@ -14,17 +14,17 @@ if ( ! function_exists( 'YOUR_PREFIX_login_message' ) ) { */ function YOUR_PREFIX_login_message() { if ( get_option( 'woocommerce_enable_myaccount_registration' ) == 'yes' ) { - ?> -
-

- -
- ) symbol named references. diff --git a/docs/docs-manifest.json b/docs/docs-manifest.json index 6ef73f9e485..9896e658e12 100644 --- a/docs/docs-manifest.json +++ b/docs/docs-manifest.json @@ -74,7 +74,7 @@ "post_title": "Blocks reference", "menu_title": "Blocks Reference", "edit_url": "https://github.com/woocommerce/woocommerce/edit/trunk/docs/building-a-woo-store/block-references.md", - "hash": "329f17097ce67074a915d7814b2363e8b9e908910c1f7b196c8f4fd8594cc55c", + "hash": "9bbd3555641a70a0d7c24c818323a9270e437a6446998de9a6506e0c2ed6ddf5", "url": "https://raw.githubusercontent.com/woocommerce/woocommerce/trunk/docs/building-a-woo-store/block-references.md", "id": "1fbe91d7fa4fafaf35f0297e4cee1e7958756aed" }, @@ -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": "59ef97ed2053dedfa5e7c658d5c7fa470d8110afc9b84584cb32b58389bf5687", + "hash": "fe8cf43940f5166bf69f102aa4643cbe32415b1167d6b6d8968d434a4d113879", "url": "https://raw.githubusercontent.com/woocommerce/woocommerce/trunk/docs/building-a-woo-store/adding-a-custom-field-to-variable-products.md", "id": "64b686dcd5fdd4842be2fc570108231d5a8bfc1b" } @@ -414,7 +414,7 @@ "menu_title": "Configuring special tax scenarios", "tags": "code-snippet, tax", "edit_url": "https://github.com/woocommerce/woocommerce/edit/trunk/docs/code-snippets/configuring_special_tax_scenarios.md", - "hash": "acce5111eb917b7381d9bdcb260c72870e89d723195b86522050032741c5107c", + "hash": "c2459568db70b97d9a901c83eecb7737746499fe03cc84133aab3cf981b5c96a", "url": "https://raw.githubusercontent.com/woocommerce/woocommerce/trunk/docs/code-snippets/configuring_special_tax_scenarios.md", "id": "a8ab8b6734ba2ac5af7c6653635d15548abdab2a" }, @@ -439,7 +439,7 @@ "post_title": "Add a message above the login / register form", "tags": "code-snippet", "edit_url": "https://github.com/woocommerce/woocommerce/edit/trunk/docs/code-snippets/before-login--register-form.md", - "hash": "49f0d942364ea6815e799972894406cb0963164adfb6c373222dcf7fb0ee6fb9", + "hash": "dd3d61cd1f99d459956167041718e6a25693901a810d4bde47613d5ea2595ca3", "url": "https://raw.githubusercontent.com/woocommerce/woocommerce/trunk/docs/code-snippets/before-login--register-form.md", "id": "26ea2036f16952c8c965f2ab38ab214e421aa615" }, @@ -594,7 +594,7 @@ "post_title": "Contributing Technical Documentation", "menu_title": "Contributing Docs", "edit_url": "https://github.com/woocommerce/woocommerce/edit/trunk/docs/contributing-docs/contributing-docs.md", - "hash": "ee2eed4bc33ccbc4a84a2c73ee503f2df5a92183013e3f703bb439edab0a3fe3", + "hash": "6733ba23f82a6e784ef10e2862aa3afd8a61e32181e157f67ccabfc8354aa989", "url": "https://raw.githubusercontent.com/woocommerce/woocommerce/trunk/docs/contributing-docs/contributing-docs.md", "id": "71c1a72bfd4d5ae6aa656d4264b1bf3beb6eca1c" } @@ -691,7 +691,7 @@ "post_title": "Integrating with coming soon mode", "tags": "how-to, coming-soon", "edit_url": "https://github.com/woocommerce/woocommerce/edit/trunk/docs/extension-development/integrating-coming-soon-mode.md", - "hash": "910dbbab77c6fb4735e7704796242c38d86f3bf3b897de1075338eb47194f8f5", + "hash": "8c2087952ae79bb4c3e3977c57d9e933fcfaa418a5bc643b3827059daa5879a7", "url": "https://raw.githubusercontent.com/woocommerce/woocommerce/trunk/docs/extension-development/integrating-coming-soon-mode.md", "id": "787743efb6ef0ad509b17735eaf58b2a9a08afbc" }, @@ -727,7 +727,7 @@ "menu_title": "Implement merchant onboarding", "tags": "how-to", "edit_url": "https://github.com/woocommerce/woocommerce/edit/trunk/docs/extension-development/handling-merchant-onboarding.md", - "hash": "a34e2c637ac47adb1dd2e7b2510fb3eb7ff517b8f31e9cfa6fe4d3920f2567e7", + "hash": "c73e3c5015e6cda3be9ebd2d5fbda590ac9fa599e5fb02163c971c01060970ad", "url": "https://raw.githubusercontent.com/woocommerce/woocommerce/trunk/docs/extension-development/handling-merchant-onboarding.md", "id": "89fe15dc232379f546852822230c334d3d940b93" }, @@ -939,7 +939,7 @@ "menu_title": "Enable HPOS for large stores", "tags": "how-to", "edit_url": "https://github.com/woocommerce/woocommerce/edit/trunk/docs/high-performance-order-storage/guide-large-store.md", - "hash": "8bcae74d27e3a4ee9a902719c7e8d5aec4a4d82d7c14acd8665a72b9d4758181", + "hash": "1e144ac0d0a7c869093533bf94a1f218a42930a3f3edcbcfdd1210448243a992", "url": "https://raw.githubusercontent.com/woocommerce/woocommerce/trunk/docs/high-performance-order-storage/guide-large-store.md", "id": "b6156ac7b77d75022867e9ebb968bc9c1c35f0da" }, @@ -1033,7 +1033,7 @@ "menu_title": "Performance best practices", "tags": "reference", "edit_url": "https://github.com/woocommerce/woocommerce/edit/trunk/docs/performance/performance-best-practices.md", - "hash": "5af1f4e4085e85a1693390f40e238cbd6a4a0b7d5d304afdda935c34fed97c64", + "hash": "3c49b5553e99b64ecdbdad565866479f7af5e474dbbcc9aa36d711c02d8b0906", "url": "https://raw.githubusercontent.com/woocommerce/woocommerce/trunk/docs/performance/performance-best-practices.md", "id": "35bda1cd7068d6179a9e46cca8d7dc2694d0df96" } @@ -1050,7 +1050,7 @@ "menu_title": "Registering custom collections", "tags": "how-to", "edit_url": "https://github.com/woocommerce/woocommerce/edit/trunk/docs/product-collection-block/register-product-collection.md", - "hash": "e3df65c5eec52e4bb797e34c040dbb8f820ea6571e9ce50b1d518e95ca6cb169", + "hash": "27c321bed35524d74019e015f5eed6cdca7e6c2efe0bc89ffdd2b9b5d43c47e8", "url": "https://raw.githubusercontent.com/woocommerce/woocommerce/trunk/docs/product-collection-block/register-product-collection.md", "id": "3bf26fc7c56ae6e6a56e1171f750f5204fcfcece" }, @@ -1059,7 +1059,7 @@ "menu_title": "DOM Events", "tags": "how-to", "edit_url": "https://github.com/woocommerce/woocommerce/edit/trunk/docs/product-collection-block/dom-events.md", - "hash": "fbad20bc55cc569161e80478c0789db3c34cf35513e669554af36db1de967a26", + "hash": "59a4b49eb146774d33229bc60ab7d8f74381493f6e7089ca8f0e2d0eb433a7a4", "url": "https://raw.githubusercontent.com/woocommerce/woocommerce/trunk/docs/product-collection-block/dom-events.md", "id": "c8d247b91472740075871e6b57a9583d893ac650" } @@ -1411,7 +1411,7 @@ "categories": [] }, { - "content": "\nProperly setting up your test environment and writing tests when contributing to WooCommrece core are essential parts of our development pipeline. The links below are also included in our [Contributing Guidelines](https://github.com/woocommerce/woocommerce/blob/trunk/.github/CONTRIBUTING.md) on GitHub.\n\nIf you have any questions about testing please reach out to the developer community in our public channels([Developer Blog](https://developer.woocommerce.com/blog/), [GitHub Discussions](https://github.com/woocommerce/woocommerce/discussions), or [Community Slack](https://woocommerce.com/community-slack/)).\n\n## Unit Testing\n\n[End-to-end tests](https://github.com/woocommerce/woocommerce/tree/trunk/plugins/woocommerce/tests/e2e-pw) are powered by `Playwright`. The test site is spun up using `wp-env` ([recommended](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-env/)), but we will continue to support `e2e-environment` in the meantime, and slowly [deprecate](https://github.com/woocommerce/woocommerce/blob/trunk/plugins/woocommerce/tests/e2e/README.md) `Puppeteer` testing. \n\n## API Testing\n\n`api-core-tests` is a [package](https://github.com/woocommerce/woocommerce/tree/trunk/plugins/woocommerce/tests/api-core-tests#guide-for-writing-api-tests) that contains automated API tests for WooCommerce, based on `Playwright` and `wp-env`. It supersedes the SuperTest based `api-core-tests` package and `e2e-environment` setup, which we will gradually deprecate.\n\n## Calls for Testing\n\nKeep tabs on calls for testing on our developer blog, and make sure to read our beta testing instructions to help us build new features and enhancements.\n", + "content": "\nProperly setting up your test environment and writing tests when contributing to WooCommerce core are essential parts of our development pipeline. The links below are also included in our [Contributing Guidelines](https://github.com/woocommerce/woocommerce/blob/trunk/.github/CONTRIBUTING.md) on GitHub.\n\nIf you have any questions about testing please reach out to the developer community in our public channels([Developer Blog](https://developer.woocommerce.com/blog/), [GitHub Discussions](https://github.com/woocommerce/woocommerce/discussions), or [Community Slack](https://woocommerce.com/community-slack/)).\n\n## Unit Testing\n\n[End-to-end tests](https://github.com/woocommerce/woocommerce/tree/trunk/plugins/woocommerce/tests/e2e-pw) are powered by `Playwright`. The test site is spun up using `wp-env` ([recommended](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-env/)), but we will continue to support `e2e-environment` in the meantime, and slowly [deprecate](https://github.com/woocommerce/woocommerce/blob/trunk/plugins/woocommerce/tests/e2e/README.md) `Puppeteer` testing. \n\n## API Testing\n\n`api-core-tests` is a [package](https://github.com/woocommerce/woocommerce/tree/trunk/plugins/woocommerce/tests/api-core-tests#guide-for-writing-api-tests) that contains automated API tests for WooCommerce, based on `Playwright` and `wp-env`. It supersedes the SuperTest based `api-core-tests` package and `e2e-environment` setup, which we will gradually deprecate.\n\n## Calls for Testing\n\nKeep tabs on calls for testing on our developer blog, and make sure to read our beta testing instructions to help us build new features and enhancements.\n", "category_slug": "testing", "category_title": "Testing", "posts": [ @@ -1451,7 +1451,7 @@ { "post_title": "Template structure & Overriding templates via a theme", "edit_url": "https://github.com/woocommerce/woocommerce/edit/trunk/docs/theme-development/template-structure.md", - "hash": "ff781eff7998ea93723f644bddd4f6da6f73c635bcfc3cd46950f03a8b83b26c", + "hash": "a82d885c8395385dc51c976b2b51eec88cdcce72bf905fda78f97d77533ce079", "url": "https://raw.githubusercontent.com/woocommerce/woocommerce/trunk/docs/theme-development/template-structure.md", "id": "34bfebec9fc45e680976814928a7b8a1778af14e" }, @@ -1554,7 +1554,7 @@ "post_title": "WooCommerce Extension Guidelines - Navigation", "menu_title": "Navigation", "edit_url": "https://github.com/woocommerce/woocommerce/edit/trunk/docs/ux-guidelines-extensions/navigation.md", - "hash": "f14cbd3750451934d173ec43aa996067699bdd8fc05f5c34097d1967a79145db", + "hash": "9c5313a31ebe26909a2cfaaa0bcfcdc9d5a0855ac0ddb9808832524be313ebb6", "url": "https://raw.githubusercontent.com/woocommerce/woocommerce/trunk/docs/ux-guidelines-extensions/navigation.md", "id": "9922abbcea787a91b3360f49fa53d5402a604e6b" }, @@ -1804,5 +1804,5 @@ "categories": [] } ], - "hash": "2ecf48b6181dae0526b3858df889bce4e6ee425e10f2c43d151771d845c5a948" + "hash": "8199f0d3c854474839300ed606f03f9f286ace35f65d7c47ffc6477762eaf51e" } \ No newline at end of file diff --git a/docs/extension-development/handling-merchant-onboarding.md b/docs/extension-development/handling-merchant-onboarding.md index fb221f69afb..3dec70d6f89 100644 --- a/docs/extension-development/handling-merchant-onboarding.md +++ b/docs/extension-development/handling-merchant-onboarding.md @@ -26,7 +26,7 @@ Setup tasks appear on the WooCommerce Admin home screen and prompt a merchant to To register your task as an extended task list item, you'll need to start by creating a new PHP class that extends the Task class. This class will define the properties and behavior of your custom task. ```php - { +const Task = ( { onComplete, task, query } ) => { // Implement your task UI/feature here. - return
; + return <div></div>; }; registerPlugin( 'add-task-content', { - render: () => ( - - { ( { onComplete, query, task } ) => ( - + render: () => ( + <WooOnboardingTask id="my-task"> + { ( { onComplete, query, task } ) => ( + <Task onComplete={ onComplete } task={ task } query={ query } /> ) } - + </WooOnboardingTask> ), } ); registerPlugin( 'add-task-list-item', { scope: 'woocommerce-tasks', - render: () => ( - - { ( { defaultTaskItem: DefaultTaskItem } ) => ( + render: () => ( + <WooOnboardingTaskListItem id="my-task"> + { ( { defaultTaskItem: DefaultTaskItem } ) => ( // Add a custom wrapper around the default task item. -
- -
+ > + <DefaultTaskItem /> + </div> ) } -
+ </WooOnboardingTaskListItem> ), } ); ``` @@ -168,37 +168,37 @@ import { registerPlugin } from '@wordpress/plugins'; Next, we create a [functional component](https://reactjs.org/docs/components-and-props.html) that returns our task card. The intermixed JavaScript/HTML syntax we're using here is called JSX. If you're unfamiliar with it, you can [read more about it in the React docs](https://reactjs.org/docs/introducing-jsx.html). ```js -const Task = ( { onComplete, task } ) => { +const Task = ( { onComplete, task } ) => { const { actionTask } = useDispatch( ONBOARDING_STORE_NAME ); const { isActioned } = task; return ( - - + <Card className="woocommerce-task-card"> + <CardBody> { __( "This task's completion status is dependent on being actioned. The action button below will action this task, while the complete button will optimistically complete the task in the task list and redirect back to the task list. Note that in this example, the task must be actioned for completion to persist.", 'plugin-domain' ) }{ ' ' } -
-
+ <br /> + <br /> { __( 'Task actioned status: ', 'plugin-domain' ) }{ ' ' } { isActioned ? 'actioned' : 'not actioned' } -
-
-
- - -
-
-
+ </button> + </div> + </CardBody> + </Card> ); }; ``` @@ -211,14 +211,14 @@ Next, we register the Task component as a plugin named "add-task-content" using ```js registerPlugin( 'add-task-content', { - render: () => ( + render: () => ( { ( { onComplete, // eslint-disable-next-line @typescript-eslint/no-unused-vars query, task, - } ) => } + } ) => } ), scope: 'woocommerce-tasks', @@ -232,20 +232,20 @@ Finally, we register another plugin named "my-task-list-item-plugin." This plugi ```js registerPlugin( 'my-task-list-item-plugin', { scope: 'woocommerce-tasks', - render: () => ( - - { ( { defaultTaskItem: DefaultTaskItem } ) => ( + render: () => ( + <WooOnboardingTaskListItem id="my-task"> + { ( { defaultTaskItem: DefaultTaskItem } ) => ( // Add a custom wrapper around the default task item. -
- -
+ > + <DefaultTaskItem /> + </div> ) } -
+ </WooOnboardingTaskListItem> ), } ); ``` @@ -344,7 +344,7 @@ import { addFilter } from '@wordpress/hooks'; addFilter( 'woocommerce_admin_homescreen_quicklinks', 'my-extension', - ( quickLinks ) => { + ( quickLinks ) => { return [ ...quickLinks, { @@ -374,7 +374,7 @@ Despite being a part of the new React-powered admin experience in WooCommerce, A The recommended approach for using Admin Notes is to encapsulate your note within its own class that uses the [NoteTraits](https://github.com/woocommerce/woocommerce-admin/blob/831c9ff13a862f22cf53d3ae676daeabbefe90ad/src/Notes/NoteTraits.php) trait included with WooCommerce Admin. Below is a simple example of what this might look like: ```php -set_title( 'Getting Started' ); + $note->set_title( 'Getting Started' ); // Set our note's content. - $note->set_content( + $note->set_content( sprintf( 'Extension activated on %s.', $activated_time_formatted ) @@ -436,41 +436,41 @@ class ExampleNote { // You can use this property to re-localize notes on the fly, but // that is just one use. You can store other data here too. This // is backed by a longtext column in the database. - $note->set_content_data( (object) array( - 'getting_started' => true, - 'activated' => $activated_time, - 'activated_formatted' => $activated_time_formatted + $note->set_content_data( (object) array( + 'getting_started' => true, + 'activated' => $activated_time, + 'activated_formatted' => $activated_time_formatted ) ); // Set the type of the note. Note types are defined as enum-style // constants in the Note class. Available note types are: // error, warning, update, info, marketing. - $note->set_type( Note::E_WC_ADMIN_NOTE_INFORMATIONAL ); + $note->set_type( Note::E_WC_ADMIN_NOTE_INFORMATIONAL ); // Set the type of layout the note uses. Supported layout types are: // 'banner', 'plain', 'thumbnail' - $note->set_layout( 'plain' ); + $note->set_layout( 'plain' ); // Set the image for the note. This property renders as the src // attribute for an img tag, so use a string here. - $note->set_image( '' ); + $note->set_image( '' ); // Set the note name and source. You should store your extension's // name (slug) in the source property of the note. You can use // the name property of the note to support multiple sub-types of // notes. This also gives you a handy way of namespacing your notes. - $note->set_source( 'inbox-note-example'); - $note->set_name( self::NOTE_NAME ); + $note->set_source( 'inbox-note-example'); + $note->set_name( self::NOTE_NAME ); // Add action buttons to the note. A note can support 0, 1, or 2 actions. // The first parameter is the action name, which can be used for event handling. // The second parameter renders as the label for the button. // The third parameter is an optional URL for actions that require navigation. - $note->add_action( + $note->add_action( 'settings', 'Open Settings', '?page=wc-settings&tab=general' ); - $note->add_action( + $note->add_action( 'learn_more', 'Learn More', 'https://example.com' ); @@ -559,12 +559,12 @@ Next, we'll instantiate a new `Note` object. Once we have an instance of the Note class, we can work with its API to set its properties, starting with its title. -`$note->set_title( 'Getting Started' );` +`$note->set_title( 'Getting Started' );` Then we'll use some of the timestamp data we collected above to set the note's content. ```php -$note->set_content( +$note->set_content( sprintf( 'Extension activated on %s.', $activated_time_formatted ) @@ -574,41 +574,41 @@ $note->set_content( In addition to regular content, notes also support structured content using the `content_data` property. You can use this property to re-localize notes on the fly, but that is just one use case. You can store other data here too. This is backed by a `longtext` column in the database. ```php -$note->set_content_data( (object) array( - 'getting_started' => true, - 'activated' => $activated_time, - 'activated_formatted' => $activated_time_formatted +$note->set_content_data( (object) array( + 'getting_started' => true, + 'activated' => $activated_time, + 'activated_formatted' => $activated_time_formatted ) ); ``` Next, we'll set the note's `type` property. Note types are defined as enum-style class constants in the `Note` class. Available note types are _error_, _warning_, _update_, _info_, and _marketing_. When selecting a note type, be aware that the _error_ and _update_ result in the note being shown as a Store Alert, not in the Inbox. It's best to avoid using these types of notes unless you absolutely need to. -`$note->set_type( Note::E_WC_ADMIN_NOTE_INFORMATIONAL );` +`$note->set_type( Note::E_WC_ADMIN_NOTE_INFORMATIONAL );` Admin Notes also support a few different layouts. You can specify `banner`, `plain`, or `thumbnail` as the layout. If you're interested in seeing the different layouts in action, take a look at [this simple plugin](https://gist.github.com/octaedro/864315edaf9c6a2a6de71d297be1ed88) that you can install to experiment with them. We'll choose `plain` as our layout, but it's also the default, so we could leave this property alone and the effect would be the same. -`$note->set_layout( 'plain' );` +`$note->set_layout( 'plain' );` If you have an image that you want to add to your Admin Note, you can specify it using the `set_image` function. This property ultimately renders as the `src` attribute on an `img` tag, so use a string here. -`$note->set_image( '' );` +`$note->set_image( '' );` Next, we'll set the values for our Admin Note's `name` and `source` properties. As a best practice, you should store your extension's name (i.e. its slug) in the `source` property of the note. You can use the `name` property to support multiple sub-types of notes. This gives you a handy way of namespacing your notes and managing them at both a high and low level. ```php -$note->set_source( 'inbox-note-example'); -$note->set_name( self::NOTE_NAME ); +$note->set_source( 'inbox-note-example'); +$note->set_name( self::NOTE_NAME ); ``` Admin Notes can support 0, 1, or 2 actions (buttons). You can use these actions to capture events that trigger asynchronous processes or help the merchant navigate to a particular view to complete a step, or even simply to provide an external link for further information. The `add_action()` function takes up to three arguments. The first is the action name, which can be used for event handling, the second renders as a label for the action's button, and the third is an optional URL for actions that require navigation. ```php -$note->add_action( +$note->add_action( 'settings', 'Open Settings', '?page=wc-settings&tab=general' ); -$note->add_action( +$note->add_action( 'learn_more', 'Learn More', 'https://example.com' ); ``` diff --git a/docs/extension-development/integrating-coming-soon-mode.md b/docs/extension-development/integrating-coming-soon-mode.md index 18367bbceb9..c34fe9d1ae3 100644 --- a/docs/extension-development/integrating-coming-soon-mode.md +++ b/docs/extension-development/integrating-coming-soon-mode.md @@ -3,7 +3,7 @@ post_title: Integrating with coming soon mode tags: how-to, coming-soon --- -This guide provides examples for third-party developers and hosting providers on how to integrate their systems with WooCommerce's coming soon mode. For more details, please read the [developer blog post](https://developer.woocommerce.com/2024/06/18/introducing-coming-soon-mode/). +This guide provides examples for third-party developers and hosting providers on how to integrate their systems with WooCommerce's coming soon mode. For more details, please read the [developer blog post](https://developer.woocommerce.com/2024/06/18/introducing-coming-soon-mode/). For site visibility settings, please refer to the [admin documentation](https://woocommerce.com/document/configuring-woocommerce-settings/coming-soon-mode/). ## Introduction @@ -49,8 +49,8 @@ function sync_coming_soon_to_other_plugins( $old_value, $new_value, $option ) { $is_enabled = $new_value === 'yes'; // Implement your logic to sync coming soon status. - if ( function_exists( 'set_your_plugin_status' ) ) { - set_your_plugin_status( $is_enabled ); + if ( function_exists( 'your_plugin_set_coming_soon' ) ) { + your_plugin_set_coming_soon( $is_enabled ); } } ``` @@ -84,8 +84,8 @@ function sync_coming_soon_to_other_plugins( $old_value, $new_value, $option ) { $is_enabled = $new_value === 'yes'; // Implement your logic to sync coming soon status. - if ( function_exists( 'set_your_plugin_status' ) ) { - set_your_plugin_status( $is_enabled ); + if ( function_exists( 'your_plugin_set_coming_soon' ) ) { + your_plugin_set_coming_soon( $is_enabled ); } } @@ -108,6 +108,38 @@ function sync_coming_soon_from_other_plugins( $is_enabled ) { } ``` +#### One-way binding with option override + +We could also programmatically bind the coming soon option from another plugin by overriding the `woocommerce_coming_soon` option. This is advantageous since it simplifies state management and prevents possible out-of-sync issues. + +In the following example, we're binding the coming soon option from another plugin by overriding the `woocommerce_coming_soon` option. + +```php +add_filter( 'pre_option_woocommerce_coming_soon', 'override_option_woocommerce_coming_soon' ); + +function override_option_woocommerce_coming_soon( $current_value ) { + // Implement your logic to sync coming soon status. + if ( function_exists( 'your_plugin_is_coming_soon' ) ) { + return your_plugin_is_coming_soon() ? 'yes' : 'no'; + } + return $current_value; +} + +add_filter( 'pre_update_option_woocommerce_coming_soon', 'override_update_woocommerce_coming_soon', 10, 2 ); + +function override_update_woocommerce_coming_soon( $new_value, $old_value ) { + // Check user capability. + if ( ! current_user_can( 'manage_options' ) ) { + wp_die( 'You do not have sufficient permissions to access this page.' ); + } + + // Implement your logic to sync coming soon status. + if ( function_exists( 'your_plugin_set_coming_soon' ) ) { + your_plugin_set_coming_soon( $new_value === 'yes' ); + } +} +``` + ### Custom exclusions filter It is possible for developers to add custom exclusions that bypass the coming soon protection. This is useful for exclusions like always bypassing the screen on a specific IP address, or making a specific landing page available. @@ -134,3 +166,35 @@ add_filter( 'woocommerce_coming_soon_exclude', function( $is_excluded ) { return $is_excluded; }, 10 ); ``` + +#### Custom share links + +The following example shows how to integrate with a custom share code. We recommend using cookies or other storage to persist the access when users navigate across the site: + +```php +add_filter( 'woocommerce_coming_soon_exclude', function( $exclude ) { + // Implement your logic to get and validate share code. + if ( function_exists( 'your_plugin_get_share_code' ) && function_exists( 'your_plugin_is_valid_share_code' ) ) { + $share_code = your_plugin_get_share_code(); + if ( your_plugin_is_valid_share_code( $share_code ) ) { + return true; + } + } + + return $exclude; +} ); +``` + +### Extend "Apply to store pages only" setting + +When using the `Apply to store pages only` setting, you may want to add a custom page to the list of store pages which will be restricted by coming soon mode. You can use the following example to add a custom page: + +```php +add_filter( 'woocommerce_store_pages', function( $pages ) { + $page = get_page_by_path( 'your-page-slug' ); + if ( $page ) { + $pages[] = $page->ID; + } + return $pages; +} ); +``` diff --git a/docs/high-performance-order-storage/guide-large-store.md b/docs/high-performance-order-storage/guide-large-store.md index 75583f42615..dd2b40d159e 100644 --- a/docs/high-performance-order-storage/guide-large-store.md +++ b/docs/high-performance-order-storage/guide-large-store.md @@ -87,7 +87,7 @@ Also, we didn't see a noticeable negative performance impact when keeping synchr ### Switch to HPOS as authoritative -It's time to switch to HPOS. Go to **WooCommerce > Settings > Advanced > Features** and set HPOS to be authoritative (select “**Use the WooCommerce orders tables**"). +It's time to switch to HPOS. Go to **WooCommerce > Settings > Advanced > Features** and set HPOS to be authoritative (select "**Use the WooCommerce orders tables**"). As mentioned above, don't turn off synchronization yet. If there are any issues, the system can be instantaneously reverted to the posts table, resulting in no downtime. @@ -107,7 +107,7 @@ We disable sync on read first because it demands more resources. If your site is ### Switch off sync on write -If everything is working as expected, you can disable sync on write as well. Given sync on read was already disabled, you can disable sync altogether from the settings. As usual, go to **WooCommerce > Settings > Advanced > Features**, and uncheck **“Enable compatibility mode"**. +If everything is working as expected, you can disable sync on write as well. Given sync on read was already disabled, you can disable sync altogether from the settings. As usual, go to **WooCommerce > Settings > Advanced > Features**, and uncheck **"Enable compatibility mode"**. On our high-volume site, we fully disabled sync after 1 week. We still run some manual synchronization (via `wp wc cot sync`) periodically so that we have the opportunity to fall back to posts immediately should anything happen. @@ -118,11 +118,11 @@ Now with synchronization fully disabled, test out various critical flows, check ### Review: Phase 3 Checklist 1. [ ] Plan to be online and monitoring your live site for a period of time. -2. [ ] Enable synchronization with posts set as authoritative: in **WooCommerce > Settings > Advanced > Features** > select “**Use the WordPress posts tables**". +2. [ ] Enable synchronization with posts set as authoritative: in **WooCommerce > Settings > Advanced > Features** > select "**Use the WordPress posts tables**". 3. [ ] Start migration via CLI using the `wp wc cot sync` command. 4. [ ] Monitor for errors during migration; halt or resume as necessary. 5. [ ] Verify migrated data integrity using the verify command `wp wc cot verify_cot_data`. -6. [ ] Enable synchronization with HPOS set as authoritative: in **WooCommerce > Settings > Advanced > Features** > select “Use the **WooCommerce orders tables**". +6. [ ] Enable synchronization with HPOS set as authoritative: in **WooCommerce > Settings > Advanced > Features** > select "Use the **WooCommerce orders tables**". 7. [ ] Test all critical flows, perform checkouts with multiple payment methods, and verify order data accuracy. 8. [ ] Monitor support tickets for any issues. 9. [ ] Disable synchronization on read using the provided snippet: `add_filter( 'woocommerce_hpos_enable_sync_on_read', '__return_false' );` diff --git a/docs/performance/performance-best-practices.md b/docs/performance/performance-best-practices.md index a88896370c4..b47f828754e 100644 --- a/docs/performance/performance-best-practices.md +++ b/docs/performance/performance-best-practices.md @@ -20,7 +20,7 @@ For WooCommerce extensions, performance optimization means ensuring that your co ## Benchmarking Performance -Setting clear performance benchmarks is essential for development and continuous improvement of WooCommerce extensions. A recommended performance standard is achieving a Chrome Core Web Vitals "Performance" score of 90 or above on Woo Express, using tools like the [Chrome Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/). +Setting clear performance benchmarks is essential for development and continuous improvement of WooCommerce extensions. A recommended performance standard is achieving a Chrome Core Web Vitals "Performance" score of 90 or above on a simple Woo site, using tools like the [Chrome Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/). ### Using Accessible Tools for Benchmarking diff --git a/docs/product-collection-block/dom-events.md b/docs/product-collection-block/dom-events.md index cc49b4bb8b9..940e49a929d 100644 --- a/docs/product-collection-block/dom-events.md +++ b/docs/product-collection-block/dom-events.md @@ -10,13 +10,13 @@ tags: how-to This event is triggered when Product Collection block was rendered or re-rendered (e.g. due to page change). -### `detail` parameters +### `wc-blocks_product_list_rendered` - `detail` parameters | Parameter | Type | Default value | Description | | ------------------ | ------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `collection` | string | `undefined` | Collection type. It's `undefined` for "create your own" collections as the type is not specified. For other Core collections it can be one of type: `woocommerce/product-collection/best-sellers`, `woocommerce/product-collection/featured`, `woocommerce/product-collection/new-arrivals`, `woocommerce/product-collection/on-sale`, `woocommerce/product-collection/top-rated`. For custom collections it will hold their name. | -### Example usage +### `wc-blocks_product_list_rendered` - Example usage ```javascript window.document.addEventListener( @@ -27,3 +27,27 @@ window.document.addEventListener( } ); ``` + +## Event: `wc-blocks_viewed_product` + +This event is triggered when some blocks are clicked in order to view product (redirect to product page). + +### `wc-blocks_viewed_product` - `detail` parameters + +| Parameter | Type | Default value | Description | +| ------------------ | ------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `collection` | string | `undefined` | Collection type. It's `undefined` for "create your own" collections as the type is not specified. For other Core collections it can be one of type: `woocommerce/product-collection/best-sellers`, `woocommerce/product-collection/featured`, `woocommerce/product-collection/new-arrivals`, `woocommerce/product-collection/on-sale`, `woocommerce/product-collection/top-rated`. For custom collections it will hold their name. | +| `productId` | number | | Product ID | + +### `wc-blocks_viewed_product` Example usage + +```javascript +window.document.addEventListener( + 'wc-blocks_viewed_product', + ( e ) => { + const { collection, productId } = e.detail; + console.log( collection ) // -> collection name, e.g. "woocommerce/product-collection/featured" or undefined for default one + console.log( productId ) // -> product ID, e.g. 34 + } +); +``` diff --git a/docs/product-collection-block/register-product-collection.md b/docs/product-collection-block/register-product-collection.md index 9f96f791262..677668ba71e 100644 --- a/docs/product-collection-block/register-product-collection.md +++ b/docs/product-collection-block/register-product-collection.md @@ -6,20 +6,20 @@ tags: how-to # Register Product Collection -The `__experimentalRegisterProductCollection` function is part of the `@woocommerce/blocks-registry` package. This function allows third party developers to register a new collection. This function accepts most of the arguments that are accepted by [Block Variation](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-variations/#defining-a-block-variation). +The `__experimentalRegisterProductCollection` function is part of the `@woocommerce/blocks-registry` package. This function allows third party developers to register a new collection. This function accepts most of the arguments that are accepted by [Block Variation](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-variations/#defining-a-block-variation). > [!WARNING] > It's experimental and may change in the future. Please use it with caution. **There are two ways to use this function:** -1. Using `@woocommerce/dependency-extraction-webpack-plugin` in a Webpack configuration: This will allow you to import the function from the package & use it in your code. For example: +1. Using `@woocommerce/dependency-extraction-webpack-plugin` in a Webpack configuration: This will allow you to import the function from the package & use it in your code. For example: ```tsx import { __experimentalRegisterProductCollection } from "@woocommerce/blocks-registry"; ``` -2. Using the global `wc` object: This will allow you to use the function using the global JS object without importing it. For example: +2. Using the global `wc` object: This will allow you to use the function using the global JS object without importing it. For example: ```tsx wc.wcBlocksRegistry.__experimentalRegisterProductCollection({ @@ -113,7 +113,7 @@ __experimentalRegisterProductCollection({ }); ``` -As you can see in the example above, we are registering a new collection with the name `woocommerce/product-collection/my-custom-collection` & title `My Custom Collection`. Here is screenshot of how it will look like: +As you can see in the example above, we are registering a new collection with the name `woocommerce/product-collection/my-custom-collection` & title `My Custom Collection`. Here is screenshot of how it will look like: ![image](https://github.com/woocommerce/woocommerce/assets/16707866/7fddbc02-a6cd-494e-b2f4-13dd5ef9cf96) ### Example 2: Register a new collection with a preview diff --git a/docs/testing/README.md b/docs/testing/README.md index 1ad733872aa..df176bd42cc 100644 --- a/docs/testing/README.md +++ b/docs/testing/README.md @@ -4,7 +4,7 @@ category_slug: testing post_title: Testing --- -Properly setting up your test environment and writing tests when contributing to WooCommrece core are essential parts of our development pipeline. The links below are also included in our [Contributing Guidelines](https://github.com/woocommerce/woocommerce/blob/trunk/.github/CONTRIBUTING.md) on GitHub. +Properly setting up your test environment and writing tests when contributing to WooCommerce core are essential parts of our development pipeline. The links below are also included in our [Contributing Guidelines](https://github.com/woocommerce/woocommerce/blob/trunk/.github/CONTRIBUTING.md) on GitHub. If you have any questions about testing please reach out to the developer community in our public channels([Developer Blog](https://developer.woocommerce.com/blog/), [GitHub Discussions](https://github.com/woocommerce/woocommerce/discussions), or [Community Slack](https://woocommerce.com/community-slack/)). diff --git a/docs/theme-development/template-structure.md b/docs/theme-development/template-structure.md index 4688eb53875..888cd31ca11 100644 --- a/docs/theme-development/template-structure.md +++ b/docs/theme-development/template-structure.md @@ -22,7 +22,7 @@ Below is video walkthrough showing how one may go about updating the template fi ## Template list -The various template files on your WooCommerce site can be found via an FTP client or your hosts file manager, in `/wp-content/plugins/woocommerce/templates/`. Below are links to the current and earlier versions of the WooCommerce template files on Github, where you can view the code exactly as it appears in those files: +The various template files on your WooCommerce site can be found via an FTP client or your hosts file manager, in `/wp-content/plugins/woocommerce/templates/`. Below are links to the current and earlier versions of the WooCommerce template files on Github, where you can view the code exactly as it appears in those files: | Latest Version | Files | | -------------- | ----- | @@ -96,7 +96,7 @@ Below are the links to the files of all major previous WooCommerce versions: ## Changing Templates via Hooks -When you open a template file, you will notice they all contain _hooks_ that allow you to add/move content without needing to edit template files themselves. Hooks are a way for one piece of code to interact/modify another piece of code at specific, pre-defined spots. This method allows implementing a code snippet that “hooks” into a particular a theme location. It avoids upgrade issues, as the template files can be left completely untouched and doesn't require a child theme to be configured. +When you open a template file, you will notice they all contain _hooks_ that allow you to add/move content without needing to edit template files themselves. Hooks are a way for one piece of code to interact/modify another piece of code at specific, pre-defined spots. This method allows implementing a code snippet that "hooks" into a particular a theme location. It avoids upgrade issues, as the template files can be left completely untouched and doesn't require a child theme to be configured. Let's take a look at [/wp-content/plugins/woocommerce/templates/emails/admin-new-order.php](https://github.com/woocommerce/woocommerce/blob/8.9.0/plugins/woocommerce/templates/emails/admin-new-order.php) and see what a hook looks like. Starting on line 30, we see the following code, which is responsible for producing the order details section of the New Order email. @@ -137,7 +137,7 @@ The copied file will now override the WooCommerce default template file, so you --- -**Note** A (desirable) side-effect of your templates being upgrade-safe is that WooCommerce core templates will update, but your custom overrides will not. You may occassionally see notices in your System Status report that says, e.g. “version 3.5.0 is out of date. The core version is 3.7.0″. Should that happen, follow the Fixing Outdated WooCommerce Templates guide to bring them in line. +**Note** A (desirable) side-effect of your templates being upgrade-safe is that WooCommerce core templates will update, but your custom overrides will not. You may occassionally see notices in your System Status report that says, e.g. "version 3.5.0 is out of date. The core version is 3.7.0". Should that happen, follow the Fixing Outdated WooCommerce Templates guide to bring them in line. --- diff --git a/docs/ux-guidelines-extensions/navigation.md b/docs/ux-guidelines-extensions/navigation.md index 428d63bdca9..52b43a9b556 100644 --- a/docs/ux-guidelines-extensions/navigation.md +++ b/docs/ux-guidelines-extensions/navigation.md @@ -7,10 +7,7 @@ menu_title: Navigation Examples: -- If your extension is extending a component within WooCommerce, it should live within either the Extensions navigation drawer (in Woo Express stores), or directly within that category's section. - -Extensions drawer (Woo Express) -![Navigation extensions drawer](https://developer.woocommerce.com/docs/wp-content/uploads/sites/3/2024/01/Image-1224x572-1.png) +- If your extension is extending a component within WooCommerce, it should live directly within that category's section. ![Navigation category](https://developer.woocommerce.com/docs/wp-content/uploads/sites/3/2024/01/Image-1242x764-1.png) diff --git a/packages/js/components/changelog/upgrade-storybook_and_add_pages_workflow b/packages/js/components/changelog/upgrade-storybook_and_add_pages_workflow new file mode 100644 index 00000000000..579b91e0c80 --- /dev/null +++ b/packages/js/components/changelog/upgrade-storybook_and_add_pages_workflow @@ -0,0 +1,4 @@ +Significance: minor +Type: update + +Update storybook file format in support with Storybook 7 story indexer. diff --git a/packages/js/components/package.json b/packages/js/components/package.json index 49781d18732..b57050f50c4 100644 --- a/packages/js/components/package.json +++ b/packages/js/components/package.json @@ -132,18 +132,10 @@ "devDependencies": { "@babel/core": "^7.23.5", "@babel/runtime": "^7.23.5", - "@storybook/addon-actions": "6.5.17-alpha.0", "@storybook/addon-console": "^1.2.3", - "@storybook/addon-controls": "6.5.17-alpha.0", - "@storybook/addon-docs": "6.5.17-alpha.0", - "@storybook/addon-knobs": "^6.4.0", - "@storybook/addon-links": "6.5.17-alpha.0", - "@storybook/addons": "6.5.17-alpha.0", - "@storybook/api": "6.5.17-alpha.0", - "@storybook/components": "6.5.17-alpha.0", - "@storybook/core-events": "6.5.17-alpha.0", + "@storybook/addon-docs": "7.6.19", + "@storybook/addon-links": "7.6.19", "@storybook/react": "6.5.17-alpha.0", - "@storybook/theming": "6.5.17-alpha.0", "@testing-library/dom": "8.11.3", "@testing-library/jest-dom": "5.16.2", "@testing-library/react": "12.1.3", diff --git a/packages/js/components/src/abbreviated-card/stories/index.js b/packages/js/components/src/abbreviated-card/stories/abbreviated-card.story.js similarity index 100% rename from packages/js/components/src/abbreviated-card/stories/index.js rename to packages/js/components/src/abbreviated-card/stories/abbreviated-card.story.js diff --git a/packages/js/components/src/advanced-filters/stories/index.js b/packages/js/components/src/advanced-filters/stories/advanced-filters.story.js similarity index 100% rename from packages/js/components/src/advanced-filters/stories/index.js rename to packages/js/components/src/advanced-filters/stories/advanced-filters.story.js diff --git a/packages/js/components/src/analytics/error/stories/index.tsx b/packages/js/components/src/analytics/error/stories/analytics-error.story.tsx similarity index 100% rename from packages/js/components/src/analytics/error/stories/index.tsx rename to packages/js/components/src/analytics/error/stories/analytics-error.story.tsx diff --git a/packages/js/components/src/animation-slider/stories/index.js b/packages/js/components/src/animation-slider/stories/animation-slider.story.js similarity index 100% rename from packages/js/components/src/animation-slider/stories/index.js rename to packages/js/components/src/animation-slider/stories/animation-slider.story.js diff --git a/packages/js/components/src/badge/stories/index.tsx b/packages/js/components/src/badge/stories/badge.story.tsx similarity index 100% rename from packages/js/components/src/badge/stories/index.tsx rename to packages/js/components/src/badge/stories/badge.story.tsx diff --git a/packages/js/components/src/calendar/stories/date-picker.js b/packages/js/components/src/calendar/stories/date-picker.story.js similarity index 100% rename from packages/js/components/src/calendar/stories/date-picker.js rename to packages/js/components/src/calendar/stories/date-picker.story.js diff --git a/packages/js/components/src/calendar/stories/date-range.js b/packages/js/components/src/calendar/stories/date-range.story.js similarity index 100% rename from packages/js/components/src/calendar/stories/date-range.js rename to packages/js/components/src/calendar/stories/date-range.story.js diff --git a/packages/js/components/src/chart/stories/index.js b/packages/js/components/src/chart/stories/chart.story.js similarity index 100% rename from packages/js/components/src/chart/stories/index.js rename to packages/js/components/src/chart/stories/chart.story.js diff --git a/packages/js/components/src/collapsible-content/stories/index.tsx b/packages/js/components/src/collapsible-content/stories/collapsible-content.story.tsx similarity index 100% rename from packages/js/components/src/collapsible-content/stories/index.tsx rename to packages/js/components/src/collapsible-content/stories/collapsible-content.story.tsx diff --git a/packages/js/components/src/compare-filter/stories/index.js b/packages/js/components/src/compare-filter/stories/compare-filter.story.js similarity index 100% rename from packages/js/components/src/compare-filter/stories/index.js rename to packages/js/components/src/compare-filter/stories/compare-filter.story.js diff --git a/packages/js/components/src/compare-filter/test/compare-filter.js b/packages/js/components/src/compare-filter/test/compare-filter.js index 2980de4f4cd..18ab9b36057 100644 --- a/packages/js/components/src/compare-filter/test/compare-filter.js +++ b/packages/js/components/src/compare-filter/test/compare-filter.js @@ -7,7 +7,7 @@ import { createElement } from '@wordpress/element'; /** * Internal dependencies */ -import { Basic } from '../stories/index'; +import { Basic } from '../stories/compare-filter.story'; import { CompareFilter } from '../index'; import Search from '../../search'; import productAutocompleter from '../../search/autocompleters/product'; diff --git a/packages/js/components/src/date-range-filter-picker/stories/index.js b/packages/js/components/src/date-range-filter-picker/stories/date-range-filter-picker.story.js similarity index 100% rename from packages/js/components/src/date-range-filter-picker/stories/index.js rename to packages/js/components/src/date-range-filter-picker/stories/date-range-filter-picker.story.js diff --git a/packages/js/components/src/date-time-picker-control/stories/index.tsx b/packages/js/components/src/date-time-picker-control/stories/date-time-picker-control.story.tsx similarity index 100% rename from packages/js/components/src/date-time-picker-control/stories/index.tsx rename to packages/js/components/src/date-time-picker-control/stories/date-time-picker-control.story.tsx diff --git a/packages/js/components/src/date/stories/index.js b/packages/js/components/src/date/stories/date.story.js similarity index 100% rename from packages/js/components/src/date/stories/index.js rename to packages/js/components/src/date/stories/date.story.js diff --git a/packages/js/components/src/dropdown-button/stories/index.js b/packages/js/components/src/dropdown-button/stories/index.story.js similarity index 100% rename from packages/js/components/src/dropdown-button/stories/index.js rename to packages/js/components/src/dropdown-button/stories/index.story.js diff --git a/packages/js/components/src/dynamic-form/stories/index.js b/packages/js/components/src/dynamic-form/stories/index.story.js similarity index 100% rename from packages/js/components/src/dynamic-form/stories/index.js rename to packages/js/components/src/dynamic-form/stories/index.story.js diff --git a/packages/js/components/src/ellipsis-menu/stories/index.js b/packages/js/components/src/ellipsis-menu/stories/ellipsis-menu.story.js similarity index 100% rename from packages/js/components/src/ellipsis-menu/stories/index.js rename to packages/js/components/src/ellipsis-menu/stories/ellipsis-menu.story.js diff --git a/packages/js/components/src/empty-content/stories/index.js b/packages/js/components/src/empty-content/stories/empty-content.story.js similarity index 100% rename from packages/js/components/src/empty-content/stories/index.js rename to packages/js/components/src/empty-content/stories/empty-content.story.js diff --git a/packages/js/components/src/error-boundary/stories/index.tsx b/packages/js/components/src/error-boundary/stories/error-boundary.story.tsx similarity index 100% rename from packages/js/components/src/error-boundary/stories/index.tsx rename to packages/js/components/src/error-boundary/stories/error-boundary.story.tsx diff --git a/packages/js/components/src/experimental-select-control/stories/index.tsx b/packages/js/components/src/experimental-select-control/stories/select-control.story.tsx similarity index 100% rename from packages/js/components/src/experimental-select-control/stories/index.tsx rename to packages/js/components/src/experimental-select-control/stories/select-control.story.tsx diff --git a/packages/js/components/src/experimental-select-tree-control/stories/index.tsx b/packages/js/components/src/experimental-select-tree-control/stories/select-tree-control.story.tsx similarity index 100% rename from packages/js/components/src/experimental-select-tree-control/stories/index.tsx rename to packages/js/components/src/experimental-select-tree-control/stories/select-tree-control.story.tsx diff --git a/packages/js/components/src/experimental-tree-control/stories/index.tsx b/packages/js/components/src/experimental-tree-control/stories/tree-control.story.tsx similarity index 100% rename from packages/js/components/src/experimental-tree-control/stories/index.tsx rename to packages/js/components/src/experimental-tree-control/stories/tree-control.story.tsx diff --git a/packages/js/components/src/filter-picker/stories/index.js b/packages/js/components/src/filter-picker/stories/filter-picker.story.js similarity index 100% rename from packages/js/components/src/filter-picker/stories/index.js rename to packages/js/components/src/filter-picker/stories/filter-picker.story.js diff --git a/packages/js/components/src/filter-picker/test/index.js b/packages/js/components/src/filter-picker/test/index.js index 62d024f199f..a6ac33837ee 100644 --- a/packages/js/components/src/filter-picker/test/index.js +++ b/packages/js/components/src/filter-picker/test/index.js @@ -8,7 +8,7 @@ import { createElement } from '@wordpress/element'; /** * Internal dependencies */ -import { Basic } from '../stories/index'; +import { Basic } from '../stories/filter-picker.story'; import FilterPicker from '../index'; import Search from '../../search'; import productAutocompleter from '../../search/autocompleters/product'; diff --git a/packages/js/components/src/filters/stories/index.js b/packages/js/components/src/filters/stories/filters.story.js similarity index 100% rename from packages/js/components/src/filters/stories/index.js rename to packages/js/components/src/filters/stories/filters.story.js diff --git a/packages/js/components/src/flag/stories/index.js b/packages/js/components/src/flag/stories/flag.story.js similarity index 100% rename from packages/js/components/src/flag/stories/index.js rename to packages/js/components/src/flag/stories/flag.story.js diff --git a/packages/js/components/src/form-section/stories/index.tsx b/packages/js/components/src/form-section/stories/form-section.story.tsx similarity index 100% rename from packages/js/components/src/form-section/stories/index.tsx rename to packages/js/components/src/form-section/stories/form-section.story.tsx diff --git a/packages/js/components/src/form/stories/index.js b/packages/js/components/src/form/stories/form.story.js similarity index 100% rename from packages/js/components/src/form/stories/index.js rename to packages/js/components/src/form/stories/form.story.js diff --git a/packages/js/components/src/image-gallery/stories/index.tsx b/packages/js/components/src/image-gallery/stories/image-gallery.story.tsx similarity index 96% rename from packages/js/components/src/image-gallery/stories/index.tsx rename to packages/js/components/src/image-gallery/stories/image-gallery.story.tsx index 82cd856c0ee..6481ef732d6 100644 --- a/packages/js/components/src/image-gallery/stories/index.tsx +++ b/packages/js/components/src/image-gallery/stories/image-gallery.story.tsx @@ -8,7 +8,7 @@ import React from 'react'; * Internal dependencies */ import { ImageGallery, ImageGalleryItem } from '../'; -import { MockMediaUpload } from '../../media-uploader/stories/index.tsx'; +import { MockMediaUpload } from '../../media-uploader/stories/mock-media-uploader'; export const Basic: React.FC = () => { return ( diff --git a/packages/js/components/src/image-upload/stories/index.js b/packages/js/components/src/image-upload/stories/image-upload.story.js similarity index 100% rename from packages/js/components/src/image-upload/stories/index.js rename to packages/js/components/src/image-upload/stories/image-upload.story.js diff --git a/packages/js/components/src/link/stories/index.tsx b/packages/js/components/src/link/stories/link.story.tsx similarity index 100% rename from packages/js/components/src/link/stories/index.tsx rename to packages/js/components/src/link/stories/link.story.tsx diff --git a/packages/js/components/src/list-item/stories/index.tsx b/packages/js/components/src/list-item/stories/list-item.story.tsx similarity index 100% rename from packages/js/components/src/list-item/stories/index.tsx rename to packages/js/components/src/list-item/stories/list-item.story.tsx diff --git a/packages/js/components/src/list/stories/index.js b/packages/js/components/src/list/stories/list.story.js similarity index 100% rename from packages/js/components/src/list/stories/index.js rename to packages/js/components/src/list/stories/list.story.js diff --git a/packages/js/components/src/media-uploader/stories/index.tsx b/packages/js/components/src/media-uploader/stories/media-uploader.story.tsx similarity index 76% rename from packages/js/components/src/media-uploader/stories/index.tsx rename to packages/js/components/src/media-uploader/stories/media-uploader.story.tsx index 9f83de937f9..b0ddb24e79f 100644 --- a/packages/js/components/src/media-uploader/stories/index.tsx +++ b/packages/js/components/src/media-uploader/stories/media-uploader.story.tsx @@ -2,7 +2,7 @@ * External dependencies */ import React, { createElement } from 'react'; -import { Modal, Notice } from '@wordpress/components'; +import { Notice } from '@wordpress/components'; import { MediaItem } from '@wordpress/media-utils'; import { useState } from '@wordpress/element'; import { cloudUpload } from '@wordpress/icons'; @@ -12,59 +12,7 @@ import { cloudUpload } from '@wordpress/icons'; */ import { MediaUploader } from '../'; import { File } from '../types'; - -const MockMediaUpload = ( { onSelect, render } ) => { - const [ isOpen, setOpen ] = useState( false ); - - return ( - <> - { render( { - open: () => setOpen( true ), - } ) } - { isOpen && ( - { - setOpen( false ); - event.stopPropagation(); - } } - > -

- Use the default built-in{ ' ' } - MediaUploadComponent prop to render the WP - Media Modal. -

- { Array( ...Array( 3 ) ).map( ( n, i ) => { - return ( - - ); - } ) } -
- ) } - - ); -}; +import { MockMediaUpload } from './mock-media-uploader'; const ImageGallery = ( { images }: { images: File[] } ) => { return ( diff --git a/packages/js/components/src/media-uploader/stories/mock-media-uploader.tsx b/packages/js/components/src/media-uploader/stories/mock-media-uploader.tsx new file mode 100644 index 00000000000..a31460877f5 --- /dev/null +++ b/packages/js/components/src/media-uploader/stories/mock-media-uploader.tsx @@ -0,0 +1,59 @@ +/** + * External dependencies + */ +import React, { createElement } from 'react'; +import { Modal } from '@wordpress/components'; +import { useState } from '@wordpress/element'; + +export const MockMediaUpload = ( { onSelect, render } ) => { + const [ isOpen, setOpen ] = useState( false ); + + return ( + <> + { render( { + open: () => setOpen( true ), + } ) } + { isOpen && ( + { + setOpen( false ); + event.stopPropagation(); + } } + > +

+ Use the default built-in{ ' ' } + MediaUploadComponent prop to render the WP + Media Modal. +

+ { Array( ...Array( 3 ) ).map( ( n, i ) => { + return ( + + ); + } ) } +
+ ) } + + ); +}; diff --git a/packages/js/components/src/order-status/stories/index.js b/packages/js/components/src/order-status/stories/order-status.story.js similarity index 100% rename from packages/js/components/src/order-status/stories/index.js rename to packages/js/components/src/order-status/stories/order-status.story.js diff --git a/packages/js/components/src/pagination/stories/index.js b/packages/js/components/src/pagination/stories/pagination.story.js similarity index 100% rename from packages/js/components/src/pagination/stories/index.js rename to packages/js/components/src/pagination/stories/pagination.story.js diff --git a/packages/js/components/src/phone-number-input/stories/index.tsx b/packages/js/components/src/phone-number-input/stories/phone-number-input.story.tsx similarity index 100% rename from packages/js/components/src/phone-number-input/stories/index.tsx rename to packages/js/components/src/phone-number-input/stories/phone-number-input.story.tsx diff --git a/packages/js/components/src/pill/stories/index.js b/packages/js/components/src/pill/stories/pill.story.js similarity index 100% rename from packages/js/components/src/pill/stories/index.js rename to packages/js/components/src/pill/stories/pill.story.js diff --git a/packages/js/components/src/plugins/index.tsx b/packages/js/components/src/plugins/index.tsx index df2561ea28f..a330bc8cbd2 100644 --- a/packages/js/components/src/plugins/index.tsx +++ b/packages/js/components/src/plugins/index.tsx @@ -11,7 +11,12 @@ import { } from '@wordpress/element'; import { SyntheticEvent, useCallback } from 'react'; import { useDispatch, useSelect } from '@wordpress/data'; -import { PLUGINS_STORE_NAME, InstallPluginsResponse } from '@woocommerce/data'; +import { PLUGINS_STORE_NAME } from '@woocommerce/data'; +import type { + InstallPluginsResponse, + PluginSelectors, + PluginActions, +} from '@woocommerce/data'; type PluginsProps = { onComplete: ( @@ -52,10 +57,14 @@ export const Plugins = ( { const [ hasErrors, setHasErrors ] = useState( false ); // Tracks action so that multiple instances of this button don't all light up when one is clicked const [ hasBeenClicked, setHasBeenClicked ] = useState( false ); - const { installAndActivatePlugins } = useDispatch( PLUGINS_STORE_NAME ); + const { installAndActivatePlugins }: PluginActions = + useDispatch( PLUGINS_STORE_NAME ); const { isRequesting } = useSelect( ( select ) => { - const { getActivePlugins, getInstalledPlugins, isPluginsRequesting } = - select( PLUGINS_STORE_NAME ); + const { + getActivePlugins, + getInstalledPlugins, + isPluginsRequesting, + }: PluginSelectors = select( PLUGINS_STORE_NAME ); return { isRequesting: @@ -64,7 +73,7 @@ export const Plugins = ( { activePlugins: getActivePlugins(), installedPlugins: getInstalledPlugins(), }; - } ); + }, [] ); const handleErrors = useCallback( ( errors: unknown, response: InstallPluginsResponse ) => { diff --git a/packages/js/components/src/plugins/test/index.js b/packages/js/components/src/plugins/test/index.js index 1aad94cd6d6..30c3f4f41cd 100644 --- a/packages/js/components/src/plugins/test/index.js +++ b/packages/js/components/src/plugins/test/index.js @@ -13,7 +13,7 @@ import { useDispatch } from '@wordpress/data'; import { Plugins } from '../index'; jest.mock( '@wordpress/data', () => ( { - ...jest.requireActual( '@wordpress/data' ), + __esModule: true, useDispatch: jest .fn() .mockReturnValue( { installAndActivatePlugins: jest.fn() } ), diff --git a/packages/js/components/src/product-fields/store/index.ts b/packages/js/components/src/product-fields/store/index.ts index 9c53ed96870..95fb84fbccf 100644 --- a/packages/js/components/src/product-fields/store/index.ts +++ b/packages/js/components/src/product-fields/store/index.ts @@ -12,7 +12,6 @@ import * as actions from './actions'; import { STORE_NAME } from './constants'; export const store = createReduxStore( STORE_NAME, { - // @ts-expect-error reducer has correct format. reducer, selectors, actions, diff --git a/packages/js/components/src/product-fields/store/types.ts b/packages/js/components/src/product-fields/store/types.ts index ebab49c0509..1b48e9ca1f5 100644 --- a/packages/js/components/src/product-fields/store/types.ts +++ b/packages/js/components/src/product-fields/store/types.ts @@ -8,6 +8,7 @@ export type ProductFieldDefinition = { type?: HTMLInputTypeAttribute; // eslint-disable-next-line @typescript-eslint/no-explicit-any render?: ComponentType; + attributes?: Record< string, string >; }; export type ProductFieldState = { diff --git a/packages/js/components/src/product-fields/stories/index.tsx b/packages/js/components/src/product-fields/stories/product-fields.story.tsx similarity index 100% rename from packages/js/components/src/product-fields/stories/index.tsx rename to packages/js/components/src/product-fields/stories/product-fields.story.tsx diff --git a/packages/js/components/src/product-image/stories/index.tsx b/packages/js/components/src/product-image/stories/product-image.story.tsx similarity index 100% rename from packages/js/components/src/product-image/stories/index.tsx rename to packages/js/components/src/product-image/stories/product-image.story.tsx diff --git a/packages/js/components/src/progress-bar/stories/index.tsx b/packages/js/components/src/progress-bar/stories/progress-bar.story.tsx similarity index 100% rename from packages/js/components/src/progress-bar/stories/index.tsx rename to packages/js/components/src/progress-bar/stories/progress-bar.story.tsx diff --git a/packages/js/components/src/rating/stories/index.tsx b/packages/js/components/src/rating/stories/rating.story.tsx similarity index 100% rename from packages/js/components/src/rating/stories/index.tsx rename to packages/js/components/src/rating/stories/rating.story.tsx diff --git a/packages/js/components/src/rich-text-editor/editor-writing-flow.tsx b/packages/js/components/src/rich-text-editor/editor-writing-flow.tsx index 2726dc0cee8..1333a7f3c3c 100644 --- a/packages/js/components/src/rich-text-editor/editor-writing-flow.tsx +++ b/packages/js/components/src/rich-text-editor/editor-writing-flow.tsx @@ -43,7 +43,7 @@ export const EditorWritingFlow = ( { editorMode: __unstableGetEditorMode(), selectedBlockClientIds: getSelectedBlockClientIds(), }; - } ); + }, [] ); // This is a workaround to prevent focusing the block on initialization. // Changing to a mode other than "edit" ensures that no initial position diff --git a/packages/js/components/src/rich-text-editor/stories/index.tsx b/packages/js/components/src/rich-text-editor/stories/rich-text-editor.story.tsx similarity index 100% rename from packages/js/components/src/rich-text-editor/stories/index.tsx rename to packages/js/components/src/rich-text-editor/stories/rich-text-editor.story.tsx diff --git a/packages/js/components/src/scroll-to/stories/index.js b/packages/js/components/src/scroll-to/stories/scroll-to.story.js similarity index 100% rename from packages/js/components/src/scroll-to/stories/index.js rename to packages/js/components/src/scroll-to/stories/scroll-to.story.js diff --git a/packages/js/components/src/search-list-control/stories/index.js b/packages/js/components/src/search-list-control/stories/search-list-control.story.js similarity index 100% rename from packages/js/components/src/search-list-control/stories/index.js rename to packages/js/components/src/search-list-control/stories/search-list-control.story.js diff --git a/packages/js/components/src/search/stories/index.js b/packages/js/components/src/search/stories/search.story.js similarity index 100% rename from packages/js/components/src/search/stories/index.js rename to packages/js/components/src/search/stories/search.story.js diff --git a/packages/js/components/src/section-header/stories/index.js b/packages/js/components/src/section-header/stories/section-header.story.js similarity index 100% rename from packages/js/components/src/section-header/stories/index.js rename to packages/js/components/src/section-header/stories/section-header.story.js diff --git a/packages/js/components/src/section/stories/index.tsx b/packages/js/components/src/section/stories/section.story.tsx similarity index 100% rename from packages/js/components/src/section/stories/index.tsx rename to packages/js/components/src/section/stories/section.story.tsx diff --git a/packages/js/components/src/segmented-selection/stories/index.js b/packages/js/components/src/segmented-selection/stories/segmented-selection.story.js similarity index 100% rename from packages/js/components/src/segmented-selection/stories/index.js rename to packages/js/components/src/segmented-selection/stories/segmented-selection.story.js diff --git a/packages/js/components/src/select-control/stories/index.tsx b/packages/js/components/src/select-control/stories/select-control.story.tsx similarity index 100% rename from packages/js/components/src/select-control/stories/index.tsx rename to packages/js/components/src/select-control/stories/select-control.story.tsx diff --git a/packages/js/components/src/sortable/stories/index.tsx b/packages/js/components/src/sortable/stories/sortable.story.tsx similarity index 100% rename from packages/js/components/src/sortable/stories/index.tsx rename to packages/js/components/src/sortable/stories/sortable.story.tsx diff --git a/packages/js/components/src/spinner/stories/index.js b/packages/js/components/src/spinner/stories/spinner.story.js similarity index 100% rename from packages/js/components/src/spinner/stories/index.js rename to packages/js/components/src/spinner/stories/spinner.story.js diff --git a/packages/js/components/src/stepper/stories/index.js b/packages/js/components/src/stepper/stories/stepper.story.js similarity index 100% rename from packages/js/components/src/stepper/stories/index.js rename to packages/js/components/src/stepper/stories/stepper.story.js diff --git a/packages/js/components/src/summary/stories/index.js b/packages/js/components/src/summary/stories/summary.story.js similarity index 100% rename from packages/js/components/src/summary/stories/index.js rename to packages/js/components/src/summary/stories/summary.story.js diff --git a/packages/js/components/src/table/stories/empty-table.tsx b/packages/js/components/src/table/stories/empty-table.story.tsx similarity index 100% rename from packages/js/components/src/table/stories/empty-table.tsx rename to packages/js/components/src/table/stories/empty-table.story.tsx diff --git a/packages/js/components/src/table/stories/table-card.tsx b/packages/js/components/src/table/stories/table-card.story.tsx similarity index 100% rename from packages/js/components/src/table/stories/table-card.tsx rename to packages/js/components/src/table/stories/table-card.story.tsx diff --git a/packages/js/components/src/table/stories/table-placeholder.tsx b/packages/js/components/src/table/stories/table-placeholder.story.tsx similarity index 100% rename from packages/js/components/src/table/stories/table-placeholder.tsx rename to packages/js/components/src/table/stories/table-placeholder.story.tsx diff --git a/packages/js/components/src/table/stories/table-summary-placeholder.tsx b/packages/js/components/src/table/stories/table-summary-placeholder.story.tsx similarity index 100% rename from packages/js/components/src/table/stories/table-summary-placeholder.tsx rename to packages/js/components/src/table/stories/table-summary-placeholder.story.tsx diff --git a/packages/js/components/src/table/stories/table-summary.jsx b/packages/js/components/src/table/stories/table-summary.story.jsx similarity index 100% rename from packages/js/components/src/table/stories/table-summary.jsx rename to packages/js/components/src/table/stories/table-summary.story.jsx diff --git a/packages/js/components/src/table/stories/table.tsx b/packages/js/components/src/table/stories/table.story.tsx similarity index 100% rename from packages/js/components/src/table/stories/table.tsx rename to packages/js/components/src/table/stories/table.story.tsx diff --git a/packages/js/components/src/tag/stories/index.tsx b/packages/js/components/src/tag/stories/tag.story.tsx similarity index 100% rename from packages/js/components/src/tag/stories/index.tsx rename to packages/js/components/src/tag/stories/tag.story.tsx diff --git a/packages/js/components/src/text-control-with-affixes/stories/index.js b/packages/js/components/src/text-control-with-affixes/stories/text-control-with-affixes.story.js similarity index 100% rename from packages/js/components/src/text-control-with-affixes/stories/index.js rename to packages/js/components/src/text-control-with-affixes/stories/text-control-with-affixes.story.js diff --git a/packages/js/components/src/text-control/stories/index.js b/packages/js/components/src/text-control/stories/text-control.story.js similarity index 100% rename from packages/js/components/src/text-control/stories/index.js rename to packages/js/components/src/text-control/stories/text-control.story.js diff --git a/packages/js/components/src/timeline/stories/index.js b/packages/js/components/src/timeline/stories/index.js deleted file mode 100644 index a995ea3fd18..00000000000 --- a/packages/js/components/src/timeline/stories/index.js +++ /dev/null @@ -1,107 +0,0 @@ -/** - * External dependencies - */ -import { date, text } from '@storybook/addon-knobs'; -import GridIcon from 'gridicons'; - -/** - * Internal dependencies - */ -import Timeline, { orderByOptions } from '../'; - -export default { - title: 'WooCommerce Admin/components/Timeline', - component: Timeline, -}; - -export const Empty = () => ; - -const itemDate = ( label, value ) => { - const d = date( label, value ); - return new Date( d ); -}; - -export const Filled = () => ( - - { text( 'event 1, first event', 'p element in body' ) } -

, - text( 'event 1, second event', 'string in body' ), - ], - headline: ( -

{ text( 'event 1, headline', 'p tag in headline' ) }

- ), - icon: ( - - ), - hideTimestamp: true, - }, - { - date: itemDate( - 'event 2 date', - new Date( 2020, 0, 20, 23, 45 ) - ), - body: [], - headline: ( - - { text( 'event 2, headline', 'span in headline' ) } - - ), - icon: ( - - ), - }, - { - date: itemDate( - 'event 3 date', - new Date( 2020, 0, 22, 15, 13 ) - ), - body: [ - - { text( 'event 3, second event', 'span in body' ) } - , - ], - headline: text( 'event 3, headline', 'string in headline' ), - icon: ( - - ), - }, - { - date: itemDate( - 'event 4 date', - new Date( 2020, 0, 17, 1, 45 ) - ), - headline: text( - 'event 4, headline', - 'undefined body and string headline' - ), - icon: ( - - ), - }, - ] } - /> -); diff --git a/packages/js/components/src/timeline/stories/timeline.story.js b/packages/js/components/src/timeline/stories/timeline.story.js new file mode 100644 index 00000000000..3efe17fd676 --- /dev/null +++ b/packages/js/components/src/timeline/stories/timeline.story.js @@ -0,0 +1,71 @@ +/** + * External dependencies + */ +import GridIcon from 'gridicons'; + +/** + * Internal dependencies + */ +import Timeline, { orderByOptions } from '../'; + +export const Filled = () => { + return ( + p element in body

, + 'string in body', + ], + headline:

p tag in headline

, + icon: ( + + ), + hideTimestamp: true, + }, + { + date: new Date( 2020, 0, 20, 23, 45 ), + body: [], + headline: span in headline, + icon: ( + + ), + }, + { + date: new Date( 2020, 0, 22, 15, 13 ), + body: [ span in body ], + headline: 'string in headline', + icon: ( + + ), + }, + { + date: new Date( 2020, 0, 17, 1, 45 ), + headline: 'undefined body and string headline', + icon: , + }, + ] } + /> + ); +}; + +export default { + title: 'WooCommerce Admin/components/Timeline', + component: Filled, +}; + +export const Empty = () => ; diff --git a/packages/js/components/src/tooltip/stories/index.tsx b/packages/js/components/src/tooltip/stories/tooltip.story.tsx similarity index 100% rename from packages/js/components/src/tooltip/stories/index.tsx rename to packages/js/components/src/tooltip/stories/tooltip.story.tsx diff --git a/packages/js/components/src/tour-kit/stories/index.tsx b/packages/js/components/src/tour-kit/stories/tour-kit.story.tsx similarity index 100% rename from packages/js/components/src/tour-kit/stories/index.tsx rename to packages/js/components/src/tour-kit/stories/tour-kit.story.tsx diff --git a/packages/js/components/src/tree-select-control/stories/index.js b/packages/js/components/src/tree-select-control/stories/tree-select-control.story.js similarity index 100% rename from packages/js/components/src/tree-select-control/stories/index.js rename to packages/js/components/src/tree-select-control/stories/tree-select-control.story.js diff --git a/packages/js/components/src/view-more-list/stories/index.js b/packages/js/components/src/view-more-list/stories/view-more-list.story.js similarity index 100% rename from packages/js/components/src/view-more-list/stories/index.js rename to packages/js/components/src/view-more-list/stories/view-more-list.story.js diff --git a/packages/js/components/src/web-preview/stories/index.js b/packages/js/components/src/web-preview/stories/web-preview.story.js similarity index 100% rename from packages/js/components/src/web-preview/stories/index.js rename to packages/js/components/src/web-preview/stories/web-preview.story.js diff --git a/packages/js/data/changelog/update-51103-woopayments-incentive-to-tracks-props b/packages/js/data/changelog/update-51103-woopayments-incentive-to-tracks-props new file mode 100644 index 00000000000..c0d87293d0e --- /dev/null +++ b/packages/js/data/changelog/update-51103-woopayments-incentive-to-tracks-props @@ -0,0 +1,4 @@ +Significance: patch +Type: update + +Add wooPaymentsIncentiveId to the TaskType additionalData. diff --git a/packages/js/data/changelog/upgrade-storybook_and_add_pages_workflow b/packages/js/data/changelog/upgrade-storybook_and_add_pages_workflow new file mode 100644 index 00000000000..f6bdc7a7044 --- /dev/null +++ b/packages/js/data/changelog/upgrade-storybook_and_add_pages_workflow @@ -0,0 +1,4 @@ +Significance: minor +Type: update + +Export plugin related data store types for selectors and actions. diff --git a/packages/js/data/src/index.ts b/packages/js/data/src/index.ts index 266c103813a..9b75260376a 100644 --- a/packages/js/data/src/index.ts +++ b/packages/js/data/src/index.ts @@ -85,6 +85,8 @@ export { } from './product-form/types'; export * from './onboarding/types'; export * from './plugins/types'; +export { PluginSelectors } from './plugins/selectors'; +export { ActionDispatchers as PluginActions } from './plugins/actions'; export * from './products/types'; export type { PartialProductVariation, diff --git a/packages/js/data/src/onboarding/types.ts b/packages/js/data/src/onboarding/types.ts index a39fa627e63..7e3e3058c73 100644 --- a/packages/js/data/src/onboarding/types.ts +++ b/packages/js/data/src/onboarding/types.ts @@ -35,6 +35,7 @@ export type TaskType = { stripeTaxActivated?: boolean; woocommerceTaxActivated?: boolean; woocommerceShippingActivated?: boolean; + wooPaymentsIncentiveId?: string; }; // Possibly added in DeprecatedTasks.mergeDeprecatedCallbackFunctions isDeprecated?: boolean; diff --git a/packages/js/e2e-utils/README.md b/packages/js/e2e-utils/README.md index 12c9abe07ec..93f898daf37 100644 --- a/packages/js/e2e-utils/README.md +++ b/packages/js/e2e-utils/README.md @@ -12,7 +12,8 @@ npm install @woocommerce/e2e-utils --save ## Usage Example: -~~~js + +```js import { shopper, merchant, @@ -29,7 +30,7 @@ describe( 'Cart page', () => { await expect( page ).toMatchElement( '.cart-empty', { text: 'Your cart is currently empty.' } ); } ); } ); -~~~ +``` ### Retries @@ -86,7 +87,6 @@ This package provides support for enabling retries in tests: |----------|-------------|------------| | `addDownloadableProductPermission` | `productName` | Add a downloadable permission for product in order | | `collapseAdminMenu` | `collapse` | Collapse or expand the WP admin menu | -| `dismissOnboardingWizard` | | Dismiss the onboarding wizard if present | | `goToOrder` | `orderId` | Go to view a single order | | `goToProduct` | `productId` | Go to view a single product | | `login` | | Log in as merchant | @@ -100,7 +100,6 @@ This package provides support for enabling retries in tests: | `openPermalinkSettings` | | Go to Settings -> Permalinks | | `openPlugins` | | Go to the Plugins screen | | `openSettings` | | Go to WooCommerce -> Settings | -| `runSetupWizard` | | Open the onboarding profiler | | `updateOrderStatus` | `orderId, status` | Update the status of an order | | `openEmailLog` | | Open the WP Mail Log page | | `openAnalyticsPage` | | Open any Analytics page | @@ -210,7 +209,6 @@ There is a general utilities object `utils` with the following functions: | `clickFilter` | `selector` | helper method that clicks on a list page filter | | `clickTab` | `tabName` | Click on a WooCommerce -> Settings tab | | `clickUpdateOrder` | `noticeText`, `waitForSave` | Helper method to click the Update button on the order details page | -| `completeOnboardingWizard` | | completes the onboarding wizard with some default settings | | `createCoupon` | `couponAmount`, `couponType` | creates a basic coupon. Default amount is 5. Default coupon type is fixed discount. Returns the generated coupon code. | | `createGroupedProduct` | | creates a grouped product for the grouped product tests. Returns the product id. | | `createSimpleDownloadableProduct` | `name, downloadLimit, downloadName, price` | Create a simple downloadable product | diff --git a/packages/js/e2e-utils/changelog/cleanup-profiler-wizard b/packages/js/e2e-utils/changelog/cleanup-profiler-wizard new file mode 100644 index 00000000000..8a55c777336 --- /dev/null +++ b/packages/js/e2e-utils/changelog/cleanup-profiler-wizard @@ -0,0 +1,4 @@ +Significance: patch +Type: dev + +Remove Profile Wizard releated utils diff --git a/packages/js/e2e-utils/src/components.js b/packages/js/e2e-utils/src/components.js index 911d8d51a54..b641c674869 100644 --- a/packages/js/e2e-utils/src/components.js +++ b/packages/js/e2e-utils/src/components.js @@ -60,151 +60,6 @@ const waitAndClickPrimary = async ( waitForNetworkIdle = true ) => { await page.waitForNavigation( { waitUntil: 'networkidle0' } ); } }; -/** - * Complete onboarding wizard. - */ -const completeOnboardingWizard = async () => { - // Store Details section - await merchant.runSetupWizard(); - - // Fill store's address - first line - await expect( page ).toFill( - '#inspector-text-control-0', - config.get( 'addresses.admin.store.addressfirstline' ) - ); - - // Fill store's address - second line - await expect( page ).toFill( - '#inspector-text-control-1', - config.get( 'addresses.admin.store.addresssecondline' ) - ); - - // Fill country and state where the store is located - await expect( page ).toFill( - '.woocommerce-select-control__control-input', - config.get( 'addresses.admin.store.countryandstate' ) - ); - - // Fill the city where the store is located - await expect( page ).toFill( - '#inspector-text-control-2', - config.get( 'addresses.admin.store.city' ) - ); - - // Fill postcode of the store - await expect( page ).toFill( - '#inspector-text-control-3', - config.get( 'addresses.admin.store.postcode' ) - ); - - // Verify that checkbox next to "I'm setting up a store for a client" is not selected - await verifyCheckboxIsUnset( '.components-checkbox-control__input' ); - - // Wait for "Continue" button to become active - await page.waitForSelector( 'button.is-primary:not(:disabled)' ); - - // Click on "Continue" button to move to the next step - await page.click( 'button.is-primary', { text: 'Continue' } ); - - // Wait for usage tracking pop-up window to appear on a new site - const usageTrackingHeader = await page.$( - '.components-modal__header-heading' - ); - if ( usageTrackingHeader ) { - await expect( page ).toMatchElement( - '.components-modal__header-heading', - { - text: 'Build a better WooCommerce', - } - ); - - // Query for "No Thanks" buttons - const continueButtons = await page.$$( - '.woocommerce-usage-modal__actions button.is-secondary' - ); - expect( continueButtons ).toHaveLength( 1 ); - - await continueButtons[ 0 ].click(); - await expect( page ).toMatchElement( - '.woocommerce-usage-modal__actions button.is-secondary.is-busy' - ); - await expect( page ).not.toMatchElement( - '.woocommerce-usage-modal__actions button.is-primary:disabled' - ); - } - await page.waitForNavigation( { waitUntil: 'networkidle0' } ); - - // Industry section - - // Query for the industries checkboxes - const industryCheckboxes = await page.$$( - '.components-checkbox-control__input' - ); - expect( industryCheckboxes ).toHaveLength( 8 ); - - // Select all industries including "Other" - for ( let i = 0; i < 8; i++ ) { - await industryCheckboxes[ i ].click(); - } - - // Fill "Other" industry - await expect( page ).toFill( - '.components-text-control__input', - config.get( 'onboardingwizard.industry' ) - ); - - // Wait for "Continue" button to become active - await waitAndClickPrimary(); - - // Product types section - - // Query for the product types checkboxes - const productTypesCheckboxes = await page.$$( - '.components-checkbox-control__input' - ); - expect( productTypesCheckboxes ).toHaveLength( 7 ); - - // Select Physical and Downloadable products - for ( let i = 1; i < 2; i++ ) { - await productTypesCheckboxes[ i ].click(); - } - - // Wait for "Continue" button to become active - await waitAndClickPrimary(); - - // Business Details section - - // Temporarily add delay to reduce test flakiness - await page.waitFor( 2000 ); - - // Query for the s - const selectControls = await page.$$( '.woocommerce-select-control' ); - expect( selectControls ).toHaveLength( 2 ); - - // Fill the number of products you plan to sell - await selectControls[ 0 ].click(); - await page.waitForSelector( '.woocommerce-select-control__control' ); - await expect( page ).toClick( '.woocommerce-select-control__option', { - text: config.get( 'onboardingwizard.numberofproducts' ), - } ); - - // Fill currently selling elsewhere - await selectControls[ 1 ].click(); - await page.waitForSelector( '.woocommerce-select-control__control' ); - await expect( page ).toClick( '.woocommerce-select-control__option', { - text: config.get( 'onboardingwizard.sellingelsewhere' ), - } ); - - // Wait for "Continue" button to become active - await waitAndClickPrimary( false ); - - // Skip installing extensions - await unsetCheckbox( '.components-checkbox-control__input' ); - await verifyCheckboxIsUnset( '.components-checkbox-control__input' ); - await waitAndClickPrimary(); - - // End of onboarding wizard -}; /** * Create simple product. @@ -668,7 +523,6 @@ const deleteAllShippingZones = async () => { }; export { - completeOnboardingWizard, createSimpleProduct, createVariableProduct, createGroupedProduct, diff --git a/packages/js/e2e-utils/src/flows/merchant.js b/packages/js/e2e-utils/src/flows/merchant.js index d312ad64686..0bde1222503 100644 --- a/packages/js/e2e-utils/src/flows/merchant.js +++ b/packages/js/e2e-utils/src/flows/merchant.js @@ -31,8 +31,6 @@ const { WP_ADMIN_NEW_PRODUCT, WP_ADMIN_PERMALINK_SETTINGS, WP_ADMIN_PLUGINS, - WP_ADMIN_SETUP_WIZARD, - WP_ADMIN_WC_HOME, WP_ADMIN_WC_SETTINGS, WP_ADMIN_WC_EXTENSIONS, WP_ADMIN_WC_HELPER, @@ -42,7 +40,6 @@ const { WP_ADMIN_IMPORT_PRODUCTS, WP_ADMIN_PLUGIN_INSTALL, WP_ADMIN_WP_UPDATES, - IS_RETEST_MODE, } = require( './constants' ); const { getSlug, waitForTimeout } = require( './utils' ); @@ -83,7 +80,6 @@ const merchant = { await Promise.all( [ page.click( 'input[type=submit]' ), page.waitForNavigation( { waitUntil: 'networkidle0' } ), - merchant.dismissOnboardingWizard(), ] ); }, @@ -173,15 +169,6 @@ const merchant = { } ); }, - runSetupWizard: async () => { - const setupWizard = IS_RETEST_MODE - ? WP_ADMIN_SETUP_WIZARD - : WP_ADMIN_WC_HOME; - await page.goto( setupWizard, { - waitUntil: 'networkidle0', - } ); - }, - goToOrder: async ( orderId ) => { await page.goto( WP_ADMIN_SINGLE_CPT_VIEW( orderId ), { waitUntil: 'networkidle0', @@ -290,9 +277,10 @@ const merchant = { revokeDownloadableProductPermission: async ( productName ) => { // Revoke downloadable product permission - const permission = await expect( - page - ).toMatchElement( 'div.wc-metabox > h3', { text: productName } ); + const permission = await expect( page ).toMatchElement( + 'div.wc-metabox > h3', + { text: productName } + ); await expect( permission ).toClick( 'button.revoke_access' ); // Wait for auto save @@ -625,10 +613,10 @@ const merchant = { }, /* Uploads and activates a plugin located at the provided file path. This will also deactivate and delete the plugin if it exists. - * - * @param {string} pluginFilePath The location of the plugin zip file to upload. - * @param {string} pluginName The name of the plugin. For example, `WooCommerce`. - */ + * + * @param {string} pluginFilePath The location of the plugin zip file to upload. + * @param {string} pluginName The name of the plugin. For example, `WooCommerce`. + */ uploadAndActivatePlugin: async ( pluginFilePath, pluginName ) => { await merchant.openPlugins(); @@ -647,8 +635,7 @@ const merchant = { await page.click( 'a.upload-view-toggle' ); await expect( page ).toMatchElement( 'p.install-help', { - text: - 'If you have a plugin in a .zip format, you may install or update it by uploading it here.', + text: 'If you have a plugin in a .zip format, you may install or update it by uploading it here.', } ); const uploader = await page.$( 'input[type=file]' ); @@ -753,33 +740,6 @@ const merchant = { } }, - /** - * Dismiss the onboarding wizard if it is open. - */ - dismissOnboardingWizard: async () => { - let waitForNav = false; - const skipButton = await page.$( - '.woocommerce-profile-wizard__footer-link' - ); - if ( skipButton ) { - await skipButton.click(); - waitForNav = true; - } - - // Dismiss usage tracking pop-up window if it appears on a new site - const usageTrackingHeader = await page.$( - '.woocommerce-usage-modal button.is-secondary' - ); - if ( usageTrackingHeader ) { - await usageTrackingHeader.click(); - waitForNav = true; - } - - if ( waitForNav ) { - await page.waitForNavigation( { waitUntil: 'networkidle0' } ); - } - }, - /** * Expand or collapse the WP admin menu. * diff --git a/packages/js/e2e-utils/src/old-flows.js b/packages/js/e2e-utils/src/old-flows.js index 4afde090920..c59a7d6e74a 100644 --- a/packages/js/e2e-utils/src/old-flows.js +++ b/packages/js/e2e-utils/src/old-flows.js @@ -172,11 +172,6 @@ const StoreOwnerFlow = { StoreOwnerFlowDeprecated(); await merchant.openSettings( tab, section ); }, - - runSetupWizard: async () => { - StoreOwnerFlowDeprecated(); - await merchant.runSetupWizard(); - }, }; export { CustomerFlow, StoreOwnerFlow }; diff --git a/packages/js/experimental/changelog/upgrade-storybook_and_add_pages_workflow b/packages/js/experimental/changelog/upgrade-storybook_and_add_pages_workflow new file mode 100644 index 00000000000..579b91e0c80 --- /dev/null +++ b/packages/js/experimental/changelog/upgrade-storybook_and_add_pages_workflow @@ -0,0 +1,4 @@ +Significance: minor +Type: update + +Update storybook file format in support with Storybook 7 story indexer. diff --git a/packages/js/experimental/src/experimental-list/stories/index.tsx b/packages/js/experimental/src/experimental-list/stories/experimental-list.story.tsx similarity index 100% rename from packages/js/experimental/src/experimental-list/stories/index.tsx rename to packages/js/experimental/src/experimental-list/stories/experimental-list.story.tsx diff --git a/packages/js/experimental/src/vertical-css-transition/stories/index.tsx b/packages/js/experimental/src/vertical-css-transition/stories/vertical-css-transition.story.tsx similarity index 100% rename from packages/js/experimental/src/vertical-css-transition/stories/index.tsx rename to packages/js/experimental/src/vertical-css-transition/stories/vertical-css-transition.story.tsx diff --git a/packages/js/onboarding/changelog/upgrade-storybook_and_add_pages_workflow b/packages/js/onboarding/changelog/upgrade-storybook_and_add_pages_workflow new file mode 100644 index 00000000000..579b91e0c80 --- /dev/null +++ b/packages/js/onboarding/changelog/upgrade-storybook_and_add_pages_workflow @@ -0,0 +1,4 @@ +Significance: minor +Type: update + +Update storybook file format in support with Storybook 7 story indexer. diff --git a/packages/js/onboarding/package.json b/packages/js/onboarding/package.json index 0521b2f2163..98fd24eef18 100644 --- a/packages/js/onboarding/package.json +++ b/packages/js/onboarding/package.json @@ -71,7 +71,6 @@ }, "devDependencies": { "@babel/core": "^7.23.5", - "@storybook/addon-knobs": "^7.0.2", "@testing-library/react": "12.1.3", "@types/jest": "^27.5.2", "@types/react": "^17.0.71", diff --git a/packages/js/onboarding/src/components/Loader/stories/index.tsx b/packages/js/onboarding/src/components/Loader/stories/loader.story.tsx similarity index 100% rename from packages/js/onboarding/src/components/Loader/stories/index.tsx rename to packages/js/onboarding/src/components/Loader/stories/loader.story.tsx diff --git a/packages/js/product-editor/changelog/fix-style_conflicts b/packages/js/product-editor/changelog/fix-style_conflicts new file mode 100644 index 00000000000..bd5d3c6d81c --- /dev/null +++ b/packages/js/product-editor/changelog/fix-style_conflicts @@ -0,0 +1,4 @@ +Significance: patch +Type: update + +Increase specificity of product data views styles to avoid conflicts. diff --git a/packages/js/product-editor/changelog/upgrade-storybook_and_add_pages_workflow b/packages/js/product-editor/changelog/upgrade-storybook_and_add_pages_workflow new file mode 100644 index 00000000000..579b91e0c80 --- /dev/null +++ b/packages/js/product-editor/changelog/upgrade-storybook_and_add_pages_workflow @@ -0,0 +1,4 @@ +Significance: minor +Type: update + +Update storybook file format in support with Storybook 7 story indexer. diff --git a/packages/js/product-editor/src/components/advice-card/stories/index.tsx b/packages/js/product-editor/src/components/advice-card/stories/advice-card.story.tsx similarity index 100% rename from packages/js/product-editor/src/components/advice-card/stories/index.tsx rename to packages/js/product-editor/src/components/advice-card/stories/advice-card.story.tsx diff --git a/packages/js/product-editor/src/components/attribute-combobox-field/stories/index.tsx b/packages/js/product-editor/src/components/attribute-combobox-field/stories/attribute-combobox-field.story.tsx similarity index 100% rename from packages/js/product-editor/src/components/attribute-combobox-field/stories/index.tsx rename to packages/js/product-editor/src/components/attribute-combobox-field/stories/attribute-combobox-field.story.tsx diff --git a/packages/js/product-editor/src/components/button-with-dropdown-menu/stories/index.tsx b/packages/js/product-editor/src/components/button-with-dropdown-menu/stories/button-with-dropdown-menu.story.tsx similarity index 100% rename from packages/js/product-editor/src/components/button-with-dropdown-menu/stories/index.tsx rename to packages/js/product-editor/src/components/button-with-dropdown-menu/stories/button-with-dropdown-menu.story.tsx diff --git a/packages/js/product-editor/src/components/label/stories/index.tsx b/packages/js/product-editor/src/components/label/stories/label.story.tsx similarity index 100% rename from packages/js/product-editor/src/components/label/stories/index.tsx rename to packages/js/product-editor/src/components/label/stories/label.story.tsx diff --git a/packages/js/product-editor/src/images/cash-register/stories/index.tsx b/packages/js/product-editor/src/images/cash-register/stories/cash-register.story.tsx similarity index 100% rename from packages/js/product-editor/src/images/cash-register/stories/index.tsx rename to packages/js/product-editor/src/images/cash-register/stories/cash-register.story.tsx diff --git a/packages/js/product-editor/src/images/glasses/stories/index.tsx b/packages/js/product-editor/src/images/glasses/stories/glasses.story.tsx similarity index 100% rename from packages/js/product-editor/src/images/glasses/stories/index.tsx rename to packages/js/product-editor/src/images/glasses/stories/glasses.story.tsx diff --git a/packages/js/product-editor/src/images/pants/stories/index.tsx b/packages/js/product-editor/src/images/pants/stories/pants.story.tsx similarity index 100% rename from packages/js/product-editor/src/images/pants/stories/index.tsx rename to packages/js/product-editor/src/images/pants/stories/pants.story.tsx diff --git a/packages/js/product-editor/src/images/shirt/stories/index.tsx b/packages/js/product-editor/src/images/shirt/stories/shirt.story.tsx similarity index 100% rename from packages/js/product-editor/src/images/shirt/stories/index.tsx rename to packages/js/product-editor/src/images/shirt/stories/shirt.story.tsx diff --git a/packages/js/product-editor/src/images/shopping-bags/stories/index.tsx b/packages/js/product-editor/src/images/shopping-bags/stories/shopping-bags.story.tsx similarity index 100% rename from packages/js/product-editor/src/images/shopping-bags/stories/index.tsx rename to packages/js/product-editor/src/images/shopping-bags/stories/shopping-bags.story.tsx diff --git a/packages/js/product-editor/src/products.scss b/packages/js/product-editor/src/products.scss index 33f49a1ae7b..463564ff88e 100644 --- a/packages/js/product-editor/src/products.scss +++ b/packages/js/product-editor/src/products.scss @@ -40,5 +40,7 @@ body.js.is-fullscreen-mode { } } -@import "products-app/sidebar-dataviews/style.scss"; -@import "products-app/product-edit/style.scss"; +.woocommerce_page_woocommerce-products-dashboard { + @import "products-app/sidebar-dataviews/style.scss"; + @import "products-app/product-edit/style.scss"; +} diff --git a/packages/js/remote-logging/CHANGELOG.md b/packages/js/remote-logging/CHANGELOG.md index f7aac6be3b3..31e41a6ad37 100644 --- a/packages/js/remote-logging/CHANGELOG.md +++ b/packages/js/remote-logging/CHANGELOG.md @@ -1,3 +1,18 @@ # Changelog This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). + +## [1.0.0](https://www.npmjs.com/package/@woocommerce/remote-logging/v/1.0.0) - 2024-09-09 + +- Patch - Fix wc asset url check [#50701] +- Minor - Add JS remote logging package [#49702] +- Patch - Track frequency of unhandled JS errors with MC Stats [#50155] +- Minor - Add query params sanitisation [#51046] +- Patch - Add request_uri prop to remote logging data [#50671] +- Patch - Comment: Fix some comment typos. [#50993] +- Patch - Update README.md to document the filters specs & usage [#51010] +- Patch - Update remote logger to check dev env and whether logging is enabled [#50134] +- Patch - Fix pnpm version to 9.1.3 to avoid dependency installation issues. [#50828] +- Patch - Tweak logic for adding remote logging tool in beta tester [#50425] + +[See legacy changelogs for previous versions](https://github.com/woocommerce/woocommerce/blob/68581955106947918d2b17607a01bdfdf22288a9/packages/js/remote-logging/CHANGELOG.md). diff --git a/packages/js/remote-logging/changelog/49702-add-js-remote-error-logging b/packages/js/remote-logging/changelog/49702-add-js-remote-error-logging deleted file mode 100644 index 9b540da3c02..00000000000 --- a/packages/js/remote-logging/changelog/49702-add-js-remote-error-logging +++ /dev/null @@ -1,4 +0,0 @@ -Significance: minor -Type: add - -Add JS remote logging package \ No newline at end of file diff --git a/packages/js/remote-logging/changelog/50828-dev-constrain-pnpm-version b/packages/js/remote-logging/changelog/50828-dev-constrain-pnpm-version deleted file mode 100644 index fdead95ceb5..00000000000 --- a/packages/js/remote-logging/changelog/50828-dev-constrain-pnpm-version +++ /dev/null @@ -1,4 +0,0 @@ -Significance: patch -Type: dev - -Fix pnpm version to 9.1.3 to avoid dependency installation issues. \ No newline at end of file diff --git a/packages/js/remote-logging/changelog/50993-fix-some-comment-typos b/packages/js/remote-logging/changelog/50993-fix-some-comment-typos deleted file mode 100644 index 3dce9f8d32b..00000000000 --- a/packages/js/remote-logging/changelog/50993-fix-some-comment-typos +++ /dev/null @@ -1,4 +0,0 @@ -Significance: patch -Type: update - -Comment: Fix some comment typos. diff --git a/packages/js/remote-logging/changelog/add-bump-stats-error b/packages/js/remote-logging/changelog/add-bump-stats-error deleted file mode 100644 index 2a41a632378..00000000000 --- a/packages/js/remote-logging/changelog/add-bump-stats-error +++ /dev/null @@ -1,4 +0,0 @@ -Significance: patch -Type: add - -Track frequency of unhandled JS errors with MC Stats diff --git a/packages/js/remote-logging/changelog/add-remote-logging-beta-tester-tool b/packages/js/remote-logging/changelog/add-remote-logging-beta-tester-tool deleted file mode 100644 index 1e7f8794894..00000000000 --- a/packages/js/remote-logging/changelog/add-remote-logging-beta-tester-tool +++ /dev/null @@ -1,4 +0,0 @@ -Significance: patch -Type: tweak - -Tweak logic for adding remote logging tool in beta tester diff --git a/packages/js/remote-logging/changelog/add-wcadmin-remote-logging b/packages/js/remote-logging/changelog/add-wcadmin-remote-logging deleted file mode 100644 index 230dd1e821f..00000000000 --- a/packages/js/remote-logging/changelog/add-wcadmin-remote-logging +++ /dev/null @@ -1,4 +0,0 @@ -Significance: patch -Type: update - -Update remote logger to check dev env and whether logging is enabled diff --git a/packages/js/remote-logging/changelog/fix-remote-logging-asset-path b/packages/js/remote-logging/changelog/fix-remote-logging-asset-path deleted file mode 100644 index fc166a1888b..00000000000 --- a/packages/js/remote-logging/changelog/fix-remote-logging-asset-path +++ /dev/null @@ -1,4 +0,0 @@ -Significance: patch -Type: fix - -Fix wc asset url check diff --git a/packages/js/remote-logging/changelog/update-remote-logging-data b/packages/js/remote-logging/changelog/update-remote-logging-data deleted file mode 100644 index 69c8edf57c4..00000000000 --- a/packages/js/remote-logging/changelog/update-remote-logging-data +++ /dev/null @@ -1,4 +0,0 @@ -Significance: patch -Type: update - -Add request_uri prop to remote logging data diff --git a/packages/js/remote-logging/changelog/update-remote-logging-readme b/packages/js/remote-logging/changelog/update-remote-logging-readme deleted file mode 100644 index db2068ed42a..00000000000 --- a/packages/js/remote-logging/changelog/update-remote-logging-readme +++ /dev/null @@ -1,4 +0,0 @@ -Significance: patch -Type: update - -Update README.md to document the filters specs & usage diff --git a/packages/js/remote-logging/package.json b/packages/js/remote-logging/package.json index c96e6ca3f18..d56739c09a6 100644 --- a/packages/js/remote-logging/package.json +++ b/packages/js/remote-logging/package.json @@ -1,6 +1,6 @@ { "name": "@woocommerce/remote-logging", - "version": "0.0.1", + "version": "1.0.0", "description": "WooCommerce remote logging for Automattic based projects", "author": "Automattic", "license": "GPL-2.0-or-later", diff --git a/packages/php/remote-specs-validation/bundles/obw-free-extensions.json b/packages/php/remote-specs-validation/bundles/obw-free-extensions.json index 4f6eab2bf3f..76da6d4426c 100644 --- a/packages/php/remote-specs-validation/bundles/obw-free-extensions.json +++ b/packages/php/remote-specs-validation/bundles/obw-free-extensions.json @@ -195,7 +195,10 @@ "$ref": "#/definitions/operations" }, "value": { - "type": "string" + "type": [ + "string", + "array" + ] } } }, @@ -217,7 +220,10 @@ "$ref": "#/definitions/operations" }, "value": { - "type": "string" + "type": [ + "string", + "array" + ] } } }, diff --git a/packages/php/remote-specs-validation/bundles/payment-gateway-suggestions.json b/packages/php/remote-specs-validation/bundles/payment-gateway-suggestions.json index 78a72622f7b..37928228c99 100644 --- a/packages/php/remote-specs-validation/bundles/payment-gateway-suggestions.json +++ b/packages/php/remote-specs-validation/bundles/payment-gateway-suggestions.json @@ -179,7 +179,10 @@ "$ref": "#/definitions/operations" }, "value": { - "type": "string" + "type": [ + "string", + "array" + ] } } }, @@ -201,7 +204,10 @@ "$ref": "#/definitions/operations" }, "value": { - "type": "string" + "type": [ + "string", + "array" + ] } } }, @@ -864,7 +870,10 @@ "$ref": "#/definitions/operations" }, "value": { - "type": "string" + "type": [ + "string", + "array" + ] } } }, @@ -886,7 +895,10 @@ "$ref": "#/definitions/operations" }, "value": { - "type": "string" + "type": [ + "string", + "array" + ] } } }, diff --git a/packages/php/remote-specs-validation/bundles/remote-inbox-notification.json b/packages/php/remote-specs-validation/bundles/remote-inbox-notification.json index c64ac57f605..f9b0de6f6b2 100644 --- a/packages/php/remote-specs-validation/bundles/remote-inbox-notification.json +++ b/packages/php/remote-specs-validation/bundles/remote-inbox-notification.json @@ -283,7 +283,10 @@ "$ref": "#/definitions/operations" }, "value": { - "type": "string" + "type": [ + "string", + "array" + ] } } }, @@ -305,7 +308,10 @@ "$ref": "#/definitions/operations" }, "value": { - "type": "string" + "type": [ + "string", + "array" + ] } } }, diff --git a/packages/php/remote-specs-validation/bundles/shipping-partner-suggestions.json b/packages/php/remote-specs-validation/bundles/shipping-partner-suggestions.json index 0e886b8aca7..d86a98dd5df 100644 --- a/packages/php/remote-specs-validation/bundles/shipping-partner-suggestions.json +++ b/packages/php/remote-specs-validation/bundles/shipping-partner-suggestions.json @@ -173,7 +173,10 @@ "$ref": "#/definitions/operations" }, "value": { - "type": "string" + "type": [ + "string", + "array" + ] } } }, @@ -195,7 +198,10 @@ "$ref": "#/definitions/operations" }, "value": { - "type": "string" + "type": [ + "string", + "array" + ] } } }, @@ -847,7 +853,10 @@ "$ref": "#/definitions/operations" }, "value": { - "type": "string" + "type": [ + "string", + "array" + ] } } }, @@ -869,7 +878,10 @@ "$ref": "#/definitions/operations" }, "value": { - "type": "string" + "type": [ + "string", + "array" + ] } } }, diff --git a/packages/php/remote-specs-validation/bundles/wc-pay-promotions.json b/packages/php/remote-specs-validation/bundles/wc-pay-promotions.json index 75f8d2fd7d1..c90eac95ab4 100644 --- a/packages/php/remote-specs-validation/bundles/wc-pay-promotions.json +++ b/packages/php/remote-specs-validation/bundles/wc-pay-promotions.json @@ -176,7 +176,10 @@ "$ref": "#/definitions/operations" }, "value": { - "type": "string" + "type": [ + "string", + "array" + ] } } }, @@ -198,7 +201,10 @@ "$ref": "#/definitions/operations" }, "value": { - "type": "string" + "type": [ + "string", + "array" + ] } } }, @@ -844,7 +850,10 @@ "$ref": "#/definitions/operations" }, "value": { - "type": "string" + "type": [ + "string", + "array" + ] } } }, @@ -866,7 +875,10 @@ "$ref": "#/definitions/operations" }, "value": { - "type": "string" + "type": [ + "string", + "array" + ] } } }, diff --git a/packages/php/remote-specs-validation/changelog.md b/packages/php/remote-specs-validation/changelog.md index 3783eb0da3d..d645580a6a9 100644 --- a/packages/php/remote-specs-validation/changelog.md +++ b/packages/php/remote-specs-validation/changelog.md @@ -1,3 +1,26 @@ # Changelog This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). + +## [1.0.2](https://packagist.org/packages/woocommerce/remote-specs-validation#1.0.2) - 2024-04-12 + +* Fix - Fix base_location_state and base_location_country value type [#51169] +* Update - Bump all remote spec endpoints to version `2.0`. [#45298] +* Update - Remove ToS acceptance where unnecessary [#46003] +* Update - Update Woo.com references to WooCommerce.com. [#46259] +* Dev - Fix whitespace in package.json [#44902] +* Tweak - Fix typos. [#49207] +* Tweak - Rename Google Listings and Ads with Google for WooCommerce #### Comment [#47614] +* Tweak - Rename Google Listings and Ads with Google for WooCommerce [#47614] + + +## [1.0.1](https://packagist.org/packages/woocommerce/remote-specs-validation#1.0.1) - 2024-02-28 + +* Update - Accept JSON schema string as constructor argument instead of file path -- this is more fleixble. [#45151] + +## [1.0.0](https://packagist.org/packages/woocommerce/remote-specs-validation#1.0.0) - 2024-02-21 + +* Add - Add JSON Schema files [#44484] +* Add - Add project scaffolding [#44419] +* Add - Support range operator in Remote Inbox Notification [#45201] +* Add - Updated shipstation copy [#48549] diff --git a/packages/php/remote-specs-validation/changelog/45201-add-44787-add-range-rule b/packages/php/remote-specs-validation/changelog/45201-add-44787-add-range-rule deleted file mode 100644 index 332381bbbbe..00000000000 --- a/packages/php/remote-specs-validation/changelog/45201-add-44787-add-range-rule +++ /dev/null @@ -1,4 +0,0 @@ -Significance: minor -Type: add - -Support range operator in Remote Inbox Notification \ No newline at end of file diff --git a/packages/php/remote-specs-validation/changelog/45298-update-remote-endpoints-2.0 b/packages/php/remote-specs-validation/changelog/45298-update-remote-endpoints-2.0 deleted file mode 100644 index f1639f5b326..00000000000 --- a/packages/php/remote-specs-validation/changelog/45298-update-remote-endpoints-2.0 +++ /dev/null @@ -1,4 +0,0 @@ -Significance: patch -Type: update - -Bump all remote spec endpoints to version `2.0`. \ No newline at end of file diff --git a/packages/php/remote-specs-validation/changelog/46003-update-remove-duplicated-tos-acceptance b/packages/php/remote-specs-validation/changelog/46003-update-remove-duplicated-tos-acceptance deleted file mode 100644 index cbb0b4301b6..00000000000 --- a/packages/php/remote-specs-validation/changelog/46003-update-remove-duplicated-tos-acceptance +++ /dev/null @@ -1,4 +0,0 @@ -Significance: patch -Type: update - -Remove ToS acceptance where unnecessary \ No newline at end of file diff --git a/packages/php/remote-specs-validation/changelog/47614-tweak-google-extension-rename b/packages/php/remote-specs-validation/changelog/47614-tweak-google-extension-rename deleted file mode 100644 index 4ac5ec3e8d9..00000000000 --- a/packages/php/remote-specs-validation/changelog/47614-tweak-google-extension-rename +++ /dev/null @@ -1,4 +0,0 @@ -Significance: patch -Type: tweak - -Rename Google Listings and Ads with Google for WooCommerce #### Comment \ No newline at end of file diff --git a/packages/php/remote-specs-validation/changelog/accept-json-schema-string b/packages/php/remote-specs-validation/changelog/accept-json-schema-string deleted file mode 100644 index 1e1479613be..00000000000 --- a/packages/php/remote-specs-validation/changelog/accept-json-schema-string +++ /dev/null @@ -1,4 +0,0 @@ -Significance: major -Type: update - -Accept JSON schema string as constructor argument instead of file path -- this is more fleixble. diff --git a/packages/php/remote-specs-validation/changelog/add-json-schema-files b/packages/php/remote-specs-validation/changelog/add-json-schema-files deleted file mode 100644 index e0dda27f72d..00000000000 --- a/packages/php/remote-specs-validation/changelog/add-json-schema-files +++ /dev/null @@ -1,4 +0,0 @@ -Significance: minor -Type: add - -Add JSON Schema files \ No newline at end of file diff --git a/packages/php/remote-specs-validation/changelog/add-php-package-RIN-testing b/packages/php/remote-specs-validation/changelog/add-php-package-RIN-testing deleted file mode 100644 index ef5d8f75d92..00000000000 --- a/packages/php/remote-specs-validation/changelog/add-php-package-RIN-testing +++ /dev/null @@ -1,4 +0,0 @@ -Significance: minor -Type: add - -Add project scaffolding diff --git a/packages/php/remote-specs-validation/changelog/add-update-shipping-specs-shipstation-copy b/packages/php/remote-specs-validation/changelog/add-update-shipping-specs-shipstation-copy deleted file mode 100644 index 253ad9a432c..00000000000 --- a/packages/php/remote-specs-validation/changelog/add-update-shipping-specs-shipstation-copy +++ /dev/null @@ -1,4 +0,0 @@ -Significance: patch -Type: add - -Updated shipstation copy diff --git a/packages/php/remote-specs-validation/changelog/fix-typo-in-remote-specs-validation-readme b/packages/php/remote-specs-validation/changelog/fix-typo-in-remote-specs-validation-readme deleted file mode 100644 index a279c2fc260..00000000000 --- a/packages/php/remote-specs-validation/changelog/fix-typo-in-remote-specs-validation-readme +++ /dev/null @@ -1,4 +0,0 @@ -Significance: minor -Type: tweak - -Fix typos. diff --git a/packages/php/remote-specs-validation/changelog/tweak-google-extension-rename b/packages/php/remote-specs-validation/changelog/tweak-google-extension-rename deleted file mode 100644 index 8a85377cbb9..00000000000 --- a/packages/php/remote-specs-validation/changelog/tweak-google-extension-rename +++ /dev/null @@ -1,4 +0,0 @@ -Significance: patch -Type: tweak - -Rename Google Listings and Ads with Google for WooCommerce diff --git a/packages/php/remote-specs-validation/changelog/update-woo-com-to-woocommerce-com b/packages/php/remote-specs-validation/changelog/update-woo-com-to-woocommerce-com deleted file mode 100644 index 36ca65dd012..00000000000 --- a/packages/php/remote-specs-validation/changelog/update-woo-com-to-woocommerce-com +++ /dev/null @@ -1,4 +0,0 @@ -Significance: patch -Type: update - -Update Woo.com references to WooCommerce.com. diff --git a/packages/php/remote-specs-validation/composer.json b/packages/php/remote-specs-validation/composer.json index 95bca61eb23..6f828f244a6 100644 --- a/packages/php/remote-specs-validation/composer.json +++ b/packages/php/remote-specs-validation/composer.json @@ -1,6 +1,6 @@ { "name": "woocommerce/remote-specs-validation", - "version": "1.0.1", + "version": "1.0.2", "description": "Remote specs testing suite", "type": "library", "license": "GPL-3.0-or-later", @@ -9,9 +9,9 @@ "Automattic\\WooCommerce\\RemoteSpecsValidation\\": "src/" } }, - "autoload-dev": { - "psr-4": { - "Automattic\\WooCommerce\\RemoteSpecsValidation\\Tests\\": "tests/" + "autoload-dev": { + "psr-4": { + "Automattic\\WooCommerce\\RemoteSpecsValidation\\Tests\\": "tests/" } }, "require-dev": { diff --git a/packages/php/remote-specs-validation/schemas/shared/rules/base_location_country.json b/packages/php/remote-specs-validation/schemas/shared/rules/base_location_country.json index bcb565ef6b3..6d15e8f5ae2 100644 --- a/packages/php/remote-specs-validation/schemas/shared/rules/base_location_country.json +++ b/packages/php/remote-specs-validation/schemas/shared/rules/base_location_country.json @@ -10,7 +10,10 @@ "$ref": "#/definitions/operations" }, "value": { - "type": "string" + "type": [ + "string", + "array" + ] } } -} \ No newline at end of file +} diff --git a/packages/php/remote-specs-validation/schemas/shared/rules/base_location_state.json b/packages/php/remote-specs-validation/schemas/shared/rules/base_location_state.json index e2f1abb7fc9..b0f9266cbce 100644 --- a/packages/php/remote-specs-validation/schemas/shared/rules/base_location_state.json +++ b/packages/php/remote-specs-validation/schemas/shared/rules/base_location_state.json @@ -10,7 +10,10 @@ "$ref": "#/definitions/operations" }, "value": { - "type": "string" + "type": [ + "string", + "array" + ] } } -} \ No newline at end of file +} diff --git a/plugins/woocommerce-admin/bin/hook-reference/data.json b/plugins/woocommerce-admin/bin/hook-reference/data.json index 8693d4a18e4..67bdf3e86bd 100644 --- a/plugins/woocommerce-admin/bin/hook-reference/data.json +++ b/plugins/woocommerce-admin/bin/hook-reference/data.json @@ -810,19 +810,6 @@ } ] }, - { - "description": "Filter for Onboarding steps configuration.", - "sourceFile": "https://github.com/woocommerce/woocommerce-admin/blob/46c8304c425749dfc715b38e59f56198b05e7b46/client/profile-wizard/index.js#L140-L145", - "name": "woocommerce_admin_profile_wizard_steps", - "type": "filter", - "params": [ - { - "name": "steps", - "type": "Array.", - "description": "Array of steps for Onboarding Wizard." - } - ] - }, { "description": "Store Management extensions links", "sourceFile": "https://github.com/woocommerce/woocommerce-admin/blob/46c8304c425749dfc715b38e59f56198b05e7b46/client/store-management-links/index.js#L171-L176", diff --git a/plugins/woocommerce-admin/client/core-profiler/stories/BusinessInfo.tsx b/plugins/woocommerce-admin/client/core-profiler/stories/BusinessInfo.story.tsx similarity index 100% rename from plugins/woocommerce-admin/client/core-profiler/stories/BusinessInfo.tsx rename to plugins/woocommerce-admin/client/core-profiler/stories/BusinessInfo.story.tsx diff --git a/plugins/woocommerce-admin/client/core-profiler/stories/BusinessLocation.tsx b/plugins/woocommerce-admin/client/core-profiler/stories/BusinessLocation.story.tsx similarity index 100% rename from plugins/woocommerce-admin/client/core-profiler/stories/BusinessLocation.tsx rename to plugins/woocommerce-admin/client/core-profiler/stories/BusinessLocation.story.tsx diff --git a/plugins/woocommerce-admin/client/core-profiler/stories/IntroOptIn.tsx b/plugins/woocommerce-admin/client/core-profiler/stories/IntroOptIn.story.tsx similarity index 100% rename from plugins/woocommerce-admin/client/core-profiler/stories/IntroOptIn.tsx rename to plugins/woocommerce-admin/client/core-profiler/stories/IntroOptIn.story.tsx diff --git a/plugins/woocommerce-admin/client/core-profiler/stories/Loader.tsx b/plugins/woocommerce-admin/client/core-profiler/stories/Loader.story.tsx similarity index 100% rename from plugins/woocommerce-admin/client/core-profiler/stories/Loader.tsx rename to plugins/woocommerce-admin/client/core-profiler/stories/Loader.story.tsx diff --git a/plugins/woocommerce-admin/client/core-profiler/stories/Plugins.tsx b/plugins/woocommerce-admin/client/core-profiler/stories/Plugins.story.tsx similarity index 100% rename from plugins/woocommerce-admin/client/core-profiler/stories/Plugins.tsx rename to plugins/woocommerce-admin/client/core-profiler/stories/Plugins.story.tsx diff --git a/plugins/woocommerce-admin/client/core-profiler/stories/UserProfile.tsx b/plugins/woocommerce-admin/client/core-profiler/stories/UserProfile.story.tsx similarity index 100% rename from plugins/woocommerce-admin/client/core-profiler/stories/UserProfile.tsx rename to plugins/woocommerce-admin/client/core-profiler/stories/UserProfile.story.tsx diff --git a/plugins/woocommerce-admin/client/customize-store/design-with-ai/stories/ApiCallLoader.tsx b/plugins/woocommerce-admin/client/customize-store/design-with-ai/stories/ApiCallLoader.story.tsx similarity index 100% rename from plugins/woocommerce-admin/client/customize-store/design-with-ai/stories/ApiCallLoader.tsx rename to plugins/woocommerce-admin/client/customize-store/design-with-ai/stories/ApiCallLoader.story.tsx diff --git a/plugins/woocommerce-admin/client/customize-store/design-with-ai/stories/BusinessInfoDescription.tsx b/plugins/woocommerce-admin/client/customize-store/design-with-ai/stories/BusinessInfoDescription.story.tsx similarity index 100% rename from plugins/woocommerce-admin/client/customize-store/design-with-ai/stories/BusinessInfoDescription.tsx rename to plugins/woocommerce-admin/client/customize-store/design-with-ai/stories/BusinessInfoDescription.story.tsx diff --git a/plugins/woocommerce-admin/client/customize-store/design-with-ai/stories/LookAndFeel.tsx b/plugins/woocommerce-admin/client/customize-store/design-with-ai/stories/LookAndFeel.story.tsx similarity index 100% rename from plugins/woocommerce-admin/client/customize-store/design-with-ai/stories/LookAndFeel.tsx rename to plugins/woocommerce-admin/client/customize-store/design-with-ai/stories/LookAndFeel.story.tsx diff --git a/plugins/woocommerce-admin/client/customize-store/design-with-ai/stories/ToneOfVoice.tsx b/plugins/woocommerce-admin/client/customize-store/design-with-ai/stories/ToneOfVoice.story.tsx similarity index 100% rename from plugins/woocommerce-admin/client/customize-store/design-with-ai/stories/ToneOfVoice.tsx rename to plugins/woocommerce-admin/client/customize-store/design-with-ai/stories/ToneOfVoice.story.tsx diff --git a/plugins/woocommerce-admin/client/launch-your-store/hub/index.tsx b/plugins/woocommerce-admin/client/launch-your-store/hub/index.tsx index c0f9cd4cf5a..c1998e46e9d 100644 --- a/plugins/woocommerce-admin/client/launch-your-store/hub/index.tsx +++ b/plugins/woocommerce-admin/client/launch-your-store/hub/index.tsx @@ -32,6 +32,11 @@ export type LaunchYourStoreComponentProps = { className?: string; }; +export type LaunchYourStoreQueryParams = { + sidebar?: 'hub' | 'launch-success'; + content?: 'site-preview' | 'launch-store-success'; +}; + const LaunchStoreController = () => { useFullScreen( [ 'woocommerce-launch-your-store' ] ); useEffect( () => { diff --git a/plugins/woocommerce-admin/client/launch-your-store/hub/main-content/xstate.tsx b/plugins/woocommerce-admin/client/launch-your-store/hub/main-content/xstate.tsx index 715b77b7a50..49e01f2785d 100644 --- a/plugins/woocommerce-admin/client/launch-your-store/hub/main-content/xstate.tsx +++ b/plugins/woocommerce-admin/client/launch-your-store/hub/main-content/xstate.tsx @@ -14,8 +14,14 @@ import { getSetting } from '@woocommerce/settings'; */ import { LoadingPage } from './pages/loading'; import { SitePreviewPage } from './pages/site-preview'; -import type { LaunchYourStoreComponentProps } from '..'; -import { createQueryParamsListener, updateQueryParams } from '../common'; +import type { + LaunchYourStoreComponentProps, + LaunchYourStoreQueryParams, +} from '..'; +import { + updateQueryParams, + createQueryParamsListener, +} from '~/utils/xstate/url-handling'; import { services as congratsServices, events as congratsEvents, @@ -54,11 +60,8 @@ export const mainContentMachine = setup( { events: MainContentMachineEvents; }, actions: { - updateQueryParams: ( - _, - params: { sidebar?: string; content?: string } - ) => { - updateQueryParams( params ); + updateQueryParams: ( _, params: LaunchYourStoreQueryParams ) => { + updateQueryParams< LaunchYourStoreQueryParams >( params ); }, assignSiteCachedStatus: assign( { siteIsShowingCachedContent: true, @@ -92,9 +95,9 @@ export const mainContentMachine = setup( { guards: { hasContentLocation: ( _, - { contentLocation }: { contentLocation: string } + { content: contentLocation }: LaunchYourStoreQueryParams ) => { - const { content } = getQuery() as { content?: string }; + const { content } = getQuery() as LaunchYourStoreQueryParams; return !! content && content === contentLocation; }, }, @@ -125,13 +128,13 @@ export const mainContentMachine = setup( { { guard: { type: 'hasContentLocation', - params: { contentLocation: 'site-preview' }, + params: { content: 'site-preview' }, }, }, { guard: { type: 'hasContentLocation', - params: { contentLocation: 'launch-store-success' }, + params: { content: 'launch-store-success' }, }, target: 'launchStoreSuccess', }, diff --git a/plugins/woocommerce-admin/client/launch-your-store/hub/sidebar/xstate.tsx b/plugins/woocommerce-admin/client/launch-your-store/hub/sidebar/xstate.tsx index 96d33eff1f5..a1d0cbf4a35 100644 --- a/plugins/woocommerce-admin/client/launch-your-store/hub/sidebar/xstate.tsx +++ b/plugins/woocommerce-admin/client/launch-your-store/hub/sidebar/xstate.tsx @@ -29,9 +29,15 @@ import apiFetch from '@wordpress/api-fetch'; * Internal dependencies */ import { LaunchYourStoreHubSidebar } from './components/launch-store-hub'; -import type { LaunchYourStoreComponentProps } from '..'; +import type { + LaunchYourStoreComponentProps, + LaunchYourStoreQueryParams, +} from '..'; import type { mainContentMachine } from '../main-content/xstate'; -import { updateQueryParams, createQueryParamsListener } from '../common'; +import { + updateQueryParams, + createQueryParamsListener, +} from '~/utils/xstate/url-handling'; import { taskClickedAction, getLysTasklist } from './tasklist'; import { fetchCongratsData } from '../main-content/pages/launch-store-success/services'; import { getTimeFrame } from '~/utils'; @@ -253,11 +259,8 @@ export const sidebarMachine = setup( { ( { context } ) => context.mainContentMachineRef, { type: 'SHOW_LOADING' } ), - updateQueryParams: ( - _, - params: { sidebar?: string; content?: string } - ) => { - updateQueryParams( params ); + updateQueryParams: ( _, params: LaunchYourStoreQueryParams ) => { + updateQueryParams< LaunchYourStoreQueryParams >( params ); }, taskClicked: ( { event } ) => { if ( event.type === 'TASK_CLICKED' ) { @@ -293,9 +296,9 @@ export const sidebarMachine = setup( { guards: { hasSidebarLocation: ( _, - { sidebarLocation }: { sidebarLocation: string } + { sidebar: sidebarLocation }: LaunchYourStoreQueryParams ) => { - const { sidebar } = getQuery() as { sidebar?: string }; + const { sidebar } = getQuery() as LaunchYourStoreQueryParams; return !! sidebar && sidebar === sidebarLocation; }, hasWooPayments: ( { context } ) => { @@ -333,14 +336,14 @@ export const sidebarMachine = setup( { { guard: { type: 'hasSidebarLocation', - params: { sidebarLocation: 'hub' }, + params: { sidebar: 'hub' }, }, target: 'launchYourStoreHub', }, { guard: { type: 'hasSidebarLocation', - params: { sidebarLocation: 'launch-success' }, + params: { sidebar: 'launch-success' }, }, target: 'storeLaunchSuccessful', }, diff --git a/plugins/woocommerce-admin/client/layout/controller.js b/plugins/woocommerce-admin/client/layout/controller.js index dd686f064c3..d1c0a8d1a3d 100644 --- a/plugins/woocommerce-admin/client/layout/controller.js +++ b/plugins/woocommerce-admin/client/layout/controller.js @@ -60,16 +60,13 @@ const MarketingOverviewMultichannel = lazy( () => const Marketplace = lazy( () => import( /* webpackChunkName: "marketplace" */ '../marketplace' ) ); -const ProfileWizard = lazy( () => - import( /* webpackChunkName: "profile-wizard" */ '../profile-wizard' ) -); const CoreProfiler = lazy( () => import( /* webpackChunkName: "core-profiler" */ '../core-profiler' ) ); const SettingsGroup = lazy( () => - import( /* webpackChunkName: "profile-wizard" */ '../settings' ) + import( /* webpackChunkName: "settings" */ '../settings' ) ); const WCPaymentsWelcomePage = lazy( () => import( @@ -256,34 +253,22 @@ export const getPages = () => { } ); if ( window.wcAdminFeatures.onboarding ) { - if ( ! window.wcAdminFeatures[ 'core-profiler' ] ) { - pages.push( { - container: ProfileWizard, - path: '/setup-wizard', - breadcrumbs: [ - ...initialBreadcrumbs, - __( 'Setup Wizard', 'woocommerce' ), - ], - capability: 'manage_woocommerce', - } ); - } else { - pages.push( { - container: CoreProfiler, - path: '/setup-wizard', - breadcrumbs: [ - ...initialBreadcrumbs, - __( 'Profiler', 'woocommerce' ), - ], - capability: 'manage_woocommerce', - layout: { - header: false, - footer: false, - showNotices: true, - showStoreAlerts: false, - showPluginArea: false, - }, - } ); - } + pages.push( { + container: CoreProfiler, + path: '/setup-wizard', + breadcrumbs: [ + ...initialBreadcrumbs, + __( 'Profiler', 'woocommerce' ), + ], + capability: 'manage_woocommerce', + layout: { + header: false, + footer: false, + showNotices: true, + showStoreAlerts: false, + showPluginArea: false, + }, + } ); } if ( window.wcAdminFeatures[ 'core-profiler' ] ) { diff --git a/plugins/woocommerce-admin/client/layout/footer/footer.scss b/plugins/woocommerce-admin/client/layout/footer/footer.scss index 6f962779f54..e1e1aa93a3c 100644 --- a/plugins/woocommerce-admin/client/layout/footer/footer.scss +++ b/plugins/woocommerce-admin/client/layout/footer/footer.scss @@ -9,10 +9,6 @@ bottom: -1px; /* to hide the border when no visible children */ z-index: 1001; /* on top of #wp-content-editor-tools */ - .woocommerce-profile-wizard__body & { - width: 100%; - } - @include breakpoint("782px-960px") { width: calc(100% - 36px); } diff --git a/plugins/woocommerce-admin/client/layout/index.js b/plugins/woocommerce-admin/client/layout/index.js index 7b7986343bd..65eac2013a4 100644 --- a/plugins/woocommerce-admin/client/layout/index.js +++ b/plugins/woocommerce-admin/client/layout/index.js @@ -58,12 +58,6 @@ const StoreAlerts = lazy( () => import( /* webpackChunkName: "store-alerts" */ './store-alerts' ) ); -const WCPayUsageModal = lazy( () => - import( - /* webpackChunkName: "wcpay-usage-modal" */ '../task-lists/fills/PaymentGatewaySuggestions/components/WCPay/UsageModal' - ) -); - export class PrimaryLayout extends Component { render() { const { @@ -163,15 +157,6 @@ function _Layout( { }, 0 ); }, [ location?.pathname ] ); - function isWCPaySettingsPage() { - const { page: queryPage, section, tab } = getQuery(); - return ( - queryPage === 'wc-settings' && - tab === 'checkout' && - section === 'woocommerce_payments' - ); - } - const { breadcrumbs, layout = { header: true, footer: true } } = page; const { header: showHeader = true, @@ -237,12 +222,6 @@ function _Layout( { ) } - - { isEmbedded && isWCPaySettingsPage() && ( - - - - ) } { showFooter &&