1+ import React from 'react'
2+ import Button from '@material-ui/core/Button' ;
3+ import { Formik , Field , Form , ErrorMessage } from 'formik' ;
4+ import FormControl from "@material-ui/core/FormControl" ;
5+ import Grid from "@material-ui/core/Grid" ;
6+ import TextField from '@material-ui/core/TextField' ;
7+ import Tooltip from '@material-ui/core/Tooltip' ;
8+ import * as Yup from 'yup' ;
9+ import jwt from "jsonwebtoken" ;
10+ import Cookies from 'js-cookie' ;
11+
12+ const CustomCouponForm = ( { handleAddCustomCoupon} ) => {
13+
14+ const initialValues = {
15+ percentage : '' ,
16+ expiration : ''
17+ }
18+
19+ const admin_discount_limit = ( ) => {
20+ const dukaanToken = Cookies . get ( "dukaan-token" ) ;
21+ const userInfo = jwt . decode ( dukaanToken ) ;
22+ return userInfo . data . admin_discount_limit
23+ }
24+
25+ const validationSchema = Yup . object ( ) . shape ( {
26+ percentage : Yup . number ( )
27+ . min ( 1 , 'must be greater than 0' )
28+ . max ( admin_discount_limit ( ) ? admin_discount_limit ( ) : 100 )
29+ . required ( 'Discount is required' ) ,
30+ expiration : Yup . number ( )
31+ . min ( 1 ) . max ( 48 )
32+ . required ( 'Coupon Expiration is required' )
33+ } )
34+
35+ const handleAddCoupon = ( formFields ) => {
36+ handleAddCustomCoupon ( formFields )
37+ }
38+
39+ return (
40+
41+ < div >
42+ { ! admin_discount_limit ( )
43+
44+ ? < div className = { "d-flex align-items-center justify-content-center red" } >
45+ < b > *You dont have permission to add custom discount. *</ b >
46+ </ div >
47+
48+ : < Formik initialValues = { initialValues } validationSchema = { validationSchema }
49+ onSubmit = { handleAddCoupon } >
50+
51+ { ( { values, errors, touched, handleChange, handleBlur, handleSubmit, isSubmitting
52+ , setFieldValue, setFieldTouched} ) => (
53+
54+
55+
56+
57+ < form onSubmit = { handleSubmit } >
58+ < div className = { "col-md-12" } >
59+
60+
61+
62+ < FormControl variant = "outlined" size = { "medium" }
63+ className = { "col-md-8 mb-4 mt-3" }
64+ >
65+ < Tooltip title = { < span className = { "mui-tooltip" } > Discount as percentage</ span > }
66+ placement = "bottom-end" >
67+
68+ < TextField name = "percentage"
69+ type = "number"
70+ label = "Discount"
71+ variant = "outlined"
72+ placeholder = "Enter Discount in percentage"
73+ value = { values . percentage }
74+ onBlur = { handleBlur }
75+ onChange = { handleChange }
76+ />
77+
78+ </ Tooltip >
79+
80+ { errors . percentage && touched . percentage && < span className = "red mt-2 ml-auto" >
81+ { errors . percentage }
82+ </ span > }
83+
84+ </ FormControl >
85+
86+ < FormControl variant = "outlined" size = { "medium" }
87+ className = { "col-md-8 mb-4" } >
88+ < Tooltip title = { < span className = { "mui-tooltip" } > Expiration in hours</ span > }
89+ placement = "bottom-end" >
90+
91+ < TextField name = "expiration"
92+ type = "number"
93+ label = "Expiration"
94+ variant = "outlined"
95+ placeholder = "Enter Expiration in hours"
96+ value = { values . expiration }
97+ onBlur = { handleBlur }
98+ onChange = { handleChange }
99+ inputProps = { {
100+ maxLength : 4
101+ } }
102+ />
103+ </ Tooltip >
104+
105+ { errors . expiration && touched . expiration && < span className = "red mt-2 ml-auto" >
106+ { errors . expiration }
107+ </ span > }
108+
109+ </ FormControl >
110+
111+
112+ < Grid container justify = "center" >
113+ < Button
114+ id = "submitBtn" type = "submit"
115+ style = { { background : "linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)" , color : 'white' , border : 0 ,
116+ borderRadius : 3 , boxShadow : '0 3px 5px 2px rgba(255, 105, 135, .3)' } } >
117+ Save
118+ </ Button >
119+ </ Grid >
120+
121+ </ div >
122+ </ form >
123+ ) }
124+
125+ </ Formik >
126+
127+ }
128+ </ div >
129+
130+
131+
132+ ) ;
133+ }
134+
135+ export default CustomCouponForm
0 commit comments