Improve Gift card error messages

packages/lib/src/components/Giftcard/Giftcard.tsx

@@ -20,7 +20,8 @@ export class GiftcardElement extends UIElement {
             paymentMethod: {
                 type: this.constructor['type'],
                 brand: this.props.brand,
-                ...this.state.data
+                encryptedCardNumber: this.state.data?.encryptedCardNumber,
+                encryptedSecurityCode: this.state.data?.encryptedSecurityCode
             }
         };
     }
@@ -51,8 +52,9 @@ export class GiftcardElement extends UIElement {
             this.props.onBalanceCheck(resolve, reject, this.formatData());
         })
             .then(({ balance }) => {
-                if (!balance) throw new Error('Invalid balance');
-                if (balance?.currency !== this.props.amount?.currency) throw new Error('Unsupported balance currency');
+                if (!balance) throw new Error('card-error'); // card doesn't exist
+                if (balance?.currency !== this.props.amount?.currency) throw new Error('currency-error');
+                if (balance?.value <= 0) throw new Error('no-balance');
 
                 this.componentRef.setBalance(balance);
 
@@ -64,7 +66,7 @@ export class GiftcardElement extends UIElement {
                 }
             })
             .catch(error => {
-                this.setStatus('error');
+                this.setStatus(error?.message || 'error');
                 if (this.props.onError) this.props.onError(error);
             });
     };

packages/lib/src/components/Giftcard/components/GiftcardComponent.tsx

@@ -75,9 +75,24 @@ class Giftcard extends Component<GiftcardComponentProps> {
             return <GiftcardResult balance={balance} onSubmit={props.onSubmit} {...props} />;
         }
 
+        const getCardErrorMessage = sfpState => {
+            if (sfpState.errors.encryptedCardNumber) return i18n.get('creditCard.numberField.invalid');
+
+            switch (this.state.status) {
+                case 'no-balance':
+                    return i18n.get('error.giftcard.no-balance');
+                case 'card-error':
+                    return i18n.get('error.giftcard.card-error');
+                case 'currency-error':
+                    return i18n.get('error.giftcard.currency-error');
+                default:
+                    return null;
+            }
+        };
+
         return (
             <div className="adyen-checkout__giftcard">
-                {this.state.status === 'error' && <Alert>{i18n.get('error.message.unknown')}</Alert>}
+                {this.state.status === 'error' && <Alert icon={'cross'}>{i18n.get('error.message.unknown')}</Alert>}
 
                 <SecuredFieldsProvider
                     {...this.props}
@@ -92,7 +107,7 @@ class Giftcard extends Component<GiftcardComponentProps> {
                             <Field
                                 label={i18n.get('creditCard.numberField.title')}
                                 classNameModifiers={['number', ...(props.pinRequired ? ['70'] : ['100'])]}
-                                errorMessage={sfpState.errors.encryptedCardNumber && i18n.get('creditCard.numberField.invalid')}
+                                errorMessage={getCardErrorMessage(sfpState)}
                                 focused={focusedElement === 'encryptedCardNumber'}
                                 onFocusField={() => setFocusOn('encryptedCardNumber')}
                             >
@@ -103,7 +118,7 @@ class Giftcard extends Component<GiftcardComponentProps> {
                                         'adyen-checkout__input': true,
                                         'adyen-checkout__input--large': true,
                                         'adyen-checkout__card__cardNumber__input': true,
-                                        'adyen-checkout__input--error': sfpState.errors.encryptedCardNumber,
+                                        'adyen-checkout__input--error': getCardErrorMessage(sfpState),
                                         'adyen-checkout__input--focus': focusedElement === 'encryptedCardNumber'
                                     })}
                                 />

packages/lib/src/components/internal/Alert/Alert.scss

@@ -5,7 +5,7 @@
     border-radius: $border-radius-medium;
     margin: 0 0 $spacing-medium;
     text-align: left;
