"use strict";

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

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

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

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

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

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

var _UI = require("../UI");

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

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

var _Components = require("./Components");

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;

var CheckoutPayment = function CheckoutPayment() {
  var _useCheckoutFormPayme = (0, _lib.useCheckoutFormPaymentState)(),
      errors = _useCheckoutFormPayme.errors,
      isSubmitting = _useCheckoutFormPayme.isSubmitting,
      isValid = _useCheckoutFormPayme.isValid,
      paymentMethods = _useCheckoutFormPayme.paymentMethods;

  var _usePixel = (0, _lib.usePixel)(),
      pixelCheckoutStep = _usePixel.pixelCheckoutStep,
      pixelCheckoutStepOption = _usePixel.pixelCheckoutStepOption;

  var _useCheckoutFormServe = (0, _lib.useCheckoutFormServerErrors)(),
      serverErrors = _useCheckoutFormServe.serverErrors;

  var _useCheckoutErrorFiel = (0, _lib.useCheckoutErrorFields)(),
      errorRef = _useCheckoutErrorFiel.errorRef;

  _react["default"].useEffect(function () {
    pixelCheckoutStep(2);
  }, []);

  var _useLocalLabels = (0, _lib.useLocalLabels)(),
      codLabel = _useLocalLabels.codLabel,
      boricaLabel = _useLocalLabels.boricaLabel,
      paymentTitle = _useLocalLabels.paymentTitle;

  var paymentsMap = {
    cod: codLabel,
    'cod-gr': codLabel,
    borica: boricaLabel
  };

  var handlePaymentClick = function handlePaymentClick(payment) {
    payment.onClick();
    pixelCheckoutStepOption(2, paymentsMap[payment.key]);
  };

  var canSubmit = !isSubmitting || isSubmitting && isValid;
  return /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(_UI.CheckoutTitle, {
    data: paymentTitle
  }), /*#__PURE__*/_react["default"].createElement(Border, null, paymentMethods == null ? void 0 : paymentMethods.map(function (payment) {
    return /*#__PURE__*/_react["default"].createElement(Option, {
      key: "Payment__" + payment.key,
      isSelected: payment.selected,
      onClick: function onClick() {
        return handlePaymentClick(payment);
      }
    }, /*#__PURE__*/_react["default"].createElement(Flex, null, /*#__PURE__*/_react["default"].createElement(Check, {
      isSelected: payment.selected
    }), /*#__PURE__*/_react["default"].createElement(Name, null, paymentsMap[payment.key])), /*#__PURE__*/_react["default"].createElement(Icon, null, iconsMap[payment.key]));
  }), /*#__PURE__*/_react["default"].createElement(_Components.Voucher, null)), serverErrors, !canSubmit && /*#__PURE__*/_react["default"].createElement(_Common.FormError, {
    errorRef: errorRef,
    errors: errors,
    fieldName: "paymentMethod"
  }));
};

exports.CheckoutPayment = CheckoutPayment;

var Container = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  width: 100%;\n"])));

var Border = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  border-top: 0.1rem solid ", ";\n  border-bottom: 0.1rem solid ", ";\n"])), function (_ref) {
  var theme = _ref.theme;
  return theme.palette.hint;
}, function (_ref2) {
  var theme = _ref2.theme;
  return theme.palette.hint;
});

var BoricaIconsContainer = _styledComponents["default"].div.attrs({
  className: 'd-flex align-items-center'
})(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var iconsMap = {
  cod: /*#__PURE__*/_react["default"].createElement(_Common.IconCOD, {
    style: {
      width: 'auto',
      height: '4rem'
    }
  }),
  'cod-gr': /*#__PURE__*/_react["default"].createElement(_Common.IconCOD, {
    style: {
      width: 'auto',
      height: '4rem'
    }
  }),
  borica: /*#__PURE__*/_react["default"].createElement(BoricaIconsContainer, null, /*#__PURE__*/_react["default"].createElement(_Common.IconVisa, {
    style: {
      width: 'auto',
      height: '1.4rem'
    }
  }), /*#__PURE__*/_react["default"].createElement(_Common.IconMasterCard, {
    style: {
      width: 'auto',
      height: '5rem',
      margin: '-2.6rem 0'
    }
  }))
};

var Name = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var Icon = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  line-height: 0.8;\n"])));

var Option = _styledComponents["default"].div.attrs({
  className: 'd-flex align-items-center justify-content-between py-3',
  tabIndex: 0
})(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  cursor: pointer;\n  border-bottom: 0.1rem dashed ", ";\n\n  ", "\n"])), function (_ref3) {
  var theme = _ref3.theme;
  return theme.palette.hint;
}, function (props) {
  return props.isSelected ? (0, _styledComponents.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2["default"])(["\n          border-color: ", ";\n\n          .Check,\n          .Check:after {\n            border-color: ", ";\n          }\n        "])), function (_ref4) {
    var theme = _ref4.theme;
    return theme.palette.primary;
  }, function (_ref5) {
    var theme = _ref5.theme;
    return theme.palette.primary;
  }) : (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2["default"])(["\n          &:hover {\n            .Check,\n            .Check:after {\n              border-color: ", ";\n            }\n          }\n        "])), function (_ref6) {
    var theme = _ref6.theme;
    return theme.palette.primary;
  });
});

var Flex = _styledComponents["default"].div.attrs({
  className: 'd-flex align-items-center'
})(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var Check = _styledComponents["default"].div.attrs({
  className: 'Check d-flex align-items-center justify-content-center mr-3'
})(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  border: 0.2rem solid\n    ", ";\n  border-radius: 50%;\n  min-width: 2.4rem;\n  max-width: 2.4rem;\n  height: 2.4rem;\n\n  &:after {\n    content: '';\n    border-radius: 50%;\n\n    display: block;\n    width: 1.2rem;\n    height: 1.2rem;\n    background: ", ";\n  }\n"])), function (props) {
  return props.isSelected ? props.theme.palette.primary : props.theme.palette.hint;
}, function (props) {
  return props.isSelected ? props.theme.palette.primary : 'transparent';
});
//# sourceMappingURL=index.js.map