@commercetools-frontend/experimental-components 0.0.2

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

@@ -0,0 +1,38 @@
+// eslint-disable-next-line import/prefer-default-export
+export const CUSTOM_FIELD_TYPES = {
+  text: 'text',
+  string: 'string',
+  localizedstring: 'localizedstring',
+  ltext: 'ltext',
+  number: 'number',
+  money: 'money',
+  boolean: 'boolean',
+  enum: 'enum',
+  localizedenum: 'localizedenum',
+  lenum: 'lenum',
+  reference: 'reference',
+  time: 'time',
+  datetime: 'datetime',
+  date: 'date',
+  nested: 'nested',
+};
+
+// {@link https://docs.commercetools.com/api/projects/types#referencetype}
+export const REFERENCED_TYPES = {
+  cart: 'cart',
+  channel: 'channel',
+  customer: 'customer',
+  'key-value-document': 'key-value-document',
+  order: 'order',
+  product: 'product',
+  'product-type': 'product-type',
+  review: 'review',
+  state: 'state',
+  'shipping-method': 'shipping-method',
+  zone: 'zone',
+};
+
+export const REFERENCED_TYPES_WITH_AUTOCOMPLETE = {
+  category: 'category',
+  'cart-discount': 'cart-discount',
+};

package/src/custom-fields/custom-fields/custom-field-errors.jsx

@@ -0,0 +1,60 @@
+import PropTypes from 'prop-types';
+import ValidationError from '../../components/validation-error';
+import {
+  useDidFormValidationFail,
+  validationMessages,
+} from '../../internal-index';
+
+import { ErrorMessage } from '@commercetools-frontend/ui-kit/';
+
+const mergeSetItemsErrors = (errors) =>
+  errors.reduce(
+    (result, itemErrors) => ({
+      ...result,
+      ...itemErrors,
+    }),
+    {}
+  );
+
+// TODO(pa3): worth splitting in two components: one of set errors and one for
+// all the other types of fields. So that there will be no isArray check.
+export const CustomFieldErrors = (props) => {
+  // We want to highlight fields with errors not only after a form submission,
+  // but also after manually triggered form validation.
+  const didFormValidationFail = useDidFormValidationFail();
+
+  const errors = Array.isArray(props.errors)
+    ? mergeSetItemsErrors(props.errors)
+    : props.errors;
+
+  return (
+    <ValidationError.Switch
+      errors={errors}
+      isTouched={props.isTouched || didFormValidationFail}
+    >
+      <ValidationError.Match rule="missing">
+        <ErrorMessage intlMessage={validationMessages.required} />
+      </ValidationError.Match>
+      <ValidationError.Match rule="duplicated">
+        <ErrorMessage intlMessage={validationMessages.unique} />
+      </ValidationError.Match>
+    </ValidationError.Switch>
+  );
+};
+
+CustomFieldErrors.displayName = 'CustomFieldErrors';
+CustomFieldErrors.propTypes = {
+  errors: PropTypes.oneOfType([
+    PropTypes.shape({
+      missing: PropTypes.bool,
+    }),
+    PropTypes.arrayOf(
+      PropTypes.shape({
+        duplicated: PropTypes.bool,
+      })
+    ).isRequired,
+  ]),
+  isTouched: PropTypes.bool.isRequired,
+};
+
+export default CustomFieldErrors;

package/src/custom-fields/custom-fields/custom-field-input.jsx

