@commercetools-frontend/experimental-components 0.0.2

package/src/utils/product-types/product-types.spec.js

@@ -0,0 +1,328 @@
+import oneLine from 'common-tags/lib/oneLine';
+import {
+  mergeEnumValues,
+  getAllValidAttributes,
+  updateEnumValuesOnAttribute,
+} from './product-types';
+
+const createSetAttributeOfElementType = (name, type, additionalDefinition) => ({
+  name,
+  type: {
+    name: 'set',
+    elementType: type,
+  },
+  ...additionalDefinition,
+});
+
+describe('getAllValidAttributes', () => {
+  describe(`${oneLine`
+    when two productTypes have attributes of type SET
+    with elementType ENUM
+    with same name
+  `}`, () => {
+    const productTypes = [
+      {
+        attributes: [
+          createSetAttributeOfElementType(
+            'enum-of-same-name-set',
+            {
+              name: 'enum',
+              values: [
+                {
+                  key: 'enum-of-same-name-set-1',
+                  label: 'enum-of-same-name-set-1',
+                },
+                {
+                  key: 'enum-of-same-name-set-2',
+                  label: 'enum-of-same-name-set-2',
+                },
+                // enum-of-same-name-set-3 is missing
+                {
+                  key: 'enum-of-same-name-set-4',
+                  label: 'enum-of-same-name-set-4',
+                },
+                // enum-of-same-name-set-5 is missing
+              ],
+            },
+            { isSearchable: true }
+          ),
+        ],
+      },
+      {
+        attributes: [
+          createSetAttributeOfElementType(
+            'enum-of-same-name-set',
+            {
+              name: 'enum',
+              values: [
+                // enum-of-same-name-set-1 is missing
+                // enum-of-same-name-set-2 is missing
+                {
+                  key: 'enum-of-same-name-set-3',
+                  label: 'enum-of-same-name-set-3',
+                },
+                // enum-of-same-name-set-4 is missing
+                {
+                  key: 'enum-of-same-name-set-5',
+                  label: 'enum-of-same-name-set-5',
+                },
+              ],
+            },
+            { isSearchable: true }
+          ),
+        ],
+      },
+    ];
+    const expected = [
+      {
+        name: 'enum-of-same-name-set',
+        type: {
+          name: 'set',
+          elementType: {
+            name: 'enum',
+            values: [
+              {
+                key: 'enum-of-same-name-set-1',
+                label: 'enum-of-same-name-set-1',
+              },
+              {
+                key: 'enum-of-same-name-set-2',
+                label: 'enum-of-same-name-set-2',
+              },
+              {
+                key: 'enum-of-same-name-set-3',
+                label: 'enum-of-same-name-set-3',
+              },
+              {
+                key: 'enum-of-same-name-set-4',
+                label: 'enum-of-same-name-set-4',
+              },
+              {
+                key: 'enum-of-same-name-set-5',
+                label: 'enum-of-same-name-set-5',
+              },
+            ],
+          },
+        },
+        isSearchable: true,
+      },
+    ];
+
+    const actual = getAllValidAttributes(productTypes);
+    it('should consolidate all available values of ENUM SET', () => {
+      expect(actual).toEqual(expected);
+    });
+  });
+  describe(`${oneLine`
+    when two productTypes have attributes of type ENUM
+    with same name
+  `}`, () => {
+    const productTypes = [
+      {
+        attributes: [
+          {
+            name: 'enum-of-same-name',
+            isSearchable: true,
+            type: {
+              name: 'enum',
+              values: [
+                { key: 'enum-1', label: 'enum-1' },
+                { key: 'enum-2', label: 'enum-2' },
+                // enum-3 is missing
+                { key: 'enum-4', label: 'enum-4' },
+                // enum-5 is missing
+              ],
+            },
+          },
+        ],
+      },
+      {
+        attributes: [
+          {
+            name: 'enum-of-same-name',
+            isSearchable: true,
+            type: {
+              name: 'enum',
+              values: [
+                // enum-1 is missing
+                // enum-2 is missing
+                { key: 'enum-3', label: 'enum-3' },
+                // enum-4 is missing
+                { key: 'enum-5', label: 'enum-5' },
+              ],
+            },
+          },
+        ],
+      },
+    ];
+    const expected = [
+      {
+        name: 'enum-of-same-name',
+        isSearchable: true,
+        type: {
+          name: 'enum',
+          values: [
+            { key: 'enum-1', label: 'enum-1' },
+            { key: 'enum-2', label: 'enum-2' },
+            { key: 'enum-3', label: 'enum-3' },
+            { key: 'enum-4', label: 'enum-4' },
+            { key: 'enum-5', label: 'enum-5' },
+          ],
+        },
+      },
+    ];
+    const actual = getAllValidAttributes(productTypes);
+    it('should consolidate all available values of ENUM', () => {
+      expect(actual).toEqual(expected);
+    });
+  });
+  describe(`
+      ${oneLine`
+      when two productTypes have attributes of type TEXT
+      with same name
+    `}`, () => {
+    const productTypes = [
+      {
+        attributes: [
+          {
+            name: 'text-of-same-name',
+            isSearchable: true,
+            type: { name: 'text' },
+          },
+        ],
+      },
+      {
+        attributes: [
+          {
+            name: 'text-of-same-name',
+            isSearchable: true,
+            type: { name: 'text' },
+          },
+        ],
+      },
+    ];
+    const expected = [
+      {
+        name: 'text-of-same-name',
+        isSearchable: true,
+        type: { name: 'text' },
+      },
+    ];
+    const actual = getAllValidAttributes(productTypes);
+    it('should return a list of attributes with a single attribute of same name', () => {
+      expect(actual).toEqual(expected);
+    });
+  });
+});
+
+describe('mergeEnumValues', () => {
+  describe('when attribute is of type ENUM SET', () => {
+    const attribute = {
+      type: {
+        name: 'set',
+        elementType: {
+          name: 'enum',
+          values: [{ key: 'enum-1', label: 'enum-1' }],
+        },
+      },
+    };
+    const attributeToMergeWith = {
+      type: {
+        name: 'set',
+        elementType: {
+          name: 'enum',
+          values: [{ key: 'enum-2', label: 'enum-2' }],
+        },
+      },
+    };
+    const expected = [
+      { key: 'enum-1', label: 'enum-1' },
+      { key: 'enum-2', label: 'enum-2' },
+    ];
+    const actual = mergeEnumValues(attribute, attributeToMergeWith);
+    it('should merge all available values into one attribute', () => {
+      expect(actual).toEqual(expected);
+    });
+  });
+  describe('when attribute is of type ENUM', () => {
+    const attribute = {
+      type: {
+        name: 'enum',
+        values: [{ key: 'enum-1', label: 'enum-1' }],
+      },
+    };
+    const attributeToMergeWith = {
+      type: {
+        name: 'enum',
+        values: [{ key: 'enum-2', label: 'enum-2' }],
+      },
+    };
+    const expected = [
+      { key: 'enum-1', label: 'enum-1' },
+      { key: 'enum-2', label: 'enum-2' },
+    ];
+    const actual = mergeEnumValues(attribute, attributeToMergeWith);
+    it('should merge all available values into one attribute', () => {
+      expect(actual).toEqual(expected);
+    });
+  });
+});
+
+describe('updateEnumValuesOnAttribute', () => {
+  describe('when attribute is of type ENUM SET', () => {
+    const enumValues = [
+      { key: 'enum-1', label: 'enum-1' },
+      { key: 'enum-2', label: 'enum-2' },
+    ];
+    const attribute = {
+      type: {
+        name: 'set',
+        elementType: {
+          name: 'enum',
+          values: [],
+        },
+      },
+    };
+    const expected = {
+      type: {
+        name: 'set',
+        elementType: {
+          name: 'enum',
+          values: [
+            { key: 'enum-1', label: 'enum-1' },
+            { key: 'enum-2', label: 'enum-2' },
+          ],
+        },
+      },
+    };
+    const actual = updateEnumValuesOnAttribute(attribute, enumValues);
+    it('should merge all available values into one attribute', () => {
+      expect(actual).toEqual(expected);
+    });
+  });
+  describe('when attribute is of type ENUM', () => {
+    const enumValues = [
+      { key: 'enum-1', label: 'enum-1' },
+      { key: 'enum-2', label: 'enum-2' },
+    ];
+    const attribute = {
+      type: {
+        name: 'enum',
+        values: [],
+      },
+    };
+    const expected = {
+      type: {
+        name: 'enum',
+        values: [
+          { key: 'enum-1', label: 'enum-1' },
+          { key: 'enum-2', label: 'enum-2' },
+        ],
+      },
+    };
+    const actual = updateEnumValuesOnAttribute(attribute, enumValues);
+    it('should merge all available values into one attribute', () => {
+      expect(actual).toEqual(expected);
+    });
+  });
+});

