@commercetools-frontend/experimental-components 0.0.2

package/src/utils/formats/custom-field/custom-field.spec.js

@@ -0,0 +1,91 @@
+import { intlMock } from '@commercetools-local/test-utils';
+import { NO_VALUE_FALLBACK } from '@commercetools-frontend/constants';
+import { reportErrorToSentry } from '@commercetools-frontend/sentry';
+import formatCustomField from './custom-field';
+
+jest.mock('@commercetools-frontend/sentry');
+
+const format = (type, value) =>
+  formatCustomField({
+    type,
+    value,
+    intl: intlMock,
+    language: 'en',
+    languages: ['en'],
+  });
+
+describe('formatCustomField', () => {
+  describe('formatting of types identical to attribute types', () => {
+    it.each([
+      ['Boolean', true, 'AttributeTypeFormats.boolean.yes'],
+      ['String', 'foo', 'foo'],
+      ['LocalizedString', { en: 'en-text' }, 'en-text'],
+      ['Number', 100, 100],
+      ['Money', { centAmount: 10000, currencyCode: 'EUR' }, 'EUR 100'],
+      ['Date', '1985-05-29', '29.5.1985'],
+      ['Time', '03:00:00', '03:00:00'],
+      ['DateTime', '1985-05-29T10:20:30.000Z', '29.5.1985 (10:20)'],
+    ])(
+      "formats custom field of type '%s'",
+      (customFieldTypeName, value, expected) => {
+        const type = { name: customFieldTypeName };
+        const formatted = format(type, value);
+        expect(formatted).toEqual(expected);
+      }
+    );
+  });
+
+  describe('type was not provided', () => {
+    const type = undefined;
+    const value = 'whatever value';
+
+    it('reports error to sentry', () => {
+      format(type, value);
+      expect(reportErrorToSentry).toHaveBeenCalled();
+    });
+
+    it('replaces provided value with fallback value', () => {
+      const formatted = format(type, value);
+      expect(formatted).toEqual(NO_VALUE_FALLBACK);
+    });
+  });
+
+  describe('formatting peculiar types (i.e. enum types)', () => {
+    it('formats custom field of type `Enum`', () => {
+      const value = 'enum-key';
+      const type = {
+        name: 'Enum',
+        values: [{ key: 'enum-key', label: 'enum-label' }],
+      };
+      const formatted = format(type, value);
+      expect(formatted).toBe('enum-label');
+    });
+
+    it('formats custom field of type `LocalizedEnum`', () => {
+      const value = 'enum-key';
+      const type = {
+        name: 'LocalizedEnum',
+        values: [{ key: 'enum-key', label: { en: 'en-enum-label' } }],
+      };
+
+      const formatted = format(type, value);
+      expect(formatted).toBe('en-enum-label');
+    });
+
+    it('formats custom field of type `Set` with `Enum` elements', () => {
+      const type = {
+        name: 'Set',
+        elementType: {
+          name: 'Enum',
+          values: [
+            { key: 'enum-key-1', label: 'enum-label-1' },
+            { key: 'enum-key-2', label: 'enum-label-2' },
+          ],
+        },
+      };
+      const value = ['enum-key-1', 'enum-key-2'];
+      const formatted = format(type, value);
+      expect(formatted).toBe('enum-label-1, enum-label-2');
+    });
+  });
+});

package/src/utils/formats/custom-field/index.js

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

package/src/utils/formats/date/__mocks__/index.js

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/prefer-default-export
+export const formatDateTime = (type, date) => date;

package/src/utils/formats/date/date.js

