Merge branch 'next' into nv-5303-migrate-dashboard-v2

Author: LetItRock

apps/api/src/app/shared/framework/idempotency.interceptor.ts

@@ -51,9 +51,9 @@ export class IdempotencyInterceptor implements NestInterceptor {
     return await this.featureFlagService.getFlag({
       key: FeatureFlagsKeysEnum.IS_API_IDEMPOTENCY_ENABLED,
       defaultValue: false,
-      environment: { _id: environmentId } as EnvironmentEntity,
-      organization: { _id: organizationId } as OrganizationEntity,
-      user: { _id } as UserEntity,
+      environment: { _id: environmentId },
+      organization: { _id: organizationId },
+      user: { _id },
     });
   }
 

apps/api/src/app/workflows-v1/usecases/index.ts

@@ -6,6 +6,7 @@ import {
   UpdateWorkflow,
 } from '@novu/application-generic';
 
+import { CommunityOrganizationRepository } from '@novu/dal';
 import { GetActiveIntegrationsStatus } from './get-active-integrations-status/get-active-integrations-status.usecase';
 import { ChangeTemplateActiveStatus } from './change-template-active-status/change-template-active-status.usecase';
 import { GetNotificationTemplates } from './get-notification-templates/get-notification-templates.usecase';
@@ -25,4 +26,5 @@ export const USE_CASES = [
   GetNotificationTemplate,
   DeleteNotificationTemplate,
   GetWorkflowVariables,
+  CommunityOrganizationRepository,
 ];

apps/api/src/app/workflows-v2/usecases/build-step-issues/build-step-issues.usecase.ts

