woocommerce/plugins/woocommerce-admin/client/marketing
Boro Sitnikovski d3765b43c0
Add BFCM promo (#51739)
* 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>
2024-10-03 15:36:06 +01:00
..
components Rename Google Listings and Ads with Google for WooCommerce (#47614) 2024-07-22 18:59:43 +04:00
coupons Add BFCM promo (#51739) 2024-10-03 15:36:06 +01:00
data fix: fixed all instances of no-use-before-define lint rule violations 2023-11-16 19:21:30 +08:00
data-multichannel Add formatting for Cost and Sales numbers in Campaigns card in Marketing page (#44917) 2024-03-19 01:56:08 +08:00
hooks Fix typos. (#50047) 2024-08-23 18:26:09 +01:00
overview-multichannel Add BFCM promo (#51739) 2024-10-03 15:36:06 +01:00
types Marketing: Add "Sales" column in Campaigns card (#43284) 2024-01-19 01:42:35 +08:00
utils Add `source` event props for `marketing_recommended_extension` track events to differentiate recommendations from woo.com API or default fallback data (#44714) 2024-02-20 19:44:28 +08:00
README.md Marketing Tab MVP (https://github.com/woocommerce/woocommerce-admin/pull/3953) 2020-03-28 06:48:27 -07:00

README.md

Marketing

This folder contains the components used in the Marketing page.