@commercetools-frontend/experimental-components 0.0.2

package/src/components/product-attributes/conversions.spec.js

@@ -0,0 +1,97 @@
+import { LocalizedString } from '@commercetools-test-data/commons';
+import {
+  AttributeDefinition,
+  AttributeType,
+  PlainEnumValue,
+  LocalizedEnumValue,
+} from '@commercetools-local/test-data';
+import { customFieldToAttribute } from './conversions';
+
+const createAttributeDefinition = (attributeType) =>
+  AttributeDefinition.random().type(attributeType).buildRest();
+
+describe('customFieldToAttribute', () => {
+  it('should not convert numbers', () => {
+    const inputValue = 1;
+    const attributeDefinition = createAttributeDefinition(
+      AttributeType.presets.number()
+    );
+    const convertedValue = customFieldToAttribute(
+      inputValue,
+      attributeDefinition
+    );
+
+    expect(convertedValue).toBe(inputValue);
+  });
+
+  it('should convert enum key to key/label pair', () => {
+    const inputValue = 'xl';
+    const attributeDefinition = createAttributeDefinition(
+      AttributeType.presets.allSizesEnum()
+    );
+    const convertedValue = customFieldToAttribute(
+      inputValue,
+      attributeDefinition
+    );
+
+    expect(convertedValue).toEqual({ key: 'xl', label: 'Size XL' });
+  });
+
+  it('should convert lenum key to key/label pair', () => {
+    const inputValue = 'xl';
+    const attributeDefinition = createAttributeDefinition(
+      AttributeType.presets.allSizesLenum()
+    );
+
+    const convertedValue = customFieldToAttribute(
+      inputValue,
+      attributeDefinition
+    );
+
+    expect(convertedValue).toEqual({
+      key: 'xl',
+      label: {
+        de: 'Größe XL',
+        en: 'Size XL',
+      },
+    });
+  });
+
+  it('should use empty label value for enum missing a label', () => {
+    const inputValue = 'xl';
+    const attributeType = AttributeType.random()
+      .name('enum')
+      .values([PlainEnumValue.presets.xl().label(null)]);
+    const attributeDefinition = createAttributeDefinition(attributeType);
+
+    const convertedValue = customFieldToAttribute(
+      inputValue,
+      attributeDefinition
+    );
+
+    expect(convertedValue).toEqual({
+      key: 'xl',
+      label: '',
+    });
+  });
+
+  it('should use empty label value for lenum missing a label', () => {
+    const inputValue = 'xl';
+    const attributeType = AttributeType.random()
+      .name('lenum')
+      .values([
+        LocalizedEnumValue.presets.xl().label(LocalizedString.presets.empty()),
+      ]);
+    const attributeDefinition = createAttributeDefinition(attributeType);
+
+    const convertedValue = customFieldToAttribute(
+      inputValue,
+      attributeDefinition
+    );
+
+    expect(convertedValue).toEqual({
+      key: 'xl',
+      label: {},
+    });
+  });
+});

package/src/components/product-attributes/index.js

@@ -0,0 +1,3 @@
+export { default } from './product-attributes';
+export { default as ProductAttributeInput } from './product-attribute-input';
+export * from './conversions';

package/src/components/product-attributes/product-attribute-input.jsx

