bSecureCheckout /
bsecure-payments-js
| Conditions | 19 |
| Total Lines | 57 |
| Code Lines | 54 |
| Lines | 0 |
| Ratio | 0 % |
| Changes | 0 | ||
Small methods make your code easier to understand, in particular if combined with a good name. Besides, if your method is small, finding a good name is usually much easier.
For example, if you find yourself adding comments to a method's body, this is usually a good sign to extract the commented part to a new method, and use the comment as a starting point when coming up with a good name for this new method.
Commonly applied refactorings include:
If many parameters/temporary variables are present:
Complex classes like index.js ➔ Form often do a lot of different things. To break such a class down, we need to identify a cohesive component within that class. A common approach to find such a component is to look for fields/methods that share the same prefixes, or suffixes.
Once you have determined the fields that belong together, you can apply the Extract Class refactoring. If the component makes sense as a sub-class, Extract Subclass is also a candidate, and is often faster.
| 1 | import { |
||
| 32 | |||
| 33 | export default function Form() { |
||
| 34 | |||
| 35 | const [formData, updateFormData] = React.useState(initialFormData); |
||
| 36 | const handleChange = (e) => { |
||
| 37 | updateFormData({ |
||
| 38 | ...formData, |
||
| 39 | [e.target.name]: e.target.value.trim() |
||
| 40 | }); |
||
| 41 | }; |
||
| 42 | |||
| 43 | const handleSubmit = (e) => { |
||
| 44 | e.preventDefault() |
||
| 45 | HISTORY.push("/extend", {formData}) |
||
| 46 | }; |
||
| 47 | |||
| 48 | return ( |
||
| 49 | <div className="Form"> |
||
| 50 | <AppBar> |
||
| 51 | <h3>bSecure Payment Plugin</h3> |
||
| 52 | </AppBar> |
||
| 53 | <form onSubmit={handleSubmit} style={{ marginTop: 80, marginBottom:20 }}> |
||
| 54 | <div className="heading">Customer Detail</div> |
||
| 55 | <div className="customer-info"> |
||
| 56 | <TextField onChange={handleChange} required defaultValue={formData?.name} label="Name" name="name" variant="outlined"/> |
||
| 57 | <TextField onChange={handleChange} required defaultValue={formData?.country_code} label="Country Code" name="country_code" variant="outlined"/> |
||
| 58 | <TextField onChange={handleChange} required defaultValue={formData?.phone} label="Phone" name="phone" variant="outlined"/> |
||
| 59 | <TextField onChange={handleChange} required defaultValue={formData?.email} label="Email" name="email" variant="outlined"/> |
||
| 60 | <TextField onChange={handleChange} required defaultValue={formData?.country} label="Country" name="country" variant="outlined"/> |
||
| 61 | <TextField onChange={handleChange} required defaultValue={formData?.country} label="Province" name="province" variant="outlined"/> |
||
| 62 | <TextField onChange={handleChange} required defaultValue={formData?.city} label="City" name="city" variant="outlined"/> |
||
| 63 | <TextField onChange={handleChange} required defaultValue={formData?.area} label="Area" name="area" variant="outlined"/> |
||
| 64 | <TextField onChange={handleChange} required defaultValue={formData?.address} label="Address" name="address" variant="outlined"/> |
||
| 65 | </div> |
||
| 66 | <br/> |
||
| 67 | <div className="heading">Order Detail</div> |
||
| 68 | <div className="order-info"> |
||
| 69 | <TextField onChange={handleChange} required defaultValue={formData?.order_id} label="Ordre id" name="order_id" variant="outlined"/> |
||
| 70 | <TextField onChange={handleChange} required defaultValue={formData?.currency} label="Currency" name="currency" variant="outlined"/> |
||
| 71 | <TextField onChange={handleChange} required defaultValue={formData?.sub_total} label="Subtotal amount" name="sub_total" variant="outlined"/> |
||
| 72 | <TextField onChange={handleChange} required defaultValue={formData?.discount} label="Discount" name="discount" variant="outlined"/> |
||
| 73 | <TextField onChange={handleChange} required defaultValue={formData?.total} label="Total amount" name="total" variant="outlined"/> |
||
| 74 | </div> |
||
| 75 | <br /> |
||
| 76 | <div className="heading">Merchant Detail</div> |
||
| 77 | <div className="order-info"> |
||
| 78 | <TextField onChange={handleChange} required defaultValue={formData?.merchant_id} label="Merchant ID" name="merchant_id" variant="outlined"/> |
||
| 79 | <TextField onChange={handleChange} required defaultValue={formData?.store_id} label="Store ID" name="store_id" variant="outlined"/> |
||
| 80 | <TextField onChange={handleChange} required defaultValue={formData?.client_id} label="Client ID" name="client_id" variant="outlined"/> |
||
| 81 | <TextField onChange={handleChange} required defaultValue={formData?.client_env} label="Client Environment" name="client_env" variant="outlined" tupe="number" /> |
||
| 82 | </div> |
||
| 83 | |||
| 84 | <Button type="submit" variant="contained" color="primary"> |
||
| 85 | Pay via bsecure |
||
| 86 | </Button> |
||
| 87 | </form> |
||
| 88 | </div> |
||
| 89 | ); |
||
| 91 |
