feat(web): reusable sms preview component

apps/web/src/api/content-templates.ts

@@ -44,3 +44,15 @@ export async function previewChat({
 }) {
   return api.post('/v1/content-templates/preview/chat', { content, payload, locale });
 }
+
+export async function previewSms({
+  content,
+  payload,
+  locale,
+}: {
+  content?: string | IEmailBlock[];
+  payload: string;
+  locale?: string;
+}): Promise<{ content: string }> {
+  return api.post('/v1/content-templates/preview/sms', { content, payload, locale });
+}

apps/web/src/api/hooks/index.ts

@@ -5,3 +5,4 @@ export * from './useWebhookSupportStatus';
 export * from './notification-templates';
 export * from './useGetLocalesFromContent';
 export * from './usePreviewEmail';
+export * from './usePreviewSms';

apps/web/src/api/hooks/usePreviewSms.ts

@@ -0,0 +1,51 @@
+import { useMutation, UseMutationOptions } from '@tanstack/react-query';
+import { useCallback } from 'react';
+import { errorMessage } from '@novu/design-system';
+import { IEmailBlock } from '@novu/shared';
+import { IS_DOCKER_HOSTED } from '@novu/shared-web';
+
+import { previewSms } from '../content-templates';
+
+type PayloadType = {
+  content?: string | IEmailBlock[];
+  payload: string;
+  locale?: string;
+};
+
+type ResultType = { content: string };
+
+type ErrorType = { error: string; message: string; statusCode: number };
+
+export const usePreviewSms = (options: UseMutationOptions<ResultType, ErrorType, PayloadType> = {}) => {
+  const { mutateAsync, isLoading } = useMutation<ResultType, ErrorType, PayloadType>(
+    ({ content, payload, locale }) => previewSms({ content, payload, locale }),
+    {
+      onError: (e: any) => {
+        errorMessage(e.message || 'Unexpected error');
+      },
+      onSuccess: (result, variables, context) => {
+        options?.onSuccess?.(result, variables, context);
+      },
+    }
+  );
+
+  const getSmsPreview = useCallback(
+    ({ content, payload, locale }: PayloadType) => {
+      if (IS_DOCKER_HOSTED) {
+        return;
+      }
+
+      return mutateAsync({
+        content,
+        payload,
+        locale,
+      });
+    },
+    [mutateAsync]
+  );
+
+  return {
+    getSmsPreview,
+    isLoading,
+  };
+};

apps/web/src/components/workflow/Preview/common/LocaleSelect.tsx

@@ -1,19 +1,33 @@
 import styled from '@emotion/styled';
 import { SelectItemProps, Group } from '@mantine/core';
-import { Select, Text } from '@novu/design-system';
+import { Select, ISelectProps, Text } from '@novu/design-system';
 import { forwardRef } from 'react';
 import { IS_DOCKER_HOSTED } from '../../../../config';
 
 const rightSectionWidth = 20;
 
