feat(dashboard): Implement email step editor & small preview #7129

desiprisg · 2024-11-26T06:40:06Z

What changed? Why was the change needed?

Enable adding an email step
Add the editor and preview tabs on the configure email template page
Add the email editor and subject input on the editor tab

Screenshots

Expand for optional sections

Related enterprise PR

Special notes for your reviewer

linear · 2024-11-26T06:40:09Z

NV-4587 Implement Email template editor

netlify · 2024-11-26T06:40:26Z

✅ Deploy Preview for novu-stg-vite-dashboard-poc ready!

Name	Link
🔨 Latest commit	`169d08d`
🔍 Latest deploy log	https://app.netlify.com/sites/novu-stg-vite-dashboard-poc/deploys/6745d27c9f18100008dbdee1
😎 Deploy Preview	https://deploy-preview-7129--novu-stg-vite-dashboard-poc.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

pkg-pr-new · 2024-11-26T11:41:41Z

Open in Stackblitz

@novu/client

npm i https://pkg.pr.new/novuhq/novu/@novu/client@7129

@novu/framework

npm i https://pkg.pr.new/novuhq/novu/@novu/framework@7129

@novu/headless

npm i https://pkg.pr.new/novuhq/novu/@novu/headless@7129

@novu/js

npm i https://pkg.pr.new/novuhq/novu/@novu/js@7129

@novu/nextjs

npm i https://pkg.pr.new/novuhq/novu/@novu/nextjs@7129

@novu/nest

npm i https://pkg.pr.new/novuhq/novu/@novu/nest@7129

@novu/node

npm i https://pkg.pr.new/novuhq/novu/@novu/node@7129

@novu/notification-center

npm i https://pkg.pr.new/novuhq/novu/@novu/notification-center@7129

novu

npm i https://pkg.pr.new/novuhq/novu@7129

@novu/providers

npm i https://pkg.pr.new/novuhq/novu/@novu/providers@7129

@novu/react

npm i https://pkg.pr.new/novuhq/novu/@novu/react@7129

@novu/react-native

npm i https://pkg.pr.new/novuhq/novu/@novu/react-native@7129

@novu/shared

npm i https://pkg.pr.new/novuhq/novu/@novu/shared@7129

@novu/stateless

npm i https://pkg.pr.new/novuhq/novu/@novu/stateless@7129

commit: 5ae22fe

apps/dashboard/.env.example

SokratisVidros · 2024-12-05T10:49:41Z

apps/dashboard/src/components/workflow-editor/add-step-menu.tsx

