"use strict";

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

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

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

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

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

var _reactToastNotifications = require("react-toast-notifications");

var _Typography = require("../../../Common/Typography");

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

var _templateObject, _templateObject2, _templateObject3, _templateObject4;

var VouchersCTA = function VouchersCTA(_ref) {
  var mobile = _ref.mobile,
      labels = _ref.labels;

  var _usePromoCode = (0, _lib.usePromoCode)(),
      hasActiveVoucher = _usePromoCode.hasActiveVoucher,
      activateVoucher = _usePromoCode.activateVoucher,
      voucherName = _usePromoCode.voucherName;

  var _useGlobalLabels = (0, _lib.useGlobalLabels)(),
      toastNotifications = _useGlobalLabels.toastNotifications;

  var _useToasts = (0, _reactToastNotifications.useToasts)(),
      addToast = _useToasts.addToast;

  var handleClick = function handleClick() {
    var _toastNotifications$s;

    activateVoucher();
    addToast(toastNotifications == null ? void 0 : (_toastNotifications$s = toastNotifications.success) == null ? void 0 : _toastNotifications$s.activatedVoucher, {
      appearance: 'success',
      autoDismiss: true
    });
  };

  return /*#__PURE__*/_react["default"].createElement(Container, {
    mobile: mobile,
    isActive: !hasActiveVoucher
  }, /*#__PURE__*/_react["default"].createElement(ContentWrapper, {
    as: "div",
    variant: "7",
    isActive: !hasActiveVoucher
  }, /*#__PURE__*/_react["default"].createElement(Label, null, labels.label), /*#__PURE__*/_react["default"].createElement(CTA, null, voucherName), ' ', /*#__PURE__*/_react["default"].createElement(Label, {
    isLink: true,
    onClick: handleClick
  }, labels.activate)));
};

exports.VouchersCTA = VouchersCTA;

var Container = _styledComponents["default"].div.attrs(function (props) {
  return {
    className: "container-fluid " + (props.mobile ? 'd-flex d-lg-none' : 'd-none d-lg-flex')
  };
})(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  height: 4.5rem;\n  min-height: 4.5rem;\n  ", "\n  padding: 0.8rem 0;\n  /* box-shadow: inset 0 -1px 0 0 ", "; */\n  position: relative;\n  background: ", ";\n  overflow: hidden;\n  align-items: center;\n  max-width: none;\n  min-width: 100vw;\n  margin-top: ", " !important;\n  transition: all 0.3s;\n"])), function (_ref2) {
  var isActive = _ref2.isActive;
  return !isActive && "\n  min-height: 0;\n  height: 0;\n  padding: 0 !important;\n  ";
}, function (_ref3) {
  var theme = _ref3.theme;
  return theme.palette.light;
}, function (_ref4) {
  var theme = _ref4.theme;
  return theme.palette.primary;
}, function (_ref5) {
  var mobile = _ref5.mobile;
  return mobile ? "6rem" : '0';
});

var ContentWrapper = (0, _styledComponents["default"])(_Typography.Typography)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  opacity: ", ";\n  font-size: 1.3rem;\n  line-height: 1.4rem;\n  transition: opacity 0.4s ease;\n\n  min-width: 100%;\n  color: ", ";\n  text-align: center;\n\n  @media (min-width: ", ") {\n    font-size: 1.5rem;\n  }\n"])), function (props) {
  return props.isActive ? '1' : '0';
}, function (_ref6) {
  var theme = _ref6.theme;
  return theme.palette.secondary;
}, function (_ref7) {
  var theme = _ref7.theme;
  return theme.breakpoints.lg.min;
});

var Label = _styledComponents["default"].span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  color: ", ";\n  width: fit-content;\n  ", "\n"])), function (_ref8) {
  var theme = _ref8.theme;
  return theme.palette.secondary;
}, function (props) {
  return props.isLink && "\n  font-weight: 700;\n  cursor: pointer;\n  text-decoration: underline;\n  ";
});

var CTA = _styledComponents["default"].span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  cursor: pointer;\n  font-weight: 700;\n  color: ", ";\n  width: fit-content;\n"])), function (_ref9) {
  var theme = _ref9.theme;
  return theme.palette.secondary;
});
//# sourceMappingURL=index.js.map