From b51aadc716c84e0ff6dd7319490caf4fe958f9e7 Mon Sep 17 00:00:00 2001
From: glo80771 <127736464+glo80771@users.noreply.github.com>
Date: Fri, 19 May 2023 19:04:30 +0530
Subject: [PATCH] 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>
---
 .../__snapshots__/giftCards.spec.js.snap      | 22 ++++++++++
 .../CartPage/GiftCards/giftCards.js           | 40 +++++++++++--------
 .../CartPage/GiftCards/giftCards.module.css   |  4 ++
 3 files changed, 49 insertions(+), 17 deletions(-)

diff --git a/packages/venia-ui/lib/components/CartPage/GiftCards/__tests__/__snapshots__/giftCards.spec.js.snap b/packages/venia-ui/lib/components/CartPage/GiftCards/__tests__/__snapshots__/giftCards.spec.js.snap
index 8158b1cabf..8a2fcd7129 100644
--- a/packages/venia-ui/lib/components/CartPage/GiftCards/__tests__/__snapshots__/giftCards.spec.js.snap
+++ b/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"
diff --git a/packages/venia-ui/lib/components/CartPage/GiftCards/giftCards.js b/packages/venia-ui/lib/components/CartPage/GiftCards/giftCards.js
index 3ae8602a84..1af065994c 100644
--- a/packages/venia-ui/lib/components/CartPage/GiftCards/giftCards.js
+++ b/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,7 +178,7 @@ 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'
@@ -180,7 +186,7 @@ const GiftCards = props => {
                         validate={isRequired}
                     />
                 </div>
-                {cardBalance}
+                <span aria-live="polite">{cardBalance}</span>
             </Field>
             <Field
                 classes={{
diff --git a/packages/venia-ui/lib/components/CartPage/GiftCards/giftCards.module.css b/packages/venia-ui/lib/components/CartPage/GiftCards/giftCards.module.css
index 9021c1c5e0..082c5c6b20 100644
--- a/packages/venia-ui/lib/components/CartPage/GiftCards/giftCards.module.css
+++ b/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; */