Merge pull request novuhq#1115 from venarius/feat/i18n-support-iframe

feat: support custom language for iframe embed widget

.markdownlint.jsonc

@@ -0,0 +1,41 @@
+{
+  // MD013/line-length - Line length
+  "MD013": false,
+
+  // MD024/no-duplicate-heading/no-duplicate-header - Multiple headings with the same content
+  "MD024": {
+    "siblings_only": true
+  },
+
+  // MD032/blanks-around-lists - Lists should be surrounded by blank lines
+  "MD032": false,
+
+  // MD033/no-inline-html - Inline HTML
+  "MD033": false,
+
+  // MD041/first-line-heading/first-line-h1 - First line in a file should be a top-level heading
+  "MD041": false,
+
+  // MD009/no-trailing-spaces - Trailing spaces
+  "MD009": false,
+
+  // MD025/single-title/single-h1 - Multiple top-level headings in the same document
+  "MD025": false,
+
+  // MD014/commands-show-output - Dollar signs used before commands without showing output
+  "MD014": false,
+
+  // MD044/proper-names - Proper names should have the correct capitalization
+  "MD044": {
+    "code_blocks": false,
+    "names": [
+      "Cake.Markdownlint",
+      "CommonMark",
+      "JavaScript",
+      "Markdown",
+      "markdown-it",
+      "markdownlint",
+      "Node.js"
+    ]
+  }
+}

apps/widget/cypress/e2e/branding.spec.ts

