diff --git a/src/app/locale/translations/en.json b/src/app/locale/translations/en.json index 399fa5dc70..92f8464af1 100644 --- a/src/app/locale/translations/en.json +++ b/src/app/locale/translations/en.json @@ -160,6 +160,7 @@ "credit_card_expiration_label": "Expiration", "credit_card_expiration_date_label": "Expiration Date", "credit_card_expiration_required_error": "Expiration Date is required", + "credit_card_expiration_placeholder_text": "MM / YY", "credit_card_name_label": "Name on Card", "credit_card_name_required_error": "Full name is required", "credit_card_number_invalid_error": "Credit Card Number must be valid", diff --git a/src/app/payment/creditCard/CreditCardExpiryField.tsx b/src/app/payment/creditCard/CreditCardExpiryField.tsx index fe1b5e98d4..0b8e078fcc 100644 --- a/src/app/payment/creditCard/CreditCardExpiryField.tsx +++ b/src/app/payment/creditCard/CreditCardExpiryField.tsx @@ -2,7 +2,7 @@ import { memoizeOne } from '@bigcommerce/memoize'; import { FieldProps } from 'formik'; import React, { memo, useCallback, useMemo, ChangeEvent, FunctionComponent } from 'react'; -import { TranslatedString } from '../../locale'; +import { withLanguage, TranslatedString, WithLanguageProps } from '../../locale'; import { FormField, TextInput } from '../../ui/form'; import formatCreditCardExpiryDate from './formatCreditCardExpiryDate'; @@ -11,7 +11,10 @@ export interface CreditCardExpiryFieldProps { name: string; } -const CreditCardExpiryField: FunctionComponent = ({ name }) => { +const CreditCardExpiryField: FunctionComponent = ({ + language, + name, +}) => { const handleChange = useCallback(memoizeOne((field: FieldProps['field'], form: FieldProps['form']) => { return (event: ChangeEvent) => { form.setFieldValue(field.name, formatCreditCardExpiryDate(event.target.value)); @@ -24,10 +27,10 @@ const CreditCardExpiryField: FunctionComponent = ({ autoComplete="cc-exp" id={ field.name } onChange={ handleChange(field, form) } - placeholder="MM / YY" + placeholder={ language.translate('payment.credit_card_expiration_placeholder_text') } type="tel" /> - ), [handleChange]); + ), [handleChange, language]); const labelContent = useMemo(() => ( @@ -41,4 +44,4 @@ const CreditCardExpiryField: FunctionComponent = ({ />; }; -export default memo(CreditCardExpiryField); +export default memo(withLanguage(CreditCardExpiryField)); diff --git a/src/app/payment/paymentMethod/CreditCardPaymentMethod.spec.tsx b/src/app/payment/paymentMethod/CreditCardPaymentMethod.spec.tsx index 37a8317f5a..4cde89bfe0 100644 --- a/src/app/payment/paymentMethod/CreditCardPaymentMethod.spec.tsx +++ b/src/app/payment/paymentMethod/CreditCardPaymentMethod.spec.tsx @@ -347,7 +347,7 @@ describe('CreditCardPaymentMethod', () => { form: { fields: { cardCode: { containerId: 'ccCvv' }, - cardExpiry: { containerId: 'ccExpiry' }, + cardExpiry: { containerId: 'ccExpiry', placeholder: 'MM / YY' }, cardName: { containerId: 'ccName' }, cardNumber: { containerId: 'ccNumber' }, }, diff --git a/src/app/payment/paymentMethod/CreditCardPaymentMethod.tsx b/src/app/payment/paymentMethod/CreditCardPaymentMethod.tsx index 9c811192a4..afbeb51e60 100644 --- a/src/app/payment/paymentMethod/CreditCardPaymentMethod.tsx +++ b/src/app/payment/paymentMethod/CreditCardPaymentMethod.tsx @@ -281,6 +281,7 @@ class CreditCardPaymentMethod extends Component< isCardCodeRequired, isInstrumentCardCodeRequired: isInstrumentCardCodeRequiredProp, isInstrumentCardNumberRequired: isInstrumentCardNumberRequiredProp, + language, shouldShowInstrumentFieldset, } = this.props; @@ -303,7 +304,7 @@ class CreditCardPaymentMethod extends Component< } : { cardCode: isCardCodeRequired ? { containerId: 'ccCvv' } : undefined, - cardExpiry: { containerId: 'ccExpiry' }, + cardExpiry: { containerId: 'ccExpiry', placeholder: language.translate('payment.credit_card_expiration_placeholder_text') }, cardName: { containerId: 'ccName' }, cardNumber: { containerId: 'ccNumber' }, },