Custom properties in liquid template.

notifo-io · Jun 13, 2024 · 86cfa08 · 86cfa08
1 parent 534ec69
commit 86cfa08
Show file tree

Hide file tree

Showing 9 changed files with 236 additions and 29 deletions.
diff --git a/backend/src/Notifo.Domain/Liquid/LiquidChildNotification.cs b/backend/src/Notifo.Domain/Liquid/LiquidChildNotification.cs
@@ -16,7 +16,7 @@ public LiquidChildNotification(
         string imagePresetSmall,
         string imagePresetLarge,
         IImageFormatter imageFormatter)
-        : base(childNotification.Formatting, imagePresetSmall, imagePresetLarge, imageFormatter)
+        : base(childNotification.Formatting, childNotification.Properties, imagePresetSmall, imagePresetLarge, imageFormatter)
     {
     }
 }
diff --git a/backend/src/Notifo.Domain/Liquid/LiquidContext.cs b/backend/src/Notifo.Domain/Liquid/LiquidContext.cs
@@ -57,15 +57,15 @@ public static LiquidContext Create(IEnumerable<(BaseUserNotification Notificatio
             {
                 foreach (var (key, value) in jobProperties)
                 {
-                    context.SetValue($"notification.custom.{key}", value);
+                    context.SetValue($"notification.properties.{key}", value);
                 }
             }
         }
 
         context.SetValue("app", new LiquidApp(app));
-        context.SetValue("user", new LiquidUser(user));
         context.SetValue("notification", notifications[0]);
         context.SetValue("notifications", notifications);
+        context.SetValue("user", new LiquidUser(user));
 
         return context;
     }

diff --git a/backend/src/Notifo.Domain/Liquid/LiquidNotification.cs b/backend/src/Notifo.Domain/Liquid/LiquidNotification.cs
@@ -63,7 +63,7 @@ public LiquidNotification(
         string imagePresetSmall,
         string imagePresetLarge,
         IImageFormatter imageFormatter)
-        : base(notification.Formatting, imagePresetSmall, imagePresetLarge, imageFormatter)
+        : base(notification.Formatting, notification.Properties, imagePresetSmall, imagePresetLarge, imageFormatter)
     {
         this.notification = notification;
         this.channel = channel;

diff --git a/backend/src/Notifo.Domain/Liquid/LiquidNotificationBase.cs b/backend/src/Notifo.Domain/Liquid/LiquidNotificationBase.cs
@@ -16,6 +16,7 @@ public abstract class LiquidNotificationBase
     private readonly IImageFormatter imageFormatter;
     private readonly string imagePresetSmall;
     private readonly string imagePresetLarge;
+    private NotificationProperties? properties;
     private string? imageLarge;
     private string? imageSmall;
 
@@ -37,16 +38,23 @@ public string? ImageLarge
         get => imageLarge ??= imageFormatter.AddPreset(formatting.ImageSmall, imagePresetLarge);
     }
 
+    public Dictionary<string, string> Properties
+    {
+        get => properties ??= [];
+    }
+
     protected LiquidNotificationBase(
         NotificationFormatting<string> formatting,
+        NotificationProperties? properties,
         string imagePresetSmall,
         string imagePresetLarge,
         IImageFormatter imageFormatter)
     {
+        this.formatting = formatting;
         this.imageFormatter = imageFormatter;
         this.imagePresetSmall = imagePresetSmall;
         this.imagePresetLarge = imagePresetLarge;
-        this.formatting = formatting;
+        this.properties = properties;
     }
 
     protected static void DescribeBase(LiquidProperties properties)