@@ -38,8 +38,6 @@ describe('App Branding', function () {
 
 describe('App custom theme', function () {
   beforeEach(function () {
-    cy.intercept('**/widgets/organization').as('organizationSettings');
-
     const theme = {
       light: {
         layout: {
@@ -48,28 +46,32 @@ describe('App custom theme', function () {
       },
     };
 
-    cy.initializeSession({ theme })
-      .as('session')
-      .then((session: any) => {
-        cy.wait(500);
-
-        return cy.task('createNotifications', {
-          identifier: session.templates[0].triggers[0].identifier,
-          token: session.token,
-          subscriberId: session.subscriber.subscriberId,
-          count: 5,
-        });
-      });
+    cy.initializeSession({ theme }).as('session');
   });
 
   it('should have branding applied', function () {
-    cy.wait('@organizationSettings');
-    cy.wait(1000);
-
     cy.getByTestId('layout-wrapper').should(
       'have.css',
       'background',
       'rgb(255, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box'
     );
+    cy.getByTestId('notifications-header-title').should('contain', 'Notifications');
+  });
+});
+
+describe('App custom i18n', function () {
+  beforeEach(function () {
+    const i18n = {
+      lang: 'xyz',
+      translations: {
+        notifications: 'My custom notifications!',
+      },
+    };
+
+    cy.initializeSession({ i18n }).as('session');
+  });
+
+  it('should have custom language applied', function () {
+    cy.getByTestId('notifications-header-title').should('contain', 'My custom notifications!');
   });
 });

apps/widget/cypress/global.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="cypress" />
 
-import { INovuThemeProvider } from '@novu/notification-center';
+import { INovuThemeProvider, ITranslationEntry } from '@novu/notification-center';
 
 declare namespace Cypress {
   interface Chainable {
@@ -32,7 +32,8 @@ declare namespace Cypress {
       session: any,
       shell?: boolean,
       encryptedHmacHash?: string,
-      theme?: INovuThemeProvider
+      theme?: INovuThemeProvider,
+      i18n?: ITranslationEntry
     ): Chainable<Response>;
     /**
      * Logs-in user by using API request
@@ -42,6 +43,7 @@ declare namespace Cypress {
       shell?: boolean;
       hmacEncryption?: boolean;
       theme?: INovuThemeProvider;
+      i18n?: ITranslationEntry;
     }): Chainable<Response>;
 
     logout(): Chainable<Response>;

apps/widget/cypress/support/commands.ts

@@ -82,11 +82,16 @@ Cypress.Commands.add('initializeSession', function (settings = {}) {
               ...session,
               subscriber,
             }))
-        : cy.initializeWidget({ session: session, encryptedHmacHash: encryptedHmacHash, theme: settings.theme });
+        : cy.initializeWidget({
+            session: session,
+            encryptedHmacHash: encryptedHmacHash,
+            theme: settings.theme,
+            i18n: settings.i18n,
+          });
     });
 });
 
-Cypress.Commands.add('initializeWidget', ({ session, encryptedHmacHash, theme }) => {
+Cypress.Commands.add('initializeWidget', ({ session, encryptedHmacHash, theme, i18n }) => {
   const URL = `/${session.environment.identifier}`;
   return cy.visit(URL, { log: false }).then(() =>
     cy
@@ -109,6 +114,7 @@ Cypress.Commands.add('initializeWidget', ({ session, encryptedHmacHash, theme })
                 clientId: session.environment.identifier,
                 data: user,
                 theme,
+                i18n,
               },
             },
           });

apps/widget/src/components/notification-center/NotificationCenterWidget.tsx

@@ -1,4 +1,4 @@
-import { NotificationCenter, NovuProvider } from '@novu/notification-center';
+import { I18NLanguage, NotificationCenter, NovuProvider, ITranslationEntry } from '@novu/notification-center';
 import { INovuThemeProvider } from '@novu/notification-center';
 import { IMessage, IOrganizationEntity, ButtonTypeEnum } from '@novu/shared';
 import { useEffect, useState } from 'react';
@@ -21,6 +21,7 @@ export function NotificationCenterWidget(props: INotificationCenterWidgetProps)
   const [theme, setTheme] = useState<INovuThemeProvider>({});
   const [fontFamily, setFontFamily] = useState<string>('Lato');
   const [frameInitialized, setFrameInitialized] = useState(false);
+  const [i18n, setI18n] = useState<ITranslationEntry>();
 
   useEffect(() => {
     WebFont.load({
@@ -48,6 +49,10 @@ export function NotificationCenterWidget(props: INotificationCenterWidgetProps)
           setTheme(event.data.value.theme);
         }
 
+        if (event.data.value.i18n) {
+          setI18n(event.data.value.i18n);
+        }
+
         setFrameInitialized(true);
       }
     };
@@ -79,6 +84,7 @@ export function NotificationCenterWidget(props: INotificationCenterWidgetProps)
           subscriberId={userDataPayload.subscriberId}
           onLoad={onLoad}
           subscriberHash={userDataPayload.subscriberHash}
+          i18n={i18n}
         >
           <NotificationCenter
             colorScheme="light"

docs/.markdownlint.jsonc

@@ -0,0 +1,3 @@
+{
+  "extends": "../.markdownlint.jsonc"
+}

docs/docs/community/code-conduct.md

@@ -21,23 +21,23 @@ diverse, inclusive, and healthy community.
 Examples of behavior that contributes to a positive environment for our
 community include:
 
-* Demonstrating empathy and kindness toward other people
-* Being respectful of differing opinions, viewpoints, and experiences
-* Giving and gracefully accepting constructive feedback
-* Accepting responsibility and apologizing to those affected by our mistakes,
+- Demonstrating empathy and kindness toward other people
+- Being respectful of differing opinions, viewpoints, and experiences
+- Giving and gracefully accepting constructive feedback
+- Accepting responsibility and apologizing to those affected by our mistakes,
   and learning from the experience
-* Focusing on what is best not just for us as individuals, but for the
+- Focusing on what is best not just for us as individuals, but for the
   overall community
 
 Examples of unacceptable behavior include:
 
-* The use of sexualized language or imagery, and sexual attention or
+- The use of sexualized language or imagery, and sexual attention or
   advances of any kind
-* Trolling, insulting or derogatory comments, and personal or political attacks
-* Public or private harassment
-* Publishing others' private information, such as a physical or email
+- Trolling, insulting or derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or email
   address, without their explicit permission
-* Other conduct which could reasonably be considered inappropriate in a
+- Other conduct which could reasonably be considered inappropriate in a
   professional setting
 
 ## Enforcement Responsibilities
@@ -110,7 +110,7 @@ Violating these terms may lead to a permanent ban.
 ### 4. Permanent Ban
 
 **Community Impact**: Demonstrating a pattern of violation of community
-standards, including sustained inappropriate behavior,  harassment of an
+standards, including sustained inappropriate behavior, harassment of an
 individual, or aggression toward or disparagement of classes of individuals.
 
 **Consequence**: A permanent ban from any sort of public interaction within
@@ -120,13 +120,13 @@ the community.
 
 This Code of Conduct is adapted from the [Contributor Covenant][homepage],
 version 2.0, available at
-https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
+<https://www.contributor-covenant.org/version/2/0/code_of_conduct.html>.
 
 Community Impact Guidelines were inspired by [Mozilla's code of conduct
 enforcement ladder](https://github.com/mozilla/diversity).
 
 [homepage]: https://www.contributor-covenant.org
 
 For answers to common questions about this code of conduct, see the FAQ at
-https://www.contributor-covenant.org/faq. Translations are available at
-https://www.contributor-covenant.org/translations.
+<https://www.contributor-covenant.org/faq>. Translations are available at
+<https://www.contributor-covenant.org/translations>.