"use strict";

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

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

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

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 _Common = require("../../../../../Common");

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

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

var Restock = function Restock(_ref) {
  var _variant$images;

  var backToProducts = _ref.backToProducts,
      variant = _ref.variant,
      setProducts = _ref.setProducts,
      products = _ref.products,
      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["backToProducts", "variant", "setProducts", "products"]);

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

  var _usePixel = (0, _lib.usePixel)(),
      pixelRemoveLineItem = _usePixel.pixelRemoveLineItem;

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

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

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

  var _useBasket = (0, _lib.useBasket)({
    productId: variant == null ? void 0 : variant.productId,
    variantId: variant == null ? void 0 : variant.variantId,
    offerId: variant == null ? void 0 : variant.offerId
  }),
      removeFromBasket = _useBasket.removeFromBasket;

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

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

  var _useForm = (0, _reactHookForm.useForm)({
    defaultValues: {
      email: ''
    },
    mode: 'onChange'
  }),
      handleSubmit = _useForm.handleSubmit,
      errors = _useForm.errors,
      control = _useForm.control,
      setValue = _useForm.setValue;

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

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

  var removeIndex = products == null ? void 0 : products.map(function (item) {
    return item.productId;
  }).indexOf(variant == null ? void 0 : variant.productId);

  var handleClick = function handleClick() {
    products == null ? void 0 : products.splice(removeIndex, 1);
    setProducts(products);
    removeFromBasket();
    pixelRemoveLineItem({
      product: {
        id: variant == null ? void 0 : variant.productId,
        sku: variant == null ? void 0 : variant.sku
      },
      currencyCode: variant == null ? void 0 : variant.currencyCode
    });
    backToProducts();
    setIsSubscribed.off();
  };

  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, !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(_Common.FormError, {
    errors: apiError,
    fieldName: "email"
  }), /*#__PURE__*/_react["default"].createElement(_Common.FormError, {
    errors: errors,
    fieldName: "email"
  }), /*#__PURE__*/_react["default"].createElement(ProductInfo, null, /*#__PURE__*/_react["default"].createElement(Image, null, /*#__PURE__*/_react["default"].createElement(_Common.LazyResponsiveImage, {
    breakpointSizes: {
      xs: '50vw',
      lg: '20vw',
      xl: '20vw',
      xxl: '20vw'
    },
    defaultImageWidth: "40vw",
    imagesMap: variant == null ? void 0 : (_variant$images = variant.images) == null ? void 0 : _variant$images[0]
  })), /*#__PURE__*/_react["default"].createElement("div", {
    className: "d-flex flex-column ml-2"
  }, /*#__PURE__*/_react["default"].createElement("span", {
    className: " mr-1 mr-lg-5",
    style: {
      width: '100%'
    }
  }, /*#__PURE__*/_react["default"].createElement(Description, {
    name: true
  }, variant == null ? void 0 : variant.name)), (variant == null ? void 0 : variant.size) && /*#__PURE__*/_react["default"].createElement("span", {
    className: " mr-1 mr-lg-5 mt-auto",
    style: {
      width: '100%'
    }
  }, /*#__PURE__*/_react["default"].createElement(Description, null, variant == null ? void 0 : variant.size)), (variant == null ? void 0 : variant.color) && /*#__PURE__*/_react["default"].createElement("span", {
    className: " mr-1 mr-lg-5",
    style: {
      width: '100%'
    }
  }, /*#__PURE__*/_react["default"].createElement(Description, null, variant == null ? void 0 : variant.color)), (variant == null ? void 0 : variant.quantity) && /*#__PURE__*/_react["default"].createElement("span", {
    className: "",
    style: {
      width: '100%'
    }
  }, /*#__PURE__*/_react["default"].createElement(Description, null, "Quantity: ", variant == null ? void 0 : variant.quantity, ' ')))), /*#__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(_Common.IconChevronRight, null),
    variant: !!Object.keys(errors).length ? 'disabled' : 'primary',
    disabled: !!Object.keys(errors).length
  }))))) : /*#__PURE__*/_react["default"].createElement("span", {
    className: "d-flex flex-column"
  }, /*#__PURE__*/_react["default"].createElement(Success, null, productRestock.done), /*#__PURE__*/_react["default"].createElement(_Common.Button, {
    borderRadius: "small",
    label: productRestock.doneButton,
    onClick: handleClick
  })));
};

exports.Restock = Restock;
var EmailInput = (0, _styledComponents["default"])(_Common.Input).attrs({
  className: 'mb-2'
})(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  max-height: 4.4rem;\n  height: 4.4rem;\n  // width: 40rem;\n  background: ", ";\n  &::placeholder {\n    color: ", ";\n  }\n  border-color: ", ";\n  @media (max-width: ", ") {\n    width: 100% !important;\n    margin-top: 2rem;\n  }\n"])), function (_ref3) {
  var theme = _ref3.theme;
  return theme.palette.secondary;
}, function (_ref4) {
  var theme = _ref4.theme;
  return theme.palette.hint;
}, function (_ref5) {
  var theme = _ref5.theme;
  return theme.palette.primary;
}, function (_ref6) {
  var theme = _ref6.theme;
  return theme.breakpoints.md.max;
});

var ProductInfo = _styledComponents["default"].div.attrs({
  className: 'd-flex'
})(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: relative;\n"])));

var Image = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  width: 20%;\n"])));

var SubmitButton = (0, _styledComponents["default"])(_Common.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  width: 100%;\n  & > span {\n    margin-top: 0.2rem;\n  }\n  @media (min-width: ", ") {\n    width: 80%;\n  }\n"])), function (_ref7) {
  var theme = _ref7.theme;
  return theme.breakpoints.lg.min;
});
var Description = (0, _styledComponents["default"])(_Common.Typography).attrs({
  variant: 5
})(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  max-width: 50rem;\n  font-weight: ", ";\n  ", "\n"])), function (_ref8) {
  var name = _ref8.name;
  return name ? '700' : '500';
}, function (_ref9) {
  var notice = _ref9.notice,
      theme = _ref9.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"])(_Common.Typography).attrs({
  variant: 5,
  className: 'mb-3'
})(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2["default"])([""])));
//# sourceMappingURL=index.js.map