@@ -0,0 +1,58 @@
+import oneLine from 'common-tags/lib/oneLine';
+import moment from 'moment-timezone';
+import { UTC } from '../../../constants';
+
+export function formatDateRangeValue(
+  value,
+  type,
+  options = { locale: 'en', timeZone: moment.tz.guess() }
+) {
+  if (value.from === value.to) return formatDateTime(type, value.from, options);
+  if (value.from && value.to)
+    return oneLine`
+      ${formatDateTime(type, value.from, options)} -
+      ${formatDateTime(type, value.to, options)}
+    `;
+  if (value.from) return `from ${formatDateTime(type, value.from, options)}`;
+  if (value.to) return `to ${formatDateTime(type, value.to, options)}`;
+
+  return '';
+}
+
+export function formatDateTime(
+  type,
+  value,
+  { locale = 'en', timeZone = moment.tz.guess() } = {}
+) {
+  switch (type) {
+    case 'time':
+      return moment(value).tz(timeZone).locale(locale).format('LT');
+    case 'datetime':
+      return moment(value).tz(timeZone).locale(locale).format('L LT');
+    case 'date':
+      return moment(value).tz(timeZone).locale(locale).format('L');
+    default:
+      return value;
+  }
+}
+
+export function formatUTCOffset(userSetTZ, noOffsetMsg = '') {
+  const offset = userSetTZ
+    ? moment()?.tz(userSetTZ)?.format('Z')
+    : moment()?.format('Z');
+  const plusOrMinusSign = offset?.charAt(0);
+  const absOffset = offset?.slice(1);
+  const plusOrMinusOptions = ['+', '-'];
+  const validateSignInRes = plusOrMinusOptions.some((el) =>
+    offset?.includes(el)
+  );
+  if (offset?.length > 0 && validateSignInRes) {
+    if (absOffset?.[0] === '0') {
+      return `${UTC} ${plusOrMinusSign} ${absOffset?.slice(1)}`;
+    } else {
+      return `${UTC} ${plusOrMinusSign} ${absOffset}`;
+    }
+  } else {
+    return `${noOffsetMsg}`;
+  }
+}

package/src/utils/formats/date/date.spec.js

