github.com/grafviktor/keep-my-secret@v0.9.10-0.20230908165355-19f35cce90e5/website/src/components/Home/PaymentCard/index.jsx (about)

     1  import get from 'lodash/get'
     2  import noop from 'lodash/noop'
     3  import isUndefined from 'lodash/isUndefined'
     4  import {useContext, useState} from 'react'
     5  import ApplicationContext from '../../../context'
     6  
     7  import './style.css'
     8  
     9  export default () => {
    10    const {
    11      secret,
    12      navigateTo,
    13      createSecret,
    14      updateSecret,
    15      setAlertMessage,
    16    } = useContext(ApplicationContext)
    17  
    18    const type = 'card'
    19    const secretID = get(secret, 'id')
    20    const [note, setNote] = useState(get(secret, 'note', ''))
    21    const [title, setTitle] = useState(get(secret, 'title', ''))
    22    const [securityCode, setSecurityCode] = useState(get(secret, 'security_code', ''))
    23    const [cardNumber, setCardNumber] = useState(get(secret, 'card_number', ''))
    24    const [expiration, setExpiration] = useState(get(secret, 'expiration', ''))
    25    const [cardholderName, setCardholderName] = useState(get(secret, 'cardholder_name', ''))
    26  
    27    const setValue = (event) => {
    28      const field = get(event, 'target.id', '')
    29      const value = get(event, 'target.value', '')
    30  
    31      const changeValueHandler = {
    32        note       : setNote,
    33        title      : setTitle,
    34        cardnumber : setCardNumber,
    35        expiration : setExpiration,
    36        cvv        : setSecurityCode,
    37        cardholder : setCardholderName,
    38      }[field] || noop
    39  
    40      changeValueHandler(value)
    41    }
    42  
    43    const onSubmitButtonClick = async () => {
    44      // if secret has 'id' fieldm then we're 'updating', otherwise - 'creating'
    45      const apiHandler = isUndefined(secretID) ? createSecret : updateSecret
    46  
    47      try {
    48        await apiHandler({
    49          id              : secretID,
    50          type,
    51          title,
    52          cardholder_name : cardholderName,
    53          card_number     : cardNumber,
    54          expiration,
    55          security_code   : securityCode,
    56          note,
    57        }, secretID)
    58  
    59        navigateTo('home')
    60      } catch (error) {
    61        console.warn(error.message)
    62        setAlertMessage(`Error: ${error.message}`)
    63      }
    64    }
    65  
    66    return (
    67      <div className="kms-secret-edit">
    68        <form className="kms-secret-edit__form">
    69          <div className="row gy-3">
    70            <div className="col-md-12">
    71              <label htmlFor="title" className="form-label">Title</label>
    72              <input type="text" className="form-control" id="title" value={title} onChange={setValue} />
    73            </div>
    74  
    75            <div className="col-md-6">
    76              <label htmlFor="cardholder" className="form-label">Name on card</label>
    77              <input type="text" className="form-control" id="cardholder" value={cardholderName} onChange={setValue} />
    78              <small className="text-body-secondary">Full name as displayed on card</small>
    79            </div>
    80  
    81            <div className="col-md-6">
    82              <label htmlFor="cardnumber" className="form-label">Credit card number</label>
    83              <input type="text" className="form-control" id="cardnumber" value={cardNumber} onChange={setValue} />
    84            </div>
    85  
    86            <div className="col-md-3">
    87              <label htmlFor="expiration" className="form-label">Expiration</label>
    88              <input type="date" className="form-control" id="expiration" value={expiration} onChange={setValue} />
    89            </div>
    90  
    91            <div className="col-md-3">
    92              <label htmlFor="cvv" className="form-label">CVV</label>
    93              <input type="text" className="form-control" id="cvv" value={securityCode} onChange={setValue} />
    94            </div>
    95  
    96            <div className="col-md-6">
    97              <label htmlFor="note" className="form-label">Add a few notes here</label>
    98              <textarea className="form-control" id="note" value={note} onChange={setValue} />
    99            </div>
   100          </div>
   101        </form>
   102        <div className="kms-secret-edit__controls">
   103          <button type="button" className="btn btn-primary kms-button-add" onClick={onSubmitButtonClick}>
   104            Save
   105          </button>
   106          <button type="button" className="btn btn-danger kms-button-add" onClick={() => navigateTo('home')}>
   107            Cancel
   108          </button>
   109        </div>
   110      </div>
   111    )
   112  }