Add styles for creditCardCvv.directive.

CruGlobal · Dec 13, 2024 · c92ebd8 · c92ebd8
1 parent 9123795
commit c92ebd8
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 22 deletions.
diff --git a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.tpl.html b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.tpl.html
@@ -6,14 +6,16 @@
 
   <div class="panel-body">
     <form novalidate name="$ctrl.creditCardPaymentForm">
-      <div class="radio radio-method" ng-repeat="paymentMethod in $ctrl.paymentMethods" ng-init="expired = !$ctrl.validPaymentMethod(paymentMethod)">
-        <label>
-          <input type="radio" name="paymentMethod" ng-model="$ctrl.selectedPaymentMethod" ng-value="paymentMethod" ng-disabled="expired" required ng-change="$ctrl.switchPayment()">
-          <payment-method-display payment-method="paymentMethod" expired="expired"></payment-method-display>
-          <button class="btn btn-xs btn-link" ng-click="$ctrl.openPaymentMethodFormModal(paymentMethod)" ng-if="paymentMethod['card-type']" translate>edit</button>
-        </label>
-        <div ng-if="$ctrl.selectedPaymentMethod['card-type'] && $ctrl.selectedPaymentMethod === paymentMethod" class="col-sm-4">
-          <credit-card-cvv ></credit-card-cvv>
+      <div class="radio radio-method saved-payment-methods" ng-repeat="paymentMethod in $ctrl.paymentMethods" ng-init="expired = !$ctrl.validPaymentMethod(paymentMethod)">
+        <div class="row">
+          <label>
+            <input type="radio" name="paymentMethod" ng-model="$ctrl.selectedPaymentMethod" ng-value="paymentMethod" ng-disabled="expired" required ng-change="$ctrl.switchPayment()">
+            <payment-method-display payment-method="paymentMethod" expired="expired"></payment-method-display>
+            <button class="btn btn-xs btn-link" ng-click="$ctrl.openPaymentMethodFormModal(paymentMethod)" ng-if="paymentMethod['card-type']" translate>edit</button>
+          </label>
+          <span ng-if="$ctrl.selectedPaymentMethod['card-type'] && $ctrl.selectedPaymentMethod === paymentMethod">
+            <credit-card-cvv ></credit-card-cvv>
+          </span>
         </div>
       </div>
     </form>

diff --git a/src/common/directives/creditCardCvv.directive.js b/src/common/directives/creditCardCvv.directive.js
@@ -1,23 +1,27 @@
 import angular from 'angular'
 const directiveName = 'creditCardCvv'
 
+import './creditCardCvv.directive.scss'
+
 const template =
-`<div class="form-group" ng-class="{'has-error': ($ctrl.creditCardPaymentForm.securityCode | showErrors), 'is-required': !$ctrl.paymentMethod}">
-  <label translate>{{'SEC_CODE'}}</label>
-  <input type="text" 
-    name="securityCode"
-    autocomplete="cc-csc"
-    class="form-control form-control-subtle"
-    ng-model="$ctrl.creditCardPayment.securityCode"
-    ng-required="!$ctrl.paymentMethod || $ctrl.creditCardPayment.cardNumber"
-    ng-attr-placeholder="{{$ctrl.paymentMethod && !$ctrl.creditCardPayment.cardNumber ? '***' : ''}}">
-  <div role="alert" ng-messages="$ctrl.creditCardPaymentForm.securityCode.$error" ng-if="($ctrl.creditCardPaymentForm.securityCode | showErrors)">
-    <div class="help-block" ng-message="required" translate>{{'CARD_SEC_CODE_ERROR'}}</div>
-    <div class="help-block" ng-message="minLength" translate>{{'MIN_LENGTH_CARD_SEC_CODE'}}</div>
-    <div class="help-block" ng-message="maxLength" translate>{{'MAX_LENGTH_CARD_SEC_CODE'}}</div>
-    <div class="help-block" ng-message="cardTypeLength" ng-init="isAmex = $ctrl.cardInfo.type($ctrl.creditCardPayment.cardNumber) === 'American Express'">
+`<div class="credit-card-cvv-container form-group" ng-class="{'has-error': ($ctrl.creditCardPaymentForm.securityCode | showErrors), 'is-required': !$ctrl.paymentMethod}">
+  <span class="credit-card-cvv-label" translate>{{'SEC_CODE'}}</span>
+  <div>
+    <input type="text" 
+      name="securityCode"
+      autocomplete="cc-csc"
+      class="form-control form-control-subtle"
+      ng-model="$ctrl.creditCardPayment.securityCode"
+      ng-required="!$ctrl.paymentMethod || $ctrl.creditCardPayment.cardNumber"
+      ng-attr-placeholder="{{$ctrl.paymentMethod && !$ctrl.creditCardPayment.cardNumber ? '***' : ''}}">
+    <div role="alert" ng-messages="$ctrl.creditCardPaymentForm.securityCode.$error" ng-if="($ctrl.creditCardPaymentForm.securityCode | showErrors)">
+      <div class="credit-card-cvv-help-block help-block" ng-message="required" translate>{{'CARD_SEC_CODE_ERROR'}}</div>
+      <div class="credit-card-cvv-help-block help-block" ng-message="minLength" translate>{{'MIN_LENGTH_CARD_SEC_CODE'}}</div>
+      <div class="credit-card-cvv-help-block help-block" ng-message="maxLength" translate>{{'MAX_LENGTH_CARD_SEC_CODE'}}</div>
+      <div class="credit-card-cvv-help-block help-block" ng-message="cardTypeLength" ng-init="isAmex = $ctrl.cardInfo.type($ctrl.creditCardPayment.cardNumber) === 'American Express'">
       <translate ng-if="!isAmex">{{'LOCATION_OF_CODE_OTHER'}}</translate>
       <translate ng-if="isAmex">{{'LOCATION_OF_CODE_AMEX'}}</translate>
+      </div>
     </div>
   </div>
 </div>`

diff --git a/src/common/directives/creditCardCvv.directive.scss b/src/common/directives/creditCardCvv.directive.scss
@@ -0,0 +1,48 @@
+
+.radio.radio-method {
+	.credit-card-cvv-container {
+		display: flex;
+		margin: 8px 20px 8px 38px;
+		.col-sm-4 {
+			padding-left: 10px;
+			padding-right: 0;
+		}
+		.form-control {
+			line-height: 1.6;
+			height: auto;
+		}
+		.credit-card-cvv-label {
+			margin-top: 9px;
+			margin-right: 9px;
+			font-size: 15px;
+			line-height: 1.2em;
+			font-weight: bold;
+			white-space: nowrap;
+			&::after {
+				content: ':';
+			}
+		}
+		.credit-card-cvv-help-block {
+			margin-bottom: 0;
+		}
+	}
+}
+
+.give-modal-content {
+	.credit-card-cvv-label {
+		text-transform: uppercase;
+		font-weight: 500;
+		letter-spacing: 1px;
+		font-size: 14px;
+		display: block;
+    margin-bottom: 4px;
+		&::after {
+			content: '*';
+			display: inline-block;
+			font-size: 115%;
+			line-height: 0;
+			font-family: "fontawesome", "Font Awesome 5 Pro";
+			margin-left: 6px;
+		}
+	}
+}