@transferwise/components 46.112.1 → 46.113.1

package/src/expressiveMoneyInput/amountInput/AmountInput.tsx

@@ -0,0 +1,353 @@
+import { formatAmount } from '@transferwise/formatting';
+import { clsx } from 'clsx';
+import { AnimatePresence } from 'framer-motion';
+import { type ChangeEvent, type KeyboardEvent, useEffect, useMemo, useRef, useState } from 'react';
+import { useIntl } from 'react-intl';
+
+import { Props as ExpressiveMoneyInputProps } from '../ExpressiveMoneyInput';
+import { AnimatedNumber } from '../animatedNumber/AnimatedNumber';
+import { useFocus } from '../hooks/useFocus';
+import { useInputStyle } from '../hooks/useInputStyle';
+import {
+  getDecimalCount,
+  getDecimalSeparator,
+  getEnteredDecimalsCount,
+  getFormattedString,
+  getGroupSeparator,
+  getUnformattedNumber,
+  isAllowedInputKey,
+  isInputPossiblyOverflowing,
+} from './utils';
+
+type Props = {
+  id: string;
+  describedById?: string;
+  amount?: number | null;
+  currency: string;
+  autoFocus?: boolean;
+  onChange: (amount: number | null) => void;
+  onFocusChange?: (focused: boolean) => void;
+} & Pick<ExpressiveMoneyInputProps, 'loading'>;
+
+export const AmountInput = ({
+  id,
+  describedById,
+  amount,
+  currency,
+  autoFocus,
+  onChange,
+  onFocusChange,
+  loading,
+}: Props) => {
+  const intl = useIntl();
+  const { focus, setFocus, visualFocus, setVisualFocus } = useFocus();
+
+  const [value, setValue] = useState<string>(
+    amount
+      ? getFormattedString({
+          value: amount,
+          currency,
+          locale: intl.locale,
+        })
+      : '',
+  );
+  const numericValue = useMemo(() => {
+    return getUnformattedNumber({
+      value,
+      currency,
+      locale: intl.locale,
+    });
+  }, [value, currency, intl.locale]);
+
+  const valueWithFullDecimals = useMemo(() => {
+    return getFormattedString({
+      value: numericValue ?? 0,
+      currency,
+      locale: intl.locale,
+      alwaysShowDecimals: true,
+    });
+  }, [numericValue, currency, intl.locale]);
+
+  const ref = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (autoFocus) {
+      ref.current?.focus();
+    }
+  }, []);
+
+  const placeholder = getPlaceholder(currency, intl.locale);
+  const groupSeparator = getGroupSeparator(currency, intl.locale);
+  const decimalSeparator = getDecimalSeparator(currency, intl.locale);
+  const maxDecimalCount = getDecimalCount(currency, intl.locale);
+
+  const decimalPart = getDecimalPart(value, decimalSeparator);
+  const decimalMode = decimalSeparator && value.includes(decimalSeparator);
+
+  useEffect(() => {
+    if (!focus) {
+      setValue(
+        amount
+          ? getFormattedString({
+              value: amount,
+              currency,
+              locale: intl.locale,
+            })
+          : '',
+      );
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [amount]);
+
+  useEffect(() => {
+    onFocusChange?.(visualFocus);
+  }, [visualFocus]);
+
+  const shouldReformatAfterUserInput = (newValue: string) => {
+    // don't reformat if formatting would wipe out user's input
+    if (reformatValue(newValue) === '') {
+      return false;
+    }
+
+    const endsWithDecimalSeparator = decimalSeparator && newValue.endsWith(decimalSeparator);
+    const endsWithGroupSeparator = groupSeparator && newValue.endsWith(groupSeparator);
+
+    // if the user has entered a seperator to the end, formatting would delete it
+    if (endsWithDecimalSeparator || endsWithGroupSeparator) {
+      return false;
+    }
+
+    const containsDecimalSeparator = decimalSeparator && newValue.includes(decimalSeparator);
+
+    if (containsDecimalSeparator) {
+      const enteredDecimalsCount = getEnteredDecimalsCount(newValue, decimalSeparator);
+      // don't reformat until user has entered all the allowed decimals
+      // for example, we don't want 1.1 to be reformatted to 1.10 immediately
+      if (enteredDecimalsCount < maxDecimalCount) {
+        return false;
+      }
+    }
+
+    return true;
+  };
+
+  const reformatValue = (newValue: string) => {
+    const unformattedValue = getUnformattedNumber({
+      value: newValue,
+      currency,
+      locale: intl.locale,
+    });
+    const formattedValue = unformattedValue
+      ? getFormattedString({
+          value: unformattedValue,
+          currency,
+          locale: intl.locale,
+        })
+      : '';
+    return formattedValue;
+  };
+
+  const handleChange = (newValue: string) => {
+    const oldCursorPosition = ref.current?.selectionStart ?? 0;
+
+    const newFormattedString = shouldReformatAfterUserInput(newValue)
+      ? reformatValue(newValue)
+      : newValue;
+    setValue(newFormattedString);
+
+    const newNumber = getUnformattedNumber({
+      value: newFormattedString,
+      currency,
+      locale: intl.locale,
+    });
+
+    if (newNumber !== numericValue) {
+      if (numericValue || newNumber) {
+        onChange(newNumber);
+      }
+    }
+
+    const newCursorPosition = oldCursorPosition + (newFormattedString.length - newValue.length);
+    requestAnimationFrame(() => {
+      ref?.current?.setSelectionRange(newCursorPosition, newCursorPosition);
+    });
+  };
+
+  const handlePaste = (e: React.ClipboardEvent<HTMLInputElement>) => {
+    e.preventDefault();
+
+    const clipboardData = e.clipboardData?.getData('text/plain');
+    if (!clipboardData) {
+      return;
+    }
+
+    // need to sanitise the pasted value otherwise other validation logic will ignore the input entirely
+    const sanitisedValue = reformatValue(clipboardData);
+
+    handleChange(sanitisedValue);
+  };
+
+  const handleBlur = () => {
+    setFocus(false);
+    setValue(reformatValue(value));
+  };
+
+  const handleBackspace = (e: KeyboardEvent<HTMLInputElement>) => {
+    const input = e.target as HTMLInputElement;
+    // using the updated selection range after the backspace key has been processed, instead of the current selection range in state
+    const { value: currentValue, selectionStart, selectionEnd } = input;
+
+    if (selectionStart === selectionEnd && selectionStart && selectionStart > 0) {
+      const charBeforeCursor = currentValue[selectionStart - 1];
+
+      // if the user deletes a thousands separator, remove the digit before it as well
+      if (charBeforeCursor === groupSeparator) {
+        e.preventDefault();
+        const beforeCursor = currentValue.slice(0, selectionStart - 2);
+        const afterCursor = currentValue.slice(selectionStart);
+        const newValue = `${beforeCursor}${afterCursor}`;
+        input.setSelectionRange(beforeCursor.length, beforeCursor.length);
+        handleChange(newValue);
+      }
+    }
+  };
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+    setFocus(true);
+    if (!isAllowedInputKey(e)) {
+      e.preventDefault();
+    }
+
+    if (e.key === 'Backspace') {
+      handleBackspace(e);
+    }
+  };
+
+  const isAllowedInput = (e: ChangeEvent<HTMLInputElement>) => {
+    const hasMultipleDecimalSeparators =
+      decimalSeparator && e.target.value.split(decimalSeparator).length > 2;
+    if (hasMultipleDecimalSeparators) {
+      return false;
+    }
+
+    const newNumericValue = getUnformattedNumber({
+      value: e.target.value,
+      currency,
+      locale: intl.locale,
+    });
+    const maxLength = Number.MAX_SAFE_INTEGER.toString().length;
+    if (String(newNumericValue).length > maxLength) {
+      return false;
+    }
+
+    return true;
+  };
+
+  const addonContent = useMemo((): string | null | undefined => {
+    // because we're using a separate "addon" element for the placeholder decimals, there is a possibility that the input itself will become scrollable
+    // and the decimals will appear on top of the input. Safest thing to do is to just hide the addon if there is not enough room
+    if (isInputPossiblyOverflowing({ ref, value })) {
+      return null;
+    }
+    if (!decimalSeparator || !value) {
+      return null;
+    }
+
+    // if the user has typed a decimal separator, show the full decimal part as a placeholder
+    // this returns a string even if there is no content, typing should replace the placeholder immediately without animation
+    // otherwise there is an ugly animation when going from 1.23 to 1.2 due to AnimatePresence
+    if (focus && decimalMode) {
+      // reuse getDecimalPart
+      const fullDecimalPart = getDecimalPart(valueWithFullDecimals, decimalSeparator);
+      // show only the characters that are not already displayed by the input
+      return fullDecimalPart?.slice(decimalPart?.length);
+    }
+
+    // in unfocused state, always show the full decimal part unless the user has already entered decimals
+    if (!focus && !decimalMode) {
+      const [_, decimalPlaceholder] = placeholder.split(decimalSeparator);
+      return decimalSeparator + decimalPlaceholder;
+    }
+
+    return null;
+  }, [
+    decimalMode,
+    decimalPart?.length,
+    decimalSeparator,
+    focus,
+    placeholder,
+    value,
+    valueWithFullDecimals,
+  ]);
+
+  const style = useInputStyle({
+    // whenever decimals are shown, we need to account for the full decimal part for the font size calculation
+    value: addonContent ? valueWithFullDecimals : value,
+    focus: visualFocus,
+    inputElement: ref.current,
+    loading,
+  });
+
+  return (
+    <div className="wds-amount-input-container">
+      <div
+        className={clsx('wds-amount-input-input-container', 'np-text-display-large')}
+        style={style}
+      >
+        <input
+          ref={ref}
+          className="wds-amount-input-input"
+          id={id}
+          autoComplete="off"
+          inputMode="decimal"
+          value={value}
+          type="text"
+          placeholder={placeholder}
+          aria-describedby={describedById}
+          /* without this, the input tries to keep an aspect ratio and doesn't respect CSS width rules */
+          size={1}
+          onChange={(e) => {
+            if (isAllowedInput(e)) {
+              handleChange(e.target.value);
+            }
+          }}
+          onBlurCapture={() => handleBlur()}
+          onPaste={(e) => handlePaste(e)}
+          onFocus={() => {
+            setFocus(true);
+          }}
+          onBlur={() => {
+            setTimeout(() => setVisualFocus(false), 30);
+          }}
+          onKeyDown={(e) => handleKeyDown(e)}
+        />
+        <AnimatePresence initial={false}>
+          {addonContent !== null && (
+            <AnimatedNumber
+              className={clsx(
+                'wds-amount-input-placeholder',
+                visualFocus && 'wds-amount-input-placeholder-focus',
+              )}
+              onClick={() => ref.current?.focus()}
+            >
+              {addonContent}
+            </AnimatedNumber>
+          )}
+        </AnimatePresence>
+      </div>
+    </div>
+  );
+};
+
+const getPlaceholder = (currency: string, locale: string) => {
+  return formatAmount(0, currency, locale, { alwaysShowDecimals: true });
+};
+
+const getDecimalPart = (value: string, decimalSeparator: string | null) => {
+  if (!value || !decimalSeparator) {
+    return undefined;
+  }
+
+  const [_, decimalPart] = value.split(decimalSeparator);
+  return decimalPart ?? undefined;
+};

