import {
useState,
useRef,
} from "@wordpress/element";
import Popover from '@mui/material/Popover';
// date range picker and date fns
import { DateRangePicker } from 'react-date-range';
import {format, parseISO, startOfYear, endOfYear, addYears, addDays, addMonths, isSameDay, startOfDay, endOfDay, startOfMonth, endOfMonth} from 'date-fns'
import Icon from '../utils/Icon';
import {__} from '@wordpress/i18n';
import useDate from './useDateStore';
const DateRange = () => {
const [anchorEl, setAnchorEl] = useState(null);
const open = Boolean(anchorEl);
const startDate = useDate((state) => state.startDate);
const endDate = useDate((state) => state.endDate);
const setStartDate = useDate((state) => state.setStartDate);
const setEndDate = useDate((state) => state.setEndDate);
const range = useDate((state) => state.range);
const setRange = useDate((state) => state.setRange);
const selectionRange = {
startDate: parseISO(startDate),
endDate: parseISO(endDate),
key: 'selection',
};
const countClicks = useRef(0);
// select date ranges from settings
const selectedRanges = [
'today',
'yesterday',
'last-7-days',
'last-30-days',
'last-90-days',
'last-month',
'last-year',
'year-to-date',
];
const availableRanges = {
'today': {
label: __('Today', 'complianz-gdpr' ),
range: () => ({
startDate: startOfDay(new Date()),
endDate: endOfDay(new Date())
})
},
'yesterday': {
label: __('Yesterday', 'complianz-gdpr'),
range: () => ({
startDate: startOfDay(addDays(new Date(), -1)),
endDate: endOfDay(addDays(new Date(), -1))
})
},
'last-7-days': {
label: __('Last 7 days', 'complianz-gdpr'),
range: () => ({
startDate: startOfDay(addDays(new Date(), -7)),
endDate: endOfDay(addDays(new Date(), -1))
})
},
'last-30-days': {
label: __('Last 30 days', 'complianz-gdpr' ),
range: () => ({
startDate: startOfDay(addDays(new Date(), -30)),
endDate: endOfDay(addDays(new Date(), -1))
})
},
'last-90-days': {
label: __('Last 90 days', 'complianz-gdpr'),
range: () => ({
startDate: startOfDay(addDays(new Date(), -90)),
endDate: endOfDay(addDays(new Date(), -1))
})
},
'last-month': {
label: __('Last month', 'complianz-gdpr' ),
range: () => ({
startDate: startOfMonth(addMonths(new Date(), -1)),
endDate: endOfMonth(addMonths(new Date(), -1))
})
},
'year-to-date': {
label: __('Year to date', 'complianz-gdpr' ),
range: () => ({
startDate: startOfYear(new Date()),
endDate: endOfDay(new Date())
})
},
'last-year': {
label: __('Last year', 'complianz-gdpr' ),
range: () => ({
startDate: startOfYear(addYears(new Date(), -1)),
endDate: endOfYear(addYears(new Date(), -1))
})
},
}
function isSelected(range) {
const definedRange = this.range();
return (
isSameDay(range.startDate, definedRange.startDate) &&
isSameDay(range.endDate, definedRange.endDate)
);
}
// for all selected ranges add daterange and isSelected function
const dateRanges = [];
for (const [key, value] of Object.entries(selectedRanges)) {
if (value) {
dateRanges.push(availableRanges[value]);
dateRanges[dateRanges.length - 1].isSelected = isSelected;
}
}
const handleClick = (e) => {
setAnchorEl(e.currentTarget);
};
const handleClose = (e) => {
setAnchorEl(null);
};
const updateDateRange = (ranges) => {
countClicks.current++
// setSelectionRange(ranges.selection);
let startStr = format(ranges.selection.startDate, 'yyyy-MM-dd');
let endStr = format(ranges.selection.endDate, 'yyyy-MM-dd');
let range = 'custom';
// loop through availableRanges and check if the selected range is one of them
for (const [key, value] of Object.entries(availableRanges)) {
if (value.isSelected(ranges.selection)) {
range = key;
}
}
let dateRange = {
startDate: ranges.selection.startDate,
endDate: ranges.selection.endDate,
range: range
}
if ( countClicks.current === 2 || startStr !== endStr || range !== 'custom' ) {
countClicks.current = 0;
setStartDate(startStr);
setEndDate(endStr);
setRange(range);
handleClose();
}
}
const formatString = 'MMMM d, yyyy';
const display = {
startDate: startDate ? format(new Date(startDate), formatString) : format(defaultStart, formatString),
endDate: endDate ? format(new Date(endDate), formatString) : format(defaultEnd, formatString),
}
return (
<div className="cmplz-date-range-container">
<button onClick={handleClick} id="cmplz-date-range-picker-open-button">
<Icon name='calendar' size={'18'}/>
{range === 'custom' && display.startDate + ' - ' + display.endDate}
{range !== 'custom' && availableRanges[range].label}
<Icon name='chevron-down' />
</button>
<Popover
anchorEl={anchorEl}
anchorOrigin={{vertical: 'bottom', horizontal: 'right'}}
transformOrigin={{vertical: 'top', horizontal: 'right'}}
open={open}
onClose={handleClose}
className="burst"
>
<div id="cmplz-date-range-picker-container">
<DateRangePicker
ranges={[selectionRange]}
rangeColors={['var(--rsp-brand-primary)']}
dateDisplayFormat={formatString}
monthDisplayFormat="MMMM"
// color="var(--rsp-text-color)"
onChange={(ranges) => {updateDateRange(ranges)}}
inputRanges={[]}
showSelectionPreview={true}
// moveRangeOnFirstSelection={false}
months={2}
direction="horizontal"
minDate={new Date(2022, 0, 1)}
maxDate={ new Date() }
staticRanges={dateRanges}
/>
</div>
</Popover>
</div>
);
}
export default DateRange;
في ظل التحول الرقمي المتسارع، أصبح التسويق الإلكتروني أحد أهم الأدوات التي تعتمد عليها المؤسسات والشركات لتحقيق الانتشار والوصول إلى جمهور أوسع.
في هذا الحوار التسجيلي، نسلّط الضوء على مفهوم التسويق الإلكتروني، أهميته في العصر الحديث، وكيف غيّر قواعد اللعبة في عالم المال والأعمال.
ال