From c7b1e812328ed96f8aa243fa84beb19549c5d1a6 Mon Sep 17 00:00:00 2001
From: Carlos Lopez <clopez@intersysconsulting.com>
Date: Mon, 30 Mar 2020 14:48:58 -0600
Subject: [PATCH] feat(payment): INT-2432 Comments from  Luis addressed

---
 .../paymentMethod/AdyenV2CardValidation.tsx   |  8 ++++-
 .../HostedWidgetPaymentMethod.tsx             |  2 +-
 .../CardInstrumentFieldset.tsx                |  8 ++---
 .../storedInstrument/InstrumentSelect.tsx     | 32 +++++++++----------
 .../forms-ccFields/_forms-ccFields.scss       |  8 +++++
 5 files changed, 36 insertions(+), 22 deletions(-)

diff --git a/src/app/payment/paymentMethod/AdyenV2CardValidation.tsx b/src/app/payment/paymentMethod/AdyenV2CardValidation.tsx
index 0473da30a4..c8eaae27c3 100644
--- a/src/app/payment/paymentMethod/AdyenV2CardValidation.tsx
+++ b/src/app/payment/paymentMethod/AdyenV2CardValidation.tsx
@@ -26,7 +26,13 @@ const AdyenV2CardValidation: React.FunctionComponent<AdyenV2CardValidationProps>
         </p> }
 
         <div className="form-ccFields" id={ verificationFieldsContainerId }>
-            <div className="form-field form-field--ccNumber" style={ { display: (shouldShowNumberField) ? undefined : 'none', flexBasis: (paymentMethodType === 'bcmc') ? '50%' : '65%' } }>
+            <div className={ classNames(
+                'form-field',
+                'form-field--ccNumber',
+                { 'form-field--ccNumber--hasExpiryDate': paymentMethodType === 'bcmc' },
+                { 'form-field-ccNumber--show': shouldShowNumberField }
+                ) }
+            >
                 <label htmlFor="encryptedCardNumber">
                     <TranslatedString id="payment.credit_card_number_label" />
                 </label>
diff --git a/src/app/payment/paymentMethod/HostedWidgetPaymentMethod.tsx b/src/app/payment/paymentMethod/HostedWidgetPaymentMethod.tsx
index 99d7a00b20..bcce12bcb3 100644
--- a/src/app/payment/paymentMethod/HostedWidgetPaymentMethod.tsx
+++ b/src/app/payment/paymentMethod/HostedWidgetPaymentMethod.tsx
@@ -167,7 +167,7 @@ class HostedWidgetPaymentMethod extends Component<
                     onSelectInstrument={ this.handleSelectInstrument }
                     onUseNewInstrument={ this.handleUseNewCard }
                     selectedInstrumentId={ selectedInstrumentId }
-                    shouldHideInstrumentExpiryDate={ shouldHideInstrumentExpiryDate }
+                    shouldHideExpiryDate={ shouldHideInstrumentExpiryDate }
                     validateInstrument={ this.getValidateInstrument() }
                 /> }
 