package/src/expressiveMoneyInput/amountInput/utils.spec.ts

@@ -0,0 +1,114 @@
+import {
+  getDecimalSeparator,
+  getFormattedString,
+  getGroupSeparator,
+  getUnformattedNumber,
+} from './utils';
+
+describe('utils', () => {
+  describe('getDecimalSeparator', () => {
+    it('gets decimal separator for Spanish', () => {
+      expect(getDecimalSeparator('EUR', 'es')).toBe(',');
+    });
+
+    it('gets decimal separator for English', () => {
+      expect(getDecimalSeparator('EUR', 'en')).toBe('.');
+    });
+
+    it('gets decimal separator for Spanish in HUF', () => {
+      expect(getDecimalSeparator('HUF', 'es')).toBe('');
+    });
+
+    it('gets decimal separator for English in HUF', () => {
+      expect(getDecimalSeparator('HUF', 'en')).toBe('');
+    });
+  });
+
+  describe('getGroupSeparator', () => {
+    it('gets group separator for Spanish', () => {
+      expect(getGroupSeparator('EUR', 'es')).toBe('.');
+    });
+
+    it('gets group separator for English', () => {
+      expect(getGroupSeparator('EUR', 'en')).toBe(',');
+    });
+
+    it('gets group separator for French', () => {
+      expect(getGroupSeparator('EUR', 'fr')).toBe(' ');
+    });
+  });
+
+  describe('getUnformattedNumber', () => {
+    it('can turn a Spanish string into a number', () => {
+      expect(
+        getUnformattedNumber({
+          value: '123.456,00',
+          currency: 'EUR',
+          locale: 'es',
+        }),
+      ).toBe(123456);
+    });
+
+    it('can turn a French string into a number', () => {
+      expect(
+        getUnformattedNumber({
+          value: '1 234 567,45',
+          currency: 'EUR',
+          locale: 'fr',
+        }),
+      ).toBe(1234567.45);
+    });
+
+    it('can turn a English string into a number', () => {
+      expect(
+        getUnformattedNumber({
+          value: '123,456.78',
+          currency: 'EUR',
+          locale: 'en',
+        }),
+      ).toBe(123456.78);
+    });
+
+    it('can turn a Magyar string into a number', () => {
+      expect(
+        getUnformattedNumber({
+          value: '11 000 000',
+          currency: 'HUF',
+          locale: 'hu',
+        }),
+      ).toBe(11000000);
+    });
+  });
+
+  describe('getFormattedString', () => {
+    it('can turn a number into a Spanish string', () => {
+      expect(
+        getFormattedString({
+          value: 123456.45,
+          currency: 'EUR',
+          locale: 'es',
+        }),
+      ).toBe('123.456,45');
+    });
+
+    it('can turn a number into a French string', () => {
+      expect(
+        getFormattedString({
+          value: 1234567.45,
+          currency: 'EUR',
+          locale: 'fr',
+        }),
+      ).toBe('1 234 567,45');
+    });
+
+    it('can turn a number into a English string', () => {
+      expect(
+        getFormattedString({
+          value: 123456.78,
+          currency: 'EUR',
+          locale: 'en',
+        }),
+      ).toBe('123,456.78');
+    });
+  });
+});