@@ -73,6 +75,7 @@ export const AddStepMenu = ({
  onMenuItemClick: (stepType: StepTypeEnum) => void;
 }) => {
  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+  const areNewStepsEnabled = useFeatureFlag(FeatureFlagsKeysEnum.IS_ND_DELAY_DIGEST_EMAIL_ENABLED);


Lol, the feature flag name is a bit off, but it's OK.

this was already on ld

SokratisVidros · 2024-12-05T10:50:25Z

apps/dashboard/src/components/workflow-editor/steps/component-utils.tsx

@@ -23,6 +25,12 @@ export const getComponentByType = ({ component }: { component?: UiComponentEnum
    case UiComponentEnum.URL_TEXT_BOX: {
      return <InAppRedirect />;
    }
+    case UiComponentEnum.MAILY: {


@desiprisg consider aligning the naming on this one. All other components are based on the step type field, not on the implementation of the built-in ui or the underlying library.

Suggested change

case UiComponentEnum.MAILY: {

case UiComponentEnum.EMAIL_BODY: {

SokratisVidros · 2024-12-05T10:52:07Z

apps/dashboard/src/components/workflow-editor/steps/email/configure-email-step-preview.tsx

+import { cn } from '@/utils/ui';
+
+type SmallEmailPreviewProps = HTMLAttributes<HTMLDivElement>;
+const SmallEmailPreview = (props: SmallEmailPreviewProps) => {


If not mistaken we call this Mini preview.

Suggested change

const SmallEmailPreview = (props: SmallEmailPreviewProps) => {

const MiniEmailPreview = (props: SmallEmailPreviewProps) => {

SokratisVidros · 2024-12-05T10:52:37Z

apps/dashboard/src/components/workflow-editor/steps/email/email-editor-preview.tsx

+      <div className="relative flex flex-col gap-3">
+        <div className="flex items-center gap-2.5 text-sm font-medium">
+          <Notification5Fill className="size-3" />
+          In-app template editor


Suggested change

In-app template editor

Email template editor

not the current ticket

SokratisVidros · 2024-12-05T10:53:37Z

apps/dashboard/src/components/workflow-editor/steps/email/maily.tsx

+const bodyKey = 'emailEditor';
+
+type MailyProps = HTMLAttributes<HTMLDivElement>;
+export const Maily = (props: MailyProps) => {


Suggested change

export const Maily = (props: MailyProps) => {

export const Editor = (props: EditorProps) => {

SokratisVidros · 2024-12-05T10:53:43Z

apps/dashboard/src/components/workflow-editor/steps/email/maily.tsx

+
+const bodyKey = 'emailEditor';
+
+type MailyProps = HTMLAttributes<HTMLDivElement>;


Suggested change

type MailyProps = HTMLAttributes<HTMLDivElement>;

type EditorProps = HTMLAttributes<HTMLDivElement>;

desiprisg self-assigned this Nov 26, 2024

desiprisg temporarily deployed to Linting November 26, 2024 06:40 — with GitHub Actions Inactive

desiprisg force-pushed the nv-4587-implement-email-template-editor branch from 2d14cb6 to b992bd5 Compare November 26, 2024 11:33

desiprisg temporarily deployed to Linting November 26, 2024 11:34 — with GitHub Actions Inactive

desiprisg force-pushed the nv-4587-implement-email-template-editor branch from b992bd5 to e54eeac Compare November 26, 2024 12:09

desiprisg temporarily deployed to Linting November 26, 2024 12:09 — with GitHub Actions Inactive

desiprisg force-pushed the nv-4587-implement-email-template-editor branch from e54eeac to bffeae2 Compare November 26, 2024 12:27

desiprisg temporarily deployed to Linting November 26, 2024 12:27 — with GitHub Actions Inactive

desiprisg force-pushed the nv-4587-implement-email-template-editor branch from bffeae2 to 169d08d Compare November 26, 2024 13:51

desiprisg temporarily deployed to Linting November 26, 2024 13:52 — with GitHub Actions Inactive

desiprisg marked this pull request as ready for review November 26, 2024 14:28

desiprisg requested review from SokratisVidros, LetItRock and BiswaViraj November 26, 2024 15:37

BiswaViraj reviewed Nov 27, 2024

View reviewed changes

apps/dashboard/.env.example Outdated Show resolved Hide resolved

desiprisg force-pushed the nv-4587-implement-email-template-editor branch from 169d08d to 4f2f506 Compare December 4, 2024 06:57

github-actions bot added the @novu/web label Dec 4, 2024

desiprisg temporarily deployed to Linting December 5, 2024 08:40 — with GitHub Actions Inactive

desiprisg changed the title ~~feat(dashboard): Implement email step editor~~ feat(dashboard): Implement email step editor & small preview Dec 5, 2024

desiprisg force-pushed the nv-4587-implement-email-template-editor branch 3 times, most recently from af95efa to 61c3404 Compare December 5, 2024 10:03

desiprisg temporarily deployed to Linting December 5, 2024 10:03 — with GitHub Actions Inactive

desiprisg force-pushed the nv-4587-implement-email-template-editor branch from 61c3404 to e71d9ef Compare December 5, 2024 10:22

desiprisg temporarily deployed to Linting December 5, 2024 10:22 — with GitHub Actions Inactive

SokratisVidros approved these changes Dec 5, 2024

View reviewed changes

desiprisg force-pushed the nv-4587-implement-email-template-editor branch from e71d9ef to 04459d9 Compare December 5, 2024 11:20

desiprisg temporarily deployed to Linting December 5, 2024 11:20 — with GitHub Actions Inactive

desiprisg force-pushed the nv-4587-implement-email-template-editor branch from 04459d9 to 8320ff2 Compare December 5, 2024 11:34

desiprisg temporarily deployed to Linting December 5, 2024 11:34 — with GitHub Actions Inactive

feat(dashboard): Email step editor and small preview

5ae22fe

desiprisg force-pushed the nv-4587-implement-email-template-editor branch from 8320ff2 to 5ae22fe Compare December 5, 2024 12:12

desiprisg temporarily deployed to Linting December 5, 2024 12:12 — with GitHub Actions Inactive

desiprisg temporarily deployed to Linting December 5, 2024 12:13 — with GitHub Actions Inactive

desiprisg merged commit 2bc56b1 into next Dec 5, 2024
16 of 17 checks passed

desiprisg deleted the nv-4587-implement-email-template-editor branch December 5, 2024 12:13

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(dashboard): Implement email step editor & small preview #7129

feat(dashboard): Implement email step editor & small preview #7129

desiprisg commented Nov 26, 2024 •

edited

Loading

linear bot commented Nov 26, 2024

netlify bot commented Nov 26, 2024 •

edited

Loading

pkg-pr-new bot commented Nov 26, 2024 •

edited

Loading

SokratisVidros Dec 5, 2024

desiprisg Dec 5, 2024

SokratisVidros Dec 5, 2024

SokratisVidros Dec 5, 2024

SokratisVidros Dec 5, 2024

desiprisg Dec 5, 2024

SokratisVidros Dec 5, 2024

SokratisVidros Dec 5, 2024

	case UiComponentEnum.MAILY: {
	case UiComponentEnum.EMAIL_BODY: {

	const SmallEmailPreview = (props: SmallEmailPreviewProps) => {
	const MiniEmailPreview = (props: SmallEmailPreviewProps) => {

	export const Maily = (props: MailyProps) => {
	export const Editor = (props: EditorProps) => {


		const bodyKey = 'emailEditor';

		type MailyProps = HTMLAttributes<HTMLDivElement>;

	type MailyProps = HTMLAttributes<HTMLDivElement>;
	type EditorProps = HTMLAttributes<HTMLDivElement>;

feat(dashboard): Implement email step editor & small preview #7129

feat(dashboard): Implement email step editor & small preview #7129

Conversation

desiprisg commented Nov 26, 2024 • edited Loading

What changed? Why was the change needed?

Screenshots

Related enterprise PR

Special notes for your reviewer

linear bot commented Nov 26, 2024

netlify bot commented Nov 26, 2024 • edited Loading

✅ Deploy Preview for novu-stg-vite-dashboard-poc ready!

pkg-pr-new bot commented Nov 26, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

desiprisg commented Nov 26, 2024 •

edited

Loading

netlify bot commented Nov 26, 2024 •

edited

Loading

pkg-pr-new bot commented Nov 26, 2024 •

edited

Loading