Fix layout of the average order value segment in the segment edit page

See https://github.com/mailpoet/mailpoet/pull/5174#issuecomment-1746542729

[MAILPOET-5398]
This commit is contained in:
Rodrigo Primo
2023-10-04 10:05:01 -03:00
committed by Aschepikov
parent 48dc2d7507
commit 1b6aed906a

View File

@@ -35,43 +35,43 @@ export function AverageSpentFields({ filterIndex }: FilterProps): JSX.Element {
}, [updateSegmentFilter, segment, filterIndex]); }, [updateSegmentFilter, segment, filterIndex]);
return ( return (
<> <>
<Grid.CenteredRow> <Select
<Select key="select"
key="select" value={segment.average_spent_type}
value={segment.average_spent_type} isMinWidth
onChange={(e): void => { onChange={(e): void => {
void updateSegmentFilterFromEvent( void updateSegmentFilterFromEvent(
'average_spent_type', 'average_spent_type',
filterIndex, filterIndex,
e, e,
); );
}} }}
automationId="select-average-spent-type" automationId="select-average-spent-type"
> >
<option value=">">{MailPoet.I18n.t('moreThan')}</option> <option value=">">{MailPoet.I18n.t('moreThan')}</option>
<option value=">=">{MailPoet.I18n.t('moreThanOrEqual')}</option> <option value=">=">{MailPoet.I18n.t('moreThanOrEqual')}</option>
<option value="=">{MailPoet.I18n.t('equals')}</option> <option value="=">{MailPoet.I18n.t('equals')}</option>
<option value="!=">{MailPoet.I18n.t('notEquals')}</option> <option value="!=">{MailPoet.I18n.t('notEquals')}</option>
<option value="<=">{MailPoet.I18n.t('lessThanOrEqual')}</option> <option value="<=">{MailPoet.I18n.t('lessThanOrEqual')}</option>
<option value="<">{MailPoet.I18n.t('lessThan')}</option> <option value="<">{MailPoet.I18n.t('lessThan')}</option>
</Select> </Select>
<Input <Input
data-automation-id="input-average-spent-amount" className="mailpoet-segments-input-small"
type="number" data-automation-id="input-average-spent-amount"
min={0} type="number"
step={0.01} min={0}
value={segment.average_spent_amount || ''} step={0.01}
placeholder={MailPoet.I18n.t('wooSpentAmount')} value={segment.average_spent_amount || ''}
onChange={(e): void => { placeholder={MailPoet.I18n.t('wooSpentAmount')}
void updateSegmentFilterFromEvent( onChange={(e): void => {
'average_spent_amount', void updateSegmentFilterFromEvent(
filterIndex, 'average_spent_amount',
e, filterIndex,
); e,
}} );
/> }}
<div>{wooCurrencySymbol}</div> />
</Grid.CenteredRow> <div>{wooCurrencySymbol}</div>
<Grid.CenteredRow> <Grid.CenteredRow>
<DaysPeriodField filterIndex={filterIndex} /> <DaysPeriodField filterIndex={filterIndex} />
</Grid.CenteredRow> </Grid.CenteredRow>