diff --git a/assets/js/src/segments/dynamic/dynamic_segments_filters/woocommerce.tsx b/assets/js/src/segments/dynamic/dynamic_segments_filters/woocommerce.tsx index 863eb8cf74..65f922cf8c 100644 --- a/assets/js/src/segments/dynamic/dynamic_segments_filters/woocommerce.tsx +++ b/assets/js/src/segments/dynamic/dynamic_segments_filters/woocommerce.tsx @@ -10,13 +10,17 @@ import { WooCommerceFormItem, } from '../types'; import { SegmentFormData } from '../segment_form_data'; +import { Grid } from '../../../common/grid'; +import Input from '../../../common/form/input/input'; export const WooCommerceOptions = [ + { value: 'numberOfOrders', label: MailPoet.I18n.t('wooNumberOfOrders'), group: SegmentTypes.WooCommerce }, { value: 'purchasedCategory', label: MailPoet.I18n.t('wooPurchasedCategory'), group: SegmentTypes.WooCommerce }, { value: 'purchasedProduct', label: MailPoet.I18n.t('wooPurchasedProduct'), group: SegmentTypes.WooCommerce }, ]; enum WooCommerceActionTypes { + NUMBER_OF_ORDERS = 'numberOfOrders', PURCHASED_CATEGORY = 'purchasedCategory', PURCHASED_PRODUCT = 'purchasedProduct', } @@ -35,6 +39,9 @@ export function validateWooCommerce(formItems: WooCommerceFormItem): boolean { if (formItems.action === 'purchasedProduct' && !formItems.product_id) { return false; } + if (formItems.action === 'numberOfOrders' && (!formItems.number_of_orders_count || !formItems.number_of_orders_days || !formItems.number_of_orders_type)) { + return false; + } return true; } @@ -54,8 +61,16 @@ export const WooCommerceFields: React.FunctionComponent = ({ onChange, it label: product.name, })); + const numberOfOrdersTypeOptions = [ + { value: '=', label: 'equals' }, + { value: '>', label: 'more than' }, + { value: '<', label: 'less than' }, + ]; + + let optionFields; + if (item.action === WooCommerceActionTypes.PURCHASED_PRODUCT) { - return ( + optionFields = ( compose([ + onChange, + assign(item), + ])({ category_id: option.value })} + automationId="select-segment-category" + /> + ); + } else if (item.action === WooCommerceActionTypes.NUMBER_OF_ORDERS) { + if (!item.number_of_orders_type) { + item.number_of_orders_type = '='; + } + + optionFields = ( +
+ + compose([ + onChange, + assign(item), + ])({ number_of_orders_count: event.target.value })} + /> +
orders
+
+ +
in the last
+ compose([ + onChange, + assign(item), + ])({ number_of_orders_days: event.target.value })} + /> +
days
+
+
+ ); } - return ( -