@@ -0,0 +1,68 @@
+import { useCallback, useMemo } from 'react';
+import { Formik } from 'formik';
+import PropTypes from 'prop-types';
+import CustomFieldInput from '../../custom-fields/custom-fields/custom-field-input';
+import {
+  attributeDefinitionToFieldDefinition,
+  customFieldToAttribute,
+  attributeToCustomField,
+} from './conversions';
+
+const useFieldDefintion = (attributeDefinition) =>
+  useMemo(
+    () => attributeDefinitionToFieldDefinition(attributeDefinition),
+    [attributeDefinition]
+  );
+
+export default function ProductAttributeInput(props) {
+  const { attributeDefinition, onChange } = props;
+
+  const fieldDefinition = useFieldDefintion(attributeDefinition);
+
+  const setFieldValue = useCallback(
+    (name, value) =>
+      onChange({
+        target: {
+          name,
+          value: customFieldToAttribute(value, attributeDefinition),
+        },
+      }),
+    [onChange, attributeDefinition]
+  );
+
+  const value = attributeToCustomField(props.value, attributeDefinition);
+
+  // TODO(pa3): wrapping this component in <Fromik /> is a work-around
+  // to enable easier migration of exiting places to new <ProductAttributeInput />.
+  // Proper solution is to turn said places into Formik-based forms.
+  // Just don't want to go with another several-weeks long refactoring and
+  // will address this step by step.
+  return (
+    <Formik>
+      <CustomFieldInput
+        value={value}
+        name={props.name}
+        isDisabled={props.isDisabled}
+        fieldDefinition={fieldDefinition}
+        setFieldValue={setFieldValue}
+        isReadOnly={props.isReadOnly}
+        onBlur={() => {}}
+      />
+    </Formik>
+  );
+}
+ProductAttributeInput.displayName = 'ProductAttributeInput';
+ProductAttributeInput.propTypes = {
+  name: PropTypes.string,
+  value: PropTypes.any,
+  isDisabled: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  onChange: PropTypes.func.isRequired,
+  attributeDefinition: PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    label: PropTypes.object,
+    inputHint: PropTypes.string,
+    isRequired: PropTypes.bool,
+    type: PropTypes.object.isRequired,
+  }).isRequired,
+};

package/src/components/product-attributes/product-attributes.jsx

@@ -0,0 +1,79 @@
+import { useCallback, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { useFormikContext } from 'formik';
+import keyBy from 'lodash.keyby';
+import CustomFieldsInternal from '../../custom-fields/custom-fields/custom-fields-internal';
+import {
+  attributeToCustomField,
+  customFieldToAttribute,
+  attributeDefinitionToFieldDefinition,
+} from './conversions';
+
+// Full name of the attribute being edited is its full path inside
+// product object being edited. For example `masterVariant.attributes.weight`.
+// This helper will extract the attribute's name used in scope of attributes
+// object (`weights` in the example above).
+const getAttributeShortName = (fullName, attributesPrefix) => {
+  if (!attributesPrefix) return fullName;
+  return fullName.replace(`${attributesPrefix}.`, '');
+};
+
+export default function ProductAttributes(props) {
+  const formik = useFormikContext();
+  const fieldDefinitions = useMemo(
+    () => props.attributeDefinitions.map(attributeDefinitionToFieldDefinition),
+    [props.attributeDefinitions]
+  );
+  const attributeDefinitionsAsMap = useMemo(
+    () => keyBy(props.attributeDefinitions, 'name'),
+    [props.attributeDefinitions]
+  );
+
+  const formikSetFieldValue = formik.setFieldValue;
+
+  const setFieldValue = useCallback(
+    (name, value) => {
+      const shortName = getAttributeShortName(name, props.name);
+      const converted = customFieldToAttribute(
+        value,
+        attributeDefinitionsAsMap[shortName]
+      );
+      formikSetFieldValue(name, converted);
+    },
+    [props.name, attributeDefinitionsAsMap, formikSetFieldValue]
+  );
+
+  const convertInputValue = (attributeName, attributeValue) =>
+    attributeToCustomField(
+      attributeValue,
+      attributeDefinitionsAsMap[
+        getAttributeShortName(attributeName, props.name)
+      ]
+    );
+
+  return (
+    <CustomFieldsInternal
+      name={props.name}
+      isDisabled={props.isDisabled}
+      isReadOnly={props.isReadOnly}
+      fieldDefinitions={fieldDefinitions}
+      setFieldValue={setFieldValue}
+      inputValuesConverter={convertInputValue}
+    />
+  );
+}
+ProductAttributes.displayName = 'ProductAttributes';
+ProductAttributes.propTypes = {
+  name: PropTypes.string,
+  isDisabled: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  attributeDefinitions: PropTypes.arrayOf(
+    PropTypes.shape({
+      name: PropTypes.string.isRequired,
+      label: PropTypes.object,
+      inputHint: PropTypes.string,
+      isRequired: PropTypes.bool,
+      type: PropTypes.object.isRequired,
+    }).isRequired
+  ).isRequired,
+};

package/src/components/product-picker-input/index.js

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

package/src/components/product-picker-input/messages.js

@@ -0,0 +1,14 @@
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  noProductsFound: {
+    id: 'Shared.ProductPickerInput.noProductsFound',
+    description: 'The message to display when no products were found',
+    defaultMessage: 'There are no products that match your search',
+  },
+  placeholder: {
+    id: 'Shared.ProductPickerInput.placeholder',
+    description: 'The placeholder of the input',
+    defaultMessage: 'Search by product name, key or type an ID',
+  },
+});

