d3765b43c0
* Populate `window.wcMarketplace` for Marketing > Coupons * TEST CODE: Add promotions dummy data to the endpoint for now See [this comment](https://github.com/Automattic/woocommerce.com/issues/21783#issuecomment-2376471712) as to how we plan to manage this through WCCOM * Initial implementation of the `<PromoCard>` component This commit does the following: - Implement the `PromoCard` component - Refactor the existing `Promotions` component - Extract types - Add support for conditional rendering based on `pathname` - Accept optional parameter `promoCardOnly` - Renders `PromoCard` wherever needed, as requested in the project thread. Some remaining TODOs: 1. Dismiss functionality 2. Tracking 3. Figma design adjustments - CSS styling (Flexbox in Marketplace, etc.) - Percent image, wherever needed - Background image 4. BWC testing (e.g. ensuring that "Get more for your money" banner still works) * Make sure that WCCOM also returns path so that earlier versions of in-app marketplace don't break (path undefined error) * Update T&C link After https://github.com/Automattic/woocommerce.com/issues/21840 * Implement promo banner dismissal logic and tracks * Styling the WooCommerce > Extensions version of the promo component. - Tweaked data on `class-wc-admin-assets.php` to pass `style` and `icon` attributes for that promo. - Moved promo on this page from the marketplace `Header` component to the `Content`, above the Sales Banner notices. - Deleted `percent.svg` and moved its content into a React component. - CSS tweaks for this style of promo. - Changes to elements of `PromoCard` component to allow the layout for this style. * Fixed some TypeScript issues. - Added guard condition in case `promotion.id` is undefined. - Returning null if it isn't - but below `useState` hook, so we conform to rules of hooks. - Setting default value for `promotion.cta_label` to satisfy TypeScript, which expects a node. Style tweaks to `.promo-cta`. Vertical centering of text, hover colour, margins. * Remove unnecessary unique identifier for each promo, and use a smarter way (URIs) to gather the visibility data * Lint * Revert test code * Changelog * Better code comments * Changed `promoCardOnly` attribute of `Promotions` to `format`, to allow for more types in future. * Update plugins/woocommerce-admin/client/marketplace/components/promotions/promotions.tsx Co-authored-by: Boro Sitnikovski <buritomath@gmail.com> * Styling promo cards at different breakpoints. Moved homescreen promo to after store management links. * Added condition to merge array of promos with the main `$promotions` array. * Added `useEffect` so we only record Track event for view of promotion once. Changed Tracks prefix to the shorter `marketplace_promo_`. * Added Tracks events for both formats of promotions, `promo-card`, and the original `notice`. * Merging two style blocks. * Passing `format` to `recordEvent` instead of hard-coding it. * Addressing linter errors. * Moved operation merging promos into the main array into a separate method for greater clarity. * Moved Promotions component on WooCommerce > Home to below task list. * Styling tweaks. Increased schedule of `woocommerce_marketplace_cron_fetch_promotions` cron job to twice daily. Added guard conditions in `Promotions` in case `window.wcMarketplace.promotions` isn't defined or isn't an array. * Reduced SVG size to 72px. * Fixing linter error. * Style tweaks. Using WP components colour vars for CTA and dismiss links. * Fixing linter error. * Reverting change to `schedule_cron_event`, as this method will not be present if only this branch is cherry-picked. --------- Co-authored-by: And Finally <andfinally@users.noreply.github.com> |
||
|---|---|---|
| .. | ||
| assets/images | ||
| components | ||
| contexts | ||
| stylesheets | ||
| utils | ||
| README.md | ||
| index.tsx | ||
| marketplace.scss | ||
README.md
Marketplace
This folder contains the components used in the Marketplace page found in WooCommerce > Extensions.
The page contains two parts, the WooCommerce.com marketplace and a list of products the user purchased.
Marketplace Tabs
- Discover: A curated list of extensions and themes.
- Browse: All extensions.
- Themes: All themes.
- Business Services: All business services.
- Search: Search results.
Marketplace API
The data for the Discover section is fetched from the /wc/v3/marketplace/featured endpoint. This behaves as a proxy to fetch and cache the content from the woocommerce.com/wp-json/wccom-extensions endpoint.
Themes, extensions, business services and search results are fetched directly from WooCommerce.com.
My Subscriptions
This tab contains the list of all the extensions and themes the WooCommerce merchant has purchased from the WooCommerce.com Marketplace.
The merchant needs to connect the site to their WooCommerce.com account to view this list and install, update, and enable the products.
If a subscription is expired, the merchant will be prompted to renew it.
My Subscriptions API
My Subscriptions data uses /wc/v3/marketplace/subscriptions API endpoints to list, install, connect, and update products.
You can find a full list of endpoints in the subscriptions API source code.
Project Structure
The project is structured as follows:
- components: The React components used in the Marketplace page.
- contexts: React contexts.
- utils: Functions used to interact with APIs.
- stylesheets: Shared stylesheets.
- assets: Images.
Development
This feature is part of WooCommerce Admin and uses the same development environment.