Commit Graph

72 Commits

Author SHA1 Message Date
Kyle Nel d8adecf783
Marketplace Themes: Feature Branch (#40159)
* Support for themes in in-app marketplace.

Contains the changes from:

https://github.com/woocommerce/woocommerce/pull/40247
https://github.com/woocommerce/woocommerce/pull/40272
https://github.com/woocommerce/woocommerce/pull/40302
https://github.com/woocommerce/woocommerce/pull/40303
https://github.com/woocommerce/woocommerce/pull/40333
https://github.com/woocommerce/woocommerce/pull/40368
https://github.com/woocommerce/woocommerce/pull/40375
https://github.com/woocommerce/woocommerce/pull/40375
https://github.com/woocommerce/woocommerce/pull/40389

* `.woocommerce-marketplace__discover`: changed `align-items` `flex-start` to `stretch` to properly display products on large and very large viewports.

* Delete plugins/woocommerce/changelog/add-18026-marketplace-theme-cards

Removing from feature branch before final review

* Delete plugins/woocommerce/changelog/add-18027-themes-to-in-app-search

Removing from feature branch before final review

* Delete plugins/woocommerce/changelog/add-marketplace-theme-discover-section

Removing from feature branch before final review

* Delete plugins/woocommerce/changelog/update-in-app-multiple-category-filters

Removing from feature branch before final review

* Delete plugins/woocommerce/changelog/update-theme-no-result-style

Removing from feature branch before final review

* Add changefile(s) from automation for the following project(s): woocommerce

---------

Co-authored-by: And Finally <andfinally@users.noreply.github.com>
Co-authored-by: Dan Q <dan@danq.me>
Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Dan Q <danq@automattic.com>
2023-10-04 18:59:34 +02:00
raicem 228084cb7c Marketplace: Change the way we space out heading and content area
Previous method caused issues when you go from WooCommerce > Home to
WooCommerce > Marketplace. The header was going missing on the
Marketplace page.
2023-10-03 17:11:21 +01:00
Dan Q 8685fd211e
Rather than adding border, add color to border of search box (#40242) 2023-09-25 10:35:38 +01:00
raicem 15257f8761 Markatplace: Reset search input when tab changes
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.
2023-09-22 16:16:04 +01:00
Dan Q 9b62faed1a Merge branch 'trunk' into fix/wccom-18029-suppress-double-scrollbar 2023-09-19 20:02:53 +01:00
Dan Q f12fb99d9d Merge branch 'trunk' into fix/wccom-17944-reposition-notifications 2023-09-19 18:28:29 +01:00
Dan Q 0c8269c3b2 Merge branch 'trunk' into fix/wccom-18029-suppress-double-scrollbar 2023-09-19 18:28:09 +01:00
And Finally 6aa55f6334
In-App Marketplace: Update "no results" design for Extensions search (#40268) 2023-09-19 16:32:17 +01:00
Dan Q 59cb9fad48 Appease linter 2023-09-19 14:46:59 +01:00
Dan Q 9849ade9fa Correct quote style 2023-09-19 14:41:55 +01:00
Dan Q 98ac373b1b Correct CSS for image size! 2023-09-19 14:40:17 +01:00
Dan Q 96cbb30a76 Appease linter 2023-09-19 11:52:13 +01:00
Dan Q dcd08ac1b6 Apply empty string to URL in event that vendorUrl is absent 2023-09-19 11:39:01 +01:00
Dan Q 8ee8ff750b Suppress category selector only on no-results, not all search pages 2023-09-19 11:27:37 +01:00
Dan Q 078e178997 Suppress category selector when showing search results 2023-09-19 10:58:18 +01:00
Kyle Nel 5e88b001fa
Update wording on Marketplace footer (#40251)
* Update wording on Marketplace footer
* Add changefile(s) from automation for the following project(s): woocommerce

---------

Co-authored-by: github-actions <github-actions@github.com>
2023-09-19 11:39:09 +02:00
Dan Q d23ac3ed10 Appease linter 2023-09-19 09:54:01 +01:00
Dan Q 3848b43052 Add width and height to image to reduce CLS 2023-09-19 09:34:05 +01:00
Dan Q 39caeb1c51 Ensure text wraps at an appropriate point 2023-09-19 09:33:49 +01:00
Dan Q e599390b9c Ensure new image centered 2023-09-19 09:33:40 +01:00
Dan Q e22337d906 Switch SVG for new one 2023-09-19 09:33:21 +01:00
Dan Q da7755a7c1 Merge branch 'trunk' into fix/wccom-18029-suppress-double-scrollbar 2023-09-18 13:34:32 +01:00
Dan Q d339e9ff5b Rather than adding border, add color to border of search box
This prevents the "jiggle" issue.
2023-09-18 10:47:12 +01:00
Kyle Nel e1d72bde0a
Marketplace: Add the query parameters to product page URLs (#39901)
* Marketplace: Add the right URL parameters to product URLs

* Add changefile(s) from automation for the following project(s): woocommerce

---------

Co-authored-by: raicem <unalancem@gmail.com>
Co-authored-by: github-actions <github-actions@github.com>
2023-09-18 11:10:56 +03:00
Kyle Nel d1f935cca4
Add country to in-app marketplace search (#40091)
* Marketplace: remove orphaned components

* Marketplace: add country to search query

* Add changefile(s) from automation for the following project(s): woocommerce

Co-authored-by: Cem Ünalan <raicem@users.noreply.github.com>

---------

Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Cem Ünalan <raicem@users.noreply.github.com>
2023-09-13 11:32:05 +02:00
Kyle Nel 6e20ecb3bc
Marketplace: update discover page card counts (#40020)
* Marketplace: update discover page card counts

* Marketplace: Apply PR review feedback

* Addressing linter error. Whitespace.

* Add changefile(s) from automation for the following project(s): woocommerce

---------

Co-authored-by: And Finally <andfinally@users.noreply.github.com>
Co-authored-by: github-actions <github-actions@github.com>
2023-09-11 15:33:43 +02:00
Dan Q 702b768570 Suppress second scrollbar on WooCommerce > Extensions pages
This is necessary because the layout of WooCommerce > Extensions pages adjusts the page height (to compensate for the larger header). On systems with scrollbars set to always-visible, this results in a ~1px overflow of the inner content and double-scrollbars are visible. This CSS mitigates that.
2023-09-05 14:33:27 +01:00
Dan Q b430015d08 Reposition alert boxes
WooCommerce store alerts shown on the Marketplace page are mis-aligned on account of the CSS that applies to the Marketplace. This change re-positions them and, as a bonus, aligns their left and right edges with the rest of the page content, improving the design.
2023-09-05 13:15:51 +01:00
Dan Q e76fe48a89 Move top padding of Marketplace Extensions content to instead be top margin of Marketplace Extensions page
This mitigates the issue whereby notifications push page content down a LONG way, and is a more-correct way to lay out the content.
2023-09-05 13:14:48 +01:00
And Finally 21d1bab26e [wccom-17942] Making sure snackbar doesn't appear before content has loaded.
- Fixing `prettier` linter errors.
2023-09-04 16:00:30 +01:00
And Finally 6d65d54ed5 [wccom-17942] Making sure snackbar doesn't appear before content has loaded.
- Fixing `prettier` linter errors.
2023-09-04 15:45:24 +01:00
And Finally 6ae83b08ec [wccom-17942] Making sure snackbar doesn't appear before content has loaded.
- Addressing feedback. Renamed `MARKETPLACE_API_HOST` TO `MARKETPLACE_HOST` to make it less confusing – we don't only use it for API URLs.
2023-08-31 16:14:06 +01:00
And Finally 3c8f4861e4 [wccom-17942] Only showing feedback snackbar when content of in-app marketplace has finished loading. Making sure snackbar is fixed position, so it's visible wherever you are on the page.
- `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.
2023-08-26 12:47:23 +01:00
raicem 60c07013d4 Marketplace: Cache Discover page content
We were hitting the WCCOM API directly from the front end. However,
that limits of in terms of caching and reducing the load on WCCOM.

To prevent that, we added a REST API endpoint. This endpoint
fetches discover page content from WCCOM and puts in a transient.
This is actually how the page works in the previous version. So
we were able to reuse a lot of the code.
2023-08-18 18:59:36 +03:00
And Finally 87706c5e5a [wccom-17713] Addressing design feedback.
- 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.
2023-08-18 15:20:00 +01:00
And Finally 9fbb8a505b
In-App Marketplace: Improve Product Card Clickability (#39766) 2023-08-17 09:04:27 +01:00
And Finally 436ce4bd4d
Update copy on In-App Marketplace (#39767) 2023-08-17 09:02:25 +01:00
And Finally 6b1694f89b
Update marketplace product card for updated WCCOM search API (#39689) 2023-08-17 08:59:46 +01:00
Kyle Nel 542b33d859
Product Card: update to to using new API values
# Conflicts:
#	plugins/woocommerce-admin/client/marketplace/components/product-card/product-card.tsx
2023-08-16 13:55:59 +02:00
Dan Q cb5769ed0b Correct card hover outline color 2023-08-16 12:26:29 +01:00
Dan Q 555a8aaff0 Correct font color of search "no results" interpretation to g-gray 700 2023-08-16 11:00:59 +01:00
Dan Q 4831c6712b Improve semantics of "no results" page with a <h3> 2023-08-16 10:59:48 +01:00
Dan Q 91afe9f6e2 Correct search placeholder text 2023-08-16 10:56:15 +01:00
Dan Q e4e8490925 Fix heading font size 2023-08-16 10:54:29 +01:00
Dan Q 9c179240ab Switch "Woo Marketplace" hug in footer to gray-50 2023-08-16 10:18:22 +01:00
And Finally cc6ae76c42
Fix child keys error in `Tabs` component and and remove unnecessary `sanitizeHTML` call from `FeedbackModal` component (#39734) 2023-08-16 10:17:33 +01:00
Dan Q a88ccc1373 Update footer text 2023-08-16 10:05:53 +01:00
Dan Q b9a675be82 Linting CSS 2023-08-16 09:29:56 +01:00
Dan Q a89d05b8d1 Remove unused dependency 2023-08-16 09:28:51 +01:00
Dan Q 2397f37c93 Make product cards entirely clickable with hover effect 2023-08-16 09:20:24 +01:00