payments-js 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License Copyright (c) 2021
+
+Permission is hereby granted, free
+of charge, to any person obtaining a copy of this software and associated
+documentation files (the "Software"), to deal in the Software without
+restriction, including without limitation the rights to use, copy, modify, merge,
+publish, distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to the
+following conditions:
+
+The above copyright notice and this permission notice
+(including the next paragraph) shall be included in all copies or substantial
+portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF
+ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO
+EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR
+OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -0,0 +1,37 @@
+# payments-js
+
+Payments js utils
+
+## Features
+
+- ES6 syntax, managed with Prettier
+- React
+- Redux
+
+## Install
+
+```sh
+yarn add payments-js
+// or 
+npm i payments-js
+```
+
+### Requirements
+
+- React 16.8
+
+
+### Usage
+
+```js
+import { Payments } from 'payments-js';
+import { App } from './app';
+import * as ReactDOM from 'react-dom';
+
+ReactDOM.render(
+  <App>
+    <Payments key={'YOUR_KEY'}/>
+  </App>,
+  document.getElementById('root')
+);
+```

package/dist/components/Disclaimer.js

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var Disclaimer = function Disclaimer(_ref) {
+  var block = _ref.block;
+  var disclaimerList; // eslint-disable-next-line no-prototype-builtins
+
+  if (block.hasOwnProperty('components')) {
+    // React Component
+    disclaimerList = block.components.map(function (disclaimer, index) {
+      return /*#__PURE__*/_react.default.createElement(disclaimer.name, _objectSpread(_objectSpread({}, disclaimer.props), {}, {
+        key: index
+      }));
+    });
+  } else {
+    // HTML
+    disclaimerList = block.strings.content.map(function (disclaimer, index) {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        key: index,
+        dangerouslySetInnerHTML: {
+          __html: disclaimer
+        }
+      });
+    });
+  }
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    id: "disclaimerList"
+  }, disclaimerList);
+};
+
+Disclaimer.propTypes = {
+  block: _propTypes.default.object.isRequired
+};
+var _default = Disclaimer;
+exports.default = _default;

package/dist/components/fields/EmailField.js

@@ -0,0 +1,121 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactIntl = require("react-intl");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _validations = require("../../utils/validations");
+
+var _commonUtils = require("../../utils/commonUtils");
+
+var _fieldsMessages = require("./fieldsMessages");
+
+var _fieldErrorIcon = _interopRequireDefault(require("./errors/fieldErrorIcon"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var EmailField = function EmailField(_ref) {
+  var block = _ref.block,
+      inputRef = _ref.inputRef;
+
+  var _useIntl = (0, _reactIntl.useIntl)(),
+      formatMessage = _useIntl.formatMessage;
+
+  var labelStrings = block.strings || {};
+  var emailFieldLabel = (0, _commonUtils.getCustomOrDefaultValue)(labelStrings.label, formatMessage(_fieldsMessages.fieldsMessages.emailFieldLabel));
+  var emailFieldPlaceholder = (0, _commonUtils.getCustomOrDefaultValue)(labelStrings.placeholder, formatMessage(_fieldsMessages.fieldsMessages.emailFieldPlaceholder));
+
+  var _ref2 = labelStrings.errorMessages || {},
+      isEmptyMessage = _ref2.isEmptyMessage,
+      isInvalidMessage = _ref2.isInvalidMessage; // internationalize all the error messages
+
+
+  block = _objectSpread(_objectSpread({}, block), {}, {
+    isEmptyMessage: isEmptyMessage || formatMessage(_fieldsMessages.fieldsErrorMessages.incompleteField),
+    isInvalidMessage: isInvalidMessage || formatMessage(_fieldsMessages.fieldsErrorMessages.invalidEmail)
+  });
+
+  var _useState = (0, _react.useState)(''),
+      _useState2 = _slicedToArray(_useState, 2),
+      emailValue = _useState2[0],
+      setEmailValue = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(''),
+      _useState4 = _slicedToArray(_useState3, 2),
+      emailFieldError = _useState4[0],
+      setEmailFieldError = _useState4[1];
+
+  var handleChange = function handleChange(e) {
+    var value = e.target.value;
+
+    var validationMessage = _validations.defaultFieldValidators.emailField(block, value, formatMessage);
+
+    validationMessage ? setEmailFieldError(validationMessage) : setEmailFieldError('');
+    setEmailValue(value);
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "payment-widget__checkout__email__container",
+    ref: inputRef
+  }, /*#__PURE__*/_react.default.createElement("label", {
+    htmlFor: "payment-widget__checkout__email",
+    className: "payment-checkout__label"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: 'payment-checkout__label__text ' + (emailFieldError.length > 0 ? 'payment-checkout__label__text--error' : '')
+  }, emailFieldLabel)), /*#__PURE__*/_react.default.createElement("div", {
+    className: "payment-checkout__input-wrapper"
+  }, /*#__PURE__*/_react.default.createElement("input", {
+    type: "text",
+    placeholder: emailFieldPlaceholder,
+    className: 'payment-widget__checkout__email ' + (emailFieldError.length ? 'payment-widget__checkout__fields__input__error' : ''),
+    name: "payment-widget__checkout__email",
+    id: "payment-widget__checkout__email",
+    onChange: function onChange(e) {
+      return handleChange(e);
+    },
+    onBlur: function onBlur(e) {
+      return handleChange(e);
+    },
+    value: emailValue
+  }), emailFieldError.length > 0 && /*#__PURE__*/_react.default.createElement(_fieldErrorIcon.default, null)), /*#__PURE__*/_react.default.createElement("div", {
+    className: "payment-widget__checkout__email__error payment-widget__checkout__field__error"
+  }, emailFieldError));
+};
+
+EmailField.propTypes = {
+  block: _propTypes.default.object.isRequired,
+  inputRef: _propTypes.default.func.isRequired
+};
+var _default = EmailField;
+exports.default = _default;

