@commercetools-frontend/experimental-components 0.0.2

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

@@ -0,0 +1,91 @@
+import {
+  screen,
+  fireEvent,
+  waitFor,
+} from '@commercetools-frontend/application-shell/test-utils';
+import { renderCustomFields, enterValue } from '../test-utils';
+
+describe('CustomTimeInput', () => {
+  const fieldDefinitions = [
+    {
+      name: 'datetimeAttr',
+      type: {
+        name: 'time',
+      },
+    },
+  ];
+
+  it('should show empty input when value is empty', async () => {
+    renderCustomFields({ fieldDefinitions });
+    const input = await screen.findByLabelText('datetimeAttr');
+    expect(input.value).toBe('');
+  });
+
+  it('should render provided time value', async () => {
+    renderCustomFields({
+      fieldDefinitions,
+      initialValues: { datetimeAttr: '14:00' },
+    });
+    await screen.findByDisplayValue('2:00 PM');
+  });
+
+  it('should let user change value', async () => {
+    const { getFormikValues } = renderCustomFields({
+      fieldDefinitions,
+      initialValues: { datetimeAttr: '14:00' },
+    });
+    const input = await screen.findByDisplayValue('2:00 PM');
+
+    enterValue('datetimeAttr', '15:00');
+    fireEvent.blur(input);
+    await screen.findByDisplayValue('3:00 PM');
+    await waitFor(() => {
+      expect(getFormikValues()).toStrictEqual({ datetimeAttr: '15:00' });
+    });
+  });
+
+  it('should drop empty value from formik values', async () => {
+    const { getFormikValues } = renderCustomFields({
+      fieldDefinitions,
+      initialValues: { datetimeAttr: '14:00' },
+    });
+    // TODO(pa3): add a proper label to a close button in UIKIT
+    // and use clickClearButton here
+    const clearButton = screen.getByRole('button', {
+      ariaLabel: 'clear',
+    });
+    fireEvent.click(clearButton);
+
+    await waitFor(() => {
+      expect(getFormikValues()).toStrictEqual({});
+    });
+  });
+
+  it('should reset entered value if Formik resets', async () => {
+    const { resetForm } = renderCustomFields({
+      fieldDefinitions,
+      initialValues: { datetimeAttr: '14:00' },
+    });
+    const input = await screen.findByDisplayValue('2:00 PM');
+    enterValue('datetimeAttr', '15:00');
+    fireEvent.blur(input);
+
+    resetForm();
+
+    await screen.findByDisplayValue('2:00 PM');
+  });
+
+  it('should not update Formik with malformed values', async () => {
+    const { getFormikValues } = renderCustomFields({
+      fieldDefinitions,
+      initialValues: { datetimeAttr: '14:00' },
+    });
+    await screen.findByDisplayValue('2:00 PM');
+
+    enterValue('datetimeAttr', 'wat?!');
+
+    await waitFor(() => {
+      expect(getFormikValues()).toStrictEqual({ datetimeAttr: '14:00' });
+    });
+  });
+});

package/src/custom-fields/custom-fields/utils/index.js

@@ -0,0 +1 @@
+export * from './utils';

package/src/custom-fields/custom-fields/utils/utils.js

@@ -0,0 +1,22 @@
+import isNil from 'lodash.isnil';
+import omitBy from 'lodash.omitby';
+
+export const getType = (fieldDefinition) => {
+  const fieldDefinitionType =
+    fieldDefinition.type.name.toLowerCase() === 'set'
+      ? fieldDefinition.type.elementType
+      : fieldDefinition.type;
+  return fieldDefinitionType;
+};
+
+export const makeChangeHandler = (setValue) => (event) => {
+  const { name, value } = event.target;
+  setValue(value, name);
+};
+
+// In case attribute were removed from a product it still will be
+// present in attribute values. This, in turn, will lead to errors
+// when updating a product. So, we want to omit this kind of left-over
+// attributes.
+export const omitUnknownValues = (valuesAsMap, fieldDefinitionsAsMap) =>
+  omitBy(valuesAsMap, (value, key) => isNil(fieldDefinitionsAsMap[key]));

package/src/custom-fields/custom-fields/validations/index.js

@@ -0,0 +1 @@
+export { default } from './validations';

package/src/custom-fields/custom-fields/validations/validations.js

