diff --git a/src/app/payment/paymentMethod/HostedPaymentMethod.spec.tsx b/src/app/payment/paymentMethod/HostedPaymentMethod.spec.tsx
index 04c5aa91fb..44b9aec51d 100644
--- a/src/app/payment/paymentMethod/HostedPaymentMethod.spec.tsx
+++ b/src/app/payment/paymentMethod/HostedPaymentMethod.spec.tsx
@@ -165,8 +165,8 @@ describe('HostedPaymentMethod', () => {
const component = mount();
- expect(component.find(storedInstrumentModule.AccountInstrumentFieldset).length)
- .toBe(1);
+ expect(component.find(storedInstrumentModule.AccountInstrumentFieldset))
+ .toHaveLength(1);
});
it('does not show instruments fieldset when there are no stored instruments', () => {
@@ -179,6 +179,16 @@ describe('HostedPaymentMethod', () => {
.toHaveLength(0);
});
+ it('does not show instruments fieldset when starting from the cart', () => {
+ jest.spyOn(checkoutState.data, 'isPaymentDataSubmitted')
+ .mockReturnValue(true);
+
+ const component = mount();
+
+ expect(component.find(storedInstrumentModule.AccountInstrumentFieldset))
+ .toHaveLength(0);
+ });
+
it('shows save account checkbox when there are no stored instruments', () => {
jest.spyOn(checkoutState.data, 'getInstruments')
.mockReturnValue([]);
@@ -207,8 +217,8 @@ describe('HostedPaymentMethod', () => {
it('does not render the dropdown', () => {
const component = mount();
- expect(component.find(storedInstrumentModule.AccountInstrumentFieldset).length)
- .toBe(0);
+ expect(component.find(storedInstrumentModule.AccountInstrumentFieldset))
+ .toHaveLength(0);
});
it('does not prompt to save the instrument', () => {
@@ -220,8 +230,8 @@ describe('HostedPaymentMethod', () => {
{ ...defaultProps }
/>);
- expect(component.find('.form-field--saveInstrument').length)
- .toBe(0);
+ expect(component.find('.form-field--saveInstrument'))
+ .toHaveLength(0);
});
});
});
diff --git a/src/app/payment/paymentMethod/HostedPaymentMethod.tsx b/src/app/payment/paymentMethod/HostedPaymentMethod.tsx
index 6770bdb4d5..b02624d08c 100644
--- a/src/app/payment/paymentMethod/HostedPaymentMethod.tsx
+++ b/src/app/payment/paymentMethod/HostedPaymentMethod.tsx
@@ -175,7 +175,6 @@ function mapFromCheckoutProps(): MapToProps<
const filterTrustedInstruments = memoizeOne((instruments: AccountInstrument[] = []) => instruments.filter(({ trustedShippingAddress }) => trustedShippingAddress));
return (context, props) => {
-
const {
formik: { values },
isUsingMultiShipping = false,
@@ -191,6 +190,7 @@ function mapFromCheckoutProps(): MapToProps<
getCustomer,
getInstruments,
isPaymentDataRequired,
+ isPaymentDataSubmitted,
},
statuses: {
isLoadingInstruments,
@@ -214,12 +214,14 @@ function mapFromCheckoutProps(): MapToProps<
return {
instruments: trustedInstruments,
isNewAddress: trustedInstruments.length === 0 && currentMethodInstruments.length > 0,
- isInstrumentFeatureAvailable: features['PAYMENTS-4579.braintree_paypal_vaulting'] && isInstrumentFeatureAvailable({
- config,
- customer,
- isUsingMultiShipping,
- paymentMethod: method,
- }),
+ isInstrumentFeatureAvailable: features['PAYMENTS-4579.braintree_paypal_vaulting']
+ && !isPaymentDataSubmitted(method.id, method.gateway)
+ && isInstrumentFeatureAvailable({
+ config,
+ customer,
+ isUsingMultiShipping,
+ paymentMethod: method,
+ }),
isLoadingInstruments: isLoadingInstruments(),
isPaymentDataRequired: isPaymentDataRequired(values.useStoreCredit),
loadInstruments: checkoutService.loadInstruments,