Feature/mol 439/pict 253

CHANGELOG.md

@@ -10,6 +10,35 @@ Added
 
 - Mollie custom application initialization
 
+Updated
+
+- [getPaymentMethods](/docs/GetPaymentMethods.md) response has new returned format as follow
+
+  ```Typescript
+  {
+      id: string,
+      name: Record<string, string>
+      description: Record<string, string>
+      image: string;
+      order: number;
+  }
+
+  // e.g.
+  {
+    id: 'paypal',
+    name: {
+        'en-GB': 'PayPal',
+        'de-DE': 'PayPal',
+    },
+    description: {
+        'en-GB': '',
+        'de-DE': '',
+    },
+    image: 'https://example.img/paypal.svg',
+    order: 1
+  }
+  ```
+
 ## v1.1.1
 
 Fixes
@@ -54,15 +83,15 @@ Added
 - Package version for requests
 - Log mechanism
 - Supporting payment methods namely:
-    - [Apple pay](https://docs.mollie.com/docs/apple-pay)
-    - [Bancontact](https://docs.mollie.com/docs/bancontact)
-    - [BLIK](https://docs.mollie.com/docs/blik)
-    - [Credit/debit card](https://docs.mollie.com/docs/cards)
-    - [Gift cards](https://docs.mollie.com/docs/giftcards)
-    - [iDEAL](https://docs.mollie.com/docs/ideal)
-    - [KBC/CBC](https://docs.mollie.com/docs/kbc)
-    - [Paypal](https://docs.mollie.com/docs/paypal)
-    - [Przelewy24](https://docs.mollie.com/docs/przelewy24)
+  - [Apple pay](https://docs.mollie.com/docs/apple-pay)
+  - [Bancontact](https://docs.mollie.com/docs/bancontact)
+  - [BLIK](https://docs.mollie.com/docs/blik)
+  - [Credit/debit card](https://docs.mollie.com/docs/cards)
+  - [Gift cards](https://docs.mollie.com/docs/giftcards)
+  - [iDEAL](https://docs.mollie.com/docs/ideal)
+  - [KBC/CBC](https://docs.mollie.com/docs/kbc)
+  - [Paypal](https://docs.mollie.com/docs/paypal)
+  - [Przelewy24](https://docs.mollie.com/docs/przelewy24)
 - Supporting for [Apply pay direct](https://docs.mollie.com/docs/direct-integration-of-apple-pay) & [Mollie card component](https://docs.mollie.com/docs/mollie-components)
 - Filter options for listing payment methods
 - Create/cancel payment via Payment API

application/custom-application-config.ts

@@ -15,7 +15,7 @@ const config = {
   cloudIdentifier: CLOUD_IDENTIFIER,
   env: {
     development: {
-      initialProjectKey: 'shopm-adv-dev',
+      initialProjectKey: 'shopm-adv-windev',
     },
     production: {
       applicationId: CUSTOM_APPLICATION_ID,

application/cypress.config.ts

@@ -28,6 +28,7 @@ export default defineConfig({
           LOGIN_PASSWORD: process.env.CYPRESS_LOGIN_PASSWORD,
           PROJECT_KEY: process.env.CYPRESS_PROJECT_KEY,
           PACKAGE_NAME: process.env.CYPRESS_PACKAGE_NAME,
+          LOCALE: process.env.CYPRESS_LOCALE || 'en-GB',
         },
       };
     },

application/cypress/.env.example

@@ -2,4 +2,5 @@ CYPRESS_LOGIN_USER=<your-user>
 CYPRESS_LOGIN_PASSWORD=<your-password>
 CYPRESS_PROJECT_KEY=<your-project-key>
 CYPRESS_PACKAGE_NAME="application"
-CYPRESS_BASE_URL="https://mc.europe-west1.gcp.commercetools.com/"
+CYPRESS_BASE_URL="https://mc.europe-west1.gcp.commercetools.com/"
+CYPRESS_LOCALE="en-GB"

application/cypress/e2e/method-details.cy.ts

@@ -0,0 +1,60 @@
+/// <reference types="cypress" />
+/// <reference types="@testing-library/cypress" />
+/// <reference types="@commercetools-frontend/cypress" />
+
+import {
+  entryPointUriPath,
+  APPLICATION_BASE_ROUTE,
+} from '../support/constants';
+beforeEach(() => {
+  cy.loginToMerchantCenter({
+    entryPointUriPath,
+    initialRoute: APPLICATION_BASE_ROUTE,
+  });
+
+  cy.fixture('forward-to').then((response) => {
+    cy.intercept('GET', '/proxy/forward-to', {
+      statusCode: 200,
+      body: response,
+    });
+  });
+});
+
+describe('Test welcome.cy.ts', () => {
+  it('should render method details page', () => {
+    const LOCALE = Cypress.env('LOCALE');
+    const paymentMethods = [
+      'PayPal',
+      'iDEAL Pay in 3 instalments, 0% interest',
+      'iDEAL',
+      'Bancontact',
+      'Blik',
+    ];
+
+    cy.findByText(paymentMethods[0]).click();
+    cy.url().should('contain', 'general');
+
+    cy.findByTestId('status-select').should('exist');
+
+    cy.findByTestId(`name-input-${LOCALE}`).should('exist');
+    cy.findByTestId(`description-input-${LOCALE}`).should('exist');
+    cy.findByTestId(`display-order-input`).should('exist');
+  });
+
+  it('should update display order successfully', () => {
+    const paymentMethodIds = ['paypal', 'ideal', 'bancontact'];
+
+    cy.findByTestId(`display-order-column-${paymentMethodIds[0]}`).click();
+    cy.url().should('contain', 'general');
+
+    cy.findByTestId(`display-order-input`).should('exist');
+    cy.findByTestId(`display-order-input`).clear();
+    cy.findByTestId(`display-order-input`).type('20');
+    cy.findByTestId(`save-button`).click();
+    cy.findByLabelText('Go back').click();
+    cy.findByTestId(`display-order-column-${paymentMethodIds[0]}`).should(
+      'have.text',
+      20
+    );
+  });
+});