Pwa 3122 (#4104)

* PWA-3121::system is getting crashed with unexpected error when pressed Retrun button with invalid Gift card number

* PWA-3121::Updated test cases

* PWA-3121::Formatted the code using prettier

* PWA-3122::System does not read displayed error message for accessibil users, if User press Return Button with blank Gift card number

* PWA-3122::Formatted the code using prettier

---------

Co-authored-by: Aanchal Pawar <97873570+glo82145@users.noreply.github.com>

Author: glo80771

packages/venia-ui/lib/components/CartPage/GiftCards/__tests__/__snapshots__/giftCards.spec.js.snap

@@ -62,6 +62,17 @@ exports[`it renders correctly when it has cards 1`] = `
               className="root"
             />
           </div>
+          <span
+            aria-live="polite"
+          >
+            <div
+              className="balance"
+            >
+              <span
+                className="invalid_card_error"
+              />
+            </div>
+          </span>
         </div>
         <div
           className="root"
@@ -303,6 +314,17 @@ exports[`it renders correctly with no cards 1`] = `
               className="root"
             />
           </div>
+          <span
+            aria-live="polite"
+          >
+            <div
+              className="balance"
+            >
+              <span
+                className="invalid_card_error"
+              />
+            </div>
+          </span>
         </div>
         <div
           className="root"

packages/venia-ui/lib/components/CartPage/GiftCards/giftCards.js

@@ -133,25 +133,31 @@ const GiftCards = props => {
         );
     }
 
-    const cardBalance = shouldDisplayCardBalance && (
-        <div className={classes.balance}>
-            <span className={classes.price}>
-                <FormattedMessage
-                    id={'giftCards.balance'}
-                    defaultMessage={'Balance: '}
-                />
-                <Price
-                    value={checkBalanceData.balance.value}
-                    currencyCode={checkBalanceData.balance.currency}
-                />
-            </span>
-        </div>
-    );
-
     const containerClass = shouldDisplayCardError
         ? classes.card_input_container_error
         : classes.card_input_container;
 
+    const cardBalance = (
+        <div className={classes.balance}>
+            {checkBalanceData && shouldDisplayCardBalance ? (
+                <div className={classes.price}>
+                    <FormattedMessage
+                        id={'giftCards.balance'}
+                        defaultMessage={'Balance: '}
+                    />
+                    <Price
+                        value={checkBalanceData.balance.value}
+                        currencyCode={checkBalanceData.balance.currency}
+                    />
+                </div>
+            ) : (
+                <span className={classes.invalid_card_error}>
+                    {cardEntryErrorMessage}
+                </span>
+            )}
+        </div>
+    );
+
     const cardEntryContents = (
         <div className={classes.card}>
             <Field
@@ -172,15 +178,15 @@ const GiftCards = props => {
                         field="card"
                         mask={value => value && value.trim()}
                         maskOnBlur={true}
-                        message={cardEntryErrorMessage}
+                        // message={cardEntryErrorMessage}
                         placeholder={formatMessage({
                             id: 'giftCards.cardEntry',
                             defaultMessage: 'Enter card number'
                         })}
                         validate={isRequired}
                     />
                 </div>
-                {cardBalance}
+                <span aria-live="polite">{cardBalance}</span>
             </Field>
             <Field
                 classes={{

packages/venia-ui/lib/components/CartPage/GiftCards/giftCards.module.css

@@ -41,6 +41,10 @@
 .card_input_container {
 }
 
+.invalid_card_error {
+    color: red;
+}
+
 /* TODO @TW: cannot compose */
 .card_input_container_error input {
     /* composes: border-error from global; */