@commercetools-frontend/experimental-components 0.0.2

package/src/custom-fields/custom-fields/types/custom-reference-input/custom-product-type-reference-input.spec.js

@@ -0,0 +1,146 @@
+import '@commercetools-local/test-utils/src/ui-kit-mocks';
+import { graphql } from 'msw';
+import { setupServer } from 'msw/node';
+import {
+  screen,
+  waitFor,
+  fireEvent,
+} from '@commercetools-frontend/application-shell/test-utils';
+import { buildGraphqlList } from '@commercetools-test-data/core';
+import { ProductType } from '@commercetools-local/test-data';
+import {
+  renderCustomFieldsWithGraphqlMock,
+  clearValue,
+} from '../../test-utils';
+
+const milk = ProductType.presets.milk().buildGraphql();
+const tshirt = ProductType.presets.tshirt();
+
+const mockServer = setupServer(
+  graphql.query('FetchIndicesExist', (req, res, ctx) =>
+    res(
+      ctx.data({
+        indicesExist: {
+          products: {
+            searchableIndexExists: false,
+            newInProgress: false,
+          },
+          productTypes: {
+            searchableIndexExists: false,
+            newInProgress: false,
+          },
+        },
+      })
+    )
+  ),
+  graphql.query('GetProductTypeQuery', (req, res, ctx) =>
+    res(
+      ctx.data({
+        productType: milk,
+      })
+    )
+  ),
+  graphql.query('GetProductTypesQuery', (req, res, ctx) =>
+    res(
+      ctx.data({
+        productTypes: buildGraphqlList([tshirt], {
+          name: 'ProductType',
+          total: 2,
+        }),
+      })
+    )
+  )
+);
+
+afterEach(() => {
+  mockServer.resetHandlers();
+});
+
+beforeAll(() => mockServer.listen({ onUnhandledRequest: 'error' }));
+
+afterAll(() => mockServer.close());
+
+describe('CustomProductReferenceInput', () => {
+  const fieldDefinitions = [
+    {
+      name: 'productTypeRefAttr',
+      type: {
+        name: 'reference',
+        referenceTypeId: 'product-type',
+      },
+    },
+  ];
+
+  it('should show placeholder when value is empty', async () => {
+    renderCustomFieldsWithGraphqlMock({ fieldDefinitions });
+    await screen.findByText(/Search by product type name/);
+  });
+
+  it('should load a product type by provided product id value', async () => {
+    renderCustomFieldsWithGraphqlMock({
+      fieldDefinitions,
+      initialValues: {
+        productTypeRefAttr: { id: milk.id, typeId: 'product-type' },
+      },
+    });
+    await screen.findByText(/Milk/);
+  });
+
+  it('should behave fine if product type was not found', async () => {
+    mockServer.use(
+      graphql.query('GetProductQuery', (req, res, ctx) =>
+        res.once(
+          ctx.data({
+            product: null,
+          })
+        )
+      )
+    );
+
+    renderCustomFieldsWithGraphqlMock({
+      fieldDefinitions,
+      initialValues: {
+        productTypeRefAttr: { id: milk.id, typeId: 'product-type' },
+      },
+    });
+  });
+
+  it('should let user change value', async () => {
+    const { getFormikValues } = renderCustomFieldsWithGraphqlMock({
+      fieldDefinitions,
+      initialValues: {
+        productTypeRefAttr: { id: milk.id, typeId: 'product-type' },
+      },
+    });
+    await screen.findByText(/Milk/);
+
+    const input = screen.getByLabelText('productTypeRefAttr');
+    fireEvent.change(input, { target: { value: 'T-sh' } });
+    fireEvent.focus(input);
+    fireEvent.keyDown(input, { key: 'ArrowDown' });
+
+    const option = await screen.findByText('T-shirt Product Type');
+    fireEvent.click(option);
+
+    await waitFor(() =>
+      expect(getFormikValues()).toStrictEqual({
+        productTypeRefAttr: {
+          id: tshirt.buildGraphql().id,
+          typeId: 'product-type',
+        },
+      })
+    );
+  });
+
+  it('should drop empty value from formik values', async () => {
+    const { getFormikValues } = renderCustomFieldsWithGraphqlMock({
+      fieldDefinitions,
+      initialValues: {
+        productTypeRefAttr: { id: milk.id, typeId: 'product-type' },
+      },
+    });
+    await screen.findByText(/Milk/);
+    await clearValue('productTypeRefAttr');
+    await waitFor(() => expect(getFormikValues()).toStrictEqual({}));
+  });
+});

package/src/custom-fields/custom-fields/types/custom-reference-input/custom-raw-id-reference-input.jsx