@@ -0,0 +1,117 @@
+import isNil from 'lodash.isnil';
+import has from 'lodash.has';
+import {
+  withoutEmptyErrorsByField,
+  unique as extractDuplicatedValue,
+} from '../../../internal-index';
+import { TextInput } from '@commercetools-frontend/ui-kit';
+import { getType } from '../utils';
+import { REFERENCED_TYPES } from '../constants';
+
+const extractDuplicatedValues = (values, type, language, languages) => {
+  let validatedValues = [];
+  if (type.name.toLowerCase() === 'money') {
+    validatedValues = extractDuplicatedValue(values, [
+      'amount',
+      'currencyCode',
+    ]);
+  } else if (type.name.toLowerCase() === 'reference')
+    validatedValues = extractDuplicatedValue(
+      values.filter((value) => value?.id),
+      ['id']
+    );
+  else if (type.name.toLowerCase() === 'localizedstring') {
+    validatedValues = extractDuplicatedValue(values, languages);
+  } else validatedValues = extractDuplicatedValue(values);
+
+  return validatedValues;
+};
+
+const setDuplicatedIfSet = (
+  formValues,
+  fieldDefinition,
+  language,
+  languages
+) => {
+  const fieldValue = formValues.custom.fields[fieldDefinition.name];
+  if (
+    fieldDefinition.type.name.toLowerCase() === 'set' &&
+    Array.isArray(fieldValue)
+  ) {
+    const duplicatedValues = extractDuplicatedValues(
+      fieldValue,
+      getType(fieldDefinition),
+      language,
+      languages
+    );
+    return {
+      duplicated: {
+        // although this is mixing concerns, we pass down `duplicatedValues` to the form.
+        // we do this to avoid extracting duplicate values also on render phase of the CustomField component,
+        values: duplicatedValues,
+      },
+    };
+  }
+  return {};
+};
+
+/**
+ * Return true if the value is an object whose every value
+ *   is equivalent to an empty string. Return false otherwise.
+ * @param {*} value - Value to test against.
+ * @returns {boolean}
+ */
+// TODO(pa3): investigate if empty object can be a value returned from CustomFields at all
+const objectWithEmptyValues = (value) => {
+  // typeof null is an object
+  // make sure value is something that we can call Object.keys on.
+  if (typeof value !== 'object' || value === null) return false;
+  // Calling `every` method on an empty array will return true for any condition!
+  // Works fine in our case, for an empty object.
+  return Object.keys(value).every(
+    (key) => typeof value[key] === 'string' && TextInput.isEmpty(value[key])
+  );
+};
+
+const hasMissingValues = (value) => {
+  if (isNil(value)) return true;
+  if (typeof value === 'string' && value.trim() === '') return true;
+  if (has(REFERENCED_TYPES, value.typeId) && !value.id) return true;
+  if (value.currencyCode && value.amount === '') return true;
+  if (objectWithEmptyValues(value)) return true;
+  return false;
+};
+
+const setMissingIfRequired = (formValues, fieldDefinition) => {
+  if (fieldDefinition.required) {
+    const fieldValue = formValues.custom.fields[fieldDefinition.name];
+    if (Array.isArray(fieldValue)) {
+      return fieldValue.every(hasMissingValues) && { missing: true };
+    }
+    return hasMissingValues(fieldValue) && { missing: true };
+  }
+  return {};
+};
+
+export default function (formValues, language, languages) {
+  // Collect all required and set type fields
+  const fieldDefinitionsToValidate =
+    formValues.custom.type.fieldDefinitions.filter(
+      (fieldDefinition) =>
+        fieldDefinition.required ||
+        fieldDefinition.type.name.toLowerCase() === 'set'
+    );
+
+  const errors = fieldDefinitionsToValidate.reduce(
+    (acc, fieldDefinition) => ({
+      ...acc,
+      [fieldDefinition.name]: {
+        ...setMissingIfRequired(formValues, fieldDefinition),
+        ...setDuplicatedIfSet(formValues, fieldDefinition, language, languages),
+      },
+    }),
+    {}
+  );
+
+  return withoutEmptyErrorsByField(errors);
+}

package/src/custom-fields/custom-fields/validations/validations.spec.js

