* 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>
- Aims to make those skeleton loaders more accurately represent this size and shape of the content that will replace them.
- Refactors the code so that components are responsible for hosting their own skeleton code, attached to an `isLoading` variable, making it easier to stay consistent as changes are made in future.
- 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>
- Reset layout to allow full width
- Added Footer & IconWithText components
Add temporary placeholder components
All components here are temporary and can be removed/replaced when their relevant PR is ready.
Add marketplace footer component
The component is added using a SlotFill to use the existing WC Admin footer and utilise full width correctly.
Setup initial content area layout
Update tab styles
Setup styling to match latest design
Finalise footer, wide layout, and tidy styles
- Applies the wide layout from latest MVP design
- Applies the correct footer links to titles
- Some general style tidying
Organise styles and setup variables
Swap to using CSS Grid for layouts
Update breakpoints
Restructure style naming and update to core styles
Add translation in some places
In-app marketplace search component. Cleaned up the commit history of this branch. Copied changes from these commits:
e9828422706176817e511778980005222aa36cc5
9ca2ae351c97fcd27ecd77a1464c2a9ca16de040
e47815705f3854bf50ff48d7975b7cf2f541614b
976811c458e67ae7fa107c8bf8554fdc3e809d85
46eafdf49fe39c12dee77d6ce0885bdeda527dea
Deleted unused import.
Boro Sitnikovski
Paul Sealock
berislav grgičak
And Finally
raicem
Kyle Nel