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

var _templateObject;

import React from 'react';
import { FormError, TextInput as Input } from '../../../../../Common';
import { CheckoutTitle } from '../../../UI';
import { useCheckoutErrorFields, useCheckoutFormBillingState, useLocalLabels } from '@sentecacommerce-theme/lib';
import styled from 'styled-components';
export var CheckoutCompanyForm = () => {
  var _data$company, _data$company2, _data$company3, _data$company4;

  var {
    data,
    errors,
    onInputChange
  } = useCheckoutFormBillingState();
  var {
    errorRef
  } = useCheckoutErrorFields();

  var onChange = e => {
    if (!data) return;
    onInputChange == null ? void 0 : onInputChange(e.target.name, e.target.value);
  };

  var labels = useLocalLabels();
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
    className: "col-12 mt-0"
  }, /*#__PURE__*/React.createElement(CheckoutTitle, {
    data: labels.companyDetails
  }), /*#__PURE__*/React.createElement("div", {
    className: "row g-4"
  }, /*#__PURE__*/React.createElement(DesktopHalf, null, /*#__PURE__*/React.createElement(Input, {
    inputSize: "normal",
    label: labels.vatNumberLabel,
    value: data == null ? void 0 : (_data$company = data.company) == null ? void 0 : _data$company.vatId,
    onChange: onChange,
    id: "company.vatId",
    type: "text",
    name: "company.vatId",
    isRequired: false
  }), /*#__PURE__*/React.createElement(FormError, {
    errorRef: errorRef,
    fieldName: "vatId",
    errors: errors,
    absolute: true
  })), /*#__PURE__*/React.createElement(DesktopHalf, null, /*#__PURE__*/React.createElement(Input, {
    inputSize: "normal",
    label: labels.uicLabel,
    value: data == null ? void 0 : (_data$company2 = data.company) == null ? void 0 : _data$company2.companyId,
    onChange: onChange,
    id: "company.companyId",
    type: "text",
    isRequired: true,
    name: "company.companyId"
  }), /*#__PURE__*/React.createElement(FormError, {
    errorRef: errorRef,
    fieldName: "companyId",
    errors: errors,
    absolute: true
  })))), /*#__PURE__*/React.createElement(DesktopHalf, null, /*#__PURE__*/React.createElement(Input, {
    inputSize: "normal",
    label: labels.recipientLabel,
    value: data == null ? void 0 : (_data$company3 = data.company) == null ? void 0 : _data$company3.companyPerson,
    onChange: onChange,
    id: "company.companyPerson",
    type: "text",
    isRequired: true,
    name: "company.companyPerson"
  }), /*#__PURE__*/React.createElement(FormError, {
    errorRef: errorRef,
    fieldName: "companyPerson",
    errors: errors,
    absolute: true
  })), /*#__PURE__*/React.createElement(DesktopHalf, null, /*#__PURE__*/React.createElement(Input, {
    inputSize: "normal",
    label: labels.companyNameLabel,
    value: data == null ? void 0 : (_data$company4 = data.company) == null ? void 0 : _data$company4.companyName,
    onChange: onChange,
    id: "company.companyName",
    type: "text",
    isRequired: true,
    name: "company.companyName"
  }), /*#__PURE__*/React.createElement(FormError, {
    errorRef: errorRef,
    fieldName: "companyName",
    errors: errors,
    absolute: true
  })), /*#__PURE__*/React.createElement(DesktopHalf, null, /*#__PURE__*/React.createElement(Input, {
    inputSize: "normal",
    label: labels.companyCityLabel,
    value: data == null ? void 0 : data.additionalAddressInfo,
    onChange: onChange,
    id: "city",
    type: "text",
    isRequired: true,
    name: "city"
  }), /*#__PURE__*/React.createElement(FormError, {
    errorRef: errorRef,
    fieldName: "city",
    errors: errors,
    absolute: true
  })), /*#__PURE__*/React.createElement(DesktopHalf, null, /*#__PURE__*/React.createElement(Input, {
    inputSize: "normal",
    label: labels.companyZipLabel,
    value: data == null ? void 0 : data.additionalAddressInfo,
    onChange: onChange,
    id: "postalCode",
    type: "text",
    isRequired: true,
    name: "postalCode"
  }), /*#__PURE__*/React.createElement(FormError, {
    errorRef: errorRef,
    fieldName: "postalCode",
    errors: errors,
    absolute: true
  })), /*#__PURE__*/React.createElement(DesktopHalf, null, /*#__PURE__*/React.createElement(Input, {
    inputSize: "normal",
    label: labels.companyStreetLabel,
    value: data == null ? void 0 : data.additionalAddressInfo,
    onChange: onChange,
    id: "streetName",
    type: "text",
    isRequired: true,
    name: "streetName"
  }), /*#__PURE__*/React.createElement(FormError, {
    errorRef: errorRef,
    fieldName: "streetName",
    errors: errors,
    absolute: true
  })), /*#__PURE__*/React.createElement(DesktopHalf, null, /*#__PURE__*/React.createElement(Input, {
    inputSize: "normal",
    label: labels.companyStreetNumberLabel,
    value: data == null ? void 0 : data.additionalAddressInfo,
    onChange: onChange,
    id: "streetNumber",
    type: "text",
    name: "streetNumber"
  }), /*#__PURE__*/React.createElement(FormError, {
    errorRef: errorRef,
    fieldName: "streetNumber",
    errors: errors,
    absolute: true
  })));
};
var DesktopHalf = styled.div.attrs({
  className: 'col-12 col-sm-6'
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose([""])));
//# sourceMappingURL=index.js.map