bSecureCheckout /
bsecure-node
| Conditions | 26 |
| Total Lines | 110 |
| Code Lines | 95 |
| 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 React from "react"; |
||
| 30 | let bsecure |
||
| 31 | |||
| 32 | export default function Form() { |
||
| 33 | const { addToast } = useToasts(); |
||
| 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 | |||
| 44 | |||
| 45 | const getAccesToken = async () => { |
||
| 46 | let result = await bsecure.authorize(); |
||
| 47 | console.log(result) |
||
| 48 | const { access_token } = result; |
||
| 49 | if(HELPER.isEmpty(access_token)){ |
||
| 50 | addToast(result?.message, { appearance: 'error' }); |
||
| 51 | }else{ |
||
| 52 | processOrder() |
||
| 53 | } |
||
| 54 | }; |
||
| 55 | |||
| 56 | const handleSubmit = (e) => { |
||
| 57 | e.preventDefault() |
||
| 58 | bsecure = new bSecure({ |
||
| 59 | client_id: formData.client_id, |
||
| 60 | client_secret: formData.client_secret, |
||
| 61 | environment: formData.client_env, |
||
| 62 | }); |
||
| 63 | getAccesToken(); |
||
| 64 | }; |
||
| 65 | |||
| 66 | const processOrder = async() => { |
||
| 67 | const customer = { |
||
| 68 | "name": formData?.name, |
||
| 69 | "email": formData?.email, |
||
| 70 | "country_code": formData?.country_code, |
||
| 71 | "phone_number": formData?.phone_number, |
||
| 72 | }; |
||
| 73 | const products = [ |
||
| 74 | { |
||
| 75 | "id": "1", |
||
| 76 | "name": "product-name", |
||
| 77 | "sku": "product-sku", |
||
| 78 | "quantity": 1, |
||
| 79 | "price": formData?.sub_total, |
||
| 80 | "sale_price": formData?.sub_total, |
||
| 81 | "image": "product-image", |
||
| 82 | "description": "product-description", |
||
| 83 | "short_description": "product-short-description" |
||
| 84 | } |
||
| 85 | ]; |
||
| 86 | const charges = { |
||
| 87 | "sub_total" : formData?.sub_total, |
||
| 88 | "discount" : formData?.discount, |
||
| 89 | "total" : formData?.total, |
||
| 90 | } |
||
| 91 | const order = bsecure.Order; |
||
| 92 | order.setOrderId(formData?.order_id) |
||
| 93 | order.setCharges(charges); |
||
| 94 | order.setCustomer(customer); |
||
| 95 | order.setCartItems(products); |
||
| 96 | let result = await order.createOrder(); |
||
| 97 | const { checkout_url } = result.body; |
||
| 98 | if(!HELPER.isEmpty(checkout_url)){ |
||
| 99 | window.open(checkout_url, '_blank'); |
||
| 100 | }else{ |
||
| 101 | addToast(result?.message, { appearance: 'error' }); |
||
| 102 | } |
||
| 103 | return result; |
||
| 104 | } |
||
| 105 | |||
| 106 | return ( |
||
| 107 | <div className="Form"> |
||
| 108 | <AppBar> |
||
| 109 | <h3>bSecure</h3> |
||
| 110 | </AppBar> |
||
| 111 | <form style={{ marginTop: 80, marginBottom: 20 }}> |
||
| 112 | <div className="heading">Customer Detail</div> |
||
| 113 | <div className="customer-info"> |
||
| 114 | <TextField onChange={handleChange} required defaultValue={formData?.name} label="Name" name="name" variant="outlined" /> |
||
| 115 | <TextField onChange={handleChange} required defaultValue={formData?.country_code} label="Country Code" name="country_code" variant="outlined" /> |
||
| 116 | <TextField onChange={handleChange} required defaultValue={formData?.phone} label="Phone" name="phone" variant="outlined" /> |
||
| 117 | <TextField onChange={handleChange} required defaultValue={formData?.email} label="Email" name="email" variant="outlined" /> |
||
| 118 | </div> |
||
| 119 | <br /> |
||
| 120 | <div className="heading">Order Detail</div> |
||
| 121 | <div className="order-info"> |
||
| 122 | <TextField onChange={handleChange} required defaultValue={formData?.order_id} label="Ordre id" name="order_id" variant="outlined" /> |
||
| 123 | <TextField onChange={handleChange} required defaultValue={formData?.sub_total} label="Subtotal amount" name="sub_total" variant="outlined" /> |
||
| 124 | <TextField onChange={handleChange} required defaultValue={formData?.discount} label="Discount" name="discount" variant="outlined" /> |
||
| 125 | <TextField onChange={handleChange} required defaultValue={formData?.total} label="Total amount" name="total" variant="outlined" /> |
||
| 126 | </div> |
||
| 127 | <br /> |
||
| 128 | <div className="heading">Merchant Detail</div> |
||
| 129 | <div className="order-info"> |
||
| 130 | <TextField onChange={handleChange} required defaultValue={formData?.client_id} label="Client ID" name="client_id" variant="outlined" /> |
||
| 131 | <TextField onChange={handleChange} required defaultValue={formData?.client_secret} label="Client Secret" name="client_secret" variant="outlined" /> |
||
| 132 | <TextField onChange={handleChange} required defaultValue={formData?.client_env} label="Client Environment" name="client_env" variant="outlined" /> |
||
| 133 | </div> |
||
| 134 | |||
| 135 | <Button type="button" variant="contained" color="primary" onClick={handleSubmit}> |
||
| 136 | Pay via bsecure |
||
| 137 | </Button> |
||
| 138 | </form> |
||
| 139 | </div> |
||
| 140 | ); |
||
| 142 |
