disco / backend / views / components / Main / pages / Rules / Tabs / Summary / components / DesignBlockSummery.jsx

DesignBlockSummery.jsx in Discount Rules for WooCommerce – Disco | Dynamic Pricing, Conditions, Bulk, Bundle, BOGO 1.4.22, at backend/views/components/Main/pages/Rules/Tabs/Summary/components/DesignBlockSummery.jsx

74 lines 2.4 KB

Raw Download Zip

1	import { PencilSquareIcon } from '@heroicons/react/24/solid';
2	import { useDispatch, useSelector } from 'react-redux';
3	import Button from '../../../../../components/Button';
4	import { setTab } from '../../../../../features/discount/discountSlice';
5	import DiscountCard from '../../DesignBlock/BulkBundleDiscountPage/components/DiscountCard';
6	import CartCard from '../../DesignBlock/CartPage/components/CartCard';
7	import CountdownTimeCard from '../../DesignBlock/CountDownTime/components/CountdownTimeCard';
8	import ProductBadgeCard from '../../DesignBlock/ProductBadges/components/ProductBadgeCard';
9	import TextHighlightCard from '../../DesignBlock/TextHighlight/components/TextHighlightCard';
10	import { __ } from '@wordpress/i18n';
11
12	const DesignBlockSummery = ({ className }) => {
13	const { design_blocks } = useSelector((state) => state.discount);
14	const dispatch = useDispatch();
15
16	const handleNavigation = () => {
17	dispatch(setTab(1));
18	};
19
20	const ComponentMap = {
21	badge: ProductBadgeCard,
22	countdown: CountdownTimeCard,
23	text_highlight: TextHighlightCard,
24	cart: CartCard,
25	table: DiscountCard,
26	};
27
28	if (!design_blocks) return null;
29
30	const cardKeys = Object.keys(design_blocks);
31	const enabledComponents = cardKeys.filter((key) => {
32	const isEnabled = design_blocks[key]?.enable;
33	const ComponentToRender = ComponentMap[key];
34	return isEnabled && ComponentToRender;
35	});
36
37	return (
38	<div className={`${className}`}>
39	<div className="disco:flex disco:gap-6">
40	<p className="disco:text-xl disco:font-semibold">
41	{__('Design Block', 'disco')}
42	</p>
43	<Button
44	type="transparent"
45	onClick={handleNavigation}
46	className="disco:px-3! disco:py-1! disco:font-light! disco:text-sm disco:border disco:border-gray-300 disco:rounded-lg"
47	icon={
48	<PencilSquareIcon className="disco:h-4 disco:w-4 disco:text-primary" />
49	}
50	>
51	{__('Edit Now', 'disco')}
52	</Button>
53	</div>
54
55	<div className="disco:p-4 disco:grid disco:grid-cols-3 disco:mt-4 disco:gap-4 disco:border disco:rounded-xl">
56	{enabledComponents.length > 0 ? (
57	enabledComponents.map((key) => {
58	const ComponentToRender = ComponentMap[key];
59	return <ComponentToRender key={key} />;
60	})
61	) : (
62	<div className="disco:col-span-3 disco:text-center disco:text-gray-500">
63	<h1 className="disco:text-gray-500 disco:text-base">
64	{__('No Design Block Enabled!', 'disco')}
65	</h1>
66	</div>
67	)}
68	</div>
69	</div>
70	);
71	};
72
73	export default DesignBlockSummery;
74