@erxes/ui 0.0.0-stage → 3.2.19-2

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

@@ -0,0 +1,121 @@
+import { Input } from 'erxes-ui/components';
+import React, { useEffect, useState } from 'react';
+import { FullNameFieldContext } from 'erxes-ui/modules/inputs/contexts/FullNameFieldContext';
+import { useFullNameField } from 'erxes-ui/modules/inputs/hooks/useFullNameField';
+import { PopoverScoped } from 'erxes-ui/modules/hotkey';
+import { RecordTableInlineCell } from 'erxes-ui/modules/record-table/components/RecordTableCellInline';
+
+const FullNameFieldProvider = ({
+  children,
+  firstName,
+  lastName,
+  setFirstName,
+  setLastName,
+}: {
+  children: React.ReactNode;
+  firstName: string;
+  lastName: string;
+  setFirstName: (firstName: string) => void;
+  setLastName: (lastName: string) => void;
+}) => {
+  return (
+    <FullNameFieldContext.Provider
+      value={{
+        firstName,
+        lastName,
+        setFirstName,
+        setLastName,
+        fullName: `${firstName || ''}${firstName ? ' ' : ''}${lastName || ''}`,
+      }}
+    >
+      {children}
+    </FullNameFieldContext.Provider>
+  );
+};
+
+export const FullNameValue = () => {
+  const { fullName } = useFullNameField();
+  if (fullName.replace(/\s/g, '').length === 0)
+    return <span className="text-accent-foreground/70">Unknown</span>;
+  return fullName;
+};
+
+const FullNameFieldContent = () => {
+  const { firstName, lastName, setFirstName, setLastName } = useFullNameField();
+  return (
+    <div className="flex gap-px bg-border w-72 rounded shadow-sm">
+      <Input
+        value={firstName}
+        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+          setFirstName(e.target.value);
+        }}
+        className="rounded-r-none focus-visible:z-10 max-w-36 shadow-none"
+        placeholder="First name"
+      />
+      <Input
+        value={lastName}
+        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+          setLastName(e.target.value);
+        }}
+        className="rounded-l-none focus-visible:z-10 max-w-36 shadow-none"
+        placeholder="Last name"
+      />
+    </div>
+  );
+};
+
+export const FullNameField = ({
+  children,
+  firstName,
+  lastName,
+  onValueChange,
+  scope,
+}: {
+  children: React.ReactNode;
+  scope: string;
+  firstName?: string;
+  lastName?: string;
+  onValueChange: (firstName: string, lastName: string) => void;
+}) => {
+  const [firstNameState, setFirstName] = useState<string>(firstName || '');
+  const [lastNameState, setLastName] = useState<string>(lastName || '');
+  const [open, setOpen] = useState<boolean>(false);
+
+  const handleOpenChange = (op: boolean) => {
+    setOpen(op);
+    if (!op) {
+      onValueChange(firstNameState.trim(), lastNameState.trim());
+    }
+  };
+
+  useEffect(() => {
+    if (firstNameState === firstName && lastNameState === lastName) {
+      return;
+    }
+    setFirstName(firstName || '');
+    setLastName(lastName || '');
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [firstName, lastName]);
+
+  return (
+    <FullNameFieldProvider
+      firstName={firstNameState}
+      lastName={lastNameState}
+      setFirstName={setFirstName}
+      setLastName={setLastName}
+    >
+      <PopoverScoped
+        scope={scope}
+        open={open}
+        onOpenChange={handleOpenChange}
+        closeOnEnter
+        dependencies={[firstNameState, lastNameState]}
+      >
+        {children}
+        <RecordTableInlineCell.Content className="w-72">
+          <FullNameFieldContent />
+        </RecordTableInlineCell.Content>
+      </PopoverScoped>
+    </FullNameFieldProvider>
+  );
+};

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

@@ -0,0 +1,46 @@
+import React, { useState } from 'react';
+import { Combobox, Command, Popover } from 'erxes-ui/components';
+import { INTL_LANGUAGES } from 'erxes-ui/constants/IntlLanguages';
+
+export const LanguageSelect = React.forwardRef<
+  React.ElementRef<typeof Combobox.Trigger>,
+  React.ComponentProps<typeof Combobox.Trigger> & {
+    value: string;
+    onValueChange: (value: string) => void;
+  }
+>(({ value, onValueChange, ...props }, ref) => {
+  const [open, setOpen] = useState(false);
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <Combobox.Trigger ref={ref} {...props}>
+        <Combobox.Value
+          placeholder="Select language"
+          value={Object.entries(INTL_LANGUAGES)
+            .find(([_, code]) => code === value)
+            ?.at(0)}
+        />
+      </Combobox.Trigger>
+      <Combobox.Content>
+        <Command>
+          <Command.Input />
+          <Command.List>
+            <Command.Empty>no language found</Command.Empty>
+            {Object.entries(INTL_LANGUAGES).map(([language, code]) => (
+              <Command.Item
+                key={code}
+                value={`${code}|${language}`}
+                onSelect={() => {
+                  onValueChange(code);
+                  setOpen(false);
+                }}
+              >
+                {language}
+                <Combobox.Check checked={value === code} />
+              </Command.Item>
+            ))}
+          </Command.List>
+        </Command>
+      </Combobox.Content>
+    </Popover>
+  );
+});

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

