disco / backend / views / components / Main / pages / Rules / Tabs / DesignBlock / CartPage / CartPageEdit.jsx

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

96 lines 2.7 KB

Raw Download Zip

1	import { useEffect, useRef, useState } from 'react';
2	import { useDispatch, useSelector } from 'react-redux';
3	import { updateCartPage } from '../../../../../features/discount/discountSlice';
4	import BadgeHeader from '../components/BadgeHeader';
5	import TabComponent from '../components/TabComponent';
6	import BannerFontProperties from './components/BannerFontProperties';
7	import BannerTextInput from './components/BannerTextInput';
8	import ButtonArea from './components/ButtonArea';
9	import ButtonSection from './components/ButtonSection';
10	import CartBadgeItems from './components/CartBadgeItems';
11	import CartPageView from './components/CartPageView';
12	import NoticeArea from './components/NoticeArea';
13	import { __ } from '@wordpress/i18n';
14
15	const CartPageEdit = () => {
16	const dispatch = useDispatch();
17	const design_blocks = useSelector((state) => state.discount?.design_blocks);
18	const cart = design_blocks?.cart;
19	const banner = cart?.banner \|\| {};
20	const [activeTab, setActiveTab] = useState('bannerArea');
21	const textareaRef = useRef(null);
22
23	const handleBannerTextChange = (e) => {
24	dispatch(
25	updateCartPage({
26	name: 'banner',
27	value: { ...banner, text: e.target.value },
28	})
29	);
30	};
31
32	const tabData = [
33	{
34	id: 'bannerArea',
35	label: __('Banner Style', 'disco'),
36	content: <NoticeArea />,
37	},
38	{
39	id: 'button',
40	label: __('Button Style', 'disco'),
41	content: <ButtonArea />,
42	},
43	];
44
45	useEffect(() => {
46	window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
47	}, []);
48
49	// Ensure design_blocks and cart are loaded
50	if (!design_blocks \|\| !cart) {
51	return null;
52	}
53
54	return (
55	<div className="disco-bg-gray-50 disco-mr-4 disco-rounded-lg disco-pb-4">
56	<div className="disco-px-5 disco-py-1">
57	<BadgeHeader
58	title={__('Cart Notice', 'disco')}
59	description={__(
60	'Customize your promotional banner on Cart Page.',
61	'disco'
62	)}
63	/>
64	<div className="disco-max-h-[calc(100vh-225px)] disco-flex disco-gap-8 disco-pt-2 disco-mt-2 disco-justify-between">
65	<div className="disco-w-1/2 disco-max-h-full disco-overflow-y-auto disco-no-scrollbar disco-overscroll-contain">
66	<CartBadgeItems />
67	<BannerFontProperties
68	label={__('Banner Text', 'disco')}
69	textareaRef={textareaRef}
70	/>
71	<BannerTextInput
72	ref={textareaRef}
73	onChange={handleBannerTextChange}
74	value={banner?.text \|\| ''}
75	/>
76	<ButtonSection />
77	{/<CheckoutSection />/}
78	<TabComponent
79	tabs={tabData}
80	activeTab={activeTab}
81	onTabChange={(value) => setActiveTab(value)}
82	/>
83	</div>
84
85	{/view section/}
86	<div className="disco-w-1/2">
87	<CartPageView />
88	</div>
89	</div>
90	</div>
91	</div>
92	);
93	};
94
95	export default CartPageEdit;
96