Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixes Click to Pay link looking buttons into proper buttons #3029

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Fixes Click to Pay link looking buttons into proper buttons #3029

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b6cfa74
makes ctp link looking buttons into proper buttons
m1aw Dec 17, 2024
a7f6c66
changeset
m1aw Dec 17, 2024
c8fade8
refactor button out of label
m1aw Dec 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/nice-bats-exist.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@adyen/adyen-web': patch
---

Fixes Click to Pay link looking buttons into proper buttons
4 changes: 2 additions & 2 deletions packages/lib/src/components/internal/Button/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import { h } from 'preact';

export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'action';
export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'action' | 'link';

export interface ButtonProps {
status?: string;
/**
* Class name modifiers will be used as: `adyen-checkout__image--${modifier}`
* Class name modifiers will be used as: `adyen-checkout__button--${modifier}`
*/
classNameModifiers?: string[];
variant?: ButtonVariant;
Expand Down
16 changes: 9 additions & 7 deletions ...kToPay/components/CtPOneTimePassword/CtPOneTimePasswordInput/CtPOneTimePasswordInput.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,11 @@
@import 'styles/variable-generator';

.adyen-checkout-ctp__otp-resend-code {
font-size: 13px;
font-weight: token(text-body-font-weight);
color: token(color-label-primary);
.adyen-checkout-ctp__otp-resend-code-wrapper {
margin-left: auto;
cursor: pointer;
text-decoration: underline;

top: 0;
right: 0;
position: absolute;
line-height: token(text-body-line-height);
}

.adyen-checkout-ctp__otp-resend-code--disabled,
Expand Down Expand Up @@ -42,3 +40,7 @@
.adyen-checkout-ctp__section > .adyen-checkout__field.adyen-checkout__field--otp {
margin-bottom: token(spacer-060);
}

.adyen-checkout-ctp__otp-field-wrapper {
position: relative;
}
4 changes: 2 additions & 2 deletions ...ay/components/CtPOneTimePassword/CtPOneTimePasswordInput/CtPOneTimePasswordInput.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ describe('Click to Pay - CtPOneTimePasswordInput', () => {
{ clickToPayService: ctpServiceMock }
);

const resendOtpLink = await screen.findByRole('link', { name: 'Resend code' });
const resendOtpLink = await screen.findByRole('button', { name: 'Resend code' });
const otpInput = screen.getByLabelText('One time code', { exact: false });

await user.click(resendOtpLink);
Expand Down Expand Up @@ -78,7 +78,7 @@ describe('Click to Pay - CtPOneTimePasswordInput', () => {
{ clickToPayService: ctpServiceMock, configuration }
);

const resendOtpLink = await screen.findByRole('link', { name: 'Resend code' });
const resendOtpLink = await screen.findByRole('button', { name: 'Resend code' });
const otpInput = screen.getByLabelText('One time code', { exact: false });

await user.click(resendOtpLink);
Expand Down
50 changes: 25 additions & 25 deletions ...ckToPay/components/CtPOneTimePassword/CtPOneTimePasswordInput/CtPOneTimePasswordInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,31 +100,31 @@ const CtPOneTimePasswordInput = (props: CtPOneTimePasswordInputProps): h.JSX.Ele
}, [data, valid, errors]);

return (
<Field
name="oneTimePassword"
label={i18n.get('ctp.otp.fieldLabel')}
labelEndAdornment={
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ribeiroguilherme this was the reason the test was failing.

Basically we were creating the button inside the label, which made that the label invalid since it can only contain text. So all the selectors where not picking it up.

So I have refactored it a bit and moved the button to the outside of the label and used so CSS trickery to place the button where it was previously.

My main concern with the change is the change in classnames, but let me know what you think.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The change is fine - it was not following the correct approach and now it is, so there is no discussion about it. I am just concern about merchant's customization in this case.

Some classnames changed, and merchants might have target the 'links' CSS and this impact their changes, but seems like there is not much to do in this case as we need to apply this fix.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, that's what I was concerned too. I tried to minimize the impact of those changes, but I wanted to know your opinion on it.

In that case let's proceed with this.

!props.hideResendOtpButton && (
<CtPResendOtpLink disabled={props.isValidatingOtp} onError={handleOnResendOtpError} onResendCode={handleOnResendOtp} />
)
}
errorMessage={isOtpFielDirty ? resendOtpError || props.errorMessage || !!errors.otp : null}
classNameModifiers={['otp']}
>
<InputText
name={'otp'}
autocorrect={'off'}
spellcheck={false}
value={data.otp}
disabled={props.disabled}
onInput={handleChangeFor('otp', 'input')}
onBlur={handleChangeFor('otp', 'blur')}
onKeyPress={handleOnKeyPress}
setRef={(ref: HTMLInputElement) => {
inputRef.current = ref;
}}
/>
</Field>
<div className={'adyen-checkout-ctp__otp-field-wrapper'}>
<Field
name="oneTimePassword"
label={i18n.get('ctp.otp.fieldLabel')}
errorMessage={isOtpFielDirty ? resendOtpError || props.errorMessage || !!errors.otp : null}
classNameModifiers={['otp']}
>
<InputText
name={'otp'}
autocorrect={'off'}
spellcheck={false}
value={data.otp}
disabled={props.disabled}
onInput={handleChangeFor('otp', 'input')}
onBlur={handleChangeFor('otp', 'blur')}
onKeyPress={handleOnKeyPress}
setRef={(ref: HTMLInputElement) => {
inputRef.current = ref;
}}
/>
</Field>
<div className={'adyen-checkout-ctp__otp-resend-code-wrapper'}>
<CtPResendOtpLink disabled={props.isValidatingOtp} onError={handleOnResendOtpError} onResendCode={handleOnResendOtp} />
</div>
</div>
);
};

Expand Down
13 changes: 7 additions & 6 deletions ...nal/ClickToPay/components/CtPOneTimePassword/CtPOneTimePasswordInput/CtPResendOtpLink.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { useCoreContext } from '../../../../../../core/Context/CoreProvider';
import Icon from '../../../../Icon';
import { isSrciError } from '../../../services/utils';
import { PREFIX } from '../../../../Icon/constants';
import Button from '../../../../Button';

const CONFIRMATION_SHOWING_TIME = 2000;

Expand Down Expand Up @@ -83,15 +84,15 @@ const CtPResendOtpLink = ({ onError, onResendCode, disabled }: CtPResendOtpLinkP
}

return (
// eslint-disable-next-line jsx-a11y/click-events-have-key-events
<div
role="link"
tabIndex={0}
className={classnames('adyen-checkout-ctp__otp-resend-code', { 'adyen-checkout-ctp__otp-resend-code--disabled': disabled })}
<Button
classNameModifiers={[classnames('otp-resend-code', { 'otp-resend-code--disabled': disabled })]}
onClick={handleResendCodeClick}
variant="link"
inline={true}
disabled={disabled}
>
{i18n.get('ctp.otp.resendCode')}
</div>
</Button>
);
};

