mollie · tdang1-shopmacher · Jan 22, 2025 · Jan 10, 2025 · Jan 13, 2025 · Jan 14, 2025
diff --git a/application/custom-application-config.ts b/application/custom-application-config.ts
@@ -15,7 +15,7 @@ const config = {
   cloudIdentifier: CLOUD_IDENTIFIER,
   env: {
     development: {
-      initialProjectKey: 'shopm-adv-windev',
+      initialProjectKey: 'your_project_key',
     },
     production: {
       applicationId: CUSTOM_APPLICATION_ID,

diff --git a/application/cypress/e2e/method-details.cy.ts b/application/cypress/e2e/method-details.cy.ts
@@ -57,4 +57,22 @@ describe('Test welcome.cy.ts', () => {
       20
     );
   });
+
+  it('credit card component visibility config should exist', () => {
+    const paymentMethodIds = ['creditcard'];
+
+    cy.findByTestId(`display-order-column-${paymentMethodIds[0]}`).click();
+    cy.url().should('contain', 'general');
+
+    cy.findByTestId(`display-card-component`).should('exist');
+  });
+
+  it('banktransfer due date config should exist', () => {
+    const paymentMethodIds = ['banktransfer'];
+
+    cy.findByTestId(`display-order-column-${paymentMethodIds[0]}`).click();
+    cy.url().should('contain', 'general');
+
+    cy.findByTestId(`banktransfer-due-date`).should('exist');
+  });
 });
diff --git a/application/package.json b/application/package.json
@@ -54,6 +54,7 @@
     "@commercetools-uikit/grid": "^19.9.0",
     "@commercetools-uikit/hooks": "^19.9.0",
     "@commercetools-uikit/icons": "^19.9.0",
+    "@commercetools-uikit/label": "^19.20.1",
     "@commercetools-uikit/link": "^19.9.0",
     "@commercetools-uikit/loading-spinner": "^19.9.0",
     "@commercetools-uikit/localized-text-field": "^19.9.0",

diff --git a/application/src/components/method-details/messages.ts b/application/src/components/method-details/messages.ts
@@ -86,4 +86,25 @@ export default defineMessages({
     id: 'MethodDetails.fieldMustBeEqualOrGreaterThanZero',
     defaultMessage: 'The amount must be equal or greater than 0',
   },
+  fieldDisplayCardComponenet: {
+    id: 'MethodDetails.fieldDisplayCardComponent',
+    defaultMessage: 'Display card component',
+  },
+  fieldDisplayCardComponenetDescription: {
+    id: 'MethodDetails.fieldDisplayCardComponenetDescription',
+    defaultMessage:
+      'Enable Mollie card components (0 = disabled or 1 = enabled)',
+  },
+  fieldBanktransaferDueDate: {
+    id: 'MethodDetails.fieldBanktransaferDueDate',
+    defaultMessage: 'Banktransfer due date',
+  },
+  fieldBanktransaferDueDateDescription: {
+    id: 'MethodDetails.fieldBankDueDateDescription',
+    defaultMessage: 'Set due date between (1d -> 100d)',
+  },
+  fieldBanktransaferDueDateIsNotAString: {
+    id: 'MethodDetails.fieldBanktransaferDueDateIsNotAString',
+    defaultMessage: 'Due date must be a string e.g. 25d, 9d',
+  },
 });
diff --git a/application/src/components/method-details/method-details-form.tsx b/application/src/components/method-details/method-details-form.tsx
@@ -13,6 +13,10 @@ import {
 } from '@commercetools-frontend/application-components';
 import Text from '@commercetools-uikit/text';
 import validate from './validate';
