52 lines
1.6 KiB
TypeScript
52 lines
1.6 KiB
TypeScript
import React from 'react';
|
|
import { t, onChange, onToggle } from 'common/functions';
|
|
import { useSetting } from 'settings/store/hooks';
|
|
import { Label, Inputs, SegmentsSelect } from 'settings/components';
|
|
|
|
type Props = {
|
|
title: string
|
|
description: string
|
|
event: 'on_comment' | 'on_register'
|
|
}
|
|
|
|
export default function SubscribeOn({ title, description, event }: Props) {
|
|
const [enabled, setEnabled] = useSetting('subscribe', event, 'enabled');
|
|
const [label, setLabel] = useSetting('subscribe', event, 'label');
|
|
const [segments, setSegments] = useSetting('subscribe', event, 'segments');
|
|
return (
|
|
<>
|
|
<Label
|
|
title={title}
|
|
description={description}
|
|
htmlFor={`subscribe-${event}-enabled`}
|
|
/>
|
|
<Inputs>
|
|
<input
|
|
type="checkbox"
|
|
id={`subscribe-${event}-enabled`}
|
|
data-automation-id={`subscribe-${event}-checkbox`}
|
|
checked={enabled === '1'}
|
|
onChange={onToggle(setEnabled)}
|
|
/>
|
|
{enabled === '1' && (
|
|
<>
|
|
<br />
|
|
<input
|
|
type="text"
|
|
className="regular-text"
|
|
value={label || t('yesAddMe')}
|
|
onChange={onChange(setLabel)}
|
|
/>
|
|
<br />
|
|
<label htmlFor={`subscribe-${event}-segments`}>{t('usersWillBeSubscribedTo')}</label>
|
|
<br />
|
|
<div data-automation-id={`subscribe-${event}-segments-selection`}>
|
|
<SegmentsSelect id={`subscribe-${event}-segments`} placeholder={t('chooseList')} value={segments} setValue={setSegments} />
|
|
</div>
|
|
</>
|
|
)}
|
|
</Inputs>
|
|
</>
|
|
);
|
|
}
|