package/dist/components/fields/NameField.js

@@ -0,0 +1,186 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactIntl = require("react-intl");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _validations = require("../../utils/validations");
+
+var _commonUtils = require("../../utils/commonUtils");
+
+var _constants = require("../../constants/constants");
+
+var _fieldsMessages = require("./fieldsMessages");
+
+var _fieldErrorIcon = _interopRequireDefault(require("./errors/fieldErrorIcon"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var NameField = function NameField(_ref) {
+  var block = _ref.block,
+      inputRef = _ref.inputRef;
+
+  var _useIntl = (0, _reactIntl.useIntl)(),
+      formatMessage = _useIntl.formatMessage;
+
+  var labelStrings = block.strings || {};
+  var firstNameLabel = (0, _commonUtils.getCustomOrDefaultValue)(labelStrings.firstNameLabel, formatMessage(_fieldsMessages.fieldsMessages.firstNameLabel));
+  var lastNameLabel = (0, _commonUtils.getCustomOrDefaultValue)(labelStrings.lastNameLabel, formatMessage(_fieldsMessages.fieldsMessages.lastNameLabel));
+  var firstNamePlaceholder = (0, _commonUtils.getCustomOrDefaultValue)(labelStrings.firstNamePlaceholder, formatMessage(_fieldsMessages.fieldsMessages.firstNamePlaceholder));
+  var lastNamePlaceholder = (0, _commonUtils.getCustomOrDefaultValue)(labelStrings.lastNamePlaceholder, formatMessage(_fieldsMessages.fieldsMessages.lastNamePlaceholder));
+
+  var _ref2 = labelStrings.errorMessages || {},
+      isFirstNameEmptyMessage = _ref2.isFirstNameEmptyMessage,
+      isFirstNameMaxMessage = _ref2.isFirstNameMaxMessage,
+      isLastNameEmptyMessage = _ref2.isLastNameEmptyMessage,
+      isLastNameMaxMessage = _ref2.isLastNameMaxMessage;
+
+  var _ref3 = block.maxLimit || {},
+      firstNameLimit = _ref3.firstNameLimit,
+      lastNameLimit = _ref3.lastNameLimit; // internationalize all the error messages
+
+
+  block = _objectSpread(_objectSpread({}, block), {}, {
+    isFirstNameEmptyMessage: isFirstNameEmptyMessage || formatMessage(_fieldsMessages.fieldsErrorMessages.incompleteField),
+    isLastNameEmptyMessage: isLastNameEmptyMessage || formatMessage(_fieldsMessages.fieldsErrorMessages.incompleteField),
+    isFirstNameMaxMessage: isFirstNameMaxMessage || formatMessage(_fieldsMessages.fieldsErrorMessages.exceedsMaxChracters, {
+      max: _constants.FIRST_NAME_FIELD_MAX
+    }),
+    isLastNameMaxMessage: isLastNameMaxMessage || formatMessage(_fieldsMessages.fieldsErrorMessages.exceedsMaxChracters, {
+      max: _constants.LAST_NAME_FIELD_MAX
+    }),
+    firstNameLimit: firstNameLimit || _constants.FIRST_NAME_FIELD_MAX,
+    lastNameLimit: lastNameLimit || _constants.LAST_NAME_FIELD_MAX
+  });
+
+  var _useState = (0, _react.useState)(''),
+      _useState2 = _slicedToArray(_useState, 2),
+      firstNameValue = _useState2[0],
+      setFirstNameValue = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(''),
+      _useState4 = _slicedToArray(_useState3, 2),
+      lastNameValue = _useState4[0],
+      setLastNameValue = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(''),
+      _useState6 = _slicedToArray(_useState5, 2),
+      firstNameFieldError = _useState6[0],
+      setFirstNameFieldError = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(''),
+      _useState8 = _slicedToArray(_useState7, 2),
+      lastNameFieldError = _useState8[0],
+      setlastNameFieldError = _useState8[1];
+
+  var handleChange = function handleChange(e, field) {
+    var value = e.target.value;
+
+    if (field === 'first') {
+      var validationMessage = _validations.defaultFieldValidators.firstNameField(block, value);
+
+      validationMessage ? setFirstNameFieldError(validationMessage) : setFirstNameFieldError('');
+      setFirstNameValue(value);
+    } else {
+      var _validationMessage = _validations.defaultFieldValidators.lastNameField(block, value);
+
+      _validationMessage ? setlastNameFieldError(_validationMessage) : setlastNameFieldError('');
+      setLastNameValue(value);
+    }
+  };
+
+  var firstNameField = /*#__PURE__*/_react.default.createElement("div", {
+    className: "payment-widget__checkout__first-name__container"
+  }, /*#__PURE__*/_react.default.createElement("label", {
+    htmlFor: "payment-widget__checkout__first-name",
+    className: "payment-checkout__label"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: 'payment-checkout__label__text ' + (firstNameFieldError.length > 0 ? 'payment-checkout__label__text--error' : '')
+  }, firstNameLabel)), /*#__PURE__*/_react.default.createElement("div", {
+    className: "payment-checkout__input-wrapper"
+  }, /*#__PURE__*/_react.default.createElement("input", {
+    type: "text",
+    placeholder: firstNamePlaceholder,
+    className: 'payment-widget__checkout__name-field ' + (firstNameFieldError.length ? 'payment-widget__checkout__fields__input__error' : ''),
+    name: "payment-widget__checkout__first-name",
+    id: "payment-widget__checkout__first-name",
+    onChange: function onChange(e) {
+      return handleChange(e, 'first');
+    },
+    onBlur: function onBlur(e) {
+      return handleChange(e, 'first');
+    },
+    value: firstNameValue
+  }), firstNameFieldError.length > 0 && /*#__PURE__*/_react.default.createElement(_fieldErrorIcon.default, null)), /*#__PURE__*/_react.default.createElement("div", {
+    className: "payment-widget__checkout__name-field__error payment-widget__checkout__field__error"
+  }, firstNameFieldError));
+
+  var lastNameField = /*#__PURE__*/_react.default.createElement("div", {
+    className: "payment-widget__checkout__last-name__container"
+  }, /*#__PURE__*/_react.default.createElement("label", {
+    htmlFor: "payment-widget__checkout__last-name",
+    className: "payment-checkout__label"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: 'payment-checkout__label__text ' + (lastNameFieldError.length > 0 ? 'payment-checkout__label__text--error' : '')
+  }, lastNameLabel)), /*#__PURE__*/_react.default.createElement("div", {
+    className: "payment-checkout__input-wrapper"
+  }, /*#__PURE__*/_react.default.createElement("input", {
+    type: "text",
+    placeholder: lastNamePlaceholder,
+    className: 'payment-widget__checkout__name-field ' + (lastNameFieldError.length ? 'payment-widget__checkout__fields__input__error' : ''),
+    name: "payment-widget__checkout__last-name",
+    id: "payment-widget__checkout__last-name",
+    onChange: function onChange(e) {
+      return handleChange(e, 'last');
+    },
+    onBlur: function onBlur(e) {
+      return handleChange(e, 'last');
+    },
+    value: lastNameValue
+  }), lastNameFieldError.length > 0 && /*#__PURE__*/_react.default.createElement(_fieldErrorIcon.default, null)), /*#__PURE__*/_react.default.createElement("div", {
+    className: "payment-widget__checkout__name-field__error payment-widget__checkout__field__error"
+  }, lastNameFieldError));
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "payment-widget__checkout__name-field__container",
+    ref: inputRef
+  }, firstNameField, lastNameField);
+};
+
+NameField.propTypes = {
+  block: _propTypes.default.object.isRequired,
+  inputRef: _propTypes.default.func.isRequired
+};
+var _default = NameField;
+exports.default = _default;

