import React,{useEffect, useState} from "react"; import * as Yup from "yup"; import { Container, Grid, Typography, Box, Divider, FormControl, InputLabel, MenuItem, FormControlLabel, Button, } from "@material-ui/core"; import { TextField, Select, Switch, Checkbox } from "formik-material-ui"; import { Form, Formik, Field } from "formik"; import UploadButtons from "../../dev-workspace/example-form/FormUiComponents/Upload-btn"; import { DateTimePicker } from "formik-material-ui-pickers"; import { MuiPickersUtilsProvider } from "@material-ui/pickers"; import DateFnsUtils from "@date-io/date-fns"; import CircularProgress from "../../utils/ui/CircularProgress"; import { currency } from "../../utils/currency"; import { fetchBusinesses, updateBusiness } from "../../store/business-action"; import { useDispatch, useSelector } from "react-redux"; interface businessInput { businessName: String; url: String; currency: String; timeZone: String; locale: String; product_sku: String; loyaltyPoints: String; giftCards: String; storeCredits: String; printRecipt: boolean; emailCustomer: boolean; logo: String; } const INITIAL_FORM_STATE = { businessName: "", url: "", currency: "", timeZone: "", locale: "", product_sku: "", loyaltyPoints: "", giftCards: "", storeCredits: "", printRecipt: "", emailCustomer: "", logo: "", }; const FORM_VALIDATION = Yup.object({ businessName: Yup.string().required("Business Name Required"), }); function General() { const businesses = useSelector((state: any) => state.business.businesses); const dispatch = useDispatch(); useEffect(() => { console.log("lB"); dispatch(fetchBusinesses()); }, [dispatch]); const [currencyValue, setCurrencyValue] = useState("currency") console.log(currencyValue); return ( <div style={{ marginLeft: "20px", marginRight: "20px" }}> {/* Form Part */} <Container style={{ paddingLeft: "0px", paddingRight: "0px" }}> <Formik initialValues={{ ...INITIAL_FORM_STATE }} validationSchema={FORM_VALIDATION} onSubmit={async (values, { setSubmitting }) => { try{ const data = { businessName: values.businessName, url: values.url, currency: values.currency, giftCards: values.giftCards, printReccipt: values.printRecipt, emailCustomer: values.emailCustomer, // logo: values.logo, } updateBusiness(data) } catch(e){ console.log({ e }); } // try { // setSubmitting(false); // alert(JSON.stringify(values, null, 2)); // alert("Business Created"); // const { data } = await addBusiness({ // variables: { // businessName: values.businessName, // url: values.url, // currency: values.currency, // timeZone: values.timeZone, // locale: values.locale, // product_sku: values.product_sku, // loyaltyPoints: values.loyaltyPoints, // giftCards: values.giftCards, // storeCredits: values.storeCredits, // printReccipt: values.printRecipt, // emailCustomer: values.emailCustomer, // logo: values.logo, // }, // }); // console.log({ data }); // } catch (e) { // console.log({ e }); // } }} > {({ submitForm, isSubmitting, touched, errors }) => ( <MuiPickersUtilsProvider utils={DateFnsUtils}> <Form> {/* Genaral Setting part Label Header Section */} <Grid container> <Grid item xs={12}> <Typography> <h3>Genaral Setting</h3> </Typography> <Divider /> </Grid> </Grid> {/* Business Setting form part */} <Grid container spacing={2} style={{ marginBottom: "20px" }}> <Grid item xs={4}> <Typography variant="subtitle2" color="primary"> <Box fontWeight="fontWeightBold" m={0}> Business Setting </Box> </Typography> <Typography variant="body2"> <Box fontWeight="fontWeightRegular" m={0}> Setting about your business </Box> </Typography> </Grid> <Grid item xs={8}> <Grid> <Box margin={1}> <Field variant="outlined" size="small" component={TextField} name="businessName" type="name" label="Bussiness Name" helperText="Your business name " fullWidth /> </Box> </Grid> <Grid> <Box margin={1}> <Field variant="outlined" size="small" component={TextField} name="url" type="name" label="Business Url" helperText="Url of your systerm we will notify team members when you change it. " fullWidth /> </Box> </Grid> <Grid> <Box margin={1}> <Typography variant="subtitle2"> <Box fontWeight="fontWeightBold" m={0}> Business Logo </Box> </Typography> <Field component={UploadButtons} /> </Box> </Grid> </Grid> </Grid> <Divider /> {/* Locale Setting form part */} <Grid container spacing={2}> <Grid item xs={4}> <Typography variant="subtitle2" color="primary"> <Box fontWeight="fontWeightBold" m={0}> Locale Setting </Box> </Typography> <Typography variant="body2"> <Box fontWeight="fontWeightRegular" m={0}> Default locale setting of the system. <br /> User can update their own language and time zone. </Box> </Typography> </Grid> <Grid item xs={8}> <Grid container> {/* <Grid item xs={6}> <Box margin={1}> <InputLabel shrink={true} htmlFor="tags"> Language of the system </InputLabel> <FormControl variant="outlined" fullWidth size="small" > <Field component={Select} type="text" name="currency" multiple={false} inputProps={{ name: "tags", id: "tags" }} fullWidth > <MenuItem value="dogs">Dogs</MenuItem> <MenuItem value="cats">Cats</MenuItem> <MenuItem value="rats">Rats</MenuItem> <MenuItem value="snakes">Snakes</MenuItem> </Field> </FormControl> </Box> </Grid> */} <Grid item xs={6}> <Box margin={1}> <InputLabel id="currency-id" shrink={true} htmlFor="tags" > Currency of the system </InputLabel> <FormControl variant="outlined" fullWidth size="small" > <Field component={Select} type="text" name="timeZone" multiple={false} inputProps={{ name: "tags", id: "tags" }} fullWidth labelId="currency-id" value={currencyValue} onChange={(e:any)=> setCurrencyValue(e.target.value)} // displayEmpty > <MenuItem value="" disabled> Currency </MenuItem> { currency.map((x) => ( <MenuItem value={x.code}>{x.name}</MenuItem> )) } </Field> </FormControl> </Box> </Grid> </Grid> {/* <Grid> <Box margin={1}> <InputLabel shrink={true} htmlFor="tags"> Time Zone </InputLabel> <FormControl variant="outlined" fullWidth size="small"> <Field component={Select} type="text" name="locale" multiple={false} inputProps={{ name: "tags", id: "tags" }} fullWidth > <MenuItem value="dogs">Dogs</MenuItem> <MenuItem value="cats">Cats</MenuItem> <MenuItem value="rats">Rats</MenuItem> <MenuItem value="snakes">Snakes</MenuItem> </Field> </FormControl> </Box> </Grid> */} </Grid> </Grid> <Divider /> {/* Sales Setting form part */} <Grid container spacing={2}> <Grid item xs={4}> <Typography variant="subtitle2" color="primary"> <Box fontWeight="fontWeightBold" m={0}> Sales Setting </Box> </Typography> <Typography variant="body2"> <Box fontWeight="fontWeightRegular" m={0}> Setting related to sales module. </Box> </Typography> </Grid> <Grid item xs={8}> <Grid> <Box margin={2}> <Typography variant="subtitle2"> <Box fontWeight="fontWeightBold"> Print Recipt After Sale </Box> </Typography> <Field component={Switch} type="checkbox" name="printRecipt-switch" color="primary" /> <Typography variant="body2"> <Box fontWeight="fontWeightRegular" m={0}> Default Setting to print recipt after completing a sale. </Box> </Typography> </Box> <Box margin={2}> <Typography variant="subtitle2"> <Box fontWeight="fontWeightBold"> Email Customer After Sale </Box> </Typography> <Field component={Switch} type="checkbox" name="emmailCustomer-switch" color="primary" /> <Typography variant="body2"> <Box fontWeight="fontWeightRegular" m={0}> Default setting to email customer after completing a sale </Box> </Typography> </Box> </Grid> </Grid> </Grid> <Divider /> {/* Product Settings Setting form part */} {/* <Grid container spacing={2}> <Grid item xs={4}> <Typography variant="subtitle2" color="primary"> <Box fontWeight="fontWeightBold" m={0}> Product Setting </Box> </Typography> <Typography variant="body2"> <Box fontWeight="fontWeightRegular" m={0}> Setting related to products module. </Box> </Typography> </Grid> <Grid item xs={8}> <Grid> <Box margin={1}> <Typography variant="subtitle2"> <Box fontWeight="fontWeightBold"> Product SKU Autogeneration Template </Box> </Typography> </Box> <Box margin={1}> <Field variant="outlined" size="small" component={TextField} name="Productsku" type="name" label="Product SKU" helperText="Your product SKU will be autogenerated according to template above. Change the values between brackets and check the result below to create your own combination. ('{ProductType(3-u)}/{productName(3-u)}-{OutletName}')" fullWidth /> </Box> </Grid> </Grid> </Grid> */} <Divider /> {/* Loyalty Points Setting form part */} {/* <Grid container spacing={2}> <Grid item xs={4}> <Typography variant="subtitle2" color="primary"> <Box fontWeight="fontWeightBold" m={0}> Loyalty Points </Box> </Typography> <Typography variant="body2"> <Box fontWeight="fontWeightRegular" m={0}> Loyalty point is the creditcustomer earns after a sale. <br /> Customers can use them just like cash to shop in your store. <br /> you add customer's loyalty points to a sale in <br /> 'Make a Sale' page. </Box> </Typography> </Grid> <Grid item xs={8}> <Grid> <Box margin={2}> <Typography variant="subtitle2"> <Box fontWeight="fontWeightBold"> Enable Loyalty Points </Box> </Typography> <Field component={Switch} type="checkbox" name="loyaltyPoints-switch" color="primary" /> <Typography variant="body2"> <Box fontWeight="fontWeightRegular" m={0}> When enabled, your customers will earn loyalty points for shopping with you. </Box> </Typography> </Box> </Grid> <Grid> <Box margin={2}> <Typography variant="subtitle2"> <Box fontWeight="fontWeightBold"> Loyalty Points Earning </Box> </Typography> <Grid container> <Grid item sm={2}> <Typography variant="body2"> <Box fontWeight="fontWeightRegular" m={1}> Spending </Box> </Typography> </Grid> <Grid item sm={2}> <Field variant="outlined" size="small" component={TextField} name="Productsku" type="name" /> </Grid> <Grid item sm={2}> <Typography variant="body2"> <Box fontWeight="fontWeightRegular" m={1}> Earn 1 point </Box> </Typography> </Grid> </Grid> </Box> </Grid> </Grid> </Grid> */} {/* <Divider /> */} {/* Store Credit Setting form part */} {/* <Grid container spacing={2}> <Grid item xs={4}> <Typography variant="subtitle2" color="primary"> <Box fontWeight="fontWeightBold" m={0}> Store Credit </Box> </Typography> <Typography variant="body2"> <Box fontWeight="fontWeightRegular" m={0}> Store credit is the credit you can add to specify customer's <br /> account. customers can use them just like cash to shop in your <br /> store. you can add store credits to customers in Customer's page </Box> </Typography> </Grid> <Grid item xs={8}> <Grid> <Box margin={2}> <Typography variant="subtitle2"> <Box fontWeight="fontWeightBold"> Enable Store Credits </Box> </Typography> <Field component={Switch} type="checkbox" name="loyaltyPoints-switch" color="primary" /> <Typography variant="body2"> <Box fontWeight="fontWeightRegular" m={0}> When enabled,adminstrators by default can add store credits to customers. </Box> </Typography> </Box> </Grid> </Grid> </Grid> */} {/* <Divider /> */} {/* Gift Cards Setting form part */} <Grid container spacing={2}> <Grid item xs={4}> <Typography variant="subtitle2" color="primary"> <Box fontWeight="fontWeightBold" m={0}> Gift Cards </Box> </Typography> <Typography variant="body2"> <Box fontWeight="fontWeightRegular" m={0}> Gift card a prepaid money. card you can issue and sellto your <br /> Customers. customers can use them just like cash to shop in <br /> your store. you can issue and add gift card to a sale in <br /> 'gift cards' and 'Make a Sale' page. </Box> </Typography> </Grid> <Grid item xs={8}> <Grid> <Box margin={2}> <Typography variant="subtitle2"> <Box fontWeight="fontWeightBold"> Enable Gift Cards </Box> </Typography> <Field component={Switch} type="checkbox" name="loyaltyPoints-switch" color="primary" /> <Typography variant="body2"> <Box fontWeight="fontWeightRegular" m={0}> When enabled, you can issue gift cards and add gift cards to sale. </Box> </Typography> </Box> </Grid> <Grid> <Box margin={2}> <FormControlLabel control={ <Field component={Checkbox} name="checkedB" color="primary" /> } label="Allow expiry of gift cards" /> <Typography variant="body2"> <Box fontWeight="fontWeightRegular" m={0}> When enabled,you can assign expiry dates to gift cards. </Box> </Typography> <Box style={{ marginTop: "20px" }}> <Field component={DateTimePicker} name="dateTime" label="Set Expire Date" /> </Box> </Box> </Grid> </Grid> </Grid> <Divider /> {isSubmitting && <CircularProgress />} <Grid sm={12} style={{ textAlign: "center" }}> <Box margin={1}> <Button variant="contained" color="primary" disabled={isSubmitting} onClick={submitForm} > Save Changes </Button> </Box> </Grid> </Form> </MuiPickersUtilsProvider> )} </Formik> </Container> </div> ); } export default General;