Merge pull request #65 from mollie/feature/MOL-437/PICT-251

MOL-437/MOL-251: implement custom app list payment view

Author: tdang1-shopmacher

CHANGELOG.md

@@ -4,12 +4,31 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](http://keepachangelog.com/) and this project adheres to [Semantic Versioning](http://semver.org/).
 
-## v2.0.0-alpha
+## v1.2.0-alpha
 
 Added
 
 - Mollie custom application initialization
 
+## v1.1.1
+
+Fixes
+
+- Type converting issue in payment method listing endpoint
+
+## v1.1.0
+
+Added
+
+- DockerImage for self hosting on AWS
+- Installation endpoint for required configurations
+
+## v1.0.3
+
+Added
+
+- Endpoints for checking connector statuses
+
 ## v1.0.2
 
 Fixes

application/@types-extensions/graphql-ctp/index.d.ts

@@ -32,3 +32,31 @@ declare module '*/fetch-custom-objects.ctp.graphql' {
 
   export default defaultDocument;
 }
+
+declare module '*/fetch-custom-object-details.ctp.graphql' {
+  import { DocumentNode } from 'graphql';
+  const defaultDocument: DocumentNode;
+  export const UpdateCustomObjects: DocumentNode;
+  export default defaultDocument;
+}
+
+declare module '*/update-custom-object-details.ctp.graphql' {
+  import { DocumentNode } from 'graphql';
+  const defaultDocument: DocumentNode;
+  export const UpdateCustomObjectDetails: DocumentNode;
+  export default defaultDocument;
+}
+
+declare module '*/remove-custom-object-details.ctp.graphql' {
+  import { DocumentNode } from 'graphql';
+  const defaultDocument: DocumentNode;
+  export const RemoveCustomObjectDetails: DocumentNode;
+  export default defaultDocument;
+}
+
+declare module '*/fetch-extension-destination.ctp.graphql' {
+  import { DocumentNode } from 'graphql';
+  const defaultDocument: DocumentNode;
+  export const FetchExtensionDestination: DocumentNode;
+  export default defaultDocument;
+}

application/@types/commercetools__sync-actions/index.d.ts

@@ -8,5 +8,4 @@ declare module '@commercetools/sync-actions' {
     buildActions: typeof buildActions;
   };
   export function createSyncChannels(): Syncer;
-  export function createSyncCustomObjects(): Syncer;
 }

application/custom-application-config.ts