package/dist/components/fields/PhoneNumberField.js

@@ -0,0 +1,121 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactIntl = require("react-intl");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _validations = require("../../utils/validations");
+
+var _commonUtils = require("../../utils/commonUtils");
+
+var _fieldsMessages = require("./fieldsMessages");
+
+var _fieldErrorIcon = _interopRequireDefault(require("./errors/fieldErrorIcon"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var PhoneNumberField = function PhoneNumberField(_ref) {
+  var block = _ref.block,
+      inputRef = _ref.inputRef;
+
+  var _useIntl = (0, _reactIntl.useIntl)(),
+      formatMessage = _useIntl.formatMessage;
+
+  var labelStrings = block.strings || {};
+  var phoneFieldLabel = (0, _commonUtils.getCustomOrDefaultValue)(labelStrings.label, formatMessage(_fieldsMessages.fieldsMessages.phoneNumberFieldLabel));
+  var phoneFieldPlaceholder = (0, _commonUtils.getCustomOrDefaultValue)(labelStrings.placeholder, formatMessage(_fieldsMessages.fieldsMessages.phoneNumberFieldPlaceholder));
+
+  var _ref2 = labelStrings.errorMessages || {},
+      isEmptyMessage = _ref2.isEmptyMessage,
+      isInvalidMessage = _ref2.isInvalidMessage; // internationalize all the error messages
+
+
+  block = _objectSpread(_objectSpread({}, block), {}, {
+    isEmptyMessage: isEmptyMessage || formatMessage(_fieldsMessages.fieldsErrorMessages.incompleteField),
+    isInvalidMessage: isInvalidMessage || formatMessage(_fieldsMessages.fieldsErrorMessages.invalidPhoneNumber)
+  });
+
+  var _useState = (0, _react.useState)(''),
+      _useState2 = _slicedToArray(_useState, 2),
+      phoneValue = _useState2[0],
+      setPhoneValue = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(''),
+      _useState4 = _slicedToArray(_useState3, 2),
+      phoneFieldError = _useState4[0],
+      setPhoneFieldError = _useState4[1];
+
+  var handleChange = function handleChange(e) {
+    var value = e.target.value;
+
+    var validationMessage = _validations.defaultFieldValidators.phoneField(block, value);
+
+    validationMessage ? setPhoneFieldError(validationMessage) : setPhoneFieldError('');
+    setPhoneValue(value);
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "payment-widget__checkout__phone-number__container",
+    ref: inputRef
+  }, /*#__PURE__*/_react.default.createElement("label", {
+    htmlFor: "payment-widget__checkout__phone-number",
+    className: "payment-checkout__label"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: 'payment-checkout__label__text ' + (phoneFieldError.length > 0 ? 'payment-checkout__label__text--error' : '')
+  }, phoneFieldLabel)), /*#__PURE__*/_react.default.createElement("div", {
+    className: "payment-checkout__input-wrapper"
+  }, /*#__PURE__*/_react.default.createElement("input", {
+    type: "text",
+    placeholder: phoneFieldPlaceholder,
+    className: 'payment-widget__checkout__phone-number ' + (phoneFieldError.length ? 'payment-widget__checkout__fields__input__error' : ''),
+    name: "payment-widget__checkout__phone-number",
+    id: "payment-widget__checkout__phone-number",
+    onChange: function onChange(e) {
+      return handleChange(e);
+    },
+    onBlur: function onBlur(e) {
+      return handleChange(e);
+    },
+    value: phoneValue
+  }), phoneFieldError.length > 0 && /*#__PURE__*/_react.default.createElement(_fieldErrorIcon.default, null)), /*#__PURE__*/_react.default.createElement("div", {
+    className: "payment-widget__checkout__phone-number__error payment-widget__checkout__field__error"
+  }, phoneFieldError));
+};
+
+PhoneNumberField.propTypes = {
+  block: _propTypes.default.object.isRequired,
+  inputRef: _propTypes.default.func.isRequired
+};
+var _default = PhoneNumberField;
+exports.default = _default;