@@ -0,0 +1,29 @@
+import { IMaskInput } from 'react-imask';
+import { cn } from 'erxes-ui/lib/utils';
+import { inputVariants } from 'erxes-ui/components/input';
+import { Except } from 'type-fest';
+
+export const NumberInput = ({
+  onChange,
+  value,
+  className,
+  ...props
+}: Except<
+  React.ComponentPropsWithoutRef<typeof IMaskInput>,
+  'onChange' | 'value'
+> & {
+  onChange?: (value: number) => void;
+  value?: number;
+}) => (
+  <IMaskInput
+    mask={Number as any}
+    thousandsSeparator={','}
+    radix="."
+    onAccept={(val) => onChange?.(Number(val))}
+    value={value + ''}
+    autoComplete="off"
+    className={cn(inputVariants({ type: 'default' }), className)}
+    unmask
+    {...props}
+  />
+);

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

@@ -0,0 +1,491 @@
+import {
+  IconBookmark,
+  IconBookmarkFilled,
+  IconCircleDashed,
+  IconCircleDashedCheck,
+  IconDots,
+  IconEdit,
+  IconPlus,
+  IconTrash,
+} from '@tabler/icons-react';
+import { PhoneInput } from 'erxes-ui/modules/record-field/meta-inputs/components/PhoneInput';
+import {
+  Badge,
+  Button,
+  DropdownMenu,
+  Separator,
+  TextOverflowTooltip,
+} from 'erxes-ui/components';
+import { useAtom, useAtomValue, useSetAtom } from 'jotai';
+import {
+  phonesFamilyState,
+  showPhoneInputFamilyState,
+  editingPhoneFamilyState,
+} from '../states/phoneFieldStates';
+import { formatPhoneNumber } from 'erxes-ui/utils/format';
+import { forwardRef, useEffect, useRef, useState } from 'react';
+import { useAutoAnimate } from '@formkit/auto-animate/react';
+import { cn } from 'erxes-ui/lib';
+import { usePhoneFields } from '../hooks/usePhoneFields';
+import { PhoneFieldsContext } from '../contexts/PhoneFieldsContext';
+import { ValidationStatus } from 'erxes-ui/types';
+import { formatPhones } from 'erxes-ui/modules/display/utils/formatPhones';
+import { useTranslation } from 'react-i18next';
+
+export interface IPhoneField {
+  phone?: string;
+  status?: ValidationStatus;
+  isPrimary?: boolean;
+}
+
+export type TPhones = IPhoneField[];
+
+const PhoneListContainer = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => {
+  return <div {...props} className={cn('p-1 space-y-1', className)} />;
+};
+PhoneListContainer.displayName = 'PhoneListContainer';
+
+const PhoneFieldsProvider = forwardRef<
+  HTMLDivElement,
+  {
+    children: React.ReactNode;
+    recordId: string;
+    onValueChange: (phones: TPhones) => void;
+    onValidationStatusChange?: (status: ValidationStatus) => void;
+  } & React.HTMLAttributes<HTMLDivElement>
+>(
+  (
+    { children, recordId, onValueChange, onValidationStatusChange, ...props },
+    ref,
+  ) => {
+    return (
+      <PhoneFieldsContext.Provider
+        value={{ recordId, onValueChange, onValidationStatusChange }}
+      >
+        <div ref={ref} {...props}>
+          {children}
+        </div>
+      </PhoneFieldsContext.Provider>
+    );
+  },
+);
+PhoneFieldsProvider.displayName = 'PhoneFieldsProvider';
+
+const PhoneList = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => {
+  const { recordId } = usePhoneFields();
+  const phones = useAtomValue(phonesFamilyState(recordId));
+  const [animationParent] = useAutoAnimate();
+
+  return (
+    <div
+      ref={animationParent}
+      className={cn('space-y-1', className)}
+      {...props}
+    >
+      {phones.map(
+        (phone) =>
+          phone.phone && (
+            <div
+              className="flex items-center overflow-hidden gap-1 w-full"
+              key={phone.phone}
+            >
+              <PhoneItem {...phone} />
+              <PhoneOptions {...phone} />
+            </div>
+          ),
+      )}
+    </div>
+  );
+};
+
+const PhoneItem = forwardRef<
+  HTMLButtonElement,
+  IPhoneField & React.ComponentProps<typeof Button>
+>(({ phone, status, isPrimary, className, ...props }, ref) => {
+  return (
+    <Button
+      ref={ref}
+      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',
+        className,
+      )}
+      size="lg"
+      {...props}
+    >
+      {status === ValidationStatus.Valid ? (
+        <IconCircleDashedCheck className="text-success" />
+      ) : (
+        <IconCircleDashed className="text-muted-foreground" />
+      )}
+      <TextOverflowTooltip value={formatPhoneNumber({ value: phone || '' })} />
+      {isPrimary && <IconBookmarkFilled className="text-primary" />}
+    </Button>
+  );
+});
+PhoneItem.displayName = 'PhoneItem';
+
+const PhoneOptions = forwardRef<
+  HTMLButtonElement,
+  IPhoneField & React.ComponentProps<typeof Button>
+>(({ phone, status, isPrimary, className, ...props }, ref) => {
+  const { recordId, onValueChange, onValidationStatusChange } =
+    usePhoneFields();
+  const phones = useAtomValue(phonesFamilyState(recordId));
+  const setEditingPhone = useSetAtom(editingPhoneFamilyState(recordId));
+  const setShowPhoneInput = useSetAtom(showPhoneInputFamilyState(recordId));
+
+  const handleSetPrimaryPhone = () => {
+    if (isPrimary) return;
+    onValueChange?.([
+      { phone, status, isPrimary: true },
+      ...(phones || [])
+        .filter((e) => e.phone !== phone)
+        .map((e) => ({ ...e, isPrimary: false })),
+    ]);
+  };
+
+  const handleEditClick = () => {
+    setShowPhoneInput(true);
+    setEditingPhone(phone || null);
+  };
+
+  const handleVerificationChange = (value: string) => {
+    onValidationStatusChange?.(value);
+  };
+
+  const handleDeleteClick = () => {
+    onValueChange?.(phones.filter((e) => e.phone !== phone));
+  };
+
+  return (
+    <DropdownMenu>
+      <DropdownMenu.Trigger asChild>
+        <Button
+          ref={ref}
+          variant="secondary"
+          className={cn('w-full font-medium size-8 shrink-0', className)}
+          size="icon"
+          {...props}
+        >
+          <IconDots />
+        </Button>
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content
+        side="right"
+        className="min-w-48 text-sm"
+        sideOffset={8}
+        alignOffset={-4}
+        align="start"
+      >
+        <DropdownMenu.Item onClick={handleSetPrimaryPhone}>
+          {isPrimary ? (
+            <IconBookmarkFilled className="text-primary" />
+          ) : (
+            <IconBookmark />
+          )}
+          {isPrimary ? 'Primary phone' : 'Set as primary phone'}
+        </DropdownMenu.Item>
+        <DropdownMenu.Item onClick={handleEditClick}>
+          <IconEdit />
+          Edit
+        </DropdownMenu.Item>
+
+        {isPrimary && (
+          <>
+            <DropdownMenu.Separator />
+            <DropdownMenu.RadioGroup onValueChange={handleVerificationChange}>
+              <DropdownMenu.RadioItem value="verified">
+                <IconCircleDashedCheck className="text-success data-[state=active]:bg-muted " />
+                Verified
+              </DropdownMenu.RadioItem>
+              <DropdownMenu.RadioItem value="unverified">
+                <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>
+  );
+});
+PhoneOptions.displayName = 'PhoneOptions';
+
+const PhoneForm = forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & {
+    defaultCountry?: string;
+  }
+>(({ className, defaultCountry = 'MN', ...props }, ref) => {
+  const { recordId } = usePhoneFields();
+  const phones = useAtomValue(phonesFamilyState(recordId));
+  const [newPhone, setNewPhone] = useState<string>('');
+  const [isPhoneValid, setIsPhoneValid] = useState<boolean>(true);
+  const [editingPhone, setEditingPhone] = useAtom(
+    editingPhoneFamilyState(recordId),
+  );
+
+  const { onValueChange } = usePhoneFields();
+  const [showPhoneInput, setShowPhoneInput] = useAtom(
+    showPhoneInputFamilyState(recordId),
+  );
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  useEffect(() => {
+    if (!showPhoneInput) return;
+    setTimeout(() => {
+      inputRef.current?.focus();
+    }, 180);
+    if (editingPhone) {
+      setNewPhone(editingPhone);
+    }
+  }, [showPhoneInput, editingPhone]);
+
+  useEffect(() => {
+    if (phones.filter((phone) => !!phone.phone).length === 0) {
+      setShowPhoneInput(true);
+      setTimeout(() => {
+        inputRef.current?.focus();
+      });
+    } else {
+      setShowPhoneInput(false);
+    }
+  }, [phones, setShowPhoneInput]);
+  const onPhoneEdit = (newPhone: string, prevPhone: string) => {
+    onValueChange?.(
+      phones.map((phoneItem) =>
+        phoneItem.phone === prevPhone
+          ? { ...phoneItem, phone: newPhone }
+          : phoneItem,
+      ),
+    );
+    setNewPhone('');
+    setEditingPhone(null);
+  };
+
+  const onPhoneAdd = (phone: string) => {
+    if (phones.length === 0) {
+      onValueChange?.([
+        { phone, status: ValidationStatus.Invalid, isPrimary: true },
+      ]);
+    } else {
+      onValueChange?.([...phones, { phone, status: ValidationStatus.Invalid }]);
+    }
+    setNewPhone('');
+  };
+  const { t } = useTranslation('contact', {
+    keyPrefix: 'customer.detail',
+  });
+
+  return (
+    <div ref={ref} className={className} {...props}>
+      {showPhoneInput && (
+        <div className="px-1 pb-1">
+          <PhoneInput
+            placeholder={editingPhone ? t('edit-phone') : t('add-phone')}
+            defaultCountry="MN"
+            value={newPhone}
+            onChange={(phone) => {
+              setNewPhone(phone);
+            }}
+            onValidationChange={(isValid) => {
+              setIsPhoneValid(isValid);
+            }}
+            onEnter={(phone) => {
+              if (isPhoneValid && editingPhone) {
+                onPhoneEdit(phone, editingPhone);
+              } else if (isPhoneValid) {
+                onPhoneAdd(phone);
+              }
+            }}
+            ref={(el) => {
+              inputRef.current = el;
+            }}
+          />
+        </div>
+      )}
+      <Separator />
+      <div className="p-1">
+        <Button
+          variant="secondary"
+          className="w-full"
+          disabled={showPhoneInput && !isPhoneValid && newPhone.length > 0}
+          onClick={(e) => {
+            if (!showPhoneInput) setShowPhoneInput(true);
+            else if (isPhoneValid) {
+              if (editingPhone) {
+                onPhoneEdit(newPhone, editingPhone);
+              } else {
+                onPhoneAdd(newPhone);
+              }
+            }
+          }}
+        >
+          <IconPlus />
+          {editingPhone ? t('edit-phone') : t('add-phone')}
+        </Button>
+      </div>
+    </div>
+  );
+});
+PhoneForm.displayName = 'PhoneForm';
+
+interface PhoneListFieldProps extends IPhoneFieldProps {
+  recordId: string;
+  onValueChange: (values: IPhoneFieldProps) => void;
+  onValidationStatusChange?: (status: ValidationStatus) => void;
+}
+
+const PhoneListFieldRoot = forwardRef<
+  HTMLDivElement,
+  PhoneListFieldProps & React.HTMLAttributes<HTMLDivElement>
+>(
+  (
+    {
+      recordId,
+      onValueChange,
+      onValidationStatusChange,
+      className,
+      primaryPhone,
+      phones,
+      phoneValidationStatus,
+      ...props
+    },
+    ref,
+  ) => {
+    const setPhones = useSetAtom(phonesFamilyState(recordId));
+    const setShowPhoneInput = useSetAtom(showPhoneInputFamilyState(recordId));
+    const formattedPhones = formatPhones(
+      primaryPhone,
+      phones,
+      phoneValidationStatus,
+    );
+
+    useEffect(() => {
+      setPhones(formattedPhones);
+      return () => {
+        setShowPhoneInput(false);
+      };
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [phones, setPhones]);
+
+    const handleValueChange = (values: TPhones) => {
+      if (onValueChange) {
+        const { primaryPhone, phones, phoneValidationStatus } = values.reduce(
+          (acc, phone) => {
+            if (phone.isPrimary) {
+              acc.primaryPhone = phone.phone || '';
+              acc.phoneValidationStatus =
+                phone.status || ValidationStatus.Invalid;
+            } else if (phone.phone) {
+              acc.phones = [...(acc.phones || []), phone.phone];
+            }
+
+            return acc;
+          },
+          {} as IPhoneFieldProps,
+        );
+
+        onValueChange({
+          primaryPhone,
+          phones,
+          phoneValidationStatus,
+        });
+      }
+    };
+
+    return (
+      <PhoneField.Provider
+        ref={ref}
+        recordId={recordId}
+        onValueChange={handleValueChange}
+        onValidationStatusChange={onValidationStatusChange}
+        className={className}
+        {...props}
+      >
+        <PhoneListContainer>
+          <PhoneList />
+        </PhoneListContainer>
+        <PhoneForm />
+      </PhoneField.Provider>
+    );
+  },
+);
+PhoneListFieldRoot.displayName = 'PhoneListFieldRoot';
+
+export const PhonesBadgeDisplay = ({
+  phones,
+}: {
+  phones: TPhones | undefined;
+}) => {
+  const { recordId } = usePhoneFields();
+  const phonesFromAtom = useAtomValue(phonesFamilyState(recordId));
+
+  const phonesToDisplay = phones || phonesFromAtom;
+
+  return (
+    <div className="flex gap-2">
+      {phonesToDisplay?.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>
+        ) : null,
+      )}
+    </div>
+  );
+};
+
+export interface PhoneListFieldInlineCellProps {
+  recordId: string;
+  phones: TPhones;
+  onValueChange: (phones: TPhones) => void;
+  onValidationStatusChange?: (status: ValidationStatus) => void;
+  scope?: string;
+}
+
+export interface PhoneFieldDetailProps {
+  recordId: string;
+  phones: TPhones;
+  onValueChange: (phones: TPhones) => void;
+  onValidationStatusChange?: (status: ValidationStatus) => void;
+  scope?: string;
+}
+
+export interface IPhoneFieldProps {
+  primaryPhone: string;
+  phones: string[];
+  phoneValidationStatus?: ValidationStatus;
+}
+
+export const PhoneField = Object.assign(PhoneListFieldRoot, {
+  Provider: PhoneFieldsProvider,
+  Container: PhoneListContainer,
+  List: PhoneList,
+  Item: PhoneItem,
+  Options: PhoneOptions,
+  Form: PhoneForm,
+  BadgeDisplay: PhonesBadgeDisplay,
+});