-
Notifications
You must be signed in to change notification settings - Fork 141
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
V5: Whitelabel Pay by Bank in the US (#2879)
* initial pay by bank us work * initial pay by bank us work make config to always show logos add changeset fix tests stored pay by bank and code review changes some more tests and code rivew fixes * fixes for v5 * fixes css on small screens * translations * fix css brands for v5 * remove console.log
- Loading branch information
Showing
37 changed files
with
406 additions
and
40 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| '@adyen/adyen-web': minor | ||
| --- | ||
|
|
||
| Pay by Bank US now shows whitelabel branding |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| @import '../../style/index'; | ||
|
|
||
| .adyen-checkout-paybybank_AIS_DD { | ||
| margin-bottom: 16px; | ||
|
|
||
| &__description-header { | ||
| margin: 0 0 4px; | ||
| font-size: 16px; | ||
| font-weight: 500; | ||
| color: $color-black; | ||
| } | ||
|
|
||
| &__description-body { | ||
| font-weight: 400; | ||
| list-style-type: disc; | ||
| color: $color-gray-darker; | ||
| margin: 0; | ||
| font-size: 14px; | ||
| line-height: 1.5; | ||
| } | ||
| } | ||
|
|
||
| // apply the rule to the main dropin intem | ||
| .adyen-checkout__payment-method--paybybank_AIS_DD { | ||
| .adyen-checkout__payment-method__brands { | ||
| // a bit hacky but makes constum breakpoints to hide each set of images | ||
| @media (max-width: 330px) { | ||
| display: none; | ||
| } | ||
|
|
||
| @media (max-width: 360px) { | ||
| .adyen-checkout__payment-method__image__wrapper:nth-child(2) { | ||
| display: none; | ||
| } | ||
| } | ||
|
|
||
| @media (max-width: 390px) { | ||
| .adyen-checkout__payment-method__image__wrapper:nth-child(3) { | ||
| display: none; | ||
| } | ||
| } | ||
|
|
||
| @media (max-width: 420px) { | ||
| .adyen-checkout__payment-method__image__wrapper:nth-child(4) { | ||
| display: none; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .adyen-checkout__payment-method__brand-number { | ||
| text-overflow: clip; | ||
| white-space: nowrap; | ||
| } | ||
| } |
102 changes: 102 additions & 0 deletions
102
packages/lib/src/components/PayByBankUS/PayByBankUS.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,102 @@ | ||
| import { render, screen } from '@testing-library/preact'; | ||
| import PayByBankUS from './PayByBankUS'; | ||
| import userEvent from '@testing-library/user-event'; | ||
|
|
||
| describe('PayByBank US', () => { | ||
| let onSubmitMock; | ||
| let user; | ||
|
|
||
| const mockSendAnalytics = jest.fn(); | ||
| const analytics = { | ||
| sendAnalytics: mockSendAnalytics | ||
| }; | ||
|
|
||
| beforeEach(() => { | ||
| onSubmitMock = jest.fn(); | ||
| user = userEvent.setup(); | ||
| }); | ||
|
|
||
| test('should render payment description by default', async () => { | ||
| const pbb = new PayByBankUS({ | ||
| i18n: global.i18n, | ||
| loadingContext: 'test', | ||
| modules: { resources: global.resources, analytics } | ||
| }); | ||
|
|
||
| render(pbb.render()); | ||
| expect(await screen.findByText(/Use Pay by Bank to pay/i)).toBeTruthy(); | ||
| expect(await screen.findByText(/By connecting your bank account/i)).toBeTruthy(); | ||
| }); | ||
|
|
||
| test('should render redirect button by default', async () => { | ||
| const pbb = new PayByBankUS({ | ||
| onSubmit: onSubmitMock, | ||
| i18n: global.i18n, | ||
| loadingContext: 'test', | ||
| modules: { resources: global.resources, analytics } | ||
| }); | ||
|
|
||
| render(pbb.render()); | ||
| const button = await screen.findByRole('button'); | ||
| expect(button).toHaveTextContent('Continue to'); | ||
|
|
||
| // check if button actually triggers submit | ||
| await user.click(button); | ||
| expect(onSubmitMock).toHaveBeenCalledTimes(1); | ||
| }); | ||
|
|
||
| test('should not render pay button if showPayButton is false', () => { | ||
| const pbb = new PayByBankUS({ | ||
| onSubmit: onSubmitMock, | ||
| i18n: global.i18n, | ||
| loadingContext: 'test', | ||
| modules: { resources: global.resources, analytics }, | ||
| showPayButton: false | ||
| }); | ||
|
|
||
| render(pbb.render()); | ||
| expect(screen.queryByRole('button')).not.toBeInTheDocument(); | ||
|
|
||
| // check if submit is still callables | ||
| pbb.submit(); | ||
| expect(onSubmitMock).toHaveBeenCalledTimes(1); | ||
| }); | ||
|
|
||
| test('should not show disclaimer if is stored payment method', () => { | ||
| const pbb = new PayByBankUS({ | ||
| storedPaymentMethodId: 'MOCK_ID', | ||
| i18n: global.i18n, | ||
| loadingContext: 'test', | ||
| modules: { resources: global.resources, analytics } | ||
| }); | ||
|
|
||
| render(pbb.render()); | ||
| expect(screen.queryByText(/Use Pay by Bank to pay/i)).not.toBeInTheDocument(); | ||
| expect(screen.queryByText(/By connecting your bank account/i)).not.toBeInTheDocument(); | ||
| }); | ||
|
|
||
| test('should show payButton with label Pay... if is stored payment method', async () => { | ||
| const pbb = new PayByBankUS({ | ||
| storedPaymentMethodId: 'MOCK_ID', | ||
| showPayButton: true, | ||
| i18n: global.i18n, | ||
| loadingContext: 'test', | ||
| modules: { resources: global.resources, analytics } | ||
| }); | ||
|
|
||
| render(pbb.render()); | ||
| expect(await screen.findByText(/Pay/i)).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| test('should use label instead of payment method name if stored payment', () => { | ||
| const pbb = new PayByBankUS({ | ||
| storedPaymentMethodId: 'MOCK_ID', | ||
| label: 'Label mock', | ||
| i18n: global.i18n, | ||
| loadingContext: 'test', | ||
| modules: { resources: global.resources, analytics } | ||
| }); | ||
|
|
||
| expect(pbb.displayName).toBe('Label mock'); | ||
| }); | ||
| }); |
101 changes: 101 additions & 0 deletions
101
packages/lib/src/components/PayByBankUS/PayByBankUS.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,101 @@ | ||
| import { Fragment, h } from 'preact'; | ||
| import CoreProvider from '../../core/Context/CoreProvider'; | ||
| import RedirectElement from '../Redirect'; | ||
| import RedirectButton from '../internal/RedirectButton'; | ||
| import './PayByBankUS.scss'; | ||
| import getIssuerImageUrl from '../../utils/get-issuer-image'; | ||
| import PayButton, { payAmountLabel } from '../internal/PayButton'; | ||
|
|
||
| export default class PayByBankUS extends RedirectElement { | ||
| public static type = 'paybybank_AIS_DD'; | ||
|
|
||
| public static defaultProps = { | ||
| type: PayByBankUS.type, | ||
| showPayButton: true, | ||
| // paymentMethodBrands configuration | ||
| keepBrandsVisible: true, | ||
| showOtherInsteafOfNumber: true | ||
| }; | ||
|
|
||
| public formatData() { | ||
| return { | ||
| paymentMethod: { | ||
| type: this.type, | ||
| ...(this.props.storedPaymentMethodId && { | ||
| storedPaymentMethodId: this.props.storedPaymentMethodId | ||
| }) | ||
| }, | ||
| browserInfo: this.browserInfo | ||
| }; | ||
| } | ||
|
|
||
| get displayName() { | ||
| if (this.props.storedPaymentMethodId && this.props.label) { | ||
| return this.props.label; | ||
| } | ||
| return this.props.name; | ||
| } | ||
|
|
||
| get additionalInfo() { | ||
| return this.props.storedPaymentMethodId ? this.props.name : ''; | ||
| } | ||
|
|
||
| /* | ||
| Hardcode US brands | ||
| */ | ||
| get brands(): { icon: string; name: string }[] { | ||
| const getImage = props => this.resources.getImage(props); | ||
| // paybybank_AIS_DD / tx_variant not used here since images are kept in paybybank subfolder | ||
| const getIssuerIcon = getIssuerImageUrl({}, 'paybybank', getImage); | ||
|
|
||
| // hardcoding | ||
| return [ | ||
| { icon: getIssuerIcon('US-1'), name: 'Wells Fargo' }, | ||
| { icon: getIssuerIcon('US-2'), name: 'Bank of America' }, | ||
| { icon: getIssuerIcon('US-3'), name: 'Chase' }, | ||
| { icon: getIssuerIcon('US-4'), name: 'Citi' } | ||
| ]; | ||
| } | ||
|
|
||
| render() { | ||
| return ( | ||
| <CoreProvider i18n={this.props.i18n} loadingContext={this.props.loadingContext} resources={this.resources}> | ||
| {this.props.storedPaymentMethodId ? ( | ||
| this.props.showPayButton && ( | ||
| <PayButton | ||
| {...this.props} | ||
| classNameModifiers={['standalone']} | ||
| amount={this.props.amount} | ||
| label={payAmountLabel(this.props.i18n, this.props.amount)} | ||
| onClick={this.submit} | ||
| /> | ||
| ) | ||
| ) : ( | ||
| <Fragment> | ||
| <div className="adyen-checkout-paybybank_AIS_DD"> | ||
| <p className="adyen-checkout-paybybank_AIS_DD__description-header"> | ||
| {this.props.i18n.get('payByBankAISDD.disclaimer.header')} | ||
| </p> | ||
| <p className="adyen-checkout-paybybank_AIS_DD__description-body"> | ||
| {this.props.i18n.get('payByBankAISDD.disclaimer.body')} | ||
| </p> | ||
| </div> | ||
|
|
||
| {this.props.showPayButton && ( | ||
| <RedirectButton | ||
| {...this.props} | ||
| showPayButton={this.props.showPayButton} | ||
| name={this.displayName} | ||
| onSubmit={this.submit} | ||
| payButton={this.payButton} | ||
| ref={ref => { | ||
| this.componentRef = ref; | ||
| }} | ||
| /> | ||
| )} | ||
| </Fragment> | ||
| )} | ||
| </CoreProvider> | ||
| ); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export { default } from './PayByBankUS'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.