Added overrideMeter toggle and changes to post date

build/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'wp-components', 'wp-element'), 'version' => '52797c520f45e7063c70');
+<?php return array('dependencies' => array('react', 'wp-components', 'wp-element'), 'version' => '0c78dce8f5d5ae6cd66c');

src/components/DraggableItem.js

@@ -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,6 +45,16 @@ 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(() => {
@@ -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' && (
+   {lockType === 'post_date' && (
-                    <>
+    <>
-                        <SelectControl
+        <SelectControl
-                            value={postDateOperator}
+            value={postDateOperator}
-                            options={dateTimeComparisonOperators}
+            options={dateTimeComparisonOperators}
-                            onChange={setPostDateOperator}
+            onChange={setPostDateOperator}
-                        />
+        />
-                        <DateTimePicker
+
-                            value={postDate}
+        {postDateOperator !== 'between' && (
-                            onChange={setPostDate}
+            <>
-                        />
+                <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>