* 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>
* In-App: make in-app header sticky
z-index: 1 is required to make sure the header appears above product
cards.
Also had to remove a parent `overflow: hidden` property. Apparently,
it's there to remove a second scrollbar. Upon removal, I didn't see
any double scrollbars, although it can be platform differences. Will
check it out in the PR review.
* Add changefile(s) from automation for the following project(s): woocommerce
* Update Change Your Store width for Marketplace search listing
Setting it 450px hardcoded causes overflows and breaks the layout.
See:
https://github.com/woocommerce/woocommerce/pull/51187#issuecomment-2344003169
* Move CYS tweak to the component
It was placed in the marketplace SCSS code previously. GitHub:
https://github.com/woocommerce/woocommerce/pull/51187#discussion_r1758381473
* Remove marketplace-specific styles from customize store banner
---------
Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Herman <KokkieH@users.noreply.github.com>
- `ProductListContextProvider` provides `setIsLoading` function as well as `isLoading`.
- `Discover` uses these values from context, instead of keeping a loading state in itself.
- `FeedbackModal` calls `maybSetTimeout` when `isLoading` changes. If `isLoading` isn't truthy, and snackbar hasn't already rendered, it sets a timeout of 5 seconds to show it.
- Removed wrapping <WooFooterItem> from around Footer component, so it's no longer a child of the WooCommerce Admin `.woocommerce-layout__footer` footer.
- Removed the `position: relative` from `.woocommerce-layout__footer`. It needs to be `position: fixed`.
- Added FooterContent component to Footer, to allow the layout we want.
- Changed use of context. This now only has states for the selected tab and loading state.
- We use this context in `Tabs` and `Content` to keep track of which tab is selected, and set the selected tab.
- We also use it in `Discover` and `Extensions`, which both report loading state to the context. This allows us to use it to only render the snackbar when loading is complete.
- Extensions: moved `productList` and `setProductList` and logic for getting product list from the context provider to a state in this component. We don't need to share the list of products in the context.
- Renamed `ProductListContext`, `ProductListContextProvider` and `productListContextValue` to more generic `MarketplaceContext`, `MarketplaceContextProvider` and `marketplaceContextValue`.
- Renamed a constant and created constants for API paths.
- Only shows snackbar after content has loaded, and after a timeout. We set a date `marketplace_redesign_2023_last_shown_date` in local storage to ensure we only show one snackbar.
- 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`.
Boro Sitnikovski
Cem Ünalan
Paul Sealock
raicem
And Finally
Dan Q
Kyle Nel