Fastlane - minor UI improvements

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: token(spacer-020);
     width: 20px;
     height: 20px;
     line-height: 0;

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
                 })}
             >
-                <Toggle checked={isChecked} onChange={setIsChecked} label={i18n.get('card.fastlane.consentToggle')} />
-                <InfoButton />
+                <Toggle
+                    checked={isChecked}
+                    onChange={setIsChecked}
+                    ariaLabel={i18n.get('card.fastlane.consentToggle')}
+                    label={
+                        <Fragment>
+                            <span>{i18n.get('card.fastlane.consentToggle')}</span>
+                            <InfoButton />
+                        </Fragment>
+                    }
+                />
             </div>
 
             {isChecked && (
                 <Fragment>
-                    <USOnlyPhoneInput onChange={setTelephoneNumber} />
+                    <USOnlyPhoneInput initialValue={mobileNumberFormatter(telephoneNumberFromProps)} onChange={setTelephoneNumber} />
                     <div className="adyen-checkout-card__fastlane-consent-text">
                         <LabelOnlyDisclaimerMessage
                             message={i18n.get('card.fastlane.consentText')}

packages/lib/src/components/Card/components/Fastlane/InfoButton.tsx

@@ -26,10 +26,9 @@ const InfoButton = () => {
                 buttonRef={buttonRef}
                 onClick={handleOnIconClick}
                 classNameModifiers={['fastlane-info-modal']}
-                inline
                 variant="link"
                 ariaLabel={i18n.get('card.fastlane.a11y.openDialog')}
-                label={<Img height="16" width="16" src={getImage({ imageFolder: 'components/' })('fastlane_info')} alt="" ariaHidden={true} />}
+                label={<Img height="14" width="14" src={getImage({ imageFolder: 'components/' })('fastlane_info')} alt="" ariaHidden={true} />}
             />
 
             <InfoModal isOpen={isInfoModalOpen} onClose={handleOnClose} focusAfterClose={buttonRef.current} />

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<USOnlyPhoneInputStateData>({
         schema: formSchema,
+        defaultData: {
+            mobileNumber: initialValue
+        },
         formatters: {
             mobileNumber: mobileNumberFormatter
         }

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, '');
@@ -7,7 +11,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;
 }

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<void> {
+    public async mountWatermark(container: HTMLElement | string, options = { includeAdditionalInfo: true }): Promise<void> {
         const component = await this.fastlaneSdk.FastlaneWatermarkComponent(options);
         component.render(container);
     }

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;

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%;
-    }
-}

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',

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'
                                         }
                                     }
                                 }