Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 | 3x 30x 30x | /** @jsxImportSource react */
import { Button, Section, Text } from "@react-email/components";
import { EmailLayout, styles } from "./components";
export type NewInquiryEmailProps = {
proName: string;
customerName: string;
customerPhone: string;
customerEmail?: string;
customerLocation?: string;
requirement?: string;
requirementType?: string;
projectTitle?: string;
portalUrl?: string;
};
const REQUIREMENT_TYPE_LABELS: Record<string, string> = {
modular_kitchen: "Modular Kitchen",
wardrobes_storage: "Wardrobes & Storage",
full_home_interior: "Full Home Interior",
full_office_interior: "Full Office Interior",
living_room: "Living Room",
bedroom: "Bedroom",
pooja_room: "Pooja Room",
other: "Other",
};
export function NewInquiryEmail({
proName,
customerName,
customerPhone,
customerEmail,
customerLocation,
requirement,
requirementType,
projectTitle,
portalUrl,
}: NewInquiryEmailProps) {
const dashboardUrl = portalUrl || "https://portal.interioring.com/inquiries";
return (
<EmailLayout preview={`New inquiry from ${customerName}`}>
<Section style={styles.section}>
<Text style={styles.paragraph}>Hi {proName},</Text>
<Text style={styles.paragraph}>
Great news! You have received a new inquiry on Interioring.
</Text>
<Section
style={{
backgroundColor: "#F3F4F6",
borderRadius: "8px",
padding: "20px",
margin: "24px 0",
}}
>
<Text style={{ ...styles.paragraph, margin: "0 0 12px 0" }}>
<strong>Customer Details:</strong>
</Text>
<Text style={{ ...styles.paragraph, margin: "4px 0" }}>
<strong>Name:</strong> {customerName}
</Text>
<Text style={{ ...styles.paragraph, margin: "4px 0" }}>
<strong>Phone:</strong> {customerPhone}
</Text>
{customerEmail && (
<Text style={{ ...styles.paragraph, margin: "4px 0" }}>
<strong>Email:</strong> {customerEmail}
</Text>
)}
{customerLocation && (
<Text style={{ ...styles.paragraph, margin: "4px 0" }}>
<strong>Location:</strong> {customerLocation}
</Text>
)}
{projectTitle && (
<Text style={{ ...styles.paragraph, margin: "4px 0" }}>
<strong>Interested In:</strong> {projectTitle}
</Text>
)}
{requirementType && requirementType !== "other" && (
<Text style={{ ...styles.paragraph, margin: "4px 0" }}>
<strong>Looking For:</strong>{" "}
{REQUIREMENT_TYPE_LABELS[requirementType] ??
requirementType.replace(/_/g, " ")}
</Text>
)}
{requirement && (
<Text style={{ ...styles.paragraph, margin: "12px 0 0 0" }}>
<strong>Requirement:</strong>
<br />
{requirement}
</Text>
)}
</Section>
<Text style={styles.paragraph}>
We recommend reaching out to this customer within 24 hours for the
best conversion rate.
</Text>
<Section style={{ textAlign: "center", margin: "32px 0" }}>
<Button href={dashboardUrl} style={styles.button}>
View Inquiry
</Button>
</Section>
<Text style={styles.mutedText}>
You can manage all your inquiries from your Interioring dashboard.
</Text>
<Text style={styles.paragraph}>
Best regards,
<br />
The Interioring Team
</Text>
</Section>
</EmailLayout>
);
}
export default NewInquiryEmail;
|