Feature/mol 592 resolved develop

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');
+  });
 });

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",

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',
+  },
 });

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>

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',
       },

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);
 };

application/src/components/welcome/welcome.tsx

@@ -17,7 +17,7 @@ import DataTable from '@commercetools-uikit/data-table';
 import IconButton from '@commercetools-uikit/icon-button';
 import { usePaymentMethodsFetcher } from '../../hooks/use-mollie-connector';
 import { ContentNotification } from '@commercetools-uikit/notifications';
-import { CustomMethodObject, CustomObjectUpdaterError } from '../../types/app';
+import { CustomMethodObject } from '../../types/app';
 import LoadingSpinner from '@commercetools-uikit/loading-spinner';
 import Tootltip from '@commercetools-uikit/tooltip';
 import {
@@ -74,7 +74,7 @@ const Welcome = () => {
     key: 'key',
     order: 'asc',
   });
-  const { customObjectsPaginatedResult, error, loading, refetch } =
+  const { customObjectsPaginatedResult, error, loading } =
     useCustomObjectsFetcher({
       page,
       perPage,
@@ -110,13 +110,7 @@ const Welcome = () => {
                 value: JSON.stringify(method),
               })
               .catch((error) => {
-                Object.values(error).forEach((e) => {
-                  console.error(
-                    `SCTM custom application: ${
-                      (e as CustomObjectUpdaterError).message
-                    }`
-                  );
-                });
+                console.error(`Error creating custom object: ${error}`);
               });
             return method;
           } else {
@@ -126,15 +120,9 @@ const Welcome = () => {
           }
         })
       );
-      refetch();
       setMethods(updatedMethods);
     }
-  }, [
-    customObjectUpdater,
-    customObjectsPaginatedResult?.results,
-    fetchedData,
-    refetch,
-  ]);
+  }, [customObjectUpdater, customObjectsPaginatedResult?.results, fetchedData]);
 
   useEffect(() => {
     if (
@@ -224,13 +212,13 @@ const Welcome = () => {
           sortDirection={tableSorting.value.order}
           onSortChange={tableSorting.onChange}
           onRowClick={(row) => {
-            const target = customObjectsPaginatedResult?.results.filter(
-              (obj) => obj.key === row.id
+            push(
+              `${match.url}/${
+                customObjectsPaginatedResult?.results.filter(
+                  (obj) => obj.key === row.id
+                )?.[0]?.id
+              }/general`
             );
-
-            if (target) {
-              push(`${match.url}/${target[0].id}/general`);
-            }
           }}
         />
         <Switch>

application/src/hooks/use-custom-objects-connector/use-custom-objects-connector.ts

@@ -21,7 +21,7 @@ import FetchCustomObjectsQuery from './fetch-custom-objects.ctp.graphql';
 import FetchCustomObjectDetailsQuery from './fetch-custom-object-details.ctp.graphql';
 import UpdateCustomObjectDetailsMutation from './update-custom-object-details.ctp.graphql';
 import RemoveCustomObjectDetailsMutation from './remove-custom-object-details.ctp.graphql';
-import { ApolloError, ApolloQueryResult } from '@apollo/client';
+import { ApolloError } from '@apollo/client';
 import { extractErrorFromGraphQlResponse } from '../../helpers';
 
 type PaginationAndSortingProps = {
@@ -37,7 +37,6 @@ type TUseCustomObjectsFetcher = (
   customObjectsPaginatedResult?: TFetchCustomObjectsQuery['customObjects'];
   error?: ApolloError;
   loading: boolean;
-  refetch: () => Promise<ApolloQueryResult<TFetchCustomObjectsQuery>>;
 };
 
 export const useCustomObjectsFetcher: TUseCustomObjectsFetcher = ({
@@ -46,7 +45,7 @@ export const useCustomObjectsFetcher: TUseCustomObjectsFetcher = ({
   tableSorting,
   container,
 }) => {
-  const { data, error, loading, refetch } = useMcQuery<
+  const { data, error, loading } = useMcQuery<
     TFetchCustomObjectsQuery,
     TFetchCustomObjectsQueryVariables
   >(FetchCustomObjectsQuery, {
@@ -65,7 +64,6 @@ export const useCustomObjectsFetcher: TUseCustomObjectsFetcher = ({
     customObjectsPaginatedResult: data?.customObjects,
     error,
     loading,
-    refetch,
   };
 };
 type TUseCustomObjectDetailsFetcher = (id: string) => {

application/src/hooks/use-mollie-connector/use-mollie-connector.ts

@@ -15,7 +15,6 @@ import {
   CustomMethodObject,
   MollieResult,
   SupportedPaymentMethods,
-  GooglePay,
 } from '../../types/app';
 
 /**
@@ -46,8 +45,6 @@ const convertMollieMethodToCustomMethod = (
       method.status === 'activated' &&
       SupportedPaymentMethods[method.id as SupportedPaymentMethods]
   );
-
-  availableMethods.push(GooglePay);
   return availableMethods.map((method: MollieMethod) => ({
     id: method.id,
     technicalName: method.description,

application/src/types.ts

@@ -30,6 +30,8 @@ export type TMethodObjectValueFormValues = {
   status: string;
   displayOrder: number;
   pricingConstraints?: TPricingConstraintItem[];
+  displayCardComponent?: boolean;
+  banktransferDueDate?: string;
 };
 
 export type TAvailabilityObjectValueFormValues = {