"use strict";

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

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

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

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

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

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

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

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

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

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

var _Invoice = require("../Invoice");

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;

var CheckoutShipping = function CheckoutShipping() {
  var _useCheckoutFormShipp = (0, _lib.useCheckoutFormShippingState)(),
      savedAddressList = _useCheckoutFormShipp.savedAddressList,
      isSavedAddressListEnabled = _useCheckoutFormShipp.isSavedAddressListEnabled,
      isAddingNew = _useCheckoutFormShipp.isAddingNew,
      updateIsAddingNew = _useCheckoutFormShipp.updateIsAddingNew,
      hasAvailableSavedAddress = _useCheckoutFormShipp.hasAvailableSavedAddress,
      errors = _useCheckoutFormShipp.errors;

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

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

  var _useLocalLabels = (0, _lib.useLocalLabels)(),
      addNewAddress = _useLocalLabels.addNewAddress;

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

  _react["default"].useEffect(function () {
    window.scrollTo(0, 0);
  }, [isAddingNew]);

  if (isSavedAddressListEnabled && !savedAddressList) {
    return /*#__PURE__*/_react["default"].createElement(SpinnerContainer, null, /*#__PURE__*/_react["default"].createElement(_Common.Spinner, null));
  }

  if (isAddingNew || !isSavedAddressListEnabled || !hasAvailableSavedAddress) {
    return /*#__PURE__*/_react["default"].createElement(InputsWrapper, null, /*#__PURE__*/_react["default"].createElement(_Components.CheckoutAddressForm, null), /*#__PURE__*/_react["default"].createElement(InvoiceContainer, null, /*#__PURE__*/_react["default"].createElement(_Invoice.CheckoutInvoice, null)));
  }

  return /*#__PURE__*/_react["default"].createElement(InputsWrapper, null, /*#__PURE__*/_react["default"].createElement(AddressBook, null, /*#__PURE__*/_react["default"].createElement("div", {
    className: "col-12"
  }, /*#__PURE__*/_react["default"].createElement(_UI.CheckoutTitle, {
    className: "mb-4 mt-4 pt-2",
    data: "Choose address"
  })), /*#__PURE__*/_react["default"].createElement(_Common.FormError, {
    errors: errors,
    errorRef: errorRef,
    fieldName: "any"
  }), /*#__PURE__*/_react["default"].createElement("div", {
    className: "col-12"
  }, savedAddressList == null ? void 0 : savedAddressList.map(function (address) {
    if (!address.isSelectable) return null;
    return /*#__PURE__*/_react["default"].createElement(_Common.AddressPreview, {
      key: address._id,
      onSelect: address.select,
      isSelected: address.isSelected,
      data: address,
      isSelectable: true
    });
  })), /*#__PURE__*/_react["default"].createElement("div", {
    className: "col-12"
  }, /*#__PURE__*/_react["default"].createElement(_Common.Button, {
    bordered: true,
    small: true,
    onClick: function onClick() {
      return updateIsAddingNew(true);
    }
  }, /*#__PURE__*/_react["default"].createElement("span", {
    className: "d-flex align-items-center"
  }, /*#__PURE__*/_react["default"].createElement(_Common.IconPlus, {
    width: "1.5rem",
    className: "mr-2"
  }), /*#__PURE__*/_react["default"].createElement("span", null, addNewAddress)))), /*#__PURE__*/_react["default"].createElement("div", {
    className: "col-12"
  }, /*#__PURE__*/_react["default"].createElement(InvoiceContainer, null, /*#__PURE__*/_react["default"].createElement(_Invoice.CheckoutInvoice, null)))));
};

exports.CheckoutShipping = CheckoutShipping;

var InvoiceContainer = _styledComponents["default"].div.attrs({
  className: 'mt-4'
})(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var SpinnerContainer = _styledComponents["default"].div.attrs({
  className: 'd-flex align-items-center justify-content-center'
})(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  min-height: 50rem;\n  position: relative;\n"])));

var FadeAnimation = (0, _styledComponents.keyframes)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])(["\n0% {\n  opacity: 0;\n  transform: translateX(2rem);\n}\n100% {\n  opacity: 1;\n  transform: translateX(0);\n\n}\n"])));

var AddressBook = _styledComponents["default"].span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  opacity: 0;\n  animation: 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0s 1 normal forwards running\n    ", ";\n"])), FadeAnimation);

var InputsWrapper = _styledComponents["default"].div.attrs({
  className: 'row g-4'
})(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  & input {\n    border-radius: 0;\n  }\n"])));
//# sourceMappingURL=index.js.map