Move checkout error messages to a new component

CruGlobal · Dec 19, 2024 · 1b24d26 · 1b24d26
1 parent 545412e
commit 1b24d26
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 45 deletions.
diff --git a/src/app/branded/step-1/branded-checkout-step-1.component.js b/src/app/branded/step-1/branded-checkout-step-1.component.js
@@ -4,6 +4,7 @@ import every from 'lodash/every'
 import productConfigForm from 'app/productConfig/productConfigForm/productConfigForm.component'
 import contactInfo from 'common/components/contactInfo/contactInfo.component'
 import checkoutStep2 from 'app/checkout/step-2/step-2.component'
+import checkoutErrorMessages from 'app/checkout/checkout-error-messages/checkout-error-messages.component'
 
 import cartService from 'common/services/api/cart.service'
 import orderService from 'common/services/api/order.service'
@@ -273,6 +274,7 @@ export default angular
     productConfigForm.name,
     contactInfo.name,
     checkoutStep2.name,
+    checkoutErrorMessages.name,
     cartService.name,
     orderService.name,
     analyticsFactory.name,

diff --git a/src/app/branded/step-1/branded-checkout-step-1.tpl.html b/src/app/branded/step-1/branded-checkout-step-1.tpl.html
@@ -1,3 +1,8 @@
+<checkout-error-messages
+  needinfo-errors="$ctrl.needinfoErrors"
+  submission-error="$ctrl.submissionError"
+  submission-error-status="$ctrl.submissionErrorStatus">
+</checkout-error-messages>
 <div class="panel">
   <div class="panel-body loading-overlay-parent">
     <loading ng-if="$ctrl.loadingProductConfig">

diff --git a/src/app/checkout/checkout-error-messages/checkout-error-messages.component.js b/src/app/checkout/checkout-error-messages/checkout-error-messages.component.js
@@ -0,0 +1,19 @@
+import angular from 'angular'
+
+import template from './checkout-error-messages.tpl.html'
+
+const componentName = 'checkoutErrorMessages'
+
+class CheckoutErrorMessagesController {}
+
+export default angular
+  .module(componentName, [])
+  .component(componentName, {
+    controller: CheckoutErrorMessagesController,
+    templateUrl: template,
+    bindings: {
+      needinfoErrors: '<',
+      submissionError: '<',
+      submissionErrorStatus: '<'
+    }
+  })
diff --git a/src/app/checkout/checkout-error-messages/checkout-error-messages.tpl.html b/src/app/checkout/checkout-error-messages/checkout-error-messages.tpl.html
@@ -0,0 +1,44 @@
+<div class="alert alert-danger" role="alert" ng-if="$ctrl.needinfoErrors || $ctrl.submissionError">
+  <p ng-repeat="error in $ctrl.needinfoErrors" ng-switch="error">
+    <span ng-switch-when="need.email" translate>{{'REVIEW_EMAIL_ERROR'}}</span>
+    <span ng-switch-when="need.payment.method" translate>{{'REVIEW_PAYMENT_ERROR'}}</span>
+    <span ng-switch-when="need.billing.address" translate>{{'REVIEW_BILLING_ADDRESS_ERROR'}}</span>
+    <span ng-switch-default translate>
+      <span ng-if="$ctrl.submissionErrorStatus > -1" translate>
+        {{'REVIEW_MISSING_DATA_ERROR'}}
+      </span>
+      <span ng-if="$ctrl.submissionErrorStatus === -1" translate>
+        {{'REVIEW_TIME_OUT_ERROR'}}
+      </span>
+    </span>
+  </p>
+  <p ng-if="$ctrl.submissionError" ng-switch="$ctrl.submissionError">
+    <span ng-switch-when="Current payment type is unknown" translate>
+      {{'REVIEW_SUBMITTING_PAYMENT_ERROR'}}
+    </span>
+    <span ng-switch-when="CardExpiredException" translate>
+      {{'REVIEW_CARD_EXPIRED_ERROR'}}
+    </span>
+    <span ng-switch-when="CardErrorException" translate>
+      {{'REVIEW_INVALID_CARD_ERROR'}}
+    </span>
+    <span ng-switch-when="CardDeclinedException" translate>
+      {{'REVIEW_CARD_DECLINED_ERROR'}}
+    </span>
+    <span ng-switch-when="InsufficientFundException" translate>
+      {{'REVIEW_INSUFFICIENT_FUNDS_ERROR'}}
+    </span>
+    <span ng-switch-when="AuthorizedAmountExceededException" translate>
+      {{'REVIEW_EXCEEDS_BALANCE_ERROR'}}
+    </span>
+    <span ng-switch-when="InvalidCVV2Exception" translate>
+      {{'REVIEW_INVALID_SEC_CODE_ERROR'}}
+    </span>
+    <span ng-switch-when="InvalidAddressException" translate>
+      {{'REVIEW_ADDRESS_MISMATCH_ERROR'}}
+    </span>
+    <span ng-switch-default translate>
+      {{'REVIEW_DEFAULT_ERROR'}}
+    </span>
+  </p>
+</div>
diff --git a/src/app/checkout/step-3/step-3.component.js b/src/app/checkout/step-3/step-3.component.js
@@ -2,6 +2,7 @@ import angular from 'angular'
 import 'rxjs/add/observable/throw'
 
 import displayAddressComponent from 'common/components/display-address/display-address.component'