@@ -0,0 +1,100 @@
+import { memo } from 'react';
+import PropTypes from 'prop-types';
+import { CUSTOM_FIELD_TYPES } from './constants';
+import CustomTextInput from './types/custom-text-input';
+import CustomLocalizedTextInput from './types/custom-localized-text-input';
+import CustomBooleanInput from './types/custom-boolean-input';
+import CustomNumberInput from './types/custom-number-input';
+import CustomMoneyInput from './types/custom-money-input';
+import CustomLocalizedEnumInput from './types/custom-localized-enum-input';
+import CustomReferenceInput from './types/custom-reference-input';
+import CustomDateTimeInput from './types/custom-date-time-input';
+import CustomTimeInput from './types/custom-time-input';
+import CustomEnumInput from './types/custom-enum-input';
+import CustomBooleanInputSet from './set/custom-boolean-input-set';
+import CustomNestedInput from './types/custom-nested-input';
+// eslint-disable-next-line import/no-cycle
+import CustomInputSet from './set/custom-input-set';
+import { getType as getSetElementType } from './utils';
+
+const nonSetComponents = {
+  [CUSTOM_FIELD_TYPES.text]: CustomTextInput,
+  [CUSTOM_FIELD_TYPES.string]: CustomTextInput,
+  [CUSTOM_FIELD_TYPES.localizedstring]: CustomLocalizedTextInput,
+  [CUSTOM_FIELD_TYPES.ltext]: CustomLocalizedTextInput,
+  [CUSTOM_FIELD_TYPES.number]: CustomNumberInput,
+  [CUSTOM_FIELD_TYPES.money]: CustomMoneyInput,
+  [CUSTOM_FIELD_TYPES.boolean]: CustomBooleanInput,
+  [CUSTOM_FIELD_TYPES.enum]: CustomEnumInput,
+  [CUSTOM_FIELD_TYPES.localizedenum]: CustomLocalizedEnumInput,
+  [CUSTOM_FIELD_TYPES.lenum]: CustomLocalizedEnumInput,
+  [CUSTOM_FIELD_TYPES.reference]: CustomReferenceInput,
+  [CUSTOM_FIELD_TYPES.time]: CustomTimeInput,
+  [CUSTOM_FIELD_TYPES.datetime]: CustomDateTimeInput,
+  [CUSTOM_FIELD_TYPES.date]: CustomDateTimeInput,
+  [CUSTOM_FIELD_TYPES.nested]: CustomNestedInput,
+};
+
+const getSetComponent = (fieldDefinition) => {
+  const type = getSetElementType(fieldDefinition);
+  const typeName = type.name.toLowerCase();
+  // Boolean is the only set element with picularities (i.e. way more
+  // convenient for user to work with it as with select input with three values:
+  // [true], [false] and [true, false]).
+  if (typeName === CUSTOM_FIELD_TYPES.boolean) return CustomBooleanInputSet;
+  // All the rest sets are just a fancy wrapper around single-item components
+  return CustomInputSet;
+};
+
+const getNonSetComponent = (fieldDefinition) => {
+  const typeName = fieldDefinition.type.name.toLowerCase();
+  return nonSetComponents[typeName];
+};
+
+const isSet = (fieldDefinition) => {
+  const typeName = fieldDefinition.type.name.toLowerCase();
+  return typeName === 'set';
+};
+
+const getInputComponent = (fieldDefinition) => {
+  if (isSet(fieldDefinition)) return getSetComponent(fieldDefinition);
+  return getNonSetComponent(fieldDefinition);
+};
+
+const CustomFieldInput = memo((props) => {
+  const InputComponent = getInputComponent(props.fieldDefinition);
+
+  if (!InputComponent) return null;
+
+  return (
+    <InputComponent
+      name={props.name}
+      value={props.value}
+      fieldDefinition={props.fieldDefinition}
+      isDisabled={props.isDisabled}
+      isReadOnly={props.isReadOnly}
+      onBlur={props.onBlur}
+      setFieldValue={props.setFieldValue}
+      hasError={props.hasError}
+    />
+  );
+});
+CustomFieldInput.displayName = 'CustomFieldInput';
+CustomFieldInput.propTypes = {
+  name: PropTypes.string.isRequired,
+  fieldDefinition: PropTypes.shape({
+    type: PropTypes.shape({
+      name: PropTypes.string.isRequired,
+    }).isRequired,
+    name: PropTypes.string.isRequired,
+    required: PropTypes.bool,
+  }),
+  value: PropTypes.any,
+  setFieldValue: PropTypes.func.isRequired,
+  isDisabled: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  onBlur: PropTypes.func.isRequired,
+  hasError: PropTypes.bool,
+};
+
+export default CustomFieldInput;