@@ -1,9 +1,9 @@
 import {
   PERMISSIONS,
   entryPointUriPath,
-  cloudIdentifier,
-  applicationId,
-  applicationBaseUrl,
+  CLOUD_IDENTIFIER,
+  CUSTOM_APPLICATION_ID,
+  APPLICATION_URL,
 } from './src/constants';
 
 /**
@@ -12,19 +12,19 @@ import {
 const config = {
   name: 'Mollie',
   entryPointUriPath,
-  cloudIdentifier: cloudIdentifier,
+  cloudIdentifier: CLOUD_IDENTIFIER,
   env: {
     development: {
       initialProjectKey: 'shopm-adv-dev',
     },
     production: {
-      applicationId: applicationId,
-      url: applicationBaseUrl,
+      applicationId: CUSTOM_APPLICATION_ID,
+      url: APPLICATION_URL,
     },
   },
   oAuthScopes: {
     view: ['view_key_value_documents'],
-    manage: ['manage_key_value_documents'],
+    manage: ['manage_key_value_documents', 'manage_extensions'],
   },
   icon: '${path:./assets/mollie.svg}',
   mainMenuLink: {
@@ -34,7 +34,9 @@ const config = {
   },
   headers: {
     csp: {
-      'connect-src': ['api.mollie.com'],
+      'connect-src': [
+        '*.europe-west1.gcp.commercetools.app',
+      ],
     },
   },
 };

application/cypress/e2e/welcome.cy.ts

@@ -1,10 +1,13 @@
-import { entryPointUriPath, applicationBaseRoute } from '../support/constants';
+import {
+  entryPointUriPath,
+  APPLICATION_BASE_ROUTE,
+} from '../support/constants';
 
 describe('Test welcome.cy.', () => {
   beforeEach(() => {
     cy.loginToMerchantCenter({
       entryPointUriPath,
-      initialRoute: applicationBaseRoute,
+      initialRoute: APPLICATION_BASE_ROUTE,
     });
   });
   it('should render page', () => {

application/cypress/support/constants.ts

@@ -2,4 +2,4 @@ export const projectKey = Cypress.env('PROJECT_KEY');
 
 export const entryPointUriPath = 'mollie';
 
-export const applicationBaseRoute = `/${projectKey}/${entryPointUriPath}`;
+export const APPLICATION_BASE_ROUTE = `/${projectKey}/${entryPointUriPath}`;

application/package.json

@@ -19,7 +19,8 @@
     "versions:appkit": "manypkg upgrade @commercetools-frontend",
     "versions:uikit": "manypkg upgrade @commercetools-uikit",
     "cypress:open": "cypress open",
-    "cypress:run": "cypress run"
+    "cypress:run": "cypress run",
+    "sync": "mc-scripts login && mc-scripts config:sync"
   },
   "dependencies": {
     "@apollo/client": "3.7.14",
@@ -44,6 +45,8 @@
     "@commercetools-test-data/channel": "8.5.0",
     "@commercetools-test-data/commons": "8.5.0",
     "@commercetools-test-data/core": "8.5.0",
+    "@commercetools-test-data/custom-object": "^10.7.1",
+    "@commercetools-uikit/checkbox-input": "^19.11.0",
     "@commercetools-uikit/constraints": "^19.9.0",
     "@commercetools-uikit/data-table": "^19.9.0",
     "@commercetools-uikit/flat-button": "^19.9.0",
@@ -61,6 +64,7 @@
     "@commercetools-uikit/text": "^19.9.0",
     "@commercetools-uikit/text-field": "^19.9.0",
     "@commercetools-uikit/text-input": "^19.9.0",
+    "@commercetools-uikit/toggle-input": "^19.11.0",
     "@commercetools/sync-actions": "^5.14.0",
     "@emotion/react": "^11.11.4",
     "@formatjs/cli": "6.2.12",

application/src/components/welcome/messages.ts

@@ -3,7 +3,7 @@ import { defineMessages } from 'react-intl';
 export default defineMessages({
   title: {
     id: 'Welcome.title',
-    defaultMessage: 'Mollie',
+    defaultMessage: 'Mollie payment methods',
   },
   subtitle: {
     id: 'Welcome.subtitle',
@@ -14,4 +14,14 @@ export default defineMessages({
     id: 'Welcome.notice',
     defaultMessage: 'Content will follow...',
   },
+  noData: {
+    id: 'Welcome.noData',
+    defaultMessage:
+      'There are no active payment methods available. Please activate them in your mollie dashboard first.',
+  },
+  activeHeader: {
+    id: 'Welcome.activeHeader',
+    defaultMessage:
+      'Payment method is only available for checkout if the status is set to “Active”. Please make sure that the payment method is also enabled in the Mollie Dashboard.',
+  },
 });

application/src/components/welcome/welcome.spec.tsx

@@ -4,8 +4,16 @@ import {
   type TRenderAppWithReduxOptions,
 } from '@commercetools-frontend/application-shell/test-utils';
 import { renderApplicationWithRedux } from '../../test-utils';
-import { entryPointUriPath, PERMISSIONS, projectKey } from '../../constants';
+import { entryPointUriPath, PERMISSIONS } from '../../constants';
 import ApplicationRoutes from '../../routes';
+import messages from './messages';
+import { setupServer } from 'msw/node';
+
+const mockServer = setupServer();
+afterEach(() => mockServer.resetHandlers());
+afterAll(() => {
+  mockServer.close();
+});
 
 const renderApp = (options: Partial<TRenderAppWithReduxOptions> = {}) => {
   const route = options.route || `/shopm-adv-dev/${entryPointUriPath}`;
@@ -22,11 +30,9 @@ const renderApp = (options: Partial<TRenderAppWithReduxOptions> = {}) => {
   return { history };
 };
 
-it('should render welcome page', async () => {
-  const logSpy = jest.spyOn(console, 'log').mockImplementation();
-
-  renderApp();
-  await screen.findByText('Mollie');
-
-  logSpy.mockRestore();
+describe('Test welcome.tsx', () => {
+  it('should render welcome page', async () => {
+    renderApp();
+    await screen.findByText(messages.title.defaultMessage);
+  });
 });