@@ -320,6 +320,18 @@ export class BuildStepIssuesUsecase {
   }): Promise<StepIssuesDto> {
     const issues: StepIssuesDto = {};
 
+    const integrationNeeded = [
+      StepTypeEnum.EMAIL,
+      StepTypeEnum.SMS,
+      StepTypeEnum.IN_APP,
+      StepTypeEnum.PUSH,
+      StepTypeEnum.CHAT,
+    ].includes(args.stepTypeDto);
+
+    if (!integrationNeeded) {
+      return issues;
+    }
+
     const primaryNeeded = args.stepTypeDto === StepTypeEnum.EMAIL || args.stepTypeDto === StepTypeEnum.SMS;
     const validIntegrationForStep = await this.integrationsRepository.findOne({
       _environmentId: args.environmentId,

apps/dashboard/src/components/activity/activity-empty-state.tsx

@@ -21,7 +21,7 @@ export function ActivityEmptyState({
   className,
   emptySearchResults,
   onClearFilters,
-  emptySearchTitle = 'No activity match that filter',
+  emptySearchTitle = 'No activity matches that filter',
   emptySearchDescription = 'Try adjusting your filters to see more results.',
   emptyFiltersTitle = 'No activity in the past 30 days',
   emptyFiltersDescription = 'Your activity feed is empty. Once you trigger your first workflow, you can monitor notifications and view delivery details.',

apps/dashboard/src/components/primitives/avatar.tsx

@@ -1,5 +1,5 @@
-import * as React from 'react';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import * as React from 'react';
 
 import { cn } from '@/utils/ui';
 
@@ -29,10 +29,10 @@ const AvatarFallback = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AvatarPrimitive.Fallback
     ref={ref}
-    className={cn('bg-muted flex h-full w-full items-center justify-center rounded-full', className)}
+    className={cn('bg-bg-weak flex h-full w-full items-center justify-center rounded-full', className)}
     {...props}
   />
 ));
 AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
 
-export { Avatar, AvatarImage, AvatarFallback };
+export { Avatar, AvatarFallback, AvatarImage };

apps/dashboard/src/components/primitives/button.tsx

@@ -37,7 +37,7 @@ export const buttonVariants = tv({
     mode: {
       filled: {},
       outline: {
-        root: 'ring-1 ring-inset',
+        root: 'border',
       },
       lighter: {
         root: 'ring-1 ring-inset',

apps/dashboard/src/components/subscribers/create-subscriber-form.tsx

@@ -1,4 +1,8 @@
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/primitives/avatar';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/primitives/tooltip';
 import { useCreateSubscriber } from '@/hooks/use-create-subscriber';
+import { useTelemetry } from '@/hooks/use-telemetry';
+import { TelemetryEvent } from '@/utils/telemetry';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { loadLanguage } from '@uiw/codemirror-extensions-langs';
 import { useForm } from 'react-hook-form';
@@ -19,8 +23,6 @@ import TruncatedText from '../truncated-text';
 import { LocaleSelect } from './locale-select';
 import { CreateSubscriberFormSchema } from './schema';
 import { TimezoneSelect } from './timezone-select';
-import { useTelemetry } from '@/hooks/use-telemetry';
-import { TelemetryEvent } from '@/utils/telemetry';
 
 const extensions = [loadLanguage('json')?.extension ?? []];
 const basicSetup = { lineNumbers: true, defaultKeymap: true };
@@ -86,6 +88,9 @@ export const CreateSubscriberForm = (props: CreateSubscriberFormProps) => {
     });
   };
 
+  const firstNameChar = form.getValues('firstName')?.charAt(0) || '';
+  const lastNameChar = form.getValues('lastName')?.charAt(0) || '';
+
   return (
     <div className="flex h-full flex-col">
       <header className="border-bg-soft flex h-12 w-full flex-row items-center gap-3 border-b p-3.5">
@@ -97,49 +102,74 @@ export const CreateSubscriberForm = (props: CreateSubscriberFormProps) => {
       <Form {...form}>
         <FormRoot autoComplete="off" noValidate onSubmit={form.handleSubmit(onSubmit)} className="flex h-full flex-col">
           <div className="flex flex-col items-stretch gap-6 p-5">
-            <div className="grid grid-cols-2 gap-2.5">
-              <FormField
-                control={form.control}
-                name="firstName"
-                render={({ field, fieldState }) => (
-                  <FormItem>
-                    <FormLabel>First Name</FormLabel>
-                    <FormControl>
-                      <Input
-                        {...field}
-                        placeholder={field.name}
-                        id={field.name}
-                        value={field.value}
-                        onChange={field.onChange}
-                        hasError={!!fieldState.error}
-                        size="xs"
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-              <FormField
-                control={form.control}
-                name="lastName"
-                render={({ field, fieldState }) => (
-                  <FormItem>
-                    <FormLabel>Last Name</FormLabel>
-                    <FormControl>
-                      <Input
-                        {...field}
-                        placeholder={field.name}
-                        id={field.name}
-                        value={field.value}
-                        onChange={field.onChange}
-                        hasError={!!fieldState.error}
-                        size="xs"
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
+            <div className="flex items-center gap-3">
+              <Tooltip>
+                <TooltipTrigger
+                  type="button"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                  }}
+                >
+                  <Avatar className="size-[3.75rem] cursor-default">
+                    <AvatarImage src={firstNameChar || lastNameChar ? '' : '/images/avatar.svg'} />
+                    <AvatarFallback>
+                      {firstNameChar || lastNameChar ? (
+                        firstNameChar + lastNameChar
+                      ) : (
+                        <AvatarImage src="/images/avatar.svg" />
+                      )}
+                    </AvatarFallback>
+                  </Avatar>
+                </TooltipTrigger>
+                <TooltipContent className="max-w-56">
+                  Subscriber profile Image can only be updated via API
+                </TooltipContent>
+              </Tooltip>
+              <div className="grid w-full grid-cols-2 gap-2.5">
+                <FormField
+                  control={form.control}
+                  name="firstName"
+                  render={({ field, fieldState }) => (
+                    <FormItem>
+                      <FormLabel>First Name</FormLabel>
+                      <FormControl>
+                        <Input
+                          {...field}
+                          placeholder={'John'}
+                          id={field.name}
+                          value={field.value}
+                          onChange={field.onChange}
+                          hasError={!!fieldState.error}
+                          size="xs"
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name="lastName"
+                  render={({ field, fieldState }) => (
+                    <FormItem>
+                      <FormLabel>Last Name</FormLabel>
+                      <FormControl>
+                        <Input
+                          {...field}
+                          placeholder={'Doe'}
+                          id={field.name}
+                          value={field.value}
+                          onChange={field.onChange}
+                          hasError={!!fieldState.error}
+                          size="xs"
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </div>
             </div>
             <div>
               <FormField
@@ -238,12 +268,12 @@ export const CreateSubscriberForm = (props: CreateSubscriberFormProps) => {
               />
             </div>
 
-            <div className="flex flex-nowrap gap-2.5">
+            <div className="grid grid-cols-[1fr_3fr] gap-2.5">
               <FormField
                 control={form.control}
                 name="locale"
                 render={({ field }) => (
-                  <FormItem className="w-1/4">
+                  <FormItem>
                     <FormLabel>Locale</FormLabel>
                     <FormControl>
                       <LocaleSelect
@@ -262,7 +292,7 @@ export const CreateSubscriberForm = (props: CreateSubscriberFormProps) => {
                 control={form.control}
                 name="timezone"
                 render={({ field }) => (
-                  <FormItem className="flex-1">
+                  <FormItem className="overflow-hidden">
                     <FormLabel>Timezone</FormLabel>
                     <FormControl>
                       <TimezoneSelect

apps/dashboard/src/components/subscribers/locale-select.tsx

@@ -1,25 +1,23 @@
 import { locales } from '@/utils/locales';
 import { cn } from '@/utils/ui';
+import { useRef, useState } from 'react';
 import { RiArrowDownSLine, RiCheckLine, RiEarthLine, RiSearchLine } from 'react-icons/ri';
 import { type Country } from 'react-phone-number-input';
 import flags from 'react-phone-number-input/flags';
-import { Button } from '../primitives/button';
+import { Button, ButtonProps } from '../primitives/button';
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '../primitives/command';
 import { Popover, PopoverContent, PopoverTrigger } from '../primitives/popover';
 import TruncatedText from '../truncated-text';
-import { useRef, useState } from 'react';
 
-export function LocaleSelect({
-  value,
-  onChange,
-  disabled,
-  readOnly,
-}: {
+type LocaleSelectProps = ButtonProps & {
   value?: string;
   disabled?: boolean;
   readOnly?: boolean;
   onChange: (val: string) => void;
-}) {
+};
+
+export function LocaleSelect(props: LocaleSelectProps) {
+  const { value, disabled, readOnly, onChange, className, ...rest } = props;
   const [open, setOpen] = useState(false);
   const currentCountryCode = value?.split('_')?.[1] as Country;
   const CurrentFlag = currentCountryCode ? flags[currentCountryCode] : RiEarthLine;
@@ -33,8 +31,9 @@ export function LocaleSelect({
         <Button
           variant="secondary"
           mode="outline"
-          className="flex h-8 w-full items-center justify-between gap-1 rounded-lg border-r-0 px-3 focus:z-10"
+          className={cn('flex h-8 w-full items-center justify-between gap-1 rounded-lg px-3 focus:z-10', className)}
           disabled={disabled}
+          {...rest}
         >
           <div className="flex max-w-full flex-1 items-center gap-1 overflow-hidden">
             <span className="inline-flex gap-1 text-xs font-normal text-neutral-950">

apps/dashboard/src/components/subscribers/preferences/preferences-item.tsx

@@ -4,7 +4,6 @@ import { Switch } from '@/components/primitives/switch';
 import { STEP_TYPE_TO_COLOR } from '@/utils/color';
 import { capitalize } from '@/utils/string';
 import { ChannelTypeEnum } from '@novu/shared';
-import { motion } from 'motion/react';
 
 const CHANNEL_LABELS_LOOKUP: Record<`${ChannelTypeEnum}`, string> = {
   [ChannelTypeEnum.IN_APP]: 'In-App',
@@ -26,13 +25,7 @@ export function PreferencesItem(props: PreferencesItemProps) {
   const Icon = STEP_TYPE_TO_ICON[channel];
 
   return (
-    <motion.div
-      variants={{
-        hidden: { opacity: 0, y: 20 },
-        visible: { opacity: 1, y: 0 },
-      }}
-      transition={{ duration: 0.3 }}
-    >
+    <div>
       <div className="mt-2 flex w-full items-center justify-between space-y-1">
         <div className="flex items-center gap-2">
           <Step variant={STEP_TYPE_TO_COLOR[channel]} className="size-5">
@@ -42,6 +35,6 @@ export function PreferencesItem(props: PreferencesItemProps) {
         </div>
         <Switch checked={enabled} onCheckedChange={readOnly ? undefined : onChange} />
       </div>
-    </motion.div>
+    </div>
   );
 }