package/src/custom-fields/custom-fields/custom-field-tooltip.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Tooltip } from '@commercetools-frontend/ui-kit';
+import { SHOW_TOOLTIP_CHARS_COUNT } from '../../constants';
+
+// Without this wrapper Tooltip prevents wrapped TextInput from taking
+// the whole width (as it should).
+const TooltipWrapper = React.forwardRef((props, ref) => (
+  <div ref={ref} style={{ display: 'block', width: '100%' }} {...props} />
+));
+TooltipWrapper.displayName = 'TooltipWrapper';
+
+const CustomFieldTooltip = ({ title, children }) => {
+  const shouldNotShowTooltip = title.length < SHOW_TOOLTIP_CHARS_COUNT;
+
+  return (
+    <Tooltip
+      title={title}
+      off={shouldNotShowTooltip}
+      horizontalConstraint={10}
+      placement="bottom-start"
+      components={{ WrapperComponent: TooltipWrapper }}
+    >
+      {children}
+    </Tooltip>
+  );
+};
+
+CustomFieldTooltip.propTypes = {
+  title: PropTypes.string.isRequired,
+  children: PropTypes.node.isRequired,
+};
+
+export default CustomFieldTooltip;

package/src/custom-fields/custom-fields/custom-fields-internal.jsx

@@ -0,0 +1,148 @@
+import { useContext } from 'react';
+import PropTypes from 'prop-types';
+import { useDidFormValidationFail, omitSetsOfSets } from '../../internal-index';
+import isNil from 'lodash.isnil';
+import { getIn, useFormikContext, FastField } from 'formik';
+import { Spacings, Card, Grid } from '@commercetools-frontend/ui-kit';
+
+import { CUSTOM_FIELD_TYPES } from './constants';
+import CustomFieldInput from './custom-field-input';
+import CustomNestedFieldInput from './custom-nested-field-input';
+import CustomFieldErrors from './custom-field-errors';
+import CustomFieldsLabel from './custom-fields-label';
+import NestingLevelContext from './nesting-level-context';
+
+const getFieldName = (parentName, fieldName) => {
+  if (!parentName) return fieldName;
+  return `${parentName}.${fieldName}`;
+};
+
+const isNested = (fieldDefinition) => {
+  const type = fieldDefinition.type;
+  const typeName = type.name.toLowerCase();
+  if (typeName === 'set') {
+    const elementTypeName = type.elementType.name.toLowerCase();
+    return elementTypeName === CUSTOM_FIELD_TYPES.nested;
+  }
+  return typeName === CUSTOM_FIELD_TYPES.nested;
+};
+
+const CustomFieldsInternal = (props) => {
+  const { errors, touched, values, handleBlur } = useFormikContext();
+  const didFormValidationFail = useDidFormValidationFail();
+  const fieldDefinitions = omitSetsOfSets(props.fieldDefinitions);
+  const nestingLevel = useContext(NestingLevelContext);
+  const isCurrentFieldNested = nestingLevel > 0;
+
+  return (
+    <>
+      {fieldDefinitions.map((fieldDefinition, index) => {
+        const fieldName = getFieldName(props.name, fieldDefinition.name);
+        const isTouched = Boolean(getIn(touched, fieldName));
+        const fieldErrors = getIn(errors, fieldName);
+        const value = props.inputValuesConverter(
+          fieldName,
+          getIn(values, fieldName)
+        );
+        // We want to highlight fields with errors not only after a form submission,
+        // but also after manually triggered form validation.
+        const hasError =
+          Boolean(fieldErrors) && (isTouched || didFormValidationFail);
+
+        const validate = (value) => {
+          if (fieldDefinition.required && isNil(value))
+            return { missing: true };
+
+          return undefined;
+        };
+
+        return (
+          <FastField
+            key={`${fieldName}-${index}`}
+            name={fieldName}
+            validate={validate}
+          >
+            {() => (
+              <Grid.Item>
+                <Card
+                  insetScale="s"
+                  type="flat"
+                  theme={isCurrentFieldNested ? 'dark' : 'light'}
+                >
+                  <Spacings.Stack scale="xs">
+                    <CustomFieldsLabel
+                      name={fieldName}
+                      fieldDefinition={fieldDefinition}
+                    />
+                    <Spacings.Stack scale="xs" alignItems="stretch">
+                      {isNested(fieldDefinition) ? (
+                        <CustomNestedFieldInput
+                          name={fieldName}
+                          value={value}
+                          fieldDefinition={fieldDefinition}
+                          isDisabled={props.isDisabled}
+                          isReadOnly={props.isReadOnly}
+                          onBlur={handleBlur}
+                          setFieldValue={props.setFieldValue}
+                        />
+                      ) : (
+                        <CustomFieldInput
+                          name={fieldName}
+                          value={value}
+                          fieldDefinition={fieldDefinition}
+                          isDisabled={props.isDisabled}
+                          isReadOnly={props.isReadOnly}
+                          onBlur={handleBlur}
+                          setFieldValue={props.setFieldValue}
+                          hasError={hasError}
+                        />
+                      )}
+                      <CustomFieldErrors
+                        isTouched={isTouched}
+                        errors={fieldErrors}
+                      />
+                    </Spacings.Stack>
+                  </Spacings.Stack>
+                </Card>
+              </Grid.Item>
+            )}
+          </FastField>
+        );
+      })}
+    </>
+  );
+};
+CustomFieldsInternal.displayName = 'CustomFieldsInternal';
+CustomFieldsInternal.propTypes = {
+  isReadOnly: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  name: PropTypes.string,
+  setFieldValue: PropTypes.func.isRequired,
+  fieldDefinitions: PropTypes.arrayOf(
+    PropTypes.shape({
+      name: PropTypes.string,
+      required: PropTypes.bool,
+
+      inputHint: PropTypes.string,
+      label: PropTypes.objectOf(PropTypes.string),
+
+      type: PropTypes.oneOfType([
+        PropTypes.shape({
+          type: PropTypes.shape({
+            name: PropTypes.string,
+          }),
+        }),
+        // Set
+        PropTypes.shape({
+          elementType: PropTypes.shape({
+            type: PropTypes.shape({
+              name: PropTypes.string,
+            }),
+          }),
+        }),
+      ]),
+    })
+  ),
+  inputValuesConverter: PropTypes.func.isRequired,
+};
+export default CustomFieldsInternal;