diff --git a/backend/tests/Notifo.Domain.Tests/Channels/Email/CustomHtml.liquid.mjml b/backend/tests/Notifo.Domain.Tests/Channels/Email/CustomHtml.liquid.mjml
@@ -0,0 +1,94 @@
+<mjml>
+	<mj-body>
+		<mj-section>
+			<mj-column width="30%">
+				<mj-image align="left" alt="Logo" src="https://raw.githubusercontent.com/notifo-io/notifo/main/backend/src/Notifo/wwwroot/acme.png" padding="15px" />
+			</mj-column>
+		</mj-section>
+		<mj-section>
+			<mj-column>
+				<mj-text font-size="20px" font-family="Open Sans" padding-left="15px" padding-bottom="0">Your Notifications</mj-text>
+			</mj-column>
+		</mj-section>
+		<mj-wrapper background-color="white" padding="15px">
+			<mj-section padding="0 0 10px 0">
+				<mj-column>
+					<mj-text font-family="Open Sans" font-size="16px" padding-left="0">Hello {{ user.fullname | default: 'User' }}</mj-text>
+					<mj-text font-family="Open Sans" font-size="14px" padding-left="0" padding-bottom="0">We have some notifications from {{ app.name }} for you.</mj-text>
+				</mj-column>
+			</mj-section>
+
+			{% for notification in notifications %}
+			{% if notification.imageSmall %}
+			{% assign width = "84%" %}
+			{% else %}
+			{% assign width = "100%" %}
+			{% endif %}
+			<mj-section padding="10px 0 0 0">
+				<mj-group>
+					<mj-column width="{{ width }}">
+						<mj-text font-family="Open Sans" font-size="16px" font-weight="bold" padding="0px 10px 10px 0px">{{ notification.subject }}</mj-text>
+						{% if notification.body %}
+						<mj-text font-family="Open Sans" font-size="14px" padding="0px 0px 5px 0px">{{ notification.body }}</mj-text>
+						{% endif %}
+						{% if notification.children.size > 0 %}
+						<mj-text font-family="Open Sans" font-size="14px" padding="0px 0px 5px 0px">+ {{ notification.children.size }} more</mj-text>
+						{% endif %}
+						{% if notification.linkUrl and notification.linkText %}
+						<mj-text font-family="Open Sans" font-size="14px" padding="10px 0px 5px 0px">
+							<a href="{{ notification.linkUrl }}">{{ notification.linkText }}</a>
+						</mj-text>
+						{% endif %}
+
+						<mj-text font-family="Open Sans" font-size="14px" padding="10px 0px 5px 0px">
+							{{ notification.properties.myProperty1 }}
+						</mj-text>
+					</mj-column>
+					{% if notification.imageSmall %}
+					<mj-column width="16%">
+						<mj-image src="{{ notification.imageSmall }}" padding="0px 10px 0px 0px" />
+					</mj-column>
+					{% endif %}
+				</mj-group>
+			</mj-section>
+			{% if notification.confirmUrl and notification.confirmText %}
+			<mj-section padding-top="6px">
+				<mj-column>
+					<mj-button align="left" background-color="#175DA8" border-radius="4px" font-family="Open Sans" font-size="16px" padding="0px" href="{{ notification.confirmUrl }}">{{ notification.confirmText }}</mj-button>
+				</mj-column>
+			</mj-section>
+			{% endif %}
+			<mj-section padding="0">
+				<mj-column>
+					<mj-divider padding="5px" border-color="#ddd" border-width="1px" />
+				</mj-column>
+			</mj-section>
+			{% endfor %}
+
+			<mj-section padding="0">
+				<mj-column>
+					<mj-text font-family="Open Sans" font-size="14px" padding-left="0">Best regards,</mj-text>
+					<mj-text font-family="Open Sans" font-size="14px" padding-left="0">Your {{ app.name }} team.</mj-text>
+				</mj-column>
+			</mj-section>
+		</mj-wrapper>
+		<mj-section>
+			<mj-column>
+				<mj-social font-family="Open Sans" font-size="15px" icon-size="20px" mode="horizontal">
+					<mj-social-element name="facebook" href="https://notifo.io/">Facebook</mj-social-element>
+					<mj-social-element name="google" href="https://notifo.io/">Google</mj-social-element>
+					<mj-social-element name="twitter" href="https://notifo.io/">Twitter</mj-social-element>
+				</mj-social>
+			</mj-column>
+		</mj-section>
+		<mj-section padding-top="10px">
+			<mj-column>
+				<mj-text font-family="Open Sans" font-size="12px" padding="4px" align="center" text-decoration="underline">
+					<a style="color: inherit" href="{{ preferencesUrl }}">Email Preferences</a>
+				</mj-text>
+				<mj-text font-family="Open Sans" font-size="12px" padding="4px" align="center">Acme Corporation, Inc.</mj-text>
+				<mj-text font-family="Open Sans" font-size="12px" padding="4px" align="center">New York City, United Stated</mj-text>
+			</mj-column>
+		</mj-section>
+	</mj-body>
+</mjml>
diff --git a/backend/tests/Notifo.Domain.Tests/Channels/Email/CustomSubject.text b/backend/tests/Notifo.Domain.Tests/Channels/Email/CustomSubject.text
@@ -0,0 +1 @@
+Your notifications from {{ app.name }}
diff --git a/backend/tests/Notifo.Domain.Tests/Channels/Email/CustomText.liquid.text b/backend/tests/Notifo.Domain.Tests/Channels/Email/CustomText.liquid.text
@@ -0,0 +1,31 @@
+Your Notifications,
+
+Hello {{ user.displayName | default: 'User' }}
+
+We have some notifications from {{ app.name }} for you.
+
+{% for notification in notifications %} 
+{{ notification.subject }}
+{% if notification.body %}
+{{ notification.body }}
+{% endif %}
+Custom: {{ notification.properties.myProperty1 }}
+{% if notification.confirmUrl and notification.confirmText  -%}
+...
+Click this link to confirm this notification: {{ notification.confirmUrl }}
+{% endif -%}
+{% if notification.linkText  and notification.linkUrl  -%}
+...
+{{ notification.linkUrl }} | {{ notification.linkText }}
+{% endif -%}
+{% if notification.children.size > 0 %}
+    + { notification.children.size } more
+{% endif %}
+--
+{% endfor -%}
+
+Best regards,
+
+Your {{ app.name }} team.
+
+Use the following link to change your email preferences: {{ preferencesUrl }}