fix(dashboard): improvements to notifications templates

apps/dashboard/src/modals/add-notification-rule.tsx

@@ -164,7 +164,48 @@ export default function AddNotificationRule({ rule }: Props) {
 
         <WithLabel
           label="Template"
-          info="Customize your notification. Exisiting variables: $EVENT_NAME, $RULE_NAME"
+          info={
+            <div className="text-base leading-normal max-w-sm p-2 prose text-left text-white [&_code]:text-white">
+              <p>
+                Customize your notification message. You can grab any property
+                from your event.
+              </p>
+
+              <ul>
+                <li>
+                  <code>{'{{name}}'}</code> - The name of the event
+                </li>
+                <li>
+                  <code>{'{{rule_name}}'}</code> - The name of the rule
+                </li>
+                <li>
+                  <code>{'{{properties.your.property}}'}</code> - Get the value
+                  of a custom property
+                </li>
+                <li>
+                  <div className="flex gap-x-2 flex-wrap">
+                    And many more...
+                    <code>profileId</code>
+                    <code>createdAt</code>
+                    <code>country</code>
+                    <code>city</code>
+                    <code>os</code>
+                    <code>osVersion</code>
+                    <code>browser</code>
+                    <code>browserVersion</code>
+                    <code>device</code>
+                    <code>brand</code>
+                    <code>model</code>
+                    <code>path</code>
+                    <code>origin</code>
+                    <code>referrer</code>
+                    <code>referrerName</code>
+                    <code>referrerType</code>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          }
         >
           <Textarea
             {...form.register('template')}