package/dist/components/fields/errors/fieldErrorIcon.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function FieldErrorIcon() {
+  return /*#__PURE__*/_react.default.createElement("span", {
+    className: "payment-checkout-input__inline-validation payment-checkout-input__inline-validation--invalid"
+  }, /*#__PURE__*/_react.default.createElement("svg", {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M16 8C16 9.44086 15.6398 10.7742 14.9194 12C14.1989 13.2258 13.2258 14.1989 12 14.9194C10.7742 15.6398 9.44086 16 8 16C6.55914 16 5.22581 15.6398 4 14.9194C2.77419 14.1989 1.80108 13.2258 1.08065 12C0.360215 10.7742 0 9.44086 0 8C0 6.55914 0.360215 5.22581 1.08065 4C1.80108 2.77419 2.77419 1.80108 4 1.08065C5.22581 0.360215 6.55914 0 8 0C9.44086 0 10.7742 0.360215 12 1.08065C13.2258 1.80108 14.1989 2.77419 14.9194 4C15.6398 5.22581 16 6.55914 16 8ZM8.01613 10C7.60308 10 7.24982 10.1467 6.95635 10.4402C6.66287 10.7337 6.51613 11.087 6.51613 11.5C6.51613 11.913 6.66287 12.2663 6.95635 12.5598C7.24982 12.8533 7.60308 13 8.01613 13C8.42917 13 8.78243 12.8533 9.07591 12.5598C9.36939 12.2663 9.51613 11.913 9.51613 11.5C9.51613 11.087 9.36939 10.7337 9.07591 10.4402C8.78243 10.1467 8.42917 10 8.01613 10ZM6.58064 3.41935L6.83871 7.80645C6.83871 7.89247 6.87634 7.97312 6.95161 8.04839C7.02688 8.12366 7.11828 8.16129 7.2258 8.16129H8.77419C8.88172 8.16129 8.97312 8.12366 9.04838 8.04839C9.12365 7.97312 9.16129 7.89247 9.16129 7.80645L9.41935 3.41935C9.41935 3.29032 9.38172 3.18817 9.30645 3.1129C9.23118 3.03763 9.13978 3 9.03226 3H6.96774C6.86021 3 6.76881 3.03763 6.69355 3.1129C6.61828 3.18817 6.58064 3.29032 6.58064 3.41935Z",
+    fill: "#D10244"
+  })));
+}
+
+var _default = FieldErrorIcon;
+exports.default = _default;

