Skip to content

Commit

Permalink
[MS-760] feat: More emails
Browse files Browse the repository at this point in the history
  • Loading branch information
piotrgrundas committed Oct 10, 2024
1 parent 33fc099 commit da4fd99
Show file tree
Hide file tree
Showing 22 changed files with 716 additions and 162 deletions.
5 changes: 5 additions & 0 deletions src/api/rest/saleor/webhooks.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import {
AccountDeleteRequestedSubscriptionDocument,
AccountEmailChangedSubscriptionDocument,
AccountSetPasswordRequestedSubscriptionDocument,
FulfillmentCreatedSubscriptionDocument,
FulfillmentTrackingNumberUpdatedSubscriptionDocument,
GiftCardSentSubscriptionDocument,
OrderCancelledSubscriptionDocument,
Expand Down Expand Up @@ -72,6 +73,10 @@ export const EVENT_HANDLERS: {
event: "FULFILLMENT_TRACKING_NUMBER_UPDATED",
query: FulfillmentTrackingNumberUpdatedSubscriptionDocument.toString(),
},
{
event: "FULFILLMENT_CREATED",
query: FulfillmentCreatedSubscriptionDocument.toString(),
},
{
event: "GIFT_CARD_SENT",
query: GiftCardSentSubscriptionDocument.toString(),
Expand Down
2 changes: 1 addition & 1 deletion src/emails/components/LinesSection.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,8 @@ const LinsSection = ({
header: string;
}) => (
<>
<SubHeader>{header}</SubHeader>
<Section>
<SubHeader className="mb-8">{header}</SubHeader>
<LinesSummary {...linesSummaryProps} />
</Section>
</>
Expand Down
2 changes: 1 addition & 1 deletion src/emails/components/SubHeader.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { cn } from "@/lib/emails/helpers";
const SubHeader = ({ className, ...props }: HeadingProps) => (
<BaseHeading
{...props}
className={cn("text-2xl !m-0 font-normal", className)}
className={cn("text-2xl mt-0 mb-0 font-normal", className)}
/>
);

Expand Down
2 changes: 1 addition & 1 deletion src/emails/templates/AccountChangeEmailRequestedEmail.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ const AccountChangeEmailRequestedEmail = ({
<br />
<Link
href={data.redirectUrl ?? "#"}
className="font-bold text-[inherit] [text-decoration:underline]"
className="font-bold text-[inherit] underline"
>
Change the mail
</Link>
Expand Down
2 changes: 1 addition & 1 deletion src/emails/templates/AccountConfirmationRequestedEmail.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ const AccountConfirmationRequestedEmail = ({
<br />
<Link
href={data.redirectUrl ?? "#"}
className="font-bold underline text-[inherit] [text-decoration:underline]"
className="font-bold underline text-[inherit] underline"
>
Activate the account
</Link>
Expand Down
2 changes: 1 addition & 1 deletion src/emails/templates/AccountConfirmedEmail.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ const AccountConfirmedEmail = ({
data,
}: EventData<AccountConfirmedSubscription>) => {
return (
<Layout channel={data.channel?.slug} previewText="AccountConfirmedEmail">
<Layout channel={data.channel?.slug} previewText="Account Confirmed">
{() => (
<>
<Header>Hi {data.user?.firstName}!</Header>
Expand Down
2 changes: 1 addition & 1 deletion src/emails/templates/AccountDeleteRequestedEmail.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ const AccountDeleteRequestedEmail = ({
<br />
<Link
href={data.redirectUrl ?? "#"}
className="font-bold underline text-[inherit] [text-decoration:underline]"
className="font-bold underline text-[inherit] underline"
>
Delete account
</Link>
Expand Down
2 changes: 1 addition & 1 deletion src/emails/templates/AccountDeletedEmail.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ const AccountDeletedEmail = ({
data,
}: EventData<AccountDeletedSubscription>) => {
return (
<Layout channel={data.channel?.slug} previewText="AccountDeletedEmail">
<Layout channel={data.channel?.slug} previewText="Account Deleted">
{() => (
<>
<Header>Hi {data.user?.firstName}!</Header>
Expand Down
2 changes: 1 addition & 1 deletion src/emails/templates/AccountSetPasswordRequestedEmail.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ const AccountSetPasswordRequestedEmail = ({
<br />
<Link
href={data.redirectUrl ?? "#"}
className="font-bold underline text-[inherit] [text-decoration:underline]"
className="font-bold underline text-[inherit]"
>
Reset the password
</Link>
Expand Down
137 changes: 137 additions & 0 deletions src/emails/templates/FulfillmentCreatedEmail.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,137 @@
import { Hr } from "@react-email/components";

import AddressSection from "@/emails/components/AddressSection";
import Header from "@/emails/components/Header";
import Layout from "@/emails/components/Layout";
import LinsSection from "@/emails/components/LinesSection";
import { type Line } from "@/emails/components/LinesSummary";
import Text from "@/emails/components/Text";
import { type FulfillmentCreatedSubscription } from "@/graphql/operations/subscriptions/generated";
import { orderLinetoLine } from "@/lib/saleor/utils";
import { type EventData } from "@/lib/types";

const FulfillmentCreatedEmail = ({
data,
}: EventData<FulfillmentCreatedSubscription>) => {
const order = data!.order!;

return (
<Layout channel={order.channel.slug} previewText="Fulfillment updated">
{({ formatter, paths }) => {
const lines = order.fulfillments
.map(({ lines }) =>
lines?.map(
({ orderLine, quantity }) =>
orderLine && {
...orderLinetoLine({
line: orderLine,
formatter,
displayGrossPrices: order.displayGrossPrices,
}),
quantity,
}
)
)
.filter(Boolean)
.flat() as Line[];

return (
<>
<Header>Hello!</Header>
<Text>
Fulfillment for the order <strong>{order.number}</strong> has been
updated.
</Text>
<br />
<Text>
Thank you for placing your order! You will soon receive further
details regarding processing and shipping. If you have any
questions, feel free to reach out to us.
</Text>

{order.shippingAddress && (
<AddressSection
formatter={formatter}
header="Shipping address"
address={order.shippingAddress}
/>
)}

<Hr />

<LinsSection paths={paths} header="Your order" lines={lines} />
</>
);
}}
</Layout>
);
};

const previewProps: EventData<FulfillmentCreatedSubscription> = {
data: {
order: {
number: "941",
displayGrossPrices: true,
languageCodeEnum: "EN_US",
channel: {
slug: "channel-us",
},
userEmail: "[email protected]",
user: {
firstName: "Machelunio",
},
shippingAddress: {
id: "QWRkcmVzczoyODE3",
firstName: "Machelunio",
lastName: "Macheluino",
companyName: "",
streetAddress1: "testowe",
streetAddress2: "",
city: "AAAA",
postalCode: "35004",
country: {
code: "US",
},
countryArea: "AL",
phone: "+12034668960",
},
fulfillments: [
{
lines: [
{
quantity: 1,
orderLine: {
quantity: 1,
variantName: "MP3",
productName: "Classical Gems Damian",
thumbnail: {
url: "https://marina-dev.eu.saleor.cloud/media/thumbnails/products/11_1ac623f7_95ba9540_thumbnail_256.png",
},
unitPrice: {
gross: {
amount: 15.99,
currency: "USD",
},
net: {
amount: 15.99,
currency: "USD",
},
},
variant: {
product: {
slug: "aa-classical-gems",
},
},
},
},
],
},
],
},
},
};

FulfillmentCreatedEmail.PreviewProps = previewProps;
FulfillmentCreatedEmail.Subject = "Fulfillment updated";

export default FulfillmentCreatedEmail;
Loading

0 comments on commit da4fd99

Please sign in to comment.