"use strict";

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

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

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

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

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

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

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

var _reactHookForm = require("react-hook-form");

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

var _ = require("../../");

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

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;

var SubscribeForProduct = function SubscribeForProduct(_ref) {
  var selectedVariant = _ref.selectedVariant,
      handleClose = _ref.handleClose,
      sizes = _ref.sizes,
      setStateSizeId = _ref.setStateSizeId,
      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["selectedVariant", "handleClose", "sizes", "setStateSizeId"]);

  var _useUIFunctions = (0, _lib.useUIFunctions)(),
      closeViewById = _useUIFunctions.closeViewById;

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

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

  var _useIsAuthenticated = (0, _lib.useIsAuthenticated)(),
      isAuthenticated = _useIsAuthenticated.isAuthenticated,
      isLoading = _useIsAuthenticated.isLoading;

  var _useProfile = (0, _lib.useProfile)(),
      profileData = _useProfile.data;

  var _useAllSubscriptions = (0, _lib.useAllSubscriptions)({
    tag: 'news'
  }),
      allSubscriptions = _useAllSubscriptions.allSubscriptions,
      acceptChecked = _useAllSubscriptions.acceptChecked,
      clickSub = _useAllSubscriptions.clickSub,
      checkedSubs = _useAllSubscriptions.checkedSubs;

  var onSuccess = function onSuccess() {
    setIsSubscribed.on();
  };

  var _useSubscribeForProdu = (0, _lib.useSubscribeForProduct)({
    onSuccess: onSuccess
  }),
      subscribe = _useSubscribeForProdu.subscribe,
      isSubscribed = _useSubscribeForProdu.isSubscribed,
      setIsSubscribed = _useSubscribeForProdu.setIsSubscribed,
      error = _useSubscribeForProdu.error;

  var apiError = (0, _lib.useErrors)(error, {
    "default": 'Something went wrong'
  });

  var _useForm = (0, _reactHookForm.useForm)({
    defaultValues: {
      email: isAuthenticated ? profileData == null ? void 0 : profileData.email : '',
      size: '',
      quantity: '1'
    },
    mode: 'onChange'
  }),
      handleSubmit = _useForm.handleSubmit,
      errors = _useForm.errors,
      control = _useForm.control,
      setValue = _useForm.setValue;

  _react["default"].useEffect(function () {
    setValue('email', profileData == null ? void 0 : profileData.email);
  }, [isLoading, setValue, profileData == null ? void 0 : profileData.email]);

  var onSubmit = function onSubmit(_ref2) {
    var email = _ref2.email,
        quantity = _ref2.quantity;
    return subscribe({
      email: email,
      sku: selectedVariant == null ? void 0 : selectedVariant.sku,
      quantity: quantity
    }), acceptChecked(email);
  };

  var onClose = function onClose() {
    setIsSubscribed.off();
    closeViewById(views.subForProduct);
  };

  var sortedSizes = Object.keys(sizes).sort(function (a, b) {
    return sizes[a].extra.sort - sizes[b].extra.sort;
  });
  return /*#__PURE__*/_react["default"].createElement(_.Modal, (0, _extends2["default"])({
    title: "Email me if back in stock",
    open: true,
    handleClose: onClose // maxWidth="50rem"

  }, props), !isSubscribed ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("form", {
    noValidate: true,
    className: "d-flex flex-column ",
    onSubmit: handleSubmit(onSubmit)
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "d-flex flex-column flex-lg-row "
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "d-flex flex-column"
  }, /*#__PURE__*/_react["default"].createElement(_reactHookForm.Controller, {
    control: control,
    name: "email",
    rules: {
      required: true,
      pattern: {
        value: /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/i,
        message: 'Please enter valid email'
      }
    },
    as: /*#__PURE__*/_react["default"].createElement(EmailInput, {
      placeholder: productRestock.placeholders.email,
      id: "restock-email",
      type: "email"
    })
  }), /*#__PURE__*/_react["default"].createElement(_.FormError, {
    errors: apiError,
    fieldName: "email"
  }), /*#__PURE__*/_react["default"].createElement(_.FormError, {
    errors: errors,
    fieldName: "email"
  }), /*#__PURE__*/_react["default"].createElement("div", {
    className: "d-flex "
  }, /*#__PURE__*/_react["default"].createElement("span", {
    className: "flex-column mr-1 mr-lg-5",
    style: {
      width: '100%'
    }
  }, /*#__PURE__*/_react["default"].createElement(Description, null, productRestock.chooseSize), /*#__PURE__*/_react["default"].createElement(_reactHookForm.Controller, {
    control: control,
    name: "size",
    rules: {
      required: true
    },
    as: /*#__PURE__*/_react["default"].createElement(SizeSelector, null, /*#__PURE__*/_react["default"].createElement(SelectSize, {
      onChange: function onChange(e) {
        return setStateSizeId(e.target.value);
      }
    }, /*#__PURE__*/_react["default"].createElement(_Components.SizeList, {
      data: sortedSizes,
      placeholder: productRestock.placeholders.size,
      sizes: sizes
    })), /*#__PURE__*/_react["default"].createElement(_.IconArrowDown, null))
  })), /*#__PURE__*/_react["default"].createElement("span", {
    className: "flex-column",
    style: {
      width: '100%'
    }
  }, /*#__PURE__*/_react["default"].createElement(Description, null, productRestock.chooseQuantity), /*#__PURE__*/_react["default"].createElement(_reactHookForm.Controller, {
    control: control,
    name: "quantity",
    rules: {
      required: true
    },
    as: /*#__PURE__*/_react["default"].createElement(SizeSelector, null, /*#__PURE__*/_react["default"].createElement(SelectSize, null, /*#__PURE__*/_react["default"].createElement(_Components.QuantityList, {
      placeholder: productRestock.placeholders.quantity
    })), /*#__PURE__*/_react["default"].createElement(_.IconArrowDown, null))
  }))), /*#__PURE__*/_react["default"].createElement(_Components.ConsentsList, {
    allSubs: allSubscriptions,
    checkedSubs: checkedSubs,
    clickSub: clickSub
  })), /*#__PURE__*/_react["default"].createElement("div", {
    style: {
      width: '100%',
      height: '100%'
    },
    className: "mt-lg-auto"
  }, /*#__PURE__*/_react["default"].createElement(SubmitButton, {
    type: "submit",
    label: productRestock.button,
    icon: /*#__PURE__*/_react["default"].createElement(_.IconChevronRight, null),
    disabled: !!Object.keys(errors).length,
    variant: !!Object.keys(errors).length ? 'disabled' : 'primary'
  }))))) : /*#__PURE__*/_react["default"].createElement("span", {
    className: "d-flex flex-column"
  }, /*#__PURE__*/_react["default"].createElement(Success, null, productRestock.done), /*#__PURE__*/_react["default"].createElement(_.Button, {
    borderRadius: "small",
    label: productRestock.doneButton,
    onClick: onClose
  })));
};