package/src/expressiveMoneyInput/amountInput/utils.ts

@@ -0,0 +1,116 @@
+import { formatAmount } from '@transferwise/formatting';
+import type { KeyboardEvent } from 'react';
+
+export const getDecimalSeparator = (currency: string, locale: string): string | null => {
+  return formatAmount(1.1, currency, locale).replace(/\p{Number}/gu, '');
+};
+
+export const getGroupSeparator = (currency: string, locale: string): string | null => {
+  return formatAmount(10000000, currency, locale).replace(/\p{Number}/gu, '')[0];
+};
+
+export const getDecimalCount = (currency: string, locale: string): number => {
+  const decimalSeparator = getDecimalSeparator(currency, locale);
+  if (!decimalSeparator) {
+    return 0;
+  }
+  const parts = formatAmount(1.1, currency, locale).split(decimalSeparator);
+  return parts.length === 2 ? parts[1].length : 0;
+};
+
+export const getEnteredDecimalsCount = (value: string, decimalSeparator: string) => {
+  return value.split(decimalSeparator)[1]?.length ?? 0;
+};
+
+export const getUnformattedNumber = ({
+  value: formattedValue,
+  currency,
+  locale,
+}: {
+  value: string;
+  currency: string;
+  locale: string;
+}): number | null => {
+  const groupSeparator = getGroupSeparator(currency, locale);
+  const decimalSeparator = getDecimalSeparator(currency, locale);
+  if (!formattedValue) {
+    return null;
+  }
+
+  // parseFloat can't handle thousands separators
+  const withoutGroupSeparator = groupSeparator
+    ? formattedValue.replace(/ /gu, '').replace(new RegExp(`\\${groupSeparator}`, 'g'), '')
+    : formattedValue;
+
+  // parseFloat can only handle . as decimal separator
+  const withNormalisedDecimalSeparator = decimalSeparator
+    ? withoutGroupSeparator.replace(decimalSeparator, '.')
+    : withoutGroupSeparator;
+
+  const parsedValue = Number.parseFloat(withNormalisedDecimalSeparator);
+  return parsedValue;
+};
+
+export const getFormattedString = ({
+  value: unformattedValue,
+  currency,
+  locale,
+  alwaysShowDecimals = false,
+}: {
+  value: number;
+  currency: string;
+  locale: string;
+  alwaysShowDecimals?: boolean;
+}): string => {
+  const decimalSeparator = getDecimalSeparator(currency, locale);
+  // formatAmount rounds extra decimals, so 1.999 will become 2. Instead we will manually strip extra decimals so that it becomes 1.99 after formatting
+  const decimalCount = getDecimalCount(currency, locale);
+  const unformattedString = unformattedValue.toString();
+
+  const [integerPart, decimalPart] = decimalSeparator
+    ? unformattedString.split(decimalSeparator)
+    : [unformattedString, undefined];
+
+  const formattedDecimalPart = decimalPart ? decimalPart.slice(0, decimalCount) : '';
+
+  const sanitisedUnformattedValue = Number.parseFloat(`${integerPart}.${formattedDecimalPart}`);
+
+  return formatAmount(sanitisedUnformattedValue, currency, locale, {
+    alwaysShowDecimals,
+  });
+};
+
+export const isInputPossiblyOverflowing = ({
+  ref,
+  value,
+}: {
+  ref: React.RefObject<HTMLInputElement>;
+  value: string;
+}) => {
+  const textLength = value.length;
+  const inputWidth = ref.current?.clientWidth;
+  if (!inputWidth || !textLength) {
+    return;
+  }
+
+  const maxCharactersWithoutOverflow = Math.floor(inputWidth / 19);
+  return textLength > maxCharactersWithoutOverflow;
+};
+
+const allowedInputKeys = new Set([
+  'Backspace',
+  'Delete',
+  ',',
+  '.',
+  'ArrowLeft',
+  'ArrowRight',
+  'Enter',
+  'Tab',
+]);
+
+export const isAllowedInputKey = (e: KeyboardEvent<HTMLInputElement>) => {
+  const { metaKey, key, ctrlKey } = e;
+  const isNumberKey = !Number.isNaN(Number.parseInt(key, 10));
+
+  return isNumberKey || metaKey || ctrlKey || allowedInputKeys.has(key);
+};

