"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.RecipientFields = void 0;

var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));

var _react = _interopRequireDefault(require("react"));

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _Common = require("../../../Common");

var _reactHookForm = require("react-hook-form");

var _checkoutVoucher = require("../../checkoutVoucher.context");

var _lib = require("@sentecacommerce-theme/lib");

var _templateObject;

var RecipientFields = function RecipientFields() {
  var _useVoucherForm = (0, _checkoutVoucher.useVoucherForm)(),
      formControl = _useVoucherForm.formControl,
      errors = _useVoucherForm.errors;

  var labels = (0, _lib.useStrings)('checkoutVoucher');
  return /*#__PURE__*/_react["default"].createElement(InputsWrapper, null, /*#__PURE__*/_react["default"].createElement("div", {
    className: "col-6"
  }, /*#__PURE__*/_react["default"].createElement(_reactHookForm.Controller, {
    control: formControl,
    rules: {
      required: labels.fieldIsRequired
    },
    name: "firstName",
    as: /*#__PURE__*/_react["default"].createElement(_Common.Input, {
      placeholder: labels.firstNameLabel
    })
  }), /*#__PURE__*/_react["default"].createElement(_Common.FormError, {
    errors: errors,
    fieldName: "firstName"
  })), /*#__PURE__*/_react["default"].createElement("div", {
    className: "col-6"
  }, /*#__PURE__*/_react["default"].createElement(_reactHookForm.Controller, {
    control: formControl,
    rules: {
      required: labels.fieldIsRequired
    },
    name: "lastName",
    as: /*#__PURE__*/_react["default"].createElement(_Common.Input, {
      placeholder: labels.lastNameLabel
    })
  }), /*#__PURE__*/_react["default"].createElement(_Common.FormError, {
    errors: errors,
    fieldName: "lastName"
  })), /*#__PURE__*/_react["default"].createElement("div", {
    className: "col-12"
  }, /*#__PURE__*/_react["default"].createElement(_reactHookForm.Controller, {
    control: formControl,
    rules: {
      required: labels.fieldIsRequired,
      pattern: {
        value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
        message: labels.emailIsInvalid
      }
    },
    name: "email",
    as: /*#__PURE__*/_react["default"].createElement(_Common.Input, {
      type: "email",
      placeholder: labels.emailLabel
    })
  }), /*#__PURE__*/_react["default"].createElement(_Common.FormError, {
    errors: errors,
    fieldName: "email"
  })));
};

exports.RecipientFields = RecipientFields;

var InputsWrapper = _styledComponents["default"].div.attrs({
  className: 'row g-2'
})(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  & input {\n    margin-top: 0;\n  }\n"])));
//# sourceMappingURL=index.js.map