@wulperstudio/cms/node/layouts/LayoutFlex/components/CardPurchase.js

Wulper Studio Library Components CMS

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.CardPurchase = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireDefault(require("react"));
var _react2 = require("@iconify/react");
var _material = require("@mui/material");
var _CardFlexible = require("../../../organisms/CardFlexible");
var _NumberOutput = require("../../../components/NumberOutput");
var _TextForLinesOutput = require("../../../components/TextForLinesOutput");
var _IconButtonComponent = require("../../../components/IconButtonComponent");
var _jsxRuntime = require("react/jsx-runtime");
var _Icon, _Icon2;
var CardPurchase = exports.CardPurchase = function CardPurchase(_ref) {
  var label = _ref.label,
    price = _ref.price,
    desc = _ref.desc;
  var theme = (0, _material.useTheme)();
  var _React$useState = _react["default"].useState(0),
    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
    number = _React$useState2[0],
    setNumber = _React$useState2[1];
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardFlexible.CardFlexible, {
    shadow: "none",
    border: "1px solid  #ECECFB",
    style: {
      height: 'min-content'
    },
    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Grid, {
      container: true,
      direction: "row",
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
        item: true,
        xs: 6,
        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Grid, {
          container: true,
          direction: "column",
          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
            item: true,
            xs: true,
            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextForLinesOutput.TextForLinesOutput, {
              clines: 1,
              text: label,
              fontSize: "16px",
              fontWeight: "600"
            })
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
            item: true,
            xs: true,
            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Grid, {
              container: true,
              columnGap: "10px",
              alignItems: "center",
              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
                item: true,
                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextForLinesOutput.TextForLinesOutput, {
                  clines: 1,
                  text: price,
                  color: theme.palette.primary.main,
                  fontSize: "18px",
                  fontWeight: "700"
                })
              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
                item: true,
                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextForLinesOutput.TextForLinesOutput, {
                  fontSize: "14px",
                  fontWeight: "400",
                  clines: 1,
                  text: desc,
                  color: theme.palette.text.secondary,
                  sx: {
                    textDecoration: 'line-through'
                  }
                })
              })]
            })
          })]
        })
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
        item: true,
        xs: 6,
        sx: {
          display: 'flex',
          alignItems: 'center'
        },
        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Grid, {
          container: true,
          columnGap: "15px",
          alignItems: "center",
          justifyContent: "flex-end",
          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
            item: true,
            sx: {
              backgroundColor: '#fff'
            },
            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButtonComponent.IconButtonComponent, {
              iconProps: {
                size: 'small',
                onClick: function onClick() {
                  return setNumber(number - 1);
                },
                sx: {
                  boxShadow: 'rgb(0 0 0 / 9%) 0px 3px 12px'
                }
              },
              children: _Icon || (_Icon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
                icon: "gg:math-minus"
              }))
            })
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
            item: true,
            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_NumberOutput.NumberOutput, {
              number: number
            })
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
            item: true,
            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButtonComponent.IconButtonComponent, {
              iconProps: {
                size: 'small',
                onClick: function onClick() {
                  return setNumber(number + 1);
                },
                sx: {
                  boxShadow: 'rgb(0 0 0 / 9%) 0px 3px 12px'
                }
              },
              children: _Icon2 || (_Icon2 = /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
                icon: "carbon:add"
              }))
            })
          })]
        })
      })]
    })
  });
};