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.21, at backend/views/components/Main/pages/Rules/Tabs/DesignBlock/CartPage/CartPageEdit.jsx

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