@@ -0,0 +1,134 @@
+import validations from './validations';
+
+const createFormValues = (values) => ({
+  custom: {
+    fields: {
+      'single-required-text-field': 'test',
+      'set-DateTime-text': [
+        '2019-11-29T00:00:00.000Z',
+        '2019-11-05T00:00:00.000Z',
+      ],
+      'set-of-text-fields': ['text - 3', 'text - 2', 'text - 1'],
+      'number-field': 12,
+      'money-field': {
+        centAmount: 169900,
+        currencyCode: 'AUD',
+        fractionDigits: 2,
+        type: 'centPrecision',
+      },
+      ...values,
+    },
+    type: {
+      id: '9a566288-43ae-4ad6-b61e-bb5bf2f8516e',
+      key: 'third-super-custom-type',
+      name: {
+        en: 'Super custom type',
+      },
+      fieldDefinitions: [
+        {
+          name: 'number-field',
+          required: true,
+          type: {
+            name: 'Number',
+          },
+        },
+        {
+          name: 'money-field',
+          required: true,
+          type: {
+            name: 'Money',
+          },
+        },
+        {
+          name: 'single-required-text-field',
+          required: true,
+          inputHint: 'SingleLine',
+          type: {
+            name: 'String',
+          },
+          label: {
+            fr: 'String SingleLine',
+            it: 'String SingleLine',
+            en: 'String SingleLine',
+            de: 'String SingleLine',
+            es: 'String SingleLine',
+          },
+        },
+        {
+          name: 'set-of-text-fields',
+          required: false,
+          inputHint: 'SingleLine',
+          type: {
+            name: 'Set',
+            elementType: {
+              name: 'single-required-text-field',
+              required: false,
+              inputHint: 'SingleLine',
+              type: {
+                name: 'String',
+              },
+              label: {
+                fr: 'String SingleLine',
+                it: 'String SingleLine',
+                en: 'String SingleLine',
+                de: 'String SingleLine',
+                es: 'String SingleLine',
+              },
+            },
+          },
+          label: {
+            fr: 'Set String',
+            it: 'Set String',
+            en: 'Set String',
+            de: 'Set String',
+            es: 'Set String',
+          },
+        },
+      ],
+    },
+  },
+});
+
+describe('Validations', () => {
+  describe('when all values are provided', () => {
+    it('should return empty errors', () => {
+      const values = createFormValues();
+      expect(validations(values, 'en', ['en', 'de'])).toEqual({});
+    });
+  });
+
+  describe('when required field is missing', () => {
+    it('should return missing value error', () => {
+      const values = createFormValues({
+        'single-required-text-field': undefined,
+      });
+      expect(validations(values, 'en', ['en', 'de'])).toEqual({
+        'single-required-text-field': {
+          missing: true,
+        },
+      });
+    });
+  });
+
+  describe('when duplicated values are provided', () => {
+    it('should return the duplicated value', () => {
+      const values = createFormValues({
+        'set-of-text-fields': [
+          'val-1',
+          'val-2',
+          'val-3',
+          'val-2',
+          'val-5',
+          'val-3',
+        ],
+      });
+      expect(validations(values, 'en', ['en', 'de'])).toEqual({
+        'set-of-text-fields': {
+          duplicated: {
+            values: ['val-2', 'val-3'],
+          },
+        },
+      });
+    });
+  });
+});

package/src/custom-fields/custom-fields-error-text-notification/custom-fields-error-text-notification.jsx

@@ -0,0 +1,29 @@
+import PropTypes from 'prop-types';
+import { Spacings, Text } from '@commercetools-frontend/ui-kit';
+import messages from './messages';
+
+const CustomFieldsErrorTextNotification = (props) => (
+  <Spacings.Stack scale="s">
+    <Text.Wrap intlMessage={{ ...messages.customFieldsError }} />
+    <Spacings.Stack scale="xs">
+      {props.formErrors.map((formError) => (
+        <Text.Detail key={formError.field} isBold>
+          {formError.field}
+        </Text.Detail>
+      ))}
+    </Spacings.Stack>
+  </Spacings.Stack>
+);
+
+CustomFieldsErrorTextNotification.displayName =
+  'CustomFieldsErrorTextNotification';
+
+CustomFieldsErrorTextNotification.propTypes = {
+  formErrors: PropTypes.arrayOf(
+    PropTypes.shape({
+      field: PropTypes.string.isRequired,
+    })
+  ).isRequired,
+};
+
+export default CustomFieldsErrorTextNotification;

package/src/custom-fields/custom-fields-error-text-notification/custom-fields-error-text-notification.spec.js