package/src/custom-fields/custom-fields/custom-fields-label/cart-discounts-count.ctp.graphql

@@ -0,0 +1,5 @@
+query CartDiscountsCount {
+  cartDiscounts {
+    total
+  }
+}

package/src/custom-fields/custom-fields/custom-fields-label/custom-fields-label.jsx

@@ -0,0 +1,156 @@
+import { memo } from 'react';
+import {
+  FieldLabel,
+  Spacings,
+  InformationIcon,
+} from '@commercetools-frontend/ui-kit';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { formatLocalizedString } from '@commercetools-frontend/l10n';
+import PropTypes from 'prop-types';
+import { useApplicationContext } from '@commercetools-frontend/application-shell-connectors';
+import { useQuery } from '@apollo/client/react';
+import { GRAPHQL_TARGETS } from '@commercetools-frontend/constants';
+import { QUERY_MAX_LIMIT, SEARCHABLE_REFERENCES } from '../../../constants';
+import { usePimStatus, capitalizeFirst } from '../../../internal-index';
+
+import { getType } from '../utils';
+import { CartDiscountsCount } from './cart-discounts-count.ctp.graphql';
+
+import messages from './messages';
+
+const CustomFieldsLabelHint = ({ fieldDefinition }) => {
+  const type = getType(fieldDefinition);
+  const isReference = type.name?.toLowerCase() === 'reference';
+  const referenceTypeId = type.referenceTypeId;
+  const isCartDiscountsReference =
+    isReference && referenceTypeId === SEARCHABLE_REFERENCES.cartDiscount;
+
+  const { languages, dataLocale } = useApplicationContext(
+    (applicationContext) => ({
+      languages: applicationContext.project.languages,
+      dataLocale: applicationContext.dataLocale,
+    })
+  );
+
+  const { data, loading } = useQuery(CartDiscountsCount, {
+    skip: !isCartDiscountsReference,
+    context: {
+      target: GRAPHQL_TARGETS.COMMERCETOOLS_PLATFORM,
+    },
+  });
+
+  if (loading) return null;
+
+  if (data?.cartDiscounts.total > QUERY_MAX_LIMIT) {
+    return (
+      <Spacings.Inset scale="xs">
+        <Spacings.Inline alignItems="flex-start">
+          <InformationIcon size="medium" />
+          <FormattedMessage {...messages.cartDiscountMoreThan500} />
+        </Spacings.Inline>
+      </Spacings.Inset>
+    );
+  }
+
+  return formatLocalizedString(fieldDefinition, {
+    key: 'inputTip',
+    locale: dataLocale,
+    fallbackOrder: languages,
+  });
+};
+CustomFieldsLabelHint.propTypes = {
+  fieldDefinition: PropTypes.shape({
+    name: PropTypes.string,
+    inputTip: PropTypes.object,
+    required: PropTypes.bool,
+  }),
+};
+
+function CustomFieldsProductTypeReferenceSubtitle() {
+  const { formatMessage } = useIntl();
+  const { isProjectIndexed } = usePimStatus();
+
+  if (isProjectIndexed)
+    return formatMessage(messages.productTypeReferenceLabelI);
+  return formatMessage(messages.productTypeReferenceLabel);
+}
+
+// TODO(pa3): this logic may be misplaced and probably
+// should belong to <CustomReferenceInput /> component instead.
+function CustomFieldsLabelSubtitle({ fieldDefinition }) {
+  const { formatMessage } = useIntl();
+  const type = getType(fieldDefinition);
+  const isReference = type.name?.toLowerCase() === 'reference';
+
+  if (!isReference) return null;
+
+  const referenceTypeId = type.referenceTypeId;
+  const referenceTypeName = capitalizeFirst(referenceTypeId);
+
+  if (
+    [
+      SEARCHABLE_REFERENCES.category,
+      SEARCHABLE_REFERENCES.cartDiscount,
+    ].includes(referenceTypeId)
+  )
+    return referenceTypeName;
+
+  return do {
+    if (referenceTypeId === SEARCHABLE_REFERENCES.product)
+      formatMessage(messages.productReferenceLabel);
+    else if (referenceTypeId === SEARCHABLE_REFERENCES.productType)
+      <CustomFieldsProductTypeReferenceSubtitle />;
+    else if (referenceTypeId === SEARCHABLE_REFERENCES.channel)
+      formatMessage(messages.channelReferenceLabel);
+    else if (referenceTypeId === SEARCHABLE_REFERENCES.state)
+      formatMessage(messages.stateReferenceLabel);
+    else `${referenceTypeName} ID`;
+  };
+}
+CustomFieldsLabelSubtitle.propTypes = {
+  fieldDefinition: PropTypes.shape({
+    type: PropTypes.shape({
+      name: PropTypes.string,
+      elementType: PropTypes.shape({
+        name: PropTypes.string,
+      }),
+    }),
+    name: PropTypes.string,
+  }).isRequired,
+};
+
+const CustomFieldsLabel = memo(({ name, fieldDefinition }) => {
+  const { languages, language } = useApplicationContext(
+    (applicationContext) => ({
+      languages: applicationContext.project.languages,
+      language: applicationContext.dataLocale,
+    })
+  );
+
+  return (
+    <FieldLabel
+      htmlFor={name}
+      title={formatLocalizedString(fieldDefinition, {
+        key: 'label',
+        locale: language,
+        fallbackOrder: languages,
+        fallback: fieldDefinition.name,
+      })}
+      description={
+        <CustomFieldsLabelSubtitle fieldDefinition={fieldDefinition} />
+      }
+      hint={<CustomFieldsLabelHint fieldDefinition={fieldDefinition} />}
+      hasRequiredIndicator={fieldDefinition.required}
+    />
+  );
+});
+CustomFieldsLabel.displayName = 'CustomFieldsTitle';
+CustomFieldsLabel.propTypes = {
+  name: PropTypes.string.isRequired,
+  fieldDefinition: PropTypes.shape({
+    name: PropTypes.string,
+    inputTip: PropTypes.object,
+    required: PropTypes.bool,
+  }),
+};
+export default CustomFieldsLabel;

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

