feat: add step filter docs

docs/docs/platform/step-filter.md

@@ -0,0 +1,130 @@
+---
+sidebar_position: 9
+---
+
+# Step Filter
+
+Workflow step filtering allows you to customize the flow of notifications in your
+workflow by specifying criteria for which notifications should be delivered. You can use this
+filter to ensure that only relevant notifications are sent to your subscribers,
+improving the efficiency and effectiveness of your communication.
+
+## On Filter
+
+- Filter notifications based on the 'payload' field: You can specify a list of keywords or
+  values that the 'payload' field must match in order for the notification to be delivered.
+  This is useful if you only want to receive notifications that contain certain information.
+
+- Filter notifications based on the 'subscriber' data: You can specify which subscribers
+  or subscriber should receive the notification. This allows you to send notifications
+  to specific individuals or groups rather than all subscribers.
+
+- Filter notifications based on the 'webhook' field: You can use this feature to provide
+  information about subscribers from a specific webhook and use that information to filter
+  the notification flow. For example, if your webhook returns a field indicating whether
+  a subscriber is currently online, you can use this field to send notifications only to
+  online subscribers.
+
+### Steps to set filter
+
+1. Create a step in your notification workflow. This step will be the location where
+   you will apply your filter.
+
+2. Add a filter to the step. This will allow you to specify the criteria that must be
+   met for the notification to be delivered.
+
+   <div align="center">
+     <a href="https://novu.co" target="_blank">
+     <picture>
+       <source media="(prefers-color-scheme: dark)" srcset="/img/platform/filter/dark-filter-section.png"/>
+       <img src="/img/platform/filter/light-filter-section.png" width="1280" alt="Logo"/>
+     </picture>
+     </a>
+   </div>
+
+3. If you want to add multiple filters, you will need to choose a logical condition
+   of AND or OR (1). This will determine how the filters are applied to the notification.
+   For example, if you choose AND, the notification will only be delivered if all of the
+   filters are met. If you choose OR, the notification will be delivered if any of the
+   filters are met.
+
+4. Add a rule to the filter (2). This will specify the criteria that must be met for the
+   notification to be delivered. You can use the 'payload', 'subscriber', or 'webhook' field
+   as the basis for your rule. For example, you might specify that the 'payload' field must
+   contain a certain keyword or that the 'sbscriber' must be in a specific group.
+
+> If only one rule is provided, a logical condition of AND or OR is not mandatory.
+
+<div align="center">
+  <a href="https://novu.co" target="_blank">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="/img/platform/filter/dark-add-filter-section.png"/>
+    <img src="/img/platform/filter/light-add-filter-section.png" width="680" alt="Logo"/>
+  </picture>
+  </a>
+</div>
+
+A rule is composed of the following elements:
+
+- On field: This specifies which field the rule should be applied to, such as 'payload',
+  'subscriber', or 'webhook' response.
+
+- Key field: This specifies the object key that the rule should be applied to. For example,
+  if the 'On' field is 'subscriber', the 'Key' field might be 'name', 'email', etc.
+
+- Operator field: This specifies the comparison operator to use when evaluating the rule.
+  Options include 'Equal', 'Not equal', 'Larger', 'Smaller', 'Larger or equal', 'Smaller or equal',
+  'Contains', and 'Not contains'.
+
+- Value field: This specifies the value to compare to the object
+  key value using the selected operator.
+
+Example: In this filter rule, the notification will only be delivered if the
+webhook response includes a field called 'isOnline' that is set to 'true'.
+
+<div align="center">
+  <a href="https://novu.co" target="_blank">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="/img/platform/filter/dark-webhook-rule-example.png"/>
+    <img src="/img/platform/filter/light-webhook-rule-example.png" width="680" alt="Logo"/>
+  </picture>
+  </a>
+</div>
+
+## Filtering with Webhook
+
+To filter notifications based on a webhook response, you will need to create a webhook
+that accepts POST requests and returns a one-level object. The webhook should be set up
+to receive object the following parameters:
+
+- subscriber - subscriberEntity: This is an object containing information about the subscriber that
+  the notification is being sent to.
+- payload - 'triggerPayload': This is an object containing the payload of the trigger that initiated
+  the notification.
+- identifier - notification template identifier is a unique identifier for the notification
+  template being used.
+- hmac : This is a security measure that ensures that the request is coming from Novu.
+
+To verify the authenticity of the request, you can use the following code:
+
+```javascript
+import { createHmac } from 'crypto';
+
+const hmacHash = createHmac('sha256', process.env.NOVU_API_KEY).update(enviromentId).digest('hex');
+
+if (hmacHash === hmac) {
+  // The request is authentic
+} else {
+  // The request may not be authentic
+}
+```
+
+> enviromentId - can be accessed in the webhook subscriber parameter in the request body.
+
+[](ignored)
+
+> novu_api_key - can be found in the settings section of the Novu client.
+
+The webhook should return a one-level object containing any information that you want to use
+to filter the notification flow. For example, you might include a field called 'isOnline' that
+indicates whether the subscriber is currently online.

docs/docs/platform/webhooks.md

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 9
+sidebar_position: 10
 ---
 
 # Webhooks