@@ -0,0 +1,31 @@
+import { renderApp } from '@commercetools-frontend/application-shell/test-utils';
+import CustomFieldsErrorTextNotification from './custom-fields-error-text-notification';
+
+const createTestProps = (customProps) => ({
+  formErrors: [
+    {
+      field: 'String-1',
+    },
+    {
+      field: 'String-2',
+    },
+  ],
+  ...customProps,
+});
+
+describe('rendering', () => {
+  it('should render error message with the fields', async () => {
+    const props = createTestProps();
+    const rendered = renderApp(
+      <CustomFieldsErrorTextNotification {...props} />
+    );
+
+    expect(
+      rendered.getByText(
+        /Some of the custom fields that you have defined are required or not valid. Please check the following fields:/
+      )
+    ).toBeInTheDocument();
+    expect(rendered.getByText('String-1')).toBeInTheDocument();
+    expect(rendered.getByText('String-2')).toBeInTheDocument();
+  });
+});

package/src/custom-fields/custom-fields-error-text-notification/index.js

@@ -0,0 +1 @@
+export { default } from './custom-fields-error-text-notification';

package/src/custom-fields/custom-fields-error-text-notification/messages.js

@@ -0,0 +1,10 @@
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  customFieldsError: {
+    id: 'CustomFieldsError.Error',
+    description: 'The message when there are errors adding custom fields',
+    defaultMessage:
+      'Some of the custom fields that you have defined are required or not valid.\nPlease check the following fields:',
+  },
+});

package/src/custom-fields/messages/custom-fields.js

@@ -0,0 +1,17 @@
+import { defineMessages } from 'react-intl';
+
+// eslint-disable-next-line import/prefer-default-export
+export const customFieldsMessages = defineMessages({
+  aboveFifthLevelWarning: {
+    id: 'attributeInputByType.nestedAttributes.aboveFifthLevelWarning',
+    description:
+      'Warning message shown when nested attribute are above the fifth level',
+    defaultMessage:
+      'The Merchant Center currently supports the edition of nested attributes up to five levels only.',
+  },
+  emptySetItem: {
+    id: 'NestedAttributes.tooltip.emptySetItem',
+    description: 'Empty set item',
+    defaultMessage: 'Empty',
+  },
+});

package/src/features/picker/index.js

@@ -0,0 +1,11 @@
+export { Option, getBottomOption } from './shared/components';
+
+export { default as useHandlers } from './shared/hooks/use-handlers';
+
+/* options loading */
+// it's enough to use this default hook to load picker options
+export { default as useLoadOptions } from './shared/hooks/use-load-options';
+// but if you need customization, consider creating your own hook
+export { default as useProductTypeOptions } from './shared/hooks/use-product-type-options';
+
+export { default as useCurrentOption } from './shared/hooks/use-current-option';

package/src/features/picker/shared/components/index.js

@@ -0,0 +1 @@
+export { Option, getBottomOption } from './option';

package/src/features/picker/shared/components/messages.js

@@ -0,0 +1,9 @@
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  bottomOption: {
+    id: 'Products.Pickers.bottomOption',
+    description: 'The message to display at the end of the options menu',
+    defaultMessage: 'Start typing above to load more',
+  },
+});

package/src/features/picker/shared/components/option.jsx

@@ -0,0 +1,51 @@
+import { NO_VALUE_FALLBACK } from '@commercetools-frontend/constants';
+import {
+  AsyncSelectInput,
+  Spacings,
+  Text,
+} from '@commercetools-frontend/ui-kit';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import messages from './messages';
+
+const getBottomOption = () => ({
+  options: [
+    {
+      label: messages.bottomOption,
+      isBottomOption: true,
+      isDisabled: true,
+    },
+  ],
+});
+
+const Option = (props) => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <AsyncSelectInput.Option {...props}>
+      {props.data.isBottomOption ? (
+        <Text.Detail tone="secondary">
+          {formatMessage(props.data.label)}
+        </Text.Detail>
+      ) : (
+        <Spacings.Stack scale="xs">
+          <Text.Detail isBold>
+            {props.data.name || NO_VALUE_FALLBACK}
+          </Text.Detail>
+          <Text.Detail>Key: {props.data.key || NO_VALUE_FALLBACK}</Text.Detail>
+        </Spacings.Stack>
+      )}
+    </AsyncSelectInput.Option>
+  );
+};
+Option.displayName = 'Option';
+Option.propTypes = {
+  data: PropTypes.shape({
+    label: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
+    name: PropTypes.string,
+    key: PropTypes.string,
+    isBottomOption: PropTypes.bool,
+  }).isRequired,
+};
+
+export { Option, getBottomOption };

