Match select boxes with same select boxes in segments

[MAILPOET-2553]

assets/js/src/newsletters/automatic_emails/events/event_options.tsx

@@ -2,25 +2,20 @@ import React from 'react';
 import Selection from 'form/fields/selection.jsx';
 import _ from 'underscore';
 
-const APIEndpoint = 'automatic_emails';
-
 type EventOptions = {
-  values: {
+  values?: {
     id: string;
     name: string;
   }[];
   multiple: boolean;
   placeholder: string;
-  type: string;
-  remoteQueryMinimumInputLength: number;
-  remoteQueryFilter: string;
+  endpoint: string;
 }
 
 type Props = {
   eventOptions: EventOptions;
   eventSlug: string;
   selected: string[];
-  emailSlug: string;
   onValueChange: (value) => void;
 }
 
@@ -37,7 +32,6 @@ export const EventOptions = ({
   eventOptions,
   eventSlug,
   selected,
-  emailSlug,
   onValueChange,
 }: Props) => {
   function handleEventOptionChange(e) {
@@ -51,38 +45,39 @@ export const EventOptions = ({
 
     const fieldProps = {
       field: {
-        id: `event_options_${eventSlug}`,
         name: `event_options_${eventSlug}`,
         forceSelect2: true,
+        endpoint: eventOptions.endpoint,
         resetSelect2OnUpdate: true,
         values: getEventOptionsValues(eventOptions),
         multiple: eventOptions.multiple || false,
         placeholder: eventOptions.placeholder || false,
-        extendSelect2Options: {
-          minimumResultsForSearch: Infinity,
-        },
         transformChangedValue: (value, valueTextPair) => _.map(
           valueTextPair,
           (data) => ({ id: data.id, name: data.text })
         ),
         selected: () => selected,
+        getLabel: undefined,
+        getValue: undefined,
       },
       onValueChange: handleEventOptionChange,
+      item: {
+        action: '',
+      },
     };
 
-    if (eventOptions.type === 'remote') {
-      fieldProps.field = _.extend(fieldProps.field, {
-        remoteQuery: {
-          minimumInputLength: eventOptions.remoteQueryMinimumInputLength || null,
-          endpoint: APIEndpoint,
-          method: 'get_event_options',
-          data: {
-            filter: eventOptions.remoteQueryFilter || null,
-            email_slug: emailSlug,
-            event_slug: eventSlug,
-          },
-        },
-      });
+    if (eventOptions.endpoint === 'product_categories') {
+      fieldProps.field.getLabel = _.property('cat_name');
+      fieldProps.field.name = 'category_id';
+      fieldProps.field.getValue = _.property('term_id');
+      fieldProps.item = { action: 'purchasedCategory' };
+    }
+
+    if (eventOptions.endpoint === 'products') {
+      fieldProps.field.getLabel = _.property('title');
+      fieldProps.field.getValue = _.property('ID');
+      fieldProps.field.name = 'product_id';
+      fieldProps.item = { action: 'purchasedProduct' };
     }
 
     return (
@@ -90,6 +85,7 @@ export const EventOptions = ({
         <Selection
           field={fieldProps.field}
           onValueChange={fieldProps.onValueChange}
+          item={fieldProps.item}
         />
         <div className="mailpoet-gap" />
       </>

lib/AdminPages/Pages/Newsletters.php

@@ -168,6 +168,27 @@ class Newsletters {
     $data['display_detailed_stats'] = Installer::getPremiumStatus()['premium_plugin_initialized'];
     $data['newsletters_templates_recently_sent_count'] = $this->newsletterTemplatesRepository->getRecentlySentCount();
 
+    $data['product_categories'] = $this->wp->getCategories(['taxonomy' => 'product_cat']);
+
+    usort($data['product_categories'], function ($a, $b) {
+      return strcmp($a->catName, $b->catName);
+    });
+
+    $data['products'] = $this->getProducts();
+
     $this->pageRenderer->displayPage('newsletters.html', $data);
   }
+
+  private function getProducts() {
+    $products = $this->wp->getResultsFromWpDb(
+      "SELECT `ID`, `post_title` FROM {$this->wp->getWPTableName('posts')} WHERE `post_type` = %s ORDER BY `post_title` ASC;",
+      'product'
+    );
+    return array_map(function ($product) {
+      return [
+        'title' => $product->post_title, // phpcs:ignore Squiz.NamingConventions.ValidVariableName.NotCamelCaps
+        'ID' => $product->ID,
+      ];
+    }, $products);
+  }
 }

lib/AutomaticEmails/WooCommerce/Events/PurchasedInCategory.php

@@ -45,10 +45,8 @@ class PurchasedInCategory {
       'listingScheduleDisplayTextPlural' => __('Email sent when a customer buys a product in categories: %s', 'mailpoet'),
       'options' => [
         'multiple' => true,
-        'type' => 'remote',
-        'remoteQueryMinimumInputLength' => 3,
-        'remoteQueryFilter' => 'woocommerce_product_purchased_get_categories',
-        'placeholder' => _x('Start typing to search for categories…', 'Search input for product category (ecommerce)', 'mailpoet'),
+        'endpoint' => 'product_categories',
+        'placeholder' => _x('Search category', 'Search input for product category (ecommerce)', 'mailpoet'),
       ],
     ];
   }

lib/AutomaticEmails/WooCommerce/Events/PurchasedProduct.php

@@ -66,11 +66,9 @@ class PurchasedProduct {
       'listingScheduleDisplayText' => WPFunctions::get()->__('Email sent when a customer buys product: %s', 'mailpoet'),
       'listingScheduleDisplayTextPlural' => WPFunctions::get()->__('Email sent when a customer buys products: %s', 'mailpoet'),
       'options' => [
-        'type' => 'remote',
         'multiple' => true,
-        'remoteQueryMinimumInputLength' => 3,
-        'remoteQueryFilter' => 'woocommerce_product_purchased_get_products',
-        'placeholder' => WPFunctions::get()->__('Start typing to search for products...', 'mailpoet'),
+        'endpoint' => 'products',
+        'placeholder' => __('Search products', 'mailpoet'),
       ],
     ];
   }

views/newsletters.html

@@ -29,6 +29,16 @@
       var mailpoet_premium_active = <%= json_encode(premium_plugin_active) %>;
       var mailpoet_transactional_emails_opt_in_notice_dismissed = '<%= transactional_emails_opt_in_notice_dismissed %>';
       var mailpoet_mss_key_invalid = <%= mss_key_invalid ? 'true' : 'false' %>;
+      var mailpoet_product_categories = <%= json_encode(product_categories)  %>;
+      mailpoet_product_categories = mailpoet_product_categories.map(function(category) {
+        category.id = category.cat_ID;
+        return category;
+      });
+      var mailpoet_products = <%= json_encode(products) %>;
+      mailpoet_products = mailpoet_products.map(function(product) {
+        product.id = product.ID;
+        return product;
+      });
 
       var has_mss_key_specified = <%= json_encode(has_mss_key_specified) %>;
       var mailpoet_account_url = '<%= add_referral_id("https://account.mailpoet.com/?s=" ~ subscriber_count ~ "&email=" ~ current_wp_user.user_email) | escape('js') %>';