Merge pull request #1185 from PrestaShopCorp/feat/PAYSHIP-2612-1.6

[PAYSHIP-2612]Added CardFields component PS1.6
PrestaShopCorp · Feb 19, 2024 · 72ca5c4 · 72ca5c4
2 parents 238400b + b18a872
commit 72ca5c4
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 34 deletions.
diff --git a/_dev/js/front/src/components/common/card-fields.component.js b/_dev/js/front/src/components/common/card-fields.component.js
@@ -67,10 +67,8 @@ export class CardFieldsComponent extends BaseComponent {
       cvv: false
     };
     this.data.HTMLElement = this.props.HTMLElement;
-    this.data.HTMLElementCardForm =
-      this.querySelectorService.getCardFieldsFormContainer();
-    this.data.HTMLElementBaseButton =
-      this.querySelectorService.getBasePaymentConfirmation();
+    this.data.HTMLElementCardForm = this.querySelectorService.getCardFieldsFormContainer();
+    this.data.HTMLElementBaseButton = this.getBaseButton();
     this.data.HTMLElementButton = null;
     this.data.HTMLElementButtonWrapper = this.getButtonWrapper();
 
@@ -95,6 +93,11 @@ export class CardFieldsComponent extends BaseComponent {
       this.querySelectorService.getCardFieldsCvvError();
   }
 
+  getBaseButton() {
+    const buttonSelector = `#payment-confirmation button`;
+    return document.querySelector(buttonSelector);
+  }
+
   getButtonWrapper() {
     const buttonWrapper = `.ps_checkout-button[data-funding-source=${this.data.name}]`;
     return document.querySelector(buttonWrapper);
@@ -222,7 +225,6 @@ export class CardFieldsComponent extends BaseComponent {
             return this.psCheckoutApi
               .postCreateOrder({
                 ...data,
-                fundingSource: this.data.name,
                 isHostedFields: true
                 // vault: storeCardInVault
               })

diff --git a/_dev/js/front/src/components/common/payment-option.component.js b/_dev/js/front/src/components/common/payment-option.component.js
@@ -50,7 +50,7 @@ export class PaymentOptionComponent extends BaseComponent {
     this.data.HTMLElementLabel = this.getLabel();
     this.data.HTMLElementMark = this.props.HTMLElementMark || null;
 
-    this.data.HTMLElementCardFields =this.querySelectorService.getCardFieldsFormContainer();
+    this.data.HTMLElementCardFields = this.querySelectorService.getCardFieldsFormContainer();
     this.data.HTMLElementSmartButton = this.getSmartButton();
     this.data.HTMLElementPaymentFields = this.getPaymentFields();
   }

diff --git a/.../js/front/src/service/query-selector.service/default-selectors/default-selectors-ps1_6.js b/.../js/front/src/service/query-selector.service/default-selectors/default-selectors-ps1_6.js
@@ -46,16 +46,16 @@ export const DefaultSelectors1_6 = {
 
   CARD_FIELDS: {
     FORM: '#ps_checkout-card-fields-form',
-    NAME: '#ps_checkout-card-fields-card-name',
-    NUMBER: '#ps_checkout-card-fields-card-number',
-    EXPIRY: '#ps_checkout-card-fields-card-expiry',
-    CVV: '#ps_checkout-card-fields-card-cvv',
-    NAME_ERROR: '#ps_checkout-card-fields-card-name-error',
-    NUMBER_ERROR: '#ps_checkout-card-fields-card-number-error',
-    VENDOR_ERROR: '#ps_checkout-card-fields-card-vendor-error',
-    EXPIRY_ERROR: '#ps_checkout-card-fields-card-expiry-error',
-    CVV_ERROR: '#ps_checkout-card-fields-card-cvv-error',
-  },
+    NAME: '#ps_checkout-card-fields-name',
+    NUMBER: '#ps_checkout-card-fields-number',
+    EXPIRY: '#ps_checkout-card-fields-expiry',
+    CVV: '#ps_checkout-card-fields-cvv',
+    NAME_ERROR: '#ps_checkout-card-fields-name-error',
+    NUMBER_ERROR: '#ps_checkout-card-fields-number-error',
+    VENDOR_ERROR: '#ps_checkout-card-fields-vendor-error',
+    EXPIRY_ERROR: '#ps_checkout-card-fields-expiry-error',
+    CVV_ERROR: '#ps_checkout-card-fields-cvv-error',
+  }
 
   PAYMENT_METHOD_LOGO_PRODUCT_CONTAINER: 'body.product .box-cart-bottom .buttons_bottom_block',
   PAYMENT_METHOD_LOGO_CART_CONTAINER: 'body.order .cart_navigation_extra'

diff --git a/_dev/js/front/src/service/query-selector.service/query-selector-ps1_7.service.js b/_dev/js/front/src/service/query-selector.service/query-selector-ps1_7.service.js
@@ -90,6 +90,7 @@ export class QuerySelectorPs1_7Service {
       SELECTORS.CARD_FIELDS.FORM
     );
   }
+
   static getCardFieldsNameInputContainer() {
     return this.querySelector(
       SELECTORS.CARD_FIELDS.NAME

diff --git a/views/css/payments16.css b/views/css/payments16.css
@@ -473,3 +473,20 @@
 #ps_checkout-canceled img, #ps_checkout-error img{
   margin-right: 10px;
 }
+
+#ps_checkout-card-fields-form.loading > *:not(#ps_checkout-card-fields-form-loader),
+#ps_checkout-card-fields-form:not(.loading) > #ps_checkout-card-fields-form-loader {
+  display: none;
+}
+
+#ps_checkout-card-fields-name-error.hidden,
+#ps_checkout-card-fields-number-error.hidden,
+#ps_checkout-card-fields-vendor-error.hidden,
+#ps_checkout-card-fields-expiry-error.hidden,
+#ps_checkout-card-fields-cvv-error.hidden {
+  display: none;
+}
+
+#ps_checkout-card-fields-form-loader {
+  text-align: center;
+}
diff --git a/views/templates/hook/displayPayment.tpl b/views/templates/hook/displayPayment.tpl
@@ -49,27 +49,29 @@
           <div class="payment_module closed">
             <a href="javascript:void(0);">
               {if $fundingSource == 'card' && $isHostedFieldsAvailable}
