* 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>
* Replace classnames with clsx within woocommerce-blocks.
* Undo unnecessary change to getClassnames const.
* Replace classnames with clsx within woocommerce-admin.
* Add changelog.
* Update the pnpm lock file
* Address lint.
* Address lint errors for the block-library.
* Remove use of wc-admin-settings from packages
* Move getSetting to getAdminSetting and remove wc-admin-settings package
* Add changelog
* Update package.json and remove last use of wc-admin-settings
* Change WooCommerce Card to WordPress Card in the WelcomeCard component.
Use isElevated and margin-bottom to make the Card look close to previous UI.
* Use WordPress Card in KnowledgeBase.
For the description in Card header, it will be rendered as a p element instead of h2, which should be more semantically correct. Test is updated to reflect this.
* Add Card component wrapper that supports title and description props.
* Use WordPress Card component wrapper in recommended extensions.
* Code refactor to use WordPress Card wrapper.
* Use WordPress Card wrapper in installed extension.
* Use margin-bottom for children layout at the parent CSS level.
* Add test for Card.
* Fix no margin between cards in Coupons page, and remove previous css for WooCommerce Card.
* Remove old WooCommerce Card css.
* Don't use isElevated in Card, to match the style in WooCommerce Home screen.
* Make item border color consistent with WordPress Card in Installed Extension card.
Use WordPress Card without CardBody here because we don't want the padding from CardBody.
* Make the card description look similar to previous WooCommerce Card description.
* Fix spelling in CSS class names.
* Fix WooCommerce spelling in comment.
* Change the Marketing Card style to match with WooCommerce Home style.
Also change the text gray color to use CSS variable instead of hardcoded gray value.
Also remove the usage of h2 in the Card header to follow WooCommerce Home style.
* Use $gray-200 as light borders between items in card.
* Remove unneeded CSS code based on TODO in comment.
* add new woocommerce/eslint-plugin
* implement eslint-plugin (switch scripts to use wp-scripts etc)
* various linting fixes
* more lint fixes
* improve fix script
* more eslint fixes
* more eslint fixes
* temporary convert rules to warnings until they are all handled
* linting fixes
* update package-lock.json
* remove duplicates
* remove unnecessary `@wordpress/dependency-group` rule config
* add docs and adjust rules
* prettier fix
* fix merge artifact
* convert more rules to warnings
* change order to reflect importance
* install babel-preset-default
* remove unnecessary configuration for babel
* fix dependency group rule and test
* fix test
* handle collapsible whitespace
* add react testing library eslint plugin
* linter errors
* Add back in prettierrc
* package-lock update
* js lint fix with --fix
* disable whitespace in translation
* package-lock update
* make eslint actual dependency, not peer dependency
* pin eslint to v7
* I don't know why, but its working
* fix lint js
Co-authored-by: Paul Sealock <psealock@gmail.com>
Fixeswoocommerce/woocommerce-admin#4732
This updates `@wordpress/base-styles`, and because `@wordpress/components` depends on variables from it, that must be updated as well.
There are 3 major changes required as part of updating:
1. The $theme-color variable is no longer exposed by base-styles. Instead there are 3 css vars exposed. These are made available by use of a provided mixin. Situations where $theme-color was darkened using scss have been mapped as best as possible to the 2 other darkened shades of the css var that are available such as `--wp-admin-theme-color-darker-20` and `--wp-admin-theme-color-darker-10`. In some cases this means the colors are not exactly the same as before.
2. The post css `theme()` call is no longer available. All uses of this have been consolidated to use of the main theme css var `--wp-admin-theme-color`. This means that calls like `theme(secondary)` or `theme(outline)` etc have all been consolidated to the one color.
3. Many of the variables used for different shades of gray have been deprecated. These have been mapped across to the new gray variables. (Mapped according to the list described in woocommerce/woocommerce-admin#4732)
* Fix incorrect woocommere-admin spelling
* Update styles
* Add icons
* Add hover effect for coupon icons
* Remove variable comment
* Update color case
* Style lint fixes
* Use $theme-color
* Update icons, use wordpress/icons where possible
* Adjustment for using smaller default icons and no fills in the svgs
* Use var(--wp-admin-theme-color) instead of $theme-color
* Reorg coupons stylesheet
* Update PropTypes for ProductIcon
* Adjust icon export
* Rever to using $theme-color
* Add versions of link, people and currency-dollar
* Overide coupons icon background color
* Add background transition to icon wrapper
* Handle new object for posts and recommendations
* Set breadcrumb parent for woocommerce-coupons to be woocommerce-marketing
* Add main coupon wrapping component
* Render coupon wrapper element below coupon table using wp-admin-scripts
* Finish off implementing category param for data store resolvers
* Create a helper trait for legacy coupons
* Add coupon related titles and descriptions
* Add note for the coupons being moved
* Allow for querying by note name in the notes Data Store
* Revamp coupon moved trait
* Add the new note only if we don't have an unactioned note and perform a redirect to ensure menu updates
* set_icon is deprecated
* Move coupon menu, adding a note for customers
* Translate title and descriptions
* Whitespace
* Account for coupon functionality being disabled
* Hide legacy menu before redirect
* Don’t keep adding the note if customer dismisses it from inbox
* Move behind feature flag
* Add note if feature enabled
* Add filter to override coupon feature
* Tweak option name to refer to wc_admin
To help with finding etc.
* use css variables
* Add the new note only if we don't have an unactioned note
* Switch the filter logic so `false` turns off the feature
This is a bit more intuitive when utilizing the filter
* Remove extraneous string and add trailing new lines
* Use correct posts object in tests
* Revert accidental removal of where_types
* Add coupons category to RecommendedExtensions
* Use 1.1 api to get categorized recommendations
* Add missing text domains
* Fix menu handling to point to woocommerce-marketing
* Only load coupon scripts on the coupon page
* Rework marketing menu logic to register pages more properly
* Use correct wc-admin path for marketing page
* Remove separate feature flag
WC Admin has existing feature flags to load enable/disable the feature
* Only set the coupon parent to marketing when the feature is enabled
* Only load coupon feature if marketing feature is enabled
Co-authored-by: Dan Bitzer <danielbitzer@gmail.com>
Co-authored-by: Jeremy Pry <jeremy.pry@gmail.com>
Boro Sitnikovski
RJ
Patricia Hillebrandt
Leif Singer
Paul Sealock
Gan Eng Chin
Eason
Leif Singer
RJChow
louwie17
Tomek Wytrębowicz
Darren Ethier
Sam Seay
Jason Conroy