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,