Expand Down
10 changes: 2 additions & 8 deletions packages/lib/src/components/internal/ClickToPay/components/CtPSection/CtPLogoutLink.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,10 @@
@import 'styles/variable-generator';

.adyen-checkout-ctp__section-logout-button {
font-size: 13px;
line-height: token(text-caption-line-height);
font-weight: token(text-body-font-weight);
color: token(color-label-primary);
.adyen-checkout__button--section-logout-button {
margin-left: auto;
cursor: pointer;
text-decoration: underline;
}

.adyen-checkout-ctp__section-logout-button--disabled {
.adyen-checkout__button--section-logout-button--disabled {
pointer-events: none;
color: token(color-label-disabled);
}
19 changes: 11 additions & 8 deletions packages/lib/src/components/internal/ClickToPay/components/CtPSection/CtPLogoutLink.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import classnames from 'classnames';
import { useMemo } from 'preact/hooks';
import { useCoreContext } from '../../../../../core/Context/CoreProvider';
import './CtPLogoutLink.scss';
import Button from '../../../Button';

const CtPLogoutLink = () => {
const { ctpState, logoutShopper, status, cards } = useClickToPayContext();
Expand All @@ -22,17 +23,19 @@ const CtPLogoutLink = () => {
}, [i18n, ctpState]);

return (
// eslint-disable-next-line jsx-a11y/click-events-have-key-events
<span
role="button"
tabIndex={0}
className={classnames('adyen-checkout-ctp__section-logout-button', {
'adyen-checkout-ctp__section-logout-button--disabled': status === 'loading'
})}
<Button
classNameModifiers={[
classnames('section-logout-button', {
'section-logout-button--disabled': status === 'loading'
})
]}
disabled={status === 'loading'}
onClick={logoutShopper}
variant="link"
inline={true}
>
{label}
</span>
</Button>
);
};

Expand Down
Loading