[MS-670] feat: Clean templates props types

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "pete-nimara-mailer",
+  "name": "nimara-mailer",
   "version": "1.0.2",
   "type": "module",
   "author": {
@@ -15,7 +15,7 @@
   "scripts": {
     "dev": "concurrently -k -p \"[{name}]\" -n \"TSC,BUILD,RECEIVER,SENDER\" -c \"blue.bold,red.bold,cyan.bold,green.bold\" \"pnpm tsc:watch\" \"pnpm dev:build\" \"pnpm dev:run:events-receiver\" \"pnpm dev:run:emails-sender-proxy\"",
     "dev:build": "dotenv -v NODE_ENV=development -- node ./etc/scripts/dev.mjs",
-    "dev:emails": "dotenv -- email dev -d ./src/emails -p 3002",
+    "dev:emails": "dotenv -- email dev -d ./src/emails/templates -p 3002",
     "dev:run:events-receiver": "dotenv -v NODE_ENV=development -- nodemon --inspect=0.0.0.0:9229 --watch build/events-receiver.js build/events-receiver.js",
     "dev:run:emails-sender-proxy": "dotenv -v NODE_ENV=development -- nodemon --inspect=0.0.0.0:9230 --watch build/emails-sender-proxy.js build/emails-sender-proxy.js",
     "build": "dotenv -v NODE_ENV=production node ./etc/scripts/build.mjs",

src/const.ts

@@ -41,5 +41,6 @@ export const CUSTOM_EVENTS_SCHEMA = {
   custom_event: z.object({
     name: z.string(),
     email: z.string(),
+    channel: z.string(),
   }),
 } satisfies Record<CustomEventType, z.ZodTypeAny>;

src/emails/templates/custom/CustomEventEmail.tsx

@@ -0,0 +1,39 @@
+import { type z } from "zod";
+
+import { type CUSTOM_EVENTS_SCHEMA } from "@/const";
+import Header from "@/emails/components/Header";
+import Layout from "@/emails/components/Layout";
+import Text from "@/emails/components/Text";
+import { type CustomEventData } from "@/lib/types";
+
+type CustomEventEmailProps = CustomEventData<
+  z.infer<(typeof CUSTOM_EVENTS_SCHEMA)["custom_event"]>
+>;
+
+const CustomEventEmail = ({
+  data: { channel, email, name },
+}: CustomEventEmailProps) => {
+  return (
+    <Layout channel={channel} previewText="Custom event">
+      {() => (
+        <>
+          <Header>Hi {name}!</Header>
+          <Text>This is a custom email event sent by the Mirumee team.</Text>
+        </>
+      )}
+    </Layout>
+  );
+};
+
+const previewProps: CustomEventEmailProps = {
+  data: {
+    name: "Name",
+    email: "user@example.com",
+    channel: "channel-us",
+  },
+};
+
+CustomEventEmail.PreviewProps = previewProps;
+CustomEventEmail.Subject = "Custom event";
+
+export default CustomEventEmail;

src/emails/templates/AccountChangeEmailRequestedEmail.tsx → src/emails/templates/saleor/AccountChangeEmailRequestedEmail.tsx

@@ -5,9 +5,12 @@ import Text from "@/emails/components/Text";
 import { type AccountChangeEmailRequestedSubscription } from "@/graphql/operations/subscriptions/generated";
 import { type EventData } from "@/lib/types";
 
+type AccountChangeEmailRequestedEmailProps =
+  EventData<AccountChangeEmailRequestedSubscription>;
+
 const AccountChangeEmailRequestedEmail = ({
   data,
-}: EventData<AccountChangeEmailRequestedSubscription>) => {
+}: AccountChangeEmailRequestedEmailProps) => {
   return (
     <Layout
       channel={data.channel?.slug}
@@ -34,7 +37,7 @@ const AccountChangeEmailRequestedEmail = ({
   );
 };
 
-const previewProps: EventData<AccountChangeEmailRequestedSubscription> = {
+const previewProps: AccountChangeEmailRequestedEmailProps = {
   data: {
     redirectUrl: "https://example.com",
     user: {

src/emails/templates/AccountConfirmationRequestedEmail.tsx → src/emails/templates/saleor/AccountConfirmationRequestedEmail.tsx

@@ -5,9 +5,12 @@ import Text from "@/emails/components/Text";
 import { type AccountConfirmationRequestedSubscription } from "@/graphql/operations/subscriptions/generated";
 import { type EventData } from "@/lib/types";
 
+type AccountConfirmationRequestedEmailProps =
+  EventData<AccountConfirmationRequestedSubscription>;
+
 const AccountConfirmationRequestedEmail = ({
   data,
-}: EventData<AccountConfirmationRequestedSubscription>) => {
+}: AccountConfirmationRequestedEmailProps) => {
   return (
     <Layout
       channel={data.channel?.slug}
@@ -33,7 +36,7 @@ const AccountConfirmationRequestedEmail = ({
   );
 };
 
-const previewProps: EventData<AccountConfirmationRequestedSubscription> = {
+const previewProps: AccountConfirmationRequestedEmailProps = {
   data: {
     redirectUrl: "https://example.com",
     user: {

src/emails/templates/AccountConfirmedEmail.tsx → src/emails/templates/saleor/AccountConfirmedEmail.tsx

@@ -4,9 +4,9 @@ import Text from "@/emails/components/Text";
 import { type AccountConfirmedSubscription } from "@/graphql/operations/subscriptions/generated";
 import { type EventData } from "@/lib/types";
 
-const AccountConfirmedEmail = ({
-  data,
-}: EventData<AccountConfirmedSubscription>) => {
+type AccountConfirmedEmailProps = EventData<AccountConfirmedSubscription>;
+
+const AccountConfirmedEmail = ({ data }: AccountConfirmedEmailProps) => {
   return (
     <Layout channel={data.channel?.slug} previewText="Account confirmed">
       {() => (
@@ -24,7 +24,7 @@ const AccountConfirmedEmail = ({
   );
 };
 
-const previewProps: EventData<AccountConfirmedSubscription> = {
+const previewProps: AccountConfirmedEmailProps = {
   data: {
     user: {
       email: "user@example.com",

src/emails/templates/AccountDeleteRequestedEmail.tsx → src/emails/templates/saleor/AccountDeleteRequestedEmail.tsx

@@ -5,9 +5,12 @@ import Text from "@/emails/components/Text";
 import { type AccountDeleteRequestedSubscription } from "@/graphql/operations/subscriptions/generated";
 import { type EventData } from "@/lib/types";
 
+type AccountDeleteRequestedEmailProps =
+  EventData<AccountDeleteRequestedSubscription>;
+
 const AccountDeleteRequestedEmail = ({
   data,
-}: EventData<AccountDeleteRequestedSubscription>) => {
+}: AccountDeleteRequestedEmailProps) => {
   return (
     <Layout channel={data.channel?.slug} previewText="Account delete requested">
       {() => (
@@ -29,7 +32,7 @@ const AccountDeleteRequestedEmail = ({
   );
 };
 
-const previewProps: EventData<AccountDeleteRequestedSubscription> = {
+const previewProps: AccountDeleteRequestedEmailProps = {
   data: {
     redirectUrl: "https://example.com",
     user: {

src/emails/templates/AccountDeletedEmail.tsx → src/emails/templates/saleor/AccountDeletedEmail.tsx

@@ -4,9 +4,9 @@ import Text from "@/emails/components/Text";
 import { type AccountDeletedSubscription } from "@/graphql/operations/subscriptions/generated";
 import { type EventData } from "@/lib/types";
 
-const AccountDeletedEmail = ({
-  data,
-}: EventData<AccountDeletedSubscription>) => {
+type AccountDeletedEmailProps = EventData<AccountDeletedSubscription>;
+
+const AccountDeletedEmail = ({ data }: AccountDeletedEmailProps) => {
   return (
     <Layout channel={data.channel?.slug} previewText="Account Deleted">
       {() => (
@@ -27,7 +27,7 @@ const AccountDeletedEmail = ({
   );
 };
 
-const previewProps: EventData<AccountDeletedSubscription> = {
+const previewProps: AccountDeletedEmailProps = {
   data: {
     user: {
       email: "user@example.com",

src/emails/templates/AccountEmailChangedEmail.tsx → src/emails/templates/saleor/AccountEmailChangedEmail.tsx

@@ -4,9 +4,9 @@ import Text from "@/emails/components/Text";
 import { type AccountEmailChangedSubscription } from "@/graphql/operations/subscriptions/generated";
 import { type EventData } from "@/lib/types";
 
-const AccountEmailChangedEmail = ({
-  data,
-}: EventData<AccountEmailChangedSubscription>) => {
+type AccountEmailChangedEmailProps = EventData<AccountEmailChangedSubscription>;
+
+const AccountEmailChangedEmail = ({ data }: AccountEmailChangedEmailProps) => {
   return (
     <Layout channel={data.channel?.slug} previewText="Account email changed">
       {() => (
@@ -19,7 +19,7 @@ const AccountEmailChangedEmail = ({
   );
 };
 
-const previewProps: EventData<AccountEmailChangedSubscription> = {
+const previewProps: AccountEmailChangedEmailProps = {
   data: {
     user: {
       email: "user@example.com",

src/emails/templates/AccountSetPasswordRequestedEmail.tsx → src/emails/templates/saleor/AccountSetPasswordRequestedEmail.tsx

@@ -1,14 +1,16 @@
+import Header from "@/emails/components/Header";
 import Layout from "@/emails/components/Layout";
 import Link from "@/emails/components/Link";
 import Text from "@/emails/components/Text";
 import { type AccountSetPasswordRequestedSubscription } from "@/graphql/operations/subscriptions/generated";
 import { type EventData } from "@/lib/types";
 
-import Header from "../components/Header";
+type AccountSetPasswordRequestedEmailProps =
+  EventData<AccountSetPasswordRequestedSubscription>;
 
 const AccountSetPasswordRequestedEmail = ({
   data,
-}: EventData<AccountSetPasswordRequestedSubscription>) => {
+}: AccountSetPasswordRequestedEmailProps) => {
   return (
     <Layout
       channel={data.channel?.slug}
@@ -34,7 +36,7 @@ const AccountSetPasswordRequestedEmail = ({
   );
 };
 
-const previewProps: EventData<AccountSetPasswordRequestedSubscription> = {
+const previewProps: AccountSetPasswordRequestedEmailProps = {
   data: {
     redirectUrl: "https://example.com",
     user: {

src/emails/templates/FulfillmentCreatedEmail.tsx → src/emails/templates/saleor/FulfillmentCreatedEmail.tsx

@@ -10,9 +10,9 @@ import { type FulfillmentCreatedSubscription } from "@/graphql/operations/subscr
 import { orderLineToLine } from "@/lib/saleor/utils";
 import { type EventData } from "@/lib/types";
 
-const FulfillmentCreatedEmail = ({
-  data,
-}: EventData<FulfillmentCreatedSubscription>) => {
+type FulfillmentCreatedEmailProps = EventData<FulfillmentCreatedSubscription>;
+
+const FulfillmentCreatedEmail = ({ data }: FulfillmentCreatedEmailProps) => {
   const order = data!.order!;
 
   return (
@@ -67,7 +67,7 @@ const FulfillmentCreatedEmail = ({
   );
 };
 
-const previewProps: EventData<FulfillmentCreatedSubscription> = {
+const previewProps: FulfillmentCreatedEmailProps = {
   data: {
     order: {
       number: "941",

src/emails/templates/FulfillmentTrackingNumberUpdatedEmail.tsx → src/emails/templates/saleor/FulfillmentTrackingNumberUpdatedEmail.tsx

@@ -12,9 +12,12 @@ import { orderLineToLine } from "@/lib/saleor/utils";
 import { type EventData } from "@/lib/types";
 import { isURL } from "@/lib/utils";
 
+type FulfillmentTrackingNumberUpdatedEmailProps =
+  EventData<FulfillmentTrackingNumberUpdatedSubscription>;
+
 const FulfillmentTrackingNumberUpdatedEmail = ({
   data,
-}: EventData<FulfillmentTrackingNumberUpdatedSubscription>) => {
+}: FulfillmentTrackingNumberUpdatedEmailProps) => {
   const order = data!.order!;
 
   return (
@@ -81,7 +84,7 @@ const FulfillmentTrackingNumberUpdatedEmail = ({
   );
 };
 
-const previewProps: EventData<FulfillmentTrackingNumberUpdatedSubscription> = {
+const previewProps: FulfillmentTrackingNumberUpdatedEmailProps = {
   data: {
     order: {
       number: "941",

src/emails/templates/GiftCardSentEmail.tsx → src/emails/templates/saleor/GiftCardSentEmail.tsx

@@ -7,7 +7,9 @@ import Text from "@/emails/components/Text";
 import { type GiftCardSentSubscription } from "@/graphql/operations/subscriptions/generated";
 import { type EventData } from "@/lib/types";
 
-const GiftCardSentEmail = ({ data }: EventData<GiftCardSentSubscription>) => {
+type GiftCardSentEmailProps = EventData<GiftCardSentSubscription>;
+
+const GiftCardSentEmail = ({ data }: GiftCardSentEmailProps) => {
   return (
     <Layout channel={data.channel} previewText="Gift card sent">
       {() => (
@@ -28,7 +30,7 @@ const GiftCardSentEmail = ({ data }: EventData<GiftCardSentSubscription>) => {
   );
 };
 
-const previewProps: EventData<GiftCardSentSubscription> = {
+const previewProps: GiftCardSentEmailProps = {
   data: {
     sentToEmail: "user@example.com",
     channel: "channel-us",

src/emails/templates/OrderCancelledEmail.tsx → src/emails/templates/saleor/OrderCancelledEmail.tsx

@@ -4,9 +4,9 @@ import Text from "@/emails/components/Text";
 import { type OrderCancelledSubscription } from "@/graphql/operations/subscriptions/generated";
 import { type EventData } from "@/lib/types";
 
-const OrderCancelledEmail = ({
-  data,
-}: EventData<OrderCancelledSubscription>) => {
+type OrderCancelledEmailProps = EventData<OrderCancelledSubscription>;
+
+const OrderCancelledEmail = ({ data }: OrderCancelledEmailProps) => {
   const order = data!.order!;
 
   return (
@@ -28,7 +28,7 @@ const OrderCancelledEmail = ({
   );
 };
 
-const previewProps: EventData<OrderCancelledSubscription> = {
+const previewProps: OrderCancelledEmailProps = {
   data: {
     order: {
       channel: {

src/emails/templates/OrderCreatedEmail.tsx → src/emails/templates/saleor/OrderCreatedEmail.tsx

@@ -8,7 +8,9 @@ import { type OrderCreatedSubscription } from "@/graphql/operations/subscription
 import { orderLineToLine } from "@/lib/saleor/utils";
 import { type EventData } from "@/lib/types";
 
-const OrderCreatedEmail = ({ data }: EventData<OrderCreatedSubscription>) => {
+type OrderCreatedEmailProps = EventData<OrderCreatedSubscription>;
+
+const OrderCreatedEmail = ({ data }: OrderCreatedEmailProps) => {
   const order = data.order!;
 
   return (
@@ -62,7 +64,7 @@ const OrderCreatedEmail = ({ data }: EventData<OrderCreatedSubscription>) => {
   );
 };
 
-const previewProps: EventData<OrderCreatedSubscription> = {
+const previewProps: OrderCreatedEmailProps = {
   data: {
     order: {
       number: "939",

src/emails/templates/OrderRefundedEmail.tsx → src/emails/templates/saleor/OrderRefundedEmail.tsx

@@ -8,7 +8,9 @@ import { type OrderRefundedSubscription } from "@/graphql/operations/subscriptio
 import { orderLineToLine } from "@/lib/saleor/utils";
 import { type EventData } from "@/lib/types";
 
-const OrderRefundedEmail = ({ data }: EventData<OrderRefundedSubscription>) => {
+type OrderRefundedEmailProps = EventData<OrderRefundedSubscription>;
+
+const OrderRefundedEmail = ({ data }: OrderRefundedEmailProps) => {
   const order = data!.order!;
 
   return (
@@ -60,7 +62,7 @@ const OrderRefundedEmail = ({ data }: EventData<OrderRefundedSubscription>) => {
   );
 };
 
-const previewProps: EventData<OrderRefundedSubscription> = {
+const previewProps: OrderRefundedEmailProps = {
   data: {
     order: {
       number: "939",