diff --git a/src/app/payment/storedInstrument/CardInstrumentFieldset.tsx b/src/app/payment/storedInstrument/CardInstrumentFieldset.tsx
index 6e44b92b3d..e97b1956f6 100644
--- a/src/app/payment/storedInstrument/CardInstrumentFieldset.tsx
+++ b/src/app/payment/storedInstrument/CardInstrumentFieldset.tsx
@@ -14,7 +14,7 @@ import ManageInstrumentsModal from './ManageInstrumentsModal';
 export interface CardInstrumentFieldsetProps {
     instruments: CardInstrument[];
     selectedInstrumentId?: string;
-    shouldHideInstrumentExpiryDate?: boolean;
+    shouldHideExpiryDate?: boolean;
     validateInstrument?: React.ReactNode;
     onSelectInstrument(id: string): void;
     onUseNewInstrument(): void;
@@ -29,7 +29,7 @@ const CardInstrumentFieldset: FunctionComponent<CardInstrumentFieldsetProps> = (
     onSelectInstrument,
     onUseNewInstrument,
     selectedInstrumentId,
-    shouldHideInstrumentExpiryDate = false,
+    shouldHideExpiryDate = false,
     validateInstrument = null,
 }) => {
     const renderInput = useCallback((field: FieldProps) => (
@@ -39,14 +39,14 @@ const CardInstrumentFieldset: FunctionComponent<CardInstrumentFieldsetProps> = (
             onSelectInstrument={ onSelectInstrument }
             onUseNewInstrument={ onUseNewInstrument }
             selectedInstrumentId={ selectedInstrumentId }
-            shouldHideInstrumentExpiryDate={ shouldHideInstrumentExpiryDate }
+            shouldHideExpiryDate={ shouldHideExpiryDate }
         />
     ), [
         instruments,
         onSelectInstrument,
         onUseNewInstrument,
         selectedInstrumentId,
-        shouldHideInstrumentExpiryDate,
+        shouldHideExpiryDate,
     ]);
 
     const renderModal = useCallback((props: ModalTriggerModalProps) => (
diff --git a/src/app/payment/storedInstrument/InstrumentSelect.tsx b/src/app/payment/storedInstrument/InstrumentSelect.tsx
index 9d73c40334..b958f1d5fa 100644
--- a/src/app/payment/storedInstrument/InstrumentSelect.tsx
+++ b/src/app/payment/storedInstrument/InstrumentSelect.tsx
@@ -15,7 +15,7 @@ import mapFromInstrumentCardType from './mapFromInstrumentCardType';
 export interface InstrumentSelectProps extends FieldProps<string> {
     instruments: CardInstrument[];
     selectedInstrumentId?: string;
-    shouldHideInstrumentExpiryDate?: boolean;
+    shouldHideExpiryDate?: boolean;
     onSelectInstrument(id: string): void;
     onUseNewInstrument(): void;
 }
@@ -54,7 +54,7 @@ class InstrumentSelect extends PureComponent<InstrumentSelectProps> {
             onSelectInstrument,
             onUseNewInstrument,
             selectedInstrumentId,
-            shouldHideInstrumentExpiryDate = false,
+            shouldHideExpiryDate = false,
         } = this.props;
 
         const selectedInstrument = find(instruments, { bigpayToken: selectedInstrumentId });
@@ -68,13 +68,13 @@ class InstrumentSelect extends PureComponent<InstrumentSelectProps> {
                             onSelectInstrument={ onSelectInstrument }
                             onUseNewInstrument={ onUseNewInstrument }
                             selectedInstrumentId={ selectedInstrumentId }
-                            shouldHideInstrumentExpiryDate={ shouldHideInstrumentExpiryDate }
+                            shouldHideExpiryDate={ shouldHideExpiryDate }
                         />
                     }
                 >
                     <InstrumentSelectButton
                         instrument={ selectedInstrument }
-                        shouldHideInstrumentExpiryDate={ shouldHideInstrumentExpiryDate }
+                        shouldHideExpiryDate={ shouldHideExpiryDate }
                         testId="instrument-select"
                     />
 
@@ -100,7 +100,7 @@ class InstrumentSelect extends PureComponent<InstrumentSelectProps> {
 interface InstrumentMenuProps {
     instruments: CardInstrument[];
     selectedInstrumentId?: string;
-    shouldHideInstrumentExpiryDate?: boolean;
+    shouldHideExpiryDate?: boolean;
     onSelectInstrument(id: string): void;
     onUseNewInstrument(): void;
 }
@@ -108,7 +108,7 @@ interface InstrumentMenuProps {
 const InstrumentMenu: FunctionComponent<InstrumentMenuProps> = ({
     instruments,
     selectedInstrumentId,
-    shouldHideInstrumentExpiryDate = false,
+    shouldHideExpiryDate = false,
     onSelectInstrument,
     onUseNewInstrument,
 }) => {
@@ -127,7 +127,7 @@ const InstrumentMenu: FunctionComponent<InstrumentMenuProps> = ({
                 <InstrumentOption
                     instrument={ instrument }
                     onClick={ onSelectInstrument }
-                    shouldHideInstrumentExpiryDate={ shouldHideInstrumentExpiryDate }
+                    shouldHideExpiryDate={ shouldHideExpiryDate }
                     testId="instrument-select-option"
                 />
             </li>
@@ -144,14 +144,14 @@ const InstrumentMenu: FunctionComponent<InstrumentMenuProps> = ({
 
 interface InstrumentSelectButtonProps {
     instrument?: CardInstrument;
-    shouldHideInstrumentExpiryDate?: boolean;
+    shouldHideExpiryDate?: boolean;
     testId?: string;
     onClick?(): void;
 }
 
 const InstrumentSelectButton: FunctionComponent<InstrumentSelectButtonProps> = ({
     instrument,
-    shouldHideInstrumentExpiryDate = false,
+    shouldHideExpiryDate = false,
     testId,
     onClick,
 }) => {
@@ -169,7 +169,7 @@ const InstrumentSelectButton: FunctionComponent<InstrumentSelectButtonProps> = (
             className="instrumentSelect-button optimizedCheckout-form-select dropdown-button form-input"
             instrument={ instrument }
             onClick={ onClick }
-            shouldHideInstrumentExpiryDate={ shouldHideInstrumentExpiryDate }
+            shouldHideExpiryDate={ shouldHideExpiryDate }
             testId={ testId }
         />
     );
@@ -178,13 +178,13 @@ const InstrumentSelectButton: FunctionComponent<InstrumentSelectButtonProps> = (
 interface InstrumentOptionProps {
     instrument: CardInstrument;
     testId?: string;
-    shouldHideInstrumentExpiryDate?: boolean;
+    shouldHideExpiryDate?: boolean;
     onClick?(token: string): void;
 }
 
 const InstrumentOption: FunctionComponent<InstrumentOptionProps> = ({
     instrument,
-    shouldHideInstrumentExpiryDate = false,
+    shouldHideExpiryDate = false,
     onClick = noop,
 }) => {
     const handleClick = useCallback(() => {
@@ -198,7 +198,7 @@ const InstrumentOption: FunctionComponent<InstrumentOptionProps> = ({
         <InstrumentMenuItem
             instrument={ instrument }
             onClick={ handleClick }
-            shouldHideInstrumentExpiryDate={ shouldHideInstrumentExpiryDate }
+            shouldHideExpiryDate={ shouldHideExpiryDate }
             testId="instrument-select-option"
         />
     );
@@ -208,7 +208,7 @@ interface InstrumentMenuItemProps {
     className?: string;
     instrument: CardInstrument;
     testId?: string;
-    shouldHideInstrumentExpiryDate?: boolean;
+    shouldHideExpiryDate?: boolean;
     onClick?(): void;
 }
 
@@ -216,7 +216,7 @@ const InstrumentMenuItem: FunctionComponent<InstrumentMenuItemProps> = ({
     className,
     instrument,
     testId,
-    shouldHideInstrumentExpiryDate = false,
+    shouldHideExpiryDate = false,
     onClick,
 }) => {
     const cardType = mapFromInstrumentCardType(instrument.brand);
@@ -255,7 +255,7 @@ const InstrumentMenuItem: FunctionComponent<InstrumentMenuItemProps> = ({
                         /> }
                 </div>
 
-                { !shouldHideInstrumentExpiryDate && <div
+                { !shouldHideExpiryDate && <div
                     className={ classNames(
                         'instrumentSelect-expiry',
                         { 'instrumentSelect-expiry--expired': isExpired }
diff --git a/src/scss/components/bigcommerce/forms-ccFields/_forms-ccFields.scss b/src/scss/components/bigcommerce/forms-ccFields/_forms-ccFields.scss
index a7980aa002..fc11e8769a 100644
--- a/src/scss/components/bigcommerce/forms-ccFields/_forms-ccFields.scss
+++ b/src/scss/components/bigcommerce/forms-ccFields/_forms-ccFields.scss
@@ -20,6 +20,14 @@
     flex-basis: 65%;
 }
 
+.form-field--ccNumber--hasExpiryDate {
+    flex-basis: 50%;
+}
+
+.form-field-ccNumber--show {
+    display: none;
+}
+
 .form-ccFields-field--ccCvv,
 .form-field--ccExpiry {
     flex-basis: 1%;