extendify / src / QuickEdit / components / modals / ProductPriceModal.jsx

ProductPriceModal.jsx in Extendify 3.1.6, at src/QuickEdit/components/modals/ProductPriceModal.jsx

136 lines 3.7 KB

Raw Download Zip

1	import { track } from '@shared/lib/track';
2	import {
3	Button,
4	Modal,
5	Notice,
6	Spinner,
7	TextControl,
8	} from '@wordpress/components';
9	import { useEffect, useState } from '@wordpress/element';
10	import { __ } from '@wordpress/i18n';
11	import { loadProduct, saveProduct } from '../../lib/api';
12	import { useCmdEnterSave } from '../../lib/cmd-enter-save';
13	import { friendlyMessage } from '../../lib/errors';
14	import { QE_MODAL_BODY_OPEN_CLASS } from '../../lib/modal-root';
15	import { pushUndo } from '../../state/undo';
16	import { ModalCloseButton } from './ModalCloseButton';
17
18	export const ProductPriceModal = ({ productId, onAfterSave }) => {
19	const [data, setData] = useState(null);
20	const [original, setOriginal] = useState({ regular: '', sale: '' });
21	const [regular, setRegular] = useState('');
22	const [sale, setSale] = useState('');
23	const [saving, setSaving] = useState(false);
24	const [error, setError] = useState(null);
25
26	useEffect(() => {
27	loadProduct(productId)
28	.then((res) => {
29	setData(res);
30	const o = {
31	regular: res.regular_price \|\| '',
32	sale: res.sale_price \|\| '',
33	};
34	setOriginal(o);
35	setRegular(o.regular);
36	setSale(o.sale);
37	})
38	.catch((err) => setError(friendlyMessage(err)));
39	}, [productId]);
40
41	const handleSave = async () => {
42	if (saving \|\| !data) return;
43	if (regular === original.regular && sale === original.sale) {
44	onAfterSave(false);
45	return;
46	}
47	setSaving(true);
48	setError(null);
49	try {
50	await saveProduct({
51	productId,
52	field: 'price',
53	value: { regular, sale },
54	});
55	pushUndo({
56	kind: 'product-price',
57	productReplay: true,
58	productId,
59	field: 'price',
60	beforeValue: original,
61	});
62	track('save', { kind: 'product', field: 'price' });
63	onAfterSave(true);
64	} catch (err) {
65	track('save_failed', { kind: 'product', field: 'price' });
66	setError(friendlyMessage(err));
67	setSaving(false);
68	}
69	};
70	useCmdEnterSave(handleSave, !!data && !saving);
71
72	const currency = window.extQuickEditData?.context?.currencySymbol \|\| '$';
73
74	return (
75	<Modal
76	title={__('Edit price', 'extendify-local')}
77	onRequestClose={() => onAfterSave(false)}
78	isDismissible={false}
79	headerActions={<ModalCloseButton onClick={() => onAfterSave(false)} />}
80	className="extendify-quick-edit-modal extendify-quick-edit-modal-price"
81	overlayClassName="extendify-quick-edit"
82	bodyOpenClassName={QE_MODAL_BODY_OPEN_CLASS}
83	size="small"
84	>
85	{error ? (
86	<Notice status="error" isDismissible={false}>
87	{error}
88	</Notice>
89	) : null}
90	{!data && !error ? <Spinner /> : null}
91	{data ? (
92	<div className="extendify-quick-edit-price-fields">
93	<div className="extendify-quick-edit-price-row">
94	<span className="extendify-quick-edit-price-prefix">
95	{currency}
96	</span>
97	<TextControl
98	__nextHasNoMarginBottom
99	label={__('Regular price', 'extendify-local')}
100	value={regular}
101	onChange={setRegular}
102	placeholder="0.00"
103	autoFocus
104	/>
105	</div>
106	<div className="extendify-quick-edit-price-row">
107	<span className="extendify-quick-edit-price-prefix">
108	{currency}
109	</span>
110	<TextControl
111	__nextHasNoMarginBottom
112	label={__('Sale price (optional)', 'extendify-local')}
113	value={sale}
114	onChange={setSale}
115	placeholder="0.00"
116	/>
117	</div>
118	</div>
119	) : null}
120	<div className="extendify-quick-edit-modal-actions">
121	<Button variant="tertiary" onClick={() => onAfterSave(false)}>
122	{__('Cancel', 'extendify-local')}
123	</Button>
124	<Button
125	variant="primary"
126	isBusy={saving}
127	disabled={saving \|\| !data}
128	onClick={handleSave}
129	>
130	{__('Save', 'extendify-local')}
131	</Button>
132	</div>
133	</Modal>
134	);
135	};
136