@@ -0,0 +1,92 @@
+import { renderApp } from '@commercetools-frontend/application-shell/test-utils';
+import { CartDiscountsCount } from '../../../actions/reference-search/cart-discount/cart-discount.ctp.graphql';
+import CustomFieldsLabel from './custom-fields-label';
+
+const createCartDiscountProps = (customProps) => ({
+  name: 'a-custom-field',
+  fieldDefinition: {
+    name: 'reference',
+    required: false,
+    type: {
+      name: 'Set',
+      elementType: {
+        name: 'Reference',
+        referenceTypeId: 'cart-discount',
+      },
+    },
+  },
+  ...customProps,
+});
+
+const createCategoryProps = (customProps) => ({
+  name: 'a-custom-field',
+  fieldDefinition: {
+    name: 'reference_category',
+    required: false,
+    type: {
+      name: 'Set',
+      elementType: {
+        name: 'Reference',
+        referenceTypeId: 'category',
+      },
+    },
+  },
+  ...customProps,
+});
+const mockRequests = {
+  withMoreThan500: [
+    {
+      request: {
+        query: CartDiscountsCount,
+      },
+      result: {
+        data: {
+          cartDiscounts: { total: 501, __typename: 'CartDiscountQueryResult' },
+        },
+      },
+    },
+    {
+      request: {
+        query: CartDiscountsCount,
+      },
+      result: {
+        data: {
+          cartDiscounts: { total: 501, __typename: 'CartDiscountQueryResult' },
+        },
+      },
+    },
+  ],
+};
+const rendered = (options = {}) =>
+  renderApp(<CustomFieldsLabel {...options.props} />, {
+    mocks: mockRequests.withMoreThan500,
+    ...options,
+  });
+describe('When loaded', () => {
+  it('should render an cart-discount description when input type cart-discount', async () => {
+    const props = createCartDiscountProps();
+    const { findByText, getByText } = rendered({ props });
+    await findByText('Cart-discount');
+    expect(getByText('Cart-discount')).toBeInTheDocument();
+  });
+  it('should render an category description when input type category', async () => {
+    const props = createCategoryProps();
+    const { findByText, getByText } = rendered({ props });
+    await findByText('Category');
+    expect(getByText('Category')).toBeInTheDocument();
+  });
+  it('should render a hint when input type cart-discount and the number od items is more than 500', async () => {
+    const props = createCartDiscountProps();
+    const { findByText, getByText } = rendered({
+      props,
+    });
+    await findByText(
+      'Cart discounts must be selected by exact match of name, ID or key.'
+    );
+    expect(
+      getByText(
+        'Cart discounts must be selected by exact match of name, ID or key.'
+      )
+    ).toBeInTheDocument();
+  });
+});

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

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

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

