@sberdevices/plasma-temple
Version:
SberDevices CanvasApp Templates.
99 lines • 4.79 kB
JavaScript
import React from 'react';
import styled, { css } from 'styled-components';
import { Body1, Body2, Button, Col, Footnote1, Headline3, Price, Row } from '@sberdevices/plasma-ui';
import { secondary } from '@sberdevices/plasma-tokens';
import { detectDevice, mediaQuery } from '@sberdevices/plasma-ui/utils';
import { Header } from '../../components/Header/Header';
import { useFocusOnMount } from '../../hooks/useFocusOnMount';
import { THROTTLE_WAIT, useThrottledCallback } from '../../hooks/useThrottledCallback';
import { isSberBoxLike } from '../../utils/deviceFamily';
import { ConfirmOrderCard } from './components/ConfirmOrderCard/ConfirmOrderCard';
import { LocationIcon } from './ConfirmOrderPage.assets/LocationIcon';
var StyledLocationCol = /*#__PURE__*/styled(Col).withConfig({
componentId: "plasma-temple__sc-158yv52-0"
})(["display:flex;flex-direction:column;justify-content:center;align-items:center;margin-left:auto;text-align:center;"]);
var StyledBackground = /*#__PURE__*/styled.div.withConfig({
componentId: "plasma-temple__sc-158yv52-1"
})(["position:absolute;top:0;bottom:0;right:0;left:0;height:100vh;", ""], function (_ref) {
var background = _ref.background;
return background && css(["z-index:-1;mask-image:linear-gradient(90.09deg,rgba(8,8,8,0) 42.41%,rgb(8,8,8) 99.93%);background:url(", ") no-repeat;background-size:cover;"], background);
});
var mapDeviceToAddressTitle = {
sberBox: Headline3,
sberPortal: Body2,
mobile: Body2
};
var AddressTitle = mapDeviceToAddressTitle[/*#__PURE__*/detectDevice()];
var StyledAddressTitle = /*#__PURE__*/styled(AddressTitle).withConfig({
componentId: "plasma-temple__sc-158yv52-2"
})(["margin:0.625rem 0;"]);
var mapDeviceToAddressContent = {
sberBox: Body1,
sberPortal: Footnote1,
mobile: Footnote1
};
var AddressContent = mapDeviceToAddressContent[/*#__PURE__*/detectDevice()];
var StyledAddressContent = /*#__PURE__*/styled(AddressContent).withConfig({
componentId: "plasma-temple__sc-158yv52-3"
})(["color:", ";"], secondary);
var StyledPhone = /*#__PURE__*/styled(AddressTitle).withConfig({
componentId: "plasma-temple__sc-158yv52-4"
})(["margin-top:1.25rem;"]);
var StyledButton = /*#__PURE__*/styled(Button).withConfig({
componentId: "plasma-temple__sc-158yv52-5"
})(["margin-top:1.5rem;", ""], /*#__PURE__*/mediaQuery('M', 2)( /*#__PURE__*/css(["margin-top:1.25rem;"])));
var defaultHeader = {
title: 'Оформление заказа'
};
export var ConfirmOrderPage = function ConfirmOrderPage(_ref2) {
var delivery = _ref2.delivery,
recipient = _ref2.recipient,
address = _ref2.address,
amount = _ref2.amount,
paymentDisabled = _ref2.paymentDisabled,
onPay = _ref2.onPay,
onChangeRecipient = _ref2.onChangeRecipient,
onChangeDelivery = _ref2.onChangeDelivery,
_ref2$header = _ref2.header,
header = _ref2$header === void 0 ? defaultHeader : _ref2$header,
background = _ref2.background;
var buttonRef = React.useRef(null);
useFocusOnMount(buttonRef, {
delay: THROTTLE_WAIT,
prevent: !isSberBoxLike()
});
var handlePay = useThrottledCallback(function () {
return onPay();
}, [onPay]);
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledBackground, {
background: background
}), /*#__PURE__*/React.createElement(Header, header), /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Col, {
sizeXL: 5.5,
sizeM: 3
}, /*#__PURE__*/React.createElement(ConfirmOrderCard, {
title: "\u0414\u043E\u0441\u0442\u0430\u0432\u043A\u0430",
content: delivery.details,
price: delivery.amount,
onClick: onChangeDelivery
}), /*#__PURE__*/React.createElement(ConfirmOrderCard, {
title: "\u0414\u0430\u043D\u043D\u044B\u0435 \u043F\u043E\u043B\u0443\u0447\u0430\u0442\u0435\u043B\u044F",
content: recipient.name,
caption: recipient.email,
onClick: onChangeRecipient
}), /*#__PURE__*/React.createElement(StyledButton, {
ref: buttonRef,
stretch: true,
view: "primary",
text: "\u041A \u043E\u043F\u043B\u0430\u0442\u0435",
"data-cy": "confirm-order-payment-button",
disabled: paymentDisabled,
contentRight: /*#__PURE__*/React.createElement(Price, null, amount),
onClick: handlePay
})), /*#__PURE__*/React.createElement(StyledLocationCol, {
sizeXL: 5.5,
sizeM: 3,
offsetXL: 1,
"data-cy": "confirm-order-location"
}, /*#__PURE__*/React.createElement(LocationIcon, null), /*#__PURE__*/React.createElement(StyledAddressTitle, null, address.title), /*#__PURE__*/React.createElement(StyledAddressContent, null, address.content), /*#__PURE__*/React.createElement(StyledPhone, null, recipient.phone))));
};
//# sourceMappingURL=ConfirmOrderPage.js.map