Merge pull request #5450 from novuhq/nv-3559-show-the-upgrade-plan-in…

…formation

Nv 3559 show the upgrade plan information

apps/web/cypress/tests/notification-editor/create-notification.spec.ts

@@ -87,7 +87,7 @@ describe('Creation functionality', function () {
     cy.getByTestId('emailPreheader').type('this is email preheader');
 
     cy.getByTestId('var-label').first().contains('System Variables').click();
-    cy.getByTestId('var-label').last().contains('Step Variables');
+    cy.getByTestId('var-label').last().contains('Translation Variables');
     cy.getByTestId('var-items-step').contains('step');
     cy.getByTestId('var-items-step').contains('object');
     cy.getByTestId('var-items-branding').contains('branding');

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

@@ -0,0 +1,23 @@
+import { FeatureFlagsKeysEnum } from '@novu/shared';
+import { IS_DOCKER_HOSTED, useFeatureFlag } from '@novu/shared-web';
+
+export function UpgradePlanBanner({ FeatureActivatedBanner }: { FeatureActivatedBanner: React.ReactNode }) {
+  const isEnabled = useFeatureFlag(FeatureFlagsKeysEnum.IS_BILLING_REVERSE_TRIAL_ENABLED);
+
+  if (IS_DOCKER_HOSTED) {
+    return null;
+  }
+
+  if (!isEnabled) {
+    return null;
+  }
+
+  try {
+    const module = require('@novu/ee-billing-web');
+    const Component = module.UpgradePlanBanner;
+
+    return <Component FeatureActivatedBanner={FeatureActivatedBanner} />;
+  } catch (e) {}
+
+  return null;
+}

apps/web/src/pages/templates/components/email-editor/variables-management/VariablesManagement.tsx

@@ -1,8 +1,9 @@
 import { useWatch } from 'react-hook-form';
-import { Group, useMantineColorScheme } from '@mantine/core';
+import { useNavigate } from 'react-router-dom';
 import React, { useEffect, useState } from 'react';
 import * as set from 'lodash.set';
 import styled from '@emotion/styled';
+import { Group, useMantineColorScheme } from '@mantine/core';
 
 import {
   Translation,
@@ -16,6 +17,7 @@ import {
   ActionButton,
   PencilOutlined,
   Close,
+  Text,
 } from '@novu/design-system';
 
 import { VarItemsDropdown } from './VarItemsDropdown';
@@ -25,6 +27,9 @@ import { VarItemTooltip } from './VarItemTooltip';
 import { When } from '../../../../../components/utils/When';
 import { useWorkflowVariables } from '../../../../../api/hooks';
 
+import { ROUTES } from '../../../../../constants/routes.enum';
+import { UpgradePlanBanner } from '../../../../../components/layout/components/UpgradePlanBanner';
+
 interface IVariablesList {
   translations: Record<string, any>;
   step: Record<string, any>;
@@ -85,12 +90,12 @@ export const VariablesManagement = ({
   const { colorScheme } = useMantineColorScheme();
 
   const { variables } = useWorkflowVariables();
-
   const processedVariables = useProcessVariables(variableArray, false);
   const [variablesList, setVariablesList] = useState<IVariablesList>({
     ...variables,
     step: processedVariables,
   });
+
   const [searchVal, setSearchVal] = useState('');
 
   const debouncedSearchChange = useDebounce((args: { search: string; list: IVariablesList }) => {
@@ -188,13 +193,7 @@ const VariablesSection = ({ variablesList, searchVal }: { variablesList: IVariab
     <>
       <VariableSectionItem variableList={system} search={searchVal} sectionName="System Variables" Icon={NovuIcon} />
       <VariableSectionItem variableList={step} search={searchVal} sectionName="Step Variables" Icon={Workflow} />
-      <VariableSectionItem
-        withFolders
-        variableList={translations}
-        search={searchVal}
-        sectionName={'Translation Variables'}
-        Icon={Translation}
-      />
+      <TranslationSectionItem variableList={translations} search={searchVal} />
     </>
   );
 };
@@ -215,34 +214,84 @@ export const VariableSectionItem = ({
   const keys = variableList && Object.keys(variableList);
 
   return (
-    <When truthy={keys?.length}>
-      <VarLabel label={sectionName} Icon={Icon}>
-        {keys?.map((name, ind) => {
-          if (typeof variableList[name] === 'object') {
+    <>
+      <When truthy={keys?.length}>
+        <VarLabel label={sectionName} Icon={Icon}>
+          {keys?.map((name, ind) => {
+            if (typeof variableList[name] === 'object') {
+              return (
+                <VarItemsDropdown
+                  withFolders={withFolders}
+                  path={name}
+                  highlight={search}
+                  key={ind}
+                  name={name}
+                  type={variableList[name]}
+                />
+              );
+            }
+
             return (
-              <VarItemsDropdown
-                withFolders={withFolders}
-                path={name}
+              <VarItemTooltip
                 highlight={search}
-                key={ind}
+                pathToCopy={name}
                 name={name}
-                type={variableList[name]}
+                type={typeof variableList[name]}
+                key={ind}
               />
             );
-          }
-
-          return (
-            <VarItemTooltip
-              highlight={search}
-              pathToCopy={name}
-              name={name}
-              type={typeof variableList[name]}
-              key={ind}
-            />
-          );
-        })}
-      </VarLabel>
-    </When>
+          })}
+        </VarLabel>
+      </When>
+    </>
+  );
+};
+const TranslationsGetStartedText = () => {
+  const { colorScheme } = useMantineColorScheme();
+  const isDark = colorScheme === 'dark';
+  const navigate = useNavigate();
+
+  return (
+    <Text color={isDark ? colors.B60 : colors.B40}>
+      <GradientSpan>
+        <a
+          onClick={() => {
+            navigate(ROUTES.TRANSLATIONS);
+          }}
+        >
+          Upload translations{' '}
+        </a>
+      </GradientSpan>
+      <span>to use them as variables or in the autosuggest for the editor.</span>
+    </Text>
+  );
+};
+
+export const TranslationSectionItem = ({
+  variableList,
+  search,
+}: {
+  variableList: Record<string, any>;
+  search: string;
+}) => {
+  const sectionName = 'Translation Variables';
+  const keys = variableList && Object.keys(variableList);
+
+  return (
+    <>
+      <VariableSectionItem
+        withFolders
+        variableList={variableList}
+        search={search}
+        sectionName={sectionName}
+        Icon={Translation}
+      />
+      <When truthy={!keys?.length && !search.length}>
+        <VarLabel label={sectionName} Icon={Translation}>
+          <UpgradePlanBanner FeatureActivatedBanner={TranslationsGetStartedText} />
+        </VarLabel>
+      </When>
+    </>
   );
 };
 
@@ -261,3 +310,13 @@ const EmptySearchContainer = styled.div`
   align-items: center;
   justify-content: center;
 `;
+
+const GradientSpan = styled.span`
+  background: ${colors.horizontal};
+  background-clip: text;
+  text-fill-color: transparent;
+
+  &:hover {
+    cursor: pointer;
+  }
+`;