+import ToggleInput from '@commercetools-uikit/toggle-input';
+import Constraints from '@commercetools-uikit/constraints';
+import { SupportedPaymentMethods } from '../../types/app';
+import FieldLabel from '@commercetools-uikit/field-label';
 
 type Formik = ReturnType<typeof useFormik>;
 type FormProps = {
@@ -170,6 +174,55 @@ const MethodDetailsForm = (props: TCustomObjectDetailsFormProps) => {
           </Text.Wrap>
         </Spacings.Stack>
       </InfoDialog>
+      {formik.values.id === SupportedPaymentMethods.creditcard && (
+        <Constraints.Horizontal>
+          <FieldLabel
+            title={intl.formatMessage(messages.fieldDisplayCardComponenet)}
+            description={intl.formatMessage(
+              messages.fieldDisplayCardComponenetDescription
+            )}
+            htmlFor="displayCardComponent"
+          />
+          <ToggleInput
+            id="displayCardComponent"
+            name="displayCardComponent"
+            isChecked={formik.values.displayCardComponent}
+            onChange={formik.handleChange}
+            size="small"
+            data-testid="display-card-component"
+          />
+        </Constraints.Horizontal>
+      )}
+
+      {formik.values.id === SupportedPaymentMethods.banktransfer && (
+        <TextField
+          name="banktransferDueDate"
+          maxLength={4}
+          title={intl.formatMessage(messages.fieldBanktransaferDueDate)}
+          description={intl.formatMessage(
+            messages.fieldBanktransaferDueDateDescription
+          )}
+          value={formik.values.banktransferDueDate || ''}
+          errors={
+            TextField.toFieldErrors<TMethodObjectValueFormValues>(formik.errors)
+              .banktransferDueDate
+          }
+          touched={Boolean(formik.touched.banktransferDueDate)}
+          onChange={formik.handleChange}
+          onBlur={formik.handleBlur}
+          isReadOnly={props.isReadOnly}
+          horizontalConstraint={13}
+          renderError={(errorKey) => {
+            if (errorKey === 'IsNotAString') {
+              return intl.formatMessage(
+                messages.fieldBanktransaferDueDateIsNotAString
+              );
+            }
+            return null;
+          }}
+          data-testid="banktransfer-due-date"
+        ></TextField>
+      )}
     </Spacings.Stack>
   );
 
@@ -190,19 +243,11 @@ const MethodDetailsForm = (props: TCustomObjectDetailsFormProps) => {
           TextField.toFieldErrors<TMethodObjectValueFormValues>(formik.errors)
             .imageUrl
         }
-        touched={Boolean(formik.touched.displayOrder)}
+        touched={Boolean(formik.touched.imageUrl)}
         onChange={formik.handleChange}
         onBlur={formik.handleBlur}
         isReadOnly={props.isReadOnly}
         horizontalConstraint={13}
-        renderError={(errorKey) => {
-          if (errorKey === 'isNotInteger') {
-            return intl.formatMessage(
-              messages.fieldMethodDisplayOrderIsNotInteger
-            );
-          }
-          return null;
-        }}
         data-testid="image-url-input"
       ></TextField>
     </Spacings.Inline>

diff --git a/application/src/components/method-details/method-details.spec.tsx b/application/src/components/method-details/method-details.spec.tsx
@@ -48,7 +48,7 @@ describe('Test method-details.tsx', () => {
       method: {
         id: '43c3f945-c429-4719-878f-008cd507c581',
         container: 'sctm-app-methods',
-        key: 'paypal',
+        key: 'creditcard',
         value: {
           id: 'creditcard',
           technicalName: 'Card',
@@ -72,6 +72,7 @@ describe('Test method-details.tsx', () => {
             'https://www.mollie.com/external/icons/payment-methods/creditcard.svg',
           status: 'Inactive',
           displayOrder: 0,
+          displayCardComponent: false,
         },
         __typename: 'CustomObject',
       },

diff --git a/application/src/components/method-details/validate.ts b/application/src/components/method-details/validate.ts
@@ -1,11 +1,12 @@
 import omitEmpty from 'omit-empty-es';
-import type { FormikErrors } from 'formik';
+import { type FormikErrors } from 'formik';
 import type { TMethodObjectValueFormValues } from '../../types';
 
 type TMethodObjectErrors = {
   name: { invalidLength?: boolean };
   description: { invalidLength?: boolean };
   displayOrder: { isNotInteger?: boolean };
+  banktransferDueDate: { IsNotAString?: boolean };
 };
 
 const validate = (
@@ -15,6 +16,7 @@ const validate = (
     name: {},
     description: {},
     displayOrder: {},
+    banktransferDueDate: {},
   };
 
   if (
@@ -38,6 +40,17 @@ const validate = (
   ) {
     errors.displayOrder.isNotInteger = true;
   }
+  if (formikValues.banktransferDueDate) {
+    const dateValue = formikValues.banktransferDueDate.replace('d', '');
+    if (
+      !formikValues.banktransferDueDate.includes('d') ||
+      isNaN(parseInt(dateValue)) ||
+      parseInt(dateValue) < 0 ||
+      parseInt(dateValue) > 100
+    ) {
+      errors.banktransferDueDate.IsNotAString = true;
+    }
+  }
 
   return omitEmpty(errors);
 };

diff --git a/application/src/types.ts b/application/src/types.ts
@@ -30,6 +30,8 @@ export type TMethodObjectValueFormValues = {
   status: string;
   displayOrder: number;
   pricingConstraints?: TPricingConstraintItem[];
+  displayCardComponent?: boolean;
+  banktransferDueDate?: string;
 };
 
 export type TAvailabilityObjectValueFormValues = {

diff --git a/application/yarn.lock b/application/yarn.lock
@@ -2417,6 +2417,19 @@
     prop-types "15.8.1"
     react "17.0.2"
 
+"@commercetools-uikit/design-system@19.20.1":
+  version "19.20.1"
+  resolved "https://registry.yarnpkg.com/@commercetools-uikit/design-system/-/design-system-19.20.1.tgz#b0a2f3b9fdf68cb335c12b670941e7ac12457a1e"
+  integrity sha512-AVtdulOkX+mQKZynRNfOOZSkNcGOaC668pWjXWwM1bH4T+kqnMqnAAMgxHd3P6/Xi5cQy6+ul+lJ1HkJWywcyA==
+  dependencies:
+    "@babel/runtime" "^7.20.13"
+    "@babel/runtime-corejs3" "^7.20.13"
+    "@commercetools-uikit/hooks" "19.20.1"
+    "@emotion/react" "^11.10.5"
+    lodash "4.17.21"
+    prop-types "15.8.1"
+    react "17.0.2"
+
 "@commercetools-uikit/dropdown-menu@19.13.0":
   version "19.13.0"
   resolved "https://registry.yarnpkg.com/@commercetools-uikit/dropdown-menu/-/dropdown-menu-19.13.0.tgz#fc59495a756b4c1999aab11a8c74bce6e6266b20"
@@ -2524,6 +2537,18 @@
     lodash "4.17.21"
     raf-schd "^4.0.3"
 
+"@commercetools-uikit/hooks@19.20.1":
+  version "19.20.1"
+  resolved "https://registry.yarnpkg.com/@commercetools-uikit/hooks/-/hooks-19.20.1.tgz#d40f99af7ce06a84174f5d6529741fb23bed5f62"
+  integrity sha512-A4sfyW2Sj3RFjhIf/4yz2hh0JUPT2mKQ50pJx/XV4wpIFxsL5i4v8iPIlO20m806EVUVIjT31u2zV++ICUHs/w==
+  dependencies:
+    "@babel/runtime" "^7.20.13"
+    "@babel/runtime-corejs3" "^7.20.13"
+    "@commercetools-uikit/utils" "19.20.1"
+    "@types/raf-schd" "^4.0.1"
+    lodash "4.17.21"
+    raf-schd "^4.0.3"
+
 "@commercetools-uikit/i18n@^19.9.0":
   version "19.13.0"
   resolved "https://registry.yarnpkg.com/@commercetools-uikit/i18n/-/i18n-19.13.0.tgz#c02dbe1584aea6d556bb2db1d5d241c4f2d49569"
@@ -2595,6 +2620,20 @@
     "@emotion/styled" "^11.10.5"
     prop-types "15.8.1"
 
+"@commercetools-uikit/label@^19.20.1":
+  version "19.20.1"
+  resolved "https://registry.yarnpkg.com/@commercetools-uikit/label/-/label-19.20.1.tgz#7e94ab2a30fc76d3ea5c82c62bb9ad50e5bba15f"
+  integrity sha512-sX4rixFzUjt/RMBkvP50ZgDQ6Q727QRVjVNg8HNsT9VxsYao38YozF22LO3o1Hj4BukL+vepK1+gtyfk9b/cWg==
+  dependencies:
+    "@babel/runtime" "^7.20.13"
+    "@babel/runtime-corejs3" "^7.20.13"
+    "@commercetools-uikit/design-system" "19.20.1"
+    "@commercetools-uikit/text" "19.20.1"
+    "@commercetools-uikit/utils" "19.20.1"
+    "@emotion/react" "^11.10.5"
+    "@emotion/styled" "^11.10.5"
+    prop-types "15.8.1"
+
 "@commercetools-uikit/link@^19.9.0":
   version "19.13.0"
   resolved "https://registry.yarnpkg.com/@commercetools-uikit/link/-/link-19.13.0.tgz#603c3b051b098b9102dc94e5a76890f4fbe74c59"
@@ -3083,6 +3122,20 @@
     prop-types "15.8.1"
     warning "4.0.3"
 
+"@commercetools-uikit/text@19.20.1":
+  version "19.20.1"
+  resolved "https://registry.yarnpkg.com/@commercetools-uikit/text/-/text-19.20.1.tgz#4b3a549dbbb1e5a2d72574701e75ca63f9d17a47"
+  integrity sha512-G2rYV5q0nT2cNFjE2t6hyiI3G/fdYL8FUL8E22bp1RzokotCGTpmQIzETiCW29qc+ZpmXYjl57xxE6B0FCcEQg==
+  dependencies:
+    "@babel/runtime" "^7.20.13"
+    "@babel/runtime-corejs3" "^7.20.13"
+    "@commercetools-uikit/design-system" "19.20.1"
+    "@commercetools-uikit/utils" "19.20.1"
+    "@emotion/react" "^11.10.5"
+    lodash "4.17.21"
+    prop-types "15.8.1"
+    warning "4.0.3"
+
 "@commercetools-uikit/toggle-input@^19.11.0":
   version "19.13.0"
   resolved "https://registry.yarnpkg.com/@commercetools-uikit/toggle-input/-/toggle-input-19.13.0.tgz#01e8efe46d5b774511dbb0de0877ce71108a4fb6"
@@ -3125,6 +3178,15 @@
     "@babel/runtime-corejs3" "^7.20.13"
     "@emotion/is-prop-valid" "1.3.1"
 
+"@commercetools-uikit/utils@19.20.1":
+  version "19.20.1"
+  resolved "https://registry.yarnpkg.com/@commercetools-uikit/utils/-/utils-19.20.1.tgz#2691045a826eaebbc230478bf5964aaad799181a"
+  integrity sha512-8nYmB4BD4dFXzP2zxyj6BcrMgo6LCyus9i+bLX9Y2vtqybWsipH6N87wpM6R+IATA8C4k76QLz5J2wwVWYOqeQ==
+  dependencies:
+    "@babel/runtime" "^7.20.13"
+    "@babel/runtime-corejs3" "^7.20.13"
+    "@emotion/is-prop-valid" "1.3.1"
+
 "@commercetools/api-request-builder@6.0.0":
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/@commercetools/api-request-builder/-/api-request-builder-6.0.0.tgz#7c0b8104f4d3655ac8bdb79dee3087d747018c0b"

diff --git a/connect.yaml b/connect.yaml
@@ -11,10 +11,10 @@ deployAs:
           description: Commercetools Composable Commerce API region
           required: true
           default: "europe-west1.gcp"
-        - key: MOLLIE_CARD_COMPONENT
-          description: Enable Mollie card component (0 or 1)
-          required: false
-          default: "0"
+        - key: CTP_AUTH_URL
+          description: Commercetools Auth URL
+          default: https://auth.europe-west1.gcp.commercetools.com
+          required: true
         - key: CONNECTOR_MODE
           description: Either test or live
           required: true
@@ -23,9 +23,6 @@ deployAs:
           description: Debug mode (0 or 1)
           required: false
           default: "0"
-        - key: MOLLIE_BANK_TRANSFER_DUE_DATE
-          description: Payment method Bank Transfer due date (1d -> 100d)
-          default: "14d"
         - key: AUTHENTICATION_MODE
           description: To enable secure mode for connector requests using OAuth authentication (0 or 1)
           required: true