package/src/expressiveMoneyInput/animatedNumber/AnimatedNumber.tsx

@@ -0,0 +1,40 @@
+import { motion, useReducedMotion } from 'framer-motion';
+import type { ReactNode } from 'react';
+
+interface Props {
+  children: ReactNode;
+  onClick?: () => void;
+  className?: string;
+}
+
+export const AnimatedNumber = ({ children, onClick, className }: Props) => {
+  const reducedMotion = useReducedMotion();
+
+  return (
+    <motion.span
+      className={className}
+      aria-hidden
+      initial={{ zoom: 0.01 }}
+      animate={{ zoom: 1 }}
+      exit={{ zoom: 0.01 }}
+      transition={{
+        duration: reducedMotion ? 0 : 0.3,
+        type: 'tween',
+        ease: [0.3, 0, 0.1, 1],
+      }}
+      onClick={() => onClick?.()}
+    >
+      <motion.span
+        initial={{ opacity: 0 }}
+        animate={{ opacity: [0, 0, 1] }}
+        exit={{ opacity: [1, 0, 0] }}
+        transition={{
+          duration: reducedMotion ? 0 : 0.3,
+          times: [0, 0.5, 1],
+        }}
+      >
+        {children}
+      </motion.span>
+    </motion.span>
+  );
+};

