504 lines
12 KiB
JavaScript
504 lines
12 KiB
JavaScript
|
import { createElement } from '@wordpress/element'
|
||
|
|
import cls from 'classnames'
|
||
|
|
|
||
|
|
import { __ } from 'ct-i18n'
|
||
|
|
import { Select, EntityIdPicker } from 'blocksy-options'
|
||
|
|
import useConditionsData from './useConditionsData'
|
||
|
|
|
||
|
|
import ExpireCondition from './ExpireCondition'
|
||
|
|
import ScheduleDate from './ScheduleDate'
|
||
|
|
|
||
|
|
const SingleCondition = ({ className = '', condition, onRemove, onChange }) => {
|
||
|
|
condition = {
|
||
|
|
...condition,
|
||
|
|
payload: {
|
||
|
|
...condition.payload,
|
||
|
|
},
|
||
|
|
}
|
||
|
|
|
||
|
|
const { allRules, allLanguages } = useConditionsData(condition)
|
||
|
|
|
||
|
|
const ruleDescriptor = allRules.find(({ key }) => key === condition.rule)
|
||
|
|
|
||
|
|
const hasAdditions =
|
||
|
|
condition.rule === 'post_ids' ||
|
||
|
|
condition.rule === 'page_ids' ||
|
||
|
|
condition.rule === 'product_ids' ||
|
||
|
|
condition.rule === 'custom_post_type_ids' ||
|
||
|
|
condition.rule === 'taxonomy_ids' ||
|
||
|
|
condition.rule === 'post_with_taxonomy_ids' ||
|
||
|
|
condition.rule === 'card_product_with_taxonomy_ids' ||
|
||
|
|
condition.rule === 'card_post_with_taxonomy_ids' ||
|
||
|
|
condition.rule === 'product_with_taxonomy_ids' ||
|
||
|
|
condition.rule === 'product_taxonomy_ids' ||
|
||
|
|
condition.rule === 'current_language' ||
|
||
|
|
condition.rule === 'user_post_author_id' ||
|
||
|
|
condition.rule === 'author' ||
|
||
|
|
condition.rule === 'start_end_date' ||
|
||
|
|
condition.rule === 'schedule_date' ||
|
||
|
|
condition.rule === 'request_referer' ||
|
||
|
|
condition.rule === 'request_cookie' ||
|
||
|
|
condition.rule === 'request_url' ||
|
||
|
|
(ruleDescriptor &&
|
||
|
|
ruleDescriptor.sub_ids &&
|
||
|
|
ruleDescriptor.sub_ids.length > 0) ||
|
||
|
|
(ruleDescriptor &&
|
||
|
|
ruleDescriptor.is_custom_rule &&
|
||
|
|
ruleDescriptor.has_text_field) ||
|
||
|
|
(ruleDescriptor &&
|
||
|
|
ruleDescriptor.is_custom_rule &&
|
||
|
|
ruleDescriptor.choices)
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
className={cls('ct-condition-group', className, {
|
||
|
|
'ct-cols-3': hasAdditions,
|
||
|
|
'ct-cols-2': !hasAdditions,
|
||
|
|
})}>
|
||
|
|
<Select
|
||
|
|
key="first"
|
||
|
|
option={{
|
||
|
|
inputClassName: 'ct-condition-type',
|
||
|
|
selectInputStart: () => {
|
||
|
|
if (condition.type === 'include') {
|
||
|
|
return (
|
||
|
|
<span className={`ct-include`}>
|
||
|
|
<svg
|
||
|
|
width="8"
|
||
|
|
height="8"
|
||
|
|
fill="currentColor"
|
||
|
|
viewBox="0 0 20 20">
|
||
|
|
<path d="M20,11h-9v9H9v-9H0V9h9V0h2v9h9V11z" />
|
||
|
|
</svg>
|
||
|
|
</span>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
if (condition.type === 'exclude') {
|
||
|
|
return (
|
||
|
|
<span className={`ct-exclude`}>
|
||
|
|
<svg
|
||
|
|
width="8"
|
||
|
|
height="8"
|
||
|
|
fill="currentColor"
|
||
|
|
viewBox="0 0 20 20">
|
||
|
|
<path d="M20,9v2H0V9H20z" />
|
||
|
|
</svg>
|
||
|
|
</span>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
return null
|
||
|
|
},
|
||
|
|
placeholder: __('Select variation', 'blocksy-companion'),
|
||
|
|
choices: {
|
||
|
|
include: __('Include', 'blocksy-companion'),
|
||
|
|
exclude: __('Exclude', 'blocksy-companion'),
|
||
|
|
},
|
||
|
|
}}
|
||
|
|
value={condition.type}
|
||
|
|
onChange={(type) => {
|
||
|
|
onChange({
|
||
|
|
...condition,
|
||
|
|
type,
|
||
|
|
})
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
|
||
|
|
<Select
|
||
|
|
key="second"
|
||
|
|
option={{
|
||
|
|
appendToBody: true,
|
||
|
|
placeholder: __('Select rule', 'blocksy-companion'),
|
||
|
|
choices: allRules,
|
||
|
|
search: true,
|
||
|
|
}}
|
||
|
|
value={condition.rule}
|
||
|
|
onChange={(rule) => {
|
||
|
|
const ruleDescriptor = allRules.find(
|
||
|
|
({ key }) => key === rule
|
||
|
|
)
|
||
|
|
|
||
|
|
if (
|
||
|
|
ruleDescriptor.sub_ids &&
|
||
|
|
ruleDescriptor.sub_ids.length > 0
|
||
|
|
) {
|
||
|
|
onChange({
|
||
|
|
...condition,
|
||
|
|
rule: ruleDescriptor.sub_ids[0].id,
|
||
|
|
})
|
||
|
|
return
|
||
|
|
}
|
||
|
|
|
||
|
|
onChange({
|
||
|
|
...condition,
|
||
|
|
rule,
|
||
|
|
})
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
|
||
|
|
{(condition.rule === 'post_ids' ||
|
||
|
|
condition.rule === 'custom_post_type_ids' ||
|
||
|
|
condition.rule === 'product_ids' ||
|
||
|
|
condition.rule === 'page_ids') && (
|
||
|
|
<EntityIdPicker
|
||
|
|
option={{
|
||
|
|
placeholder:
|
||
|
|
condition.rule === 'post_ids'
|
||
|
|
? __('Select post', 'blocksy-companion')
|
||
|
|
: condition.rule === 'page_ids'
|
||
|
|
? __('Select page', 'blocksy-companion')
|
||
|
|
: condition.rule === 'product_ids'
|
||
|
|
? __('Select product', 'blocksy-companion')
|
||
|
|
: __(
|
||
|
|
'Custom Post Type ID',
|
||
|
|
'blocksy-companion'
|
||
|
|
),
|
||
|
|
entity: 'posts',
|
||
|
|
post_type: {
|
||
|
|
post_ids: 'post',
|
||
|
|
page_ids: 'page',
|
||
|
|
product_ids: 'product',
|
||
|
|
custom_post_type_ids: 'ct_cpt',
|
||
|
|
}[condition.rule],
|
||
|
|
}}
|
||
|
|
value={(condition.payload || {}).post_id || ''}
|
||
|
|
onChange={(id) => {
|
||
|
|
onChange({
|
||
|
|
...condition,
|
||
|
|
payload: {
|
||
|
|
...condition.payload,
|
||
|
|
post_id: id,
|
||
|
|
},
|
||
|
|
})
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{(condition.rule === 'taxonomy_ids' ||
|
||
|
|
condition.rule === 'post_with_taxonomy_ids' ||
|
||
|
|
condition.rule === 'card_post_with_taxonomy_ids') && (
|
||
|
|
<EntityIdPicker
|
||
|
|
option={{
|
||
|
|
placeholder: __('Select taxonomy', 'blocksy-companion'),
|
||
|
|
entity: 'taxonomies',
|
||
|
|
}}
|
||
|
|
value={(condition.payload || {}).taxonomy_id || ''}
|
||
|
|
onChange={(id) => {
|
||
|
|
onChange({
|
||
|
|
...condition,
|
||
|
|
payload: {
|
||
|
|
...condition.payload,
|
||
|
|
taxonomy_id: id,
|
||
|
|
},
|
||
|
|
})
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{(condition.rule === 'product_with_taxonomy_ids' ||
|
||
|
|
condition.rule === 'product_taxonomy_ids' ||
|
||
|
|
condition.rule === 'card_product_with_taxonomy_ids') && (
|
||
|
|
<EntityIdPicker
|
||
|
|
option={{
|
||
|
|
placeholder: __('Select taxonomy', 'blocksy-companion'),
|
||
|
|
entity: 'taxonomies',
|
||
|
|
post_type: 'product',
|
||
|
|
}}
|
||
|
|
value={(condition.payload || {}).taxonomy_id || ''}
|
||
|
|
onChange={(id) => {
|
||
|
|
onChange({
|
||
|
|
...condition,
|
||
|
|
payload: {
|
||
|
|
...condition.payload,
|
||
|
|
taxonomy_id: id,
|
||
|
|
},
|
||
|
|
})
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{condition.rule === 'current_language' && (
|
||
|
|
<Select
|
||
|
|
option={{
|
||
|
|
appendToBody: true,
|
||
|
|
defaultToFirstItem: false,
|
||
|
|
placeholder: __('Select language', 'blocksy-companion'),
|
||
|
|
choices: allLanguages.map((language) => ({
|
||
|
|
key: language.id,
|
||
|
|
value: language.name,
|
||
|
|
})),
|
||
|
|
search: true,
|
||
|
|
}}
|
||
|
|
value={(condition.payload || {}).language || ''}
|
||
|
|
onChange={(language) => {
|
||
|
|
onChange({
|
||
|
|
...condition,
|
||
|
|
payload: {
|
||
|
|
...condition.payload,
|
||
|
|
language,
|
||
|
|
},
|
||
|
|
})
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{condition.rule === 'user_post_author_id' && (
|
||
|
|
<EntityIdPicker
|
||
|
|
option={{
|
||
|
|
placeholder: __('Select user', 'blocksy-companion'),
|
||
|
|
entity: 'users',
|
||
|
|
additionOptions: [
|
||
|
|
{
|
||
|
|
key: 'current_user',
|
||
|
|
value: __('Current user', 'blocksy-companion'),
|
||
|
|
},
|
||
|
|
],
|
||
|
|
}}
|
||
|
|
value={(condition.payload || {}).user_id || ''}
|
||
|
|
onChange={(id) => {
|
||
|
|
onChange({
|
||
|
|
...condition,
|
||
|
|
payload: {
|
||
|
|
...condition.payload,
|
||
|
|
user_id: id,
|
||
|
|
},
|
||
|
|
})
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{condition.rule === 'author' && (
|
||
|
|
<EntityIdPicker
|
||
|
|
option={{
|
||
|
|
placeholder: __('Select user', 'blocksy-companion'),
|
||
|
|
entity: 'users',
|
||
|
|
additionOptions: [
|
||
|
|
{
|
||
|
|
key: 'all_users',
|
||
|
|
value: __('All authors', 'blocksy-companion'),
|
||
|
|
},
|
||
|
|
],
|
||
|
|
}}
|
||
|
|
value={(condition.payload || {}).user_id || 'all_users'}
|
||
|
|
onChange={(id) => {
|
||
|
|
onChange({
|
||
|
|
...condition,
|
||
|
|
payload: {
|
||
|
|
...condition.payload,
|
||
|
|
user_id: id,
|
||
|
|
},
|
||
|
|
})
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{ruleDescriptor &&
|
||
|
|
ruleDescriptor.sub_ids &&
|
||
|
|
ruleDescriptor.sub_ids.length > 0 && (
|
||
|
|
<Select
|
||
|
|
option={{
|
||
|
|
appendToBody: true,
|
||
|
|
placeholder: __(
|
||
|
|
'Select sub field',
|
||
|
|
'blocksy-companion'
|
||
|
|
),
|
||
|
|
choices: ruleDescriptor.sub_ids.map((subId) => ({
|
||
|
|
key: subId.id,
|
||
|
|
value: subId.title,
|
||
|
|
})),
|
||
|
|
search: true,
|
||
|
|
inputClassName: 'ct-dropdown-normal-width',
|
||
|
|
}}
|
||
|
|
value={condition.rule}
|
||
|
|
onChange={(sub_id) => {
|
||
|
|
onChange({
|
||
|
|
...condition,
|
||
|
|
rule: sub_id,
|
||
|
|
})
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{condition.rule === 'start_end_date' && (
|
||
|
|
<ExpireCondition condition={condition} onChange={onChange} />
|
||
|
|
)}
|
||
|
|
{condition.rule === 'schedule_date' && (
|
||
|
|
<ScheduleDate condition={condition} onChange={onChange} />
|
||
|
|
)}
|
||
|
|
|
||
|
|
{condition.rule === 'request_referer' && (
|
||
|
|
<div className="ct-option-input">
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
placeholder="website.com"
|
||
|
|
value={condition.payload.referer}
|
||
|
|
onChange={(e) => {
|
||
|
|
onChange({
|
||
|
|
...condition,
|
||
|
|
payload: {
|
||
|
|
...condition.payload,
|
||
|
|
referer: e.target.value,
|
||
|
|
},
|
||
|
|
})
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
|
||
|
|
<span
|
||
|
|
className="ct-condition-info"
|
||
|
|
data-tooltip-reveal="top">
|
||
|
|
<svg width="16" height="16" viewBox="0 0 24 24">
|
||
|
|
<path d="M12,2C6.477,2,2,6.477,2,12s4.477,10,10,10s10-4.477,10-10S17.523,2,12,2z M12,17L12,17c-0.552,0-1-0.448-1-1v-4 c0-0.552,0.448-1,1-1h0c0.552,0,1,0.448,1,1v4C13,16.552,12.552,17,12,17z M12.5,9h-1C11.224,9,11,8.776,11,8.5v-1 C11,7.224,11.224,7,11.5,7h1C12.776,7,13,7.224,13,7.5v1C13,8.776,12.776,9,12.5,9z"></path>
|
||
|
|
</svg>
|
||
|
|
|
||
|
|
<i className="ct-tooltip">
|
||
|
|
{__(
|
||
|
|
'Display based on referer domain',
|
||
|
|
'blocksy-companion'
|
||
|
|
)}
|
||
|
|
</i>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{condition.rule === 'request_cookie' && (
|
||
|
|
<div className="ct-option-input">
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
placeholder="cookie_name"
|
||
|
|
value={(condition.payload || {}).cookie || ''}
|
||
|
|
onChange={(e) => {
|
||
|
|
onChange({
|
||
|
|
...condition,
|
||
|
|
payload: {
|
||
|
|
...condition.payload,
|
||
|
|
cookie: e.target.value,
|
||
|
|
},
|
||
|
|
})
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
|
||
|
|
<span
|
||
|
|
className="ct-condition-info"
|
||
|
|
data-tooltip-reveal="top">
|
||
|
|
<svg width="16" height="16" viewBox="0 0 24 24">
|
||
|
|
<path d="M12,2C6.477,2,2,6.477,2,12s4.477,10,10,10s10-4.477,10-10S17.523,2,12,2z M12,17L12,17c-0.552,0-1-0.448-1-1v-4 c0-0.552,0.448-1,1-1h0c0.552,0,1,0.448,1,1v4C13,16.552,12.552,17,12,17z M12.5,9h-1C11.224,9,11,8.776,11,8.5v-1 C11,7.224,11.224,7,11.5,7h1C12.776,7,13,7.224,13,7.5v1C13,8.776,12.776,9,12.5,9z"></path>
|
||
|
|
</svg>
|
||
|
|
|
||
|
|
<i className="ct-tooltip">
|
||
|
|
{__(
|
||
|
|
'Display if cookie is present',
|
||
|
|
'blocksy-companion'
|
||
|
|
)}
|
||
|
|
</i>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{condition.rule === 'request_url' && (
|
||
|
|
<div className="ct-option-input">
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
placeholder="example=campaignID"
|
||
|
|
value={condition.payload.url || ''}
|
||
|
|
onChange={(e) => {
|
||
|
|
onChange({
|
||
|
|
...condition,
|
||
|
|
payload: {
|
||
|
|
...condition.payload,
|
||
|
|
url: e.target.value,
|
||
|
|
},
|
||
|
|
})
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
|
||
|
|
<span
|
||
|
|
className="ct-condition-info"
|
||
|
|
data-tooltip-reveal="top">
|
||
|
|
<svg width="16" height="16" viewBox="0 0 24 24">
|
||
|
|
<path d="M12,2C6.477,2,2,6.477,2,12s4.477,10,10,10s10-4.477,10-10S17.523,2,12,2z M12,17L12,17c-0.552,0-1-0.448-1-1v-4 c0-0.552,0.448-1,1-1h0c0.552,0,1,0.448,1,1v4C13,16.552,12.552,17,12,17z M12.5,9h-1C11.224,9,11,8.776,11,8.5v-1 C11,7.224,11.224,7,11.5,7h1C12.776,7,13,7.224,13,7.5v1C13,8.776,12.776,9,12.5,9z"></path>
|
||
|
|
</svg>
|
||
|
|
|
||
|
|
<i className="ct-tooltip">
|
||
|
|
{__(
|
||
|
|
'Display if query string is present in URL',
|
||
|
|
'blocksy-companion'
|
||
|
|
)}
|
||
|
|
</i>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{ruleDescriptor &&
|
||
|
|
ruleDescriptor.is_custom_rule &&
|
||
|
|
ruleDescriptor.has_text_field && (
|
||
|
|
<div className="ct-option-input">
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
placeholder=""
|
||
|
|
value={condition.payload.value || ''}
|
||
|
|
onChange={(e) => {
|
||
|
|
onChange({
|
||
|
|
...condition,
|
||
|
|
payload: {
|
||
|
|
...condition.payload,
|
||
|
|
value: e.target.value,
|
||
|
|
},
|
||
|
|
})
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{ruleDescriptor &&
|
||
|
|
ruleDescriptor.is_custom_rule &&
|
||
|
|
ruleDescriptor.choices && (
|
||
|
|
<Select
|
||
|
|
option={{
|
||
|
|
appendToBody: true,
|
||
|
|
placeholder: __(
|
||
|
|
'Select value',
|
||
|
|
'blocksy-companion'
|
||
|
|
),
|
||
|
|
choices: ruleDescriptor.choices,
|
||
|
|
|
||
|
|
search: true,
|
||
|
|
inputClassName: 'ct-dropdown-normal-width',
|
||
|
|
}}
|
||
|
|
value={
|
||
|
|
condition.payload.value ||
|
||
|
|
ruleDescriptor.choices[0].key
|
||
|
|
}
|
||
|
|
onChange={(value) => {
|
||
|
|
onChange({
|
||
|
|
...condition,
|
||
|
|
payload: {
|
||
|
|
...condition.payload,
|
||
|
|
value,
|
||
|
|
},
|
||
|
|
})
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
)}
|
||
|
|
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
className="ct-remove-condition-group"
|
||
|
|
onClick={(e) => {
|
||
|
|
e.preventDefault()
|
||
|
|
onRemove()
|
||
|
|
}}>
|
||
|
|
<svg
|
||
|
|
width="7px"
|
||
|
|
height="7px"
|
||
|
|
fill="currentColor"
|
||
|
|
viewBox="0 0 24 24">
|
||
|
|
<path d="m12 14.7 9.3 9.3 2.7-2.7-9.3-9.3L24 2.7 21.3 0 12 9.3 2.7 0 0 2.7 9.3 12 0 21.3 2.7 24l9.3-9.3z"></path>
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default SingleCondition
|