2020-06-16 02:30:41 +00:00
|
|
|
/**
|
2020-08-13 02:05:22 +00:00
|
|
|
* External dependencies
|
2020-06-16 02:30:41 +00:00
|
|
|
*/
|
|
|
|
import { __ } from '@wordpress/i18n';
|
2022-02-08 22:22:26 +00:00
|
|
|
import { useUser } from '@woocommerce/data';
|
2020-06-16 02:30:41 +00:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Internal dependencies
|
|
|
|
*/
|
|
|
|
import './style.scss';
|
2023-03-24 13:28:38 +00:00
|
|
|
import RecommendedExtensions from './recommended-extensions';
|
|
|
|
import KnowledgeBase from './knowledge-base';
|
2022-01-06 12:53:30 +00:00
|
|
|
import { getAdminSetting } from '~/utils/admin-settings';
|
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 14:36:06 +00:00
|
|
|
import Promotions from '~/marketplace/components/promotions/promotions';
|
2020-06-16 02:30:41 +00:00
|
|
|
import '../data';
|
|
|
|
|
|
|
|
const CouponsOverview = () => {
|
2022-02-08 22:22:26 +00:00
|
|
|
const { currentUserCan } = useUser();
|
|
|
|
|
2023-03-27 13:55:42 +00:00
|
|
|
const showExtensions = !! (
|
2022-02-08 22:22:26 +00:00
|
|
|
getAdminSetting( 'allowMarketplaceSuggestions', false ) &&
|
2023-03-27 13:55:42 +00:00
|
|
|
currentUserCan( 'install_plugins' )
|
|
|
|
);
|
2020-06-16 02:30:41 +00:00
|
|
|
|
|
|
|
return (
|
|
|
|
<div className="woocommerce-marketing-coupons">
|
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 14:36:06 +00:00
|
|
|
<Promotions format="promo-card" />
|
2023-03-27 13:55:42 +00:00
|
|
|
{ showExtensions && (
|
2020-06-16 02:30:41 +00:00
|
|
|
<RecommendedExtensions
|
2020-07-28 02:32:58 +00:00
|
|
|
title={ __(
|
|
|
|
'Recommended coupon extensions',
|
2022-03-30 09:00:04 +00:00
|
|
|
'woocommerce'
|
2020-07-28 02:32:58 +00:00
|
|
|
) }
|
|
|
|
description={ __(
|
|
|
|
'Take your coupon marketing to the next level with our recommended coupon extensions.',
|
2022-03-30 09:00:04 +00:00
|
|
|
'woocommerce'
|
2020-07-28 02:32:58 +00:00
|
|
|
) }
|
2020-06-16 02:30:41 +00:00
|
|
|
category="coupons"
|
|
|
|
/>
|
|
|
|
) }
|
|
|
|
<KnowledgeBase
|
|
|
|
category="coupons"
|
2020-07-28 02:32:58 +00:00
|
|
|
description={ __(
|
|
|
|
'Learn the ins and outs of successful coupon marketing from the experts at WooCommerce.',
|
2022-03-30 09:00:04 +00:00
|
|
|
'woocommerce'
|
2020-07-28 02:32:58 +00:00
|
|
|
) }
|
2020-06-16 02:30:41 +00:00
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default CouponsOverview;
|