@erxes/ui 0.0.0-stage → 3.2.20-1

package/src/modules/display/components/EmailDisplay.tsx

@@ -0,0 +1,36 @@
+import { IEmailFieldProps } from 'erxes-ui/modules/inputs';
+import { Badge } from 'erxes-ui/components';
+import { IconCircleDashed, IconCircleDashedCheck } from '@tabler/icons-react';
+import { formatEmails } from '../utils/formatEmails';
+import { ValidationStatus } from 'erxes-ui/types';
+
+export const EmailDisplay = ({
+  primaryEmail,
+  emails,
+  emailValidationStatus,
+}: IEmailFieldProps) => {
+  const emailsWithProperties = formatEmails(
+    primaryEmail,
+    emails,
+    emailValidationStatus,
+  );
+
+  return (
+    <div className="flex gap-2">
+      {emailsWithProperties.map(
+        (email) =>
+          email.email && (
+            <Badge key={email.email} variant="secondary">
+              {email.isPrimary &&
+                (email.status === ValidationStatus.Valid ? (
+                  <IconCircleDashedCheck className="text-success size-4" />
+                ) : (
+                  <IconCircleDashed className="text-muted-foreground size-4" />
+                ))}
+              {email.email}
+            </Badge>
+          ),
+      )}
+    </div>
+  );
+};

package/src/modules/display/components/PhoneDisplay.tsx

@@ -0,0 +1,37 @@
+import { IPhoneFieldProps } from 'erxes-ui/modules/inputs';
+import { Badge } from 'erxes-ui/components';
+import { IconCircleDashed, IconCircleDashedCheck } from '@tabler/icons-react';
+import { ValidationStatus } from 'erxes-ui/types';
+import { formatPhones } from 'erxes-ui/modules/display/utils/formatPhones';
+import { formatPhoneNumber } from 'erxes-ui/utils/format';
+
+export const PhoneDisplay = ({
+  primaryPhone,
+  phones,
+  phoneValidationStatus,
+}: IPhoneFieldProps) => {
+  const formattedPhones = formatPhones(
+    primaryPhone,
+    phones,
+    phoneValidationStatus,
+  );
+
+  return (
+    <div className="flex gap-2">
+      {formattedPhones.map(
+        (phone) =>
+          phone.phone && (
+            <Badge key={phone.phone} variant="secondary">
+              {phone.isPrimary &&
+                (phone.status === ValidationStatus.Valid ? (
+                  <IconCircleDashedCheck className="text-success size-4" />
+                ) : (
+                  <IconCircleDashed className="text-muted-foreground size-4" />
+                ))}
+              {formatPhoneNumber({ value: phone.phone || '' })}
+            </Badge>
+          ),
+      )}
+    </div>
+  );
+};

package/src/modules/display/components/RelativeDateDisplay.tsx

@@ -0,0 +1,53 @@
+import { format } from 'date-fns';
+import { Tooltip } from 'erxes-ui/components';
+import { isUndefinedOrNull } from 'erxes-ui/utils';
+import {
+  formatDateISOStringToRelativeDate,
+  formatDateISOStringToRelativeDateShort,
+} from 'erxes-ui/utils/localization/formatDateISOStringToRelativeDate';
+import React from 'react';
+import { Except } from 'type-fest';
+
+type RelativeDateDisplayProps = {
+  value: string;
+  isShort?: boolean;
+};
+
+const RelativeDateDisplayTooltip = React.forwardRef<
+  React.ElementRef<typeof Tooltip.Trigger>,
+  Except<React.ComponentPropsWithoutRef<typeof Tooltip.Trigger>, 'value'> & {
+    value: string;
+  }
+>(({ value, ...props }, ref) => {
+  if (isUndefinedOrNull(value)) {
+    return null;
+  }
+
+  return (
+    <Tooltip.Provider delayDuration={100}>
+      <Tooltip>
+        <Tooltip.Trigger className="truncate" {...props} ref={ref} />
+        <Tooltip.Content>{format(value, 'MMM dd, yyyy HH:mm')}</Tooltip.Content>
+      </Tooltip>
+    </Tooltip.Provider>
+  );
+});
+
+RelativeDateDisplayTooltip.displayName = 'RelativeDateDisplayTooltip';
+
+const RelativeDateDisplayValue = ({
+  value,
+  isShort,
+}: RelativeDateDisplayProps) => {
+  if (isUndefinedOrNull(value)) {
+    return null;
+  }
+  const relativeDate = formatDateISOStringToRelativeDate(value);
+  const relativeDateShort = formatDateISOStringToRelativeDateShort(value);
+
+  return isShort ? relativeDateShort : relativeDate;
+};
+
+export const RelativeDateDisplay = Object.assign(RelativeDateDisplayTooltip, {
+  Value: RelativeDateDisplayValue,
+});

