disco / backend / views / components / Main / pages / Rules / Tabs / DesignBlock / CountDownTime / CountdownTimeEdit.jsx

CountdownTimeEdit.jsx in Discount Rules for WooCommerce – Disco | Dynamic Pricing, Conditions, Bulk, Bundle, BOGO 1.3.54, at backend/views/components/Main/pages/Rules/Tabs/DesignBlock/CountDownTime/CountdownTimeEdit.jsx

157 lines 4.4 KB

Raw Download Zip

1	import { useEffect, useRef, useState } from 'react';
2	import { useDispatch, useSelector } from 'react-redux';
3	import SingleSelect from '../../../../../components/SingleSelect';
4	import { updateCountdown } from '../../../../../features/discount/discountSlice';
5	import BadgeHeader from '../components/BadgeHeader';
6	import TabComponent from '../components/TabComponent';
7	import AreaEdit from './components/AreaEdit';
8	import CountdownDisplay from './components/CountdownDisplay';
9	import CountdownEdit from './components/CountdownEdit';
10	import CountdownFontProperties from './components/CountdownFontProperties';
11	import CountdownTextInput from './components/CountdownTextInput';
12	import CountdownTimeItems from './components/CountdownTimeItems';
13	import CountdownTimeView from './components/CountdownTimeView';
14	import { __ } from '@wordpress/i18n';
15
16	const CountdownTimeEdit = () => {
17	const dispatch = useDispatch();
18	const design_blocks = useSelector((state) => state.discount?.design_blocks);
19	const countdown = design_blocks?.countdown;
20	const { discount_valid_to } = useSelector((state) => state.discount);
21	const [activeTab, setActiveTab] = useState('area');
22	const titleTextareaRef = useRef(null);
23	const subtitleTextareaRef = useRef(null);
24
25	const title = countdown?.title \|\| {};
26	const subtitle = countdown?.subtitle \|\| {};
27
28	const handleTitleTextChange = (e) => {
29	dispatch(
30	updateCountdown({
31	name: 'title',
32	value: { ...title, text: e.target.value },
33	})
34	);
35	};
36
37	const handleSubtitleTextChange = (e) => {
38	dispatch(
39	updateCountdown({
40	name: 'subtitle',
41	value: { ...subtitle, text: e.target.value },
42	})
43	);
44	};
45
46	const handlePositionChange = (value) => {
47	dispatch(updateCountdown({ name: 'position', value }));
48	};
49
50	const tabData = [
51	{
52	id: 'area',
53	label: 'Area',
54	content: <AreaEdit />,
55	},
56	{
57	id: 'countdown',
58	label: 'Countdown',
59	content: <CountdownEdit />,
60	},
61	];
62
63	useEffect(() => {
64	window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
65	}, []);
66
67	// Ensure design_blocks and countdown are loaded
68	if (!design_blocks \|\| !countdown) {
69	return null;
70	}
71
72	return (
73	<div className="disco-bg-gray-50 disco-mr-4 disco-rounded-lg disco-pb-4">
74	<div className="disco-px-5 disco-py-1">
75	<BadgeHeader
76	title={__('Countdown Timer', 'disco')}
77	description="Customize your countdown timer on single product page."
78	/>
79	<div className="disco-max-h-[calc(100vh-225px)] disco-flex disco-gap-8 disco-pt-2 disco-mt-2 disco-justify-between">
80	<div className="disco-w-1/2 disco-max-h-full disco-overflow-y-auto disco-no-scrollbar disco-overscroll-contain">
81	<p className="disco-text-base">
82	{__('Select Countdown Design', 'disco')}
83	</p>
84	<CountdownTimeItems />
85
86	{/* Primary Text */}
87	<CountdownFontProperties
88	label={__('Primary Text', 'disco')}
89	type="title"
90	/>
91	<CountdownTextInput
92	ref={titleTextareaRef}
93	onChange={handleTitleTextChange}
94	value={title?.text \|\| 'Exclusive Deals'}
95	/>
96
97	{/* Secondary Text */}
98	<CountdownFontProperties
99	label={__('Secondary Text', 'disco')}
100	className="disco-mt-3"
101	type="subtitle"
102	/>
103	<CountdownTextInput
104	ref={subtitleTextareaRef}
105	onChange={handleSubtitleTextChange}
106	value={
107	subtitle?.text \|\|
108	'Available for a limited time only!'
109	}
110	/>
111
112	{/* Select Position */}
113	<div className="disco-flex disco-gap-2 disco-items-center disco-mt-3">
114	<div className="disco-text-sm disco-font-semibold">
115	{__('Select Position', 'disco')}
116	</div>
117	<SingleSelect
118	items={{
119	before_add_to_cart: __(
120	'Before Add to Cart',
121	'disco'
122	),
123	after_add_to_cart: __(
124	'After Add to Cart',
125	'disco'
126	),
127	}}
128	selected={
129	countdown?.position \|\| 'after_add_to_cart'
130	}
131	onchange={handlePositionChange}
132	className="disco-bg-white disco-w-44"
133	buttonClass="!disco-rounded-lg !disco-py-1 disco-font-thin disco-text-sm"
134	/>
135	</div>
136
137	{/* Countdown Display */}
138	<CountdownDisplay targetDate={discount_valid_to} />
139
140	{/* Tabs */}
141	<TabComponent
142	tabs={tabData}
143	activeTab={activeTab}
144	onTabChange={(value) => setActiveTab(value)}
145	/>
146	</div>
147	<div className="disco-w-1/2">
148	<CountdownTimeView />
149	</div>
150	</div>
151	</div>
152	</div>
153	);
154	};
155
156	export default CountdownTimeEdit;
157