@@ -0,0 +1,32 @@
+import PropTypes from 'prop-types';
+import { TextInput } from '@commercetools-frontend/ui-kit';
+import CustomFieldTooltip from '../../custom-field-tooltip';
+
+export default function CustomRawIdReferenceInput(props) {
+  const value = props.value?.id || '';
+
+  return (
+    <CustomFieldTooltip title={value}>
+      <TextInput
+        id={props.name}
+        value={value}
+        onChange={props.onChange}
+        onBlur={props.onBlur}
+        hasError={props.hasError}
+        isDisabled={props.isDisabled}
+        isReadOnly={props.isReadOnly}
+      />
+    </CustomFieldTooltip>
+  );
+}
+
+CustomRawIdReferenceInput.displayName = 'CustomRawIdReferenceInput';
+CustomRawIdReferenceInput.propTypes = {
+  name: PropTypes.string.isRequired,
+  value: PropTypes.any,
+  isDisabled: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  onBlur: PropTypes.func.isRequired,
+  onChange: PropTypes.func.isRequired,
+  hasError: PropTypes.bool,
+};

package/src/custom-fields/custom-fields/types/custom-reference-input/custom-raw-id-reference-input.spec.js

@@ -0,0 +1,83 @@
+import xhrMock from 'xhr-mock';
+import { createGraphqlMock } from '@commercetools-local/test-utils';
+import {
+  screen,
+  waitFor,
+  fireEvent,
+} from '@commercetools-frontend/application-shell/test-utils';
+import {
+  renderCustomFieldsWithGraphqlMock,
+  enterValue,
+} from '../../test-utils';
+
+beforeEach(() => {
+  xhrMock.setup();
+  const resolvers = {
+    ctp: {
+      query: {},
+    },
+  };
+  createGraphqlMock(xhrMock, { resolvers });
+});
+
+afterEach(() => {
+  xhrMock.teardown();
+});
+
+describe('CustomRawIdReferenceInput (for reference attributes for which pickers are not implemented yet)', () => {
+  const fieldDefinitions = [
+    {
+      name: 'referenceAttr',
+      type: {
+        name: 'reference',
+        referenceTypeId: 'shopping-list',
+      },
+    },
+  ];
+
+  it('should show placeholder when value is empty', async () => {
+    renderCustomFieldsWithGraphqlMock({ fieldDefinitions });
+    await screen.findByDisplayValue('');
+  });
+
+  it('should show reference type name and give user a hint that ID should be entered', async () => {
+    renderCustomFieldsWithGraphqlMock({ fieldDefinitions });
+    await screen.findByText('Shopping-list ID');
+  });
+
+  it('should render provided value', async () => {
+    renderCustomFieldsWithGraphqlMock({
+      fieldDefinitions,
+      initialValues: { referenceAttr: { id: 'shopping-list-id' } },
+    });
+    await screen.findByDisplayValue('shopping-list-id');
+  });
+
+  it('should let user change value', async () => {
+    const { getFormikValues } = renderCustomFieldsWithGraphqlMock({
+      fieldDefinitions,
+    });
+    const input = await screen.findByDisplayValue('');
+    fireEvent.change(input, {
+      target: { name: 'referenceAttr', value: 'shopping-list-id' },
+    });
+
+    await waitFor(() =>
+      expect(getFormikValues()).toStrictEqual({
+        referenceAttr: {
+          id: 'shopping-list-id',
+          typeId: 'shopping-list',
+        },
+      })
+    );
+  });
+
+  it('should drop empty value from formik values', async () => {
+    const { getFormikValues } = renderCustomFieldsWithGraphqlMock({
+      fieldDefinitions,
+      initialValues: { referenceAttr: { id: 'shopping-list-id' } },
+    });
+    await enterValue('referenceAttr', '');
+    await waitFor(() => expect(getFormikValues()).toStrictEqual({}));
+  });
+});

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