package/src/expressiveMoneyInput/chevron/Chevron.css

@@ -0,0 +1,12 @@
+.wds-chevron-container {
+  width: 32px;
+  width: var(--size-32);
+  overflow: hidden;
+  color: var(--color-interactive-primary);
+  margin-left: 8px;
+  margin-left: var(--size-8);
+  transition: width 0.3s ease;
+}
+.wds-chevron-hidden {
+  width: 0;
+}

package/src/expressiveMoneyInput/chevron/Chevron.less

@@ -0,0 +1,13 @@
+.wds-chevron {
+  &-container {
+    width: var(--size-32);
+    overflow: hidden;
+    color: var(--color-interactive-primary);
+    margin-left: var(--size-8);
+    transition: width 0.3s ease;
+  }
+
+  &-hidden {
+    width: 0;
+  }
+}

package/src/expressiveMoneyInput/chevron/Chevron.tsx

@@ -0,0 +1,35 @@
+import { ChevronLeft } from '@transferwise/icons';
+import { clsx } from 'clsx';
+import { motion } from 'framer-motion';
+
+interface Props {
+  shouldShow: boolean;
+}
+
+export const Chevron = ({ shouldShow = true }: Props) => {
+  return (
+    <div
+      className={clsx(
+        'd-flex align-items-center',
+        'wds-chevron-container',
+        !shouldShow && 'wds-chevron-hidden',
+      )}
+    >
+      <motion.div
+        animate={{
+          x: [12, 0, 0, -12],
+          opacity: [0, 1, 1, 0],
+        }}
+        transition={{
+          duration: 3,
+          ease: [[0.3, 0, 0.1, 1], 'linear', [0.3, 0, 0.1, 1]],
+          times: [0, 0.1, 0.9, 1],
+          repeat: Infinity,
+          repeatType: 'loop',
+        }}
+      >
+        <ChevronLeft />
+      </motion.div>
+    </div>
+  );
+};

package/src/expressiveMoneyInput/currencySelector/CurrencySelector.css

@@ -0,0 +1,6 @@
+.wds-currency-selector:disabled {
+  opacity: 1 !important;
+  cursor: auto !important;
+  cursor: initial !important;
+  mix-blend-mode: initial !important;
+}

package/src/expressiveMoneyInput/currencySelector/CurrencySelector.less

@@ -0,0 +1,7 @@
+.wds-currency-selector {
+  &:disabled {
+    opacity: 1 !important;
+    cursor: initial !important;
+    mix-blend-mode: initial !important;
+  }
+}