* Add search results count to the in-app marketplace (#51266)
* Add searchResults to context
* Use setSearchResults in Content
* Add ribbons to the tabs
* Changelog
* Use setState as the function name
* Only show ribbon counts when there's an active search
* Refactor how 'setSearchResultsCount' is used (h/t @mcliwanow)
* Don't populate initial search results
* Unify css styling
* Marketplace: bring back the loading state (#51342)
* Marketplace: bring back the loading state
* Add changefile(s) from automation for the following project(s): woocommerce
---------
Co-authored-by: github-actions <github-actions@github.com>
* Remove in-app marketplace Search results tab and unify results into existing tabs (#51297)
* Remove search results component and any references to it
* Persist current tab for searching, or default to extensions if tab is not set
* Persist term when switching across tabs
* Lint
* When a search is initiated, fetch all categories to keep the tab counts up to date.
The necessary filtering to display data to the current screen will be performed on the frontend.
* Apply correct colors to the tabs, as per design
* Beyond query.term, also rely on isLoading so that search result counts don't jump
* Address an issue when the user searches for something that returns no results in the business services tab
* Changelog
* Addressed :)
* Change key to category
* Fix category filter being broken
Whenever a category is requested, we need to do an additional request with the category param being the current category (overriding extensions/theme/business services).
Ideally the backend API would make a distinction between type (theme/extension/business service) and category, but this hack should do for now.
* Lint
* Remove unused variables h/t @KokkieH
* Lint
* Revert "Lint"
This reverts commit 0b2d2dca6d.
* Actually fix lint without introducing infinite loop
Reproducible at http://localhost:8080/wp-admin/admin.php?page=wc-admin&term=payments&tab=extensions&path=%2Fextensions&category=customer-service
* Show category selector even if there are no results displayed
* Update comment to be less misleading
* Query isn't used here
* Update Marketplace search component (#51313)
* Update Search placeholder text
* Replace search component with one from @wordpress/components
* Make mobile search field font consistent with desktop
* Add changefile(s) from automation for the following project(s): woocommerce
* Handle import errors for SearchControl component
---------
Co-authored-by: github-actions <github-actions@github.com>
* Marketplace: update category selector (#51309)
* Marketplace: update category selector
Remove the dropdown on the desktop view and show all items, even if
overflowing. Added helper buttons to scroll to the right to show more.
* Add changefile(s) from automation for the following project(s): woocommerce
* Marketplace: remove category sroll helpers from tabindex
GitHub:
https://github.com/woocommerce/woocommerce/pull/51309/files#r1758448638
* Marketplace: Remove selectedTab reference from product.tsx
This is probably included due to the merge conflict
* Marketplace: tweak category scroll button narrower
---------
Co-authored-by: github-actions <github-actions@github.com>
* Lint
* Fix 2 lint errors
* Fix another lint error (useMemo) h/t @KokkieH
* Add load more button in-app (#51434)
* Add additional fields returned by search API to marketplace types
Ensure components have access to additional fields
* Add LoadMoreButton component
* Only render Load More button if there are additional pages of results
* Fetch and display next page of results in Load More button is clicked
* Simplify renderContent function to have less repetition
- Hide load more button while fetching results
* Improve loading of new products
- Ensure keyboard focus goes to first new product after Load More is clicked
* Add changefile(s) from automation for the following project(s): woocommerce
* Add blank line to separate sections
* Set category param based on current tab when loading more products
* Improve busy-state screen reader text
Co-authored-by: Boro Sitnikovski <buritomath@gmail.com>
* Add missing dependency
* Move getProductType() function to functions.tsx
- Do not show load more button if isLoading state is true
---------
Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Boro Sitnikovski <buritomath@gmail.com>
* Rework the values used with `setSearchResultsCount`
After https://github.com/Automattic/woocommerce.com/pull/21678/files we
get a `totalProducts` so we can re-use that.
Also remove setting the counts when paginating since we set them to the
total.
* Add search complete announcement h/t @KokkieH
* Show update count only if greater than 0 h/t @andfinally
* Switch to Extensions tab if on My subscriptions when searching
* yoda
---------
Co-authored-by: Cem Ünalan <raicem@users.noreply.github.com>
Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Herman <KokkieH@users.noreply.github.com>
* Support for Business Services in in-app marketplace ()
Contains the changes from:
#46530#46725#47048#47135#47183#47227#47352#47452
* Update plugins/woocommerce-admin/client/marketplace/README.md
Fix documentation punctuation
---------
Co-authored-by: Raja Sekar Manimaran <raja.sekar.manimaran@automattic.com>
Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Michal Iwanow <4765119+mcliwanow@users.noreply.github.com>
Co-authored-by: Dan Q <dan@danq.me>
* Show themes first if no extensions
* Empty search load discover page
* Show three items per row if not dividable by four
* Update search per page to 8 for large screens
* Show 8 items on large screens
* Prevent same tab click
* Add changefile(s) from automation for the following project(s): woocommerce
* Fix function name
---------
Co-authored-by: github-actions <github-actions@github.com>
When tab is changed, `@woocommerce/navigation` package resets
the `term` query parameter. So `query.term` becomes undefined.
Adding the else block allows us to catch that case and then
we can reset the search input.
- Removed duplicate `Search` styles from `header.scss`.
- Removed 10px top padding from `Header`. Applied it to title, meta and search containers instead.
- Deleted duplicate search button style from `header.scss`.
- Swapped round order of search component and header meta div so tab navigation order is correct.
- Added focus style to search component.
- Reduced footer side padding on mobile.
- Changed `.woocommerce-marketplace__header-title` page title to an h1 for accessibility.
- Removed top margin from product cards – the css grid handles the gap.
- Removed margin from `.woocommerce-marketplace__product-card__description`.
- Reduced font weight of price in product cards.
- Set margin below product list header.
- Removed right margin from tab buttons – css grid handles the gap.
- Increased top padding of `.woocommerce-marketplace__content`.
Addressing linter error.
User Menu: Create component and add to header
- Create initial component design
- We may need to return to implement the helper connection URLs once those are in place.
- Some PHPCS errors still exist - this is to be expected for now.
# Conflicts:
# plugins/woocommerce-admin/client/marketplace/stylesheets/_variables.scss
Co-authored-by: And Finally <andfinally@users.noreply.github.com>
Co-authored-by: raicem <unalancem@gmail.com>
- Changed classNames in `Search` component.
- Moved styles from `header.scss` to `search.scss`.
- Deleted `HeaderSearch` and `HeaderSearchButton` components, no longer needed.
- Removed wrapper element around search form.
- Corrected marketplace API address in `Search` component.
- Using state to remember search term, instead of getting value of search input.
- Added condition to clear search input if Escape is pressed while it's focused.
- Not running search if search term is falsy.
- Changed label of "Extensions" tab to "Browse" – we'll do this for the moment, as we have repetition with the page title `Extensions`.
- Reset layout to allow full width
- Added Footer & IconWithText components
Add temporary placeholder components
All components here are temporary and can be removed/replaced when their relevant PR is ready.
Add marketplace footer component
The component is added using a SlotFill to use the existing WC Admin footer and utilise full width correctly.
Setup initial content area layout
Update tab styles
Setup styling to match latest design
Finalise footer, wide layout, and tidy styles
- Applies the wide layout from latest MVP design
- Applies the correct footer links to titles
- Some general style tidying
Organise styles and setup variables
Swap to using CSS Grid for layouts
Update breakpoints
Restructure style naming and update to core styles
Add translation in some places
In-app marketplace search component. Cleaned up the commit history of this branch. Copied changes from these commits:
e9828422706176817e511778980005222aa36cc5
9ca2ae351c97fcd27ecd77a1464c2a9ca16de040
e47815705f3854bf50ff48d7975b7cf2f541614b
976811c458e67ae7fa107c8bf8554fdc3e809d85
46eafdf49fe39c12dee77d6ce0885bdeda527dea
Deleted unused import.
Boro Sitnikovski
Herman
Paul Sealock
berislav grgičak
And Finally
Kyle Nel
raicem
Dan Q
Dan Q