"use strict";

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

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

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

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

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

var _checkoutVoucher = require("./checkoutVoucher.context");

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

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

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

var _router = require("next/router");

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

var findStyleById = function findStyleById(cardStyles, id) {
  return cardStyles.find(function (style) {
    return style.id === id;
  });
};

var CheckoutVoucher = function CheckoutVoucher(props) {
  var defaultSelectedStyleId = props.defaultSelectedStyleId,
      cardStyles = props.cardStyles,
      priceCurrency = props.priceCurrency,
      defaultSelectedCardId = props.defaultSelectedCardId,
      labels = props.labels,
      hasOptionalMessage = props.hasOptionalMessage,
      hasRecipientDetails = props.hasRecipientDetails,
      cards = props.cards;
  (0, _lib.useUpdateStrings)('checkoutVoucher', labels);
  var router = (0, _router.useRouter)();
  var queryStyle = router.query.style;

  var getDefaultStyle = function getDefaultStyle() {
    return findStyleById(cardStyles, defaultSelectedStyleId) || cardStyles[0];
  };

  var getQueryStyle = function getQueryStyle() {
    if (!queryStyle) return getDefaultStyle();
    return findStyleById(cardStyles, queryStyle) || getDefaultStyle();
  };

  return /*#__PURE__*/_react["default"].createElement(_checkoutVoucher.CheckoutVoucherContextProvider, {
    defaultSelectedCardId: defaultSelectedCardId,
    defaultSelectedStyle: queryStyle ? getQueryStyle() : getDefaultStyle(),
    cardStyles: cardStyles,
    cards: cards
  }, /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(Flex, null, /*#__PURE__*/_react["default"].createElement(Left, null, /*#__PURE__*/_react["default"].createElement(_Components.CardPreview, null)), /*#__PURE__*/_react["default"].createElement(Right, null, /*#__PURE__*/_react["default"].createElement(Subtitle, null, labels == null ? void 0 : labels.subtitle), /*#__PURE__*/_react["default"].createElement(Title, null, labels == null ? void 0 : labels.title), /*#__PURE__*/_react["default"].createElement(Section, null, /*#__PURE__*/_react["default"].createElement(Label, null, labels.chooseStyle), /*#__PURE__*/_react["default"].createElement(_Components.ImageSelect, null)), /*#__PURE__*/_react["default"].createElement(Section, null, /*#__PURE__*/_react["default"].createElement(Label, null, labels.chooseAmount), /*#__PURE__*/_react["default"].createElement(_Components.CardSelect, {
    currency: priceCurrency
  })), hasRecipientDetails && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(Section, {
    withBorder: true
  }, /*#__PURE__*/_react["default"].createElement(Label, null, labels.recipientFormLabel), /*#__PURE__*/_react["default"].createElement(_Components.RecipientFields, null))), hasOptionalMessage && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(Section, {
    withBorder: true
  }, /*#__PURE__*/_react["default"].createElement(Label, null, labels.optionalMessageInput))), /*#__PURE__*/_react["default"].createElement(_Components.FormBottom, null), /*#__PURE__*/_react["default"].createElement(Section, null, /*#__PURE__*/_react["default"].createElement(Label, null, labels == null ? void 0 : labels.bottomText))))));
};

exports.CheckoutVoucher = CheckoutVoucher;

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

var Flex = _styledComponents["default"].div.attrs({
  className: 'row g-4 gx-5'
})(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var Left = _styledComponents["default"].div.attrs({
  className: 'col-12 col-md-6 col-lg-8'
})(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var Right = _styledComponents["default"].div.attrs({
  className: 'col-12 col-md-6 col-lg-4'
})(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var Label = _styledComponents["default"].p.attrs({
  className: 'mb-2'
})(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var Section = _styledComponents["default"].div.attrs(function (props) {
  return {
    className: props.withBorder ? 'mt-4 pt-3' : 'mt-4'
  };
})(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  border-top: ", ";\n"])), function (props) {
  return props.withBorder ? "0.1rem solid " + props.theme.palette.light : '0';
});

var Subtitle = (0, _styledComponents["default"])(_Common.Typography).attrs({
  as: 'h2',
  variant: 5
})(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2["default"])([""])));
var Title = (0, _styledComponents["default"])(_Common.Typography).attrs({
  as: 'h1',
  variant: 3
})(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2["default"])([""])));
//# sourceMappingURL=checkoutVoucher.component.js.map