Cavemanon/piratepoet
7
Fork 0
Code Pull Requests Actions Releases 16 Activity

Disable save button when count is unknown

Browse Source 
[MAILPOET-3469]
This commit is contained in:
Jan Lysý
2021-06-09 15:46:16 +02:00
committed by Veljko V
parent 81d94f5512
commit 4463f32e8b
5 changed files with 29 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
assets/css/src/components-plugin/_segments.scss
View File

@ -1,6 +1,7 @@
.mailpoet-segments-name-section, .mailpoet-segments-name-section,
.mailpoet-segments-description-section, .mailpoet-segments-description-section,
.mailpoet-segments-segments-section { .mailpoet-segments-segments-section,
.mailpoet-segments-counter-section {
grid-column: span 2; grid-column: span 2;
} }

12
assets/js/src/segments/dynamic/form.tsx
View File

@ -23,6 +23,7 @@ import {
Segment, Segment,
SegmentTypes, SegmentTypes,
SubscriberActionTypes, SubscriberActionTypes,
SubscriberCount,
} from './types'; } from './types';
interface Props { interface Props {
@ -47,6 +48,11 @@ export const Form: React.FunctionComponent<Props> = ({
[segment] [segment]
); );
const subscriberCount: SubscriberCount = useSelect(
(select) => select('mailpoet-dynamic-segments-form').getSubscriberCount(),
[]
);
const { updateSegment, updateSegmentFilter, handleSave } = useDispatch('mailpoet-dynamic-segments-form'); const { updateSegment, updateSegmentFilter, handleSave } = useDispatch('mailpoet-dynamic-segments-form');
return ( return (
@ -158,7 +164,9 @@ export const Form: React.FunctionComponent<Props> = ({
{MailPoet.I18n.t('addCondition')} {MailPoet.I18n.t('addCondition')}
</Button> </Button>
</div> </div>
<SubscribersCounter /> <div className="mailpoet-segments-counter-section">
<SubscribersCounter />
</div>
<div className="mailpoet-form-actions"> <div className="mailpoet-form-actions">
<Button <Button
type="submit" type="submit"
@ -166,7 +174,7 @@ export const Form: React.FunctionComponent<Props> = ({
e.preventDefault(); e.preventDefault();
handleSave(segmentId); handleSave(segmentId);
}} }}
isDisabled={!isFormValid(segment.filters)} isDisabled={!isFormValid(segment.filters) || subscriberCount.count === undefined}
> >
{MailPoet.I18n.t('save')} {MailPoet.I18n.t('save')}
</Button> </Button>

2
assets/js/src/segments/dynamic/subscribers_calculator.ts
View File

@ -41,7 +41,7 @@ function loadCount(formItem: Segment): Promise<Result | void> {
endpoint: 'dynamic_segments', endpoint: 'dynamic_segments',
action: 'getCount', action: 'getCount',
data: formItem, data: formItem,
timeout: 30000, // 30 seconds timeout: 20000, // 30 seconds
}) })
.then((response) => { .then((response) => {
const { data } = response; const { data } = response;

24
assets/js/src/segments/dynamic/subscribers_counter.tsx
View File

@ -62,9 +62,11 @@ const SubscribersCounter: React.FunctionComponent = () => {
if (subscribersCount.errors) { if (subscribersCount.errors) {
return ( return (
<span className="mailpoet-form-error-message"> <div className="mailpoet-form-field">
{MailPoet.I18n.t('dynamicSegmentSizeCalculatingTimeout')} <span className="mailpoet-form-error-message">
</span> {MailPoet.I18n.t('dynamicSegmentSizeCalculatingTimeout')}
</span>
</div>
); );
} }
@ -76,16 +78,20 @@ const SubscribersCounter: React.FunctionComponent = () => {
if (subscribersCount.loading) { if (subscribersCount.loading) {
return ( return (
<span className="mailpoet-form-notice-message"> <div className="mailpoet-form-field">
{MailPoet.I18n.t('dynamicSegmentSizeIsCalculated')} <span className="mailpoet-form-notice-message">
</span> {MailPoet.I18n.t('dynamicSegmentSizeIsCalculated')}
</span>
</div>
); );
} }
return ( return (
<span className="mailpoet-form-notice-message"> <div className="mailpoet-form-field">
{(MailPoet.I18n.t('dynamicSegmentSize')).replace('%$1d', subscribersCount.count.toLocaleString())} <span className="mailpoet-form-notice-message">
</span> {(MailPoet.I18n.t('dynamicSegmentSize')).replace('%$1d', subscribersCount.count.toLocaleString())}
</span>
</div>
); );
}; };

2
views/segments.html
View File

@ -204,7 +204,7 @@
'woocommerce': _x('WooCommerce', 'Dynamic segment creation: User selects this to use any woocommerce filters'), 'woocommerce': _x('WooCommerce', 'Dynamic segment creation: User selects this to use any woocommerce filters'),
'dynamicSegmentSizeIsCalculated': __('Calculating segment size…'), '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.'), 'dynamicSegmentSize': __('This segment has %$1d subscribers.'),
'unknownBadgeName': __('Unknown'), 'unknownBadgeName': __('Unknown'),