+import checkoutErrorMessages from 'app/checkout/checkout-error-messages/checkout-error-messages.component'
 import displayRateTotals from 'common/components/displayRateTotals/displayRateTotals.component'
 
 import commonService from 'common/services/api/common.service'
@@ -163,7 +164,8 @@ export default angular
     analyticsFactory.name,
     cartService.name,
     commonService.name,
-    recaptchaComponent.name
+    recaptchaComponent.name,
+    checkoutErrorMessages.name
   ])
   .component(componentName, {
     controller: Step3Controller,

diff --git a/src/app/checkout/step-3/step-3.tpl.html b/src/app/checkout/step-3/step-3.tpl.html
@@ -1,48 +1,9 @@
 <div class="loading-overlay-parent">
-  <div class="alert alert-danger" role="alert" ng-if="$ctrl.needinfoErrors || $ctrl.submissionError">
-    <p ng-repeat="error in $ctrl.needinfoErrors" ng-switch="error">
-      <span ng-switch-when="need.email" translate>{{'REVIEW_EMAIL_ERROR'}}</span>
-      <span ng-switch-when="need.payment.method" translate>{{'REVIEW_PAYMENT_ERROR'}}</span>
-      <span ng-switch-when="need.billing.address" translate>{{'REVIEW_BILLING_ADDRESS_ERROR'}}</span>
-      <span ng-switch-default translate>
-        <span ng-if="$ctrl.submissionErrorStatus > -1" translate>
-          {{'REVIEW_MISSING_DATA_ERROR'}}
-        </span>
-       <span ng-if="$ctrl.submissionErrorStatus === -1" translate>
-         {{'REVIEW_TIME_OUT_ERROR'}}
-       </span>
-      </span>
-    </p>
-    <p ng-if="$ctrl.submissionError" ng-switch="$ctrl.submissionError">
-      <span ng-switch-when="Current payment type is unknown" translate>
-        {{'REVIEW_SUBMITTING_PAYMENT_ERROR'}}
-      </span>
-      <span ng-switch-when="CardExpiredException" translate>
-        {{'REVIEW_CARD_EXPIRED_ERROR'}}
-      </span>
-      <span ng-switch-when="CardErrorException" translate>
-        {{'REVIEW_INVALID_CARD_ERROR'}}
-      </span>
-      <span ng-switch-when="CardDeclinedException" translate>
-        {{'REVIEW_CARD_DECLINED_ERROR'}}
-      </span>
-      <span ng-switch-when="InsufficientFundException" translate>
-        {{'REVIEW_INSUFFICIENT_FUNDS_ERROR'}}
-      </span>
-      <span ng-switch-when="AuthorizedAmountExceededException" translate>
-        {{'REVIEW_EXCEEDS_BALANCE_ERROR'}}
-      </span>
-      <span ng-switch-when="InvalidCVV2Exception" translate>
-        {{'REVIEW_INVALID_SEC_CODE_ERROR'}}
-      </span>
-      <span ng-switch-when="InvalidAddressException" translate>
-        {{'REVIEW_ADDRESS_MISMATCH_ERROR'}}
-      </span>
-      <span ng-switch-default translate>
-        {{'REVIEW_DEFAULT_ERROR'}}
-      </span>
-    </p>
-  </div>
+  <checkout-error-messages
+    needinfo-errors="$ctrl.needinfoErrors"
+    submission-error="$ctrl.submissionError"
+    submission-error-status="$ctrl.submissionErrorStatus">
+  </checkout-error-messages>
   <div class="mb">
     <div class="panel panel-default">
       <div class="panel-heading">