package/src/modules/display/components/SexDisplay.tsx

@@ -0,0 +1,10 @@
+import { SexCodes } from 'erxes-ui/constants';
+import { SexCode } from 'erxes-ui/types';
+
+export const SexDisplay = ({
+  value = SexCode.NOT_KNOWN,
+}: {
+  value: SexCode;
+}) => {
+  return value === SexCode.NOT_KNOWN ? '' : SexCodes[value]?.label ?? '';
+};

package/src/modules/display/index.ts

@@ -0,0 +1,6 @@
+export * from './components/CurrencyDisplay';
+export * from './components/EllipsisDisplay';
+export * from './components/RelativeDateDisplay';
+export * from './components/PhoneDisplay';
+export * from './components/EmailDisplay';
+export * from './components/SexDisplay';

package/src/modules/display/utils/formatEmails.ts

@@ -0,0 +1,29 @@
+import { IEmailField, TEmails } from 'erxes-ui/modules/inputs';
+import { ValidationStatus } from 'erxes-ui/types';
+
+export function formatEmails(
+  primaryEmail: string,
+  emails: string[],
+  emailValidationStatus: ValidationStatus,
+): TEmails {
+  const formattedEmails: IEmailField[] = [
+    ...(primaryEmail
+      ? [
+          {
+            email: primaryEmail,
+            status: emailValidationStatus,
+            isPrimary: true,
+          },
+        ]
+      : []),
+    ...(emails || []).map((email) => ({
+      email,
+      status: emailValidationStatus,
+    })),
+  ];
+
+  return formattedEmails.filter(
+    (email, index, self) =>
+      index === self.findIndex((t) => t.email === email.email),
+  );
+}

package/src/modules/display/utils/formatPhones.ts

@@ -0,0 +1,29 @@
+import { TPhones } from 'erxes-ui/modules/inputs';
+import { ValidationStatus } from 'erxes-ui/types';
+
+export function formatPhones(
+  primaryPhone: string,
+  phones: string[],
+  phoneValidationStatus?: ValidationStatus,
+): TPhones {
+  const formattedPhones = [
+    ...(primaryPhone
+      ? [
+          {
+            phone: primaryPhone,
+            status: phoneValidationStatus,
+            isPrimary: true,
+          },
+        ]
+      : []),
+    ...(phones || []).map((phone) => ({
+      phone,
+      status: ValidationStatus.Invalid,
+    })),
+  ];
+
+  return formattedPhones.filter(
+    (phone, index, self) =>
+      index === self.findIndex((t) => t.phone === phone.phone),
+  );
+}

package/src/modules/email-editor/components/EmailEditor.tsx

