yatra / resources / js / blocks / destination / edit.tsx

edit.tsx in Yatra – Travel Booking & Tour Operator Software 3.0.16, at resources/js/blocks/destination/edit.tsx

188 lines 5.9 KB

Raw Download Zip

1	import { InspectorControls } from "@wordpress/block-editor";
2	import {
3	PanelBody,
4	TextControl,
5	RangeControl,
6	SelectControl,
7	ToggleControl,
8	} from "@wordpress/components";
9	import { __ } from "@wordpress/i18n";
10	import { useEffect, useRef } from "@wordpress/element";
11	import ServerSideRender from "@wordpress/server-side-render";
12	import { ClassificationMultiSelect } from "../components/ClassificationMultiSelect";
13	import { migrateNumericCsvPairToIds } from "../utils/migrateTaxonomyIds";
14
15	interface DestinationBlockAttributes {
16	order: "asc" \| "desc";
17	columns: number;
18	per_page: number;
19	title: string;
20	show_pagination: boolean;
21	destinationIds: number[];
22	destination_ids?: string;
23	destination?: string;
24	show_trip_count: boolean;
25	show_description: boolean;
26	show_image: boolean;
27	hide_empty: boolean;
28	featured_only: boolean;
29	}
30
31	interface EditProps {
32	attributes: DestinationBlockAttributes;
33	setAttributes: (attrs: Partial<DestinationBlockAttributes>) => void;
34	}
35
36	function normalizeIds(arr: number[] \| undefined): number[] {
37	return Array.isArray(arr)
38	? [...new Set(arr.map((n) => parseInt(String(n), 10)).filter((n) => n > 0))]
39	: [];
40	}
41
42	export default function Edit({ attributes, setAttributes }: EditProps) {
43	const migratedOnce = useRef(false);
44
45	useEffect(() => {
46	if (migratedOnce.current) {
47	return;
48	}
49	migratedOnce.current = true;
50
51	let ids = normalizeIds(attributes.destinationIds);
52	if (ids.length === 0) {
53	ids = migrateNumericCsvPairToIds(
54	attributes.destination_ids,
55	attributes.destination,
56	);
57	}
58	if (ids.length === 0) {
59	return;
60	}
61	setAttributes({
62	destinationIds: ids,
63	destination: "",
64	destination_ids: "",
65	});
66	// eslint-disable-next-line react-hooks/exhaustive-deps
67	}, [setAttributes]);
68
69	const destinationIds = normalizeIds(attributes.destinationIds);
70
71	return (
72	<>
73	<InspectorControls>
74	<PanelBody
75	title={__("Destination Settings", "yatra")}
76	initialOpen={true}
77	>
78	<TextControl
79	label={__("Title", "yatra")}
80	value={attributes.title}
81	onChange={(value: string) => setAttributes({ title: value })}
82	/>
83	<SelectControl
84	label={__("Order", "yatra")}
85	value={attributes.order}
86	options={[
87	{ label: __("Ascending", "yatra"), value: "asc" },
88	{ label: __("Descending", "yatra"), value: "desc" },
89	]}
90	onChange={(value: string) =>
91	setAttributes({ order: value as "asc" \| "desc" })
92	}
93	/>
94	<RangeControl
95	label={__("Number of Destinations", "yatra")}
96	value={attributes.per_page}
97	onChange={(value: number \| undefined) =>
98	setAttributes({
99	per_page: value !== undefined && value !== null ? value : 10,
100	})
101	}
102	min={1}
103	max={50}
104	/>
105	<RangeControl
106	label={__("Columns", "yatra")}
107	value={attributes.columns}
108	onChange={(value: number \| undefined) =>
109	setAttributes({
110	columns: value !== undefined && value !== null ? value : 3,
111	})
112	}
113	min={1}
114	max={6}
115	/>
116	<ToggleControl
117	label={__("Show pagination", "yatra")}
118	checked={attributes.show_pagination}
119	onChange={(value: boolean) =>
120	setAttributes({ show_pagination: value })
121	}
122	/>
123	<ClassificationMultiSelect
124	taxonomy="destination"
125	label={__("Destinations to show", "yatra")}
126	help={__(
127	'Pick "All published" for the full catalog; otherwise search and tick specific destinations.',
128	"yatra",
129	)}
130	value={destinationIds}
131	onChange={(ids) => setAttributes({ destinationIds: ids })}
132	/>
133	</PanelBody>
134
135	<PanelBody title={__("Display options", "yatra")} initialOpen={false}>
136	<ToggleControl
137	label={__("Show trip count", "yatra")}
138	checked={attributes.show_trip_count}
139	onChange={(value: boolean) =>
140	setAttributes({ show_trip_count: value })
141	}
142	/>
143	<ToggleControl
144	label={__("Show description", "yatra")}
145	checked={attributes.show_description}
146	onChange={(value: boolean) =>
147	setAttributes({ show_description: value })
148	}
149	/>
150	<ToggleControl
151	label={__("Show image", "yatra")}
152	checked={attributes.show_image}
153	onChange={(value: boolean) => setAttributes({ show_image: value })}
154	/>
155	<ToggleControl
156	label={__("Hide empty destinations", "yatra")}
157	help={__(
158	"Skip destinations that have no published trips assigned. Off by default — turn on for a tighter live catalog, leave off for editorial / onboarding views.",
159	"yatra",
160	)}
161	checked={attributes.hide_empty}
162	onChange={(value: boolean) => setAttributes({ hide_empty: value })}
163	/>
164	<ToggleControl
165	label={__("Featured only (filter list)", "yatra")}
166	help={__(
167	"When on, only destinations marked as featured in Yatra → Destinations are listed.",
168	"yatra",
169	)}
170	checked={attributes.featured_only}
171	onChange={(value: boolean) =>
172	setAttributes({ featured_only: value })
173	}
174	/>
175	</PanelBody>
176	</InspectorControls>
177
178	<div className="yatra-block-editor-preview">
179	<ServerSideRender
180	block="yatra/destination"
181	attributes={attributes}
182	key={JSON.stringify(attributes)}
183	/>
184	</div>
185	</>
186	);
187	}
188