-export function LocaleSelect({ locales, value, isLoading, onLocaleChange }) {
+export function LocaleSelect({
+  locales,
+  value,
+  isLoading,
+  onLocaleChange,
+  className,
+  dropdownPosition,
+}: {
+  locales: { langName: string; langIso: string }[];
+  value?: string;
+  isLoading?: boolean;
+  onLocaleChange: (val: string) => void;
+  className?: string;
+  dropdownPosition?: ISelectProps['dropdownPosition'];
+}) {
   // Do not render locale select if self-hosted or no locale or only one locale
   if (IS_DOCKER_HOSTED || locales.length < 2) {
     return null;
   }
 
   return (
-    <SelectContainer>
+    <SelectContainer className={className}>
       <Select
         itemComponent={SelectItem}
         data={locales?.map((locale) => {
@@ -28,11 +42,14 @@ export function LocaleSelect({ locales, value, isLoading, onLocaleChange }) {
         searchable
         withinPortal
         onChange={(val) => {
+          if (!val || Array.isArray(val)) return;
+
           onLocaleChange(val);
         }}
         value={value}
         variant="unstyled"
         rightSectionWidth={rightSectionWidth}
+        dropdownPosition={dropdownPosition}
       />
     </SelectContainer>
   );

apps/web/src/pages/templates/components/ChannelPreview.tsx

@@ -5,6 +5,7 @@ import { ChatPreview, EmailPreview } from '../../../components/workflow/Preview'
 import { useNavigateFromEditor } from '../hooks/useNavigateFromEditor';
 import { useStepIndex } from '../hooks/useStepIndex';
 import { ChannelPreviewSidebar } from './ChannelPreviewSidebar';
+import { SmsPreview } from './SmsPreview';
 
 const PreviewComponent = ({ channel }: { channel: StepTypeEnum }) => {
   switch (channel) {
@@ -15,7 +16,7 @@ const PreviewComponent = ({ channel }: { channel: StepTypeEnum }) => {
       return <>TRIGGER</>;
 
     case StepTypeEnum.SMS:
-      return <>SMS</>;
+      return <SmsPreview />;
 
     case StepTypeEnum.IN_APP:
       return <>IN APP</>;

apps/web/src/pages/templates/components/SmsBubble.tsx

@@ -0,0 +1,159 @@
+import styled from '@emotion/styled';
+import { Skeleton } from '@mantine/core';
+import { colors, PencilOutlined } from '@novu/design-system';
+import { MouseEventHandler, useState } from 'react';
+
+const SmsBubbleHolder = styled.div`
+  position: relative;
+`;
+
+const SmsBubbleContainer = styled.div<{ isBlur: boolean; isError: boolean }>`
+  position: relative;
+  width: fit-content;
+  min-width: 160px;
+  min-height: 36px;
+  padding: 8px 12px;
+  border-radius: 20px;
+  background: ${({ isError }) => (isError ? colors.error : '#51ba52')};
+  color: ${colors.white};
+  font-size: 14px;
+  line-height: 20px;
+  filter: ${({ isBlur }) => (isBlur ? 'blur(4px)' : 'none')};
+
+  &::before {
+    content: '';
+    position: absolute;
+    bottom: -2px;
+    right: -7px;
+    height: 20px;
+    border-right: 20px solid ${({ isError }) => (isError ? colors.error : '#51ba52')};
+    border-bottom-left-radius: 16px 14px;
+    transform: translate(0, -2px);
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    z-index: 1;
+    bottom: -2px;
+    right: -46px;
+    width: 16px;
+    height: 20px;
+    background: ${({ theme }) => (theme.colorScheme === 'dark' ? '#4b4b51' : colors.white)};
+    border-bottom-left-radius: 10px;
+    transform: translate(-30px, -2px);
+  }
+`;
+
+const BubbleText = styled.div`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+`;
+
+const Delivered = styled.span`
+  position: absolute;
+  bottom: -24px;
+  right: 0;
+  font-size: 12px;
+  font-weight: 500;
+  color: #909093;
+`;
+
+const Error = styled.span`
+  width: max-content;
+  position: absolute;
+  bottom: -24px;
+  right: -6px;
+  font-size: 12px;
+  font-weight: 500;
+  color: ${colors.error};
+`;
+
+const SkeletonContainer = styled.div`
+  display: flex;
+  gap: 10px;
+`;
+
+const SkeletonFirstRect = styled(Skeleton)`
+  width: 80px;
+  height: 20px;
+
+  &::before {
+    background: rgba(255, 255, 255, 0.24);
+  }
+
+  &::after {
+    background: rgba(255, 255, 255, 0.3);
+  }
+`;
+
+const SkeletonSecondRect = styled(SkeletonFirstRect)`
+  width: 40px;
+`;
+
+const EditLabel = styled.button`
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  min-width: 120px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  font-weight: 700;
+  padding: 0;
+  color: ${colors.white};
+  cursor: pointer;
+  outline: none;
+  border: none;
+  background: transparent;
+`;
+
+interface ISmsBubbleProps {
+  className?: string;
+  text?: string;
+  isLoading?: boolean;
+  onEditClick?: MouseEventHandler<HTMLButtonElement>;
+  error?: string;
+}
+
+export const SmsBubble: React.FC<ISmsBubbleProps> = ({ className, text, isLoading, onEditClick, error }) => {
+  const [isHovered, setIsHovered] = useState(false);
+  const isError = !!error;
+
+  const onEditClickHandler: MouseEventHandler<HTMLButtonElement> = (e) => {
+    e.stopPropagation();
+    e.preventDefault();
+    onEditClick?.(e);
+  };
+
+  return (
+    <SmsBubbleHolder
+      className={className}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      {isHovered && (
+        <EditLabel onClick={onEditClickHandler}>
+          <PencilOutlined />
+          Edit message
+        </EditLabel>
+      )}
+      <SmsBubbleContainer isError={isError} isBlur={isHovered}>
+        {isLoading ? (
+          <SkeletonContainer>
+            <SkeletonFirstRect />
+            <SkeletonSecondRect />
+          </SkeletonContainer>
+        ) : (
+          <BubbleText title={text}>{text}</BubbleText>
+        )}
+        {isError ? <Error>{error}</Error> : <Delivered>Delivered</Delivered>}
+      </SmsBubbleContainer>
+    </SmsBubbleHolder>
+  );
+};

apps/web/src/pages/templates/components/SmsPreview.tsx

@@ -0,0 +1,95 @@
+import styled from '@emotion/styled';
+import { colors } from '@novu/design-system';
+import { useAuthController, useDataRef } from '@novu/shared-web';
+import { useEffect, useState } from 'react';
+import { useFormContext, useWatch } from 'react-hook-form';
+
+import { useGetLocalesFromContent, usePreviewSms } from '../../../api/hooks';
+import { LocaleSelect } from '../../../components/workflow/Preview/common';
+import { useNavigateToStepEditor } from '../hooks/useNavigateToStepEditor';
+import { useStepFormErrors } from '../hooks/useStepFormErrors';
+import { useStepFormPath } from '../hooks/useStepFormPath';
+import { IForm } from './formTypes';
+import { MobileSimulator } from './phone-simulator';
+import { SmsBubble } from './SmsBubble';
+
+const BodyContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  margin: auto 20px 40px 20px;
+`;
+
+const LocaleSelectStyled = styled(LocaleSelect)`
+  .mantine-Select-input {
+    color: ${({ theme }) => (theme.colorScheme === 'dark' ? colors.white : colors.B60)};
+  }
+
+  .mantine-Input-rightSection {
+    color: ${({ theme }) => (theme.colorScheme === 'dark' ? colors.white : colors.B60)} !important;
+  }
+`;
+
+export const SmsPreview = () => {
+  const { control } = useFormContext<IForm>();
+  const path = useStepFormPath();
+  const error = useStepFormErrors();
+  const templateContent = useWatch({
+    name: `${path}.template.content`,
+    control,
+  });
+  const { organization } = useAuthController();
+  const [previewContent, setPreviewContent] = useState(templateContent as string);
+  const [selectedLocale, setSelectedLocale] = useState('');
+  const previewData = useDataRef({ templateContent });
+  const templateContentError = error?.template?.content?.message;
+
+  const { data: locales, isLoading: areLocalesLoading, getLocalesFromContent } = useGetLocalesFromContent();
+  const { isLoading: isPreviewContentLoading, getSmsPreview } = usePreviewSms({
+    onSuccess: (result) => {
+      setPreviewContent(result.content);
+    },
+  });
+
+  const { navigateToStepEditor } = useNavigateToStepEditor();
+
+  useEffect(() => {
+    getLocalesFromContent({
+      content: previewData.current.templateContent,
+    });
+  }, [getLocalesFromContent, previewData]);
+
+  useEffect(() => {
+    getSmsPreview({
+      content: previewData.current.templateContent,
+      payload: '',
+      locale: selectedLocale,
+    });
+  }, [selectedLocale, previewData, getSmsPreview]);
+
+  const onLocaleChange = (locale) => {
+    setSelectedLocale(locale);
+  };
+
+  const isBubbleLoading = !templateContentError && isPreviewContentLoading;
+
+  return (
+    <MobileSimulator>
+      <BodyContainer>
+        <LocaleSelectStyled
+          isLoading={areLocalesLoading}
+          locales={locales}
+          value={selectedLocale || organization?.defaultLocale}
+          onLocaleChange={onLocaleChange}
+          dropdownPosition="top"
+        />
+        <SmsBubble
+          onEditClick={navigateToStepEditor}
+          isLoading={isBubbleLoading}
+          text={previewContent}
+          error={templateContentError}
+        />
+      </BodyContainer>
+    </MobileSimulator>
+  );
+};