Merge branch 'main' into next

apps/web/src/components/layout/AppLayout.tsx

@@ -1,4 +1,4 @@
-import { AppShell } from '@mantine/core';
+import { AppShell, useMantineTheme } from '@mantine/core';
 import * as Sentry from '@sentry/react';
 import { Outlet } from 'react-router-dom';
 import { ThemeProvider } from '../../design-system/ThemeProvider';

apps/web/src/components/layout/components/PolishingBanner.tsx

@@ -0,0 +1,76 @@
+import { useMantineTheme } from '@mantine/core';
+import { useSegment } from '../../../hooks/useSegment';
+import { Close } from '../../../design-system/icons/actions/Close';
+import styled from '@emotion/styled';
+import { useLocalStorage } from '@mantine/hooks';
+
+export function PolishingBanner() {
+  const isDark = useMantineTheme().colorScheme === 'dark';
+  const segment = useSegment();
+  const [polishingBannerDismissed, setPolishingBannerDismissed] = useLocalStorage({
+    key: 'polishingBannerDismissed',
+    defaultValue: 'false',
+  });
+  const selfHosted = process.env.REACT_APP_DOCKER_HOSTED_ENV === 'true';
+
+  if (selfHosted || polishingBannerDismissed === 'true') return null;
+
+  function DismissIcon() {
+    function dismissBanner() {
+      segment.track('Polishing Banner Dismiss');
+      setPolishingBannerDismissed('true');
+    }
+
+    return (
+      <CloseWrapper onClick={dismissBanner}>
+        <Close />
+      </CloseWrapper>
+    );
+  }
+
+  return (
+    <div
+      style={{
+        marginBottom: 10,
+        width: '100%',
+        borderRadius: 7,
+        minHeight: 50,
+        backgroundColor: isDark ? '#1E1E26' : 'white',
+        textAlign: 'center',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        position: 'relative',
+      }}
+    >
+      We are polishing! This release is dedicated to bug fixes, UI improvements and performance optimizations.{' '}
+      <a
+        href={'https://novu.co/polishing?utm_source=web&utm_medium=banner&utm_campaign=polishing'}
+        onClick={() => {
+          segment.track('Polishing Banner Clicked');
+        }}
+        target={'_blank'}
+        rel="noreferrer"
+        style={{ textDecoration: 'underline', display: 'inline-block', marginLeft: 5 }}
+      >
+        Learn More.
+      </a>
+      <DismissIcon />
+    </div>
+  );
+}
+
+const CloseWrapper = styled.a`
+  float: right;
+  position: absolute;
+  right: 15px;
+  font-size: 10px;
+  padding: 5px;
+  &:hover {
+    cursor: pointer;
+  }
+
+  svg {
+    width: 13px;
+  }
+`;

docs/docs/community/run-locally.md

@@ -145,9 +145,10 @@ cd apps/web && npm run cypress:open
 ### Different ports used by the services the project spins up
 
 - **3000** - API
-- **3002** - WebSocket service
+- **3002** - WebSocket Service
 - **4200** - Web Management UI
-- **4500** - Iframe embed for notification center
+- **4701** - Iframe embed for notification center
+- **4500** - Widget Service
 
 ### Testing providers
 

docs/docs/platform/inbound-parse-webhook.md

@@ -8,6 +8,10 @@ Inbound Webhook is a feature that allows processing of incoming emails for a dom
 The feature parses the contents of the email and POSTs the information to a specified URL in a
 multipart/form-data format.
 
+:::info
+This feature is available only in our SaaS. This feature will not work in self hosted environment.
+:::
+
 ## To set up Inbound Webhook, follow these steps
 
 1. Set up an MX Record:
@@ -25,4 +29,6 @@ multipart/form-data format.
    - Enable the Inbound Parse feature.
    - Set the Webhook URL to the location where you want the parsed data to be POSTed.
 
-Note: The Webhook URL must be publicly accessible.
+:::note
+The Webhook URL must be publicly accessible.
+:::

docs/docs/platform/templates.md

@@ -138,3 +138,10 @@ await novu.trigger('<REPLACE_WITH_EVENT_NAME_FROM_ADMIN_PANEL>', {
   },
 });
 ```
+
+## FAQ
+
+<details>
+ <summary>How to send dynamic HTML content as value of variable?</summary>
+ Use triple curly braces variable like <code>&#123;&#123;&#123;htmlVariable&#125;&#125;&#125;</code> .
+</details>