Disable save button when count is unknown

[MAILPOET-3469]

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;
 }
 

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>

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;

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>
   );
 };
 

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'),