yatra / resources / js / components / settings / EmailDeliverySection.tsx

EmailDeliverySection.tsx in Yatra – Travel Booking & Tour Operator Software 3.0.15, at resources/js/components/settings/EmailDeliverySection.tsx

269 lines 7.6 KB

Raw Download Zip

1	/**
2	* Email → Delivery: admin/from identity and optional SMTP only.
3	*/
4
5	import React from "react";
6	import { Info } from "lucide-react";
7	import { __ } from "../../lib/i18n";
8	import { Input } from "../ui/input";
9	import { Select } from "../ui/select";
10	import { Label } from "../ui/label";
11	import type {
12	EmailFieldChangeHandler,
13	EmailSettingsValues,
14	} from "./email-settings-types";
15
16	const Field = React.memo(
17	({
18	id,
19	label,
20	description,
21	required = false,
22	children,
23	}: {
24	id: string;
25	label: string;
26	description?: React.ReactNode;
27	required?: boolean;
28	children: React.ReactNode;
29	}) => (
30	<div className="space-y-2">
31	<Label htmlFor={id} className="flex items-center gap-1.5">
32	{label}
33	{required && <span className="text-red-500">*</span>}
34	</Label>
35	{description && (
36	<p className="text-xs text-gray-500 dark:text-gray-400 flex items-start gap-1.5">
37	<Info className="w-3.5 h-3.5 mt-0.5 flex-shrink-0" />
38	<span className="min-w-0 leading-relaxed">{description}</span>
39	</p>
40	)}
41	{children}
42	</div>
43	),
44	);
45	Field.displayName = "Field";
46
47	const SectionDivider = ({ title }: { title: string }) => (
48	<div className="border-t border-gray-200 dark:border-gray-700 pt-4 mt-6">
49	<h3 className="text-sm font-semibold text-gray-900 dark:text-white mb-4">
50	{title}
51	</h3>
52	</div>
53	);
54
55	export type EmailDeliverySectionProps = {
56	values: Pick<
57	EmailSettingsValues,
58	\| "admin_email"
59	\| "from_email"
60	\| "from_name"
61	\| "email_always_bcc"
62	\| "smtp_enabled"
63	\| "smtp_host"
64	\| "smtp_port"
65	\| "smtp_username"
66	\| "smtp_password"
67	\| "smtp_encryption"
68	>;
69	onFieldChange: EmailFieldChangeHandler;
70	};
71
72	export const EmailDeliverySection: React.FC<EmailDeliverySectionProps> = ({
73	values,
74	onFieldChange,
75	}) => (
76	<div className="space-y-6">
77	<div>
78	<h3 className="text-sm font-semibold text-gray-900 dark:text-white mb-4">
79	{__("Email Configuration", "yatra")}
80	</h3>
81	<div className="space-y-4">
82	<Field
83	id="admin_email"
84	label={__("Admin Email", "yatra")}
85	description={__(
86	"Email address to receive admin notifications",
87	"yatra",
88	)}
89	required
90	>
91	<Input
92	id="admin_email"
93	type="email"
94	value={values.admin_email}
95	name="admin_email"
96	onChange={onFieldChange}
97	placeholder={__("admin@example.com", "yatra")}
98	/>
99	</Field>
100
101	<Field
102	id="email_always_bcc"
103	label={__("Always BCC", "yatra")}
104	description={__(
105	"Blind-copy this address on every email Yatra sends, for archiving or monitoring. Hidden from recipients. Separate several addresses with commas. Leave empty to send no copies.",
106	"yatra",
107	)}
108	>
109	<Input
110	id="email_always_bcc"
111	value={values.email_always_bcc ?? ""}
112	name="email_always_bcc"
113	onChange={onFieldChange}
114	placeholder={__("archive@example.com", "yatra")}
115	/>
116	</Field>
117
118	<Field
119	id="from_email"
120	label={__("From Email", "yatra")}
121	description={__(
122	"Email address used as sender for customer emails",
123	"yatra",
124	)}
125	required
126	>
127	<Input
128	id="from_email"
129	type="email"
130	value={values.from_email}
131	name="from_email"
132	onChange={onFieldChange}
133	placeholder={__("noreply@example.com", "yatra")}
134	/>
135	</Field>
136
137	<Field
138	id="from_name"
139	label={__("From Name", "yatra")}
140	description={__(
141	"Name displayed as sender in customer emails",
142	"yatra",
143	)}
144	>
145	<Input
146	id="from_name"
147	value={values.from_name}
148	name="from_name"
149	onChange={onFieldChange}
150	placeholder={__("Travel Agency Name", "yatra")}
151	/>
152	</Field>
153	</div>
154	</div>
155
156	<SectionDivider title={__("SMTP Settings (Optional)", "yatra")} />
157
158	<div className="space-y-4">
159	<div className="flex items-center gap-2 p-3 bg-gray-50 dark:bg-gray-800 rounded-md">
160	<input
161	type="checkbox"
162	id="smtp_enabled"
163	checked={values.smtp_enabled}
164	name="smtp_enabled"
165	onChange={onFieldChange}
166	className="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
167	/>
168	<div className="flex-1">
169	<Label htmlFor="smtp_enabled" className="font-medium cursor-pointer">
170	{__("Enable SMTP", "yatra")}
171	</Label>
172	<p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
173	{__(
174	"Use custom SMTP server instead of default WordPress mail",
175	"yatra",
176	)}
177	</p>
178	</div>
179	</div>
180
181	{values.smtp_enabled && (
182	<>
183	<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
184	<Field
185	id="smtp_host"
186	label={__("SMTP Host", "yatra")}
187	description={__("SMTP server address", "yatra")}
188	>
189	<Input
190	id="smtp_host"
191	value={values.smtp_host}
192	name="smtp_host"
193	onChange={onFieldChange}
194	placeholder="smtp.gmail.com"
195	/>
196	</Field>
197
198	<Field
199	id="smtp_port"
200	label={__("SMTP Port", "yatra")}
201	description={__("SMTP server port (usually 587 or 465)", "yatra")}
202	>
203	<Input
204	id="smtp_port"
205	type="number"
206	value={values.smtp_port}
207	name="smtp_port"
208	onChange={onFieldChange}
209	placeholder="587"
210	/>
211	</Field>
212	</div>
213
214	<Field
215	id="smtp_encryption"
216	label={__("Encryption", "yatra")}
217	description={__("Connection encryption type", "yatra")}
218	>
219	<Select
220	id="smtp_encryption"
221	value={values.smtp_encryption}
222	name="smtp_encryption"
223	onChange={onFieldChange}
224	>
225	<option value="tls">{__("TLS", "yatra")}</option>
226	<option value="ssl">{__("SSL", "yatra")}</option>
227	<option value="none">{__("None", "yatra")}</option>
228	</Select>
229	</Field>
230
231	<Field
232	id="smtp_username"
233	label={__("SMTP Username", "yatra")}
234	description={__("Your SMTP account username", "yatra")}
235	>
236	<Input
237	id="smtp_username"
238	value={values.smtp_username}
239	name="smtp_username"
240	onChange={onFieldChange}
241	placeholder={__("your-email@gmail.com", "yatra")}
242	/>
243	</Field>
244
245	<Field
246	id="smtp_password"
247	label={__("SMTP Password", "yatra")}
248	description={__(
249	"Your SMTP account password or app password",
250	"yatra",
251	)}
252	>
253	<Input
254	id="smtp_password"
255	type="password"
256	value={values.smtp_password}
257	name="smtp_password"
258	onChange={onFieldChange}
259	placeholder={__("Enter SMTP password", "yatra")}
260	/>
261	</Field>
262	</>
263	)}
264	</div>
265	</div>
266	);
267
268	export default EmailDeliverySection;
269