Nv 2996 reusable push preview component #5178

BiswaViraj · 2024-02-12T06:44:56Z

What change does this PR introduce?

Reusable Push preview component
reusable hook to get combined errors
fixes to the overlay blur designs

Why was this change needed?

Other information (Screenshots)

Screen.Recording.2024-02-12.at.12.47.21.PM.mov

linear · 2024-02-12T06:44:58Z

NV-2996 🌐 Reusable Push preview component

BiswaViraj · 2024-02-12T06:45:36Z

apps/api/src/app/content-templates/content-templates.controller.ts

@@ -119,6 +119,7 @@ export class ContentTemplatesController {
  public previewPush(
    @UserSession() user: IJwtPayload,
    @Body('content') content: string,
+    @Body('title') title: string,


Added title parsing support for push previews

BiswaViraj · 2024-02-12T06:55:26Z

apps/web/src/components/workflow/Preview/chat/ChatContent.tsx

-        </Stack>
-      </When>
-    </Group>
+    <ContentAndOVerlayWrapperStyled onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>


Added this to have better blur effect on hover

BiswaViraj · 2024-02-12T06:56:20Z

apps/web/src/components/workflow/Preview/chat/ChatPreview.tsx

@@ -75,14 +76,14 @@ export function ChatPreview() {

  return (
    <div>
-      <div>
+      <Flex>


Forces the LocaleSelect to not take the Full-width of the available space

BiswaViraj · 2024-02-12T07:00:04Z

apps/web/src/components/workflow/Preview/push/Content.tsx

+       * combining title and content to get locales based upon variables in both title and content
+       * The api is not concerned about the content type, it will parse the given string and return the locales
+       */
+      const combinedContent = `${previewData.current.title} ${previewData.current.content}`;
+      getLocalesFromContent({
+        content: combinedContent,
+      });


The API parses any given string and returns the locales of the translation groups variable used in the given string. So it is okay to combine the title and content string into one to pass it to the API.

BiswaViraj · 2024-02-12T07:02:08Z

apps/web/src/components/workflow/Preview/sms/SmsPreview.tsx

+
+  const templateContentError = useStepFormCombinedErrors();


updated it to use the combined errors hooks

BiswaViraj · 2024-02-12T07:07:05Z

apps/web/src/pages/templates/hooks/useStepFormCombinedErrors.ts

Added this hook to get combined errors.
For example, when "content is missing" and "title is missing"
Instead of showing only one of them or both in different lines.
This hook will combine the error to Content and Title are missing. if single error, then it just returns the single error like Content is missing.

We already use this behaviour in our Workflow nodes error. this just adds a reusable hook to get those formatted errors

BiswaViraj · 2024-02-12T07:07:50Z

apps/web/src/pages/templates/shared/errors.ts

+export function mapStepErrors(stepErrors) {
+  if (stepErrors) {
+    const keys = Object.keys(stepErrors);
+
+    return keys.map((key) => stepErrors[key]?.message);
+  }
+
+  return [];
+}
+


moved it into a separate function to use it in the hook

BiswaViraj · 2024-02-12T07:08:18Z

...ages/application-generic/src/usecases/compile-step-template/compile-step-template.usecase.ts

+
+      if (command.title) {
+        title = await this.compileStepTemplate(command.title, payload);
+      }


Handles push title parsing

BiswaViraj · 2024-02-12T07:32:46Z

apps/web/src/components/workflow/preview/chat/ChatContent.tsx

+  };
+
+  return (
+    <ContentAndOVerlayWrapperStyled onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>


Added this to have better blur effect on hover

BiswaViraj · 2024-02-12T07:33:14Z

apps/web/src/components/workflow/preview/chat/ChatPreview.tsx

@@ -75,14 +76,14 @@ export function ChatPreview() {

  return (
    <div>
-      <div>
+      <Flex>


Forces the LocaleSelect to not take the Full-width of the available space

BiswaViraj · 2024-02-12T07:33:40Z

apps/web/src/components/workflow/preview/push/Content.tsx

+      /*
+       * combining title and content to get locales based upon variables in both title and content
+       * The api is not concerned about the content type, it will parse the given string and return the locales
+       */
+      const combinedContent = `${previewData.current.title} ${previewData.current.content}`;
+      getLocalesFromContent({
+        content: combinedContent,
+      });
+    }


The API parses any given string and returns the locales of the translation groups variable used in the given string. So it is okay to combine the title and content string into one to pass it to the API.

BiswaViraj · 2024-02-12T07:33:54Z

apps/web/src/components/workflow/preview/sms/SmsPreview.tsx

@@ -33,7 +34,8 @@ const LocaleSelectStyled = styled(LocaleSelect)`
 export const SmsPreview = () => {
  const { control } = useFormContext<IForm>();
  const path = useStepFormPath();
-  const error = useStepFormErrors();
+
+  const templateContentError = useStepFormCombinedErrors();


updated it to use the combined errors hooks

BiswaViraj · 2024-02-12T07:34:16Z

apps/web/src/pages/templates/hooks/useStepFormCombinedErrors.ts

Added this hook to get combined errors.
For example, when "content is missing" and "title is missing"
Instead of showing only one of them or both in different lines.
This hook will combine the error to Content and Title are missing. if single error, then it just returns the single error like Content is missing.

We already use this behaviour in our Workflow nodes error. this just adds a reusable hook to get those formatted errors

…h-preview-component

LetItRock

hey Biswa, can we please run the images through: https://squoosh.app/ and generate webp instead? we will save a lot in size
https://caniuse.com/?search=webp

apps/web/src/components/workflow/preview/common/phone-simulator/MobileSimulator.tsx

LetItRock · 2024-02-12T23:49:09Z

apps/web/src/components/workflow/preview/push/Content.tsx

+  const path = useStepFormPath();
+  const errorMsg = useStepFormCombinedErrors();
+
+  const [selectedLocale, setSelectedLocale] = useState<string | undefined>(undefined);


please take a look at this hook useTemplateLocales

apps/web/src/components/workflow/preview/push/Content.tsx

apps/web/src/components/workflow/preview/chat/ChatContent.tsx

apps/web/src/components/workflow/preview/push/Content.styles.ts

apps/web/src/components/workflow/preview/push/Content.tsx

…to nv-2996-reusable-push-preview-component

LetItRock

looks good to me! 🔥

…-preview-component

BiswaViraj added 23 commits February 12, 2024 12:14

feat: push preview

35203b7

feat: moved simulator

c4eeb8a

feat: Update subproject commit hash

37aa85e

feat: add title support

0e04cd6

feat: add push preview hook

90b96c3

feat: added push preview support with backgrounds

ee2aaac

feat: add channel props

b83a1c4

refactor: rename folder to lowercase email

356e970

feat: export phone simulator

7bea6e5

feat: update to use simulator and implement locales

f4f377e

feat: limit title to single row

3e67687

feat: hook to get combined errors

fdcffdd

feat: implemented combined error hook

62f8e8a

feat: skeletons

1ba72a7

feat: light theme text and logo

7d956ee

feat: removed old mobile

611feec

refactor: removed unused styles

6d11530

feat: content styles

1fc1cc9

refactor: removed unused imports

27f7afc

feat: overlay for push

665680c

fix: chat blur overlay

cd06a7b

fix: overlay blur on email web preview

6b26ad6

fix: locale select width on chat preview

edfb5f9

github-actions bot added @novu/api @novu/web labels Feb 12, 2024

BiswaViraj added 2 commits February 12, 2024 12:16

fix: inccorect variable name

e28932a

refactor: moved icons to icon folder

dbad0a7

BiswaViraj commented Feb 12, 2024

View reviewed changes

feat: lowercase folder name

27ca69f

BiswaViraj added 3 commits February 12, 2024 12:56

refactor: move files

9167433

refactor: move files back to workflow

c6dbaee

refactor: remove unused file

0a0e999

BiswaViraj commented Feb 12, 2024

View reviewed changes

BiswaViraj requested review from LetItRock and ainouzgali and removed request for LetItRock February 12, 2024 08:14

Merge branch 'nv-2998-reusable-sms-preview' into nv-2996-reusable-pus…

9e96127

…h-preview-component

LetItRock reviewed Feb 13, 2024

View reviewed changes

BiswaViraj added 13 commits February 13, 2024 11:41

feat: update props to withbackground

863ea10

feat: use rems

f3f287e

feat: use rems

3456a3f

feat: skeletons

88700cf

feat: renamed to sms

8b47c66

feat: usepreviewpushtemplate

03890d9

feat: use webp images

55b91fb

refactor: remove unused imports

aadc3e7

fix: merge

f572f2a

refactor: remove empty line

e19d62d

Merge remote-tracking branch 'origin/nv-2998-reusable-sms-preview' in…

a3fb7cc

…to nv-2996-reusable-push-preview-component

fix: margin-top value

a49b3a0

feat: update hook to take content and title as parameters

55b7894

BiswaViraj requested a review from LetItRock February 13, 2024 08:48

chore(web): use the use hover hook

6a1f6e0

LetItRock approved these changes Feb 13, 2024

View reviewed changes

Base automatically changed from nv-2998-reusable-sms-preview to translation-management-beta February 13, 2024 12:48

Merge branch 'translation-management-beta' into nv-2996-reusable-push…

3860091

…-preview-component

LetItRock merged commit 6fecdd7 into translation-management-beta Feb 13, 2024
23 checks passed

LetItRock deleted the nv-2996-reusable-push-preview-component branch February 13, 2024 14:23

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Nv 2996 reusable push preview component #5178

Nv 2996 reusable push preview component #5178

BiswaViraj commented Feb 12, 2024 •

edited

Loading

linear bot commented Feb 12, 2024

BiswaViraj Feb 12, 2024

BiswaViraj Feb 12, 2024

BiswaViraj Feb 12, 2024

BiswaViraj Feb 12, 2024

BiswaViraj Feb 12, 2024

BiswaViraj Feb 12, 2024

BiswaViraj Feb 12, 2024

BiswaViraj Feb 12, 2024

BiswaViraj Feb 12, 2024

BiswaViraj Feb 12, 2024

BiswaViraj Feb 12, 2024

BiswaViraj Feb 12, 2024

BiswaViraj Feb 12, 2024

LetItRock left a comment

LetItRock Feb 12, 2024

LetItRock left a comment

Nv 2996 reusable push preview component #5178

Nv 2996 reusable push preview component #5178

Conversation

BiswaViraj commented Feb 12, 2024 • edited Loading

What change does this PR introduce?

Why was this change needed?

Other information (Screenshots)

linear bot commented Feb 12, 2024

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

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

LetItRock left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

LetItRock left a comment

Choose a reason for hiding this comment

BiswaViraj commented Feb 12, 2024 •

edited

Loading