@@ -0,0 +1,241 @@
+import moment from 'moment-timezone';
+import { formatDateRangeValue, formatDateTime, formatUTCOffset } from './date';
+
+jest.mock('moment-timezone');
+
+describe('formatDateRangeValue', () => {
+  let actual;
+  describe('when formatting a `from` date', () => {
+    const date = {
+      from: '2016-12-31',
+      to: null,
+    };
+    beforeEach(() => {
+      moment.tz = {
+        guess: jest.fn(() => 'Europe/Madrid'),
+      };
+      moment.mockImplementation(() => ({
+        tz: jest.fn(() => ({
+          locale: jest.fn(() => ({
+            format: jest.fn(() => '12/31/2016'),
+          })),
+        })),
+      }));
+      actual = formatDateRangeValue(date, 'date');
+    });
+    it('should return a date string prefixed with `from`', () => {
+      expect(actual).toBe('from 12/31/2016');
+    });
+  });
+  describe('when formatting a `to` date', () => {
+    beforeEach(() => {
+      const date = {
+        from: null,
+        to: '2016-12-31',
+      };
+      actual = formatDateRangeValue(date, 'date');
+    });
+    it('should return a date string prefixed with `from`', () => {
+      expect(actual).toBe('to 12/31/2016');
+    });
+  });
+  describe('when formatting a date range', () => {
+    describe('when `from` is equal to `to`', () => {
+      const date = {
+        from: '2016-12-31',
+        to: '2016-12-31',
+      };
+      beforeEach(() => {
+        moment.tz = {
+          guess: jest.fn(() => 'Europe/Madrid'),
+        };
+        moment.mockImplementation(() => ({
+          tz: jest.fn(() => ({
+            locale: jest.fn(() => ({
+              format: jest.fn(() => '12/31/2016'),
+            })),
+          })),
+        }));
+        actual = formatDateRangeValue(date, 'date');
+      });
+      it('should return a date string prefixed with `from`', () => {
+        expect(actual).toBe('12/31/2016');
+      });
+    });
+    describe('when `from` is different to `to`', () => {
+      const date = {
+        from: '2016-12-28',
+        to: '2016-12-31',
+      };
+      beforeEach(() => {
+        moment.tz = {
+          guess: jest.fn(() => 'Europe/Madrid'),
+        };
+        moment.mockImplementation((value) => ({
+          tz: jest.fn(() => ({
+            locale: jest.fn(() => ({
+              format: jest.fn(() =>
+                value === '2016-12-28' ? '12/28/2016' : '12/31/2016'
+              ),
+            })),
+          })),
+        }));
+        actual = formatDateRangeValue(date, 'date');
+      });
+      it('should return a date string prefixed with `from`', () => {
+        expect(actual).toBe('12/28/2016 - 12/31/2016');
+      });
+    });
+  });
+});
+
+describe('formatDateTime', () => {
+  describe('with `time` type', () => {
+    let isoTime;
+    beforeEach(() => {
+      moment.tz = {
+        guess: jest.fn(() => 'Europe/Madrid'),
+      };
+      moment.mockImplementation(() => ({
+        tz: jest.fn(() => ({
+          locale: jest.fn(() => ({
+            format: jest.fn(() => '10:01 AM'),
+          })),
+        })),
+      }));
+      isoTime = formatDateTime('time', '2016-12-31T09:01:00.000Z');
+    });
+    it('gets the time in ISO format', () => {
+      expect(isoTime).toBe('10:01 AM');
+    });
+  });
+
+  describe('with `datetime` type', () => {
+    const value = '2016-12-31T13:45:00.000Z';
+    let isoDateTime;
+    beforeEach(() => {
+      moment.tz = {
+        guess: jest.fn(() => 'Europe/Madrid'),
+      };
+      moment.mockImplementation(() => ({
+        tz: jest.fn(() => ({
+          locale: jest.fn(() => ({
+            format: jest.fn(() => '12/31/2016 2:45 PM'),
+          })),
+        })),
+      }));
+      isoDateTime = formatDateTime('datetime', value);
+    });
+    it('gets the date time in ISO format in UTC time', () => {
+      expect(isoDateTime).toBe('12/31/2016 2:45 PM');
+    });
+  });
+
+  describe('with `date` type', () => {
+    const value = '2016-12-31';
+    let isoDateTime;
+    beforeEach(() => {
+      moment.tz = {
+        guess: jest.fn(() => 'Europe/Madrid'),
+      };
+      moment.mockImplementation(() => ({
+        tz: jest.fn(() => ({
+          locale: jest.fn(() => ({
+            format: jest.fn(() => '12/31/2016'),
+          })),
+        })),
+      }));
+      isoDateTime = formatDateTime('date', value);
+    });
+    it('gets the date time in ISO format in UTC time', () => {
+      expect(isoDateTime).toBe('12/31/2016');
+    });
+  });
+
+  describe('when no type', () => {
+    it('returns the passed value when the type is not datetime/time', () => {
+      const value = '12/31/2016 13:45';
+      const isoDateValue = formatDateTime('dummyType', value);
+      expect(isoDateValue).toBe(value);
+    });
+  });
+
+  describe('when no options are passed', () => {
+    beforeEach(() => {
+      moment.tz = {
+        guess: jest.fn(() => 'Europe/Madrid'),
+      };
+      moment.mockImplementation(() => ({
+        tz: jest.fn(() => ({
+          locale: jest.fn(() => ({
+            format: jest.fn(() => '10:01 AM'),
+          })),
+        })),
+      }));
+    });
+    it('should call guess from moment-timezone', () => {
+      const value = '12/31/2016 13:45';
+      formatDateTime('dummyType', value);
+      expect(moment.tz.guess).toHaveBeenCalled();
+    });
+  });
+
+  describe('when no timeZone is passed', () => {
+    beforeEach(() => {
+      moment.tz = {
+        guess: jest.fn(() => 'Europe/Madrid'),
+      };
+      moment.mockImplementation(() => ({
+        tz: jest.fn(() => ({
+          locale: jest.fn(() => ({
+            format: jest.fn(() => '10:01 AM'),
+          })),
+        })),
+      }));
+    });
+    it('should call guess from moment-timezone', () => {
+      const value = '12/31/2016 13:45';
+      formatDateTime('dummyType', value, { locale: 'en' });
+      expect(moment.tz.guess).toHaveBeenCalled();
+    });
+  });
+});
+
+describe('formatUTCOffset', () => {
+  beforeEach(() => {
+    jest.resetAllMocks();
+  });
+  it('should render correct syntax for `-4` UTC offset', () => {
+    moment.mockImplementation(() => ({
+      format: jest.fn(() => '-04:00'),
+    }));
+    const utcOffset = formatUTCOffset();
+    expect(utcOffset).toBe('UTC - 4:00');
+  });
+
+  it('should render browser set timezone when user set is not available', () => {
+    moment.mockImplementation(() => ({
+      format: jest.fn(() => '+05:00'),
+    }));
+    const utcOffset = formatUTCOffset();
+    expect(utcOffset).toBe('UTC + 5:00');
+  });
+
+  it('should render user set timezone for UTC offset', () => {
+    const userSetTZ = 'America/New_York';
+    moment.mockImplementation(() => ({
+      tz: jest.fn(() => ({
+        format: jest.fn(() => '-04:00'),
+      })),
+      format: jest.fn(() => '+00:00'),
+    }));
+    const utcOffset = formatUTCOffset(userSetTZ);
+    expect(utcOffset).toBe('UTC - 4:00');
+    expect(utcOffset).not.toBe('UTC + 0:00');
+  });
+
+  it("should render `unavailable` when offset and user tz isn't available", () => {
+    const utcOffset = formatUTCOffset(undefined, 'unavailable');
+    expect(utcOffset).toBe('unavailable');
+  });
+});

