From 44e99efebdd7407f11b4b9e02ef4247f9df5ee68 Mon Sep 17 00:00:00 2001 From: guilhermer Date: Thu, 3 Oct 2024 16:26:53 +0200 Subject: [PATCH 01/10] rendering instructions for mobile --- .../lib/src/components/PayNow/PayNow.test.ts | 45 +++++++++++++++++++ packages/lib/src/components/PayNow/PayNow.ts | 3 ++ .../PayNow/components/PayNowIntroduction.scss | 16 +++++++ .../PayNow/components/PayNowIntroduction.tsx | 25 +++++++++++ .../helpers/QRLoaderContainer/types.ts | 5 ++- .../internal/QRLoader/QRLoader.scss | 2 +- .../components/internal/QRLoader/QRLoader.tsx | 2 +- .../src/components/internal/QRLoader/types.ts | 2 +- .../stories/components/PayMe.stories.tsx | 27 +++++++++++ .../stories/components/PayNow.stories.tsx | 27 +++++++++++ packages/server/translations/en-US.json | 10 ++++- 11 files changed, 157 insertions(+), 7 deletions(-) create mode 100644 packages/lib/src/components/PayNow/components/PayNowIntroduction.scss create mode 100644 packages/lib/src/components/PayNow/components/PayNowIntroduction.tsx create mode 100644 packages/lib/storybook/stories/components/PayMe.stories.tsx create mode 100644 packages/lib/storybook/stories/components/PayNow.stories.tsx diff --git a/packages/lib/src/components/PayNow/PayNow.test.ts b/packages/lib/src/components/PayNow/PayNow.test.ts index 8027f53e9f..c9603a8234 100644 --- a/packages/lib/src/components/PayNow/PayNow.test.ts +++ b/packages/lib/src/components/PayNow/PayNow.test.ts @@ -1,4 +1,11 @@ import PayNow from './PayNow'; +import { render, screen, within } from '@testing-library/preact'; +import { mock } from 'jest-mock-extended'; +import { Resources } from '../../core/Context/Resources'; +import checkPaymentStatus from '../../core/Services/payment-status'; +import { SRPanel } from '../../core/Errors/SRPanel'; + +jest.mock('../../core/Services/payment-status'); describe('PayNow', () => { describe('isValid', () => { @@ -21,4 +28,42 @@ describe('PayNow', () => { expect(paynow.render()).not.toBe(null); }); }); + + test('should render mobile instructions', async () => { + jest.useFakeTimers(); + + const srPanel = mock(); + const resources = mock(); + resources.getImage.mockReturnValue((icon: string) => `https://checkout-adyen.com/${icon}`); + + // @ts-ignore mockResolvedValue not inferred + checkPaymentStatus.mockResolvedValue({ + payload: 'Ab02b4c0!BQABAgBLLk9evMb+rScNdE...', + resultCode: 'pending', + type: 'complete' + }); + + const paynow = new PayNow(global.core, { + loadingContext: 'checkoutshopper.com/', + modules: { resources, analytics: global.analytics, srPanel }, + i18n: global.i18n, + paymentData: 'Ab02b4c0!BQABAgBH1f8hqfFxOvbfK..', + qrCodeImage: '', + paymentMethodType: 'paynow', + qrCodeData: '00020126580009SG...' + }); + + render(paynow.mount('body')); + + // Triggers the execution of the setTimeout that makes the /status API request + jest.runAllTimers(); + + await screen.findByText(/Scan the QR code using the PayNow app to complete the payment/); + const div = within(screen.queryByTestId('paynow-mobile-instructions')); + div.getByText(/Take a screenshot of the QR code./); + div.getByText(/Open the PayNow bank or payment app./); + div.getByText(/Select the option to scan a QR code./); + div.getByText(/Choose the option to upload a QR and select the screenshot./); + div.getByText(/Complete the transaction./); + }); }); diff --git a/packages/lib/src/components/PayNow/PayNow.ts b/packages/lib/src/components/PayNow/PayNow.ts index e52ccfff21..f53d5c767e 100644 --- a/packages/lib/src/components/PayNow/PayNow.ts +++ b/packages/lib/src/components/PayNow/PayNow.ts @@ -1,12 +1,15 @@ import QRLoaderContainer from '../helpers/QRLoaderContainer/QRLoaderContainer'; import { delay, countdownTime } from './config'; import { TxVariants } from '../tx-variants'; +import { PayNowIntroduction } from './components/PayNowIntroduction'; class PayNowElement extends QRLoaderContainer { public static type = TxVariants.paynow; formatProps(props) { return { + introduction: PayNowIntroduction, + timeToPay: 'payme.timeToPay', delay, countdownTime, ...super.formatProps(props) diff --git a/packages/lib/src/components/PayNow/components/PayNowIntroduction.scss b/packages/lib/src/components/PayNow/components/PayNowIntroduction.scss new file mode 100644 index 0000000000..77d027d476 --- /dev/null +++ b/packages/lib/src/components/PayNow/components/PayNowIntroduction.scss @@ -0,0 +1,16 @@ +.adyen-checkout-paynow__introduction { + font-size: 14px; + font-weight: 400; + line-height: 20px; + text-align: center; +} + +.adyen-checkout-paynow__introduction--mobile-only { + display: none; +} + +@media only screen and (max-width: 768px) { + .adyen-checkout-paynow__introduction--mobile-only { + display: block; + } +} diff --git a/packages/lib/src/components/PayNow/components/PayNowIntroduction.tsx b/packages/lib/src/components/PayNow/components/PayNowIntroduction.tsx new file mode 100644 index 0000000000..582acd3966 --- /dev/null +++ b/packages/lib/src/components/PayNow/components/PayNowIntroduction.tsx @@ -0,0 +1,25 @@ +import { h } from 'preact'; +import { useCoreContext } from '../../../core/Context/CoreProvider'; +import ContentSeparator from '../../internal/ContentSeparator'; +import './PayNowIntroduction.scss'; + +const PayNowIntroduction = () => { + const { i18n } = useCoreContext(); + + return ( +
+ {i18n.get('paynow.scanQrCode')} + +
+ +
1. {i18n.get('paynow.mobileViewInstruction.step1')}
+
2. {i18n.get('paynow.mobileViewInstruction.step2')}
+
3. {i18n.get('paynow.mobileViewInstruction.step3')}
+
4. {i18n.get('paynow.mobileViewInstruction.step4')}
+
5. {i18n.get('paynow.mobileViewInstruction.step5')}
+
+
+ ); +}; + +export { PayNowIntroduction }; diff --git a/packages/lib/src/components/helpers/QRLoaderContainer/types.ts b/packages/lib/src/components/helpers/QRLoaderContainer/types.ts index 66de326ec4..5729ffd99c 100644 --- a/packages/lib/src/components/helpers/QRLoaderContainer/types.ts +++ b/packages/lib/src/components/helpers/QRLoaderContainer/types.ts @@ -16,10 +16,11 @@ export interface QRLoaderConfiguration extends UIElementProps { brandLogo?: string; buttonLabel?: string; qrCodeImage?: string; + qrCodeData?: string; paymentData?: string; - introduction?: string; redirectIntroduction?: string; timeToPay?: string; - instructions?: string | (() => h.JSX.Element); copyBtn?: boolean; + introduction?: string | (() => h.JSX.Element); + instructions?: string | (() => h.JSX.Element); } diff --git a/packages/lib/src/components/internal/QRLoader/QRLoader.scss b/packages/lib/src/components/internal/QRLoader/QRLoader.scss index e864b1847d..083a339580 100644 --- a/packages/lib/src/components/internal/QRLoader/QRLoader.scss +++ b/packages/lib/src/components/internal/QRLoader/QRLoader.scss @@ -101,7 +101,7 @@ margin-top: token(spacer-100); } -@media only screen and (max-device-width: 1200px) { +@media only screen and (max-width: 1200px) { .adyen-checkout__qr-loader__app-link { display: block; } diff --git a/packages/lib/src/components/internal/QRLoader/QRLoader.tsx b/packages/lib/src/components/internal/QRLoader/QRLoader.tsx index d9aed807a1..4ad3212304 100644 --- a/packages/lib/src/components/internal/QRLoader/QRLoader.tsx +++ b/packages/lib/src/components/internal/QRLoader/QRLoader.tsx @@ -211,7 +211,7 @@ class QRLoader extends Component { {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}
- {i18n.get(this.props.introduction)} + {typeof this.props.introduction === 'string' ? i18n.get(this.props.introduction) : this.props.introduction?.()}
h.JSX.Element); instructions?: string | (() => h.JSX.Element); copyBtn?: boolean; onActionHandled?: (rtnObj: ActionHandledReturnObject) => void; diff --git a/packages/lib/storybook/stories/components/PayMe.stories.tsx b/packages/lib/storybook/stories/components/PayMe.stories.tsx new file mode 100644 index 0000000000..664a9bd4df --- /dev/null +++ b/packages/lib/storybook/stories/components/PayMe.stories.tsx @@ -0,0 +1,27 @@ +import { MetaConfiguration, PaymentMethodStoryProps, StoryConfiguration } from '../types'; +import { getStoryContextCheckout } from '../../utils/get-story-context-checkout'; +import { Container } from '../Container'; +import { QRLoaderConfiguration } from '../../../src/types'; +import PayMe from '../../../src/components/PayMe'; + +type PayMeStory = StoryConfiguration; + +const meta: MetaConfiguration = { + title: 'Components/PayMe' +}; + +const createComponent = (args: PaymentMethodStoryProps, context) => { + const { componentConfiguration } = args; + const checkout = getStoryContextCheckout(context); + const payme = new PayMe(checkout, componentConfiguration); + return ; +}; + +export const Default: PayMeStory = { + render: createComponent, + args: { + countryCode: 'HK' + } +}; + +export default meta; diff --git a/packages/lib/storybook/stories/components/PayNow.stories.tsx b/packages/lib/storybook/stories/components/PayNow.stories.tsx new file mode 100644 index 0000000000..4f0f9234c9 --- /dev/null +++ b/packages/lib/storybook/stories/components/PayNow.stories.tsx @@ -0,0 +1,27 @@ +import { MetaConfiguration, PaymentMethodStoryProps, StoryConfiguration } from '../types'; +import { getStoryContextCheckout } from '../../utils/get-story-context-checkout'; +import { Container } from '../Container'; +import { QRLoaderConfiguration } from '../../../src/types'; +import PayNow from '../../../src/components/PayNow'; + +type PayNowStory = StoryConfiguration; + +const meta: MetaConfiguration = { + title: 'Components/PayNow' +}; + +const createComponent = (args: PaymentMethodStoryProps, context) => { + const { componentConfiguration } = args; + const checkout = getStoryContextCheckout(context); + const paynow = new PayNow(checkout, componentConfiguration); + return ; +}; + +export const Default: PayNowStory = { + render: createComponent, + args: { + countryCode: 'SG' + } +}; + +export default meta; diff --git a/packages/server/translations/en-US.json b/packages/server/translations/en-US.json index 4c074b53cd..38115655be 100644 --- a/packages/server/translations/en-US.json +++ b/packages/server/translations/en-US.json @@ -316,5 +316,11 @@ "payme.instructions.footnote": "Please do not close this page before the payment is completed", "payByBankAISDD.disclaimer.header": "Use Pay by Bank to pay instantly from any bank account.", "payByBankAISDD.disclaimer.body": "By connecting your bank account you are authorizing debits to your account for any amount owed for use of our services and/or purchase of our products, until this authorization is revoked.", - "paymentMethodBrand.other": "other" -} \ No newline at end of file + "paymentMethodBrand.other": "other", + "paynow.scanQrCode": "Scan the QR code using the PayNow app to complete the payment", + "paynow.mobileViewInstruction.step1": "Take a screenshot of the QR code.", + "paynow.mobileViewInstruction.step2": "Open the PayNow bank or payment app.", + "paynow.mobileViewInstruction.step3": "Select the option to scan a QR code.", + "paynow.mobileViewInstruction.step4": "Choose the option to upload a QR and select the screenshot.", + "paynow.mobileViewInstruction.step5": "Complete the transaction." +} From 16c113f86fe4c5939d510204017145f2d12b6206 Mon Sep 17 00:00:00 2001 From: guilhermer Date: Fri, 4 Oct 2024 12:09:03 +0200 Subject: [PATCH 02/10] using bento tokens --- .../components/PayNow/components/PayNowIntroduction.scss | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/lib/src/components/PayNow/components/PayNowIntroduction.scss b/packages/lib/src/components/PayNow/components/PayNowIntroduction.scss index 77d027d476..dadc09af16 100644 --- a/packages/lib/src/components/PayNow/components/PayNowIntroduction.scss +++ b/packages/lib/src/components/PayNow/components/PayNowIntroduction.scss @@ -1,7 +1,10 @@ +@import 'styles/variable-generator'; + .adyen-checkout-paynow__introduction { - font-size: 14px; - font-weight: 400; - line-height: 20px; + font-size: token(text-body-font-size); + font-weight: token(text-body-font-weight); + line-height: token(text-body-line-height); + color: token(color-label-primary); text-align: center; } From 49dd1a3a1c0212bc065dc9a4d331df15f7307061 Mon Sep 17 00:00:00 2001 From: guilhermer Date: Fri, 4 Oct 2024 12:10:39 +0200 Subject: [PATCH 03/10] changeset --- .changeset/tricky-pets-tap.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/tricky-pets-tap.md diff --git a/.changeset/tricky-pets-tap.md b/.changeset/tricky-pets-tap.md new file mode 100644 index 0000000000..a857cfe4d6 --- /dev/null +++ b/.changeset/tricky-pets-tap.md @@ -0,0 +1,5 @@ +--- +'@adyen/adyen-web': minor +--- + +PayNow - Adding instructions to scan QR code on mobile view From 43ffef5920021eb3f74730129212383180bc632a Mon Sep 17 00:00:00 2001 From: guilhermer Date: Mon, 7 Oct 2024 14:00:18 +0200 Subject: [PATCH 04/10] draft stepper --- .../PayNow/components/PayNowIntroduction.scss | 64 +++++++++++++++++++ .../PayNow/components/PayNowIntroduction.tsx | 32 ++++++++-- 2 files changed, 91 insertions(+), 5 deletions(-) diff --git a/packages/lib/src/components/PayNow/components/PayNowIntroduction.scss b/packages/lib/src/components/PayNow/components/PayNowIntroduction.scss index dadc09af16..b1b1b08126 100644 --- a/packages/lib/src/components/PayNow/components/PayNowIntroduction.scss +++ b/packages/lib/src/components/PayNow/components/PayNowIntroduction.scss @@ -17,3 +17,67 @@ display: block; } } + +.c-timeline { + text-align: left; + list-style: none; + margin: 0; + padding: 0; + border: 0; + vertical-align: baseline; +} + +.c-timeline__desc { + margin: 0; + padding: 0; + border: 0; +} + +.c-timeline__item { + // position: relative; + // display: flex; + // outline: solid 1px; + + &:last-child { + .c-timeline__content { + &::before { + display: none; + } + } + } +} + +.c-timeline__content { + flex: 1; + position: relative; + order: 1; + padding-left: 20px; + padding-bottom: 20px; + font-weight: 400; + line-height: 20px; + font-size: 14px; + color: #00112C; + + &::before { + content: ""; + position: absolute; + right: 100%; + top: 0; + height: 100%; + width: 4px; + background-color: #E6E9EB; + } + + &::after { + content: ""; + position: absolute; + left: calc(0px - 10px); + top: 0; + width: 16px; + height: 16px; + background-color: #E6E9EB; + z-index: 1; + border: 2px solid #E6E9EB; + border-radius: 50%; + } +} diff --git a/packages/lib/src/components/PayNow/components/PayNowIntroduction.tsx b/packages/lib/src/components/PayNow/components/PayNowIntroduction.tsx index 582acd3966..571fc1e385 100644 --- a/packages/lib/src/components/PayNow/components/PayNowIntroduction.tsx +++ b/packages/lib/src/components/PayNow/components/PayNowIntroduction.tsx @@ -12,11 +12,33 @@ const PayNowIntroduction = () => {
-
1. {i18n.get('paynow.mobileViewInstruction.step1')}
-
2. {i18n.get('paynow.mobileViewInstruction.step2')}
-
3. {i18n.get('paynow.mobileViewInstruction.step3')}
-
4. {i18n.get('paynow.mobileViewInstruction.step4')}
-
5. {i18n.get('paynow.mobileViewInstruction.step5')}
+
    +
  1. +
    +

    Take a screenshot of the QR code.

    +
    +
    2. +
  2. +
    +

    Open the PayNow bank or payment app.

    +
    +
    3. +
  3. +
    +

    Select the option to scan a QR code.

    +
    +
    4. +
  4. +
    +

    Choose the option to upload a QR and select the screenshot.

    +
    +
    5. +
  5. +
    +

    Complete the transaction.

    +
    +
    6. +
); From 5e6bf448c0776beca78cb083ce2d8d3bd0a1e7a2 Mon Sep 17 00:00:00 2001 From: guilhermer Date: Mon, 7 Oct 2024 14:27:12 +0200 Subject: [PATCH 05/10] fixed stories --- .../stories/components/PayMe.stories.tsx | 17 +++++++---------- .../stories/components/PayNow.stories.tsx | 17 +++++++---------- 2 files changed, 14 insertions(+), 20 deletions(-) diff --git a/packages/lib/storybook/stories/components/PayMe.stories.tsx b/packages/lib/storybook/stories/components/PayMe.stories.tsx index 664a9bd4df..047700b86b 100644 --- a/packages/lib/storybook/stories/components/PayMe.stories.tsx +++ b/packages/lib/storybook/stories/components/PayMe.stories.tsx @@ -1,8 +1,8 @@ import { MetaConfiguration, PaymentMethodStoryProps, StoryConfiguration } from '../types'; -import { getStoryContextCheckout } from '../../utils/get-story-context-checkout'; -import { Container } from '../Container'; import { QRLoaderConfiguration } from '../../../src/types'; -import PayMe from '../../../src/components/PayMe'; +import { ComponentContainer } from '../ComponentContainer'; +import { Checkout } from '../Checkout'; +import PayMe from '../../../src/components/PayMe/PayMe'; type PayMeStory = StoryConfiguration; @@ -10,15 +10,12 @@ const meta: MetaConfiguration = { title: 'Components/PayMe' }; -const createComponent = (args: PaymentMethodStoryProps, context) => { - const { componentConfiguration } = args; - const checkout = getStoryContextCheckout(context); - const payme = new PayMe(checkout, componentConfiguration); - return ; -}; +const render = ({ componentConfiguration, ...checkoutConfig }: PaymentMethodStoryProps) => ( + {checkout => } +); export const Default: PayMeStory = { - render: createComponent, + render, args: { countryCode: 'HK' } diff --git a/packages/lib/storybook/stories/components/PayNow.stories.tsx b/packages/lib/storybook/stories/components/PayNow.stories.tsx index 4f0f9234c9..8448c4765f 100644 --- a/packages/lib/storybook/stories/components/PayNow.stories.tsx +++ b/packages/lib/storybook/stories/components/PayNow.stories.tsx @@ -1,8 +1,8 @@ import { MetaConfiguration, PaymentMethodStoryProps, StoryConfiguration } from '../types'; -import { getStoryContextCheckout } from '../../utils/get-story-context-checkout'; -import { Container } from '../Container'; import { QRLoaderConfiguration } from '../../../src/types'; -import PayNow from '../../../src/components/PayNow'; +import { ComponentContainer } from '../ComponentContainer'; +import { Checkout } from '../Checkout'; +import PayNow from '../../../src/components/PayNow/PayNow'; type PayNowStory = StoryConfiguration; @@ -10,15 +10,12 @@ const meta: MetaConfiguration = { title: 'Components/PayNow' }; -const createComponent = (args: PaymentMethodStoryProps, context) => { - const { componentConfiguration } = args; - const checkout = getStoryContextCheckout(context); - const paynow = new PayNow(checkout, componentConfiguration); - return ; -}; +const render = ({ componentConfiguration, ...checkoutConfig }: PaymentMethodStoryProps) => ( + {checkout => } +); export const Default: PayNowStory = { - render: createComponent, + render, args: { countryCode: 'SG' } From ce05480fcbdf2baea23488203866a987b2d793b8 Mon Sep 17 00:00:00 2001 From: guilhermer Date: Mon, 14 Oct 2024 14:28:30 +0200 Subject: [PATCH 06/10] translations and css changes --- packages/lib/src/components/PayNow/PayNow.ts | 2 + .../PayNow/components/PayNowInstructions.scss | 21 ++++++ .../PayNow/components/PayNowInstructions.tsx | 20 ++++++ .../PayNow/components/PayNowIntroduction.scss | 69 ++----------------- .../PayNow/components/PayNowIntroduction.tsx | 43 ++++-------- .../ContentSeparator/ContentSeparator.scss | 4 +- .../internal/QRLoader/QRLoader.scss | 35 ++++++---- .../components/internal/QRLoader/QRLoader.tsx | 14 +++- .../internal/Timeline/Timeline.scss | 56 +++++++++++++++ .../components/internal/Timeline/Timeline.tsx | 26 +++++++ .../src/components/internal/Timeline/index.ts | 1 + packages/server/translations/ar.json | 8 ++- packages/server/translations/bg-BG.json | 8 ++- packages/server/translations/ca-ES.json | 8 ++- packages/server/translations/cs-CZ.json | 8 ++- packages/server/translations/da-DK.json | 8 ++- packages/server/translations/de-DE.json | 8 ++- packages/server/translations/el-GR.json | 8 ++- packages/server/translations/en-US.json | 2 +- packages/server/translations/es-ES.json | 8 ++- packages/server/translations/et-EE.json | 8 ++- packages/server/translations/fi-FI.json | 8 ++- packages/server/translations/fr-FR.json | 8 ++- packages/server/translations/hr-HR.json | 8 ++- packages/server/translations/hu-HU.json | 8 ++- packages/server/translations/is-IS.json | 12 +++- packages/server/translations/it-IT.json | 8 ++- packages/server/translations/ja-JP.json | 8 ++- packages/server/translations/ko-KR.json | 8 ++- packages/server/translations/lt-LT.json | 8 ++- packages/server/translations/lv-LV.json | 8 ++- packages/server/translations/nl-NL.json | 8 ++- packages/server/translations/no-NO.json | 8 ++- packages/server/translations/pl-PL.json | 8 ++- packages/server/translations/pt-BR.json | 8 ++- packages/server/translations/pt-PT.json | 8 ++- packages/server/translations/ro-RO.json | 8 ++- packages/server/translations/ru-RU.json | 8 ++- packages/server/translations/sk-SK.json | 8 ++- packages/server/translations/sl-SI.json | 8 ++- packages/server/translations/sv-SE.json | 8 ++- packages/server/translations/zh-CN.json | 8 ++- packages/server/translations/zh-TW.json | 8 ++- 43 files changed, 396 insertions(+), 149 deletions(-) create mode 100644 packages/lib/src/components/PayNow/components/PayNowInstructions.scss create mode 100644 packages/lib/src/components/PayNow/components/PayNowInstructions.tsx create mode 100644 packages/lib/src/components/internal/Timeline/Timeline.scss create mode 100644 packages/lib/src/components/internal/Timeline/Timeline.tsx create mode 100644 packages/lib/src/components/internal/Timeline/index.ts diff --git a/packages/lib/src/components/PayNow/PayNow.ts b/packages/lib/src/components/PayNow/PayNow.ts index f53d5c767e..d3db9050bb 100644 --- a/packages/lib/src/components/PayNow/PayNow.ts +++ b/packages/lib/src/components/PayNow/PayNow.ts @@ -2,6 +2,7 @@ import QRLoaderContainer from '../helpers/QRLoaderContainer/QRLoaderContainer'; import { delay, countdownTime } from './config'; import { TxVariants } from '../tx-variants'; import { PayNowIntroduction } from './components/PayNowIntroduction'; +import { PayNowInstructions } from './components/PayNowInstructions'; class PayNowElement extends QRLoaderContainer { public static type = TxVariants.paynow; @@ -9,6 +10,7 @@ class PayNowElement extends QRLoaderContainer { formatProps(props) { return { introduction: PayNowIntroduction, + instructions: PayNowInstructions, timeToPay: 'payme.timeToPay', delay, countdownTime, diff --git a/packages/lib/src/components/PayNow/components/PayNowInstructions.scss b/packages/lib/src/components/PayNow/components/PayNowInstructions.scss new file mode 100644 index 0000000000..32974c783a --- /dev/null +++ b/packages/lib/src/components/PayNow/components/PayNowInstructions.scss @@ -0,0 +1,21 @@ +@import 'styles/variable-generator'; + +.adyen-checkout-paynow__instructions { + font-size: token(text-body-font-size); + font-weight: token(text-body-font-weight); + line-height: token(text-body-line-height); + color: token(color-label-primary); + text-align: center; +} + +.adyen-checkout-paynow__instructions > p { + margin-top: 24px; + margin-bottom: 0; +} + + +@media (min-width: 768px) { + .adyen-checkout-paynow__instructions { + display: none; + } +} diff --git a/packages/lib/src/components/PayNow/components/PayNowInstructions.tsx b/packages/lib/src/components/PayNow/components/PayNowInstructions.tsx new file mode 100644 index 0000000000..41b84f0bf5 --- /dev/null +++ b/packages/lib/src/components/PayNow/components/PayNowInstructions.tsx @@ -0,0 +1,20 @@ +import { h } from 'preact'; +import { useCoreContext } from '../../../core/Context/CoreProvider'; +import ContentSeparator from '../../internal/ContentSeparator'; +import './PayNowInstructions.scss'; + +/** + * Instructions for PayNow are rendered only on mobile view. + */ +const PayNowInstructions = () => { + const { i18n } = useCoreContext(); + + return ( +
+ +

{i18n.get('paynow.scanQrCode')}

+
+ ); +}; + +export { PayNowInstructions }; diff --git a/packages/lib/src/components/PayNow/components/PayNowIntroduction.scss b/packages/lib/src/components/PayNow/components/PayNowIntroduction.scss index b1b1b08126..d423836e25 100644 --- a/packages/lib/src/components/PayNow/components/PayNowIntroduction.scss +++ b/packages/lib/src/components/PayNow/components/PayNowIntroduction.scss @@ -8,76 +8,17 @@ text-align: center; } -.adyen-checkout-paynow__introduction--mobile-only { +.adyen-checkout-paynow__introduction--desktop { display: none; } -@media only screen and (max-width: 768px) { - .adyen-checkout-paynow__introduction--mobile-only { +@media (min-width: 768px) { + .adyen-checkout-paynow__introduction--desktop { display: block; } -} - -.c-timeline { - text-align: left; - list-style: none; - margin: 0; - padding: 0; - border: 0; - vertical-align: baseline; -} - -.c-timeline__desc { - margin: 0; - padding: 0; - border: 0; -} - -.c-timeline__item { - // position: relative; - // display: flex; - // outline: solid 1px; - &:last-child { - .c-timeline__content { - &::before { - display: none; - } - } + .adyen-checkout-paynow__introduction--mobile { + display: none; } } -.c-timeline__content { - flex: 1; - position: relative; - order: 1; - padding-left: 20px; - padding-bottom: 20px; - font-weight: 400; - line-height: 20px; - font-size: 14px; - color: #00112C; - - &::before { - content: ""; - position: absolute; - right: 100%; - top: 0; - height: 100%; - width: 4px; - background-color: #E6E9EB; - } - - &::after { - content: ""; - position: absolute; - left: calc(0px - 10px); - top: 0; - width: 16px; - height: 16px; - background-color: #E6E9EB; - z-index: 1; - border: 2px solid #E6E9EB; - border-radius: 50%; - } -} diff --git a/packages/lib/src/components/PayNow/components/PayNowIntroduction.tsx b/packages/lib/src/components/PayNow/components/PayNowIntroduction.tsx index 571fc1e385..630c8f8e54 100644 --- a/packages/lib/src/components/PayNow/components/PayNowIntroduction.tsx +++ b/packages/lib/src/components/PayNow/components/PayNowIntroduction.tsx @@ -1,44 +1,25 @@ import { h } from 'preact'; import { useCoreContext } from '../../../core/Context/CoreProvider'; -import ContentSeparator from '../../internal/ContentSeparator'; +import Timeline from '../../internal/Timeline'; import './PayNowIntroduction.scss'; const PayNowIntroduction = () => { const { i18n } = useCoreContext(); + const instructions = [ + i18n.get('paynow.mobileViewInstruction.step1'), + i18n.get('paynow.mobileViewInstruction.step2'), + i18n.get('paynow.mobileViewInstruction.step3'), + i18n.get('paynow.mobileViewInstruction.step4'), + i18n.get('paynow.mobileViewInstruction.step5') + ]; + return (
- {i18n.get('paynow.scanQrCode')} +
{i18n.get('paynow.scanQrCode')}
-
- -
    -
  1. -
    -

    Take a screenshot of the QR code.

    -
    -
    2. -
  2. -
    -

    Open the PayNow bank or payment app.

    -
    -
    3. -
  3. -
    -

    Select the option to scan a QR code.

    -
    -
    4. -
  4. -
    -

    Choose the option to upload a QR and select the screenshot.

    -
    -
    5. -
  5. -
    -

    Complete the transaction.

    -
    -
    6. -
+
+
); diff --git a/packages/lib/src/components/internal/ContentSeparator/ContentSeparator.scss b/packages/lib/src/components/internal/ContentSeparator/ContentSeparator.scss index faef810749..7ebe78edef 100644 --- a/packages/lib/src/components/internal/ContentSeparator/ContentSeparator.scss +++ b/packages/lib/src/components/internal/ContentSeparator/ContentSeparator.scss @@ -6,7 +6,7 @@ display: flex; justify-content: center; align-items: center; - color: token(color-label-secondary); + color: token(color-label-primary); white-space: nowrap; font-size: 13px; line-height: token(text-caption-line-height); @@ -15,7 +15,7 @@ &::before { content: ''; flex: 1; - border-bottom: 1px solid token(color-outline-tertiary); + border-bottom: 1px solid token(color-separator-primary); } &::after { diff --git a/packages/lib/src/components/internal/QRLoader/QRLoader.scss b/packages/lib/src/components/internal/QRLoader/QRLoader.scss index 083a339580..ecbc5bcbb7 100644 --- a/packages/lib/src/components/internal/QRLoader/QRLoader.scss +++ b/packages/lib/src/components/internal/QRLoader/QRLoader.scss @@ -5,11 +5,14 @@ padding: token(spacer-110); border: token(border-width-s) solid token(color-outline-secondary); border-radius: token(border-radius-m); - text-align: center; + display: flex; + flex-direction: column; + align-items: center; } .adyen-checkout__qr-loader--result { padding: 100px; + gap: token(spacer-090); } .adyen-checkout__qr-loader--app { @@ -18,22 +21,20 @@ padding: 0; } +.adyen-checkout__qr-loader__brand-logo-wrapper { + border-radius: token(border-radius-s); + box-shadow: token(shadow-low); + margin-bottom: token(spacer-090); + overflow: hidden; +} + .adyen-checkout__qr-loader__brand-logo { - width: 74px; - border-radius: 3px; + width: 80px; + display: block; } .adyen-checkout__qr-loader__subtitle { max-width: 400px; - margin: token(spacer-100) auto 0; -} - -.adyen-checkout__qr-loader__subtitle--result { - margin-bottom: token(spacer-100); -} - -.adyen-checkout__qr-loader__subtitle, -.adyen-checkout__qr-loader__payment_amount { color: token(color-label-primary); font-size: token(text-subtitle-font-size); line-height: token(text-caption-line-height); @@ -45,16 +46,20 @@ } .adyen-checkout__qr-loader__payment_amount { - font-weight: bold; + color: token(color-label-primary); + font-weight: token(text-title-l-font-weight); + font-size: token(text-title-l-font-size); + line-height: token(text-body-wide-line-height); + margin-bottom: token(spacer-090); } .adyen-checkout__qr-loader__progress { height: token(spacer-020); background: token(color-outline-secondary); border-radius: token(border-radius-l); - margin: token(spacer-100) auto token(spacer-060); width: 152px; padding-right: 3%; + margin-bottom: token(spacer-060); [dir="rtl"] & { padding-right: 0; @@ -70,8 +75,8 @@ } .adyen-checkout__qr-loader__countdown { - color: token(color-label-secondary); font-size: token(text-body-font-size); + text-align: center; } .adyen-checkout__qr-loader > .adyen-checkout__spinner__wrapper { diff --git a/packages/lib/src/components/internal/QRLoader/QRLoader.tsx b/packages/lib/src/components/internal/QRLoader/QRLoader.tsx index 4ad3212304..c2bfc9e150 100644 --- a/packages/lib/src/components/internal/QRLoader/QRLoader.tsx +++ b/packages/lib/src/components/internal/QRLoader/QRLoader.tsx @@ -164,7 +164,7 @@ class QRLoader extends Component { src={getImage({ imageFolder: 'components/' })(image)} alt={status} /> -
{status}
+
{status}
); }; @@ -180,7 +180,11 @@ class QRLoader extends Component { if (loading) { return (
- {brandLogo && {brandName}} + {brandLogo && ( +
+ {brandName} +
+ )}
); @@ -193,7 +197,11 @@ class QRLoader extends Component { return (
- {brandLogo && {brandName}} + {brandLogo && ( +
+ {brandName} +
+ )} {amount && amount.value && amount.currency && (
{i18n.amount(amount.value, amount.currency)}
diff --git a/packages/lib/src/components/internal/Timeline/Timeline.scss b/packages/lib/src/components/internal/Timeline/Timeline.scss new file mode 100644 index 0000000000..d45c712fb6 --- /dev/null +++ b/packages/lib/src/components/internal/Timeline/Timeline.scss @@ -0,0 +1,56 @@ +@import 'styles/variable-generator'; + +.adyen-checkout-timeline { + text-align: left; + list-style: none; + margin: 0; + padding: 0; + border: 0; + vertical-align: baseline; +} + +.adyen-checkout-timeline__item-description { + margin: 0; + padding: 0; + border: 0; +} + +.adyen-checkout-timeline__item { + &:last-child { + .adyen-checkout-timeline__item-content { + &::before { + display: none; + } + } + } +} + +.adyen-checkout-timeline__item-content { + position: relative; + padding-left: token(spacer-090); + padding-bottom: token(spacer-090); + font-size: token(text-body-font-size); + + &::before { + content: ""; + position: absolute; + right: 100%; + top: 0; + height: 100%; + width: 1px; + background-color: token(color-separator-primary); + } + + &::after { + content: ""; + position: absolute; + left: -9px; + top: 0; + width: 17px; + height: 17px; + z-index: 1; + background-color: token(color-background-primary); + border: 1px solid token(color-separator-primary); + border-radius: 50%; + } +} diff --git a/packages/lib/src/components/internal/Timeline/Timeline.tsx b/packages/lib/src/components/internal/Timeline/Timeline.tsx new file mode 100644 index 0000000000..d74fe6a429 --- /dev/null +++ b/packages/lib/src/components/internal/Timeline/Timeline.tsx @@ -0,0 +1,26 @@ +import { h } from 'preact'; +import './Timeline.scss'; + +interface Timeline { + instructions: string[]; +} + +const Timeline = ({ instructions }: Timeline) => { + if (!instructions || instructions.length === 0) { + return null; + } + + return ( +
    + {instructions.map((value, index) => ( +
  1. +
    +

    {value}

    +
    +
    2. + ))} +
+ ); +}; + +export default Timeline; diff --git a/packages/lib/src/components/internal/Timeline/index.ts b/packages/lib/src/components/internal/Timeline/index.ts new file mode 100644 index 0000000000..1f0b63e018 --- /dev/null +++ b/packages/lib/src/components/internal/Timeline/index.ts @@ -0,0 +1 @@ +export { default } from './Timeline'; diff --git a/packages/server/translations/ar.json b/packages/server/translations/ar.json index 064ece0e7e..7cb500ce13 100644 --- a/packages/server/translations/ar.json +++ b/packages/server/translations/ar.json @@ -315,5 +315,11 @@ "payme.instructions.footnote": "يرجى عدم إغلاق هذه الصفحة قبل إتمام الدفع", "payByBankAISDD.disclaimer.header": "استخدم خدمة Pay by Bank للدفع الفوري من خلال أي حساب مصرفي.", "payByBankAISDD.disclaimer.body": "من خلال ربط حسابك البنكي، أنت بذلك تمنحنا تفويضًا بخصم مدفوعات المبالغ المستحقة من حسابك البنكي، وذلك مقابل استخدام خدماتنا و/أو شراء منتجاتنا. ويستمر العمل بهذا التفويض إلى أن يتم إلغاؤه.", - "paymentMethodBrand.other": "أخرى" + "paymentMethodBrand.other": "أخرى", + "paynow.scanQrCode": "اقرأ رمز الاستجابة السريعة ضوئيًا باستخدام تطبيق PayNow؛ لإتمام عملية الدفع", + "paynow.mobileViewInstruction.step1": "سجل لقطة شاشة لرمز الاستجابة السريعة QR.", + "paynow.mobileViewInstruction.step2": "افتح تطبيق بنك PayNow أو تطبيق الدفع.", + "paynow.mobileViewInstruction.step3": "ابحث عن أداة قراءة رمز الاستجابة السريعة وشغلها.", + "paynow.mobileViewInstruction.step4": "خدد خيار تحميل QR، ثم حدد لقطة الشاشة.", + "paynow.mobileViewInstruction.step5": "أكمل المعاملة." } \ No newline at end of file diff --git a/packages/server/translations/bg-BG.json b/packages/server/translations/bg-BG.json index a22cd8d44c..e1a7c08cac 100644 --- a/packages/server/translations/bg-BG.json +++ b/packages/server/translations/bg-BG.json @@ -316,5 +316,11 @@ "payme.instructions.footnote": "Моля, не затваряйте тази страница преди плащането да приключи", "payByBankAISDD.disclaimer.header": "Използвайте Pay by Bank, за да платите незабавно от всяка банкова сметка.", "payByBankAISDD.disclaimer.body": "Като свържете банковата си сметка, Вие разрешавате дебитиране на сметката Ви за всяка сума, дължима за употреба на нашите услуги и/или закупуване на нашите продукти, докато това разрешение не бъде оттеглено.", - "paymentMethodBrand.other": "други" + "paymentMethodBrand.other": "други", + "paynow.scanQrCode": "Сканирайте QR кода с приложението PayNow, за да извършите плащането", + "paynow.mobileViewInstruction.step1": "Направете екранна снимка на QR кода.", + "paynow.mobileViewInstruction.step2": "Отворете банката или приложението за плащане PayNow.", + "paynow.mobileViewInstruction.step3": "Изберете опцията за сканиране на QR код.", + "paynow.mobileViewInstruction.step4": "Изберете опцията за качване на QR код и след това изберете екранната снимка.", + "paynow.mobileViewInstruction.step5": "Извършете транзакцията." } \ No newline at end of file diff --git a/packages/server/translations/ca-ES.json b/packages/server/translations/ca-ES.json index 42f30238ca..d9deb00e67 100644 --- a/packages/server/translations/ca-ES.json +++ b/packages/server/translations/ca-ES.json @@ -316,5 +316,11 @@ "payme.instructions.footnote": "No tanqueu aquesta pàgina abans de completar el pagament", "payByBankAISDD.disclaimer.header": "Utilitzeu el pagament per banc per pagar a l'instant des de qualsevol compte bancari.", "payByBankAISDD.disclaimer.body": "En connectar el vostre compte bancari, esteu autoritzant càrrecs a aquest compte per qualsevol import degut per l'ús dels nostres serveis o la compra dels nostres productes, fins que es revoqui aquesta autorització.", - "paymentMethodBrand.other": "altre" + "paymentMethodBrand.other": "altre", + "paynow.scanQrCode": "Escanegeu el codi QR amb l'aplicació PayNow per completar el pagament.", + "paynow.mobileViewInstruction.step1": "Feu una captura de pantalla del codi QR.", + "paynow.mobileViewInstruction.step2": "Obriu PayNow o l'aplicació de pagament.", + "paynow.mobileViewInstruction.step3": "Seleccioneu l'opció d'escanejar un codi QR.", + "paynow.mobileViewInstruction.step4": "Trieu l'opció per carregar un QR i seleccioneu la captura de pantalla.", + "paynow.mobileViewInstruction.step5": "Completeu la transacció." } \ No newline at end of file diff --git a/packages/server/translations/cs-CZ.json b/packages/server/translations/cs-CZ.json index 1867d62bcf..e253a5dd39 100644 --- a/packages/server/translations/cs-CZ.json +++ b/packages/server/translations/cs-CZ.json @@ -311,5 +311,11 @@ "payme.instructions.footnote": "Nezavírejte prosím tuto stránku před dokončením platby.", "payByBankAISDD.disclaimer.header": "Použijte Pay by Bank k okamžité platbě z jakéhokoli bankovního účtu.", "payByBankAISDD.disclaimer.body": "Připojením svého bankovního účtu vyjadřujete souhlas s tím, aby z účtu byly strženy všechny dlužné částky za využívání našich služeb a nákup našich produktů, a to až do odvolání tohoto souhlasu.", - "paymentMethodBrand.other": "Ostatní" + "paymentMethodBrand.other": "Ostatní", + "paynow.scanQrCode": "Platbu dokončete naskenováním QR kódu v PayNow", + "paynow.mobileViewInstruction.step1": "Pořiďte screenshot QR kódu.", + "paynow.mobileViewInstruction.step2": "Otevřete PayNow nebo platební aplikaci.", + "paynow.mobileViewInstruction.step3": "Zvolte možnost naskenovat QR kód.", + "paynow.mobileViewInstruction.step4": "Klikněte na možnost QR kód a vyberte snímek obrazovky.", + "paynow.mobileViewInstruction.step5": "Dokončete transakci." } \ No newline at end of file diff --git a/packages/server/translations/da-DK.json b/packages/server/translations/da-DK.json index 5bdd832014..baef20c8b3 100644 --- a/packages/server/translations/da-DK.json +++ b/packages/server/translations/da-DK.json @@ -312,5 +312,11 @@ "payme.instructions.footnote": "Luk ikke denne side, før betalingen er gennemført", "payByBankAISDD.disclaimer.header": "Brug Pay by Bank til at betale med det samme fra enhver bankkonto.", "payByBankAISDD.disclaimer.body": "Ved at tilknytte din bankkonto tillader du debiteringer på din konto for ethvert skyldigt beløb for brug af vores tjenester og/eller køb af vores produkter, indtil denne tilladelse tilbagekaldes.", - "paymentMethodBrand.other": "andet" + "paymentMethodBrand.other": "andet", + "paynow.scanQrCode": "Scan QR-koden med PayNow-appen for at gennemføre betalingen", + "paynow.mobileViewInstruction.step1": "Tag et skærmbillede af QR-koden.", + "paynow.mobileViewInstruction.step2": "Åbn PayNow-banken eller betalingsappen.", + "paynow.mobileViewInstruction.step3": "Vælg muligheden for at scanne en QR-kode.", + "paynow.mobileViewInstruction.step4": "Vælg muligheden for at uploade en QR-kode og vælg skærmbilledet.", + "paynow.mobileViewInstruction.step5": "Gennemfør transaktionen." } \ No newline at end of file diff --git a/packages/server/translations/de-DE.json b/packages/server/translations/de-DE.json index c2943d9827..653c02bbcc 100644 --- a/packages/server/translations/de-DE.json +++ b/packages/server/translations/de-DE.json @@ -311,5 +311,11 @@ "payme.instructions.footnote": "Bitte schließen Sie diese Seite nicht, bevor die Zahlung abgeschlossen ist", "payByBankAISDD.disclaimer.header": "Verwenden Sie Pay by Bank, um sofort von jedem Bankkonto zu bezahlen.", "payByBankAISDD.disclaimer.body": "Durch die Verbindung Ihres Bankkontos autorisieren Sie bis auf Widerruf Abbuchungen von Ihrem Konto für alle Beträge, die für die Nutzung unserer Dienste und/oder den Kauf unserer Produkte geschuldet werden.", - "paymentMethodBrand.other": "andere" + "paymentMethodBrand.other": "andere", + "paynow.scanQrCode": "Scannen Sie den QR-Code mit der PayNow-App, um die Zahlung abzuschließen.", + "paynow.mobileViewInstruction.step1": "Machen Sie einen Screenshot des QR-Codes.", + "paynow.mobileViewInstruction.step2": "Öffnen Sie die PayNow-Bank- oder Zahlungs-App.", + "paynow.mobileViewInstruction.step3": "Wählen Sie die Option, um einen QR-Code zu scannen.", + "paynow.mobileViewInstruction.step4": "Wählen Sie die Option zum Hochladen eines QR-Codes und wählen Sie den Screenshot aus.", + "paynow.mobileViewInstruction.step5": "Schließen Sie die Transaktion ab." } \ No newline at end of file diff --git a/packages/server/translations/el-GR.json b/packages/server/translations/el-GR.json index e614f84b3c..56212616c8 100644 --- a/packages/server/translations/el-GR.json +++ b/packages/server/translations/el-GR.json @@ -314,5 +314,11 @@ "payme.instructions.footnote": "Μην κλείσετε αυτήν τη σελίδα προτού ολοκληρωθεί η πληρωμή.", "payByBankAISDD.disclaimer.header": "Χρησιμοποιήστε το Pay by Bank για άμεση πληρωμή από οποιονδήποτε τραπεζικό λογαριασμό.", "payByBankAISDD.disclaimer.body": "Συνδέοντας τον τραπεζικό λογαριασμό σας, εξουσιοδοτείτε χρεώσεις στον λογαριασμό σας για οποιοδήποτε ποσό οφείλεται για τη χρήση των υπηρεσιών μας ή/και την αγορά των προϊόντων μας, έως ότου ανακληθεί αυτή η εξουσιοδότηση.", - "paymentMethodBrand.other": "άλλο" + "paymentMethodBrand.other": "άλλο", + "paynow.scanQrCode": "Σαρώστε τον κωδικό QR χρησιμοποιώντας την εφαρμογή PayNow για να ολοκληρώσετε την πληρωμή", + "paynow.mobileViewInstruction.step1": "Τραβήξτε ένα στιγμιότυπο οθόνης του κωδικού QR.", + "paynow.mobileViewInstruction.step2": "Ανοίξτε την τράπεζα PayNow ή την εφαρμογή πληρωμών.", + "paynow.mobileViewInstruction.step3": "Επιλέξτε τη δυνατότητα σάρωσης ενός κωδικού QR.", + "paynow.mobileViewInstruction.step4": "Επιλέξτε τη δυνατότητα μεταφόρτωσης ενός QR και επιλέξτε το στιγμιότυπο οθόνης.", + "paynow.mobileViewInstruction.step5": "Ολοκληρώστε τη συναλλαγή." } \ No newline at end of file diff --git a/packages/server/translations/en-US.json b/packages/server/translations/en-US.json index 38115655be..f747a07234 100644 --- a/packages/server/translations/en-US.json +++ b/packages/server/translations/en-US.json @@ -323,4 +323,4 @@ "paynow.mobileViewInstruction.step3": "Select the option to scan a QR code.", "paynow.mobileViewInstruction.step4": "Choose the option to upload a QR and select the screenshot.", "paynow.mobileViewInstruction.step5": "Complete the transaction." -} +} \ No newline at end of file diff --git a/packages/server/translations/es-ES.json b/packages/server/translations/es-ES.json index d282d33b5b..f6b472ab5b 100644 --- a/packages/server/translations/es-ES.json +++ b/packages/server/translations/es-ES.json @@ -309,5 +309,11 @@ "payme.instructions.footnote": "No cierres esta página antes de que se complete el pago", "payByBankAISDD.disclaimer.header": "Utilice la opción de pago bancario para pagar al instante desde cualquier cuenta bancaria.", "payByBankAISDD.disclaimer.body": "Al conectar su cuenta bancaria, autoriza los cargos en su cuenta de cualquier importe que deba pagar por el uso de nuestros servicios o la compra de nuestros productos hasta que se revoque esta autorización.", - "paymentMethodBrand.other": "otro" + "paymentMethodBrand.other": "otro", + "paynow.scanQrCode": "Escanee el código QR con la aplicación PayNow para completar el pago", + "paynow.mobileViewInstruction.step1": "Haga una captura de pantalla del código QR.", + "paynow.mobileViewInstruction.step2": "Abra la aplicación bancaria o de pago PayNow.", + "paynow.mobileViewInstruction.step3": "Seleccione la opción de escanear un código QR.", + "paynow.mobileViewInstruction.step4": "Elija la opción de subir un QR y seleccione la captura de pantalla.", + "paynow.mobileViewInstruction.step5": "Complete la transacción." } \ No newline at end of file diff --git a/packages/server/translations/et-EE.json b/packages/server/translations/et-EE.json index c858c7b08f..a422756462 100644 --- a/packages/server/translations/et-EE.json +++ b/packages/server/translations/et-EE.json @@ -316,5 +316,11 @@ "payme.instructions.footnote": "Ärge sulgege seda lehte enne makse lõpuleviimist", "payByBankAISDD.disclaimer.header": "Kasutage pangamakset, et maksta koheselt mis tahes pangakontoga.", "payByBankAISDD.disclaimer.body": "Pangakonto sidumisega annate loa debiteerida oma kontolt meie teenuste kasutamise ja/või meie toodete ostmise eest mis tahes võlgnetavad summad kuni selle loa tühistamiseni.", - "paymentMethodBrand.other": "muu" + "paymentMethodBrand.other": "muu", + "paynow.scanQrCode": "Makse lõpuleviimiseks skannige QR-kood rakenduse PayNow abil", + "paynow.mobileViewInstruction.step1": "Tehke QR-koodist kuvatõmmis.", + "paynow.mobileViewInstruction.step2": "Avage pank või makserakendus PayNow.", + "paynow.mobileViewInstruction.step3": "Valige QR-koodi skannimise valik.", + "paynow.mobileViewInstruction.step4": "Valige QR-koodi üleslaadimise valik ja valige kuvatõmmis.", + "paynow.mobileViewInstruction.step5": "Viige kanne lõpule." } \ No newline at end of file diff --git a/packages/server/translations/fi-FI.json b/packages/server/translations/fi-FI.json index 4c319f8956..db71ce37c8 100644 --- a/packages/server/translations/fi-FI.json +++ b/packages/server/translations/fi-FI.json @@ -311,5 +311,11 @@ "payme.instructions.footnote": "Älä sulje tätä sivua ennen kuin maksu on suoritettu", "payByBankAISDD.disclaimer.header": "Pankkimaksutoiminnolla voit maksaa heti miltä tahansa pankkitililtä.", "payByBankAISDD.disclaimer.body": "Kun yhdistät pankkitilisi, annat luvan veloittaa tililtäsi kaikki palveluidemme käytöstä ja/tai tuotteidemme ostamisesta aiheutuvat kulut. Tämä valtuutus on voimassa siihen saakka, kunnes peruutat sen.", - "paymentMethodBrand.other": "muu" + "paymentMethodBrand.other": "muu", + "paynow.scanQrCode": "Suorita maksu skannaamalla QR-koodi PayNow-sovelluksella", + "paynow.mobileViewInstruction.step1": "Ota näyttökuva QR-koodista.", + "paynow.mobileViewInstruction.step2": "Avaa PayNow-pankkisovellus tai -maksusovellus.", + "paynow.mobileViewInstruction.step3": "Valitse QR-koodin skannaustoiminto.", + "paynow.mobileViewInstruction.step4": "Valitse QR-koodin lataustoiminto ja valitse ottamasi näyttökuva.", + "paynow.mobileViewInstruction.step5": "Suorita maksutapahtuma loppuun." } \ No newline at end of file diff --git a/packages/server/translations/fr-FR.json b/packages/server/translations/fr-FR.json index 1fdc4a3928..2f6e8b6dc4 100644 --- a/packages/server/translations/fr-FR.json +++ b/packages/server/translations/fr-FR.json @@ -314,5 +314,11 @@ "payme.instructions.footnote": "Veuillez ne pas fermer cette page avant que le paiement ne soit terminé.", "payByBankAISDD.disclaimer.header": "Utilisez Pay by Bank pour payer instantanément depuis n'importe quel compte bancaire.", "payByBankAISDD.disclaimer.body": "En connectant votre compte bancaire, vous autorisez le débit de tous les montants dus pour l'utilisation de nos services et l'achat de nos produits, jusqu'à révocation de votre autorisation.", - "paymentMethodBrand.other": "autre" + "paymentMethodBrand.other": "autre", + "paynow.scanQrCode": "Scannez le code QR à l'aide de l'application PayNow pour effectuer le paiement", + "paynow.mobileViewInstruction.step1": "Faites une capture d'écran du code QR.", + "paynow.mobileViewInstruction.step2": "Ouvrez l'application bancaire ou de paiement PayNow.", + "paynow.mobileViewInstruction.step3": "Sélectionnez l'option permettant de scanner un code QR.", + "paynow.mobileViewInstruction.step4": "Choisissez l'option pour télécharger un code QR et sélectionnez la capture d'écran.", + "paynow.mobileViewInstruction.step5": "Complétez la transaction." } \ No newline at end of file diff --git a/packages/server/translations/hr-HR.json b/packages/server/translations/hr-HR.json index 27187643d3..ef0fca7d44 100644 --- a/packages/server/translations/hr-HR.json +++ b/packages/server/translations/hr-HR.json @@ -314,5 +314,11 @@ "payme.instructions.footnote": "Ne zatvarajte ovu stranicu prije nego što se plaćanje završi", "payByBankAISDD.disclaimer.header": "Koristite Pay by Bank za trenutačno plaćanje s bilo kojeg bankovnog računa.", "payByBankAISDD.disclaimer.body": "Povezivanjem svog bankovnog računa autorizirate zaduženja na svoj račun za bilo koji iznos koji se duguje za upotrebu naših usluga i/ili kupnju naših proizvoda, sve dok se autorizacija ne opozove.", - "paymentMethodBrand.other": "Drugo" + "paymentMethodBrand.other": "Drugo", + "paynow.scanQrCode": "Skenirajte QR kod pomoću aplikacije PayNow kako biste dovršili plaćanje", + "paynow.mobileViewInstruction.step1": "Napravite snimku zaslona QR kôda.", + "paynow.mobileViewInstruction.step2": "Otvorite PayNow banku ili aplikaciju za plaćanje.", + "paynow.mobileViewInstruction.step3": "Odaberite opciju skeniranja QR kôda.", + "paynow.mobileViewInstruction.step4": "Odaberite opciju za prijenos QR-a i odaberite snimku zaslona.", + "paynow.mobileViewInstruction.step5": "Dovršite transakciju." } \ No newline at end of file diff --git a/packages/server/translations/hu-HU.json b/packages/server/translations/hu-HU.json index 1027221b9e..15a191e54d 100644 --- a/packages/server/translations/hu-HU.json +++ b/packages/server/translations/hu-HU.json @@ -314,5 +314,11 @@ "payme.instructions.footnote": "A fizetés befejezése előtt ne zárja be ezt az oldalt", "payByBankAISDD.disclaimer.header": "Ha bankszámláról szeretne azonnal fizetni, használja a Fizetés bankkal lehetőséget.", "payByBankAISDD.disclaimer.body": "Bankszámlája csatlakoztatásával engedélyezi, hogy a szolgáltatásaink használatáért és/vagy termékeink megvásárlásáért levonandó összeget a számlájára terheljük egészen addig, amíg ezt az engedélyt vissza nem vonja.", - "paymentMethodBrand.other": "Egyéb" + "paymentMethodBrand.other": "Egyéb", + "paynow.scanQrCode": "A fizetés befejezéséhez olvassa be a QR-kódot a PayNow alkalmazással", + "paynow.mobileViewInstruction.step1": "Készítsen képernyőképet a QR-kódról.", + "paynow.mobileViewInstruction.step2": "Nyissa meg a PayNow banki vagy fizetési alkalmazást.", + "paynow.mobileViewInstruction.step3": "Válassza ki a QR-kód beolvasásának lehetőségét.", + "paynow.mobileViewInstruction.step4": "Válassza ki a QR-feltöltés lehetőségét, és jelölje ki a képernyőképet.", + "paynow.mobileViewInstruction.step5": "Fejezze be a tranzakciót." } \ No newline at end of file diff --git a/packages/server/translations/is-IS.json b/packages/server/translations/is-IS.json index ead33faa05..26f034d2f8 100644 --- a/packages/server/translations/is-IS.json +++ b/packages/server/translations/is-IS.json @@ -291,7 +291,7 @@ "ancv.form.instruction": "Þú þarft að nota Cheque-Vacances forritið til að staðfesta þessa greiðslu.", "ancv.beneficiaryId.invalid": "Sláðu inn gilt netfang eða ANCV-auðkenni", "creditCard.cardNumber.label": "Kortanúmer", - "creditCard.expiryDate.label": "Gildisdadgur", + "creditCard.expiryDate.label": "Gildisdagur", "creditCard.expiryDate.contextualText": "Framan á kortinu á sniðinu MM/ÁÁ", "creditCard.securityCode.label": "Öryggiskóði", "creditCard.securityCode.label.optional": "Öryggiskóði (valfrjálst)", @@ -302,7 +302,7 @@ "creditCard.pin.label": "PIN-númer", "creditCard.password.label": "Fyrstu 2 tölustafirnir í aðgangsorði kortsins", "giftcard.cardNumber.label": "Kortanúmer", - "giftcard.expiryDate.label": "Gildisdadgur", + "giftcard.expiryDate.label": "Gildisdagur", "giftcard.securityCode.label": "PIN-númer", "ach.bankAccountNumber.label": "Reikningsnúmer", "ach.bankLocationId.label": "ABA-bankanúmer", @@ -316,5 +316,11 @@ "payme.instructions.footnote": "Ekki loka þessari síðu áður en greiðslunni er lokið", "payByBankAISDD.disclaimer.header": "Notaðu Pay by Bank til að greiða strax af hvaða bankareikningi sem er.", "payByBankAISDD.disclaimer.body": "Með því að tengja bankareikninginn þinn heimilar þú skuldfærslu af reikningnum þínum fyrir hvaða upphæð sem þú skuldar vegna notkunar á þjónustu okkar og/eða kaupum á vörum okkar, þar til þessi heimild er afturkölluð.", - "paymentMethodBrand.other": "annað" + "paymentMethodBrand.other": "annað", + "paynow.scanQrCode": "Skannaðu QR-kóðann með PayNow-appinu til að ganga frá greiðslunni", + "paynow.mobileViewInstruction.step1": "Taktu skjáskot af QR-kóðanum.", + "paynow.mobileViewInstruction.step2": "Opnaðu PayNow-banka- eða greiðsluapp.", + "paynow.mobileViewInstruction.step3": "Veldu valkostinn til að skanna QR-kóða.", + "paynow.mobileViewInstruction.step4": "Veldu valkostinn til að hlaða upp QR-kóða og veldu skjámyndina.", + "paynow.mobileViewInstruction.step5": "Ljúktu færslunni." } \ No newline at end of file diff --git a/packages/server/translations/it-IT.json b/packages/server/translations/it-IT.json index d09e81de9e..6b8b9218ad 100644 --- a/packages/server/translations/it-IT.json +++ b/packages/server/translations/it-IT.json @@ -314,5 +314,11 @@ "payme.instructions.footnote": "Rimani su questa pagina fino a quando il pagamento sarà completato", "payByBankAISDD.disclaimer.header": "Utilizza Pay by Bank per pagare istantaneamente da qualsiasi conto bancario.", "payByBankAISDD.disclaimer.body": "Collegando il tuo conto bancario, autorizzi l'addebito su di esso di qualsiasi importo dovuto per l'utilizzo dei nostri servizi e/o l'acquisto dei nostri prodotti, fino alla revoca di tale autorizzazione.", - "paymentMethodBrand.other": "altro" + "paymentMethodBrand.other": "altro", + "paynow.scanQrCode": "Per completare il pagamento, scansiona il codice QR utilizzando l'app PayNow", + "paynow.mobileViewInstruction.step1": "Fai uno screenshot del codice QR.", + "paynow.mobileViewInstruction.step2": "Apri PayNow o l'app di pagamento.", + "paynow.mobileViewInstruction.step3": "Seleziona l'opzione per scansionare un codice QR.", + "paynow.mobileViewInstruction.step4": "Scegli l'opzione per caricare un QR e seleziona lo screenshot.", + "paynow.mobileViewInstruction.step5": "Completa la transazione." } \ No newline at end of file diff --git a/packages/server/translations/ja-JP.json b/packages/server/translations/ja-JP.json index 3096a53753..6b825f6cc4 100644 --- a/packages/server/translations/ja-JP.json +++ b/packages/server/translations/ja-JP.json @@ -314,5 +314,11 @@ "payme.instructions.footnote": "支払いが完了するまでこのページを閉じないでください。", "payByBankAISDD.disclaimer.header": "Pay by Bankを使用すると、どの銀行口座からでも即座に支払いができます。", "payByBankAISDD.disclaimer.body": "銀行口座を接続することで、お客様は、この承認が取り消されるまで、当社のサービスの利用および/または当社製品の購入のために支払うべき金額をお客様の口座から引き落とすことを承認したことになります。", - "paymentMethodBrand.other": "その他" + "paymentMethodBrand.other": "その他", + "paynow.scanQrCode": "PayNowアプリを使用してQRコードをスキャンし、支払を完了してください", + "paynow.mobileViewInstruction.step1": "QRコードのスクリーンショットを撮ります。", + "paynow.mobileViewInstruction.step2": "PayNow銀行または支払アプリを開きます。", + "paynow.mobileViewInstruction.step3": "QRコードをスキャンするオプションを選択します。", + "paynow.mobileViewInstruction.step4": "QRをアップロードするオプションを選択し、スクリーンショットを選択します。", + "paynow.mobileViewInstruction.step5": "取引を完了します。" } \ No newline at end of file diff --git a/packages/server/translations/ko-KR.json b/packages/server/translations/ko-KR.json index 5bba0e6fa8..9fa0592cd6 100644 --- a/packages/server/translations/ko-KR.json +++ b/packages/server/translations/ko-KR.json @@ -314,5 +314,11 @@ "payme.instructions.footnote": "결제가 완료되기 전에 이 페이지를 닫지 마세요.", "payByBankAISDD.disclaimer.header": "Pay by Bank를 사용하면 어떤 은행 계좌에서든 즉시 결제할 수 있습니다.", "payByBankAISDD.disclaimer.body": "은행 계좌를 연결함으로써, 이 승인이 취소될 때까지 당사의 서비스 이용 및/또는 제품 구매에 대해 지불해야 할 모든 금액이 귀하의 계좌에서 인출되는 것을 승인하게 됩니다.", - "paymentMethodBrand.other": "기타" + "paymentMethodBrand.other": "기타", + "paynow.scanQrCode": "PayNow 앱으로 QR 코드를 스캔하여 결제를 완료하세요", + "paynow.mobileViewInstruction.step1": "QR 코드 스크린샷을 찍으세요.", + "paynow.mobileViewInstruction.step2": "PayNow 은행 또는 결제 앱을 여세요.", + "paynow.mobileViewInstruction.step3": "QR 코드 스캔 옵션을 선택하세요.", + "paynow.mobileViewInstruction.step4": "QR 업로드 옵션으로 들어가 스크린샷을 선택하세요.", + "paynow.mobileViewInstruction.step5": "거래를 완료하세요." } \ No newline at end of file diff --git a/packages/server/translations/lt-LT.json b/packages/server/translations/lt-LT.json index 49f8f23131..2f5652d82f 100644 --- a/packages/server/translations/lt-LT.json +++ b/packages/server/translations/lt-LT.json @@ -316,5 +316,11 @@ "payme.instructions.footnote": "Prašome neuždaryti šio puslapio prieš atlikdami mokėjimą", "payByBankAISDD.disclaimer.header": "Naudokitės „Pay by Bank“ ir akimirksniu atsiskaitykite iš bet kurios banko sąskaitos.", "payByBankAISDD.disclaimer.body": "Prijungdami savo banko sąskaitą sutinkate, kad iš jos būtų nurašomos visos mokėtinos sumos už naudojimąsi mūsų paslaugomis ir (arba) už mūsų produktų pirkimą, kol šis leidimas bus atšauktas.", - "paymentMethodBrand.other": "kitas" + "paymentMethodBrand.other": "kitas", + "paynow.scanQrCode": "Nuskaitykite QR kodą naudodami „PayNow“ programėlę, kad užbaigtumėte mokėjimą", + "paynow.mobileViewInstruction.step1": "Padarykite QR kodo ekrano kopiją.", + "paynow.mobileViewInstruction.step2": "Atidarykite „PayNow“ banko arba mokėjimo programėlę.", + "paynow.mobileViewInstruction.step3": "Pasirinkite QR kodo nuskaitymo parinktį.", + "paynow.mobileViewInstruction.step4": "Pasirinkite parinktį įkelti QR kodą ir pasirinkite ekrano nuotrauką.", + "paynow.mobileViewInstruction.step5": "Užbaikite operaciją." } \ No newline at end of file diff --git a/packages/server/translations/lv-LV.json b/packages/server/translations/lv-LV.json index 4222c936d9..a4736e33cc 100644 --- a/packages/server/translations/lv-LV.json +++ b/packages/server/translations/lv-LV.json @@ -316,5 +316,11 @@ "payme.instructions.footnote": "Lūdzu, neaizveriet šo lapu pirms maksājuma pabeigšanas", "payByBankAISDD.disclaimer.header": "Izmantojiet Pay by Bank pakalpojumu, lai nekavējoties norēķinātos no jebkura bankas konta.", "payByBankAISDD.disclaimer.body": "Pievienojot bankas kontu, jūs atļaujat debetēt no sava konta jebkuru summu, kas maksājama par mūsu pakalpojumu izmantošanu un/vai mūsu produktu iegādi, līdz brīdim, kad šī atļauja tiek atsaukta.", - "paymentMethodBrand.other": "cits" + "paymentMethodBrand.other": "cits", + "paynow.scanQrCode": "Skenējiet QR kodu, izmantojot lietotni PayNow, lai pabeigtu maksājumu", + "paynow.mobileViewInstruction.step1": "Uzņemiet QR koda ekrānuzņēmumu.", + "paynow.mobileViewInstruction.step2": "Atveriet PayNow banku vai maksājumu lietotni.", + "paynow.mobileViewInstruction.step3": "Atlasiet opciju skenēt QR kodu.", + "paynow.mobileViewInstruction.step4": "Izvēlieties opciju augšupielādēt QR kodu un veiciet ekrānuzņēmumu.", + "paynow.mobileViewInstruction.step5": "Pabeidziet darījumu." } \ No newline at end of file diff --git a/packages/server/translations/nl-NL.json b/packages/server/translations/nl-NL.json index d6e8df5533..3654e4a9b2 100644 --- a/packages/server/translations/nl-NL.json +++ b/packages/server/translations/nl-NL.json @@ -311,5 +311,11 @@ "payme.instructions.footnote": "Sluit deze pagina niet voordat de betaling is voltooid", "payByBankAISDD.disclaimer.header": "Gebruik Pay by Bank om direct vanaf elke bankrekening te betalen.", "payByBankAISDD.disclaimer.body": "Door uw bankrekening te koppelen, machtigt u afschrijvingen van uw rekening voor elk bedrag dat u verschuldigd bent voor het gebruik van onze diensten en/of de aankoop van onze producten, totdat deze machtiging wordt ingetrokken.", - "paymentMethodBrand.other": "overige" + "paymentMethodBrand.other": "overige", + "paynow.scanQrCode": "Scan de QR-code met de PayNow-app om de betaling te voltooien", + "paynow.mobileViewInstruction.step1": "Maak een screenshot van de QR-code.", + "paynow.mobileViewInstruction.step2": "Open de bank- of betaalapp van PayNow.", + "paynow.mobileViewInstruction.step3": "Selecteer de optie om een QR-code te scannen.", + "paynow.mobileViewInstruction.step4": "Kies de optie om een QR-code te uploaden en selecteer de schermafbeelding.", + "paynow.mobileViewInstruction.step5": "Voltooi de transactie." } \ No newline at end of file diff --git a/packages/server/translations/no-NO.json b/packages/server/translations/no-NO.json index 04a4e936e5..e2431deb66 100644 --- a/packages/server/translations/no-NO.json +++ b/packages/server/translations/no-NO.json @@ -311,5 +311,11 @@ "payme.instructions.footnote": "Ikke lukk denne siden før betalingen er fullført", "payByBankAISDD.disclaimer.header": "Bruk Pay by Bank for å betale umiddelbart fra en hvilken som helst bankkonto.", "payByBankAISDD.disclaimer.body": "Ved å koble til bankkontoen din autoriserer du debiteringer av kontoen for ethvert beløp du skylder for din bruk av våre tjenester og/eller kjøp av våre produkter, inntil denne autorisasjonen blir trukket tilbake.", - "paymentMethodBrand.other": "annet" + "paymentMethodBrand.other": "annet", + "paynow.scanQrCode": "Skann QR-koden ved hjelp av PayNow-appen for å fullføre betalingen", + "paynow.mobileViewInstruction.step1": "Ta et skjermbilde av QR-koden.", + "paynow.mobileViewInstruction.step2": "Åpne PayNow-banken eller betalingsappen.", + "paynow.mobileViewInstruction.step3": "Velg alternativet å skanne en QR-kode.", + "paynow.mobileViewInstruction.step4": "Velg alternativet å laste opp en QR-kode og velge skjermbildet.", + "paynow.mobileViewInstruction.step5": "Fullfør transaksjonen." } \ No newline at end of file diff --git a/packages/server/translations/pl-PL.json b/packages/server/translations/pl-PL.json index 1a2b023c2e..3ed82a0499 100644 --- a/packages/server/translations/pl-PL.json +++ b/packages/server/translations/pl-PL.json @@ -314,5 +314,11 @@ "payme.instructions.footnote": "Nie zamykaj tej strony, dopóki płatność nie zostanie zakończona", "payByBankAISDD.disclaimer.header": "Użyj Pay by Bank, aby zapłacić natychmiast z dowolnego konta bankowego.", "payByBankAISDD.disclaimer.body": "Podłączając swoje konto bankowe, zezwalasz na obciążanie swojego konta wszelkimi kwotami należnymi za korzystanie z naszych usług i/lub zakup naszych produktów, do czasu odwołania tego upoważnienia.", - "paymentMethodBrand.other": "inne" + "paymentMethodBrand.other": "inne", + "paynow.scanQrCode": "Zeskanuj kod QR za pomocą aplikacji PayNow, aby dokończyć płatność", + "paynow.mobileViewInstruction.step1": "Zrób zrzut ekranu kodu QR.", + "paynow.mobileViewInstruction.step2": "Otwórz aplikację bankową lub płatniczą PayNow.", + "paynow.mobileViewInstruction.step3": "Wybierz opcję zeskanowania kodu QR.", + "paynow.mobileViewInstruction.step4": "Wybierz opcję przesłania kodu QR i wybierz zrzut ekranu.", + "paynow.mobileViewInstruction.step5": "Sfinalizuj transakcję." } \ No newline at end of file diff --git a/packages/server/translations/pt-BR.json b/packages/server/translations/pt-BR.json index c405481a78..10d4ba5ba9 100644 --- a/packages/server/translations/pt-BR.json +++ b/packages/server/translations/pt-BR.json @@ -315,5 +315,11 @@ "payme.instructions.footnote": "Não feche esta página antes de concluir o pagamento", "payByBankAISDD.disclaimer.header": "Use o Pay by Bank para pagar instantaneamente de qualquer conta bancária.", "payByBankAISDD.disclaimer.body": "Ao conectar sua conta bancária, você autoriza débitos dessa conta de qualquer valor devido pelo uso de nossos serviços e/ou compra de nossos produtos até que esta autorização seja revogada.", - "paymentMethodBrand.other": "outro" + "paymentMethodBrand.other": "outro", + "paynow.scanQrCode": "Use o aplicativo PayNow para escanear o código QR e concluir o pagamento", + "paynow.mobileViewInstruction.step1": "Faça uma captura de tela do código QR.", + "paynow.mobileViewInstruction.step2": "Abra o banco PayNow ou o aplicativo de pagamento.", + "paynow.mobileViewInstruction.step3": "Selecione a opção para escanear um código QR.", + "paynow.mobileViewInstruction.step4": "Escolha a opção para carregar um QR e selecione a captura de tela.", + "paynow.mobileViewInstruction.step5": "Conclua a transação." } \ No newline at end of file diff --git a/packages/server/translations/pt-PT.json b/packages/server/translations/pt-PT.json index 203e91c8a2..4160bd09f3 100644 --- a/packages/server/translations/pt-PT.json +++ b/packages/server/translations/pt-PT.json @@ -316,5 +316,11 @@ "payme.instructions.footnote": "Não feche esta página antes de concluir o pagamento", "payByBankAISDD.disclaimer.header": "Utilize Pagamento por banco para pagar instantaneamente com qualquer conta bancária.", "payByBankAISDD.disclaimer.body": "Ao conectar a sua conta bancária, você autoriza débitos na sua conta de qualquer valor devido pela utilização dos nossos serviços e/ou compra dos nossos produtos, até que esta autorização seja revogada.", - "paymentMethodBrand.other": "outro" + "paymentMethodBrand.other": "outro", + "paynow.scanQrCode": "Leia o código QR com a aplicação PayNow para concluir o pagamento", + "paynow.mobileViewInstruction.step1": "Tire uma captura de ecrã do código QR.", + "paynow.mobileViewInstruction.step2": "Abra a aplicação bancária ou de pagamento da PayNow.", + "paynow.mobileViewInstruction.step3": "Selecione a opção para ler um código QR.", + "paynow.mobileViewInstruction.step4": "Escolha a opção para carregar um QR e selecione a captura de ecrã.", + "paynow.mobileViewInstruction.step5": "Conclua a transação." } \ No newline at end of file diff --git a/packages/server/translations/ro-RO.json b/packages/server/translations/ro-RO.json index 6e9e5eb451..c4daba9626 100644 --- a/packages/server/translations/ro-RO.json +++ b/packages/server/translations/ro-RO.json @@ -314,5 +314,11 @@ "payme.instructions.footnote": "Nu închideți această pagină înainte de finalizarea plății.", "payByBankAISDD.disclaimer.header": "Utilizați Plată prin bancă pentru a plăti instantaneu din orice cont bancar.", "payByBankAISDD.disclaimer.body": "Prin conectarea contului dvs. bancar, autorizați debitarea din contul dvs. a oricărei sume datorate cu privire la utilizarea serviciilor noastre și/sau achiziționarea produselor noastre, până la revocarea acestei autorizații.", - "paymentMethodBrand.other": "Altele" + "paymentMethodBrand.other": "Altele", + "paynow.scanQrCode": "Scanați codul QR utilizând aplicația PayNow pentru a finaliza plata", + "paynow.mobileViewInstruction.step1": "Faceți o captură de ecran a codului QR.", + "paynow.mobileViewInstruction.step2": "Deschideți aplicația bancară sau de plată PayNow.", + "paynow.mobileViewInstruction.step3": "Selectați opțiunea pentru a scana un cod QR.", + "paynow.mobileViewInstruction.step4": "Alegeți opțiunea de a încărca un QR și selectați captura de ecran.", + "paynow.mobileViewInstruction.step5": "Finalizați tranzacția." } \ No newline at end of file diff --git a/packages/server/translations/ru-RU.json b/packages/server/translations/ru-RU.json index af2c0c2b16..3625dfa04b 100644 --- a/packages/server/translations/ru-RU.json +++ b/packages/server/translations/ru-RU.json @@ -312,5 +312,11 @@ "payme.instructions.footnote": "Не закрывайте эту страницу до завершения платежа", "payByBankAISDD.disclaimer.header": "Для моментальной оплаты с любого банковского счета воспользуйтесь приложением Pay by Bank.", "payByBankAISDD.disclaimer.body": "Привязывая банковский счет, вы тем самым даете разрешение на списание с него средств за пользование нашими услугами и/или покупку нашей продукции. Данное разрешение продействует до тех пор, пока оно не будет отозвано.", - "paymentMethodBrand.other": "другой способ" + "paymentMethodBrand.other": "другой способ", + "paynow.scanQrCode": "Для завершения платежа отсканируйте QR-код с помощью приложения PayNow", + "paynow.mobileViewInstruction.step1": "Сделайте снимок QR-кода на экране.", + "paynow.mobileViewInstruction.step2": "Откройте банковское или платежное приложение PayNow.", + "paynow.mobileViewInstruction.step3": "Выберите опцию сканирования QR-кода.", + "paynow.mobileViewInstruction.step4": "Выберите опцию загрузки QR-кода и скриншот.", + "paynow.mobileViewInstruction.step5": "Завершите транзакцию." } \ No newline at end of file diff --git a/packages/server/translations/sk-SK.json b/packages/server/translations/sk-SK.json index cd1a2093c3..6d6b40614d 100644 --- a/packages/server/translations/sk-SK.json +++ b/packages/server/translations/sk-SK.json @@ -314,5 +314,11 @@ "payme.instructions.footnote": "Nezatvárajte túto stránku pred dokončením platby", "payByBankAISDD.disclaimer.header": "Používajte Pay by Bank na okamžitú platbu z akéhokoľvek bankového účtu.", "payByBankAISDD.disclaimer.body": "Pripojením svojho bankového účtu dávate súhlas na odpísanie akejkoľvek dlžnej sumy z vášho účtu za používanie našich služieb a/alebo nákup našich produktov, a to až do odvolania tohto súhlasu.", - "paymentMethodBrand.other": "Iné" + "paymentMethodBrand.other": "Iné", + "paynow.scanQrCode": "Nasnímajte QR kód pomocou aplikácie PayNow a dokončite platbu", + "paynow.mobileViewInstruction.step1": "Urobte snímku obrazovky s QR kódom.", + "paynow.mobileViewInstruction.step2": "Otvorte banku alebo platobnú aplikáciu PayNow.", + "paynow.mobileViewInstruction.step3": "Vyberte možnosť na nasnímanie QR kódu.", + "paynow.mobileViewInstruction.step4": "Vyberte možnosť nahrať QR kód a vyberte snímku obrazovky.", + "paynow.mobileViewInstruction.step5": "Dokončite transakciu." } \ No newline at end of file diff --git a/packages/server/translations/sl-SI.json b/packages/server/translations/sl-SI.json index deb36f7e12..1e2a731e6d 100644 --- a/packages/server/translations/sl-SI.json +++ b/packages/server/translations/sl-SI.json @@ -314,5 +314,11 @@ "payme.instructions.footnote": "Ne zapirajte te strani, preden je plačilo zaključeno.", "payByBankAISDD.disclaimer.header": "Uporabite Pay by Bank za takojšnje plačilo s katerega koli bančnega računa.", "payByBankAISDD.disclaimer.body": "S povezavo svojega bančnega računa dovoljujete bremenitev računa za vse zneske, ki jih dolgujete za uporabo naših storitev in/ali nakup naših izdelkov, dokler tega dovoljenja ne prekličete.", - "paymentMethodBrand.other": "Drugo" + "paymentMethodBrand.other": "Drugo", + "paynow.scanQrCode": "Za dokončanje plačila optično preberite kodo QR z aplikacijo PayNow.", + "paynow.mobileViewInstruction.step1": "Naredite posnetek zaslona s kodo QR.", + "paynow.mobileViewInstruction.step2": "Odprite banko PayNow ali aplikacijo za plačevanje.", + "paynow.mobileViewInstruction.step3": "Izberite možnost za skeniranje kode QR.", + "paynow.mobileViewInstruction.step4": "Izberite možnost za nalaganje QR in izberite posnetek zaslona.", + "paynow.mobileViewInstruction.step5": "Zaključite transakcijo." } \ No newline at end of file diff --git a/packages/server/translations/sv-SE.json b/packages/server/translations/sv-SE.json index f0e60fd9a6..19aaf7555e 100644 --- a/packages/server/translations/sv-SE.json +++ b/packages/server/translations/sv-SE.json @@ -312,5 +312,11 @@ "payme.instructions.footnote": "Stäng inte denna sida innan betalningen är slutförd", "payByBankAISDD.disclaimer.header": "Använd Pay by Bank och betala direkt från vilket bankkonto som helst.", "payByBankAISDD.disclaimer.body": "Genom att ansluta ditt bankkonto godkänner du att ditt konto debiteras eventuella belopp som du är skyldig för användning av våra tjänster och/eller köp av våra produkter, tills detta godkännande återkallas.", - "paymentMethodBrand.other": "andra" + "paymentMethodBrand.other": "andra", + "paynow.scanQrCode": "Skanna QR-koden med PayNow-appen för att slutföra betalningen", + "paynow.mobileViewInstruction.step1": "Ta en skärmdump av QR-koden.", + "paynow.mobileViewInstruction.step2": "Öppna PayNow-banken eller betalningsappen.", + "paynow.mobileViewInstruction.step3": "Välj alternativet för att skanna en QR-kod.", + "paynow.mobileViewInstruction.step4": "Välj alternativet att ladda upp en QR och välj skärmdumpen.", + "paynow.mobileViewInstruction.step5": "Slutför transaktionen." } \ No newline at end of file diff --git a/packages/server/translations/zh-CN.json b/packages/server/translations/zh-CN.json index f3d35d9c5b..82cb975a37 100644 --- a/packages/server/translations/zh-CN.json +++ b/packages/server/translations/zh-CN.json @@ -314,5 +314,11 @@ "payme.instructions.footnote": "付款完成前，请勿关闭此页面", "payByBankAISDD.disclaimer.header": "使用 Pay by Bank 从任何银行账户即时付款。", "payByBankAISDD.disclaimer.body": "关联您的银行账户，即表示您授权从您的账户中扣除因使用我们的服务和/或购买我们的产品而需支付的任何金额，直至该授权被撤销。", - "paymentMethodBrand.other": "其他" + "paymentMethodBrand.other": "其他", + "paynow.scanQrCode": "使用 PayNow 应用程序扫描二维码完成付款", + "paynow.mobileViewInstruction.step1": "截屏二维码。", + "paynow.mobileViewInstruction.step2": "打开 PayNow 银行或支付应用程序。", + "paynow.mobileViewInstruction.step3": "选择扫描二维码的选项。", + "paynow.mobileViewInstruction.step4": "选择上传二维码选项并选择截图。", + "paynow.mobileViewInstruction.step5": "完成交易。" } \ No newline at end of file diff --git a/packages/server/translations/zh-TW.json b/packages/server/translations/zh-TW.json index 3cf4cf33c5..f6f49c4ac4 100644 --- a/packages/server/translations/zh-TW.json +++ b/packages/server/translations/zh-TW.json @@ -314,5 +314,11 @@ "payme.instructions.footnote": "完成付款前，請勿關閉此頁面", "payByBankAISDD.disclaimer.header": "運用銀行支付方式透過任何銀行帳戶立即付款。", "payByBankAISDD.disclaimer.body": "連結您的銀行帳戶即表示您授權我們可以在您享有我們的服務和/或購買我們的產品時，向您的帳戶扣款對應的費用，直到授權被撤銷為止。", - "paymentMethodBrand.other": "其他" + "paymentMethodBrand.other": "其他", + "paynow.scanQrCode": "使用 PayNow 應用程式掃描 QR 代碼以完成付款", + "paynow.mobileViewInstruction.step1": "擷取QR 代碼螢幕畫面。", + "paynow.mobileViewInstruction.step2": "開啟 PayNow 銀行或支付應用程式。", + "paynow.mobileViewInstruction.step3": "選取掃描 QR 代碼的選項。", + "paynow.mobileViewInstruction.step4": "選擇上傳 QR 代碼的選項並選取此螢幕擷取畫面。", + "paynow.mobileViewInstruction.step5": "完成此交易。" } \ No newline at end of file From 96de787b2b774265b7e236f2aea9dea52dc9ff9d Mon Sep 17 00:00:00 2001 From: guilhermer Date: Mon, 14 Oct 2024 14:35:06 +0200 Subject: [PATCH 07/10] Fixed test --- packages/lib/src/components/PayNow/PayNow.test.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/lib/src/components/PayNow/PayNow.test.ts b/packages/lib/src/components/PayNow/PayNow.test.ts index c9603a8234..210bf91742 100644 --- a/packages/lib/src/components/PayNow/PayNow.test.ts +++ b/packages/lib/src/components/PayNow/PayNow.test.ts @@ -58,7 +58,7 @@ describe('PayNow', () => { // Triggers the execution of the setTimeout that makes the /status API request jest.runAllTimers(); - await screen.findByText(/Scan the QR code using the PayNow app to complete the payment/); + await screen.findAllByText(/Scan the QR code using the PayNow app to complete the payment/); const div = within(screen.queryByTestId('paynow-mobile-instructions')); div.getByText(/Take a screenshot of the QR code./); div.getByText(/Open the PayNow bank or payment app./); From 94d972942e741efbf2feef41905e08defd2f8909 Mon Sep 17 00:00:00 2001 From: guilhermer Date: Wed, 16 Oct 2024 17:21:40 +0200 Subject: [PATCH 08/10] adjusted timeline component and css fixes --- .../PayNow/components/PayNowInstructions.scss | 8 -- .../PayNow/components/PayNowInstructions.tsx | 7 +- .../PayNow/components/PayNowIntroduction.scss | 15 ---- .../PayNow/components/PayNowIntroduction.tsx | 36 ++++---- .../ContentSeparator/ContentSeparator.scss | 3 +- .../internal/QRLoader/QRLoader.scss | 6 +- .../components/internal/QRLoader/QRLoader.tsx | 8 +- .../internal/Timeline/Timeline.scss | 87 +++++++++++-------- .../components/internal/Timeline/Timeline.tsx | 33 ++++--- .../internal/Timeline/TimelineWrapper.scss | 8 ++ .../internal/Timeline/TimelineWrapper.tsx | 8 ++ .../src/components/internal/Timeline/index.ts | 3 +- packages/lib/src/utils/useIsMobile.ts | 25 ++++++ .../stories/internals/Timeline.stories.tsx | 24 +++++ 14 files changed, 176 insertions(+), 95 deletions(-) create mode 100644 packages/lib/src/components/internal/Timeline/TimelineWrapper.scss create mode 100644 packages/lib/src/components/internal/Timeline/TimelineWrapper.tsx create mode 100644 packages/lib/src/utils/useIsMobile.ts create mode 100644 packages/lib/storybook/stories/internals/Timeline.stories.tsx diff --git a/packages/lib/src/components/PayNow/components/PayNowInstructions.scss b/packages/lib/src/components/PayNow/components/PayNowInstructions.scss index 32974c783a..174ae7ff5e 100644 --- a/packages/lib/src/components/PayNow/components/PayNowInstructions.scss +++ b/packages/lib/src/components/PayNow/components/PayNowInstructions.scss @@ -9,13 +9,5 @@ } .adyen-checkout-paynow__instructions > p { - margin-top: 24px; margin-bottom: 0; } - - -@media (min-width: 768px) { - .adyen-checkout-paynow__instructions { - display: none; - } -} diff --git a/packages/lib/src/components/PayNow/components/PayNowInstructions.tsx b/packages/lib/src/components/PayNow/components/PayNowInstructions.tsx index 41b84f0bf5..eeee0ac284 100644 --- a/packages/lib/src/components/PayNow/components/PayNowInstructions.tsx +++ b/packages/lib/src/components/PayNow/components/PayNowInstructions.tsx @@ -2,12 +2,13 @@ import { h } from 'preact'; import { useCoreContext } from '../../../core/Context/CoreProvider'; import ContentSeparator from '../../internal/ContentSeparator'; import './PayNowInstructions.scss'; +import { useIsMobile } from '../../../utils/useIsMobile'; -/** - * Instructions for PayNow are rendered only on mobile view. - */ const PayNowInstructions = () => { const { i18n } = useCoreContext(); + const { isMobileScreenSize } = useIsMobile(); + + if (!isMobileScreenSize) return; return (
diff --git a/packages/lib/src/components/PayNow/components/PayNowIntroduction.scss b/packages/lib/src/components/PayNow/components/PayNowIntroduction.scss index d423836e25..cdec4c3c63 100644 --- a/packages/lib/src/components/PayNow/components/PayNowIntroduction.scss +++ b/packages/lib/src/components/PayNow/components/PayNowIntroduction.scss @@ -7,18 +7,3 @@ color: token(color-label-primary); text-align: center; } - -.adyen-checkout-paynow__introduction--desktop { - display: none; -} - -@media (min-width: 768px) { - .adyen-checkout-paynow__introduction--desktop { - display: block; - } - - .adyen-checkout-paynow__introduction--mobile { - display: none; - } -} - diff --git a/packages/lib/src/components/PayNow/components/PayNowIntroduction.tsx b/packages/lib/src/components/PayNow/components/PayNowIntroduction.tsx index 630c8f8e54..fdeae2d486 100644 --- a/packages/lib/src/components/PayNow/components/PayNowIntroduction.tsx +++ b/packages/lib/src/components/PayNow/components/PayNowIntroduction.tsx @@ -1,28 +1,32 @@ import { h } from 'preact'; import { useCoreContext } from '../../../core/Context/CoreProvider'; -import Timeline from '../../internal/Timeline'; import './PayNowIntroduction.scss'; +import { TimelineWrapper, Timeline } from '../../internal/Timeline'; +import { useIsMobile } from '../../../utils/useIsMobile'; const PayNowIntroduction = () => { const { i18n } = useCoreContext(); + const { isMobileScreenSize } = useIsMobile(); - const instructions = [ - i18n.get('paynow.mobileViewInstruction.step1'), - i18n.get('paynow.mobileViewInstruction.step2'), - i18n.get('paynow.mobileViewInstruction.step3'), - i18n.get('paynow.mobileViewInstruction.step4'), - i18n.get('paynow.mobileViewInstruction.step5') - ]; + if (isMobileScreenSize) { + const instructions = [ + i18n.get('paynow.mobileViewInstruction.step1'), + i18n.get('paynow.mobileViewInstruction.step2'), + i18n.get('paynow.mobileViewInstruction.step3'), + i18n.get('paynow.mobileViewInstruction.step4'), + i18n.get('paynow.mobileViewInstruction.step5') + ]; - return ( -
-
{i18n.get('paynow.scanQrCode')}
- -
- + return ( +
+ + +
-
- ); + ); + } + + return
{i18n.get('paynow.scanQrCode')}
; }; export { PayNowIntroduction }; diff --git a/packages/lib/src/components/internal/ContentSeparator/ContentSeparator.scss b/packages/lib/src/components/internal/ContentSeparator/ContentSeparator.scss index 7ebe78edef..eaa5722e52 100644 --- a/packages/lib/src/components/internal/ContentSeparator/ContentSeparator.scss +++ b/packages/lib/src/components/internal/ContentSeparator/ContentSeparator.scss @@ -8,7 +8,8 @@ align-items: center; color: token(color-label-primary); white-space: nowrap; - font-size: 13px; + text-transform: capitalize; + font-size: token(text-body-font-size); line-height: token(text-caption-line-height); &::after, diff --git a/packages/lib/src/components/internal/QRLoader/QRLoader.scss b/packages/lib/src/components/internal/QRLoader/QRLoader.scss index ecbc5bcbb7..3c479ae48e 100644 --- a/packages/lib/src/components/internal/QRLoader/QRLoader.scss +++ b/packages/lib/src/components/internal/QRLoader/QRLoader.scss @@ -3,6 +3,7 @@ .adyen-checkout__qr-loader { background: token(color-background-primary); padding: token(spacer-110); + padding-bottom: token(spacer-090); border: token(border-width-s) solid token(color-outline-secondary); border-radius: token(border-radius-m); display: flex; @@ -75,7 +76,7 @@ } .adyen-checkout__qr-loader__countdown { - font-size: token(text-body-font-size); + font-size: token(text-caption-font-size); text-align: center; } @@ -93,10 +94,11 @@ } .adyen-checkout__qr-loader__instructions { + max-width: 300px; color: token(color-label-tertiary); font-size: token(text-subtitle-font-size); line-height: 1.5; - margin-top: token(spacer-100); + margin-top: token(spacer-040); } .adyen-checkout__qr-loader__actions { diff --git a/packages/lib/src/components/internal/QRLoader/QRLoader.tsx b/packages/lib/src/components/internal/QRLoader/QRLoader.tsx index c2bfc9e150..eaf660c187 100644 --- a/packages/lib/src/components/internal/QRLoader/QRLoader.tsx +++ b/packages/lib/src/components/internal/QRLoader/QRLoader.tsx @@ -240,10 +240,10 @@ class QRLoader extends Component {  {timeToPayString[1]}
- {typeof this.props.instructions === 'string' ? ( -
{i18n.get(this.props.instructions)}
- ) : ( - this.props.instructions?.() + {this.props.instructions && ( +
+ {typeof this.props.instructions === 'string' ? i18n.get(this.props.instructions) : this.props.instructions?.()} +
)} {this.props.copyBtn && ( diff --git a/packages/lib/src/components/internal/Timeline/Timeline.scss b/packages/lib/src/components/internal/Timeline/Timeline.scss index d45c712fb6..57ab565d49 100644 --- a/packages/lib/src/components/internal/Timeline/Timeline.scss +++ b/packages/lib/src/components/internal/Timeline/Timeline.scss @@ -1,56 +1,73 @@ @import 'styles/variable-generator'; .adyen-checkout-timeline { - text-align: left; - list-style: none; - margin: 0; - padding: 0; - border: 0; - vertical-align: baseline; + scrollbar-color: #c0c5cc transparent; } -.adyen-checkout-timeline__item-description { - margin: 0; - padding: 0; - border: 0; +.adyen-checkout-timeline__items { + all: unset; } -.adyen-checkout-timeline__item { +.adyen-checkout-timeline-item { + scrollbar-color: var(--b-color-background-quaternary) transparent; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + list-style-type: none; + max-width: 500px; + &:last-child { - .adyen-checkout-timeline__item-content { - &::before { - display: none; - } + .adyen-checkout-timeline-item__separator { + display: none; + } + + .adyen-checkout-timeline-item__content { + padding-bottom: 0; } } } -.adyen-checkout-timeline__item-content { +.adyen-checkout-timeline-item__row { + display: flex; + gap: token(spacer-070); +} + +.adyen-checkout-timeline-item__marker { + display: flex; + flex-flow: column; + width: 100%; + max-width: token(spacer-070); + margin-top: token(spacer-010); +} + +.adyen-checkout-timeline-item__separator { + flex-grow: 1; position: relative; - padding-left: token(spacer-090); - padding-bottom: token(spacer-090); - font-size: token(text-body-font-size); &::before { + background-color: #c9cdd3; content: ""; - position: absolute; - right: 100%; - top: 0; height: 100%; + left: 50%; + position: absolute; + transform: translate(-50%); width: 1px; - background-color: token(color-separator-primary); } +} - &::after { - content: ""; - position: absolute; - left: -9px; - top: 0; - width: 17px; - height: 17px; - z-index: 1; - background-color: token(color-background-primary); - border: 1px solid token(color-separator-primary); - border-radius: 50%; - } +.adyen-checkout-timeline-item__content { + align-items: flex-start; + display: flex; + flex-direction: column; + flex-grow: 1; + padding-bottom: token(spacer-060); +} + +.adyen-checkout-timeline-item__title { + font-size: token(text-caption-font-size); + font-weight: token(text-body-font-weight); + line-height: token(text-body-line-height); + letter-spacing: 0; + text-align: left; + color: token(color-label-primary); + margin-bottom: token(spacer-010); } diff --git a/packages/lib/src/components/internal/Timeline/Timeline.tsx b/packages/lib/src/components/internal/Timeline/Timeline.tsx index d74fe6a429..14852c12d5 100644 --- a/packages/lib/src/components/internal/Timeline/Timeline.tsx +++ b/packages/lib/src/components/internal/Timeline/Timeline.tsx @@ -11,16 +11,29 @@ const Timeline = ({ instructions }: Timeline) => { } return ( -
    - {instructions.map((value, index) => ( -
  1. -
    -

    {value}

    -
    -
    2. - ))} -
+
+
    + {instructions.map((value, index) => ( +
  1. +
    + +
    +
    {value}
    +
    +
    +
    2. + ))} +
+
); }; -export default Timeline; +export { Timeline }; diff --git a/packages/lib/src/components/internal/Timeline/TimelineWrapper.scss b/packages/lib/src/components/internal/Timeline/TimelineWrapper.scss new file mode 100644 index 0000000000..acecdc6e1c --- /dev/null +++ b/packages/lib/src/components/internal/Timeline/TimelineWrapper.scss @@ -0,0 +1,8 @@ +@import 'styles/variable-generator'; + +.adyen-checkout-timeline-wrapper { + padding: 16px; + border-radius: 8px; + max-width: 300px; + background-color: token(color-background-secondary); +} diff --git a/packages/lib/src/components/internal/Timeline/TimelineWrapper.tsx b/packages/lib/src/components/internal/Timeline/TimelineWrapper.tsx new file mode 100644 index 0000000000..7b5aff3f8c --- /dev/null +++ b/packages/lib/src/components/internal/Timeline/TimelineWrapper.tsx @@ -0,0 +1,8 @@ +import { h } from 'preact'; +import './TimelineWrapper.scss'; + +const TimelineWrapper = ({ children }) => { + return
{children}
; +}; + +export { TimelineWrapper }; diff --git a/packages/lib/src/components/internal/Timeline/index.ts b/packages/lib/src/components/internal/Timeline/index.ts index 1f0b63e018..e4bfcc24a2 100644 --- a/packages/lib/src/components/internal/Timeline/index.ts +++ b/packages/lib/src/components/internal/Timeline/index.ts @@ -1 +1,2 @@ -export { default } from './Timeline'; +export * from './TimelineWrapper'; +export * from './Timeline'; diff --git a/packages/lib/src/utils/useIsMobile.ts b/packages/lib/src/utils/useIsMobile.ts new file mode 100644 index 0000000000..c5a8a2249d --- /dev/null +++ b/packages/lib/src/utils/useIsMobile.ts @@ -0,0 +1,25 @@ +import { useCallback, useEffect, useState } from 'preact/hooks'; + +function isTabletWidthOrSmaller() { + return window.matchMedia('(max-width: 1024px)').matches; +} + +const useIsMobile = () => { + const [isMobileScreenSize, setIsMobileScreenSize] = useState(isTabletWidthOrSmaller()); + + const handleWindowResize = useCallback(() => { + const isMobileScreenSize = isTabletWidthOrSmaller(); + setIsMobileScreenSize(isMobileScreenSize); + }, []); + + useEffect(() => { + window.addEventListener('resize', handleWindowResize); + return () => { + window.removeEventListener('resize', handleWindowResize); + }; + }, [handleWindowResize]); + + return { isMobileScreenSize }; +}; + +export { useIsMobile }; diff --git a/packages/lib/storybook/stories/internals/Timeline.stories.tsx b/packages/lib/storybook/stories/internals/Timeline.stories.tsx new file mode 100644 index 0000000000..1e3618e676 --- /dev/null +++ b/packages/lib/storybook/stories/internals/Timeline.stories.tsx @@ -0,0 +1,24 @@ +import { Meta, StoryObj } from '@storybook/preact'; +import Timeline from '../../../src/components/internal/Timeline'; + +const meta: Meta = { + title: 'Internals/Timeline', + component: Timeline +}; + +export const Default: StoryObj = { + render: () => { + const instructions = [ + 'Open the banking app', + "Enter your email, ID, name, surname, fax number, grandmother's name, postal code, secret word", + 'Wait for the OTP', + 'Complete the payment in the app and wait for the confirmation here' + ]; + return ; + }, + parameters: { + controls: { exclude: ['useSessions', 'countryCode', 'shopperLocale', 'amount', 'showPayButton'] } + } +}; + +export default meta; From cf9b6be61333cc61303f8e98adae532dbf7badce Mon Sep 17 00:00:00 2001 From: guilhermer Date: Thu, 17 Oct 2024 15:22:50 +0200 Subject: [PATCH 09/10] fixed test --- .../lib/src/components/PayNow/PayNow.test.ts | 13 +++++++- .../PayNow/components/PayNowIntroduction.tsx | 30 +++++++++---------- 2 files changed, 27 insertions(+), 16 deletions(-) diff --git a/packages/lib/src/components/PayNow/PayNow.test.ts b/packages/lib/src/components/PayNow/PayNow.test.ts index 210bf91742..bc58e748f6 100644 --- a/packages/lib/src/components/PayNow/PayNow.test.ts +++ b/packages/lib/src/components/PayNow/PayNow.test.ts @@ -30,6 +30,14 @@ describe('PayNow', () => { }); test('should render mobile instructions', async () => { + // Mocks matchMedia to return 'matches: true' when checking (max-width: 1024px) + Object.defineProperty(window, 'matchMedia', { + writable: true, + value: jest.fn().mockImplementation(() => ({ + matches: true + })) + }); + jest.useFakeTimers(); const srPanel = mock(); @@ -59,11 +67,14 @@ describe('PayNow', () => { jest.runAllTimers(); await screen.findAllByText(/Scan the QR code using the PayNow app to complete the payment/); - const div = within(screen.queryByTestId('paynow-mobile-instructions')); + + const div = within(screen.queryByTestId('paynow-introduction')); div.getByText(/Take a screenshot of the QR code./); div.getByText(/Open the PayNow bank or payment app./); div.getByText(/Select the option to scan a QR code./); div.getByText(/Choose the option to upload a QR and select the screenshot./); div.getByText(/Complete the transaction./); + + jest.resetAllMocks(); }); }); diff --git a/packages/lib/src/components/PayNow/components/PayNowIntroduction.tsx b/packages/lib/src/components/PayNow/components/PayNowIntroduction.tsx index fdeae2d486..2bd0e34080 100644 --- a/packages/lib/src/components/PayNow/components/PayNowIntroduction.tsx +++ b/packages/lib/src/components/PayNow/components/PayNowIntroduction.tsx @@ -8,25 +8,25 @@ const PayNowIntroduction = () => { const { i18n } = useCoreContext(); const { isMobileScreenSize } = useIsMobile(); - if (isMobileScreenSize) { - const instructions = [ - i18n.get('paynow.mobileViewInstruction.step1'), - i18n.get('paynow.mobileViewInstruction.step2'), - i18n.get('paynow.mobileViewInstruction.step3'), - i18n.get('paynow.mobileViewInstruction.step4'), - i18n.get('paynow.mobileViewInstruction.step5') - ]; + const instructions = [ + i18n.get('paynow.mobileViewInstruction.step1'), + i18n.get('paynow.mobileViewInstruction.step2'), + i18n.get('paynow.mobileViewInstruction.step3'), + i18n.get('paynow.mobileViewInstruction.step4'), + i18n.get('paynow.mobileViewInstruction.step5') + ]; - return ( -
+ return ( +
+ {isMobileScreenSize ? ( -
- ); - } - - return
{i18n.get('paynow.scanQrCode')}
; + ) : ( + i18n.get('paynow.scanQrCode') + )} +
+ ); }; export { PayNowIntroduction }; From d6ed55bbaf8cfaa5da139a91ab399fdb299fec12 Mon Sep 17 00:00:00 2001 From: guilhermer Date: Fri, 18 Oct 2024 12:03:33 +0200 Subject: [PATCH 10/10] applied review comments --- packages/lib/src/components/internal/Timeline/Timeline.scss | 6 +++--- .../lib/storybook/stories/internals/Timeline.stories.tsx | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/lib/src/components/internal/Timeline/Timeline.scss b/packages/lib/src/components/internal/Timeline/Timeline.scss index 57ab565d49..2d5d86e800 100644 --- a/packages/lib/src/components/internal/Timeline/Timeline.scss +++ b/packages/lib/src/components/internal/Timeline/Timeline.scss @@ -1,7 +1,7 @@ @import 'styles/variable-generator'; .adyen-checkout-timeline { - scrollbar-color: #c0c5cc transparent; + scrollbar-color: token(color-background-quaternary) transparent; } .adyen-checkout-timeline__items { @@ -9,7 +9,7 @@ } .adyen-checkout-timeline-item { - scrollbar-color: var(--b-color-background-quaternary) transparent; + scrollbar-color: var(color-background-quaternary) transparent; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; list-style-type: none; @@ -44,7 +44,7 @@ position: relative; &::before { - background-color: #c9cdd3; + background-color: token(color-separator-secondary); content: ""; height: 100%; left: 50%; diff --git a/packages/lib/storybook/stories/internals/Timeline.stories.tsx b/packages/lib/storybook/stories/internals/Timeline.stories.tsx index 1e3618e676..49ff2b2e88 100644 --- a/packages/lib/storybook/stories/internals/Timeline.stories.tsx +++ b/packages/lib/storybook/stories/internals/Timeline.stories.tsx @@ -1,5 +1,5 @@ import { Meta, StoryObj } from '@storybook/preact'; -import Timeline from '../../../src/components/internal/Timeline'; +import { Timeline } from '../../../src/components/internal/Timeline'; const meta: Meta = { title: 'Internals/Timeline',