@commercetools-frontend/experimental-components 0.0.2

package/src/custom-fields/custom-fields/types/custom-nested-input/custom-nested-input.spec.js

@@ -0,0 +1,470 @@
+import { graphql } from 'msw';
+import { setupServer } from 'msw/node';
+import { Formik } from 'formik';
+import {
+  screen,
+  fireEvent,
+  renderAppWithRedux,
+  waitFor,
+  within,
+} from '@commercetools-frontend/application-shell/test-utils';
+import { buildGraphqlList } from '@commercetools-test-data/core';
+import {
+  ProductType,
+  AttributeDefinition,
+} from '@commercetools-local/test-data';
+import { LocalizedString } from '@commercetools-test-data/commons';
+import CustomFields from '../../custom-fields';
+
+const fieldDefinitions = [
+  {
+    name: 'nested-fields-level-0',
+    required: true,
+    label: { en: 'Nested Fields Level 0' },
+    type: {
+      name: 'nested',
+      typeRef: {
+        __typename: 'Reference',
+        typeId: 'product-type',
+        id: 'nested-product-type-level-0',
+      },
+      __typename: 'NestedAttributeDefinitionType',
+    },
+  },
+];
+
+const buildNestedProductType = (nestingLevel = 0) =>
+  ProductType.random()
+    .id(`nested-product-type-level-${nestingLevel}`)
+    .name(`Nested Product Type (Level ${nestingLevel})`)
+    .attributes([
+      AttributeDefinition.presets
+        .number()
+        .name(`numeric-field-level-${nestingLevel}`)
+        .isRequired(false)
+        .label(
+          LocalizedString.presets
+            .empty()
+            .en(`Numeric Field Level ${nestingLevel}`)
+        ),
+      AttributeDefinition.presets
+        .nested(`nested-product-type-level-${nestingLevel + 1}`)
+        .name(`nested-fields-level-${nestingLevel + 1}`)
+        .isRequired(false)
+        .label(
+          LocalizedString.presets
+            .empty()
+            .en(`Nested Fields Level ${nestingLevel + 1}`)
+        ),
+    ])
+    .buildGraphql();
+
+const mockServer = setupServer(
+  graphql.query('FetchProductTypeQuery', (req, res, ctx) => {
+    const id = req.body.variables.id;
+    const match = id.match(/nested-product-type-level-(\d)/);
+    const nestingLevel = parseInt(match?.[1], 10);
+    const productType = do {
+      if (Number.isNaN(nestingLevel)) null;
+      else buildNestedProductType(nestingLevel);
+    };
+
+    return res(ctx.data({ productType }));
+  })
+);
+
+afterEach(() => {
+  mockServer.resetHandlers();
+});
+
+beforeAll(() => mockServer.listen({ onUnhandledRequest: 'warn' }));
+afterAll(() => mockServer.close());
+
+const render = (component, opts) => {
+  let formikValues = opts.initialValues;
+
+  renderAppWithRedux(
+    <Formik initialValues={opts.initialValues}>
+      {({ values }) => {
+        formikValues = values;
+        return component;
+      }}
+    </Formik>
+  );
+
+  return { getFormikValues: () => formikValues };
+};
+
+const waitInputToBeRendered = async () =>
+  screen.findByText(/Product type referenced: Nested Product Type/);
+
+const startEditingNestedField = async (name) => {
+  const container = await screen.findByTestId(
+    name.split(' ').join('-').toLowerCase()
+  );
+  const editButton = within(container).getByLabelText('Edit');
+  fireEvent.click(editButton);
+};
+
+const enterFieldValue = async (fieldName, value) => {
+  const input = await screen.findByLabelText(fieldName);
+  fireEvent.change(input, { target: { value } });
+};
+
+const saveNestedFields = async (dialogName) => {
+  const dialog = screen.getByRole('dialog', { name: dialogName });
+  const saveButton = within(dialog).getByText('Update Attribute');
+  fireEvent.click(saveButton);
+  await screen.findByText(
+    /Attributes on this level have been successfully updated/i
+  );
+  const hideNotificationButton = screen.getByLabelText('Hide notification');
+  fireEvent.click(hideNotificationButton);
+};
+
+const revertChanges = (dialogName) => {
+  const dialog = screen.getByRole('dialog', { name: dialogName });
+  const revertChangesButton = within(dialog).getByRole('button', {
+    name: 'Cancel',
+  });
+  fireEvent.click(revertChangesButton);
+};
+
+const leaveNestedAttributesForm = (dialogName) => {
+  const dialog = screen.getByRole('dialog', { name: dialogName });
+  const goBackLink = within(dialog).getByText(/Go back/i);
+  fireEvent.click(goBackLink);
+};
+
+const waitForDiscardConfirmation = () =>
+  screen.findByText(
+    'By leaving this page, attributes on this level will not be updated. Would you like to proceed?'
+  );
+
+const confirmChangesDiscard = () => {
+  const confirmButton = screen.getByText('Proceed without updating level');
+  fireEvent.click(confirmButton);
+};
+
+const cancelChangesDiscard = () => {
+  const discardChangesDialog = screen.getByLabelText('Discard changes');
+  const dialogCancelButton = within(discardChangesDialog).getByText('Cancel');
+  fireEvent.click(dialogCancelButton);
+};
+
+it('should show an error when nested attribute product type fetching failed', async () => {
+  mockServer.use(
+    graphql.query('FetchProductTypeQuery', (req, res, ctx) => {
+      return res.status(503);
+    })
+  );
+
+  render(<CustomFields fieldDefinitions={fieldDefinitions} />, {
+    initialValues: {},
+  });
+
+  await screen.findByText(
+    'Unable to load resource. Check the connection and try again.'
+  );
+});
+
+it('should not fail when nested attribute product type fetching failed', async () => {
+  const initialValues = {
+    'nested-fields-level-0': [{ name: 'numeric-field-level-0', value: 10 }],
+  };
+
+  mockServer.use(
+    graphql.query('FetchProductTypeQuery', (req, res, ctx) =>
+      res.once(ctx.status(500))
+    )
+  );
+
+  render(<CustomFields fieldDefinitions={fieldDefinitions} />, {
+    initialValues,
+  });
+
+  await screen.findByText(/Nested Fields Level 0/);
+});
+
+it('should let user edit attribute', async () => {
+  const initialValues = {
+    'nested-fields-level-0': [{ name: 'numeric-field-level-0', value: 10 }],
+  };
+
+  const { getFormikValues } = render(
+    <CustomFields fieldDefinitions={fieldDefinitions} />,
+    { initialValues }
+  );
+
+  await waitInputToBeRendered();
+  await startEditingNestedField('Nested Fields Level 0');
+  await enterFieldValue('Numeric Field Level 0', 20);
+  await saveNestedFields('Nested Fields Level 0');
+
+  await waitFor(() =>
+    expect(getFormikValues()).toStrictEqual({
+      'nested-fields-level-0': [{ name: 'numeric-field-level-0', value: 20 }],
+    })
+  );
+});
+
+it('should disable revert button if form is not dirty', async () => {
+  const initialValues = {
+    'nested-fields-level-0': [{ name: 'numeric-field-level-0', value: 10 }],
+  };
+
+  render(<CustomFields fieldDefinitions={fieldDefinitions} />, {
+    initialValues,
+  });
+
+  await waitInputToBeRendered();
+  await startEditingNestedField('Nested Fields Level 0');
+  const revertChangesButton = screen.getByRole('button', { name: 'Cancel' });
+  await waitFor(() => expect(revertChangesButton).toBeDisabled());
+});
+
+it('should let user revert changes', async () => {
+  const initialValues = {
+    'nested-fields-level-0': [{ name: 'numeric-field-level-0', value: 10 }],
+  };
+
+  render(<CustomFields fieldDefinitions={fieldDefinitions} />, {
+    initialValues,
+  });
+
+  await waitInputToBeRendered();
+  await startEditingNestedField('Nested Fields Level 0');
+  await enterFieldValue('Numeric Field Level 0', 20);
+  revertChanges('Nested Fields Level 0');
+  await screen.findByDisplayValue('10');
+
+  const revertChangesButton = screen.getByRole('button', { name: 'Cancel' });
+  await waitFor(() => expect(revertChangesButton).toBeDisabled());
+});
+
+it('should not let user go to attribute editing view if input is disabled', async () => {
+  const initialValues = {
+    'nested-fields-level-0': [{ name: 'numeric-field-level-0', value: 10 }],
+  };
+
+  render(<CustomFields isDisabled fieldDefinitions={fieldDefinitions} />, {
+    initialValues,
+  });
+
+  await waitInputToBeRendered();
+
+  const editButton = screen.getByLabelText('Edit');
+  expect(editButton).toBeDisabled();
+});
+
+it('should not let user go to attribute editing view if nested product type has no attributes', async () => {
+  const initialValues = {
+    'nested-fields-level-0': [{ name: 'numeric-field-level-0', value: 10 }],
+  };
+
+  mockServer.use(
+    graphql.query('FetchProductTypeQuery', (req, res, ctx) =>
+      res.once(
+        ctx.data({
+          productType: ProductType.random()
+            .id(`nested-product-type-level-0`)
+            .name(`Nested Product Type (Level 0)`)
+            .attributeDefinitions(
+              buildGraphqlList([], { name: 'AttributeDefinitions', total: 2 })
+            )
+            .buildGraphql(),
+        })
+      )
+    )
+  );
+
+  render(<CustomFields isDisabled fieldDefinitions={fieldDefinitions} />, {
+    initialValues,
+  });
+
+  await waitInputToBeRendered();
+
+  const editButton = screen.queryByLabelText('Edit');
+  expect(editButton).not.toBeInTheDocument();
+
+  const reasonText = screen.getByText(
+    /the product type referenced does not contain any attribute/i
+  );
+  expect(reasonText).toBeInTheDocument();
+});
+
+it('should mark nested field not having values', async () => {
+  const initialValues = {};
+
+  render(<CustomFields fieldDefinitions={fieldDefinitions} />, {
+    initialValues,
+  });
+
+  await waitInputToBeRendered();
+
+  const emptyMessage = screen.getByText(/Empty/);
+  expect(emptyMessage).toBeInTheDocument();
+});
+
+it('should work fine with empty value', async () => {
+  const initialValues = {};
+
+  const { getFormikValues } = render(
+    <CustomFields fieldDefinitions={fieldDefinitions} />,
+    { initialValues }
+  );
+
+  await waitInputToBeRendered();
+  await startEditingNestedField('Nested Fields Level 0');
+  await enterFieldValue('Numeric Field Level 0', 20);
+  await saveNestedFields('Nested Fields Level 0');
+
+  expect(getFormikValues()).toStrictEqual({
+    'nested-fields-level-0': [{ name: 'numeric-field-level-0', value: 20 }],
+  });
+});
+
+it('should warn user about dropping unsaved changes', async () => {
+  const initialValues = {};
+
+  const { getFormikValues } = render(
+    <CustomFields fieldDefinitions={fieldDefinitions} />,
+    { initialValues }
+  );
+
+  await waitInputToBeRendered();
+  await startEditingNestedField('Nested Fields Level 0');
+  await enterFieldValue('Numeric Field Level 0', 20);
+  leaveNestedAttributesForm('Nested Fields Level 0');
+  await waitForDiscardConfirmation();
+  confirmChangesDiscard();
+
+  expect(
+    screen.queryByLabelText('Numeric Field Level 0')
+  ).not.toBeInTheDocument();
+
+  expect(getFormikValues()).toBe(initialValues);
+});
+
+it('should stay on editing screen if user do not confirm leaving it', async () => {
+  const initialValues = {};
+
+  const { getFormikValues } = render(
+    <CustomFields fieldDefinitions={fieldDefinitions} />,
+    { initialValues }
+  );
+
+  await waitInputToBeRendered();
+  await startEditingNestedField('Nested Fields Level 0');
+  await enterFieldValue('Numeric Field Level 0', 20);
+  leaveNestedAttributesForm('Nested Fields Level 0');
+  await waitForDiscardConfirmation();
+  cancelChangesDiscard();
+
+  expect(screen.getByLabelText('Numeric Field Level 0')).toBeInTheDocument();
+  expect(getFormikValues()).toBe(initialValues);
+});
+
+describe('when nested field itself has nested fields', () => {
+  const initialValues = {};
+
+  it('should prevent editing more than 5 levels deep', async () => {
+    render(<CustomFields fieldDefinitions={fieldDefinitions} />, {
+      initialValues,
+    });
+    await waitInputToBeRendered();
+    await startEditingNestedField('Nested Fields Level 0');
+    await startEditingNestedField('Nested Fields Level 1');
+    await startEditingNestedField('Nested Fields Level 2');
+    await startEditingNestedField('Nested Fields Level 3');
+    await startEditingNestedField('Nested Fields Level 4');
+
+    const nextLevelNestedField = await screen.findByTestId(
+      'nested-fields-level-5'
+    );
+    within(nextLevelNestedField).getByText(
+      'The Merchant Center currently supports the edition of nested attributes up to five levels only.'
+    );
+    const editButton = within(nextLevelNestedField).queryByLabelText('Edit');
+    expect(editButton).not.toBeInTheDocument();
+  });
+
+  it('should propagate changes to the top level <CustomFields /> from deeper nested attributes', async () => {
+    // ... because we don't want to force user to approve changes on every level of nesting
+    const { getFormikValues } = render(
+      <CustomFields fieldDefinitions={fieldDefinitions} />,
+      { initialValues }
+    );
+
+    await waitInputToBeRendered();
+    await startEditingNestedField('Nested Fields Level 0');
+    await startEditingNestedField('Nested Fields Level 1');
+    await enterFieldValue('Numeric Field Level 1', 30);
+    await saveNestedFields('Nested Fields Level 1');
+
+    expect(getFormikValues()).toStrictEqual({
+      'nested-fields-level-0': [
+        {
+          name: 'nested-fields-level-1',
+          value: [
+            {
+              name: 'numeric-field-level-1',
+              value: 30,
+            },
+          ],
+        },
+      ],
+    });
+  });
+
+  it('should apply changes from the sub-nested fields', async () => {
+    const { getFormikValues } = render(
+      <CustomFields fieldDefinitions={fieldDefinitions} />,
+      { initialValues }
+    );
+
+    await waitInputToBeRendered();
+    await startEditingNestedField('Nested Fields Level 0');
+    await startEditingNestedField('Nested Fields Level 1');
+    await enterFieldValue('Numeric Field Level 1', 30);
+    await saveNestedFields('Nested Fields Level 1');
+    await enterFieldValue('Numeric Field Level 0', 20);
+    await saveNestedFields('Nested Fields Level 0');
+
+    expect(getFormikValues()).toStrictEqual({
+      'nested-fields-level-0': [
+        {
+          name: 'nested-fields-level-1',
+          value: [{ name: 'numeric-field-level-1', value: 30 }],
+        },
+        { name: 'numeric-field-level-0', value: 20 },
+      ],
+    });
+  });
+
+  it('should discard changes made on intermediate nesting level without dropping changes from deeper levels', async () => {
+    const { getFormikValues } = render(
+      <CustomFields fieldDefinitions={fieldDefinitions} />,
+      { initialValues }
+    );
+
+    await waitInputToBeRendered();
+    await startEditingNestedField('Nested Fields Level 0');
+    await startEditingNestedField('Nested Fields Level 1');
+    await enterFieldValue('Numeric Field Level 1', 30);
+    await saveNestedFields('Nested Fields Level 1');
+    await enterFieldValue('Numeric Field Level 0', 20);
+    await revertChanges('Nested Fields Level 0');
+
+    await waitFor(() =>
+      expect(getFormikValues()).toStrictEqual({
+        'nested-fields-level-0': [
+          {
+            name: 'nested-fields-level-1',
+            value: [{ name: 'numeric-field-level-1', value: 30 }],
+          },
+        ],
+      })
+    );
+  });
+});

