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

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

251 lines 6.9 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	\| "smtp_enabled"
62	\| "smtp_host"
63	\| "smtp_port"
64	\| "smtp_username"
65	\| "smtp_password"
66	\| "smtp_encryption"
67	>;
68	onFieldChange: EmailFieldChangeHandler;
69	};
70
71	export const EmailDeliverySection: React.FC<EmailDeliverySectionProps> = ({
72	values,
73	onFieldChange,
74	}) => (
75	<div className="space-y-6">
76	<div>
77	<h3 className="text-sm font-semibold text-gray-900 dark:text-white mb-4">
78	{__("Email Configuration", "yatra")}
79	</h3>
80	<div className="space-y-4">
81	<Field
82	id="admin_email"
83	label={__("Admin Email", "yatra")}
84	description={__(
85	"Email address to receive admin notifications",
86	"yatra",
87	)}
88	required
89	>
90	<Input
91	id="admin_email"
92	type="email"
93	value={values.admin_email}
94	name="admin_email"
95	onChange={onFieldChange}
96	placeholder={__("[email protected]", "yatra")}
97	/>
98	</Field>
99
100	<Field
101	id="from_email"
102	label={__("From Email", "yatra")}
103	description={__(
104	"Email address used as sender for customer emails",
105	"yatra",
106	)}
107	required
108	>
109	<Input
110	id="from_email"
111	type="email"
112	value={values.from_email}
113	name="from_email"
114	onChange={onFieldChange}
115	placeholder={__("[email protected]", "yatra")}
116	/>
117	</Field>
118
119	<Field
120	id="from_name"
121	label={__("From Name", "yatra")}
122	description={__(
123	"Name displayed as sender in customer emails",
124	"yatra",
125	)}
126	>
127	<Input
128	id="from_name"
129	value={values.from_name}
130	name="from_name"
131	onChange={onFieldChange}
132	placeholder={__("Travel Agency Name", "yatra")}
133	/>
134	</Field>
135	</div>
136	</div>
137
138	<SectionDivider title={__("SMTP Settings (Optional)", "yatra")} />
139
140	<div className="space-y-4">
141	<div className="flex items-center gap-2 p-3 bg-gray-50 dark:bg-gray-800 rounded-md">
142	<input
143	type="checkbox"
144	id="smtp_enabled"
145	checked={values.smtp_enabled}
146	name="smtp_enabled"
147	onChange={onFieldChange}
148	className="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
149	/>
150	<div className="flex-1">
151	<Label htmlFor="smtp_enabled" className="font-medium cursor-pointer">
152	{__("Enable SMTP", "yatra")}
153	</Label>
154	<p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
155	{__(
156	"Use custom SMTP server instead of default WordPress mail",
157	"yatra",
158	)}
159	</p>
160	</div>
161	</div>
162
163	{values.smtp_enabled && (
164	<>
165	<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
166	<Field
167	id="smtp_host"
168	label={__("SMTP Host", "yatra")}
169	description={__("SMTP server address", "yatra")}
170	>
171	<Input
172	id="smtp_host"
173	value={values.smtp_host}
174	name="smtp_host"
175	onChange={onFieldChange}
176	placeholder="smtp.gmail.com"
177	/>
178	</Field>
179
180	<Field
181	id="smtp_port"
182	label={__("SMTP Port", "yatra")}
183	description={__("SMTP server port (usually 587 or 465)", "yatra")}
184	>
185	<Input
186	id="smtp_port"
187	type="number"
188	value={values.smtp_port}
189	name="smtp_port"
190	onChange={onFieldChange}
191	placeholder="587"
192	/>
193	</Field>
194	</div>
195
196	<Field
197	id="smtp_encryption"
198	label={__("Encryption", "yatra")}
199	description={__("Connection encryption type", "yatra")}
200	>
201	<Select
202	id="smtp_encryption"
203	value={values.smtp_encryption}
204	name="smtp_encryption"
205	onChange={onFieldChange}
206	>
207	<option value="tls">{__("TLS", "yatra")}</option>
208	<option value="ssl">{__("SSL", "yatra")}</option>
209	<option value="none">{__("None", "yatra")}</option>
210	</Select>
211	</Field>
212
213	<Field
214	id="smtp_username"
215	label={__("SMTP Username", "yatra")}
216	description={__("Your SMTP account username", "yatra")}
217	>
218	<Input
219	id="smtp_username"
220	value={values.smtp_username}
221	name="smtp_username"
222	onChange={onFieldChange}
223	placeholder={__("[email protected]", "yatra")}
224	/>
225	</Field>
226
227	<Field
228	id="smtp_password"
229	label={__("SMTP Password", "yatra")}
230	description={__(
231	"Your SMTP account password or app password",
232	"yatra",
233	)}
234	>
235	<Input
236	id="smtp_password"
237	type="password"
238	value={values.smtp_password}
239	name="smtp_password"
240	onChange={onFieldChange}
241	placeholder={__("Enter SMTP password", "yatra")}
242	/>
243	</Field>
244	</>
245	)}
246	</div>
247	</div>
248	);
249
250	export default EmailDeliverySection;
251