From 5201bedbf138fe2940bb1a76e7a9ab0c09323b68 Mon Sep 17 00:00:00 2001 From: Guilherme Ribeiro Date: Mon, 21 Oct 2024 14:30:02 +0200 Subject: [PATCH] PayMe improvements (#2909) --- .changeset/sharp-cars-clean.md | 5 ++++ .../src/components/PayMe/Instructions.scss | 15 ----------- .../components/PayMe/Instructions.test.tsx | 22 ---------------- .../lib/src/components/PayMe/Instructions.tsx | 20 -------------- packages/lib/src/components/PayMe/PayMe.ts | 7 ++--- .../PayMe/components/PayMeInstructions.tsx | 23 ++++++++++++++++ .../PayMe/components/PayMeIntroduction.tsx | 21 +++++++++++++++ packages/lib/src/components/Swish/Swish.scss | 3 +++ packages/lib/src/components/Swish/Swish.ts | 1 + .../internal/QRLoader/QRLoader.scss | 11 +++++--- .../internal/Timeline/TimelineWrapper.tsx | 11 +++++--- .../stories/components/Payconic.stories.tsx | 26 +++++++++++++++++++ .../stories/components/Swish.stories.tsx | 24 +++++++++++++++++ 13 files changed, 122 insertions(+), 67 deletions(-) create mode 100644 .changeset/sharp-cars-clean.md delete mode 100644 packages/lib/src/components/PayMe/Instructions.scss delete mode 100644 packages/lib/src/components/PayMe/Instructions.test.tsx delete mode 100644 packages/lib/src/components/PayMe/Instructions.tsx create mode 100644 packages/lib/src/components/PayMe/components/PayMeInstructions.tsx create mode 100644 packages/lib/src/components/PayMe/components/PayMeIntroduction.tsx create mode 100644 packages/lib/src/components/Swish/Swish.scss create mode 100644 packages/lib/storybook/stories/components/Payconic.stories.tsx create mode 100644 packages/lib/storybook/stories/components/Swish.stories.tsx diff --git a/.changeset/sharp-cars-clean.md b/.changeset/sharp-cars-clean.md new file mode 100644 index 0000000000..981e4d45d1 --- /dev/null +++ b/.changeset/sharp-cars-clean.md @@ -0,0 +1,5 @@ +--- +'@adyen/adyen-web': minor +--- + +PayMe - Improved instructions UI diff --git a/packages/lib/src/components/PayMe/Instructions.scss b/packages/lib/src/components/PayMe/Instructions.scss deleted file mode 100644 index d45cfb9100..0000000000 --- a/packages/lib/src/components/PayMe/Instructions.scss +++ /dev/null @@ -1,15 +0,0 @@ -@import 'styles/variable-generator'; - -.adyen-checkout-payme-instructions { - font-size: token(text-body-font-size); - text-align: center; - color: token(color-label-secondary); - line-height: token(text-body-line-height); - - &__steps { - list-style-position: inside; - padding-inline-start: 0; - margin: token(spacer-070) 0; - padding-bottom: token(spacer-040); - } -} diff --git a/packages/lib/src/components/PayMe/Instructions.test.tsx b/packages/lib/src/components/PayMe/Instructions.test.tsx deleted file mode 100644 index f7758d1a1a..0000000000 --- a/packages/lib/src/components/PayMe/Instructions.test.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import { render, screen } from '@testing-library/preact'; -import { h } from 'preact'; -import { CoreProvider } from '../../core/Context/CoreProvider'; -import Instructions from './Instructions'; - -describe('Instructions', () => { - const customRender = (ui: h.JSX.Element) => { - return render( - - {ui} - - ); - }; - - test('should see a list of instructions and footnote', async () => { - customRender(); - expect(await screen.findByText('Open the PayMe app', { exact: false })).toBeInTheDocument(); - expect(await screen.findByText('Scan the QR code', { exact: false })).toBeInTheDocument(); - expect(await screen.findByText('Complete the payment in the app', { exact: false })).toBeInTheDocument(); - expect(await screen.findByText('Please do not close this page before the payment is completed', { exact: false })).toBeInTheDocument(); - }); -}); diff --git a/packages/lib/src/components/PayMe/Instructions.tsx b/packages/lib/src/components/PayMe/Instructions.tsx deleted file mode 100644 index 6311e67d19..0000000000 --- a/packages/lib/src/components/PayMe/Instructions.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import { useCoreContext } from '../../core/Context/CoreProvider'; -import { h } from 'preact'; -import './Instructions.scss'; - -export default function Instructions() { - const { i18n } = useCoreContext(); - const steps = i18n.get('payme.instructions.steps'); - const footnote = i18n.get('payme.instructions.footnote'); - - return ( -
-
    - {steps.split('%@').map((step, index) => ( -
  1. {step}
    2. - ))} -
- {footnote} -
- ); -} diff --git a/packages/lib/src/components/PayMe/PayMe.ts b/packages/lib/src/components/PayMe/PayMe.ts index f98a434008..09d60bd7f2 100644 --- a/packages/lib/src/components/PayMe/PayMe.ts +++ b/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) }; } diff --git a/packages/lib/src/components/PayMe/components/PayMeInstructions.tsx b/packages/lib/src/components/PayMe/components/PayMeInstructions.tsx new file mode 100644 index 0000000000..2f2074f376 --- /dev/null +++ b/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 ( + + + + ); +}; + +export { PayMeInstructions }; diff --git a/packages/lib/src/components/PayMe/components/PayMeIntroduction.tsx b/packages/lib/src/components/PayMe/components/PayMeIntroduction.tsx new file mode 100644 index 0000000000..296a0c2c9b --- /dev/null +++ b/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 ? ( + + + + ) : ( + {i18n.get('payme.scanQrCode')} + ); +}; + +export { PayMeIntroduction }; diff --git a/packages/lib/src/components/Swish/Swish.scss b/packages/lib/src/components/Swish/Swish.scss new file mode 100644 index 0000000000..70c0024044 --- /dev/null +++ b/packages/lib/src/components/Swish/Swish.scss @@ -0,0 +1,3 @@ +.adyen-checkout__qr-loader--swish > .adyen-checkout__qr-loader__instructions { + text-align: center; +} diff --git a/packages/lib/src/components/Swish/Swish.ts b/packages/lib/src/components/Swish/Swish.ts index 162186f72d..b7c6e6e7b9 100644 --- a/packages/lib/src/components/Swish/Swish.ts +++ b/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; diff --git a/packages/lib/src/components/internal/QRLoader/QRLoader.scss b/packages/lib/src/components/internal/QRLoader/QRLoader.scss index 3c479ae48e..41b9fe5bd4 100644 --- a/packages/lib/src/components/internal/QRLoader/QRLoader.scss +++ b/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; } } diff --git a/packages/lib/src/components/internal/Timeline/TimelineWrapper.tsx b/packages/lib/src/components/internal/Timeline/TimelineWrapper.tsx index 7b5aff3f8c..870997ab7c 100644 --- a/packages/lib/src/components/internal/Timeline/TimelineWrapper.tsx +++ b/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
{children}
; +interface TimelineWrapperProps { + children: ComponentChildren; + className?: string; +} + +const TimelineWrapper = ({ children, className }: TimelineWrapperProps) => { + return
{children}
; }; export { TimelineWrapper }; diff --git a/packages/lib/storybook/stories/components/Payconic.stories.tsx b/packages/lib/storybook/stories/components/Payconic.stories.tsx new file mode 100644 index 0000000000..6dc2571b74 --- /dev/null +++ b/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; + +const meta: MetaConfiguration = { + title: 'Components/Payconic' +}; + +const render = ({ componentConfiguration, ...checkoutConfig }: PaymentMethodStoryProps) => ( + + {checkout => } + +); + +export const Default: PayconicStory = { + render, + args: { + countryCode: 'BE' + } +}; + +export default meta; diff --git a/packages/lib/storybook/stories/components/Swish.stories.tsx b/packages/lib/storybook/stories/components/Swish.stories.tsx new file mode 100644 index 0000000000..43a643e0fd --- /dev/null +++ b/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; + +const meta: MetaConfiguration = { + title: 'Components/Swish' +}; + +const render = ({ componentConfiguration, ...checkoutConfig }: PaymentMethodStoryProps) => ( + {checkout => } +); + +export const Default: SwishStory = { + render, + args: { + countryCode: 'SE' + } +}; + +export default meta;