package/src/utils/formats/date/index.js

@@ -0,0 +1 @@
+export { formatDateTime, formatDateRangeValue, formatUTCOffset } from './date';

package/src/utils/formats/discount/discount.js

@@ -0,0 +1,12 @@
+import { formatMoney } from '../money';
+
+export default function formatDiscount(discount, currencyCode, intl) {
+  if (discount.type === 'relative') return `${discount.permyriad / 100}%`;
+  if (!discount.money) return null;
+
+  const moneyForCurrencyCode = discount.money.find(
+    (discountMoney) => discountMoney.currencyCode === currencyCode
+  );
+
+  return moneyForCurrencyCode ? formatMoney(moneyForCurrencyCode, intl) : null;
+}

package/src/utils/formats/discount/discount.spec.js

@@ -0,0 +1,75 @@
+import formatDiscount from './discount';
+
+const intl = {
+  formatNumber: (amount, currency) => `${currency.currency} ${amount}`,
+};
+
+const createAbsoluteDiscount = (custom) => ({
+  type: 'absolute',
+  money: [
+    { centAmount: 1000, currencyCode: 'EUR' },
+    { centAmount: 850, currencyCode: 'USD' },
+  ],
+
+  ...custom,
+});
+
+const createRelativeDiscount = (custom) => ({
+  type: 'relative',
+  permyriad: 3000,
+
+  ...custom,
+});
+
+describe('when absolute discount', () => {
+  let discount;
+
+  beforeEach(() => {
+    discount = createAbsoluteDiscount();
+  });
+
+  describe('when `money` for `currencyCode` exists', () => {
+    it('should format a discount value with currency `EUR`', () => {
+      const actual = formatDiscount(discount, 'EUR', intl);
+      expect(actual).toBe('EUR 10');
+    });
+
+    it('should format a discount value with currency `USD`', () => {
+      const actual = formatDiscount(discount, 'USD', intl);
+      expect(actual).toBe('USD 8.5');
+    });
+  });
+
+  describe('when `money` for `currencyCode` does not exist', () => {
+    it('should return `null`', () => {
+      const actual = formatDiscount(discount, 'PLN', intl);
+      expect(actual).toBeNull();
+    });
+  });
+
+  describe('without `money`', () => {
+    beforeEach(() => {
+      discount = createAbsoluteDiscount({
+        money: null,
+      });
+    });
+
+    it('should return `null`', () => {
+      const actual = formatDiscount(discount, 'PLN', intl);
+      expect(actual).toBeNull();
+    });
+  });
+});
+
+describe('when relative discount', () => {
+  let discount;
+
+  beforeEach(() => {
+    discount = createRelativeDiscount();
+  });
+
+  it('should format a relative discount with value of 30%', () => {
+    const actual = formatDiscount(discount, null, intl);
+    expect(actual).toBe('30%');
+  });
+});

