jrangel/lcp-paywall
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added overrideMeter toggle and changes to post date

Browse Source
This commit is contained in:
Jeremy Rangel
2025-02-06 13:01:40 -08:00
parent fe8d0ebd50
commit 94a829fd2a
3 changed files with 106 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

124
src/components/DraggableItem.js
View File

@ -1,5 +1,5 @@
import { useDrag, useDrop } from 'react-dnd';
import { DateTimePicker,SelectControl, TextControl, __experimentalNumberControl as NumberControl } from '@wordpress/components';
import { ToggleControl,Popover,DateTimePicker,SelectControl, TextControl, __experimentalNumberControl as NumberControl } from '@wordpress/components';
import { useState, useEffect, useCallback } from '@wordpress/element';
const DraggableItem = ({ id, index, moveItem, postType, children }) => {
@ -26,9 +26,11 @@ const DraggableItem = ({ id, index, moveItem, postType, children }) => {
}), [index, moveItem])
);
// State management
const [ruleType, setRuleType] = useState('post');
const [lockType, setLockType] = useState('has_subscription');
const [lockType, setLockType] = useState('');
const [operator, setOperator] = useState('');
const [metaKey, setMetaKey] = useState('');
const [roles, setRoles] = useState([]); // State to store user roles
@ -43,7 +45,17 @@ const DraggableItem = ({ id, index, moveItem, postType, children }) => {
const [metaValue, setMetaValue] = useState('');
const [userRegistered, setUserRegistered] = useState('');
const [userRegisteredOperator, setUserRegisteredOperator] = useState('=');
const [postDateStart, setPostDateStart] = useState('');
const [postDateEnd, setPostDateEnd] = useState('');
const [isPostDatePopoverVisible, setIsPostDatePopoverVisible] = useState(false);
const [selectedDateType, setSelectedDateType] = useState(null);
const [overideMeter, setOverideMeter] = useState(false);
const togglePostDatePopover = () => {
setIsPostDatePopoverVisible((state) => !state);
};
// Fetch user roles from the WordPress REST API
useEffect(() => {
if (lockType === 'role') {
@ -72,6 +84,39 @@ const DraggableItem = ({ id, index, moveItem, postType, children }) => {
}
}, [lockType, postType]); // Fetch taxonomies when lockType is 'in_term' and postType changes
// Log the updated data
useEffect(() => {
const data = {
ruleType,
lockType,
operator,
metaKey,
roles,
taxonomies,
terms,
postContentLengthAmount,
postContentLengthUnit,
postContentLengthOperator,
postDate,
postDateOperator,
postDateStart,
postDateEnd,
metaKeyOperator,
metaValue,
userRegistered,
userRegisteredOperator,
};
console.log('Updated Data:', JSON.stringify(data, null, 2));
}, [
ruleType, lockType, operator, metaKey, roles, taxonomies, terms,
postContentLengthAmount, postContentLengthUnit, postContentLengthOperator,
postDate, postDateOperator, postDateStart, postDateEnd,
metaKeyOperator, metaValue, userRegistered, userRegisteredOperator
]);
// Fetch terms when lockType is in_term or not_in_term and a taxonomy is selected
useEffect(() => {
if (lockType === 'post_term' && metaKey) {
@ -100,7 +145,7 @@ const DraggableItem = ({ id, index, moveItem, postType, children }) => {
const userLockTypeOptions = [
{ label: 'Has Subscription', value: 'has_subscription' },
{ label: 'Is Logged In', value: 'is_logged_in' },
{ label: 'Role In', value: 'role' },
{ label: 'Role', value: 'role' },
{ label: 'Meta Value', value: 'meta_value' },
{ label: 'Registration Date', value: 'registration_date' },
];
@ -166,14 +211,12 @@ const DraggableItem = ({ id, index, moveItem, postType, children }) => {
options={comparisonOperators}
onChange={setMetaKeyOperator}
/>
<TextControl
value={metaValue}
onChange={setMetaValue}
placeholder="Meta Value"
/>
</>
</>
)}
{lockType === 'role' && (
@ -191,7 +234,7 @@ const DraggableItem = ({ id, index, moveItem, postType, children }) => {
</>
)}
{lockType === 'term' && (
{lockType === 'post_term' && (
<>
<SelectControl
value={operator}
@ -230,19 +273,55 @@ const DraggableItem = ({ id, index, moveItem, postType, children }) => {
/>
</>
)}
{lockType === 'post_date' && (
<>
<SelectControl
value={postDateOperator}
options={dateTimeComparisonOperators}
onChange={setPostDateOperator}
/>
<DateTimePicker
value={postDate}
onChange={setPostDate}
/>
</>
{lockType === 'post_date' && (
<>
<SelectControl
value={postDateOperator}
options={dateTimeComparisonOperators}
onChange={setPostDateOperator}
/>
{postDateOperator !== 'between' && (
<>
<Button onClick={() => togglePostDatePopover('single')}>
Select Date
</Button>
{isPostDatePopoverVisible && selectedDateType === 'single' && (
<DateTimePicker
value={postDate}
onChange={setPostDate}
/>
)}
</>
)}
{postDateOperator === 'between' && (
<>
<Button onClick={() => togglePostDatePopover('start')}>
Select Start Date
</Button>
<span>{postDateStart || 'Not Set'}</span>
<Button onClick={() => togglePostDatePopover('end')}>
Select End Date
</Button>
<span>{postDateEnd || 'Not Set'}</span>
{isPostDatePopoverVisible && (
<DateTimePicker
value={selectedDateType === 'start' ? postDateStart : postDateEnd}
onChange={(newDate) =>
selectedDateType === 'start'
? setPostDateStart(newDate)
: setPostDateEnd(newDate)
}
/>
)}
</>
)}
</>
)}
{lockType === 'registration_date' && (
<>
<SelectControl
@ -265,6 +344,11 @@ const DraggableItem = ({ id, index, moveItem, postType, children }) => {
/>
</>
)}
<ToggleControl
label="Override Meter"
checked={overideMeter}
onChange={setOverideMeter}
/>
</div>
{children}
</div>