fix(payment): INT-2871 Styled credit card of apms on adyen v2.

bigcommerce · Jul 15, 2020 · 8a13caa · 8a13caa
1 parent 5bba463
commit 8a13caa
Showing 1 changed file with 42 additions and 40 deletions.
diff --git a/src/app/payment/paymentMethod/HostedWidgetPaymentMethod.tsx b/src/app/payment/paymentMethod/HostedWidgetPaymentMethod.tsx
@@ -178,46 +178,48 @@ class HostedWidgetPaymentMethod extends Component<
                 hideContentWhenLoading
                 isLoading={ isLoading }
             >
-                { selectedAccountInstrument && shouldShowInstrumentFieldset && <AccountInstrumentFieldset
-                    instruments={ instruments as AccountInstrument[] }
-                    onSelectInstrument={ this.handleSelectInstrument }
-                    onUseNewInstrument={ this.handleUseNewCard }
-                    selectedInstrument={ selectedAccountInstrument }
-                /> }
-
-                { !selectedAccountInstrument && shouldShowInstrumentFieldset && <CardInstrumentFieldset
-                    instruments={ instruments as CardInstrument[] }
-                    onSelectInstrument={ this.handleSelectInstrument }
-                    onUseNewInstrument={ this.handleUseNewCard }
-                    selectedInstrumentId={ selectedInstrumentId }
-                    shouldHideExpiryDate={ shouldHideInstrumentExpiryDate }
-                    validateInstrument={ this.getValidateInstrument() }
-                /> }
-
-                { this.renderPaymentDescriptorIfAvailable() }
-
-                <div
-                    className={ classNames(
-                        'widget',
-                        `widget--${method.id}`,
-                        'payment-widget',
-                        additionalContainerClassName
-                    ) }
-                    id={ containerId }
-                    style={ {
-                        display: (hideContentWhenSignedOut && isSignInRequired && !isSignedIn) || !shouldShowCreditCardFieldset || hideWidget ? 'none' : undefined,
-                    } }
-                    tabIndex={ -1 }
-                />
-
-                { shouldShowSaveInstrument && this.renderSaveInstrumentCheckbox() }
-
-                { this.renderEditButtonIfAvailable() }
-
-                { isSignedIn && <SignOutLink
-                    method={ method }
-                    onSignOut={ this.handleSignOut }
-                /> }
+                <div className="paymentMethod--hosted">
+                    { selectedAccountInstrument && shouldShowInstrumentFieldset && <AccountInstrumentFieldset
+                        instruments={ instruments as AccountInstrument[] }
+                        onSelectInstrument={ this.handleSelectInstrument }
+                        onUseNewInstrument={ this.handleUseNewCard }
+                        selectedInstrument={ selectedAccountInstrument }
+                    /> }
+
+                    { !selectedAccountInstrument && shouldShowInstrumentFieldset && <CardInstrumentFieldset
+                        instruments={ instruments as CardInstrument[] }
+                        onSelectInstrument={ this.handleSelectInstrument }
+                        onUseNewInstrument={ this.handleUseNewCard }
+                        selectedInstrumentId={ selectedInstrumentId }
+                        shouldHideExpiryDate={ shouldHideInstrumentExpiryDate }
+                        validateInstrument={ this.getValidateInstrument() }
+                    /> }
+
+                    { this.renderPaymentDescriptorIfAvailable() }
+
+                    <div
+                        className={ classNames(
+                            'widget',
+                            `widget--${method.id}`,
+                            'payment-widget',
+                            additionalContainerClassName
+                        ) }
+                        id={ containerId }
+                        style={ {
+                            display: (hideContentWhenSignedOut && isSignInRequired && !isSignedIn) || !shouldShowCreditCardFieldset || hideWidget ? 'none' : undefined,
+                        } }
+                        tabIndex={ -1 }
+                    />
+
+                    { shouldShowSaveInstrument && this.renderSaveInstrumentCheckbox() }
+
+                    { this.renderEditButtonIfAvailable() }
+
+                    { isSignedIn && <SignOutLink
+                        method={ method }
+                        onSignOut={ this.handleSignOut }
+                    /> }
+                </div>
             </LoadingOverlay>
         );
     }