feat(payment): INT-2432 Comments from Luis addressed

bigcommerce · Mar 30, 2020 · c7b1e81 · c7b1e81
1 parent 25f05f3
commit c7b1e81
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 22 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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,15 +100,15 @@ class InstrumentSelect extends PureComponent<InstrumentSelectProps> {
 interface InstrumentMenuProps {
     instruments: CardInstrument[];
     selectedInstrumentId?: string;
-    shouldHideInstrumentExpiryDate?: boolean;
+    shouldHideExpiryDate?: boolean;
     onSelectInstrument(id: string): void;
     onUseNewInstrument(): void;
 }
 
 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,15 +208,15 @@ interface InstrumentMenuItemProps {
     className?: string;
     instrument: CardInstrument;
     testId?: string;
-    shouldHideInstrumentExpiryDate?: boolean;
+    shouldHideExpiryDate?: boolean;
     onClick?(): void;
 }
 
 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
@@ -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%;