package/src/custom-fields/custom-fields/types/custom-nested-input/index.js

@@ -0,0 +1 @@
+export { default } from './custom-nested-input';

package/src/custom-fields/custom-fields/types/custom-nested-input/messages.js

@@ -0,0 +1,82 @@
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  updateButton: {
+    id: 'NestedAttributes.Details.updateButton',
+    description: 'Update button label',
+    defaultMessage: 'Update Attribute',
+  },
+  cancelButton: {
+    id: 'NestedAttributes.Details.cancelButton',
+    description: 'Cancel button label',
+    defaultMessage: 'Cancel',
+  },
+  attributeUpdateSucceeded: {
+    id: 'NestedAttributes.Details.attributeUpdateSucceeded',
+    description: 'Message for successful notification (update)',
+    defaultMessage: 'Attributes on this level have been successfully updated',
+  },
+  nestedAttributesConfirmLabel: {
+    id: 'NestedAttributes.Details.nestedAttributesConfirmLabel',
+    description: 'Text for confirmation button',
+    defaultMessage: 'Proceed without updating level',
+  },
+  confirmationDialogTitle: {
+    id: 'NestedAttributes.Details.confirmationDialogTitle',
+    description: 'Title for confirmation dialog',
+    defaultMessage: 'Discard changes',
+  },
+  confirmationDialogBody: {
+    id: 'NestedAttributes.Details.confirmationDialogBody',
+    description: 'Body text for confirmation dialog',
+    defaultMessage:
+      'By leaving this page, attributes on this level will not be updated. Would you like to proceed?',
+  },
+  editAttributeWarning: {
+    id: 'NestedAttributes.editAttributeWarning',
+    description: 'Warning message shown when nested attribute cannot be edited',
+    defaultMessage:
+      'Please create your product first in order to be able to edit this attribute',
+  },
+  hideSetItems: {
+    id: 'NestedAttributes.tooltip.hideSetItems',
+    description: 'Hide set items bottom',
+    defaultMessage: 'Hide set items ({countOfSetItem})',
+  },
+  showSetItems: {
+    id: 'NestedAttributes.tooltip.showSetItems',
+    description: 'Show set items bottom',
+    defaultMessage: 'Show set items ({countOfSetItem})',
+  },
+  editTooltip: {
+    id: 'NestedAttributes.tooltip.edit',
+    description: 'NestedAttributes edit tooltip',
+    defaultMessage: 'Edit Attributes',
+  },
+  deleteSetItemTooltip: {
+    id: 'NestedAttributes.tooltip.deleteSetItem',
+    description: 'NestedAttributes delete SetItem tooltip',
+    defaultMessage: 'Delete set item',
+  },
+  addSetItemTooltip: {
+    id: 'NestedAttributes.tooltip.addSetItem',
+    description: 'NestedAttributes add SetItem tooltip',
+    defaultMessage: 'Add set item',
+  },
+  addSetItemTooltipDisabled: {
+    id: 'NestedAttributes.tooltip.addSetItemTooltipDisabled',
+    description: 'NestedAttributes add SetItem tooltip (disabled)',
+    defaultMessage: 'Multiple empty set items cannot be added',
+  },
+  emptyProductType: {
+    id: 'NestedAttributes.emptyProductType',
+    description: 'message that shows when product type is empty',
+    defaultMessage:
+      'The product type referenced does not contain any attribute.',
+  },
+  referencedProductType: {
+    id: 'NestedAttributes.referencedProductType',
+    description: 'Product type referenced hint',
+    defaultMessage: 'Product type referenced: {productTypeName}',
+  },
+});

