Late.js

export default class Late {
    static setLocale(id: string) {}
    static addLocale(id: string, options: Object) {}
    static addStrings(id: string, strings: Object) {}
    static translate(key: string, values: Object) {}
    static setUnsafeHtmlState(state: boolean) {}
    static getUnsafeHtmlState(): boolean {}
}

let L = Late.translate;
export L;

Late.addLocale('EN_US', { fallback: 'EN' });

Late.setLocale('EN_US');

Late.addStrings('EN_US', {
    DEPOSIT: {
        MODAL: {
            GENERAL_ERROR_MESSAGE: 'Something bad happened.',
            CUSTOMER_ERROR_MESSAGE: (customer) => {
                let genderString = 'someone';
                if (customer) {
                    if (customer.gender === 'male') {
                        genderString = 'DUDE';
                    } else if (customer.gender == 'female') {
                        genderString = 'LADY';
                    }
                }
                return 'Hey ${ genderString }, looking good!';
            },
            HTML_ERROR_MESSAGE: (customer) => {
                return `You did a <strong>bad</strong> thing, ${ customer.name }!`
            }
        }
    }
});

describe('Late', () => {
    expect('basic functionality', () => {
        it('should work', () => {
            let man = { gender: 'male', name: 'Gui' };
            let woman = { gender: 'female', name: 'Merissa' };

            expect(L('DEPOSIT.MODAL.GENERAL_ERROR_MESSAGE')).toBe('Something bad happened.');

            expect(L('DEPOSIT.MODAL.CUSTOMER_ERROR_MESSAGE', man)).toBe('Hey DUDE, looking good!');
            expect(L('DEPOSIT.MODAL.CUSTOMER_ERROR_MESSAGE', woman)).toBe('Hey LADY, looking good!');
            expect(L('DEPOSIT.MODAL.CUSTOMER_ERROR_MESSAGE')).toBe('Hey someone, looking good!');

            expect(L('DEPOSIT.MODAL.HTML_ERROR_MESSAGE', man)).toBe('You did a <strong>bad</strong> thing, Gui!');

            expect(L('INVALID_ERROR_MESSAGE')).toBe('INVALID_ERROR_MESSAGE');
        });
    });
});

export class Translate extends React.Component {
    render() {
        let key = this.props.key || this.props.children;
        let values = this.props.values || {};
        let result = t(key, values);

        let allowHtml = this.props.html || Late.getUnsafeHtmlState();

        if (allowHtml) {
            return (
                <span dangerouslySetInnerHTML={ { __html: result } }></span>
            );
        }
        return (
            <span>{ result }</span>
        );
    }
}