-    padding: $spacing-small $spacing-medium;
+    padding: $spacing-medium-small;
     font-size: $font-size-small;
 }
 
@@ -21,3 +21,9 @@
 .adyen-checkout__alert-message--info {
     background: $color-blue-lighter;
 }
+
+.adyen-checkout__alert-message__icon {
+    width: 14px;
+    height: 14px;
+    margin-right: $spacing-small;
+}

packages/lib/src/components/internal/Alert/Alert.tsx

@@ -1,15 +1,22 @@
 import { ComponentChildren, h } from 'preact';
 import cx from 'classnames';
 import './Alert.scss';
+import Icon from '../Icon';
 
 const ALERT_TYPES = ['error', 'warning', 'success'];
 
 interface AlertProps {
     children: ComponentChildren;
     classNames?: string[];
+    icon?: string;
     type?: typeof ALERT_TYPES[number];
 }
 
-export default function Alert({ children, classNames = [], type = 'error' }: AlertProps) {
-    return <div className={cx('adyen-checkout__alert-message', `adyen-checkout__alert-message--${type}`, classNames)}>{children}</div>;
+export default function Alert({ children, classNames = [], type = 'error', icon }: AlertProps) {
+    return (
+        <div className={cx('adyen-checkout__alert-message', `adyen-checkout__alert-message--${type}`, classNames)}>
+            {icon && <Icon className={'adyen-checkout__alert-message__icon'} type={icon} />}
+            {children}
+        </div>
+    );
 }

packages/lib/src/components/internal/Icon/Icon.tsx

@@ -1,15 +1,18 @@
 import { h } from 'preact';
 import useCoreContext from '../../../core/Context/useCoreContext';
 import getImageUrl from '../../../utils/get-image';
+import cx from 'classnames';
 
 interface IconProps {
     type: string;
+    className?: string;
 }
 
-const Icon = ({ type }: IconProps) => {
+const Icon = ({ type, className = '' }: IconProps) => {
     const { loadingContext } = useCoreContext();
     const iconUrl = getImageUrl({ loadingContext, imageFolder: 'components/' })(type);
-    return <img className="adyen-checkout__icon" alt={type} src={iconUrl} />;
+
+    return <img className={cx('adyen-checkout__icon', className)} alt={type} src={iconUrl} />;
 };
 
 export default Icon;

packages/lib/src/language/locales/en-US.json

@@ -105,7 +105,8 @@
     "preauthorizeWith": "Preauthorize with",
     "confirmPreauthorization": "Confirm preauthorization",
     "confirmPurchase": "Confirm purchase",
-    "applyGiftcard": "Apply Giftcard",
+    "applyGiftcard": "Redeem",
+    "giftcardBalance": "Gift card balance",
     "creditCard.pin.title": "Pin",
     "creditCard.encryptedPassword.label": "First 2 digits of card password",
     "creditCard.encryptedPassword.placeholder": "12",
@@ -148,6 +149,9 @@
     "error.va.sf-cc-num.03": "Unsupported card entered",
     "error.va.sf-cc-dat.01": "Card too old",
     "error.va.sf-cc-dat.02": "Date too far in the future",
+    "error.giftcard.no-balance": "This gift card has zero balance",
+    "error.giftcard.card-error": "In our records we have no gift card with this number",
+    "error.giftcard.currency-error": "Gift cards are only valid in the currency they were issued in",
     "partialPayment.warning": "Select another payment method to pay the remaining",
     "partialPayment.remainingBalance": "Remaining balance will be %{amount}"
 }

packages/lib/src/style/spacings.scss

@@ -1,6 +1,7 @@
 $spacing-none: 0;
 $spacing-xsmall: 4px;
 $spacing-small: 8px;
+$spacing-medium-small: 12px;
 $spacing-medium: 16px;
 $spacing-large: 24px;
 $spacing-xlarge: 32px;