fix(storefront): BCTHEME-514 Translation Gap: Gift Certificate -> Cod…

…e required message (#2064)

CHANGELOG.md

@@ -1,6 +1,7 @@
 # Changelog
 
 ## Draft
+- Translation Gap: Gift Certificate -> Code required message. [#2064](https://github.com/bigcommerce/cornerstone/pull/2064)
 - Added translation for invalid quantity value error on Cart. [#2062](https://github.com/bigcommerce/cornerstone/pull/2062)
 - Translation Gap: Delete from Cart confirmation popup. [#2065](https://github.com/bigcommerce/cornerstone/pull/2065)
 - Fixed NaN error on increase/decrease product quantity by adding field validation. [#2052](https://github.com/bigcommerce/cornerstone/pull/2052)

assets/js/theme/cart.js

@@ -1,6 +1,7 @@
 import PageManager from './page-manager';
 import { bind, debounce } from 'lodash';
-import giftCertCheck from './common/gift-certificate-validator';
+import checkIsGiftCertValid from './common/gift-certificate-validator';
+import { createTranslationDictionary } from './common/utils/translations-utils';
 import utils from '@bigcommerce/stencil-utils';
 import ShippingEstimator from './cart/shipping-estimator';
 import { defaultModal } from './global/modal';
@@ -364,9 +365,10 @@ export default class Cart extends PageManager {
 
             event.preventDefault();
 
-            if (!giftCertCheck(code)) {
+            if (!checkIsGiftCertValid(code)) {
+                const validationDictionary = createTranslationDictionary(this.context);
                 return swal.fire({
-                    text: $certInput.data('error'),
+                    text: validationDictionary.invalid_gift_certificate,
                     icon: 'error',
                 });
             }

assets/js/theme/common/gift-certificate-validator.js

@@ -1,5 +1,5 @@
 export default function (cert) {
-    if (typeof cert !== 'string') {
+    if (typeof cert !== 'string' || cert.length === 0) {
         return false;
     }
 

assets/js/theme/gift-certificate.js

@@ -1,6 +1,6 @@
 import PageManager from './page-manager';
 import nod from './common/nod';
-import giftCertChecker from './common/gift-certificate-validator';
+import checkIsGiftCertValid from './common/gift-certificate-validator';
 import formModel from './common/models/forms';
 import { createTranslationDictionary } from './common/utils/translations-utils';
 import { announceInputErrorMessage } from './common/utils/form-utils';
@@ -204,9 +204,9 @@ export default class GiftCertificate extends PageManager {
         balanceValidator.add({
             selector: $balanceForm.find('input[name="giftcertificatecode"]'),
             validate(cb, val) {
-                cb(giftCertChecker(val));
+                cb(checkIsGiftCertValid(val));
             },
-            errorMessage: 'You must enter a certificate code.',
+            errorMessage: this.validationDictionary.invalid_gift_certificate,
         });
 
         return balanceValidator;

lang/en.json

@@ -93,7 +93,6 @@
             "gift_certificate": "Gift Certificate",
             "code_label": "Gift Certificate ({code})",
             "cert_code": "Enter your certificate code",
-            "empty_error": "Please enter your valid certificate code.",
             "remove": "Remove"
         },
         "shipping_estimator": {
@@ -925,7 +924,8 @@
         "price_max_evaluation": "Min. price must be less than max. price.",
         "price_min_not_entered": "Min. price is required.",
         "price_max_not_entered": "Max. price is required.",
-        "price_invalid_value": "Input must be greater than 0."
+        "price_invalid_value": "Input must be greater than 0.",
+        "invalid_gift_certificate": "Please enter your valid certificate code."
     },
     "validation_fallback_messages": {
         "valid_email": "You must enter a valid email.",
@@ -939,7 +939,8 @@
         "price_max_evaluation": "Min. price must be less than max. price.",
         "price_min_not_entered": "Min. price is required.",
         "price_max_not_entered": "Max. price is required.",
-        "price_invalid_value": "Input must be greater than 0."
+        "price_invalid_value": "Input must be greater than 0.",
+        "invalid_gift_certificate": "Please enter your valid certificate code."
     },
     "validation_default_messages": {
         "valid_email": "You must enter a valid email.",
@@ -953,6 +954,7 @@
         "price_max_evaluation": "Min. price must be less than max. price.",
         "price_min_not_entered": "Min. price is required.",
         "price_max_not_entered": "Max. price is required.",
-        "price_invalid_value": "Input must be greater than 0."
+        "price_invalid_value": "Input must be greater than 0.",
+        "invalid_gift_certificate": "Please enter your valid certificate code."
     }
 }

templates/components/cart/gift-certificate-input.html

@@ -8,7 +8,7 @@
 <div class="cart-form gift-certificate-code" style="display: none;">
     <form class="form form--hiddenLabels cart-gift-certificate-form" method="post" action="{{urls.cart}}">
         <label class="form-label" for="certcode">{{lang 'cart.gift_certificates.cert_code'}}</label>
-        <input class="form-input" data-error="{{lang 'cart.gift_certificates.empty_error'}}"  id="certcode" type="text" name="certcode" value="" placeholder="{{lang 'cart.gift_certificates.add_cert_code'}}">
+        <input class="form-input" id="certcode" type="text" name="certcode" value="" placeholder="{{lang 'cart.gift_certificates.add_cert_code'}}">
         <input class="button button--primary button--small" type="submit" value="{{lang 'cart.coupons.button'}}">
         <input type="hidden" name="action" value="applycoupon">
     </form>