import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/taggedTemplateLiteralLoose";

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24;

import React from 'react';
import { IconSpeedy, IconEcont, Price, Typography, IconPhone, IconDistrictLogoNew } from '../Common';
import { useRouter } from 'next/router';
import styled from 'styled-components';
import { useOrder, useUpdateStrings, myOrdersApi, useOrderPrice, useOrderShippingPrice, useShippingAddress, useBillingAddress, usePrice } from '@sentecacommerce-theme/lib';
import { ProductPreview } from './Components';
var iconsMap = {
  Speedy: /*#__PURE__*/React.createElement(IconSpeedy, {
    style: {
      width: '6.8rem',
      height: '3.4rem'
    }
  }),
  Econt: /*#__PURE__*/React.createElement(IconEcont, {
    style: {
      width: '8.8rem',
      height: '5rem',
      marginTop: '-1rem',
      marginBottom: '-1.6rem',
      marginRight: '-1.6rem'
    }
  }),
  Evropat: /*#__PURE__*/React.createElement("img", {
    src: "https://production.hippoland-contents.com/platform/media/evroput-logo-13845.jpg",
    alt: "\u0415\u0432\u0440\u043E\u043F\u044A\u0442",
    style: {
      width: '6.8rem',
      height: 'auto'
    }
  })
};
export var Order = (_ref) => {
  var _router$query, _router$query2, _data$shippings;

  var {
    phone: contactPhone,
    labels,
    helpMenu,
    thankYouMessageDescription,
    thankYouMessageTitle
  } = _ref;
  var router = useRouter();
  useUpdateStrings('order', labels);
  var orderId = (_router$query = router.query) == null ? void 0 : _router$query.orderId;
  var isSuccess = Boolean((_router$query2 = router.query) == null ? void 0 : _router$query2.success);
  var {
    data
  } = myOrdersApi.useGetById(orderId);
  var {
    orderRefNumber,
    status,
    lineItems,
    createdAt,
    discountCodes
  } = useOrder({
    data
  });
  var price = useOrderPrice(data);
  var shippingPriceRaw = useOrderShippingPrice(data == null ? void 0 : (_data$shippings = data.shippings) == null ? void 0 : _data$shippings[0]);
  var {
    price: shippingPrice
  } = usePrice({
    price: shippingPriceRaw.discountedPrice || shippingPriceRaw.originalPrice
  });
  var {
    price: subtotal
  } = usePrice({
    price: price.discountedSubtotal || price.totalWithoutDiscount
  });
  var {
    price: totalPrice
  } = usePrice({
    price: price.taxedPrice
  });
  var {
    price: discountCodesSum
  } = usePrice({
    price: price.discountCodesSum
  });
  var {
    customer,
    city,
    street,
    quarter,
    office,
    streetNumber,
    building,
    postalCode,
    courier,
    entrance,
    additionalAddressInfo,
    floor,
    apartment
  } = useShippingAddress(data == null ? void 0 : data.shippingAddress);
  var billingAddress = useBillingAddress(data == null ? void 0 : data.billingAddress);
  var courierIcon = iconsMap[courier];

  var getAddress = () => {
    if (!(street != null && street.toLowerCase())) return;

    if (entrance && (streetNumber || building)) {
      return "" + entrance + (building || streetNumber) + " " + (street == null ? void 0 : street.toLowerCase()) + " Street";
    }

    if (streetNumber || building) {
      return (building || streetNumber) + " " + (street == null ? void 0 : street.toLowerCase()) + " Street";
    }

    return street == null ? void 0 : street.toLowerCase();
  };

  var hasAddress = Boolean(office ? office : getAddress());

  var getQuarterInfo = () => {
    if (hasAddress) return '';
    var str = '';
    if (building || streetNumber) str += "\u2116" + (building || streetNumber);
    if (entrance) str += " " + entrance;
    return str;
  };

  var dateObject = new Date(createdAt || 0);
  var month = dateObject == null ? void 0 : dateObject.toLocaleString('default', {
    month: 'short'
  });
  return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Title, {
    isHint: true,
    className: "mb-4"
  }, labels.ordered, " ", dateObject == null ? void 0 : dateObject.getDate(), " ", month, ' ', dateObject == null ? void 0 : dateObject.getFullYear(), " \u2014 ", labels.order, " #", orderRefNumber), isSuccess && /*#__PURE__*/React.createElement(ThankyouContainer, null, /*#__PURE__*/React.createElement(Logo, null, /*#__PURE__*/React.createElement(IconDistrictLogoNew, null)), /*#__PURE__*/React.createElement(ThankyouTitle, null, labels.thanks, " ", customer == null ? void 0 : customer.firstName, " ", customer == null ? void 0 : customer.lastName, "!", ' ', thankYouMessageTitle), /*#__PURE__*/React.createElement(ThankyouDescription, null, thankYouMessageDescription)), /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(ListContainer, null, status === 'Cancelled' && /*#__PURE__*/React.createElement(Notice, null, /*#__PURE__*/React.createElement("span", null, labels.canceledOrder)), status === 'Complete' && /*#__PURE__*/React.createElement(Notice, null, /*#__PURE__*/React.createElement("span", null, labels.completedOrder)), /*#__PURE__*/React.createElement(InfoBox, null, /*#__PURE__*/React.createElement("div", {
    className: "pt-4"
  }), /*#__PURE__*/React.createElement(List, null, lineItems == null ? void 0 : lineItems.map(item => /*#__PURE__*/React.createElement(ProductPreview, {
    item: item,
    key: "Product__" + item._id
  }))))), /*#__PURE__*/React.createElement(OrderInfo, null, /*#__PURE__*/React.createElement(InfoBox, null, /*#__PURE__*/React.createElement(Title, {
    className: "pb-1"
  }, labels.address), /*#__PURE__*/React.createElement(BoxContent, null, /*#__PURE__*/React.createElement(Info, null, customer == null ? void 0 : customer.firstName, " ", customer == null ? void 0 : customer.lastName), /*#__PURE__*/React.createElement(Info, null, customer == null ? void 0 : customer.email), /*#__PURE__*/React.createElement(Info, null, customer == null ? void 0 : customer.phone), hasAddress && /*#__PURE__*/React.createElement(Info, null, /*#__PURE__*/React.createElement(Cap, null, office && /*#__PURE__*/React.createElement(React.Fragment, null, labels.officeAddress, " \xA0", /*#__PURE__*/React.createElement("span", {
    style: {
      textTransform: 'capitalize'
    }
  }, office == null ? void 0 : office.name.toLowerCase(), ' ', office && quarter && ', ')), Boolean(quarter) && /*#__PURE__*/React.createElement(Cap, null, quarter == null ? void 0 : quarter.name, " ", getQuarterInfo()))), street && /*#__PURE__*/React.createElement(Info, null, street, " ", streetNumber, building && ", " + building, floor && ", " + labels.floor + " " + floor, apartment && ", " + labels.apartment + " " + apartment), /*#__PURE__*/React.createElement(Info, null), /*#__PURE__*/React.createElement(Info, null, postalCode, " ", /*#__PURE__*/React.createElement(Cap, null, city == null ? void 0 : city.name)), Boolean(additionalAddressInfo) && /*#__PURE__*/React.createElement(Info, null, "* ", additionalAddressInfo), /*#__PURE__*/React.createElement(CourierIconContainer, null, courierIcon))), Boolean(billingAddress) && /*#__PURE__*/React.createElement(InfoBox, null, /*#__PURE__*/React.createElement(MaxWidth, null, /*#__PURE__*/React.createElement(Title, {
    className: "mb-4"
  }, labels.invoice), /*#__PURE__*/React.createElement(SummaryBox, {
    isHint: true
  }, /*#__PURE__*/React.createElement(MaxWidth, null, /*#__PURE__*/React.createElement(CompanyLabel, null, labels.companyPerson)), /*#__PURE__*/React.createElement(Info, null, billingAddress == null ? void 0 : billingAddress.companyPerson)), /*#__PURE__*/React.createElement(SummaryBox, {
    isHint: true
  }, /*#__PURE__*/React.createElement(MaxWidth, null, /*#__PURE__*/React.createElement(CompanyLabel, null, labels.companyName)), /*#__PURE__*/React.createElement(Info, null, billingAddress == null ? void 0 : billingAddress.companyName)), /*#__PURE__*/React.createElement(SummaryBox, {
    isHint: true
  }, /*#__PURE__*/React.createElement(MaxWidth, null, /*#__PURE__*/React.createElement(CompanyLabel, null, labels.companyCity)), /*#__PURE__*/React.createElement(Info, null, billingAddress == null ? void 0 : billingAddress.companyCity)), /*#__PURE__*/React.createElement(SummaryBox, {
    isHint: true
  }, /*#__PURE__*/React.createElement(MaxWidth, null, /*#__PURE__*/React.createElement(CompanyLabel, null, labels.companyZip)), /*#__PURE__*/React.createElement(Info, null, billingAddress == null ? void 0 : billingAddress.companyZip)), /*#__PURE__*/React.createElement(SummaryBox, {
    isHint: true
  }, /*#__PURE__*/React.createElement(MaxWidth, null, /*#__PURE__*/React.createElement(CompanyLabel, null, labels.companyStreet)), /*#__PURE__*/React.createElement(Info, null, billingAddress == null ? void 0 : billingAddress.companyStreet)), /*#__PURE__*/React.createElement(SummaryBox, {
    isHint: true
  }, /*#__PURE__*/React.createElement(MaxWidth, null, /*#__PURE__*/React.createElement(CompanyLabel, null, labels.companyStreetNumber)), /*#__PURE__*/React.createElement(Info, null, billingAddress == null ? void 0 : billingAddress.companyStreetNumber)), /*#__PURE__*/React.createElement(SummaryBox, {
    isHint: true
  }, /*#__PURE__*/React.createElement(MaxWidth, null, /*#__PURE__*/React.createElement(CompanyLabel, null, labels.companyId)), /*#__PURE__*/React.createElement(Info, null, billingAddress == null ? void 0 : billingAddress.companyId)), /*#__PURE__*/React.createElement(SummaryBox, {
    isHint: true
  }, /*#__PURE__*/React.createElement(MaxWidth, null, /*#__PURE__*/React.createElement(CompanyLabel, null, labels.vatId)), /*#__PURE__*/React.createElement(Info, null, "#", billingAddress == null ? void 0 : billingAddress.vatId)))), /*#__PURE__*/React.createElement(InfoBox, null, /*#__PURE__*/React.createElement(MaxWidth, null, /*#__PURE__*/React.createElement(Title, {
    className: "mb-4"
  }, labels.orderSummary), /*#__PURE__*/React.createElement(SummaryContainer, null, /*#__PURE__*/React.createElement(SummaryBox, {
    isHint: true
  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(SummaryLabel, null, labels.subtotal)), /*#__PURE__*/React.createElement("div", null, Boolean(subtotal) && /*#__PURE__*/React.createElement(Price, {
    currency: subtotal.currency,
    size: "tiny",
    price: subtotal.value
  }))), Boolean(discountCodes == null ? void 0 : discountCodes.length) && /*#__PURE__*/React.createElement(MultipleVouchers, null, /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'table-cell',
      paddingTop: '1rem'
    }
  }, labels.usedVouchers, /*#__PURE__*/React.createElement("div", {
    className: "d-flex flex-wrap "
  }, discountCodes == null ? void 0 : discountCodes.map((code, i) => {
    return /*#__PURE__*/React.createElement(Voucher, {
      key: "Voucher-" + code + "-" + i
    }, code, (discountCodes == null ? void 0 : discountCodes.length) - 1 !== i && /*#__PURE__*/React.createElement(React.Fragment, null, ", \xA0"));
  }))), /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'table-cell',
      paddingTop: '1rem'
    }
  }, /*#__PURE__*/React.createElement("span", {
    className: "d-flex justify-content-end ",
    style: {
      minWidth: '7rem'
    }
  }, "-", discountCodesSum.displayValue))), /*#__PURE__*/React.createElement(SummaryBox, {
    isHint: true
  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(SummaryLabel, null, labels.delivery)), /*#__PURE__*/React.createElement("div", null, Boolean(shippingPrice.value) && /*#__PURE__*/React.createElement(Price, {
    currency: shippingPrice.currency,
    size: "tiny",
    price: shippingPrice.value
  }))), /*#__PURE__*/React.createElement(SummaryBox, {
    isTotal: true
  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(SummaryLabel, null, labels.total)), /*#__PURE__*/React.createElement("div", null, totalPrice && /*#__PURE__*/React.createElement(Price, {
    currency: totalPrice.currency,
    size: "tiny",
    price: totalPrice.value
  })))))), /*#__PURE__*/React.createElement(InfoBox, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Title, {
    big: true,
    className: "pb-3"
  }, helpMenu.title), helpMenu.items.map(item => /*#__PURE__*/React.createElement(Info, {
    key: "Item__" + item.url + "-" + item.label,
    className: "mb-1"
  }, /*#__PURE__*/React.createElement("a", {
    href: item.url
  }, item.label))))), /*#__PURE__*/React.createElement(InfoBox, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Title, {
    className: "pb-3"
  }, /*#__PURE__*/React.createElement(ContactUs, {
    href: "tel:" + contactPhone
  }, /*#__PURE__*/React.createElement(IconPhone, null), labels.contactUs)))))));
};
var OrderInfo = styled.div.attrs({
  className: 'col-12 col-md-6 col-lg-4'
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  & a:hover {\n    opacity: 0.6;\n  }\n"])));
var Logo = styled.div.attrs({
  className: 'mb-3'
})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose([""])));
var ThankyouContainer = styled.div.attrs({
  className: 'd-flex flex-column align-items-center justify-content-center mx-auto'
})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  text-align: center;\n\n  @media (min-width: ", ") {\n    max-width: 44rem;\n  }\n"])), (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.breakpoints.md.min;
});
var ThankyouTitle = styled.div.attrs({
  className: ''
})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  font-weight: bold;\n  text-transform: uppercase;\n  letter-spacing: -0.05rem;\n"])));
var ThankyouDescription = styled(Typography).attrs({
  variant: 6,
  color: 'hint',
  className: 'mt-2 mb-4'
})(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose([""])));
var ListContainer = styled.div.attrs({
  className: 'col-12 col-md-6 col-lg-8'
})(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose([""])));
var List = styled(Typography).attrs({
  className: 'row gy-4 gx-0',
  as: 'ul',
  variant: 6
})(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n  line-height: 1.3;\n  list-style: none;\n  width: 100%;\n"])));
var Flex = styled.div.attrs({
  className: 'row gx-5 pt-4 align-items-start'
})(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose([""])));
var Container = styled(Typography).attrs({
  as: 'div',
  variant: 4,
  className: 'container pt-5'
})(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n  max-width: min(133.4rem, 100%);\n  overflow: hidden;\n"])));
var ContactUs = styled.a.attrs({
  className: 'd-flex align-items-center'
})(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n  & svg {\n    width: 1rem;\n    margin-right: 1rem;\n  }\n"])));
var Notice = styled.p.attrs({
  className: 'mb-4 py-3 px-4'
})(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  background: ", ";\n"])), (_ref3) => {
  var {
    theme
  } = _ref3;
  return theme.palette.hint;
}, (_ref4) => {
  var {
    theme
  } = _ref4;
  return theme.palette.disabled;
});
var Cap = styled.span(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n  // text-transform: capitalize;\n"])));
var InfoBox = styled.div.attrs({
  className: 'mb-3 pt-4 d-flex justify-content-between'
})(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n  border-top: 0.1rem solid ", ";\n\n  position: relative;\n"])), (_ref5) => {
  var {
    theme
  } = _ref5;
  return theme.palette.light;
});
var BoxContent = styled(Typography).attrs({
  as: 'div',
  variant: 6,
  color: 'hint'
})(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n  text-align: right;\n"])));
var Info = styled.p(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n  line-height: 1.5;\n"])));
var CourierIconContainer = styled.div(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n  top: 0.5rem;\n  right: 1rem;\n"])));
var SummaryContainer = styled.div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n  display: table;\n  width: 100%;\n"])));
var SummaryBox = styled.div(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n  display: table-row;\n\n  ", ";\n\n  & p,\n  span {\n    color: ", " !important;\n  }\n\n  & > div {\n    display: table-cell;\n    padding-top: 1rem;\n\n    & > div {\n      justify-content: flex-end;\n    }\n  }\n\n  & span {\n    font-size: 1.6rem;\n  }\n\n  &:first-of-type {\n    & > div {\n      padding-top: 0;\n    }\n  }\n"])), props => props.isTotal && "\n    font-size: 1.7rem;\n    font-weight: 700;\n  ", props => props.isHint ? props.theme.palette.hint : props.theme.palette.primary);
var SummaryLabel = styled(Typography).attrs({
  as: 'p',
  variant: 5,
  className: 'd-block mr-3'
})(_templateObject19 || (_templateObject19 = _taggedTemplateLiteralLoose(["\n  min-width: 9rem;\n"])));
var CompanyLabel = styled(Typography).attrs({
  as: 'p',
  variant: 5,
  className: 'd-block mr-5'
})(_templateObject20 || (_templateObject20 = _taggedTemplateLiteralLoose(["\n  min-width: 9rem;\n"])));
var Title = styled(Typography).attrs(props => ({
  as: props.big ? 'h3' : 'h4',
  variant: props.big ? 4 : 5,
  color: props.isHint ? 'hint' : 'primary'
}))(_templateObject21 || (_templateObject21 = _taggedTemplateLiteralLoose(["\n  line-height: 1;\n"])));
var MultipleVouchers = styled.div.attrs({
  className: 'pt-3'
})(_templateObject22 || (_templateObject22 = _taggedTemplateLiteralLoose(["\n  display: table-row;\n\n  color: ", ";\n  font-size: 1.6rem;\n"])), (_ref6) => {
  var {
    theme
  } = _ref6;
  return theme.palette.hint;
});
var Voucher = styled.span.attrs({
  className: 'd-flex mt-1'
})(_templateObject23 || (_templateObject23 = _taggedTemplateLiteralLoose(["\n  font-size: 1.5rem;\n"])));
var MaxWidth = styled.div(_templateObject24 || (_templateObject24 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n"])));
//# sourceMappingURL=order.component.js.map