@transferwise/components 46.112.0 → 46.113.0

package/src/expressiveMoneyInput/ExpressiveMoneyInput.tsx

@@ -0,0 +1,156 @@
+import Body from '../body';
+import { Label } from '../label/Label';
+import { clsx } from 'clsx';
+import { AnimatePresence, motion } from 'framer-motion';
+import { useId, type ReactNode } from 'react';
+
+import {
+  type Props as CurrencySelectorProps,
+  CurrencySelector,
+} from './currencySelector/CurrencySelector';
+import { CommonProps } from '../common';
+import { AmountInput } from './amountInput/AmountInput';
+import { Chevron } from './chevron/Chevron';
+import { InlinePrompt, type InlinePromptProps } from '../prompt/InlinePrompt';
+
+type AmountType = number | null;
+export type CurrencyType = string;
+
+type DefaultCurrencySelectorInstanceType = Pick<
+  CurrencySelectorProps,
+  'addons' | 'options' | 'onChange' | 'onOpen' | 'onSearchChange'
+>;
+type CustomCurrencySelectorInstanceType = {
+  customRender?: (props: { id: string; labelId: string }) => ReactNode;
+};
+type CurrencySelectorType = DefaultCurrencySelectorInstanceType &
+  CustomCurrencySelectorInstanceType;
+
+export type Props = {
+  label?: ReactNode;
+  currencySelector?: CurrencySelectorType;
+  amount?: AmountType;
+  /**
+   * The currency code, e.g. `USD`, `EUR`, `GBP`, etc. Governs the flag rendered in the currency selector.
+   */
+  currency: CurrencyType;
+  inlinePrompt?: {
+    sentiment?: InlinePromptProps['sentiment'];
+    message: InlinePromptProps['children'];
+    media?: InlinePromptProps['media'];
+  };
+  showChevron?: boolean;
+  /**
+   * If set, it auto-focuses the amount input upon component mount.<br />
+   * ⚠️ **Use with caution**, as it may impact user experience and
+   * fail [WCAG 2.4.3 requirements](https://www.w3.org/WAI/WCAG21/Understanding/focus-order.html)
+   */
+  autoFocus?: boolean;
+  /**
+   * Dims the input to indicate a loading state. Does not disable it.
+   */
+  loading?: boolean;
+  onAmountChange: (amount: AmountType) => void;
+  onFocusChange?: (focused: boolean) => void;
+} & CommonProps;
+
+/**
+ * This component has been kindly contributed by our friends at the `Send` team 🎉.
+ *
+ * Some patterns and implementation details used in this component may differ
+ * from what's commonly used in the Design System. The overall build and QA was managed
+ * by the contributing team directly, and such did not follow a typical DS lifecycle.
+ *
+ * While we house this component and will help facilitate its future iterations,
+ * direct contributions by consuming product teams are highly encouraged.
+ *
+ * > ⚠️ **Prerequisite:** <br />The component depends on the
+ * [framer-motion](https://www.npmjs.com/package/framer-motion) package, which has been
+ * deliberately excluded from the Design System bundle and kept as an opt-in only.
+ * **Make sure to add it to your project dependencies.**
+ */
+export default function ExpressiveMoneyInput({
+  label,
+  currency,
+  currencySelector = { options: [] } as DefaultCurrencySelectorInstanceType,
+  amount,
+  onAmountChange,
+  className,
+  inlinePrompt,
+  showChevron,
+  autoFocus,
+  loading,
+  onFocusChange,
+}: Props) {
+  const inputId = useId();
+  const labelId = useId();
+  const customAlertId = useId();
+  const currencyId = useId();
+
+  return (
+    <div className={clsx('wds-expressive-money-input', className)}>
+      <Label id={labelId} htmlFor={inputId} className={clsx('m-b-1', 'font-weight-normal')}>
+        {label}
+      </Label>
+      <div
+        className={clsx('d-flex')}
+        role="group"
+        aria-labelledby={labelId}
+        {...(inlinePrompt ? { 'aria-describedby': customAlertId } : {})}
+      >
+        <div className="wds-expressive-money-input-currency-selector">
+          {currencySelector.customRender?.({ id: currencyId, labelId }) ?? (
+            <CurrencySelector
+              id={currencyId}
+              labelId={labelId}
+              currency={currency}
+              {...currencySelector}
+            />
+          )}
+        </div>
+        <AmountInput
+          id={inputId}
+          describedById={currencyId}
+          amount={amount}
+          currency={currency}
+          // eslint-disable-next-line jsx-a11y/no-autofocus
+          autoFocus={autoFocus}
+          loading={loading}
+          onChange={onAmountChange}
+          onFocusChange={onFocusChange}
+        />
+        <div className={clsx('d-flex align-items-center', 'wds-expressive-money-input-chevron')}>
+          <Chevron shouldShow={Boolean(showChevron)} />
+        </div>
+      </div>
+      <AnimatePresence initial={false}>
+        {inlinePrompt && (
+          <div className={clsx('d-flex justify-content-end', inlinePrompt && 'm-t-1')}>
+            <motion.div
+              key={customAlertId}
+              initial={{ opacity: 0, height: 0 }}
+              animate={{
+                opacity: 1,
+                height: 'auto',
+                transition: { delay: 0.75, duration: 0.3 },
+              }}
+              exit={{ opacity: 0, height: 0 }}
+            >
+              {inlinePrompt.sentiment && Object.keys(inlinePrompt.sentiment).length > 0 ? (
+                <InlinePrompt
+                  id={customAlertId}
+                  media={inlinePrompt.media}
+                  sentiment={inlinePrompt.sentiment}
+                >
+                  {inlinePrompt.message}
+                </InlinePrompt>
+              ) : (
+                <Body>{inlinePrompt.message}</Body>
+              )}
+            </motion.div>
+          </div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}

package/src/expressiveMoneyInput/amountInput/AmountInput.css

@@ -0,0 +1,32 @@
+.wds-amount-input-container {
+  width: 100%;
+}
+.wds-amount-input-input-container {
+  display: flex;
+  justify-content: right;
+  width: 100%;
+  transition: font-size 0.4s cubic-bezier(0.3, 0, 0.1, 1), height 0.4s cubic-bezier(0.3, 0, 0.1, 1), margin-top 0.4s cubic-bezier(0.3, 0, 0.1, 1), color 0.4s ease;
+  color: var(--color-interactive-primary);
+  overflow: hidden;
+  margin-bottom: 0 !important;
+}
+@media (prefers-reduced-motion: reduce) {
+  .wds-amount-input-input-container {
+    transition: none;
+  }
+}
+.wds-amount-input-input {
+  border: none;
+  outline: none;
+  flex-grow: 1;
+  text-align: right;
+  background-color: transparent;
+}
+.wds-amount-input-input:focus-visible {
+  outline: none;
+}
+.wds-amount-input-placeholder {
+  flex-grow: 0;
+  display: flex;
+  align-items: center;
+}

package/src/expressiveMoneyInput/amountInput/AmountInput.less

@@ -0,0 +1,43 @@
+.wds-amount-input {
+  &-container {
+    width: 100%;
+  }
+
+  &-input-container {
+    display: flex;
+    justify-content: right;
+    width: 100%;
+    transition:
+      font-size 0.4s cubic-bezier(0.3, 0, 0.1, 1),
+      height 0.4s cubic-bezier(0.3, 0, 0.1, 1),
+      margin-top 0.4s cubic-bezier(0.3, 0, 0.1, 1),
+      color 0.4s ease;
+    color: var(--color-interactive-primary);
+    overflow: hidden;
+    margin-bottom: 0 !important;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    &-input-container {
+      transition: none;
+    }
+  }
+
+  &-input {
+    border: none;
+    outline: none;
+    flex-grow: 1;
+    text-align: right;
+    background-color: transparent;
+
+    &:focus-visible {
+      outline: none;
+    }
+  }
+
+  &-placeholder {
+    flex-grow: 0;
+    display: flex;
+    align-items: center;
+  }
+}

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');
+    });
+  });
+});