package/src/custom-fields/custom-fields/types/custom-number-input.jsx

@@ -0,0 +1,34 @@
+import PropTypes from 'prop-types';
+import { NumberInput } from '@commercetools-frontend/ui-kit';
+import { makeChangeHandler } from '../utils';
+
+export default function CustomNumberInput(props) {
+  const value = props.value ?? '';
+
+  const handleChange = makeChangeHandler((rawValue) =>
+    props.setFieldValue(props.name, !rawValue ? undefined : Number(rawValue))
+  );
+
+  return (
+    <NumberInput
+      id={props.name}
+      name={props.name}
+      value={value}
+      onChange={handleChange}
+      onBlur={props.onBlur}
+      hasError={props.hasError}
+      isDisabled={props.isDisabled}
+      isReadOnly={props.isReadOnly}
+    />
+  );
+}
+CustomNumberInput.displayName = 'CustomNumberInput';
+CustomNumberInput.propTypes = {
+  name: PropTypes.string.isRequired,
+  value: PropTypes.any,
+  setFieldValue: PropTypes.func.isRequired,
+  isDisabled: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  onBlur: PropTypes.func.isRequired,
+  hasError: PropTypes.bool,
+};

package/src/custom-fields/custom-fields/types/custom-number-input.spec.js

@@ -0,0 +1,42 @@
+import {
+  screen,
+  waitFor,
+} from '@commercetools-frontend/application-shell/test-utils';
+import { renderCustomFields, enterValue } from '../test-utils';
+
+const fieldDefinitions = [
+  {
+    name: 'numberAttr',
+    type: {
+      name: 'number',
+    },
+  },
+];
+
+describe('CustomNumberInput', () => {
+  it('should show placeholder when value is empty', async () => {
+    renderCustomFields({ fieldDefinitions });
+    await screen.findByDisplayValue('');
+  });
+
+  it('should render provided value', async () => {
+    renderCustomFields({
+      fieldDefinitions,
+      initialValues: { numberAttr: 10 },
+    });
+    await screen.findByDisplayValue('10');
+  });
+
+  it('should let user change values', async () => {
+    const { getFormikValues } = renderCustomFields({
+      fieldDefinitions,
+    });
+    await screen.findByDisplayValue('');
+
+    enterValue('numberAttr', '10');
+    expect(getFormikValues()).toStrictEqual({ numberAttr: 10 });
+
+    enterValue('numberAttr', '');
+    await waitFor(() => expect(getFormikValues()).toStrictEqual({}));
+  });
+});

