@commercetools-frontend/experimental-components 5.3.1 → 5.4.1

package/dist/commercetools-frontend-experimental-components.cjs.prod.js

@@ -1683,7 +1683,7 @@ function formatMoneyRangeValue(value, intl) {
   return '';
 }
 function formatMoneyValue(amount, currency, intl) {
-  return formatMoney$1(_objectSpread$1l({
+  return formatMoney$2(_objectSpread$1l({
     centAmount: amount,
     fractionDigits: getFractionDigit(currency)
   }, currency ? {
@@ -1698,7 +1698,7 @@ function getFractionedAmount(moneyValue) {
   const amount = moneyValue.type === PRECISION_TYPES.highPrecision ? moneyValue.preciseAmount : moneyValue.centAmount;
   return amount / 10 ** fractionDigits;
 }
-function formatMoney$1(moneyValue, intl, options) {
+function formatMoney$2(moneyValue, intl, options) {
   var _moneyValue$fractione;
   return intl.formatNumber((_moneyValue$fractione = moneyValue.fractionedAmount) !== null && _moneyValue$fractione !== void 0 ? _moneyValue$fractione : getFractionedAmount(moneyValue), _objectSpread$1l({
     style: 'currency',
@@ -1749,10 +1749,10 @@ const formatLtext = _ref3 => {
     locale: language
   });
 };
-const formatMoney = _ref4 => {
+const formatMoney$1 = _ref4 => {
   let value = _ref4.value,
     intl = _ref4.intl;
-  return formatMoney$1(value, intl);
+  return formatMoney$2(value, intl);
 };
 const formatReference = _ref5 => {
   let value = _ref5.value;
@@ -1842,7 +1842,7 @@ const doNotFormat = _ref13 => {
   let value = _ref13.value;
   return value;
 };
-const getFormatter = type => isNil__default["default"](type) ? formatNilType : type.name === 'nested' ? formatNested : type.name === 'set' ? formatSet : type.name === 'enum' ? formatEnum : type.name === 'lenum' ? formatLenum : type.name === 'ltext' ? formatLtext : type.name === 'money' ? formatMoney : type.name === 'reference' ? formatReference : type.name === 'date' ? formatDate : type.name === 'time' ? doNotFormat : type.name === 'datetime' ? formatDateTime : type.name === 'boolean' ? formatBoolean : type.name === 'text' ? doNotFormat : type.name === 'number' ? doNotFormat : formatUnknown;
+const getFormatter = type => isNil__default["default"](type) ? formatNilType : type.name === 'nested' ? formatNested : type.name === 'set' ? formatSet : type.name === 'enum' ? formatEnum : type.name === 'lenum' ? formatLenum : type.name === 'ltext' ? formatLtext : type.name === 'money' ? formatMoney$1 : type.name === 'reference' ? formatReference : type.name === 'date' ? formatDate : type.name === 'time' ? doNotFormat : type.name === 'datetime' ? formatDateTime : type.name === 'boolean' ? formatBoolean : type.name === 'text' ? doNotFormat : type.name === 'number' ? doNotFormat : formatUnknown;
 function formatAttribute(_ref14) {
   let type = _ref14.type,
     value = _ref14.value,
@@ -4332,12 +4332,38 @@ const createAttributeTypeValue = attribute => {
       return attribute.type;
   }
 };
+
+/*
+ * Fixed price supports high precision. Action format is nested with the
+ * the type of the money. Absolute discount only works with cent precision,
+ * hence the action structure is flat.
+ */
+const formatMoney = valueType => money => {
+  if (valueType === 'fixed') {
+    return {
+      [money.type]: _objectSpread$10({
+        centAmount: money.centAmount,
+        currencyCode: money.currencyCode
+      }, money.type === PRECISION_TYPES.highPrecision && {
+        preciseAmount: money.preciseAmount,
+        fractionDigits: money.fractionDigits
+      })
+    };
+  } else if (valueType === 'absolute') {
+    return {
+      centAmount: money.centAmount,
+      currencyCode: money.currencyCode
+    };
+  } else {
+    throw new Error('Unexpected value type for money.');
+  }
+};
+
 /**
  * converts the `changeValue` action to GraphQL actions variable
  * @param {Object} actionPayload
  */
 const convertChangeValueAction = actionPayload => {
-  var _context2;
   const valueType = actionPayload.value.type;
   const possibleTypeKeys = {
     relative: ['permyriad'],
@@ -4346,7 +4372,11 @@ const convertChangeValueAction = actionPayload => {
     giftLineItem: ['product', 'variantId', 'distributionChannel', 'supplyChannel', 'ResourceIdentifierInput']
   };
   const filteredValue = pick__default["default"](actionPayload.value, possibleTypeKeys[valueType]);
-  if (filteredValue.money) filteredValue.money = _mapInstanceProperty__default["default"](_context2 = filteredValue.money).call(_context2, valueItem => omit__default["default"](valueItem, '__typename'));
+  if (filteredValue.money) {
+    var _context2;
+    const moneyFormatter = formatMoney(valueType);
+    filteredValue.money = _mapInstanceProperty__default["default"](_context2 = filteredValue.money).call(_context2, moneyFormatter);
+  }
   return {
     changeValue: {
       value: {
@@ -4355,6 +4385,7 @@ const convertChangeValueAction = actionPayload => {
     }
   };
 };
+
 /**
  * This function changes any payload after the actions have been computed.
  * Currently we only need to change the `setCustomField` action payload
@@ -7208,6 +7239,13 @@ function CustomInputSet(props) {
       children: jsxRuntime.jsx(formik.Field, {
         name: props.name,
         validate: values => {
+          // This validate function overrides the one found in  CustomFieldInternal ,
+          // so we need to check if the field is required here.
+          if (props.fieldDefinition.required && isNil__default["default"](dropEmptyEntries(values))) {
+            return {
+              missing: true
+            };
+          }
           const errors = getDuplicateErrors(values);
           return errors.length > 0 ? errors : undefined;
         },
@@ -7585,10 +7623,12 @@ const CustomFieldsInternal = props => {
       return jsxRuntime.jsx(formik.FastField, {
         name: fieldName,
         validate: validate,
-        children: () => {
-          var _context3;
-          return jsxRuntime.jsxs(uiKit.Spacings.Stack, {
-            scale: "xs",
+        children: () => jsxRuntime.jsx(uiKit.Spacings.Stack, {
+          scale: "xs",
+          children: jsxRuntime.jsxs("div", {
+            "aria-invalid": _Object$keys__default["default"](fieldErrors !== null && fieldErrors !== void 0 ? fieldErrors : {}).length > 0,
+            "aria-errormessage": "".concat(fieldName, "-error"),
+            id: "".concat(fieldName, "-error"),
             children: [jsxRuntime.jsx(CustomFieldsLabel, {
               name: fieldName,
               fieldDefinition: fieldDefinition
@@ -7603,26 +7643,22 @@ const CustomFieldsInternal = props => {
                 isReadOnly: props.isReadOnly,
                 onBlur: handleBlur,
                 setFieldValue: props.setFieldValue
-              }) : jsxRuntime.jsx("div", {
-                "aria-invalid": _Object$keys__default["default"](fieldErrors !== null && fieldErrors !== void 0 ? fieldErrors : {}).length > 0,
-                "aria-errormessage": "".concat(fieldName, "-error"),
-                children: jsxRuntime.jsx(CustomFieldInput, {
-                  name: fieldName,
-                  value: value,
-                  fieldDefinition: fieldDefinition,
-                  isDisabled: props.isDisabled,
-                  isReadOnly: props.isReadOnly,
-                  onBlur: handleBlur,
-                  setFieldValue: props.setFieldValue,
-                  hasError: hasError
-                })
-              }, _concatInstanceProperty__default["default"](_context3 = "".concat(fieldName, "-")).call(_context3, index)), jsxRuntime.jsx(CustomFieldErrors, {
+              }) : jsxRuntime.jsx(CustomFieldInput, {
+                name: fieldName,
+                value: value,
+                fieldDefinition: fieldDefinition,
+                isDisabled: props.isDisabled,
+                isReadOnly: props.isReadOnly,
+                onBlur: handleBlur,
+                setFieldValue: props.setFieldValue,
+                hasError: hasError
+              }), jsxRuntime.jsx(CustomFieldErrors, {
                 isTouched: isTouched,
                 errors: fieldErrors
               })]
             })]
-          });
-        }
+          })
+        })
       }, _concatInstanceProperty__default["default"](_context2 = "".concat(fieldName, "-")).call(_context2, index));
     })
   });
@@ -8967,7 +9003,7 @@ function formatDiscount(discount, currencyCode, intl) {
   if (discount.type === 'relative') return "".concat(discount.permyriad / 100, "%");
   if (!discount.money) return null;
   const moneyForCurrencyCode = _findInstanceProperty__default["default"](_context = discount.money).call(_context, discountMoney => discountMoney.currencyCode === currencyCode);
-  return moneyForCurrencyCode ? formatMoney$1(moneyForCurrencyCode, intl) : null;
+  return moneyForCurrencyCode ? formatMoney$2(moneyForCurrencyCode, intl) : null;
 }
 
 function formatPercentage(percentage) {
@@ -11296,6 +11332,10 @@ const ScrollToFieldError = () => {
   const formik$1 = formik.useFormikContext();
   const isValid = formik$1.isValid,
     submitCount = formik$1.submitCount;
+  const _useApplicationContex = applicationShellConnectors.useApplicationContext(applicationContext => ({
+      dataLocale: applicationContext.dataLocale
+    })),
+    dataLocale = _useApplicationContex.dataLocale;
   React.useEffect(() => {
     // Do not run the effect if the form hasn't been submitted yet.
     if (submitCount === 0) return;
@@ -11303,17 +11343,23 @@ const ScrollToFieldError = () => {
     if (isValid) return;
     const firstErrorElement = document.querySelector('[aria-invalid="true"]');
     if (firstErrorElement) {
-      var _ref, _document$querySelect, _elementToScrollTo$sc;
+      var _ref, _ref2, _document$querySelect, _elementToScrollTo$sc;
       // Get a reference to the label.
-      const id = firstErrorElement.getAttribute('id');
+      const firstElementId = firstErrorElement.getAttribute('id');
+      const localizedInputIndex = _indexOfInstanceProperty__default["default"](firstElementId).call(firstElementId, ".".concat(dataLocale));
+
+      // check if locale is appended then remove it from id
+      const id = localizedInputIndex > -1 ? firstElementId.replace(".".concat(dataLocale), '') : firstElementId;
 
       // Scroll to the label (if found), otherwise to the input element itself.
-      const elementToScrollTo = (_ref = (_document$querySelect = document.querySelector("label[for=\"".concat(id, "\"]"))) !== null && _document$querySelect !== void 0 ? _document$querySelect : document.querySelector("label#".concat(id))) !== null && _ref !== void 0 ? _ref : firstErrorElement;
+
+      const elementToScrollTo = //  div is used only for custom fields
+      (_ref = (_ref2 = (_document$querySelect = document.querySelector("div[aria-errormessage=\"".concat(firstElementId, "\"]"))) !== null && _document$querySelect !== void 0 ? _document$querySelect : document.querySelector("label[for=\"".concat(id, "\"]"))) !== null && _ref2 !== void 0 ? _ref2 : document.querySelector("label#".concat(id))) !== null && _ref !== void 0 ? _ref : firstErrorElement;
       (_elementToScrollTo$sc = elementToScrollTo.scrollIntoView) === null || _elementToScrollTo$sc === void 0 || _elementToScrollTo$sc.call(elementToScrollTo, {
         behavior: 'smooth'
       });
     }
-  }, [isValid, submitCount]);
+  }, [dataLocale, isValid, submitCount]);
   return null;
 };
 
@@ -12607,7 +12653,7 @@ const computedProperties = {
       intl = _ref4.intl;
     const allVariants = _concatInstanceProperty__default["default"](_context2 = product.variants).call(_context2, product.masterVariant);
     const variantPrices = flatMap__default["default"](allVariants, variant => variant.prices);
-    return _mapInstanceProperty__default["default"](_context3 = getMinimumPricesByCurrencyCode(variantPrices)).call(_context3, price => formatMoney$1(price, intl)).join(', ') || constants.NO_VALUE_FALLBACK;
+    return _mapInstanceProperty__default["default"](_context3 = getMinimumPricesByCurrencyCode(variantPrices)).call(_context3, price => formatMoney$2(price, intl)).join(', ') || constants.NO_VALUE_FALLBACK;
   },
   sku(_ref5) {
     var _context4, _context5;
@@ -12912,13 +12958,18 @@ var messages = reactIntl.defineMessages({
     id: 'CustomTypesSubform.typesPlaceholder',
     description: 'The placeholder for the types',
     defaultMessage: 'Select...'
+  },
+  noInputValues: {
+    id: 'CustomTypesSubform.noInputValues',
+    description: 'The label when there are no input values defined for the custom fields.',
+    defaultMessage: 'There are no input values defined for the custom fields.'
   }
 });
 
 const FIELD_NAME = 'custom';
 
 function ownKeys$2(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$2(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$2(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var _context2, _context3; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context2 = ownKeys$2(Object(t), !0)).call(_context2, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context3 = ownKeys$2(Object(t))).call(_context3, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
 const typeDefinitionsExist = typeDefinitions => {
   return typeDefinitions.length > 0;
 };
@@ -12929,9 +12980,18 @@ const typeDefinitionSelected = formValues => {
 const typeDefinitionContainsFieldDefinitions = formValues => {
   return formValues[FIELD_NAME].type.obj.key && formValues[FIELD_NAME].type.obj.fieldDefinitions.length > 0;
 };
-const CustomFieldsInputWrapper = _ref => {
-  let typeDefinitions = _ref.typeDefinitions,
-    isReadOnly = _ref.isReadOnly;
+const fieldDefinitionsWithValues = formValues => {
+  var _context;
+  const fieldValues = formValues[FIELD_NAME].fields;
+  return _filterInstanceProperty__default["default"](_context = formValues[FIELD_NAME].type.obj.fieldDefinitions).call(_context, _ref => {
+    let name = _ref.name;
+    return fieldValues[name] !== undefined;
+  });
+};
+const CustomFieldsInputWrapper = _ref2 => {
+  let typeDefinitions = _ref2.typeDefinitions,
+    isReadOnly = _ref2.isReadOnly,
+    hideEmptyFields = _ref2.hideEmptyFields;
   const _useFormikContext = formik.useFormikContext(),
     formValues = _valuesInstanceProperty__default["default"](_useFormikContext);
   if (!typeDefinitionsExist(typeDefinitions)) {
@@ -12943,12 +13003,15 @@ const CustomFieldsInputWrapper = _ref => {
   if (!typeDefinitionContainsFieldDefinitions(formValues)) {
     return jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$2({}, messages.noCustomFields));
   }
+  if (fieldDefinitionsWithValues(formValues).length === 0 && isReadOnly && hideEmptyFields) {
+    return jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$2({}, messages.noInputValues));
+  }
   return jsxRuntime.jsx(uiKit.Constraints.Horizontal, {
     max: "scale",
     children: jsxRuntime.jsx(CustomFields, {
       isReadOnly: isReadOnly,
       name: "".concat(FIELD_NAME, ".fields"),
-      fieldDefinitions: formValues[FIELD_NAME].type.obj.fieldDefinitions
+      fieldDefinitions: isReadOnly && hideEmptyFields ? fieldDefinitionsWithValues(formValues) : formValues[FIELD_NAME].type.obj.fieldDefinitions
     })
   });
 };
@@ -12982,10 +13045,11 @@ const createFormStateFromTypeDefinition = selectedTypeDefinition => {
   };
 };
 const CustomTypeSubform = _ref => {
-  var _formValues$FIELD_NAM, _formValues$FIELD_NAM2;
+  var _formValues$FIELD_NAM3, _formValues$FIELD_NAM4;
   let typeDefinitions = _ref.typeDefinitions,
     isReadOnly = _ref.isReadOnly,
-    isCondensed = _ref.isCondensed;
+    isCondensed = _ref.isCondensed,
+    hideEmptyFields = _ref.hideEmptyFields;
   const _useFormikContext = formik.useFormikContext(),
     formValues = _valuesInstanceProperty__default["default"](_useFormikContext),
     setFieldValue = _useFormikContext.setFieldValue,
@@ -13012,6 +13076,13 @@ const CustomTypeSubform = _ref => {
       });
     }
   }, [typeDefinitions, setFieldValue, validateForm]);
+  const typeDefinitionSelected = formValues => {
+    var _formValues$FIELD_NAM, _formValues$FIELD_NAM2;
+    return ((_formValues$FIELD_NAM = formValues[FIELD_NAME]) === null || _formValues$FIELD_NAM === void 0 ? void 0 : _formValues$FIELD_NAM.type) && ((_formValues$FIELD_NAM2 = formValues[FIELD_NAME]) === null || _formValues$FIELD_NAM2 === void 0 || (_formValues$FIELD_NAM2 = _formValues$FIELD_NAM2.type) === null || _formValues$FIELD_NAM2 === void 0 ? void 0 : _formValues$FIELD_NAM2.obj);
+  };
+
+  // if the user has read-only permissions, empty fields are hidden, and no type definition is selected, hide the component
+  if (isReadOnly && hideEmptyFields && !typeDefinitionSelected(formValues)) return null;
   return jsxRuntime.jsx(uiKit.CollapsiblePanel, {
     header: jsxRuntime.jsx(uiKit.CollapsiblePanel.Header, {
       isCondensed: isCondensed,
@@ -13023,8 +13094,8 @@ const CustomTypeSubform = _ref => {
         isClearable: true,
         "data-testid": "custom-type-select",
         name: "".concat(FIELD_NAME, ".type.obj.key"),
-        options: mapTypeDefinitionsToOptions(typeDefinitions, language, languages, (_formValues$FIELD_NAM = formValues[FIELD_NAME]) === null || _formValues$FIELD_NAM === void 0 || (_formValues$FIELD_NAM = _formValues$FIELD_NAM.type) === null || _formValues$FIELD_NAM === void 0 ? void 0 : _formValues$FIELD_NAM.id),
-        value: (_formValues$FIELD_NAM2 = formValues[FIELD_NAME]) === null || _formValues$FIELD_NAM2 === void 0 || (_formValues$FIELD_NAM2 = _formValues$FIELD_NAM2.type) === null || _formValues$FIELD_NAM2 === void 0 || (_formValues$FIELD_NAM2 = _formValues$FIELD_NAM2.obj) === null || _formValues$FIELD_NAM2 === void 0 ? void 0 : _formValues$FIELD_NAM2.key,
+        options: mapTypeDefinitionsToOptions(typeDefinitions, language, languages, (_formValues$FIELD_NAM3 = formValues[FIELD_NAME]) === null || _formValues$FIELD_NAM3 === void 0 || (_formValues$FIELD_NAM3 = _formValues$FIELD_NAM3.type) === null || _formValues$FIELD_NAM3 === void 0 ? void 0 : _formValues$FIELD_NAM3.id),
+        value: (_formValues$FIELD_NAM4 = formValues[FIELD_NAME]) === null || _formValues$FIELD_NAM4 === void 0 || (_formValues$FIELD_NAM4 = _formValues$FIELD_NAM4.type) === null || _formValues$FIELD_NAM4 === void 0 || (_formValues$FIELD_NAM4 = _formValues$FIELD_NAM4.obj) === null || _formValues$FIELD_NAM4 === void 0 ? void 0 : _formValues$FIELD_NAM4.key,
         onChange: handleTypeDefinitionSelect,
         placeholder: formatMessage(messages.typesPlaceholder),
         isReadOnly: isReadOnly
@@ -13033,7 +13104,8 @@ const CustomTypeSubform = _ref => {
     headerControlsAlignment: "right",
     children: jsxRuntime.jsx(CustomFieldsInputWrapper, {
       typeDefinitions: typeDefinitions,
-      isReadOnly: isReadOnly
+      isReadOnly: isReadOnly,
+      hideEmptyFields: hideEmptyFields
     })
   });
 };
@@ -13129,7 +13201,8 @@ const createGraphQlDocFromFormState = formState => {
 const CustomFieldsFormField = _ref => {
   let resources = _ref.resources,
     isReadOnly = _ref.isReadOnly,
-    isCondensed = _ref.isCondensed;
+    isCondensed = _ref.isCondensed,
+    hideEmptyFields = _ref.hideEmptyFields;
   const projectKey = applicationShellConnectors.useApplicationContext(applicationContext => applicationContext.project.key);
   return jsxRuntime.jsx(CustomFieldTypeDefinitionsConnector$1, {
     resources: resources,
@@ -13146,7 +13219,8 @@ const CustomFieldsFormField = _ref => {
       return jsxRuntime.jsx(CustomTypeSubform, {
         typeDefinitions: typeDefinitions,
         isReadOnly: isReadOnly,
-        isCondensed: isCondensed
+        isCondensed: isCondensed,
+        hideEmptyFields: hideEmptyFields
       });
     }
   });
@@ -13233,7 +13307,7 @@ exports.formatCustomerName = formatCustomerName;
 exports.formatDateRangeValue = formatDateRangeValue;
 exports.formatDateTime = formatDateTime$1;
 exports.formatDiscount = formatDiscount;
-exports.formatMoney = formatMoney$1;
+exports.formatMoney = formatMoney$2;
 exports.formatMoneyRangeValue = formatMoneyRangeValue;
 exports.formatMoneyValue = formatMoneyValue;
 exports.formatPercentage = formatPercentage;