-                <form id="ps_checkout-hosted-fields-form" class="form-horizontal">
-                  <div class="form-group">
-                    <label class="form-control-label" for="ps_checkout-hosted-fields-card-name">{l s='Cardholder Name (optional)' mod='ps_checkout'}</label>
-                    <div id="ps_checkout-hosted-fields-card-name" class="form-control">
-                    </div>
+                <form id="ps_checkout-card-fields-form" class="form-horizontal loading">
+                  <div id="ps_checkout-card-fields-form-loader">
+                    <img src="{$modulePath}views/img/tail-spin.svg" alt="">
                   </div>
-                  <div class="form-group">
-                    <label class="form-control-label" for="ps_checkout-hosted-fields-card-number">{l s='Card number' mod='ps_checkout'}</label>
-                    <div id="ps_checkout-hosted-fields-card-number" class="form-control">
-                      <div id="card-image">
-                        <img class="default-credit-card" src="{$modulePath}views/img/credit_card.png" alt="">
-                      </div>
-                    </div>
+                  <div>
+                    <label class="form-control-label" for="ps_checkout-card-fields-name">{l s='Card holder name' mod='ps_checkout'}</label>
+                    <div id="ps_checkout-card-fields-name"></div>
+                    <div id="ps_checkout-card-fields-name-error" class="alert alert-danger hidden">{l s='Card holder name is invalid' mod='ps_checkout'}</div>
+                  </div>
+                  <div>
+                    <label class="form-control-label" for="ps_checkout-card-fields-number">{l s='Card number' mod='ps_checkout'}</label>
+                    <div id="ps_checkout-card-fields-number"></div>
+                    <div id="ps_checkout-card-fields-number-error" class="alert alert-danger hidden">{l s='Card number is invalid' mod='ps_checkout'}</div>
+                    <div id="ps_checkout-card-fields-vendor-error" class="alert alert-danger hidden">{l s='Card vendor is invalid' mod='ps_checkout'}</div>
                   </div>
                   <div class="row">
-                    <div class="form-group col-xs-6">
-                      <label class="form-control-label" for="ps_checkout-hosted-fields-card-expiration-date">{l s='Expiry date' mod='ps_checkout'}</label>
-                      <div id="ps_checkout-hosted-fields-card-expiration-date" class="form-control"></div>
+                    <div class="col-xs-6">
+                      <label class="form-control-label" for="ps_checkout-card-fields-expiry">{l s='Expiry date' mod='ps_checkout'}</label>
+                      <div id="ps_checkout-card-fields-expiry"></div>
+                      <div id="ps_checkout-card-fields-expiry-error" class="alert alert-danger hidden">{l s='Card expiration date is invalid' mod='ps_checkout'}</div>
                     </div>
-                    <div class="form-group col-xs-6">
-                      <label class="form-control-label" for="ps_checkout-hosted-fields-card-cvv">{l s='CVC' mod='ps_checkout'}</label>
+                    <div class="col-xs-6">
+                      <label class="form-control-label" for="ps_checkout-card-fields-cvv">{l s='CVC' mod='ps_checkout'}</label>
                       <div class="ps_checkout-info-wrapper">
                         <div class="ps_checkout-info-button" onmouseenter="cvvEnter()" onmouseleave="cvvLeave()">i
                           <div class="popup-content" id="cvv-popup">
@@ -78,7 +80,8 @@
                           </div>
                         </div>
                       </div>
-                      <div id="ps_checkout-hosted-fields-card-cvv" class="form-control"></div>
+                      <div id="ps_checkout-card-fields-cvv"></div>
+                      <div id="ps_checkout-card-fields-cvv-error" class="alert alert-danger hidden">{l s='CVV code is invalid' mod='ps_checkout'}</div>
                     </div>
                   </div>