/
index.tsx
87 lines (82 loc) · 2.55 KB
/
index.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
import { useEffect, useMemo, useState } from 'react';
import { Search } from '@woocommerce/components';
import { __ } from '@wordpress/i18n';
import { PanelBody } from '@wordpress/components';
import apiFetch from '@wordpress/api-fetch';
import { addQueryArgs } from '@wordpress/url';
import { dispatch, useSelect } from '@wordpress/data';
import { PlainBodyTitle } from '../../../../../editor/components';
import { storeName } from '../../../../../editor/store';
import { OrderStatusPanel } from '../../order-status-changed/edit/order-status-panel';
type Product = {
key: string | number;
label?: string;
};
async function fetchProducts(
include: number[],
callback: (products: Product[]) => void,
) {
const path = addQueryArgs('/wc-analytics/products/', { include });
const data: { id: number; name: string }[] = await apiFetch({
path,
method: 'GET',
});
callback(data.map((item) => ({ key: item?.id, label: item?.name })));
}
export function Edit(): JSX.Element {
const [current, setCurrent] = useState<Product[]>([]);
const { selectedStep } = useSelect((select) => ({
selectedStep: select(storeName).getSelectedStep(),
}));
const productIds: number[] = useMemo(
() => (selectedStep.args?.product_ids as number[]) ?? [],
[selectedStep],
);
const [isBusy, setIsBusy] = useState(productIds.length > 0);
useEffect(() => {
if (!isBusy) {
return;
}
void fetchProducts(productIds, (products: Product[]) => {
setCurrent(products);
setIsBusy(false);
});
}, [isBusy, productIds]);
return (
<>
<PanelBody opened>
<PlainBodyTitle title={__('Products', 'mailpoet')} />
<Search
disabled={isBusy}
type="products"
className={`mailpoet-product-search ${isBusy ? 'is-busy' : ''}`}
placeholder={__('Search for a product', 'mailpoet')}
selected={current}
onChange={(items: Product[]) => {
setCurrent(items);
void dispatch(storeName).updateStepArgs(
selectedStep.id,
'product_ids',
items.map((item) => item.key),
);
}}
multiple
inlineTags
/>
</PanelBody>
<OrderStatusPanel
label={__('Order settings', 'mailpoet')}
showFrom={false}
showTo
toLabel={__('Order status', 'mailpoet')}
onChange={(status, property) => {
void dispatch(storeName).updateStepArgs(
selectedStep.id,
property,
status,
);
}}
/>
</>
);
}