FE-636: amount formatter (#270)

src/app/components/app/modal-container/modal/form-container/card-form/fields/card-number/format-card-number.ts

@@ -1,5 +1,5 @@
 import { FormEvent } from 'react';
-import { replaceFullWidthChars, safeVal } from '../format-utils';
+import { replaceFullWidthChars, safeVal } from '../../../common-fields/format-utils';
 import { cardFromNumber } from '../card-info';
 
 function format(num: string): string {

src/app/components/app/modal-container/modal/form-container/card-form/fields/expire-date/format-expiry.ts

@@ -1,5 +1,5 @@
 import { FormEvent } from 'react';
-import { safeVal, replaceFullWidthChars } from '../format-utils';
+import { safeVal, replaceFullWidthChars } from '../../../common-fields/format-utils';
 
 function format(expiry: string): string {
     const parts = expiry.match(/^\D*(\d{1,2})(\D+)?(\d{1,4})?/);

src/app/components/app/modal-container/modal/form-container/card-form/fields/secure-code/format-cvc.ts

@@ -1,5 +1,5 @@
 import { FormEvent } from 'react';
-import { safeVal, replaceFullWidthChars } from '../format-utils';
+import { safeVal, replaceFullWidthChars } from '../../../common-fields/format-utils';
 
 export function formatCVC(e: FormEvent<HTMLInputElement>): number {
     const target = e.currentTarget as HTMLInputElement;

src/app/components/app/modal-container/modal/form-container/common-fields/amount/amount.tsx

@@ -8,6 +8,7 @@ import { isError } from '../error-predicate';
 import { Locale } from 'checkout/locale';
 import { InvoiceTemplateLineCostRange, InvoiceTemplateLineCostUnlim } from 'checkout/backend';
 import { State } from 'checkout/state';
+import { formatAmount } from './format-amount';
 
 interface OwnProps {
     cost: InvoiceTemplateLineCostRange | InvoiceTemplateLineCostUnlim;
@@ -28,6 +29,7 @@ const getCustomInput = (props: AmountProps, fieldProps: WrappedFieldProps) => (
         mark={true}
         type="tel"
         id="amount-input"
+        onInput={formatAmount}
     />
 );
 

src/app/components/app/modal-container/modal/form-container/common-fields/amount/format-amount.ts

@@ -0,0 +1,51 @@
+import { FormEvent } from 'react';
+import { replaceFullWidthChars, safeVal } from '../format-utils';
+
+const createNumArr = (num: string): string[] => {
+    let numTempArr;
+    if (/^\d+(\.\d+)?$/.test(num)) {
+        numTempArr = num.split('.');
+    } else {
+        numTempArr = num.split(',');
+    }
+    return numTempArr;
+};
+
+const getNumType = (num: string): string => (/^\d+(\.\d+)?$/.test(num) ? '.' : ',');
+
+const format = (num: string): string => {
+    let result = num.replace(/\s/g, '');
+    const formatReg = /\B(?=(\d{3})+(?!\d))/g;
+    if (/^\d+([.,])?$/.test(result)) {
+        result = result.replace(formatReg, ' ');
+        const lastChar = result.charAt(result.length - 1);
+        const isLastCharDot = lastChar === '.';
+        const isLastCharComma = lastChar === ',';
+        const isLastCharSpace = lastChar === ' ';
+        result = isLastCharDot || isLastCharComma || isLastCharSpace ? result + ' ' : result;
+    } else if (/^\d+([.,]\d+)?$/.test(result)) {
+        const numTempArr = createNumArr(result);
+        numTempArr[1] = numTempArr[1].slice(0, 2);
+        result = numTempArr.join(getNumType(result) + ' ').replace(formatReg, ' ');
+    } else if (result.length > 1) {
+        result = result.slice(0, -1).replace(formatReg, ' ');
+        result = createNumArr(result)
+            .join(getNumType(result) + ' ')
+            .replace(formatReg, ' ');
+    } else {
+        result = '';
+    }
+    return result;
+};
+
+export function formatAmount(e: FormEvent<HTMLInputElement>): number {
+    const target = e.currentTarget;
+    let value = target.value;
+    const nativeEvent = e.nativeEvent as any;
+    value = replaceFullWidthChars(value);
+    if (nativeEvent.inputType === 'deleteContentBackward') {
+        return safeVal(value, target);
+    } else {
+        return safeVal(format(value), target);
+    }
+}

src/app/components/app/modal-container/modal/form-container/common-fields/amount/validate-amount.ts

@@ -16,6 +16,9 @@ export const validateAmount = (
     value: string,
     cost: InvoiceTemplateLineCostRange | InvoiceTemplateLineCostUnlim
 ): boolean => {
+    if (value) {
+        value = value.replace(/\s/g, '').replace(/,/g, '.');
+    }
     const binded = validate.bind(null, toNumber(value) * 100);
     switch (cost.costType) {
         case CostType.InvoiceTemplateLineCostRange:

src/app/components/app/modal-container/modal/form-container/terminal-form/amount-info.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as styles from '../form-container.scss';
 import { Locale } from 'checkout/locale';
-import { FormattedAmount } from 'checkout/utils/amount-formatter';
+import { FormattedAmount } from 'checkout/utils';
 
 export interface AmountInfoProps {
     locale: Locale;

src/app/components/app/modal-container/modal/form-container/terminal-form/terminal-form-props.ts

@@ -1,7 +1,7 @@
 import { TerminalFormInfo, TerminalFormValues } from 'checkout/state';
 import { FieldsConfig } from '../fields-config';
 import { Locale } from 'checkout/locale';
-import { FormattedAmount } from 'checkout/utils/amount-formatter';
+import { FormattedAmount } from 'checkout/utils';
 import { PaymentRequestedPayload } from 'checkout/actions';
 
 export interface TerminalFormProps {

src/app/sagas/payment/provide-payment/create-invoice-with-template.ts

@@ -1,8 +1,8 @@
-import toNumber from 'lodash-es/toNumber';
 import { call, CallEffect, put, PutEffect } from 'redux-saga/effects';
 import { InvoiceTemplate, createInvoiceWithTemplate as request } from 'checkout/backend';
 import { InvoiceCreated, TypeKeys } from 'checkout/actions';
 import { AmountInfoState, AmountInfoStatus } from 'checkout/state';
+import { formAmountToMinorNumver } from 'checkout/utils';
 
 export type Effects = CallEffect | PutEffect<InvoiceCreated>;
 
@@ -11,7 +11,7 @@ const getAmount = (amountInfo: AmountInfoState, formAmount: string): number => {
         case AmountInfoStatus.final:
             return amountInfo.minorValue;
         case AmountInfoStatus.notKnown:
-            return toNumber(formAmount) * 100;
+            return formAmountToMinorNumver(formAmount);
     }
 };
 

src/app/utils/amount/form-amount-to-minor-number.ts

@@ -0,0 +1,4 @@
+import { toNumber } from 'lodash-es';
+
+export const formAmountToMinorNumver = (formAmount: string): number =>
+    toNumber(formAmount.replace(/\s/g, '').replace(/,/g, '.')) * 100;

src/app/utils/amount/index.ts

@@ -0,0 +1,2 @@
+export * from './amount-formatter';
+export * from './form-amount-to-minor-number';

src/app/utils/index.ts

@@ -5,6 +5,6 @@ export * from './find-named';
 export * from './find-previous';
 export * from './uri-serializer';
 export * from './get-nocache-value';
-export * from './amount-formatter';
 export * from './get-script';
 export * from './guid';
+export * from './amount';