"use strict";

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

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

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

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

var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));

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

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

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

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

var _Button = require("../Button");

var _Loader = require("../Loader");

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

var _TextInput = require("../TextInput");

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

var _Icons = require("../Icons");

var _templateObject, _templateObject2;

var PromoCode = function PromoCode(_ref) {
  var _ref$stringsDomain = _ref.stringsDomain,
      stringsDomain = _ref$stringsDomain === void 0 ? 'promoCode' : _ref$stringsDomain;

  var _useState = (0, _react.useState)(false),
      isLoading = _useState[0],
      setIsLoading = _useState[1];

  var _useState2 = (0, _react.useState)(''),
      value = _useState2[0],
      setValue = _useState2[1];

  var _useState3 = (0, _react.useState)(''),
      error = _useState3[0],
      setError = _useState3[1];

  var _useLocalLabels = (0, _lib.useLocalLabels)(),
      title = _useLocalLabels.promoCodeBoxTitle,
      defaultErrorMessage = _useLocalLabels.promoCodeDefaultErrorMessage,
      submitLabel = _useLocalLabels.promoCodeSubmitLabel,
      inputPlaceholder = _useLocalLabels.promoCodeInputPlaceholder,
      errorsMap = (0, _objectWithoutPropertiesLoose2["default"])(_useLocalLabels, ["promoCodeBoxTitle", "promoCodeDefaultErrorMessage", "promoCodeSubmitLabel", "promoCodeInputPlaceholder"]);

  var onAddCallback = function onAddCallback() {
    setValue('');
    setIsLoading(false);
  };

  var onAddError = function onAddError(code) {
    setError(errorsMap['CodeError' + code.status] || defaultErrorMessage);
    setIsLoading(false);
  };

  var _useCheckoutDiscountC = (0, _lib.useCheckoutDiscountCode)(onAddCallback, onAddError),
      addCode = _useCheckoutDiscountC.handleDiscountCodeAdd;

  var onChange = function onChange(e) {
    setError('');
    setValue(e.target.value);
  };

  var onSubmit = /*#__PURE__*/function () {
    var _ref2 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(e) {
      return _regenerator["default"].wrap(function _callee$(_context) {
        while (1) {
          switch (_context.prev = _context.next) {
            case 0:
              e == null ? void 0 : e.preventDefault();
              setIsLoading(true);
              addCode({
                code: value
              });

            case 3:
            case "end":
              return _context.stop();
          }
        }
      }, _callee);
    }));

    return function onSubmit(_x) {
      return _ref2.apply(this, arguments);
    };
  }();

  var handleKeyPress = function handleKeyPress(e) {
    if (e.key === 'Enter') {
      e.preventDefault();
      value && onSubmit();
    }
  };

  var _useConfigState = (0, _lib.useConfigState)(),
      theme = _useConfigState.theme;

  var getButtonContent = function getButtonContent() {
    if (isLoading) {
      return /*#__PURE__*/_react["default"].createElement(_Loader.Loader, {
        width: "2.2rem",
        height: "2.2rem",
        stroke: theme.palette.secondary
      });
    }

    return submitLabel;
  };

  return /*#__PURE__*/_react["default"].createElement(Form, null, error && /*#__PURE__*/_react["default"].createElement(_Components.ErrorMessage, {
    error: error
  }), /*#__PURE__*/_react["default"].createElement(Flex, null, /*#__PURE__*/_react["default"].createElement(_TextInput.TextInput, {
    label: title,
    value: value,
    id: "PromoCode__" + stringsDomain,
    onChange: onChange,
    name: "PromoCode__" + stringsDomain,
    inputSize: "normal",
    isRequired: false,
    onKeyPress: handleKeyPress
  }), Boolean(value) && /*#__PURE__*/_react["default"].createElement(_Button.Button, {
    variant: "primary",
    fullWidth: true,
    borderRadius: "normal",
    className: "d-flex ml-3 align-items-center justify-content-center",
    style: {
      maxWidth: '12rem'
    },
    disabled: Boolean(error) || isLoading,
    type: "button",
    bordered: true,
    onClick: onSubmit
  }, Boolean(error) ? /*#__PURE__*/_react["default"].createElement(_Icons.IconDanger, {
    style: {
      width: '2.4rem'
    }
  }) : getButtonContent())));
};

exports.PromoCode = PromoCode;

var Form = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  max-width: 100%;\n\n  & input {\n    border-radius: 0;\n    border-color: ", ";\n  }\n"])), function (_ref3) {
  var theme = _ref3.theme;
  return theme.palette.hint;
});

var Flex = _styledComponents["default"].div.attrs({
  className: 'd-flex justify-content-center'
})(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])([""])));
//# sourceMappingURL=index.js.map