From 5c15b72ae474678f39cb803ae02098b676e6360d Mon Sep 17 00:00:00 2001 From: guilhermer Date: Thu, 13 Feb 2025 13:10:53 +0100 Subject: [PATCH 1/2] moved tooltip icon next to text. modal does not take full space on mobile. merchant can pass phone number a sprop --- .../components/Fastlane/FastlaneSignup.scss | 2 ++ .../Card/components/Fastlane/FastlaneSignup.tsx | 17 ++++++++++++++--- .../Card/components/Fastlane/InfoButton.tsx | 3 +-- .../components/Fastlane/USOnlyPhoneInput.tsx | 6 +++++- .../Fastlane/utils/mobile-number-formatter.ts | 2 +- .../components/PayPalFastlane/FastlaneSDK.ts | 2 +- .../lib/src/components/PayPalFastlane/types.ts | 3 ++- .../src/components/internal/Modal/Modal.scss | 11 ----------- .../src/components/internal/Toggle/Toggle.tsx | 8 ++++++-- .../wallets/Fastlane/Fastlane.stories.tsx | 3 ++- 10 files changed, 34 insertions(+), 23 deletions(-) diff --git a/packages/lib/src/components/Card/components/Fastlane/FastlaneSignup.scss b/packages/lib/src/components/Card/components/Fastlane/FastlaneSignup.scss index add14b4fec..a0bf1b4e6b 100644 --- a/packages/lib/src/components/Card/components/Fastlane/FastlaneSignup.scss +++ b/packages/lib/src/components/Card/components/Fastlane/FastlaneSignup.scss @@ -35,6 +35,8 @@ } .adyen-checkout__button.adyen-checkout__button--fastlane-info-modal { + vertical-align: bottom; + margin-left: 4px; width: 20px; height: 20px; line-height: 0; diff --git a/packages/lib/src/components/Card/components/Fastlane/FastlaneSignup.tsx b/packages/lib/src/components/Card/components/Fastlane/FastlaneSignup.tsx index dd2f4def65..9080fb5382 100644 --- a/packages/lib/src/components/Card/components/Fastlane/FastlaneSignup.tsx +++ b/packages/lib/src/components/Card/components/Fastlane/FastlaneSignup.tsx @@ -12,6 +12,7 @@ import type { FastlaneSignupConfiguration } from '../../../PayPalFastlane/types' import { isConfigurationValid } from './utils/validate-configuration'; import './FastlaneSignup.scss'; +import mobileNumberFormatter from './utils/mobile-number-formatter'; type FastlaneSignupProps = FastlaneSignupConfiguration & { currentDetectedBrand: string; @@ -28,6 +29,7 @@ const FastlaneSignup = ({ termsAndConditionsVersion, fastlaneSessionId, currentDetectedBrand, + telephoneNumber: telephoneNumberFromProps, onChange }: FastlaneSignupProps) => { const displaySignup = useMemo(() => showConsent && SUPPORTED_BRANDS.includes(currentDetectedBrand), [showConsent, currentDetectedBrand]); @@ -97,13 +99,22 @@ const FastlaneSignup = ({ 'adyen-checkout-card__fastlane-consent-toggle--active': isChecked })} > - - + + {i18n.get('card.fastlane.consentToggle')} + + + } + /> {isChecked && ( - +
{ buttonRef={buttonRef} onClick={handleOnIconClick} classNameModifiers={['fastlane-info-modal']} - inline variant="link" ariaLabel={i18n.get('card.fastlane.a11y.openDialog')} - label={} + label={} /> diff --git a/packages/lib/src/components/Card/components/Fastlane/USOnlyPhoneInput.tsx b/packages/lib/src/components/Card/components/Fastlane/USOnlyPhoneInput.tsx index b07652e208..f3c9bd0847 100644 --- a/packages/lib/src/components/Card/components/Fastlane/USOnlyPhoneInput.tsx +++ b/packages/lib/src/components/Card/components/Fastlane/USOnlyPhoneInput.tsx @@ -12,13 +12,17 @@ interface USOnlyPhoneInputStateData { interface USOnlyPhoneInputProps { onChange(mobileNumber: string): void; + initialValue?: string; } -const USOnlyPhoneInput = ({ onChange }: USOnlyPhoneInputProps) => { +const USOnlyPhoneInput = ({ initialValue, onChange }: USOnlyPhoneInputProps) => { const { i18n } = useCoreContext(); const formSchema = ['mobileNumber']; const { handleChangeFor, data } = useForm({ schema: formSchema, + defaultData: { + mobileNumber: initialValue + }, formatters: { mobileNumber: mobileNumberFormatter } diff --git a/packages/lib/src/components/Card/components/Fastlane/utils/mobile-number-formatter.ts b/packages/lib/src/components/Card/components/Fastlane/utils/mobile-number-formatter.ts index 744a106e9e..9cfd91f0d2 100644 --- a/packages/lib/src/components/Card/components/Fastlane/utils/mobile-number-formatter.ts +++ b/packages/lib/src/components/Card/components/Fastlane/utils/mobile-number-formatter.ts @@ -7,7 +7,7 @@ function mobileNumberFormatter(value: string): string { if (input.length > 3 && input.length <= 6) { input = input.slice(0, 3) + ' ' + input.slice(3); } else if (input.length > 6) { - input = input.slice(0, 3) + ' ' + input.slice(3, 6) + ' ' + input.slice(6); + input = input.slice(0, 3) + ' ' + input.slice(3, 6) + ' ' + input.slice(6, 10); } return input; } diff --git a/packages/lib/src/components/PayPalFastlane/FastlaneSDK.ts b/packages/lib/src/components/PayPalFastlane/FastlaneSDK.ts index 1cf0bbff9e..ef22682792 100644 --- a/packages/lib/src/components/PayPalFastlane/FastlaneSDK.ts +++ b/packages/lib/src/components/PayPalFastlane/FastlaneSDK.ts @@ -132,7 +132,7 @@ class FastlaneSDK { /** * Render the "Fastlane by PayPal" logo in the specified HTML container */ - public async mountWatermark(container: HTMLElement | string, options = { includeAdditionalInfo: false }): Promise { + public async mountWatermark(container: HTMLElement | string, options = { includeAdditionalInfo: true }): Promise { const component = await this.fastlaneSdk.FastlaneWatermarkComponent(options); component.render(container); } diff --git a/packages/lib/src/components/PayPalFastlane/types.ts b/packages/lib/src/components/PayPalFastlane/types.ts index 3561dccea6..5013a60ff6 100644 --- a/packages/lib/src/components/PayPalFastlane/types.ts +++ b/packages/lib/src/components/PayPalFastlane/types.ts @@ -134,7 +134,8 @@ type FastlaneCardComponentConfiguration = { }; export type FastlaneSignupConfiguration = FastlaneConsentRenderState & { - fastlaneSessionId: string; + fastlaneSessionId?: string; + telephoneNumber?: string; }; export type FastlanePaymentMethodConfiguration = FastlaneComponentConfiguration | FastlaneCardComponentConfiguration; diff --git a/packages/lib/src/components/internal/Modal/Modal.scss b/packages/lib/src/components/internal/Modal/Modal.scss index e883157cb8..4979d5dfad 100644 --- a/packages/lib/src/components/internal/Modal/Modal.scss +++ b/packages/lib/src/components/internal/Modal/Modal.scss @@ -51,14 +51,3 @@ position: relative; z-index: 11; } - -@media (max-width: 480px) { - .adyen-checkout__modal-wrapper { - padding: 0; - } - - .adyen-checkout__modal { - border-radius: 0; - height: 100%; - } -} diff --git a/packages/lib/src/components/internal/Toggle/Toggle.tsx b/packages/lib/src/components/internal/Toggle/Toggle.tsx index 4e2594345d..64d015f802 100644 --- a/packages/lib/src/components/internal/Toggle/Toggle.tsx +++ b/packages/lib/src/components/internal/Toggle/Toggle.tsx @@ -5,7 +5,7 @@ import uuid from '../../../utils/uuid'; import './Toggle.scss'; interface ToggleProps { - label?: string; + label?: string | h.JSX.Element; labelPosition?: 'before' | 'after'; ariaLabel?: string; description?: string; @@ -17,7 +17,11 @@ interface ToggleProps { const Toggle = ({ label, labelPosition = 'after', ariaLabel, description, checked, disabled = false, readonly = false, onChange }: ToggleProps) => { const descriptionId = useMemo(() => (description ? `toggle-description-${uuid()}` : null), [description]); - const computedAriaLabel = useMemo(() => ariaLabel ?? label, [ariaLabel, label]); + const computedAriaLabel = useMemo(() => { + if (ariaLabel) return ariaLabel; + if (typeof label === 'string') return label; + return null; + }, [ariaLabel, label]); const conditionalClasses = cx({ 'adyen-checkout-toggle--label-first': labelPosition === 'before', diff --git a/packages/lib/storybook/stories/wallets/Fastlane/Fastlane.stories.tsx b/packages/lib/storybook/stories/wallets/Fastlane/Fastlane.stories.tsx index 3a6735d209..89f92e565f 100644 --- a/packages/lib/storybook/stories/wallets/Fastlane/Fastlane.stories.tsx +++ b/packages/lib/storybook/stories/wallets/Fastlane/Fastlane.stories.tsx @@ -73,7 +73,8 @@ export const MockedUnrecognizedFlowDropin: FastlaneStory = { termsAndConditionsLink: 'https://adyen.com', privacyPolicyLink: 'https://adyen.com', termsAndConditionsVersion: 'v1', - fastlaneSessionId: 'ABC-123' + fastlaneSessionId: 'ABC-123', + telephoneNumber: '1234567890' } } } From 61f49c44c45c76fe0fd6b7ec44e11ec7aac50357 Mon Sep 17 00:00:00 2001 From: guilhermer Date: Thu, 13 Feb 2025 13:28:44 +0100 Subject: [PATCH 2/2] unit test and css fix --- .../components/Card/components/Fastlane/FastlaneSignup.scss | 2 +- .../Card/components/Fastlane/utils/mobile-number-formatter.ts | 4 ++++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/lib/src/components/Card/components/Fastlane/FastlaneSignup.scss b/packages/lib/src/components/Card/components/Fastlane/FastlaneSignup.scss index a0bf1b4e6b..115c98d052 100644 --- a/packages/lib/src/components/Card/components/Fastlane/FastlaneSignup.scss +++ b/packages/lib/src/components/Card/components/Fastlane/FastlaneSignup.scss @@ -36,7 +36,7 @@ .adyen-checkout__button.adyen-checkout__button--fastlane-info-modal { vertical-align: bottom; - margin-left: 4px; + margin-left: token(spacer-020); width: 20px; height: 20px; line-height: 0; diff --git a/packages/lib/src/components/Card/components/Fastlane/utils/mobile-number-formatter.ts b/packages/lib/src/components/Card/components/Fastlane/utils/mobile-number-formatter.ts index 9cfd91f0d2..b204a16db6 100644 --- a/packages/lib/src/components/Card/components/Fastlane/utils/mobile-number-formatter.ts +++ b/packages/lib/src/components/Card/components/Fastlane/utils/mobile-number-formatter.ts @@ -1,4 +1,8 @@ function mobileNumberFormatter(value: string): string { + if (!value) { + return ''; + } + let input = value; // Allow only numbers input = input.replace(/\D/g, '');