@@ -0,0 +1,78 @@
+import PropTypes from 'prop-types';
+import CustomRawIdReferenceInput from './custom-raw-id-reference-input';
+import CustomCategoryReferenceInput from './custom-category-reference-input';
+import CustomCartDiscountReferenceInput from './custom-cart-discount-reference-input';
+import CustomProductReferenceInput from './custom-product-reference-input';
+import CustomProductTypeReferenceInput from './custom-product-type-reference-input';
+import CustomChannelReferenceInput from './custom-channel-reference-input';
+import CustomStateReferenceInput from './custom-state-reference-input';
+import { SEARCHABLE_REFERENCES } from '../../../../constants';
+import { makeChangeHandler } from '../../utils';
+
+/*
+ This component is an entry point for all the reference inputs.
+ Whenever new reference input is implemented, this component has to
+ be extended to support it.
+
+ All reference types which do not have a corresponding picker yet
+ fallback to raw id input, which is just a TextInput under the hood,
+ without any type-ahead suggestions.
+*/
+export default function CustomReferenceInput(props) {
+  const type = props.fieldDefinition.type;
+  const referenceTypeId = type.referenceTypeId;
+
+  const handleChange = makeChangeHandler((rawValue) => {
+    const nullifiedIfNeeded = rawValue
+      ? { id: rawValue, typeId: referenceTypeId }
+      : undefined;
+    props.setFieldValue(props.name, nullifiedIfNeeded);
+  });
+
+  const ReferenceInputComponent = do {
+    if (referenceTypeId === SEARCHABLE_REFERENCES.category)
+      CustomCategoryReferenceInput;
+    else if (referenceTypeId === SEARCHABLE_REFERENCES.cartDiscount)
+      CustomCartDiscountReferenceInput;
+    else if (referenceTypeId === SEARCHABLE_REFERENCES.product)
+      CustomProductReferenceInput;
+    else if (referenceTypeId === SEARCHABLE_REFERENCES.productType)
+      CustomProductTypeReferenceInput;
+    else if (referenceTypeId === SEARCHABLE_REFERENCES.channel)
+      CustomChannelReferenceInput;
+    else if (referenceTypeId === SEARCHABLE_REFERENCES.state)
+      CustomStateReferenceInput;
+    else CustomRawIdReferenceInput;
+  };
+
+  return (
+    <ReferenceInputComponent
+      id={props.name}
+      name={props.name}
+      fieldDefinition={props.fieldDefinition}
+      value={props.value}
+      setFieldValue={props.setFieldValue}
+      isDisabled={props.isDisabled}
+      isReadOnly={props.isReadOnly}
+      onBlur={props.onBlur}
+      hasError={props.hasError}
+      onChange={handleChange}
+    />
+  );
+}
+
+CustomReferenceInput.displayName = 'CustomReferenceInput';
+CustomReferenceInput.propTypes = {
+  name: PropTypes.string.isRequired,
+  fieldDefinition: PropTypes.shape({
+    type: PropTypes.shape({
+      referenceTypeId: PropTypes.string.isRequired,
+    }).isRequired,
+  }).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-reference-input/custom-state-reference-input.jsx

@@ -0,0 +1,36 @@
+import PropTypes from 'prop-types';
+import { StatePickerInput } from '../../../../internal-index';
+
+export default function CustomStateReferenceInput(props) {
+  const value = props.value?.id || '';
+
+  return (
+    <StatePickerInput
+      value={value}
+      name={props.name}
+      isClearable={!props.fieldDefinition.required}
+      isReadOnly={props.isReadOnly}
+      isDisabled={props.isDisabled}
+      onBlur={props.onBlur}
+      onChange={props.onChange}
+      hasError={props.hasError}
+      onError={() => null}
+    />
+  );
+}
+CustomStateReferenceInput.displayName = 'CustomStateReferenceInput';
+CustomStateReferenceInput.propTypes = {
+  name: PropTypes.string.isRequired,
+  fieldDefinition: PropTypes.shape({
+    type: PropTypes.shape({
+      referenceTypeId: PropTypes.string.isRequired,
+    }).isRequired,
+    required: PropTypes.bool,
+  }).isRequired,
+  value: PropTypes.any,
+  isDisabled: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  onBlur: PropTypes.func.isRequired,
+  onChange: PropTypes.func.isRequired,
+  hasError: PropTypes.bool,
+};

package/src/custom-fields/custom-fields/types/custom-reference-input/custom-state-reference-input.spec.js

@@ -0,0 +1,130 @@
+import '@commercetools-local/test-utils/src/ui-kit-mocks';
+import { graphql } from 'msw';
+import { setupServer } from 'msw/node';
+import {
+  screen,
+  waitFor,
+  fireEvent,
+} from '@commercetools-frontend/application-shell/test-utils';
+import { buildGraphqlList } from '@commercetools-test-data/core';
+import { State } from '@commercetools-local/test-data';
+import {
+  renderCustomFieldsWithGraphqlMock,
+  clearValue,
+} from '../../test-utils';
+
+const packedState = State.presets.packed().buildGraphql();
+const shippedState = State.presets.shipped();
+
+const mockServer = setupServer(
+  graphql.query('GetStateQuery', (req, res, ctx) =>
+    res(
+      ctx.data({
+        state: packedState,
+      })
+    )
+  ),
+  graphql.query('GetStatesQuery', (req, res, ctx) =>
+    res(
+      ctx.data({
+        states: buildGraphqlList([shippedState], {
+          name: 'State',
+          total: 2,
+        }),
+      })
+    )
+  )
+);
+
+afterEach(() => {
+  mockServer.resetHandlers();
+});
+
+beforeAll(() => mockServer.listen({ onUnhandledRequest: 'error' }));
+
+afterAll(() => mockServer.close());
+
+describe('CustomStateReferenceInput', () => {
+  const fieldDefinitions = [
+    {
+      name: 'stateRefAttr',
+      type: {
+        name: 'reference',
+        referenceTypeId: 'state',
+      },
+    },
+  ];
+
+  it('should show placeholder when value is empty', async () => {
+    renderCustomFieldsWithGraphqlMock({ fieldDefinitions });
+    await screen.findByText(/Search by state name, key or type an ID/);
+  });
+
+  it('should load a state by provided state id value', async () => {
+    renderCustomFieldsWithGraphqlMock({
+      fieldDefinitions,
+      initialValues: {
+        stateRefAttr: { id: packedState.id, typeId: 'state' },
+      },
+    });
+    await screen.findByText(/Packed/);
+  });
+
+  it('should behave fine if state was not found', async () => {
+    mockServer.use(
+      graphql.query('GetStateQuery', (req, res, ctx) =>
+        res.once(
+          ctx.data({
+            state: null,
+          })
+        )
+      )
+    );
+
+    renderCustomFieldsWithGraphqlMock({
+      fieldDefinitions,
+      initialValues: {
+        stateRefAttr: { id: packedState.id, typeId: 'state' },
+      },
+    });
+  });
+
+  it('should let user change value', async () => {
+    const { getFormikValues } = renderCustomFieldsWithGraphqlMock({
+      fieldDefinitions,
+      initialValues: {
+        stateRefAttr: { id: packedState.id, typeId: 'state' },
+      },
+    });
+    await screen.findByText(/Packed/);
+
+    const input = screen.getByLabelText('stateRefAttr');
+    fireEvent.change(input, { target: { value: 'Ship' } });
+    fireEvent.focus(input);
+    fireEvent.keyDown(input, { key: 'ArrowDown' });
+
+    const option = await screen.findByText('Shipped');
+    fireEvent.click(option);
+
+    await waitFor(() =>
+      expect(getFormikValues()).toStrictEqual({
+        stateRefAttr: {
+          id: shippedState.buildGraphql().id,
+          typeId: 'state',
+        },
+      })
+    );
+  });
+
+  it('should drop empty value from formik values', async () => {
+    const { getFormikValues } = renderCustomFieldsWithGraphqlMock({
+      fieldDefinitions,
+      initialValues: {
+        stateRefAttr: { id: packedState.id, typeId: 'state' },
+      },
+    });
+    await screen.findByText(/Packed/);
+    await clearValue('stateRefAttr');
+    await waitFor(() => expect(getFormikValues()).toStrictEqual({}));
+  });
+});

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

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

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

@@ -0,0 +1,46 @@
+import { MultilineTextInput, TextInput } from '@commercetools-frontend/ui-kit';
+import PropTypes from 'prop-types';
+import { makeChangeHandler } from '../utils';
+import CustomFieldTooltip from '../custom-field-tooltip';
+
+export default function CustomTextInput(props) {
+  const isMultiLine = props.fieldDefinition.inputHint === 'MultiLine';
+
+  const InputComponent = isMultiLine ? MultilineTextInput : TextInput;
+
+  const value = props.value || '';
+
+  const handleChange = makeChangeHandler((rawValue) =>
+    props.setFieldValue(props.name, rawValue || undefined)
+  );
+
+  const tooltipValue = isMultiLine ? '' : value;
+
+  return (
+    <CustomFieldTooltip title={tooltipValue}>
+      <InputComponent
+        id={props.name}
+        name={props.name}
+        value={value}
+        onChange={handleChange}
+        onBlur={props.onBlur}
+        hasError={props.hasError}
+        isDisabled={props.isDisabled}
+        isReadOnly={props.isReadOnly}
+      />
+    </CustomFieldTooltip>
+  );
+}
+CustomTextInput.displayName = 'CustomTextInput';
+CustomTextInput.propTypes = {
+  name: PropTypes.string.isRequired,
+  fieldDefinition: PropTypes.shape({
+    inputHint: 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-text-input.spec.js

@@ -0,0 +1,66 @@
+import '@commercetools-local/test-utils/src/ui-kit-mocks';
+import {
+  screen,
+  waitFor,
+  fireEvent,
+} from '@commercetools-frontend/application-shell/test-utils';
+import { renderCustomFields, enterValue } from '../test-utils';
+
+const fieldDefinitions = [
+  {
+    name: 'textAttr',
+    type: {
+      name: 'text',
+    },
+    inputTip: { en: 'input field description' },
+  },
+];
+
+describe('CustomTextInput', () => {
+  it('should show placeholder when value is empty', async () => {
+    renderCustomFields({ fieldDefinitions });
+    await screen.findByDisplayValue('');
+  });
+
+  it('should show input tip', async () => {
+    renderCustomFields({
+      fieldDefinitions,
+    });
+    await screen.findByText('input field description');
+  });
+
+  it('should render provided value', async () => {
+    renderCustomFields({
+      fieldDefinitions,
+      initialValues: { textAttr: 'some text' },
+    });
+    await screen.findByDisplayValue('some text');
+
+    expect(screen.queryByText('some text')).not.toBeInTheDocument();
+  });
+
+  it('should let user change values', async () => {
+    const { getFormikValues } = renderCustomFields({
+      fieldDefinitions,
+    });
+    await screen.findByDisplayValue('');
+
+    enterValue('textAttr', 'some text');
+    expect(getFormikValues()).toStrictEqual({ textAttr: 'some text' });
+
+    enterValue('textAttr', '');
+    await waitFor(() => expect(getFormikValues()).toStrictEqual({}));
+  });
+
+  it('should show the tooltip on hover when the value is greater than 40 characters', async () => {
+    const value = 'this is a test label which is forty plus chars';
+    renderCustomFields({
+      fieldDefinitions,
+      initialValues: { textAttr: value },
+    });
+    fireEvent.mouseOver(screen.getByLabelText('textAttr'));
+
+    expect(screen.getAllByDisplayValue(value)).toHaveLength(1); // field value
+    expect(screen.getAllByText(value)).toHaveLength(1); // tooltip
+  });
+});

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

@@ -0,0 +1,74 @@
+import { useState, useEffect, useCallback, useRef } from 'react';
+import PropTypes from 'prop-types';
+import { useApplicationContext } from '@commercetools-frontend/application-shell-connectors';
+import { TimeInput } from '@commercetools-frontend/ui-kit';
+import { makeChangeHandler } from '../utils';
+
+export default function CustomTimeInput(props) {
+  const { timeZone, projectLanguage } = useApplicationContext(
+    (applicationContext) => ({
+      timeZone: applicationContext.user.timeZone,
+      projectLanguage: applicationContext.dataLocale,
+    })
+  );
+
+  const formatTime = useCallback(
+    (valueToFormat) =>
+      TimeInput.toLocaleTime(valueToFormat, projectLanguage) || '',
+    [projectLanguage]
+  );
+
+  const [internalValue, setInternalValue] = useState(formatTime(props.value));
+
+  const lastValueSentToFormik = useRef();
+
+  useEffect(() => {
+    if (lastValueSentToFormik.current !== props.value) {
+      setInternalValue(formatTime(props.value));
+    }
+  }, [props.value, formatTime]);
+
+  const handleChange = makeChangeHandler((rawValue) => {
+    setInternalValue(rawValue);
+    const in24hFormat = TimeInput.to24h(rawValue) || undefined;
+    // Avoid sending malformed values to Formik. Otherwise, due to the
+    // conversions we do back and forth input field will be reset to empty
+    // string once a malformed value is sent to Formik. Which results in
+    // horrible UX.
+    const isMalformed = rawValue && !in24hFormat;
+    if (!isMalformed) {
+      lastValueSentToFormik.current = in24hFormat;
+      props.setFieldValue(props.name, in24hFormat);
+    }
+  });
+
+  return (
+    <TimeInput
+      id={props.name}
+      name={props.name}
+      value={internalValue}
+      onChange={handleChange}
+      onBlur={props.onBlur}
+      timeZone={timeZone}
+      hasError={props.hasError}
+      isDisabled={props.isDisabled}
+      isReadOnly={props.isReadOnly}
+    />
+  );
+}
+
+CustomTimeInput.displayName = 'CustomTimeInput';
+CustomTimeInput.propTypes = {
+  name: PropTypes.string.isRequired,
+  fieldDefinition: PropTypes.shape({
+    type: PropTypes.shape({
+      name: PropTypes.string.isRequired,
+    }).isRequired,
+  }).isRequired,
+  value: PropTypes.any,
+  setFieldValue: PropTypes.func.isRequired,
+  isDisabled: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  onBlur: PropTypes.func.isRequired,
+  hasError: PropTypes.bool,
+};