fix(payment): CHECKOUT-4842 Add missing placeholder text to hosted ex…

…piration field
bigcommerce · Apr 20, 2020 · 000549c · 000549c
1 parent 29a747f
commit 000549c
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 7 deletions.
diff --git 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
@@ -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<CreditCardExpiryFieldProps> = ({ name }) => {
+const CreditCardExpiryField: FunctionComponent<CreditCardExpiryFieldProps & WithLanguageProps> = ({
+    language,
+    name,
+}) => {
     const handleChange = useCallback(memoizeOne((field: FieldProps['field'], form: FieldProps['form']) => {
         return (event: ChangeEvent<any>) => {
             form.setFieldValue(field.name, formatCreditCardExpiryDate(event.target.value));
@@ -24,10 +27,10 @@ const CreditCardExpiryField: FunctionComponent<CreditCardExpiryFieldProps> = ({
             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(() => (
         <TranslatedString id="payment.credit_card_expiration_label" />
@@ -41,4 +44,4 @@ const CreditCardExpiryField: FunctionComponent<CreditCardExpiryFieldProps> = ({
     />;
 };
 
-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
@@ -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
@@ -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' },
                 },