@erxes/ui 0.0.0-stage → 3.2.20-1

package/src/modules/inputs/components/CurrencyField.tsx

@@ -0,0 +1,217 @@
+import { Popover } from 'erxes-ui/components';
+import { Combobox } from 'erxes-ui/components/combobox';
+import { Command } from 'erxes-ui/components/command';
+import { inputVariants } from 'erxes-ui/components/input';
+import { CURRENCY_CODES } from 'erxes-ui/constants';
+import { cn } from 'erxes-ui/lib/utils';
+import { CurrencyDisplay } from 'erxes-ui/modules/display/components/CurrencyDisplay';
+import { Currency, CurrencyCode } from 'erxes-ui/types';
+import React, { useRef, useState } from 'react';
+import { IMaskInput } from 'react-imask';
+import { Except } from 'type-fest';
+
+const DEFAULT_DISPLAY_SCALE = 2;
+const DEFAULT_EDIT_SCALE = 12;
+
+const CurrencyFieldRoot = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, children, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        'flex shadow-xs h-auto items-stretch rounded gap-px bg-muted',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+});
+
+CurrencyFieldRoot.displayName = 'CurrencyFieldRoot';
+
+const CurrencyValueInput = React.forwardRef<
+  React.ElementRef<typeof IMaskInput>,
+  Except<
+    React.ComponentPropsWithoutRef<typeof IMaskInput>,
+    'onChange' | 'value'
+  > & {
+    displayScale?: number;
+    editScale?: number;
+    onChange?: (value: number) => void;
+    value?: number;
+  }
+>(
+  (
+    {
+      value,
+      onChange,
+      className,
+      onFocus,
+      onBlur,
+      displayScale = DEFAULT_DISPLAY_SCALE,
+      editScale = DEFAULT_EDIT_SCALE,
+      ...props
+    },
+    ref,
+  ) => {
+    const [isFocused, setIsFocused] = useState(false);
+    const isFocusedRef = useRef(false);
+    const skipAcceptValueRef = useRef<string | null>(null);
+
+    const fullValue =
+      typeof value === 'number' && Number.isFinite(value)
+        ? value.toString()
+        : '';
+    const roundedValue =
+      typeof value === 'number' && Number.isFinite(value)
+        ? value.toFixed(displayScale)
+        : '';
+    const displayValue = isFocused ? fullValue : roundedValue;
+
+    return (
+      <IMaskInput
+        ref={ref}
+        mask={Number as any}
+        thousandsSeparator={','}
+        radix="."
+        scale={isFocused ? editScale : displayScale}
+        onAccept={(acceptedValue) => {
+          if (!isFocusedRef.current) {
+            return;
+          }
+
+          if (skipAcceptValueRef.current === acceptedValue) {
+            skipAcceptValueRef.current = null;
+            return;
+          }
+
+          onChange?.(Number(acceptedValue));
+        }}
+        onFocus={(event) => {
+          isFocusedRef.current = true;
+          skipAcceptValueRef.current = fullValue;
+          setIsFocused(true);
+          onFocus?.(event);
+        }}
+        onBlur={(event) => {
+          isFocusedRef.current = false;
+          skipAcceptValueRef.current = null;
+          setIsFocused(false);
+          onBlur?.(event);
+        }}
+        value={displayValue}
+        autoComplete="off"
+        className={cn(inputVariants({ type: 'default' }), className)}
+        unmask
+        {...props}
+      />
+    );
+  },
+);
+
+const SelectCurrency = React.forwardRef<
+  React.ElementRef<typeof Combobox.Trigger>,
+  Except<
+    React.ComponentPropsWithoutRef<typeof Combobox.Trigger>,
+    'onChange' | 'value'
+  > & {
+    open?: boolean;
+    setOpen?: (open: boolean) => void;
+    value?: CurrencyCode;
+    currencies?: Record<CurrencyCode, Currency>;
+    display?: 'icon' | 'label' | 'code';
+    onChange?: (value: CurrencyCode) => void;
+  }
+>(
+  (
+    {
+      value,
+      currencies = CURRENCY_CODES,
+      className,
+      display = 'label',
+      onChange,
+      open,
+      setOpen,
+      ...props
+    },
+    ref,
+  ) => {
+    const [_open, _setOpen] = useState(false);
+    const selectedCurrency = value ? currencies[value] : undefined;
+
+    return (
+      <Popover modal open={open || _open} onOpenChange={setOpen || _setOpen}>
+        <Combobox.Trigger className={className} ref={ref} {...props}>
+          {selectedCurrency ? (
+            <CurrencyDisplay code={value} variant={display} />
+          ) : (
+            <Combobox.Value placeholder="Select currency" />
+          )}
+        </Combobox.Trigger>
+        <Combobox.Content>
+          <SelectCurrencyCommand
+            currencies={currencies}
+            value={value}
+            onSelect={(code) => {
+              onChange?.(code as CurrencyCode);
+              setOpen?.(false);
+              _setOpen(false);
+            }}
+          />
+        </Combobox.Content>
+      </Popover>
+    );
+  },
+);
+
+const SelectCurrencyCommand = ({
+  currencies = CURRENCY_CODES,
+  value,
+  onSelect,
+  focusOnMount,
+}: {
+  currencies?: Record<CurrencyCode, Currency>;
+  value?: CurrencyCode;
+  onSelect: (code: CurrencyCode) => void;
+  focusOnMount?: boolean;
+}) => {
+  const sortedCurrencies = Object.entries(currencies).sort((a) => {
+    if (a[0] === value) {
+      return -1;
+    }
+    return 1;
+  });
+
+  return (
+    <Command>
+      <Command.Input
+        placeholder="Search currency"
+        focusOnMount={focusOnMount}
+      />
+      <Command.List>
+        <Command.Empty>No currency found</Command.Empty>
+        {sortedCurrencies.map(([code, { label, Icon }]) => (
+          <Command.Item
+            key={code}
+            value={code + ' ' + label}
+            onSelect={() => onSelect(code as CurrencyCode)}
+          >
+            <Icon />
+            {label}
+            <Combobox.Check checked={value === code} />
+          </Command.Item>
+        ))}
+      </Command.List>
+    </Command>
+  );
+};
+
+export const CurrencyField = Object.assign(CurrencyFieldRoot, {
+  ValueInput: CurrencyValueInput,
+  SelectCurrency: SelectCurrency,
+  SelectCurrencyCommand: SelectCurrencyCommand,
+});

