disco / backend / views / components / Main / pages / Rules / Tabs / DesignBlock / TextHighlight / TextHighlightEdit.jsx

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

240 lines 6.6 KB

Raw Download Zip

1	import { __ } from '@wordpress/i18n';
2	import { useEffect, useRef, useState } from 'react';
3	import { useDispatch, useSelector } from 'react-redux';
4	import SingleSelect from '../../../../../components/SingleSelect';
5	import { updateTextHighlight } from '../../../../../features/discount/discountSlice';
6	import textHighlightDesign from '../../../../../utilities/text-highlight-design';
7	import BadgeHeader from '../components/BadgeHeader';
8	import BadgeTextWithDynamicProperties from '../components/BadgeTextWithDynamicProperties';
9	import ColorPikerBox from '../components/ColorPikerBox';
10	import UploadBadgeComponent from '../components/UploadBadgeComponent';
11	import BadgeSelector from '../ProductBadges/components/SelectBadge';
12	import TextHighlightItems from './components/TextHighlightItems';
13	import TextHighlightProperties from './components/TextHighlightProperties';
14	import TextHighlightStyleBox from './components/TextHighlightStyleBox';
15	import TextHighlightView from './components/TextHighlightView';
16
17	const TextHighlightEdit = () => {
18	const badgeInitialType = useSelector(
19	(state) =>
20	state.discount.design_blocks.text_highlight?.badge_type \|\|
21	'editable'
22	);
23	const [selectedBadge, setSelectedBadge] = useState(
24	badgeInitialType \|\| 'editable'
25	);
26	const textareaRef = useRef(null);
27
28	const { text_highlight } = useSelector(
29	(state) => state.discount.design_blocks
30	);
31	const isValueEditable = selectedBadge === 'value_editable';
32	const isUpload = selectedBadge === 'upload';
33	const dispatch = useDispatch();
34
35	// handle title change
36	const handleTextHighlightTitle = (key, value) => {
37	dispatch(
38	updateTextHighlight({
39	name: 'title',
40	value: { ...text_highlight.title, [key]: value },
41	})
42	);
43	};
44
45	// handle container change
46	const handleContainerChange = (key, value) => {
47	dispatch(
48	updateTextHighlight({
49	name: 'container',
50	value: { ...text_highlight.container, [key]: value },
51	})
52	);
53	};
54
55	// handle position change
56	const handlePositionChange = (value) => {
57	dispatch(updateTextHighlight({ name: 'position', value }));
58	};
59
60	// handle image badge select from uploaded images
61	const handleImageTextHighlightSelect = (image) => {
62	dispatch(
63	updateTextHighlight({
64	name: 'selected_design',
65	value: image.id,
66	})
67	);
68	dispatch(
69	updateTextHighlight({
70	name: 'image',
71	value: { url: image.url },
72	})
73	);
74	dispatch(
75	updateTextHighlight({
76	name: 'badge_type',
77	value: 'upload',
78	})
79	);
80	dispatch(
81	updateTextHighlight({
82	name: 'container',
83	value: textHighlightDesign?.image?.container \|\| null,
84	})
85	);
86	setSelectedBadge('upload');
87
88	// clear old badge data when new badge is selected
89	dispatch(
90	updateTextHighlight({
91	name: 'title',
92	value: null,
93	})
94	);
95	dispatch(
96	updateTextHighlight({
97	name: 'design',
98	value: null,
99	})
100	);
101	};
102
103	const badgeOptions = [
104	{ label: __('Editable', 'disco'), value: 'editable' },
105	{ label: __('Value Editable', 'disco'), value: 'value_editable' },
106	{ label: __('Upload', 'disco'), value: 'upload' },
107	];
108
109	useEffect(() => {
110	window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
111	}, []);
112
113	return (
114	<div className="disco-bg-gray-50 disco-mr-4 disco-rounded-lg disco-pb-4">
115	{/* <BadgeHeaderTabs /> */}
116	<div className="disco-px-5 disco-py-1">
117	<BadgeHeader
118	title={__('Text Highlight', 'disco')}
119	description={__(
120	'Customize your promotional message on product page.',
121	'disco'
122	)}
123	/>
124	<div className="disco-max-h-[calc(100vh-225px)] disco-flex disco-gap-8 disco-pt-2 disco-pb-4 disco-mt-2 disco-justify-between">
125	<div className="disco-w-3/5 disco-max-h-full disco-overflow-y-auto disco-no-scrollbar disco-overscroll-contain">
126	<BadgeSelector
127	title={__('Choose Badge', 'disco')}
128	options={badgeOptions}
129	selectedOption={selectedBadge}
130	onChange={(option) => setSelectedBadge(option)}
131	/>
132	{isUpload ? (
133	<UploadBadgeComponent
134	title={__('Upload Your Badge', 'disco')}
135	uploadType="text-highlight"
136	handleUploadBadgeSelect={
137	handleImageTextHighlightSelect
138	}
139	selectedDesign={text_highlight?.selected_design}
140	/>
141	) : (
142	<>
143	<TextHighlightItems
144	selectedBadge={selectedBadge}
145	/>
146	<TextHighlightProperties
147	label={__('Primary Text', 'disco')}
148	textareaRef={textareaRef}
149	/>
150	<BadgeTextWithDynamicProperties
151	onChange={(e) =>
152	handleTextHighlightTitle(
153	'text',
154	e.target.value
155	)
156	}
157	value={text_highlight?.title?.text \|\| ''}
158	data={[
159	{
160	label: __('Discount Type', 'disco'),
161	value: __('Percentage', 'disco'),
162	},
163	{
164	label: 'discounted_amount',
165	value: '$10',
166	},
167	]}
168	ref={textareaRef}
169	/>
170
171	{/* Select Position */}
172	<div className="disco-flex disco-gap-2 disco-items-center disco-mt-3">
173	<div className="disco-text-sm disco-font-semibold">
174	Select Position
175	</div>
176	<SingleSelect
177	items={{
178	after_title: 'After Title',
179	after_price: 'After Price',
180	before_add_to_cart:
181	'Before Add to Cart',
182	after_add_to_cart:
183	'After Add to Cart',
184	}}
185	selected={
186	text_highlight?.position \|\|
187	'after_add_to_cart'
188	}
189	onchange={handlePositionChange}
190	className="disco-bg-white disco-w-44"
191	buttonClass="!disco-rounded-lg !disco-py-1 disco-font-thin disco-text-sm"
192	/>
193	</div>
194
195	<TextHighlightStyleBox />
196	<ColorPikerBox
197	fontColor={text_highlight?.title?.color}
198	backgroundColor={
199	text_highlight?.container?.[
200	'background-color'
201	]
202	}
203	borderColor={
204	text_highlight?.container?.[
205	'border-color'
206	]
207	}
208	handleFontColor={(value) =>
209	handleTextHighlightTitle('color', value)
210	}
211	handleBackgroundColor={(value) =>
212	handleContainerChange(
213	'background-color',
214	value
215	)
216	}
217	handleBorderColor={(value) =>
218	handleContainerChange(
219	'border-color',
220	value
221	)
222	}
223	bgColorDisabled={isValueEditable}
224	borderColorDisabled={isValueEditable}
225	/>
226	</>
227	)}
228	</div>
229	<div className="disco-w-2/5">
230	<TextHighlightView
231	setSelectedBadge={setSelectedBadge}
232	/>
233	</div>
234	</div>
235	</div>
236	</div>
237	);
238	};
239	export default TextHighlightEdit;
240