package/src/utils/formats/discount/index.js

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

package/src/utils/formats/index.js

@@ -0,0 +1,4 @@
+export { formatDateTime, formatDateRangeValue, formatUTCOffset } from './date';
+export { formatMoney, formatMoneyValue, formatMoneyRangeValue } from './money';
+export { default as formatProductAttribute } from './product-attribute';
+export { default as formatCustomField } from './custom-field';

package/src/utils/formats/money/index.js

@@ -0,0 +1,6 @@
+export {
+  formatMoney,
+  formatMoneyValue,
+  formatMoneyRangeValue,
+  getFractionedAmount,
+} from './money';

package/src/utils/formats/money/money.js

@@ -0,0 +1,50 @@
+import { PRECISION_TYPES } from '../../constants';
+import { getFractionDigit } from '../../get-currency-code-data';
+
+export function formatMoneyRangeValue(value, intl) {
+  if (value.from === value.to)
+    return formatMoneyValue(value.from, value.currency, intl);
+  if (value.from && value.to)
+    return `${formatMoneyValue(value.from, value.currency, intl)} -
+      ${formatMoneyValue(value.to, value.currency, intl)}`;
+  if (value.from)
+    return `from ${formatMoneyValue(value.from, value.currency, intl)}`;
+  if (value.to) return `to ${formatMoneyValue(value.to, value.currency, intl)}`;
+
+  return '';
+}
+
+export function formatMoneyValue(amount, currency, intl) {
+  return formatMoney(
+    {
+      centAmount: amount,
+      fractionDigits: getFractionDigit(currency),
+      ...(currency ? { currencyCode: currency } : {}),
+    },
+    intl
+  );
+}
+
+export function getFractionedAmount(moneyValue) {
+  const { fractionDigits = 2 } = moneyValue;
+
+  // the amount should be available on preciseAmount for highPrecision
+  const amount =
+    moneyValue.type === PRECISION_TYPES.highPrecision
+      ? moneyValue.preciseAmount
+      : moneyValue.centAmount;
+
+  return amount / 10 ** fractionDigits;
+}
+
+export function formatMoney(moneyValue, intl, options) {
+  return intl.formatNumber(
+    moneyValue.fractionedAmount ?? getFractionedAmount(moneyValue),
+    {
+      style: 'currency',
+      currency: moneyValue.currencyCode,
+      minimumFractionDigits: moneyValue.fractionDigits,
+      ...options,
+    }
+  );
+}

package/src/utils/formats/money/money.spec.js

