@commercetools-frontend/experimental-components 0.0.2 → 0.0.3

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

@@ -1,91 +0,0 @@
-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

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

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

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

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

@@ -1,58 +0,0 @@
-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

@@ -1,241 +0,0 @@
-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

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

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

@@ -1,12 +0,0 @@
-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

@@ -1,75 +0,0 @@
-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

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

package/src/utils/formats/index.js

@@ -1,4 +0,0 @@
-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

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

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

@@ -1,50 +0,0 @@
-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

@@ -1,117 +0,0 @@
-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

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

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

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