@mui-treasury/mockup/brands/dailyShopping/DailyCheckout.js

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

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

var _clsx = _interopRequireDefault(require("clsx"));

var _styles = require("@material-ui/core/styles");

var _Box = _interopRequireDefault(require("@material-ui/core/Box"));

var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));

var _Divider = _interopRequireDefault(require("@material-ui/core/Divider"));

var _Grid = _interopRequireDefault(require("@material-ui/core/Grid"));

var _Button = _interopRequireDefault(require("@material-ui/core/Button"));

var _CreditCard = _interopRequireDefault(require("@material-ui/icons/CreditCard"));

var _TextField = _interopRequireDefault(require("@material-ui/core/TextField"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

var useStyles = (0, _styles.makeStyles)(function () {
  return {
    root: {
      display: 'flex',
      flexDirection: 'column',
      background: 'linear-gradient(45deg, #191D29, #3c5981)',
      borderRadius: 12,
      height: '100%',
      overflow: 'auto',
      '& *': {
        color: '#fff'
      }
    },
    heading: {
      fontWeight: 900,
      fontSize: '2.25rem'
    },
    divider: {
      backgroundColor: '#fff',
      opacity: 0.12,
      margin: '24px 0'
    },
    label: {
      fontSize: 12,
      fontWeight: 'bold',
      marginBottom: 16,
      opacity: 0.87
    },
    button: {
      minHeight: 48,
      borderRadius: 40,
      borderColor: 'rgba(255, 255, 255, 0.12)',
      borderStyle: 'solid',
      borderWidth: 1,
      width: '100%',
      '&:hover': {
        backgroundColor: 'rgba(255, 255, 255, 0.12)'
      }
    },
    buttonActive: {
      borderColor: '#fff'
    },
    creditCardLabel: {
      fontSize: 12,
      textTransform: 'initial'
    },
    paypalLabel: {
      fontSize: 20,
      textTransform: 'initial',
      fontStyle: 'italic',
      fontFamily: '-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif',
      fontWeight: 'bold',
      lineHeight: 1
    },
    textField: {
      '& label': {
        opacity: 0.87,
        fontWeight: 'bold'
      },
      '&:hover': {
        '& $inputBase:before': {
          borderColor: 'rgba(255, 255, 255, 0.38)'
        }
      }
    },
    inputBase: {
      '&:before': {
        borderColor: 'rgba(255, 255, 255, 0.12)'
      }
    },
    input: {
      padding: '16px 0'
    },
    select: {
      '& label': {
        opacity: 0.4
      },
      '&:hover': {
        '& $inputBase:before': {
          borderColor: 'rgba(255, 255, 255, 0.38)'
        }
      }
    },
    checkoutBtn: {
      marginTop: 'auto',
      borderRadius: 40,
      width: '100%'
    }
  };
});

var DailyCheckout = function DailyCheckout() {
  var styles = useStyles();
  return /*#__PURE__*/_react["default"].createElement(_Box["default"], {
    className: styles.root,
    py: 3,
    px: 3.5
  }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
    className: styles.heading,
    variant: 'h1'
  }, "Payment Info."), /*#__PURE__*/_react["default"].createElement(_Divider["default"], {
    className: styles.divider
  }), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
    className: styles.label
  }, "Payment Method:"), /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
    container: true,
    spacing: 2
  }, /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
    xs: 6,
    item: true
  }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
    startIcon: /*#__PURE__*/_react["default"].createElement(_CreditCard["default"], null),
    classes: {
      root: (0, _clsx["default"])(styles.button, styles.buttonActive),
      label: styles.creditCardLabel
    }
  }, "Credit Card")), /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
    xs: 6,
    item: true
  }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
    classes: {
      root: styles.button,
      label: styles.paypalLabel
    }
  }, "PayPal"))), /*#__PURE__*/_react["default"].createElement(_Divider["default"], {
    className: styles.divider
  }), /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
    className: styles.textField,
    fullWidth: true,
    InputProps: {
      classes: {
        root: styles.inputBase,
        input: styles.input
      }
    },
    label: 'Name On Card:',
    value: 'Siriwat Knp'
  }), /*#__PURE__*/_react["default"].createElement(_Box["default"], {
    height: 24,
    css: {
      flex: 'none'
    }
  }), /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
    className: styles.textField,
    fullWidth: true,
    InputProps: {
      classes: {
        root: styles.inputBase,
        input: styles.input
      }
    },
    label: 'Card Number:',
    value: '••••  ••••  ••••  1829'
  }), /*#__PURE__*/_react["default"].createElement(_Box["default"], {
    height: 24,
    css: {
      flex: 'none'
    }
  }), /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
    container: true,
    spacing: 3
  }, /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
    item: true,
    xs: 8
  }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
    className: styles.label
  }, "Expiration Date:"), /*#__PURE__*/_react["default"].createElement(_Box["default"], {
    mt: '-23px'
  }, /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
    container: true,
    spacing: 2
  }, /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
    item: true,
    xs: 6
  }, /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
    select: true,
    className: styles.select,
    fullWidth: true,
    InputProps: {
      classes: {
        root: styles.inputBase
      }
    },
    label: 'MM'
  })), /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
    item: true,
    xs: 6
  }, /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
    select: true,
    className: styles.select,
    fullWidth: true,
    InputProps: {
      classes: {
        root: styles.inputBase
      }
    },
    label: 'YYYY'
  }))))), /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
    item: true,
    xs: 4
  }, /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
    className: styles.textField,
    fullWidth: true,
    InputLabelProps: {
      shrink: true
    },
    InputProps: {
      classes: {
        root: styles.inputBase,
        input: styles.input
      }
    },
    label: 'CCV:',
    placeholder: 'XXX'
  }))), /*#__PURE__*/_react["default"].createElement(_Box["default"], {
    height: 24,
    css: {
      flex: 'none'
    }
  }), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
    className: styles.checkoutBtn,
    color: 'primary',
    variant: 'contained'
  }, "Check Out."));
};

var _default = DailyCheckout;
exports["default"] = _default;