@@ -0,0 +1,37 @@
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  productReferenceLabel: {
+    id: 'CustomFieldsLabel.productReferenceLabel',
+    description: 'Label shown above the product picker input.',
+    defaultMessage: 'Product (case sensitive field)',
+  },
+  productTypeReferenceLabel: {
+    id: 'CustomFieldsLabel.productTypeReferenceLabel',
+    description: 'Label shown above the product type picker input.',
+    defaultMessage: 'Product type (case sensitive field)',
+  },
+  productTypeReferenceLabelI: {
+    id: 'CustomFieldsLabel.productTypeReferenceLabelI',
+    description:
+      'Label shown above the product type picker input for indexed project.',
+    defaultMessage: 'Product type',
+  },
+  stateReferenceLabel: {
+    id: 'CustomFieldsLabel.stateReferenceLabel',
+    description: 'Label shown above the state picker input.',
+    defaultMessage: 'State (case sensitive field)',
+  },
+  channelReferenceLabel: {
+    id: 'CustomFieldsLabel.channelReferenceLabel',
+    description: 'Label shown above the channel picker input.',
+    defaultMessage: 'Channel (case sensitive field)',
+  },
+  cartDiscountMoreThan500: {
+    id: 'cartDiscountMoreThan500',
+    description:
+      'Cart discounts must be selected by exact match of name, ID or key.',
+    defaultMessage:
+      'Cart discounts must be selected by exact match of name, ID or key.',
+  },
+});