package/src/utils/products/index.js

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

package/src/utils/products/messages.js

@@ -0,0 +1,16 @@
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  booleanAttributeTrue: {
+    id: 'Products.ProductList.column.booleanTrue',
+    description:
+      'The message to show to user for displaying boolean attribute value of true',
+    defaultMessage: 'Yes',
+  },
+  booleanAttributeFalse: {
+    id: 'Products.ProductList.column.booleanFalse',
+    description:
+      'The message to show to user for displaying boolean attribute value of false',
+    defaultMessage: 'No',
+  },
+});

package/src/utils/products/products.jsx

@@ -0,0 +1,258 @@
+import omit from 'lodash.omit';
+import isNil from 'lodash.isnil';
+import { NO_VALUE_FALLBACK } from '@commercetools-frontend/constants';
+import {
+  FormattedDateTime,
+  formatMoney,
+  getMinimumPricesByCurrencyCode,
+} from '../../internal-index';
+import flatMap from 'lodash.flatmap';
+
+import { formatLocalizedString } from '@commercetools-frontend/l10n';
+import { PRODUCT_STATUSES } from '../constants';
+import { formatDateTime } from '../formats';
+import { getPathName, getAncestors } from '../categories';
+import { safelyAddFallback } from '../text-fallback/text-fallback';
+import messages from './messages';
+
+export const COLUMN_WIDTH_FALLBACK = 200;
+
+export const allowedProperties = new Map([
+  // key => default (null means it has a translated message)
+  ['id', 'ID'],
+  ['version', null],
+  ['productType', null],
+  ['name', null],
+  ['image', null],
+  ['description', null],
+  ['slug', 'Slug'],
+  ['sku', 'SKU'],
+  ['status', null],
+  ['categories', null],
+  ['totalCategories', null],
+  ['totalVariants', null],
+  ['metaTitle', null],
+  ['metaDescription', null],
+  ['price', null],
+  ['taxCategory', null],
+  ['createdAt', null],
+  ['lastModifiedAt', null],
+  ['state', null],
+]);
+
+export const ignoredColumns = [];
+
+export const sortRequiresLanguage = new Set(['name']);
+
+export function sanitizeListColumns(columns) {
+  return columns.map((column) =>
+    omit(column, [
+      // This is injected in the client hence it does not need to be saved
+      'attributeDefinition',
+
+      // Deprecated props
+      'display',
+      'customLabel',
+      'customType',
+    ])
+  );
+}
+
+export function normalizeProductSettings(settings) {
+  return Object.keys(settings).reduce((acc, key) => {
+    if (settings[key] === null || settings[key] === undefined) return acc;
+
+    let field = key;
+
+    if (key.includes('list_')) field = key.split('list_')[1];
+
+    if (key.includes('filter_')) field = key.split('filter_')[1];
+
+    // eslint-disable-next-line no-param-reassign
+    acc[field] = settings[key];
+    return acc;
+  }, {});
+}
+
+// FIXME: the returned productAttributeDefinitions won't be accurate in case a
+// different constraint than ATTRIBUTE_CONSTRAINTS.SAME_FOR_ALL was passed
+export function splitVariantAttributesByConstraint(product, constraint) {
+  const productAttributeDefinitions = [];
+  const variantAttributeDefinitions = [];
+
+  if (product) {
+    if (!constraint)
+      throw new Error('You need to specify a constraint to filter for.');
+
+    for (let i = 0; i < product.productType.obj.attributes.length; i += 1) {
+      const definition = product.productType.obj.attributes[i];
+      if (definition.attributeConstraint === constraint)
+        productAttributeDefinitions.push(definition);
+      else variantAttributeDefinitions.push(definition);
+    }
+  }
+
+  return [productAttributeDefinitions, variantAttributeDefinitions];
+}
+
+export function resolveStatusType(product) {
+  const { published, hasStagedChanges } = product;
+
+  if (published && hasStagedChanges) return PRODUCT_STATUSES.MODIFIED;
+
+  if (published && !hasStagedChanges) return PRODUCT_STATUSES.PUBLISHED;
+
+  return PRODUCT_STATUSES.UNPUBLISHED;
+}
+
+export const computedProperties = {
+  // TODO: show relative time as tooltip
+  // `intl.formatRelative(<DATETIME>)`
+  createdAt({ product, intl, timeZone }) {
+    return formatDateTime('datetime', product.createdAt, {
+      locale: intl.locale,
+      timeZone,
+    });
+  },
+  lastModifiedAt({ product, intl, timeZone }) {
+    return formatDateTime('datetime', product.lastModifiedAt, {
+      locale: intl.locale,
+      timeZone,
+    });
+  },
+  productType({ product }) {
+    return product.productType.obj
+      ? product.productType.obj.name
+      : NO_VALUE_FALLBACK;
+  },
+  price({ product, intl }) {
+    const allVariants = product.variants.concat(product.masterVariant);
+    const variantPrices = flatMap(allVariants, (variant) => variant.prices);
+    return (
+      getMinimumPricesByCurrencyCode(variantPrices)
+        .map((price) => formatMoney(price, intl))
+        .join(', ') || NO_VALUE_FALLBACK
+    );
+  },
+  sku({ product }) {
+    const allVariants = [product.masterVariant].concat(product.variants);
+    return allVariants
+      .map(({ sku }) => sku)
+      .filter(Boolean)
+      .join(', ');
+  },
+  totalCategories({ product }) {
+    return product.categories.length;
+  },
+  totalVariants({ product }) {
+    // including master variant :)
+    return product.variants.length + 1;
+  },
+  taxCategory({ product }) {
+    // Guards against dead references of a tax category
+    if (product.taxCategory && product.taxCategory.obj)
+      return product.taxCategory.obj.name;
+
+    return NO_VALUE_FALLBACK;
+  },
+  state({ product, language, languages }) {
+    if (product.state && product.state.obj && product.state.obj.name)
+      return formatLocalizedString(product.state.obj, {
+        key: 'name',
+        locale: language,
+        fallbackOrder: languages,
+      });
+    return NO_VALUE_FALLBACK;
+  },
+  categories({ product, language, languages }) {
+    // If any of the expanded categories in the product
+    // doesn't have an `obj` key, we should assume that it is a dead reference.
+    // This scenario occurs when the search index of product-projections
+    // doesn't update in time when a category belonging to the product
+    // has been deleted. See MC-1925 for further information.
+    const filteredCategories = product.categories.filter(
+      (category) => category.obj !== undefined
+    );
+
+    return filteredCategories.map((category) => {
+      const categoryPath = getPathName(category, language, languages);
+      const ancestors = getAncestors(category, language);
+
+      const externalIdValue = category.obj.externalId
+        ? // hardcoding "ext. ID" since this is not part of a message to be
+          // translated. This has been communicated with Jenn
+          `| ext. ID: ${category.obj.externalId}`
+        : '';
+
+      return {
+        id: category.id,
+        name: `${formatLocalizedString(category.obj, {
+          key: 'name',
+          locale: language,
+          fallbackOrder: languages,
+        })} ${externalIdValue}`,
+        path: categoryPath,
+        level: ancestors.length,
+      };
+    });
+  },
+};
+
+export const getAttributeValueByType = ({
+  type,
+  value,
+  projectDataLocale,
+  intl,
+  projectLanguages,
+}) => {
+  switch (type) {
+    case 'text':
+      return safelyAddFallback(value.label || value);
+    case 'ltext':
+      return safelyAddFallback(
+        formatLocalizedString(
+          { value },
+          {
+            key: 'value',
+            locale: projectDataLocale,
+            fallbackOrder: projectLanguages,
+          }
+        )
+      );
+    case 'money':
+      return safelyAddFallback(
+        intl.formatNumber(value.centAmount / 100, {
+          style: 'currency',
+          currency: value.currencyCode,
+        })
+      );
+    case 'time':
+    case 'datetime':
+    case 'date':
+      return <FormattedDateTime type={type} value={value} />;
+    case 'enum':
+      return safelyAddFallback(value.label, `${value.key} (key)`);
+    case 'lenum':
+      return safelyAddFallback(
+        formatLocalizedString(value, {
+          key: 'label',
+          locale: projectDataLocale,
+          fallbackOrder: projectLanguages,
+        }),
+        `${value.key} (key)`
+      );
+    case 'number':
+      return safelyAddFallback(value);
+    case 'boolean': {
+      if (isNil(value)) return NO_VALUE_FALLBACK;
+
+      return value
+        ? intl.formatMessage(messages.booleanAttributeTrue)
+        : intl.formatMessage(messages.booleanAttributeFalse);
+    }
+    case 'reference':
+      return value.id || NO_VALUE_FALLBACK;
+    default:
+      return NO_VALUE_FALLBACK;
+  }
+};