Merge pull request #104 from coding-blocks/coupon_cashback_tooltip

tooltip added for cashback field in coupon form

Author: himankbhalla

forms/BulkCoupon.js

@@ -7,6 +7,7 @@ import FieldWithElement from '../components/FieldWithElement';
 import * as controller from '../controllers/v2/couponsV2'
 import Swal from 'sweetalert2';
 import config from "../config";
+import Tooltip from '@material-ui/core/Tooltip';
 
 const bulkCouponSchema = Yup.object().shape({
     authority_doc: Yup.string().min(3)
@@ -407,16 +408,20 @@ class BulkCouponForm extends React.Component {
                                                 name={"cashback(%)"} nameCols={3} elementCols={9} 
                                                 elementClassName={"pl-4"} errorColor={'tomato'} 
                                                 errors={touched.cashback && errors.cashback}>
-                                                <input
-                                                    type="number"
-                                                    className={"input-text"}
-                                                    id={values.percentage === 100 ? "disabled-cashback" : "cashback"}
-                                                    placeholder="Enter cashback"
-                                                    name="cashback"
-                                                    onBlur={handleBlur}
-                                                    onChange={handleChange}
-                                                    value={values.cashback}
-                                                />
+
+                                                <Tooltip title={<span className={"mui-tooltip"}>% of product price to be added as cashback</span>} 
+                                                placement="bottom-end">
+                                                    <input
+                                                        type="number"
+                                                        className={"input-text"}
+                                                        id={values.percentage === 100 ? "disabled-cashback" : "cashback"}
+                                                        placeholder="Enter cashback"
+                                                        name="cashback"
+                                                        onBlur={handleBlur}
+                                                        onChange={handleChange}
+                                                        value={values.cashback}
+                                                    />
+                                                </Tooltip>
                                             </FieldWithElement>
 
                                         </div>

forms/Coupon.js

@@ -11,6 +11,7 @@ import SelectedUsers from "../components/SelectedUsers";
 import config from "../config";
 import CouponProductsNotice from '../components/CouponProductsNotice'
 import withReactContent from "sweetalert2-react-content";
+import Tooltip from '@material-ui/core/Tooltip';
 
 const ReactSwal = withReactContent(Swal);
 
@@ -581,17 +582,21 @@ class CouponForm extends React.Component {
                                             name={"cashback(%)"} nameCols={3} elementCols={9} 
                                             elementClassName={"pl-4"} errorColor={'tomato'} 
                                             errors={touched.cashback && errors.cashback}>
-                                            <input
-                                                type="number"
-                                                className={"input-text"}
-                                                id={values.percentage === 100 ? "disabled-cashback" : "cashback"}
-                                                placeholder="Enter cashback"
-                                                name="cashback"
-                                                onBlur={handleBlur}
-                                                onChange={handleChange}
-                                                value={values.cashback}
-                                                disabled={values.percentage === 100}
-                                            />
+
+                                            <Tooltip title={<span className={"mui-tooltip"}>% of product price to be added as cashback</span>} 
+                                            placement="bottom-end">
+                                                <input
+                                                    type="number"
+                                                    className={"input-text"}
+                                                    id={values.percentage === 100 ? "disabled-cashback" : "cashback"}
+                                                    placeholder="Enter cashback"
+                                                    name="cashback"
+                                                    onBlur={handleBlur}
+                                                    onChange={handleChange}
+                                                    value={values.cashback}
+                                                    disabled={values.percentage === 100}
+                                                />
+                                            </Tooltip>
                                         </FieldWithElement>
 
                                     </div>

styles/pages/admin/coupons2.scss

@@ -30,3 +30,6 @@
   padding-top: 5px;
 }
 
+.mui-tooltip {
+	font-size: 10px;
+}