@@ -0,0 +1,117 @@
+import { PRECISION_TYPES } from '../../constants';
+import {
+  formatMoneyValue,
+  formatMoneyRangeValue,
+  getFractionedAmount,
+  formatMoney,
+} from './money';
+
+const intl = {
+  formatNumber: (amount, currency) => `${currency.currency} ${amount}`,
+};
+
+describe('formatting', () => {
+  describe('formatMoney', () => {
+    it('should display fractionedAmount if given', () => {
+      const actual = formatMoney(
+        { centAmount: 0, currencyCode: 'EUR', fractionedAmount: 1 },
+        intl
+      );
+      expect(actual).toBe('EUR 1');
+    });
+  });
+
+  it('formats a money value', () => {
+    const actual = formatMoneyValue(10000, 'EUR', intl);
+    expect(actual).toBe('EUR 100');
+  });
+
+  it("formats a money value with the currency's fraction digits", () => {
+    const actualJPY = formatMoneyValue(10000, 'JPY', intl);
+    expect(actualJPY).toBe('JPY 10000'); // 0 fraction digits
+
+    const actualUSD = formatMoneyValue(10000, 'USD', intl);
+    expect(actualUSD).toBe('USD 100'); // 2 fraction digits
+
+    const actualBHD = formatMoneyValue(10000, 'BHD', intl);
+    expect(actualBHD).toBe('BHD 10'); // 3 fraction digits
+
+    const actualCLF = formatMoneyValue(10000, 'CLF', intl);
+    expect(actualCLF).toBe('CLF 1'); // 4 fraction digits
+  });
+
+  it('formats a range money value with to value set to null', () => {
+    const money = {
+      from: 10000,
+      to: null,
+      currency: 'EUR',
+    };
+    const actual = formatMoneyRangeValue(money, intl);
+    expect(actual).toBe('from EUR 100');
+  });
+
+  it('formats a range money value with from value set to null', () => {
+    const money = {
+      from: null,
+      to: 10000,
+      currency: 'EUR',
+    };
+    const actual = formatMoneyRangeValue(money, intl);
+    expect(actual).toBe('to EUR 100');
+  });
+
+  it('formats a range money value with equal from/to values', () => {
+    const money = {
+      from: 10000,
+      to: 10000,
+      currency: 'EUR',
+    };
+    const actual = formatMoneyRangeValue(money, intl);
+    expect(actual).toBe('EUR 100');
+  });
+
+  it('formats a range money value with no from/to values', () => {
+    const money = {
+      from: null,
+      to: null,
+      currency: 'EUR',
+    };
+    const actual = formatMoneyRangeValue(money, intl);
+    expect(actual).toBe('EUR 0');
+  });
+
+  it('formats a range money value with different from/to values', () => {
+    const money = {
+      from: 10000,
+      to: 15000,
+      currency: 'EUR',
+    };
+    const actual = formatMoneyRangeValue(money, intl).split('-');
+
+    expect(actual[0].trim()).toBe('EUR 100');
+    expect(actual[1].trim()).toBe('EUR 150');
+  });
+  describe('getFractionedAmount', () => {
+    describe('with `highPrecision` value', () => {
+      it('should normalize based on `preciseAmount` for `highPrecision`', () => {
+        expect(
+          getFractionedAmount({
+            type: PRECISION_TYPES.highPrecision,
+            fractionDigits: 5,
+            preciseAmount: 123456789,
+          })
+        ).toBe(1234.56789);
+      });
+      it('should normalize based on `centAmount` for `centAmount`', () => {
+        expect(
+          getFractionedAmount({
+            type: PRECISION_TYPES.centPrecision,
+            fractionDigits: 2,
+            centAmount: 123456789,
+          })
+        ).toBe(1234567.89);
+      });
+    });
+    describe('with `centPrecision` value', () => {});
+  });
+});

package/src/utils/formats/percentage/index.js

@@ -0,0 +1 @@
+export { formatPercentage, convertRatioToPercentage } from './percentage';

package/src/utils/formats/percentage/percentage.js

@@ -0,0 +1,7 @@
+export function formatPercentage(percentage) {
+  return `${percentage}%`;
+}
+
+export function convertRatioToPercentage(ratio) {
+  return parseFloat((ratio * 100).toFixed(2));
+}