Merge remote-tracking branch 'origin/v6' into bento-style-improvements

Adyen · Jan 31, 2024 · 9deb1de · 9deb1de
2 parents e1b67dc + a04320c
commit 9deb1de
Show file tree

Hide file tree

Showing 166 changed files with 6,618 additions and 1,443 deletions.
diff --git a/.changeset/cool-hotels-remember.md b/.changeset/cool-hotels-remember.md
diff --git a/.github/workflows/validate-remote-assets.yml b/.github/workflows/validate-remote-assets.yml
@@ -32,7 +32,7 @@ jobs:
 
       - name: Comment PR that request failed
         if: failure()
-        uses: actions/github-script@v6.4.1
+        uses: actions/github-script@v7.0.1
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
           script: |
@@ -42,7 +42,7 @@ jobs:
 
       - name: Comment PR that request succeeded
         if: success()
-        uses: actions/github-script@v6.4.1
+        uses: actions/github-script@v7.0.1
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
           script: |

diff --git a/package.json b/package.json
@@ -39,6 +39,6 @@
         "@changesets/cli": "^2.26.1",
         "@changesets/get-github-info": "^0.5.2",
         "dotenv": "^16.0.3",
-        "prettier": "2.8.8"
+        "prettier": "3.1.1"
     }
 }
diff --git a/packages/e2e-playwright/package.json b/packages/e2e-playwright/package.json
@@ -26,6 +26,6 @@
     "webpack-dev-server": "4.15.1"
   },
   "dependencies": {
-    "@adyen/adyen-web": "5.53.3"
+    "@adyen/adyen-web": "5.56.1"
   }
 }
diff --git a/packages/e2e/package.json b/packages/e2e/package.json
@@ -41,6 +41,6 @@
         "whatwg-fetch": "^3.6.2"
     },
     "dependencies": {
-        "@adyen/adyen-web": "5.53.3"
+        "@adyen/adyen-web": "5.56.1"
     }
 }
