Create PaymentMethod component

2022-02-19 22:21:55 +04:00
parent 180dd4b680
commit d986bf35ee
1 changed files with 117 additions and 0 deletions
@@ -0,0 +1,117 @@
+import {useEffect, useMemo} from 'react'
+import PropTypes from 'prop-types'
+import clsx from 'clsx'
+import {styled} from '@mui/system'
+import {useSwitch} from '@mui/base/SwitchUnstyled'
+
+const green = {
+  700: '#4CAF50',
+}
+
+const grey = {
+  400: '#BFC7CF',
+  800: '#2F3A45',
+}
+
+const SwitchRoot = styled('span')`
+  display: inline-block;
+  position: relative;
+  width: 84px;
+  height: 36px;
+  padding: 8px;
+`
+
+const SwitchInput = styled('input')`
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  z-index: 1;
+  margin: 0;
+  cursor: pointer;
+`
+
+const SwitchThumb = styled('span')`
+  position: absolute;
+  display: block;
+  background-color: ${green[700]};
+  width: 40px;
+  height: 40px;
+  border-radius: 8px;
+  top: -1px;
+  left: 4px;
+  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
+
+  &::before {
+    display: block;
+    content: '';
+    width: 100%;
+    height: 100%;
+    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="30" width="30" viewBox="0 0 24 24"><path fill="${encodeURIComponent(
+    '#fff',
+  )}" d="M20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 14H4v-6h16v6zm0-10H4V6h16v2z"/></svg>')
+      center center no-repeat;
+  }
+
+  &.focusVisible {
+    background-color: #79b;
+  }
+
+  &.checked {
+    transform: translateX(44px);
+
+    &::before {
+      background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="25" width="25" viewBox="0 0 24 24"><path fill="${encodeURIComponent(
+    '#fff',
+  )}" d="M7.076 21.337H2.47a.641.641 0 0 1-.633-.74L4.944.901C5.026.382 5.474 0 5.998 0h7.46c2.57 0 4.578.543 5.69 1.81 1.01 1.15 1.304 2.42 1.012 4.287-.023.143-.047.288-.077.437-.983 5.05-4.349 6.797-8.647 6.797h-2.19c-.524 0-.968.382-1.05.9l-1.12 7.106zm14.146-14.42a3.35 3.35 0 0 0-.607-.541c-.013.076-.026.175-.041.254-.93 4.778-4.005 7.201-9.138 7.201h-2.19a.563.563 0 0 0-.556.479l-1.187 7.527h-.506l-.24 1.516a.56.56 0 0 0 .554.647h3.882c.46 0 .85-.334.922-.788.06-.26.76-4.852.816-5.09a.932.932 0 0 1 .923-.788h.58c3.76 0 6.705-1.528 7.565-5.946.36-1.847.174-3.388-.777-4.471z"/></svg>');
+    }
+  }
+`
+
+const SwitchTrack = styled('span')(
+  ({theme}) => `
+  background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[400]};
+  border-radius: 4px;
+  width: 100%;
+  height: 100%;
+  display: block;
+`,
+)
+
+function MUISwitch(props) {
+  const {setIsPaypal} = props
+  const {getInputProps, checked, disabled, focusVisible} = useSwitch(props)
+
+  const stateClasses = useMemo(() => ({
+    checked,
+    disabled,
+    focusVisible,
+  }), [checked, disabled, focusVisible])
+
+  useEffect(() => {
+    setIsPaypal(stateClasses.checked)
+  }, [setIsPaypal, stateClasses])
+
+  return (
+    <SwitchRoot className={clsx(stateClasses)}>
+      <SwitchTrack>
+        <SwitchThumb className={clsx(stateClasses)} />
+      </SwitchTrack>
+      <SwitchInput {...getInputProps()} aria-label='Demo switch' />
+    </SwitchRoot>
+  )
+}
+
+MUISwitch.propTypes = {
+  setIsPaypal: PropTypes.func.isRequired
+}
+
+export default function PaymentMethod({setIsPaypal}) {
+  return <MUISwitch defaultChecked setIsPaypal={setIsPaypal} />
+}
+
+PaymentMethod.propTypes = {
+  setIsPaypal: PropTypes.func.isRequired
+}