package/src/components/product-picker-input/product-picker-input.ctp.graphql

@@ -0,0 +1,31 @@
+query GetProductsQuery($where: String) {
+  products(where: $where) {
+    results {
+      id
+      key
+      masterData {
+        current {
+          nameAllLocales {
+            locale
+            value
+          }
+        }
+      }
+    }
+  }
+}
+
+query GetProductQuery($id: String) {
+  product(id: $id) {
+    id
+    key
+    masterData {
+      current {
+        nameAllLocales {
+          locale
+          value
+        }
+      }
+    }
+  }
+}

package/src/components/product-picker-input/product-picker-input.jsx

@@ -0,0 +1,203 @@
+import { useCallback, useMemo, useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import { useApplicationContext } from '@commercetools-frontend/application-shell-connectors';
+import {
+  AsyncSelectInput,
+  SearchIcon,
+  Spacings,
+  Text,
+  Constraints,
+} from '@commercetools-frontend/ui-kit';
+import {
+  CenteredLoadingSpinner,
+  useFormatLocalizedFieldToString,
+  useDebouncedPromiseCallback,
+  Option,
+  useHandlers,
+  useLoadOptions,
+  useCurrentOption,
+  CustomFieldTooltip,
+} from '../../internal-index';
+
+import { useIntl } from 'react-intl';
+
+import messages from './messages';
+import commonPickerMessages from '../messages';
+import {
+  GetProductQuery,
+  GetProductsQuery,
+} from './product-picker-input.ctp.graphql';
+import trackingEvents from './tracking-events';
+
+const DropdownIndicator = () => <SearchIcon color="primary" />;
+DropdownIndicator.displayName = 'DropdownIndicator';
+
+const getTrackingEvent = (inputValue, selectedValue) => {
+  const { value: id, key, name } = selectedValue;
+
+  const trackingEvent = do {
+    if (name.startsWith(inputValue)) trackingEvents.selectProductName;
+    else if (key.startsWith(inputValue)) trackingEvents.selectProductKey;
+    else if (id === inputValue) trackingEvents.selectProductId;
+  };
+
+  return trackingEvent;
+};
+
+const ProductPickerInput = ({
+  isClearable,
+  isDisabled,
+  isReadOnly,
+  onChange,
+  name,
+  onBlur,
+  value,
+  hasError,
+  onError,
+  showLoadingErrorMessage,
+}) => {
+  const formatLocalizedFieldToString = useFormatLocalizedFieldToString();
+  const { formatMessage } = useIntl();
+  const dataLocale = useApplicationContext(
+    (applicationContext) => applicationContext.dataLocale
+  );
+
+  const [loadingError, setLoadingError] = useState();
+
+  const convertProductToOption = useCallback(
+    (product) => {
+      if (!product) return null;
+      const { id, key, masterData } = product;
+      const localizedName = formatLocalizedFieldToString(
+        masterData.current?.nameAllLocales
+      );
+
+      return {
+        label: localizedName + (key ? ` (key: ${key})` : ''),
+        value: id,
+        name: localizedName,
+        key,
+      };
+    },
+    [formatLocalizedFieldToString]
+  );
+
+  const prefixSearchFields = useMemo(
+    () => [`masterData.current.name.${dataLocale}`, 'key'],
+    [dataLocale]
+  );
+
+  const loadOptions = useLoadOptions({
+    query: GetProductsQuery,
+    prefixSearchFields,
+  });
+
+  const currentOption = useCurrentOption({
+    query: GetProductQuery,
+    id: value,
+    convertQueryResultToOption: ({ product }) =>
+      convertProductToOption(product),
+  });
+
+  const handleLoadOptions = useCallback(
+    (inputValue) =>
+      loadOptions(inputValue)
+        .then(({ data }) => {
+          const products = data.products.results;
+          return products.map(convertProductToOption);
+        })
+        .catch((error) => {
+          setLoadingError(error);
+          onError(error);
+        }),
+    [loadOptions, onError, convertProductToOption]
+  );
+
+  const loadOptionsDebounced = useDebouncedPromiseCallback(
+    handleLoadOptions,
+    300
+  );
+
+  const [handleInternalInputChange, handleChange] = useHandlers(
+    onChange,
+    getTrackingEvent
+  );
+
+  const handleInputChange = useCallback(
+    (event) => {
+      setLoadingError(null);
+      handleInternalInputChange(event);
+    },
+    [handleInternalInputChange]
+  );
+
+  const isCurrentOptionLoadingFailed = Boolean(currentOption?.error);
+
+  useEffect(() => {
+    if (isCurrentOptionLoadingFailed) onError(currentOption.error);
+  }, [isCurrentOptionLoadingFailed, onError, currentOption]);
+
+  const isLoadingFailed = isCurrentOptionLoadingFailed || Boolean(loadingError);
+  const tooltipTitle = currentOption?.data?.label ?? '';
+
+  return (
+    <Constraints.Horizontal max="scale">
+      {currentOption.loading ? (
+        <CenteredLoadingSpinner />
+      ) : (
+        <Spacings.Stack scale="xs">
+          <CustomFieldTooltip title={tooltipTitle}>
+            <AsyncSelectInput
+              id={name}
+              name={name}
+              placeholder={formatMessage(messages.placeholder)}
+              loadOptions={loadOptionsDebounced}
+              defaultOptions={[]}
+              isClearable={isClearable}
+              isReadOnly={isReadOnly}
+              isDisabled={isDisabled}
+              components={{
+                Option,
+                DropdownIndicator,
+              }}
+              onChange={handleChange}
+              onInputChange={handleInputChange}
+              onBlur={onBlur}
+              value={currentOption.data}
+              noOptionsMessage={() =>
+                isLoadingFailed ? null : formatMessage(messages.noProductsFound)
+              }
+              hasError={hasError || isLoadingFailed}
+            />
+          </CustomFieldTooltip>
+          {isLoadingFailed && showLoadingErrorMessage && (
+            <Text.Body
+              tone="negative"
+              intlMessage={commonPickerMessages.loadingErrorMessage}
+            />
+          )}
+        </Spacings.Stack>
+      )}
+    </Constraints.Horizontal>
+  );
+};
+
+ProductPickerInput.displayName = 'ProductPickerInput';
+ProductPickerInput.propTypes = {
+  name: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+  onBlur: PropTypes.func,
+  value: PropTypes.string,
+  hasError: PropTypes.bool,
+  onError: PropTypes.func,
+  isClearable: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  // TODO(pa3): that is a temporary work-around caused by the difference in
+  // the appearance of loading errors in the picker in custom fields and
+  // dashboard app. Designers gonna negotiate the change with dashboard
+  // team and this flag will be dropped then.
+  showLoadingErrorMessage: PropTypes.bool,
+};
+
+export default ProductPickerInput;