package/src/features/picker/shared/hooks/use-current-option.js

@@ -0,0 +1,24 @@
+import { useQuery } from '@apollo/client/react/hooks';
+import { GRAPHQL_TARGETS } from '@commercetools-frontend/constants';
+
+export default function useCurrentOption({
+  id,
+  query,
+  convertQueryResultToOption,
+}) {
+  const item = useQuery(query, {
+    context: {
+      target: GRAPHQL_TARGETS.COMMERCETOOLS_PLATFORM,
+    },
+    variables: {
+      id,
+    },
+    skip: !id,
+  });
+
+  return {
+    loading: item.loading,
+    data: item.data && convertQueryResultToOption(item.data),
+    error: item.error,
+  };
+}

package/src/features/picker/shared/hooks/use-current-option.spec.js

@@ -0,0 +1,125 @@
+import PropTypes from 'prop-types';
+import { graphql } from 'msw';
+import gql from 'graphql-tag';
+import { ApolloProvider } from '@apollo/client';
+import { waitFor } from '@commercetools-frontend/application-shell/test-utils';
+import { createApolloClient } from '@commercetools-frontend/application-shell';
+import { setupServer } from 'msw/node';
+import { renderHook } from '@testing-library/react-hooks';
+import { Product } from '@commercetools-local/test-data';
+import useCurrentOption from './use-current-option';
+
+const GetProductQuery = gql`
+  query GetProductQuery($id: String) {
+    product(id: $id) {
+      id
+      key
+      masterData {
+        current {
+          nameAllLocales {
+            locale
+            value
+          }
+        }
+      }
+    }
+  }
+`;
+const product = Product.presets.happyCowMilk().buildGraphql();
+
+const mockServer = setupServer(
+  graphql.query('GetProductQuery', (req, res, ctx) =>
+    res(
+      ctx.data({
+        product,
+      })
+    )
+  )
+);
+
+afterEach(() => {
+  mockServer.resetHandlers();
+});
+
+beforeAll(() => mockServer.listen());
+
+afterAll(() => mockServer.close());
+
+const convertQueryResultToOption = ({ product: { id, key, masterData } }) => {
+  const localizedName = masterData.current.nameAllLocales.find(
+    ({ locale }) => locale === 'en'
+  ).value;
+
+  return {
+    label: localizedName,
+    value: id,
+    name: localizedName,
+    key,
+  };
+};
+
+const render = async (props) => {
+  const apolloClient = createApolloClient();
+  const Wrapper = ({ children }) => (
+    <ApolloProvider client={apolloClient}>{children}</ApolloProvider>
+  );
+  Wrapper.propTypes = {
+    children: PropTypes.element.isRequired,
+  };
+
+  const { result, waitForNextUpdate } = renderHook(
+    () => useCurrentOption(props),
+    {
+      wrapper: Wrapper,
+    }
+  );
+
+  await waitForNextUpdate();
+
+  return { result };
+};
+
+describe('useCurrentOption', () => {
+  it('should return loaded item as an option', async () => {
+    const { result } = await render({
+      id: product.id,
+      convertQueryResultToOption,
+      query: GetProductQuery,
+    });
+
+    await waitFor(() =>
+      expect(result.current).toStrictEqual({
+        loading: false,
+        data: {
+          value: product.id,
+          label: 'Happy Cow Milk',
+          name: 'Happy Cow Milk',
+          key: 'happy-cow-milk-key',
+        },
+        error: undefined,
+      })
+    );
+  });
+
+  it('should return error if loading failed', async () => {
+    mockServer.use(
+      graphql.query('GetProductQuery', (req, res, ctx) =>
+        res.once(ctx.status(503))
+      )
+    );
+
+    const { result } = await render({
+      id: product.id,
+      convertQueryResultToOption,
+      query: GetProductQuery,
+    });
+
+    await waitFor(() =>
+      expect(result.current).toStrictEqual({
+        loading: false,
+        data: undefined,
+        error: expect.any(Error),
+      })
+    );
+  });
+});