From 8a13caa8a40f12f81c83da357c9bb040968b0c71 Mon Sep 17 00:00:00 2001
From: Axel Malagon <axel.malagon@bigcommerce.com>
Date: Tue, 7 Jul 2020 19:45:37 -0500
Subject: [PATCH] fix(payment): INT-2871 Styled credit card of apms on adyen
 v2.

---
 .../HostedWidgetPaymentMethod.tsx             | 82 ++++++++++---------
 1 file changed, 42 insertions(+), 40 deletions(-)

diff --git a/src/app/payment/paymentMethod/HostedWidgetPaymentMethod.tsx b/src/app/payment/paymentMethod/HostedWidgetPaymentMethod.tsx
index 6af2612e69..1f38fb2b4a 100644
--- 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>
         );
     }