package/src/modules/inputs/components/EmailField.tsx

@@ -0,0 +1,425 @@
+import {
+  IconBookmark,
+  IconBookmarkFilled,
+  IconCircleDashed,
+  IconCircleDashedCheck,
+  IconDots,
+  IconEdit,
+  IconPlus,
+  IconTrash,
+} from '@tabler/icons-react';
+import {
+  Button,
+  DropdownMenu,
+  Input,
+  Separator,
+  TextOverflowTooltip,
+  Form,
+} from 'erxes-ui/components';
+import { useAtom, useAtomValue, useSetAtom } from 'jotai';
+
+import {
+  emailsFamilyState,
+  showEmailInputFamilyState,
+  editingEmailFamilyState,
+} from '../states/emailFieldStates';
+import { useEffect, useRef } from 'react';
+import { useAutoAnimate } from '@formkit/auto-animate/react';
+import { cn } from 'erxes-ui/lib';
+import { useEmailFields } from '../hooks/useEmailFields';
+import { EmailFieldsContext } from '../contexts/EmailFieldsContext';
+import { emailSchema } from '../validations/emailValidation';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import { formatEmails } from 'erxes-ui/modules/display/utils/formatEmails';
+import { ValidationStatus } from 'erxes-ui/types';
+
+export type TEmailsOnValueChange = ({
+  primaryEmail,
+  emails,
+  emailValidationStatus,
+}: {
+  primaryEmail: string;
+  emails: string[];
+  emailValidationStatus: ValidationStatus;
+}) => void;
+
+export interface IEmailField {
+  email?: string;
+  status?: ValidationStatus;
+  isPrimary?: boolean;
+}
+
+export type TEmails = IEmailField[];
+
+export interface IEmailFieldProps {
+  primaryEmail: string;
+  emails: string[];
+  emailValidationStatus: ValidationStatus;
+}
+
+export const EmailFieldsProvider = ({
+  children,
+  recordId,
+  onValueChange,
+  noValidation,
+  onValidationStatusChange,
+}: {
+  children: React.ReactNode;
+  recordId: string;
+  onValueChange: TEmailsOnValueChange;
+  noValidation?: boolean;
+  onValidationStatusChange?: (status: ValidationStatus) => void;
+}) => {
+  const handleValueChange = (emails: TEmails) => {
+    const {
+      primaryEmail,
+      emails: newEmails,
+      emailValidationStatus,
+    } = emails.reduce(
+      (acc, email) => {
+        if (email.isPrimary) {
+          acc.primaryEmail = email.email || '';
+          acc.emailValidationStatus = email.status || ValidationStatus.Invalid;
+        } else if (email.email) {
+          acc.emails.push(email.email);
+        }
+        return acc;
+      },
+      {
+        primaryEmail: '',
+        emails: [] as string[],
+        emailValidationStatus: ValidationStatus.Invalid,
+      },
+    );
+    onValueChange?.({
+      primaryEmail,
+      emails: newEmails,
+      emailValidationStatus,
+    });
+  };
+
+  return (
+    <EmailFieldsContext.Provider
+      value={{
+        recordId,
+        onValueChange: handleValueChange,
+        noValidation,
+        onValidationStatusChange,
+      }}
+    >
+      {children}
+    </EmailFieldsContext.Provider>
+  );
+};
+
+export const EmailListField = ({
+  recordId,
+  onValueChange,
+  onValidationStatusChange,
+  noValidation,
+  primaryEmail,
+  emails,
+  emailValidationStatus,
+}: IEmailFieldProps & {
+  recordId: string;
+  onValueChange: TEmailsOnValueChange;
+  onValidationStatusChange?: (status: ValidationStatus) => void;
+  noValidation?: boolean;
+}) => {
+  const formattedEmails = formatEmails(
+    primaryEmail,
+    emails,
+    emailValidationStatus,
+  );
+  const setEmails = useSetAtom(emailsFamilyState(recordId));
+  const setShowEmailInput = useSetAtom(showEmailInputFamilyState(recordId));
+
+  useEffect(() => {
+    setEmails(formattedEmails);
+    return () => {
+      setShowEmailInput(false);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [formattedEmails, setEmails]);
+
+  return (
+    <EmailFieldsProvider
+      recordId={recordId}
+      onValueChange={onValueChange}
+      noValidation={noValidation}
+      onValidationStatusChange={onValidationStatusChange}
+    >
+      <EmailList />
+      <EmailForm />
+    </EmailFieldsProvider>
+  );
+};
+
+const EmailList = () => {
+  const { recordId } = useEmailFields();
+  const emails = useAtomValue(emailsFamilyState(recordId));
+  const [animationParent] = useAutoAnimate();
+  const mounted = useRef(false);
+
+  useEffect(() => {
+    mounted.current = true;
+  }, []);
+
+  if (emails.length === 0) {
+    return <div className="pt-1" />;
+  }
+
+  return (
+    <div
+      ref={mounted.current ? animationParent : null}
+      className="space-y-1 p-1"
+    >
+      {emails.map(
+        (email) =>
+          email.email && (
+            <div
+              className="flex items-center overflow-hidden gap-1 w-full"
+              key={email.email}
+            >
+              <EmailField {...email} />
+              <EmailOptions {...email} />
+            </div>
+          ),
+      )}
+    </div>
+  );
+};
+
+const EmailField = ({ email, status, isPrimary }: IEmailField) => {
+  return (
+    <Button
+      variant="secondary"
+      className={cn(
+        'w-full font-medium text-left justify-start px-2 flex-auto overflow-hidden',
+        isPrimary && 'text-primary bg-primary/10 hover:bg-primary/20',
+      )}
+      size="lg"
+    >
+      {status === ValidationStatus.Valid ? (
+        <IconCircleDashedCheck className="text-success" />
+      ) : (
+        <IconCircleDashed className="text-muted-foreground" />
+      )}
+      <TextOverflowTooltip value={email} />
+      {isPrimary && <IconBookmarkFilled className="text-primary" />}
+    </Button>
+  );
+};
+
+const EmailOptions = ({
+  email,
+  status,
+  isPrimary,
+}: IEmailField & { isPrimary?: boolean }) => {
+  const { recordId, onValueChange, noValidation, onValidationStatusChange } =
+    useEmailFields();
+  const emails = useAtomValue(emailsFamilyState(recordId));
+  const setEditingEmail = useSetAtom(editingEmailFamilyState(recordId));
+  const setShowEmailInput = useSetAtom(showEmailInputFamilyState(recordId));
+  const handleSetPrimaryEmail = () => {
+    if (isPrimary) return;
+    onValueChange?.([
+      { email, status, isPrimary: true },
+      ...(emails || [])
+        .filter((e) => e.email !== email)
+        .map((e) => ({ ...e, isPrimary: false })),
+    ]);
+  };
+  const handleEditClick = () => {
+    setShowEmailInput(true);
+    setEditingEmail(email || null);
+  };
+
+  const handleVerificationChange = (value: string) => {
+    if (noValidation) return;
+    if (value === status) return;
+    onValidationStatusChange?.(value as ValidationStatus);
+  };
+  const handleDeleteClick = () => {
+    onValueChange?.(emails.filter((e) => e.email !== email));
+  };
+  return (
+    <DropdownMenu>
+      <DropdownMenu.Trigger asChild>
+        <Button
+          variant="secondary"
+          className="w-full font-medium size-8 shrink-0"
+          size="icon"
+        >
+          <IconDots />
+        </Button>
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content
+        side="right"
+        className="min-w-48 text-sm"
+        sideOffset={8}
+        alignOffset={-4}
+        align="start"
+      >
+        <DropdownMenu.Item onClick={handleSetPrimaryEmail}>
+          {isPrimary ? (
+            <IconBookmarkFilled className="text-primary" />
+          ) : (
+            <IconBookmark />
+          )}
+          {isPrimary ? 'Primary email' : 'Set as primary email'}
+        </DropdownMenu.Item>
+        <DropdownMenu.Item onClick={handleEditClick}>
+          <IconEdit />
+          Edit
+        </DropdownMenu.Item>
+
+        {isPrimary && !noValidation && (
+          <>
+            <DropdownMenu.Separator />
+            <DropdownMenu.RadioGroup
+              value={status}
+              onValueChange={handleVerificationChange}
+            >
+              <DropdownMenu.RadioItem value={ValidationStatus.Valid}>
+                <IconCircleDashedCheck className="text-success data-[state=active]:bg-muted " />
+                Verified
+              </DropdownMenu.RadioItem>
+              <DropdownMenu.RadioItem value={ValidationStatus.Invalid}>
+                <IconCircleDashed className="text-muted-foreground" />
+                Unverified
+              </DropdownMenu.RadioItem>
+            </DropdownMenu.RadioGroup>
+          </>
+        )}
+        <DropdownMenu.Separator />
+        <DropdownMenu.Item
+          className="text-destructive"
+          onClick={handleDeleteClick}
+        >
+          <IconTrash />
+          Delete
+        </DropdownMenu.Item>
+      </DropdownMenu.Content>
+    </DropdownMenu>
+  );
+};
+
+const EmailForm = () => {
+  const { recordId } = useEmailFields();
+  const emails = useAtomValue(emailsFamilyState(recordId));
+  const [editingEmail, setEditingEmail] = useAtom(
+    editingEmailFamilyState(recordId),
+  );
+  const { onValueChange } = useEmailFields();
+  const form = useForm<z.infer<typeof emailSchema>>({
+    resolver: zodResolver(emailSchema),
+    defaultValues: {
+      email: '',
+    },
+  });
+  const [showEmailInput, setShowEmailInput] = useAtom(
+    showEmailInputFamilyState(recordId),
+  );
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  useEffect(() => {
+    if (!showEmailInput) return;
+    setTimeout(() => {
+      inputRef.current?.focus();
+    }, 180);
+    if (editingEmail) {
+      form.setValue('email', editingEmail);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [showEmailInput, editingEmail]);
+
+  useEffect(() => {
+    if (emails.filter((email) => !!email.email).length === 0) {
+      setShowEmailInput(true);
+      setTimeout(() => {
+        inputRef.current?.focus();
+      });
+    } else {
+      setShowEmailInput(false);
+    }
+  }, [emails, setShowEmailInput]);
+  const onEmailEdit = (newEmail: string, prevEmail: string) => {
+    onValueChange?.(
+      emails.map((emailItem) =>
+        emailItem.email === prevEmail
+          ? { ...emailItem, email: newEmail }
+          : emailItem,
+      ),
+    );
+    form.reset();
+    setEditingEmail(null);
+  };
+  const onEmailAdd = (email: string) => {
+    if (emails.length === 0) {
+      onValueChange?.([
+        { email, status: ValidationStatus.Invalid, isPrimary: true },
+      ]);
+    } else {
+      onValueChange?.([...emails, { email, status: ValidationStatus.Invalid }]);
+    }
+    form.reset();
+  };
+
+  return (
+    <Form {...form}>
+      <form
+        onSubmit={form.handleSubmit(({ email }) => {
+          if (editingEmail) {
+            onEmailEdit(email, editingEmail);
+          } else {
+            onEmailAdd(email);
+          }
+        })}
+      >
+        {showEmailInput && (
+          <Form.Field
+            name="email"
+            control={form.control}
+            render={({ field }) => (
+              <div className="p-1 pt-0">
+                <Input
+                  placeholder={editingEmail ? 'Edit email' : 'Add email'}
+                  variant="secondary"
+                  className={cn(
+                    form.formState.errors.email &&
+                      'focus-visible:shadow-destructive',
+                  )}
+                  {...field}
+                  ref={(el) => {
+                    field.ref(el);
+                    inputRef.current = el;
+                  }}
+                />
+              </div>
+            )}
+          />
+        )}
+        <Separator />
+        <div className="p-1">
+          <Button
+            variant="secondary"
+            className="w-full"
+            type="submit"
+            onClick={(e) => {
+              if (!showEmailInput) {
+                e.preventDefault();
+              }
+              setShowEmailInput(true);
+            }}
+          >
+            <IconPlus />
+            {editingEmail ? 'Edit email' : 'Add email'}
+          </Button>
+        </div>
+      </form>
+    </Form>
+  );
+};