package/src/custom-fields/custom-fields/types/custom-reference-input/custom-cart-discount-reference-input.jsx

@@ -0,0 +1,44 @@
+import PropTypes from 'prop-types';
+import { CartDiscountReferenceSearch } from '../../../../components/attribute-definitions/reference-search';
+
+export default function CustomCartDiscountReferenceInput(props) {
+  const handleBlur = () => {
+    props.onBlur({
+      target: {
+        name: props.name,
+      },
+    });
+  };
+
+  const handleChange = (id) =>
+    props.onChange({
+      target: {
+        name: props.name,
+        value: id,
+      },
+    });
+
+  return (
+    <CartDiscountReferenceSearch
+      id={props.name}
+      value={props.value}
+      onChange={handleChange}
+      onBlur={handleBlur}
+      hasError={props.hasError}
+      isDisabled={props.isDisabled || props.isReadOnly}
+      isClearable={!props.fieldDefinition.required}
+    />
+  );
+}
+CustomCartDiscountReferenceInput.propTypes = {
+  name: PropTypes.string.isRequired,
+  fieldDefinition: PropTypes.shape({
+    required: PropTypes.bool,
+  }).isRequired,
+  value: PropTypes.any,
+  isDisabled: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  onBlur: PropTypes.func.isRequired,
+  onChange: PropTypes.func.isRequired,
+  hasError: PropTypes.bool,
+};