From 8292cd9fd3f11c6f274581929c13cac64477e9ae Mon Sep 17 00:00:00 2001
From: Brezo Cordero <8002881+brezocordero@users.noreply.github.com>
Date: Wed, 8 Dec 2021 21:09:18 -0600
Subject: [PATCH] Convert "is in Country" select to multiple select

[MAILPOET-3952]
---
 .../dynamic_segments_filters/woocommerce.tsx  | 45 ++++++++++++-------
 assets/js/src/segments/dynamic/types.ts       |  2 +-
 .../DynamicSegmentsResponseBuilder.php        |  4 ++
 views/segments.html                           |  2 +-
 4 files changed, 35 insertions(+), 18 deletions(-)

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 489518a06b..81acdae388 100644
--- a/assets/js/src/segments/dynamic/dynamic_segments_filters/woocommerce.tsx
+++ b/assets/js/src/segments/dynamic/dynamic_segments_filters/woocommerce.tsx
@@ -57,7 +57,9 @@ export function validateWooCommerce(formItems: WooCommerceFormItem): boolean {
   if (formItems.action === WooCommerceActionTypes.PURCHASED_PRODUCT && purchasedProductIsInvalid) {
     return false;
   }
-  if (formItems.action === WooCommerceActionTypes.CUSTOMER_IN_COUNTRY && !formItems.country_code) {
+  const countryCodeIsInvalid = formItems.country_code === undefined
+    || formItems.country_code.length === 0;
+  if (formItems.action === WooCommerceActionTypes.CUSTOMER_IN_COUNTRY && countryCodeIsInvalid) {
     return false;
   }
   const numberOfOrdersIsInvalid = !formItems.number_of_orders_count
@@ -320,21 +322,32 @@ export const WooCommerceFields: React.FunctionComponent<Props> = ({ filterIndex
     );
   } else if (segment.action === WooCommerceActionTypes.CUSTOMER_IN_COUNTRY) {
     optionFields = (
-      <div>
-        <ReactSelect
-          dimension="small"
-          key="select-segment-country"
-          isFullWidth
-          placeholder={MailPoet.I18n.t('selectWooCountry')}
-          options={countryOptions}
-          value={find(['value', segment.country_code], countryOptions)}
-          onChange={(option: SelectOption): void => updateSegmentFilter(
-            { country_code: option.value },
-            filterIndex
-          )}
-          automationId="select-segment-country"
-        />
-      </div>
+      <>
+        <Grid.CenteredRow>
+          <ReactSelect
+            dimension="small"
+            key="select-segment-country"
+            isFullWidth
+            isMulti
+            placeholder={MailPoet.I18n.t('selectWooCountry')}
+            options={countryOptions}
+            value={
+              filter(
+                (option) => {
+                  if (!segment.country_code) return undefined;
+                  return segment.country_code.indexOf(option.value) !== -1;
+                },
+                countryOptions
+              )
+            }
+            onChange={(options: SelectOption[]): void => updateSegmentFilter(
+              { country_code: (options || []).map((x: SelectOption) => x.value) },
+              filterIndex
+            )}
+            automationId="select-segment-country"
+          />
+        </Grid.CenteredRow>
+      </>
     );
   }
 
diff --git a/assets/js/src/segments/dynamic/types.ts b/assets/js/src/segments/dynamic/types.ts
index f896c03d57..50ffa24eed 100644
--- a/assets/js/src/segments/dynamic/types.ts
+++ b/assets/js/src/segments/dynamic/types.ts
@@ -81,7 +81,7 @@ export interface WooCommerceFormItem extends FormItem {
   total_spent_type?: string;
   total_spent_amount?: number;
   total_spent_days?: number;
-  country_code?: string;
+  country_code?: string[];
 }
 
 export interface WooCommerceSubscriptionFormItem extends FormItem {
diff --git a/lib/API/JSON/ResponseBuilders/DynamicSegmentsResponseBuilder.php b/lib/API/JSON/ResponseBuilders/DynamicSegmentsResponseBuilder.php
index 573ed06dd5..2a679770a7 100644
--- a/lib/API/JSON/ResponseBuilders/DynamicSegmentsResponseBuilder.php
+++ b/lib/API/JSON/ResponseBuilders/DynamicSegmentsResponseBuilder.php
@@ -51,6 +51,10 @@ class DynamicSegmentsResponseBuilder {
       $filter['id'] = $dynamicFilter->getId();
       $filter['segmentType'] = $dynamicFilter->getFilterData()->getFilterType(); // We need to add filterType with key segmentType due to BC
       $filter['action'] = $dynamicFilter->getFilterData()->getAction();
+      if (isset($filter['country_code']) && !is_array($filter['country_code'])) {
+        // Convert to multiple values filter
+        $filter['country_code'] = [$filter['country_code']];
+      }
       if (isset($filter['wordpressRole']) && !is_array($filter['wordpressRole'])) {
         // new filters are always array, they support multiple values, the old didn't convert old filters to new format
         $filter['wordpressRole'] = [$filter['wordpressRole']];
diff --git a/views/segments.html b/views/segments.html
index 3ed02d7e04..51368eacca 100644
--- a/views/segments.html
+++ b/views/segments.html
@@ -215,7 +215,7 @@
     'wooTotalSpentAmount': __('amount'),
     'selectWooPurchasedCategory': __('Search categories'),
     'selectWooPurchasedProduct': __('Search products'),
-    'selectWooCountry': __('Select country'),
+    'selectWooCountry': __('Search countries'),
     'woocommerce': _x('WooCommerce', 'Dynamic segment creation: User selects this to use any woocommerce filters'),
 
     'dynamicSegmentSizeIsCalculated': __('Calculating segment size…'),