PayMe improvements (#2909)

.changeset/sharp-cars-clean.md

@@ -0,0 +1,5 @@
+---
+'@adyen/adyen-web': minor
+---
+
+PayMe - Improved instructions UI

packages/lib/src/components/PayMe/PayMe.ts

@@ -1,5 +1,6 @@
 import QRLoaderContainer from '../helpers/QRLoaderContainer';
-import Instructions from './Instructions';
+import { PayMeInstructions } from './components/PayMeInstructions';
+import { PayMeIntroduction } from './components/PayMeIntroduction';
 
 class PayMeElement extends QRLoaderContainer {
     public static type = 'payme';
@@ -11,10 +12,10 @@ class PayMeElement extends QRLoaderContainer {
             delay: PayMeElement.defaultDelay,
             countdownTime: PayMeElement.defaultCountdown,
             redirectIntroduction: 'payme.openPayMeApp',
-            introduction: 'payme.scanQrCode',
             timeToPay: 'payme.timeToPay',
             buttonLabel: 'payme.redirectButtonLabel',
-            instructions: Instructions,
+            introduction: PayMeIntroduction,
+            instructions: PayMeInstructions,
             ...super.formatProps(props)
         };
     }

packages/lib/src/components/PayMe/components/PayMeInstructions.tsx

@@ -0,0 +1,23 @@
+import { useIsMobile } from '../../../utils/useIsMobile';
+import { useCoreContext } from '../../../core/Context/CoreProvider';
+import { Timeline, TimelineWrapper } from '../../internal/Timeline';
+import { h } from 'preact';
+
+const PayMeInstructions = () => {
+    const { i18n } = useCoreContext();
+    const { isMobileScreenSize } = useIsMobile();
+
+    if (isMobileScreenSize) {
+        return null;
+    }
+
+    const instructions = i18n.get('payme.instructions.steps').split('%@');
+
+    return (
+        <TimelineWrapper>
+            <Timeline instructions={instructions} />
+        </TimelineWrapper>
+    );
+};
+
+export { PayMeInstructions };

packages/lib/src/components/PayMe/components/PayMeIntroduction.tsx

@@ -0,0 +1,21 @@
+import { useCoreContext } from '../../../core/Context/CoreProvider';
+import { useIsMobile } from '../../../utils/useIsMobile';
+import { Timeline, TimelineWrapper } from '../../internal/Timeline';
+import { Fragment, h } from 'preact';
+
+const PayMeIntroduction = () => {
+    const { i18n } = useCoreContext();
+    const { isMobileScreenSize } = useIsMobile();
+
+    const instructions = i18n.get('payme.instructions.steps').split('%@');
+
+    return isMobileScreenSize ? (
+        <TimelineWrapper>
+            <Timeline instructions={instructions} />
+        </TimelineWrapper>
+    ) : (
+        <Fragment>{i18n.get('payme.scanQrCode')}</Fragment>
+    );
+};
+
+export { PayMeIntroduction };

packages/lib/src/components/Swish/Swish.scss

@@ -0,0 +1,3 @@
+.adyen-checkout__qr-loader--swish > .adyen-checkout__qr-loader__instructions {
+  text-align: center;
+}

packages/lib/src/components/Swish/Swish.ts

@@ -1,5 +1,6 @@
 import QRLoaderContainer from '../helpers/QRLoaderContainer/QRLoaderContainer';
 import { TxVariants } from '../tx-variants';
+import './Swish.scss';
 
 class SwishElement extends QRLoaderContainer {
     public static type = TxVariants.swish;

packages/lib/src/components/internal/QRLoader/QRLoader.scss

@@ -37,8 +37,9 @@
 .adyen-checkout__qr-loader__subtitle {
     max-width: 400px;
     color: token(color-label-primary);
-    font-size: token(text-subtitle-font-size);
-    line-height: token(text-caption-line-height);
+    font-size: token(text-body-font-size);
+    line-height: token(text-body-line-height);
+    text-align: center;
 }
 
 .adyen-checkout__qr-loader__icon {
@@ -80,6 +81,7 @@
     text-align: center;
 }
 
+
 .adyen-checkout__qr-loader > .adyen-checkout__spinner__wrapper {
     margin: 60px 0;
 }
@@ -98,7 +100,7 @@
     color: token(color-label-tertiary);
     font-size: token(text-subtitle-font-size);
     line-height: 1.5;
-    margin-top: token(spacer-040);
+    margin-top: token(spacer-090);
 }
 
 .adyen-checkout__qr-loader__actions {
@@ -108,8 +110,9 @@
     margin-top: token(spacer-100);
 }
 
-@media only screen and (max-width: 1200px) {
+@media (max-width: 1024px) {
     .adyen-checkout__qr-loader__app-link {
         display: block;
+        min-width: 220px;
     }
 }

packages/lib/src/components/internal/Timeline/TimelineWrapper.tsx

@@ -1,8 +1,13 @@
-import { h } from 'preact';
+import { ComponentChildren, h } from 'preact';
 import './TimelineWrapper.scss';
 
-const TimelineWrapper = ({ children }) => {
-    return <div className="adyen-checkout-timeline-wrapper">{children}</div>;
+interface TimelineWrapperProps {
+    children: ComponentChildren;
+    className?: string;
+}
+
+const TimelineWrapper = ({ children, className }: TimelineWrapperProps) => {
+    return <div className={`adyen-checkout-timeline-wrapper ${className}`}>{children}</div>;
 };
 
 export { TimelineWrapper };

packages/lib/storybook/stories/components/Payconic.stories.tsx

@@ -0,0 +1,26 @@
+import { MetaConfiguration, PaymentMethodStoryProps, StoryConfiguration } from '../types';
+import { QRLoaderConfiguration } from '../../../src/types';
+import { ComponentContainer } from '../ComponentContainer';
+import { Checkout } from '../Checkout';
+import BcmcMobile from '../../../src/components/BcmcMobile';
+
+type PayconicStory = StoryConfiguration<QRLoaderConfiguration>;
+
+const meta: MetaConfiguration<QRLoaderConfiguration> = {
+    title: 'Components/Payconic'
+};
+
+const render = ({ componentConfiguration, ...checkoutConfig }: PaymentMethodStoryProps<QRLoaderConfiguration>) => (
+    <Checkout checkoutConfig={checkoutConfig}>
+        {checkout => <ComponentContainer element={new BcmcMobile(checkout, componentConfiguration)} />}
+    </Checkout>
+);
+
+export const Default: PayconicStory = {
+    render,
+    args: {
+        countryCode: 'BE'
+    }
+};
+
+export default meta;

packages/lib/storybook/stories/components/Swish.stories.tsx

@@ -0,0 +1,24 @@
+import { MetaConfiguration, PaymentMethodStoryProps, StoryConfiguration } from '../types';
+import { QRLoaderConfiguration } from '../../../src/types';
+import { ComponentContainer } from '../ComponentContainer';
+import { Checkout } from '../Checkout';
+import Swish from '../../../src/components/Swish';
+
+type SwishStory = StoryConfiguration<QRLoaderConfiguration>;
+
+const meta: MetaConfiguration<QRLoaderConfiguration> = {
+    title: 'Components/Swish'
+};
+
+const render = ({ componentConfiguration, ...checkoutConfig }: PaymentMethodStoryProps<QRLoaderConfiguration>) => (
+    <Checkout checkoutConfig={checkoutConfig}>{checkout => <ComponentContainer element={new Swish(checkout, componentConfiguration)} />}</Checkout>
+);
+
+export const Default: SwishStory = {
+    render,
+    args: {
+        countryCode: 'SE'
+    }
+};
+
+export default meta;