diff --git a/packages/e2e/tests/utils/commonUtils.js b/packages/e2e/tests/utils/commonUtils.js
@@ -68,6 +68,7 @@ export const deleteDigitsFromIFrame = async (t, iframeSelector, iFrameNum, iFram
 };
 
 export const checkIframeInputContainsValue = async (t, iframeSelector, iFrameNum, iFrameInputSelector, valueToCheck) => {
+    // prettier-ignore
     return t
         .switchToMainWindow()
         .switchToIframe(iframeSelector.nth(iFrameNum))

diff --git a/packages/lib/CHANGELOG.md b/packages/lib/CHANGELOG.md
@@ -1,5 +1,67 @@
 # @adyen/adyen-web
 
+## 5.56.1
+
+### Patch Changes
+
+-   For the regular card payment, in case of a zero-auth transaction, the pay button label is changed to `Save details`, and the `Save for my next payment` checkbox is removed. ([#2514](https://github.com/Adyen/adyen-web/pull/2514))
+
+    The drop-in component shows `Details saved` as the success message for such transaction.
+
+## 5.56.0
+
+### Minor Changes
+
+-   Add support for the PayMe payment method. ([#2476](https://github.com/Adyen/adyen-web/pull/2476))
+
+### Patch Changes
+
+-   Improve the payment status check call for QR payments. ([#2506](https://github.com/Adyen/adyen-web/pull/2506))
+
+-   Fix incorrect grammar German pay button ([#2505](https://github.com/Adyen/adyen-web/pull/2505))
+
+-   update sessionData after /setup call ([#2504](https://github.com/Adyen/adyen-web/pull/2504))
+
+-   Detect when the value of a data-cse attribute is not supported, and don't create a SF for it ([#2495](https://github.com/Adyen/adyen-web/pull/2495))
+
+## 5.55.1
+
+### Patch Changes
+
+-   Loading the logo images properly when handling qrCode/await actions ([#2490](https://github.com/Adyen/adyen-web/pull/2490))
+
+## 5.55.0
+
+### Minor Changes
+
+-   Bumping sf version to 4.8.0 which includes a more comprehensive startup log (to help with debugging) ([#2488](https://github.com/Adyen/adyen-web/pull/2488))
+
+### Patch Changes
+
+-   Renaming detectInIframe to the more accurate, but lengthy, detectInIframeInSameOrigin. ([#2475](https://github.com/Adyen/adyen-web/pull/2475))
+
+    Now the functionality only considers itself to be running in an iframe _if_ it is possible to access the parent domain and thus be able to redirect the top, parent, window
+
+## 5.54.0
+
+### Minor Changes
+
+-   feature: adds new onAddressSelected to fill data when an item is selected in AddressSearch ([#2406](https://github.com/Adyen/adyen-web/pull/2406))
+
+-   Click to Pay - Enabling MC/Visa to drop cookies if the shopper gives consent ([#2409](https://github.com/Adyen/adyen-web/pull/2409))
+
+-   Click to Pay - Replacing loading gif by animated SVGs ([#2435](https://github.com/Adyen/adyen-web/pull/2435))
+
+### Patch Changes
+
+-   For all PaymentMethodItems we were adding a class `adyen-checkout__payment-method--{fundingSource}` (where fundingSource was either "credit" or "debit") ([#2465](https://github.com/Adyen/adyen-web/pull/2465))
+
+    This is meant to be a Card PM specific class to indicate, in the paymentMethods list, whether the card is a credit or debit card.
+
+-   Fixed Klarna B2B logo for Drop-in ([#2458](https://github.com/Adyen/adyen-web/pull/2458))
+
+-   Pass the `browserInfo` in the `state.data` for the Redirect payments, in order to fix the mobile web integration for some redirect payments. ([#2469](https://github.com/Adyen/adyen-web/pull/2469))
+
 ## 5.53.3
 
 ### Patch Changes

diff --git a/packages/lib/config/setupTests.ts b/packages/lib/config/setupTests.ts
@@ -1,4 +1,5 @@
 import { configure } from 'enzyme';
+import '@testing-library/jest-dom/jest-globals';
 import '@testing-library/jest-dom';
 import Adapter from 'enzyme-adapter-preact-pure';
 import './testMocks/matchMedia';

diff --git a/packages/lib/package.json b/packages/lib/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@adyen/adyen-web",
-    "version": "5.53.3",
+    "version": "5.56.1",
     "license": "MIT",
     "homepage": "https://docs.adyen.com/checkout",
     "type": "module",
@@ -87,39 +87,41 @@
         "@rollup/plugin-replace": "5.0.2",
         "@rollup/plugin-terser": "0.4.3",
         "@size-limit/preset-big-lib": "9.0.0",
-        "@storybook/addon-a11y": "7.4.6",
-        "@storybook/addon-essentials": "7.4.6",
-        "@storybook/manager-api": "7.4.6",
-        "@storybook/preact": "7.4.6",
-        "@storybook/preact-vite": "7.4.6",
+        "@storybook/addon-a11y": "^7.6.6",
+        "@storybook/addon-essentials": "^7.6.6",
+        "@storybook/manager-api": "^7.6.6",
+        "@storybook/preact": "^7.6.6",
+        "@storybook/preact-vite": "^7.6.6",
         "@swc/core": "1.3.86",
-        "@testing-library/jest-dom": "6.1.4",
+        "@testing-library/jest-dom": "^6.2.0",
         "@testing-library/preact": "3.2.3",
         "@testing-library/preact-hooks": "1.1.0",
         "@testing-library/user-event": "14.5.1",
-        "@types/jest": "29.5.10",
+        "@types/jest": "^29.5.11",
         "@typescript-eslint/eslint-plugin": "6.7.0",
         "@typescript-eslint/parser": "6.7.0",
+        "add": "^2.0.6",
         "autoprefixer": "10.4.16",
         "cross-env": "^7.0.3",
         "cssnano": "6.0.1",
         "dotenv": "^16.0.3",
         "enzyme": "3.11.0",
         "enzyme-adapter-preact-pure": "4.1.0",
-        "eslint": "8.52.0",
+        "eslint": "8.53.0",
         "eslint-plugin-import": "^2.26.0",
         "eslint-plugin-jsx-a11y": "^6.6.1",
         "eslint-plugin-react": "^7.31.8",
-        "eslint-plugin-storybook": "0.6.14",
+        "eslint-plugin-storybook": "0.6.15",
         "eslint-plugin-testing-library": "6.2.0",
         "husky": "^8.0.1",
         "jest": "29.7.0",
         "jest-environment-jsdom": "29.7.0",
         "jest-mock-extended": "3.0.5",
-        "lint-staged": "^13.0.3",
+        "lint-staged": "^15.0.0",
         "postcss": "8.4.31",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "remove": "^0.1.5",
         "rollup": "3.25.2",
         "rollup-plugin-dts": "6.0.2",
         "rollup-plugin-postcss": "4.0.2",
@@ -128,15 +130,16 @@
         "rollup-plugin-visualizer": "5.9.2",
         "sass": "1.69.5",
         "size-limit": "^9.0.0",
-        "storybook": "^7.4.6",
+        "storybook": "^7.6.6",
         "stylelint": "15.11.0",
         "stylelint-config-standard-scss": "7.0.1",
         "ts-jest": "^29.1.1",
         "tslib": "2.6.2",
         "typescript": "5.2.2",
-        "vite": "4.5.0",
+        "vite": "4.5.1",
         "vite-plugin-stylelint": "^4.3.0",
-        "whatwg-fetch": "^3.6.19"
+        "whatwg-fetch": "^3.6.19",
+        "yarn": "^1.22.21"
     },
     "dependencies": {
         "@adyen/bento-design-tokens": "0.5.4",

diff --git a/packages/lib/src/components/ANCV/ANCV.tsx b/packages/lib/src/components/ANCV/ANCV.tsx
@@ -40,7 +40,7 @@ export class ANCVElement extends UIElement<ANCVConfiguration> {
      * Called when the /paymentDetails endpoint returns PartiallyAuthorised. The /paymentDetails happens once the /status
      * returns PartiallyAuthorised
      *
-     * @param order
+     * @param order -
      */
     protected handleOrder = ({ order }: PaymentResponseData) => {
         this.updateParent({ order });

diff --git a/...ages/lib/src/components/Card/Card.test.ts → ...ges/lib/src/components/Card/Card.test.tsx b/...ages/lib/src/components/Card/Card.test.ts → ...ges/lib/src/components/Card/Card.test.tsx
@@ -1,4 +1,9 @@
+import { h } from 'preact';
 import { CardElement } from './Card';
+import { render, screen } from '@testing-library/preact';
+import CoreProvider from '../../core/Context/CoreProvider';
+import Language from '../../language';
+import { Resources } from '../../core/Context/Resources';
 
 describe('Card', () => {
     describe('formatProps', function () {
@@ -12,6 +17,40 @@ describe('Card', () => {
             const card = new CardElement({ core: global.core, countryCode: 'KR' });
             expect(card.props.countryCode).toEqual('kr');
         });
+
+        test('should return false for enableStoreDetails in case of zero-auto transaction', () => {
+            const card = new CardElement({ core: global.core, amount: { value: 0, currency: 'eur' }, enableStoreDetails: true });
+            expect(card.props.enableStoreDetails).toEqual(false);
+        });
+    });
+
+    describe('payButton', () => {
+        describe('Zero auth transaction', () => {
+            const i18n = new Language('en-US');
+            const props = { core: global.core, amount: { value: 0, currency: 'eur' }, enableStoreDetails: true, i18n };
+            const customRender = (ui: h.JSX.Element) => {
+                return render(
+                    // @ts-ignore ignore
+                    <CoreProvider i18n={i18n} loadingContext="test" resources={new Resources()}>
+                        {ui}
+                    </CoreProvider>
+                );
+            };
+
+            test('should show the label "Save details" for the regular card', async () => {
+                const card = new CardElement(props);
+                // @ts-ignore ignore
+                customRender(card.payButton());
+                expect(await screen.findByRole('button', { name: 'Save details' })).toBeTruthy();
+            });
+
+            test('should show the label "Confirm preauthorization" for the stored card', async () => {
+                const card = new CardElement({ ...props, storedPaymentMethodId: 'test' });
+                // @ts-ignore ignore
+                customRender(card.payButton());
+                expect(await screen.findByRole('button', { name: 'Confirm preauthorization' })).toBeTruthy();
+            });
+        });
     });
 
     describe('get data', () => {

diff --git a/packages/lib/src/components/Card/Card.tsx b/packages/lib/src/components/Card/Card.tsx
@@ -1,5 +1,4 @@
 import { h } from 'preact';
-import { UIElement } from '../internal/UIElement/UIElement';
 import CardInput from './components/CardInput';
 import CoreProvider from '../../core/Context/CoreProvider';
 import collectBrowserInfo from '../../utils/browserInfo';
@@ -14,6 +13,9 @@ import ClickToPayWrapper from './components/ClickToPayWrapper';
 import SRPanelProvider from '../../core/Errors/SRPanelProvider';
 import { TxVariants } from '../tx-variants';
 import { UIElementStatus } from '../internal/UIElement/types';
+import UIElement from '../internal/UIElement';
+import PayButton from '../internal/PayButton';
+import { PayButtonProps } from '../internal/PayButton/PayButton';
 
 export class CardElement extends UIElement<CardConfiguration> {
     public static type = TxVariants.scheme;
@@ -55,6 +57,9 @@ export class CardElement extends UIElement<CardConfiguration> {
     };
 
     formatProps(props: CardConfiguration) {
+        const isZeroAuth = props.amount?.value === 0;
+        const enableStoreDetails = isZeroAuth ? false : props.session?.configuration?.enableStoreDetails || props.enableStoreDetails;
+
         return {
             ...props,
             // Mismatch between hasHolderName & holderNameRequired which can mean card can never be valid
@@ -77,7 +82,7 @@ export class CardElement extends UIElement<CardConfiguration> {
             icon: props.icon || props.configuration?.icon,
             // installmentOptions of a session should be used before falling back to the merchant configuration
             installmentOptions: props.session?.configuration?.installmentOptions || props.installmentOptions,
-            enableStoreDetails: props.session?.configuration?.enableStoreDetails || props.enableStoreDetails,
+            enableStoreDetails,
             /**
              * Click to Pay configuration
              * - If email is set explicitly in the configuration, then it can override the one used in the session creation
@@ -202,6 +207,20 @@ export class CardElement extends UIElement<CardConfiguration> {
     get browserInfo() {
         return collectBrowserInfo();
     }
+    // Override
+    protected payButton = (props: PayButtonProps) => {
+        const isZeroAuth = this.props.amount?.value === 0;
+        const isStoredCard = this.props.storedPaymentMethodId?.length > 0;
+        return (
+            <PayButton
+                {...props}
+                amount={this.props.amount}
+                secondaryAmount={this.props.secondaryAmount}
+                label={isZeroAuth && !isStoredCard ? this.props.i18n.get('payButton.saveDetails') : ''}
+                onClick={this.submit}
+            />
+        );
+    };
 
     private renderCardInput(isCardPrimaryInput = true): h.JSX.Element {
         return (

diff --git a/packages/lib/src/components/Card/components/CardInput/CardInput.tsx b/packages/lib/src/components/Card/components/CardInput/CardInput.tsx
@@ -491,6 +491,8 @@ const CardInput = (props: CardInputProps) => {
                             partialAddressSchema={partialAddressSchema}
                             handleAddress={handleAddress}
                             onAddressLookup={props.onAddressLookup}
+                            onAddressSelected={props.onAddressSelected}
+                            addressSearchDebounceMs={props.addressSearchDebounceMs}
                             //
                             iOSFocusedField={iOSFocusedField}
                         />

diff --git a/packages/lib/src/components/Card/components/CardInput/components/CardFieldsWrapper.tsx b/packages/lib/src/components/Card/components/CardInput/components/CardFieldsWrapper.tsx
@@ -45,6 +45,8 @@ export const CardFieldsWrapper = ({
     setAddressRef,
     partialAddressSchema,
     onAddressLookup,
+    onAddressSelected,
+    addressSearchDebounceMs,
     // For this comp (props passed through from CardInput)
     amount,
     billingAddressRequired,
@@ -161,6 +163,8 @@ export const CardFieldsWrapper = ({
                     iOSFocusedField={iOSFocusedField}
                     onAddressLookup={onAddressLookup}
                     showContextualElement={showContextualElement}
+                    onAddressSelected={onAddressSelected}
+                    addressSearchDebounceMs={addressSearchDebounceMs}
                 />
             )}
 

diff --git a/packages/lib/src/components/Card/components/CardInput/handlers.ts b/packages/lib/src/components/Card/components/CardInput/handlers.ts
@@ -8,7 +8,6 @@ import { CbObjOnFocus } from '../../../internal/SecuredFields/lib/types';
 export const setFocusOnFirstField = (isValidating, sfp, fieldToFocus) => {
     if (isValidating) {
         // If not a cardInput related securedField - find field and set focus on it
-        // if (!ALL_RELATED_SECURED_FIELDS.includes(who)) {
         if (!CREDIT_CARD_SF_FIELDS.includes(fieldToFocus)) {
             setFocusOnNonSF(fieldToFocus, sfp);
         } else {

diff --git a/packages/lib/src/components/Card/components/CardInput/types.ts b/packages/lib/src/components/Card/components/CardInput/types.ts
@@ -11,7 +11,7 @@ import { SRPanel } from '../../../../core/Errors/SRPanel';
 import Analytics from '../../../../core/Analytics';
 import RiskElement from '../../../../core/RiskModule';
 import { DisclaimerMsgObject } from '../../../internal/DisclaimerMessage/DisclaimerMessage';
-import { OnAddressLookupType } from '../../../internal/Address/components/AddressSearch';
+import { OnAddressLookupType, OnAddressSelectedType } from '../../../internal/Address/components/AddressSearch';
 import { ComponentMethodsRef } from '../../../internal/UIElement/types';
 import { AddressData, PaymentAmount } from '../../../../types/global-types';
 
@@ -114,6 +114,8 @@ export interface CardInputProps {
     onFocus?: (e) => {};
     onLoad?: () => {};
     onAddressLookup?: OnAddressLookupType;
+    onAddressSelected?: OnAddressSelectedType;
+    addressSearchDebounceMs?: number;
     payButton?: (obj) => {};
     placeholders?: Placeholders;
     positionHolderNameOnTop?: boolean;

diff --git a/packages/lib/src/components/CustomCard/CustomCard.tsx b/packages/lib/src/components/CustomCard/CustomCard.tsx
@@ -94,10 +94,6 @@ export class CustomCard extends UIElement<CustomCardConfiguration> {
         return !!this.state.isValid;
     }
 
-    get icon() {
-        return this.resources.getImage()(this.props.type);
-    }
-
     get browserInfo() {
         return collectBrowserInfo();
     }