exports.SubscribeForProduct = SubscribeForProduct;

var SelectSize = _styledComponents["default"].select.attrs({
  className: 'pr-1'
})(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  cursor: pointer;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  padding-left: 1rem;\n  height: 100%;\n  width: 100%;\n  color: ", ";\n  background: none;\n  border: 0px;\n  border-radius: 0.2rem;\n  appearance: none;\n  box-shadow: none;\n  outline: 0px;\n"])), function (_ref3) {
  var theme = _ref3.theme;
  return theme.palette.hint;
});

var SizeSelector = _styledComponents["default"].div.attrs({
  className: 'd-flex mr-lg-5'
})(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: relative;\n  color: ", ";\n  border: 0.1rem solid ", ";\n  width: 100%;\n  height: 4.4rem;\n  border-radius: 0.4rem;\n\n  border-color: ", ";\n\n  & svg {\n    width: 1.4rem;\n    height: 1.4rem;\n    stroke-width: 2;\n    position: absolute;\n    right: 1rem;\n    top: calc(50% - 0.8rem);\n  }\n"])), function (_ref4) {
  var theme = _ref4.theme;
  return theme.palette.hint;
}, function (_ref5) {
  var theme = _ref5.theme;
  return theme.palette.disabled;
}, function (_ref6) {
  var theme = _ref6.theme;
  return theme.palette.primary;
});

var EmailInput = (0, _styledComponents["default"])(_.Input).attrs({
  className: 'mb-2'
})(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  max-height: 4.4rem;\n  height: 4.4rem;\n\n  // width: 40rem;\n\n  background: ", ";\n\n  &::placeholder {\n    color: ", ";\n  }\n  border-color: ", ";\n  @media (max-width: ", ") {\n    width: 100% !important;\n    margin-top: 2rem;\n  }\n"])), function (_ref7) {
  var theme = _ref7.theme;
  return theme.palette.secondary;
}, function (_ref8) {
  var theme = _ref8.theme;
  return theme.palette.hint;
}, function (_ref9) {
  var theme = _ref9.theme;
  return theme.palette.primary;
}, function (_ref10) {
  var theme = _ref10.theme;
  return theme.breakpoints.md.max;
});
var SubmitButton = (0, _styledComponents["default"])(_.Button).attrs({
  className: "d-flex justify-content-center align-items-center mt-4  ml-lg-auto"
})(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  max-height: 5rem;\n  height: 5rem;\n  min-height: 0;\n\n  width: 100%;\n\n  & > span {\n    margin-top: 0.2rem;\n  }\n\n  @media (min-width: ", ") {\n    width: 80%;\n  }\n"])), function (_ref11) {
  var theme = _ref11.theme;
  return theme.breakpoints.lg.min;
});
var Description = (0, _styledComponents["default"])(_.Typography).attrs({
  variant: 5
})(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  max-width: 50rem;\n  ", "\n"])), function (_ref12) {
  var notice = _ref12.notice,
      theme = _ref12.theme;
  return notice && "\n    align-self: flex-end;\n    font-size: 1.2rem;\n    opacity: 0.8;\n    max-width: 100%;\n    @media (min-width: " + theme.breakpoints.lg.min + ") {\n      max-width: 91%;\n    }\n  ";
});
var Success = (0, _styledComponents["default"])(_.Typography).attrs({
  variant: 5,
  className: 'mb-3'
})(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2["default"])([""])));
//# sourceMappingURL=index.js.map