import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/taggedTemplateLiteralLoose";

var _templateObject;

import React from 'react';
import styled from 'styled-components';
import { FormError, Input } from '../../../Common';
import { Controller } from 'react-hook-form';
import { useVoucherForm } from '../../checkoutVoucher.context';
import { useStrings } from '@sentecacommerce-theme/lib';
export var RecipientFields = () => {
  var {
    formControl,
    errors
  } = useVoucherForm();
  var labels = useStrings('checkoutVoucher');
  return /*#__PURE__*/React.createElement(InputsWrapper, null, /*#__PURE__*/React.createElement("div", {
    className: "col-6"
  }, /*#__PURE__*/React.createElement(Controller, {
    control: formControl,
    rules: {
      required: labels.fieldIsRequired
    },
    name: "firstName",
    as: /*#__PURE__*/React.createElement(Input, {
      placeholder: labels.firstNameLabel
    })
  }), /*#__PURE__*/React.createElement(FormError, {
    errors: errors,
    fieldName: "firstName"
  })), /*#__PURE__*/React.createElement("div", {
    className: "col-6"
  }, /*#__PURE__*/React.createElement(Controller, {
    control: formControl,
    rules: {
      required: labels.fieldIsRequired
    },
    name: "lastName",
    as: /*#__PURE__*/React.createElement(Input, {
      placeholder: labels.lastNameLabel
    })
  }), /*#__PURE__*/React.createElement(FormError, {
    errors: errors,
    fieldName: "lastName"
  })), /*#__PURE__*/React.createElement("div", {
    className: "col-12"
  }, /*#__PURE__*/React.createElement(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.createElement(Input, {
      type: "email",
      placeholder: labels.emailLabel
    })
  }), /*#__PURE__*/React.createElement(FormError, {
    errors: errors,
    fieldName: "email"
  })));
};
var InputsWrapper = styled.div.attrs({
  className: 'row g-2'
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  & input {\n    margin-top: 0;\n  }\n"])));
//# sourceMappingURL=index.js.map