From 4463f32e8b0e83246ee6b28d17a0c9bca13cf20c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20Lys=C3=BD?= <jan.lysy@automattic.com>
Date: Wed, 9 Jun 2021 15:46:16 +0200
Subject: [PATCH] Disable save button when count is unknown

[MAILPOET-3469]
---
 .../css/src/components-plugin/_segments.scss  |  3 ++-
 assets/js/src/segments/dynamic/form.tsx       | 12 ++++++++--
 .../dynamic/subscribers_calculator.ts         |  2 +-
 .../segments/dynamic/subscribers_counter.tsx  | 24 ++++++++++++-------
 views/segments.html                           |  2 +-
 5 files changed, 29 insertions(+), 14 deletions(-)

diff --git a/assets/css/src/components-plugin/_segments.scss b/assets/css/src/components-plugin/_segments.scss
index 1687242cf8..c000d18150 100644
--- a/assets/css/src/components-plugin/_segments.scss
+++ b/assets/css/src/components-plugin/_segments.scss
@@ -1,6 +1,7 @@
 .mailpoet-segments-name-section,
 .mailpoet-segments-description-section,
-.mailpoet-segments-segments-section {
+.mailpoet-segments-segments-section,
+.mailpoet-segments-counter-section {
   grid-column: span 2;
 }
 
diff --git a/assets/js/src/segments/dynamic/form.tsx b/assets/js/src/segments/dynamic/form.tsx
index b292c5c2b3..dfc84550d0 100644
--- a/assets/js/src/segments/dynamic/form.tsx
+++ b/assets/js/src/segments/dynamic/form.tsx
@@ -23,6 +23,7 @@ import {
   Segment,
   SegmentTypes,
   SubscriberActionTypes,
+  SubscriberCount,
 } from './types';
 
 interface Props {
@@ -47,6 +48,11 @@ export const Form: React.FunctionComponent<Props> = ({
     [segment]
   );
 
+  const subscriberCount: SubscriberCount = useSelect(
+    (select) => select('mailpoet-dynamic-segments-form').getSubscriberCount(),
+    []
+  );
+
   const { updateSegment, updateSegmentFilter, handleSave } = useDispatch('mailpoet-dynamic-segments-form');
 
   return (
@@ -158,7 +164,9 @@ export const Form: React.FunctionComponent<Props> = ({
             {MailPoet.I18n.t('addCondition')}
           </Button>
         </div>
-        <SubscribersCounter />
+        <div className="mailpoet-segments-counter-section">
+          <SubscribersCounter />
+        </div>
         <div className="mailpoet-form-actions">
           <Button
             type="submit"
@@ -166,7 +174,7 @@ export const Form: React.FunctionComponent<Props> = ({
               e.preventDefault();
               handleSave(segmentId);
             }}
-            isDisabled={!isFormValid(segment.filters)}
+            isDisabled={!isFormValid(segment.filters) || subscriberCount.count === undefined}
           >
             {MailPoet.I18n.t('save')}
           </Button>
diff --git a/assets/js/src/segments/dynamic/subscribers_calculator.ts b/assets/js/src/segments/dynamic/subscribers_calculator.ts
index 3d2da5ad93..f78e3a2a36 100644
--- a/assets/js/src/segments/dynamic/subscribers_calculator.ts
+++ b/assets/js/src/segments/dynamic/subscribers_calculator.ts
@@ -41,7 +41,7 @@ function loadCount(formItem: Segment): Promise<Result | void> {
     endpoint: 'dynamic_segments',
     action: 'getCount',
     data: formItem,
-    timeout: 30000, // 30 seconds
+    timeout: 20000, // 30 seconds
   })
     .then((response) => {
       const { data } = response;
diff --git a/assets/js/src/segments/dynamic/subscribers_counter.tsx b/assets/js/src/segments/dynamic/subscribers_counter.tsx
index 6e54f19a7b..255d106c51 100644
--- a/assets/js/src/segments/dynamic/subscribers_counter.tsx
+++ b/assets/js/src/segments/dynamic/subscribers_counter.tsx
@@ -62,9 +62,11 @@ const SubscribersCounter: React.FunctionComponent = () => {
 
   if (subscribersCount.errors) {
     return (
-      <span className="mailpoet-form-error-message">
-        {MailPoet.I18n.t('dynamicSegmentSizeCalculatingTimeout')}
-      </span>
+      <div className="mailpoet-form-field">
+        <span className="mailpoet-form-error-message">
+          {MailPoet.I18n.t('dynamicSegmentSizeCalculatingTimeout')}
+        </span>
+      </div>
     );
   }
 
@@ -76,16 +78,20 @@ const SubscribersCounter: React.FunctionComponent = () => {
 
   if (subscribersCount.loading) {
     return (
-      <span className="mailpoet-form-notice-message">
-        {MailPoet.I18n.t('dynamicSegmentSizeIsCalculated')}
-      </span>
+      <div className="mailpoet-form-field">
+        <span className="mailpoet-form-notice-message">
+          {MailPoet.I18n.t('dynamicSegmentSizeIsCalculated')}
+        </span>
+      </div>
     );
   }
 
   return (
-    <span className="mailpoet-form-notice-message">
-      {(MailPoet.I18n.t('dynamicSegmentSize')).replace('%$1d', subscribersCount.count.toLocaleString())}
-    </span>
+    <div className="mailpoet-form-field">
+      <span className="mailpoet-form-notice-message">
+        {(MailPoet.I18n.t('dynamicSegmentSize')).replace('%$1d', subscribersCount.count.toLocaleString())}
+      </span>
+    </div>
   );
 };
 
diff --git a/views/segments.html b/views/segments.html
index e1634e0d79..fc41e21269 100644
--- a/views/segments.html
+++ b/views/segments.html
@@ -204,7 +204,7 @@
     'woocommerce': _x('WooCommerce', 'Dynamic segment creation: User selects this to use any woocommerce filters'),
 
     'dynamicSegmentSizeIsCalculated': __('Calculating segment size…'),
-    'dynamicSegmentSizeCalculatingTimeout': __('Segment size calculation has timed out. You can still save the segment.'),
+    'dynamicSegmentSizeCalculatingTimeout': __("It's taking longer than usual to generate the segment, which may be due to a complex configuration. Try using fewer or simpler conditions."),
     'dynamicSegmentSize': __('This segment has %$1d subscribers.'),
 
     'unknownBadgeName': __('Unknown'),