@@ -0,0 +1,165 @@
+import { Editor as MailyEditor } from '@maily-to/core';
+import {
+  getVariableSuggestions,
+  HTMLCodeBlockExtension,
+  ImageUploadExtension,
+  MailyKit,
+  PlaceholderExtension,
+  VariableExtension,
+} from '@maily-to/core/extensions';
+import type { AnyExtension, Editor as TiptapEditor } from '@tiptap/core';
+import { cn } from 'erxes-ui/lib';
+import { readImage, REACT_APP_API_URL } from 'erxes-ui/utils';
+import { useState } from 'react';
+import { DEFAULT_EMAIL_BLOCKS } from '../constant';
+import { EmailTableToolbar } from './EmailTableToolbar';
+import { EmailDocumentPlaceholder } from '../extensions/documentPlaceholder';
+import { EMAIL_TABLE_EXTENSIONS } from '../extensions/table';
+import { EmailEditorProps } from '../types';
+
+// Maily hands every empty node a placeholder (`includeChildren: true`) and
+// returns '' for the ones that only hold other blocks. Replacing its option
+// with a plain string gave a column and the paragraph inside it the same line
+// of text, drawn on top of each other.
+// `{` is how the rest of erxes offers record fields in an editor, so the email
+// editor asks for them the same way.
+const VARIABLE_TRIGGER = '{';
+
+const CONTAINER_NODES = [
+  'columns',
+  'column',
+  'section',
+  'show',
+  'blockquote',
+  'table',
+  'tableRow',
+  'tableCell',
+  'tableHeader',
+];
+
+const nodePlaceholder =
+  (placeholder: string) =>
+  ({
+    node,
+  }: {
+    node: { type: { name: string }; attrs: { level?: number } };
+  }) => {
+    if (CONTAINER_NODES.includes(node.type.name)) {
+      return '';
+    }
+
+    if (node.type.name === 'heading') {
+      return `Heading ${node.attrs.level}`;
+    }
+
+    if (node.type.name === 'htmlCodeBlock') {
+      return 'Type your HTML code...';
+    }
+
+    return placeholder;
+  };
+
+export const uploadEmailEditorImage = async (file: File) => {
+  if (!file.type.startsWith('image/')) {
+    throw new Error('Only image files can be uploaded');
+  }
+
+  const formData = new FormData();
+  formData.append('file', file);
+
+  const response = await fetch(`${REACT_APP_API_URL}/upload-file?kind=main`, {
+    method: 'post',
+    body: formData,
+    credentials: 'include',
+  });
+
+  const fileKey = await response.text();
+
+  if (!response.ok || !fileKey) {
+    throw new Error(fileKey || 'Failed to upload image');
+  }
+
+  return readImage(fileKey);
+};
+
+export const EmailEditor = ({
+  contentJson,
+  onChange,
+  onCreate,
+  variables,
+  onImageUpload = uploadEmailEditorImage,
+  blocks = DEFAULT_EMAIL_BLOCKS,
+  extensions: additionalExtensions = [],
+  placeholder,
+  className,
+  editable = true,
+}: EmailEditorProps) => {
+  const [editor, setEditor] = useState<TiptapEditor | null>(null);
+  const extensions: AnyExtension[] = [
+    MailyKit,
+    HTMLCodeBlockExtension,
+    ImageUploadExtension.configure({ onImageUpload }),
+    VariableExtension.configure({
+      suggestion: getVariableSuggestions(VARIABLE_TRIGGER),
+      variables: variables ?? [],
+    }),
+    PlaceholderExtension.configure({
+      placeholder: nodePlaceholder(
+        placeholder ||
+          `Type '/' for commands, '${VARIABLE_TRIGGER}' for fields...`,
+      ),
+    }),
+    ...EMAIL_TABLE_EXTENSIONS,
+    EmailDocumentPlaceholder,
+    ...additionalExtensions,
+  ];
+
+  return (
+    <div className={cn('w-full h-full', className)}>
+      <style>
+        {`
+          [data-tippy-root] { pointer-events: auto; }
+
+          [data-tippy-root] [data-radix-popper-content-wrapper][style*="z-index: 50;"] {
+            display: none;
+          }
+
+          /* The placeholder marks every empty node, and an empty ::before on a
+             row becomes an anonymous cell — which shifted the header row by a
+             whole column. The paragraph inside a cell still carries its own. */
+          #mly-editor table::before,
+          #mly-editor tr::before,
+          #mly-editor th::before,
+          #mly-editor td::before {
+            content: none !important;
+          }
+        `}
+      </style>
+      <MailyEditor
+        editable={editable}
+        contentJson={contentJson}
+        blocks={blocks}
+        extensions={extensions}
+        config={{
+          hasMenuBar: false,
+          contentClassName: 'pl-16 pr-6',
+          bodyClassName: 'border-none! mt-0!',
+        }}
+        onCreate={(created) => {
+          onChange?.(created.getJSON());
+          onCreate?.(created);
+          setEditor(created);
+        }}
+        onUpdate={(updated) => onChange?.(updated.getJSON())}
+      />
+
+      {editable && (
+        <div className="pointer-events-none sticky bottom-4 flex justify-center">
+          <div className="pointer-events-auto flex gap-2">
+            <EmailTableToolbar editor={editor} />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};

package/src/modules/email-editor/components/EmailPreviewDeviceToggle.tsx

@@ -0,0 +1,33 @@
+import { IconDeviceDesktop, IconDeviceMobile } from '@tabler/icons-react';
+import { Button, ToggleGroup } from 'erxes-ui/components';
+import { cn } from 'erxes-ui/lib';
+import { EmailPreviewDevice } from '../types';
+
+/** Which width the rendered email is being read at. */
+export const EmailPreviewDeviceToggle = ({
+  value,
+  onChange,
+  className,
+}: {
+  value: EmailPreviewDevice;
+  onChange: (device: EmailPreviewDevice) => void;
+  className?: string;
+}) => (
+  <ToggleGroup
+    type="single"
+    value={value}
+    onValueChange={(device) => device && onChange(device as EmailPreviewDevice)}
+    className={cn('gap-1', className)}
+  >
+    <ToggleGroup.Item value="desktop" asChild>
+      <Button variant="ghost" size="icon" aria-label="Desktop preview">
+        <IconDeviceDesktop className="size-4" />
+      </Button>
+    </ToggleGroup.Item>
+    <ToggleGroup.Item value="mobile" asChild>
+      <Button variant="ghost" size="icon" aria-label="Mobile preview">
+        <IconDeviceMobile className="size-4" />
+      </Button>
+    </ToggleGroup.Item>
+  </ToggleGroup>
+);

package/src/modules/email-editor/components/EmailPreviewFrame.tsx

@@ -0,0 +1,35 @@
+import { cn } from 'erxes-ui/lib';
+import { EmailPreviewDevice } from '../types';
+
+export interface EmailPreviewFrameProps {
+  html: string;
+  className?: string;
+  /** The width the email is read at. Mobile is where most of it is read. */
+  device?: EmailPreviewDevice;
+}
+
+export const EmailPreviewFrame = ({
+  html,
+  className,
+  device = 'desktop',
+}: EmailPreviewFrameProps) => (
+  <div
+    className={cn(
+      'flex min-h-0 w-full justify-center',
+      device === 'mobile' && 'bg-muted/40 p-4',
+      className,
+    )}
+  >
+    <iframe
+      title="Email preview"
+      srcDoc={html}
+      sandbox="allow-popups allow-popups-to-escape-sandbox"
+      className={cn(
+        'h-full border-0 bg-white',
+        device === 'mobile'
+          ? 'w-[390px] max-w-full rounded-xl border shadow-sm'
+          : 'w-full',
+      )}
+    />
+  </div>
+);

package/src/modules/email-editor/components/EmailTableBackground.tsx

@@ -0,0 +1,134 @@
+import { IconCheck, IconPaint } from '@tabler/icons-react';
+import type { Editor } from '@tiptap/core';
+import { Button, Popover, ToggleGroup, Tooltip } from 'erxes-ui/components';
+import { useState } from 'react';
+import type { TEmailTableBackgroundScope } from '../extensions/table';
+
+/**
+ * Backgrounds an email can wear: pale enough to keep text readable in a client
+ * that ignores the colour the text was given.
+ */
+const BACKGROUNDS = [
+  '#f9fafb',
+  '#f3f4f6',
+  '#e5e7eb',
+  '#fef2f2',
+  '#fff7ed',
+  '#fefce8',
+  '#f0fdf4',
+  '#eff6ff',
+  '#eef2ff',
+  '#faf5ff',
+];
+
+const SCOPES: { value: TEmailTableBackgroundScope; label: string }[] = [
+  { value: 'cell', label: 'Cell' },
+  { value: 'row', label: 'Row' },
+  { value: 'column', label: 'Column' },
+  { value: 'table', label: 'Table' },
+];
+
+/** What the caret's cell is currently painted with, header or body. */
+const currentBackground = (editor: Editor): string | undefined =>
+  editor.getAttributes('tableHeader').backgroundColor ||
+  editor.getAttributes('tableCell').backgroundColor;
+
+export const EmailTableBackground = ({ editor }: { editor: Editor }) => {
+  const [open, setOpen] = useState(false);
+  const [scope, setScope] = useState<TEmailTableBackgroundScope>('cell');
+
+  const value = currentBackground(editor);
+
+  const apply = (color: string | null) => {
+    editor.view.focus();
+    editor.commands.setTableBackground({ color, scope });
+    setOpen(false);
+  };
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <Tooltip>
+        <Tooltip.Trigger asChild>
+          <Popover.Trigger asChild>
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon"
+              className="size-7"
+              aria-label="Background color"
+              // Keeps the cell selection, which every table command reads.
+              onMouseDown={(event) => event.preventDefault()}
+            >
+              <IconPaint className="size-4" style={{ color: value }} />
+            </Button>
+          </Popover.Trigger>
+        </Tooltip.Trigger>
+        <Tooltip.Content side="bottom">Background color</Tooltip.Content>
+      </Tooltip>
+
+      <Popover.Content
+        className="w-60 space-y-2 p-2"
+        align="center"
+        side="top"
+        onMouseDown={(event) => event.preventDefault()}
+      >
+        <ToggleGroup
+          type="single"
+          value={scope}
+          onValueChange={(next) =>
+            next && setScope(next as TEmailTableBackgroundScope)
+          }
+          className="grid grid-cols-4 gap-1"
+        >
+          {SCOPES.map(({ value: option, label }) => (
+            <ToggleGroup.Item key={option} value={option} asChild>
+              <Button variant="secondary" size="sm" className="h-7 border">
+                <span className="text-xs font-normal">{label}</span>
+              </Button>
+            </ToggleGroup.Item>
+          ))}
+        </ToggleGroup>
+
+        <div className="grid grid-cols-5 gap-1">
+          {BACKGROUNDS.map((color) => (
+            <button
+              key={color}
+              type="button"
+              aria-label={color}
+              className="flex aspect-3/2 items-center justify-center rounded border transition-transform hover:scale-105"
+              style={{ backgroundColor: color }}
+              onClick={() => apply(color)}
+            >
+              {value === color && <IconCheck className="size-4" />}
+            </button>
+          ))}
+        </div>
+
+        <div className="relative">
+          <input
+            type="color"
+            aria-label="Custom background color"
+            className="h-7 w-full cursor-pointer rounded border bg-background"
+            value={value || '#ffffff'}
+            onChange={(event) =>
+              editor.commands.setTableBackground({
+                color: event.target.value,
+                scope,
+              })
+            }
+          />
+        </div>
+
+        <Button
+          type="button"
+          variant="secondary"
+          size="sm"
+          className="w-full"
+          onClick={() => apply(null)}
+        >
+          No color
+        </Button>
+      </Popover.Content>
+    </Popover>
+  );
+};

package/src/modules/email-editor/components/EmailTableToolbar.tsx

@@ -0,0 +1,82 @@
+import {
+  IconColumnInsertLeft,
+  IconColumnInsertRight,
+  IconColumnRemove,
+  IconRowInsertBottom,
+  IconRowInsertTop,
+  IconRowRemove,
+  IconTableOff,
+} from '@tabler/icons-react';
+import type { Editor } from '@tiptap/core';
+import { Button, Separator, Tooltip } from 'erxes-ui/components';
+import { useEffect, useState } from 'react';
+import { EmailTableBackground } from './EmailTableBackground';
+
+const ACTIONS = [
+  { label: 'Row above', icon: IconRowInsertTop, run: 'addRowBefore' },
+  { label: 'Row below', icon: IconRowInsertBottom, run: 'addRowAfter' },
+  { label: 'Delete row', icon: IconRowRemove, run: 'deleteRow' },
+  { label: 'Column left', icon: IconColumnInsertLeft, run: 'addColumnBefore' },
+  { label: 'Column right', icon: IconColumnInsertRight, run: 'addColumnAfter' },
+  { label: 'Delete column', icon: IconColumnRemove, run: 'deleteColumn' },
+  { label: 'Delete table', icon: IconTableOff, run: 'deleteTable' },
+] as const;
+
+/**
+ * Shown only while the caret is inside a table: the editor has no chrome of
+ * its own for one, and a table you cannot add a row to is not a table.
+ */
+export const EmailTableToolbar = ({ editor }: { editor: Editor | null }) => {
+  const [isInTable, setIsInTable] = useState(false);
+
+  useEffect(() => {
+    if (!editor) {
+      return;
+    }
+
+    const sync = () => setIsInTable(editor.isActive('table'));
+
+    sync();
+    editor.on('transaction', sync);
+
+    return () => {
+      editor.off('transaction', sync);
+    };
+  }, [editor]);
+
+  if (!editor || !isInTable) {
+    return null;
+  }
+
+  return (
+    <div className="flex items-center gap-1 rounded-md border bg-background p-1 shadow-sm">
+      {ACTIONS.map(({ label, icon: Icon, run }) => (
+        <Tooltip key={run}>
+          <Tooltip.Trigger asChild>
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon"
+              className="size-7"
+              aria-label={label}
+              // Without this the editor loses the cell selection on mousedown
+              // and every table command becomes a no-op.
+              onMouseDown={(event) => event.preventDefault()}
+              onClick={() => {
+                editor.view.focus();
+                editor.commands[run]();
+              }}
+            >
+              <Icon className="size-4" />
+            </Button>
+          </Tooltip.Trigger>
+          <Tooltip.Content side="bottom">{label}</Tooltip.Content>
+        </Tooltip>
+      ))}
+
+      <Separator.Inline />
+
+      <EmailTableBackground editor={editor} />
+    </div>
+  );
+};

package/src/modules/email-editor/components/index.ts

@@ -0,0 +1,3 @@
+export * from './EmailEditor';
+export * from './EmailPreviewDeviceToggle';
+export * from './EmailPreviewFrame';