package/dist/components/fields/fieldsMessages.js

@@ -0,0 +1,75 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.fieldsMessages = exports.fieldsErrorMessages = void 0;
+
+var _reactIntl = require("react-intl");
+
+var fieldsMessages = (0, _reactIntl.defineMessages)({
+  firstNameLabel: {
+    id: 'inputField.label.firstName',
+    description: 'Label for First name field',
+    defaultMessage: 'First Name'
+  },
+  lastNameLabel: {
+    id: 'inputField.label.lastName',
+    description: 'Label for Last name field',
+    defaultMessage: 'Last Name'
+  },
+  emailFieldLabel: {
+    id: 'inputField.label.Email',
+    description: 'Label for Email field',
+    defaultMessage: 'Email'
+  },
+  phoneNumberFieldLabel: {
+    id: 'inputField.label.phoneNumber',
+    description: 'Label for Phone number field',
+    defaultMessage: 'Phone Number'
+  },
+  firstNamePlaceholder: {
+    id: 'inputField.placeholder.firstName',
+    description: 'Label for First name field',
+    defaultMessage: 'John'
+  },
+  lastNamePlaceholder: {
+    id: 'inputField.placeholder.lastName',
+    description: 'Label for First name field',
+    defaultMessage: 'Doe'
+  },
+  emailFieldPlaceholder: {
+    id: 'inputField.placeholder.email',
+    description: 'Label for First name field',
+    defaultMessage: 'john.doe@cashstar.com'
+  },
+  phoneNumberFieldPlaceholder: {
+    id: 'inputField.placeholder.phoneNumber',
+    description: 'Label for First name field',
+    defaultMessage: 'Enter phone number'
+  }
+});
+exports.fieldsMessages = fieldsMessages;
+var fieldsErrorMessages = (0, _reactIntl.defineMessages)({
+  incompleteField: {
+    id: 'inputField.errorMessage.incompleteField',
+    description: 'Error message if a required field is kept empty',
+    defaultMessage: 'Incomplete field'
+  },
+  exceedsMaxChracters: {
+    id: 'inputField.errorMessage.exceedsMaxCharacters',
+    description: 'Error message if any field exceeds maximum characters',
+    defaultMessage: 'Exceeds {max} characters'
+  },
+  invalidEmail: {
+    id: 'inputField.errorMessage.pleaseEnterAValidEmailAddress',
+    description: 'Error message if email field is invalid',
+    defaultMessage: 'Please enter a valid email address'
+  },
+  invalidPhoneNumber: {
+    id: 'inputField.errorMessage.pleaseEnterAValidPhoneNumber',
+    description: 'Error message if phone number field is invalid',
+    defaultMessage: 'Please enter a valid phone number'
+  }
+});
+exports.fieldsErrorMessages = fieldsErrorMessages;