import React 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 { ADD_BUSINESS } from "../../graphql/business"; import CircularProgress from "../../../utils/ui/CircularProgress"; import WordEditor from "../../../dev-workspace/example-form/FormUiComponents/WordEditor/WordEditor"; interface ProductInput { productName: string; barcode: string; barcode_type: string; sku: string; description: string; images: string; sales_channels: string; brand_id: String; producttype_id: String; producttype: string; producttags: string; supplier_id: String; supplier_code: string; pricing: string; inventory: string; track_inventory: boolean; same_price_outlets: boolean; has_variants: boolean; variant_attributes: string; variant_list: string; business_id: String; } const INITIAL_FORM_STATE: ProductInput = { productName: "", barcode: "", barcode_type: "", sku: "", description: "", images: "", sales_channels: "", brand_id: "", producttype_id: "", producttype: "", producttags: "", supplier_id: "", supplier_code: "", pricing: "", inventory: "", track_inventory: true, same_price_outlets: true, has_variants: false, variant_attributes: "", variant_list: "", business_id: "", }; const FORM_VALIDATION = Yup.object({ productName: Yup.string().required("Product Name Required"), barcode: Yup.string().required("Barcode Required"), barcode_type: Yup.string().required("barcode_type Required"), sku: Yup.string().required("sku Required"), description: Yup.string().nullable(), images: Yup.string().nullable(), sales_channels: Yup.string().nullable(), brand_id: Yup.string().nullable(), producttype_id: Yup.string().nullable(), producttype: Yup.string().nullable(), producttags: Yup.string().nullable(), supplier_id: Yup.string().nullable(), supplier_code: Yup.string().nullable(), pricing: Yup.string().nullable(), inventory: Yup.string().nullable(), track_inventory: Yup.string().nullable(), same_price_outlets: Yup.string().nullable(), has_variants: Yup.string().nullable(), variant_attributes: Yup.string().nullable(), variant_list: Yup.string().nullable(), //business_id: Yup.string().nullable(), }); function Products() { // const [addBusiness] = useMutation(ADD_BUSINESS); return ( <div style={{ marginLeft: "20px", marginRight: "20px" }}> {/* Form Part */} <Container style={{ paddingLeft: "0px", paddingRight: "0px" }}> <Formik initialValues={{ ...INITIAL_FORM_STATE }} validationSchema={FORM_VALIDATION} onSubmit={(values) => { console.log(values); }} > {({ submitForm, isSubmitting, touched, errors }) => ( <MuiPickersUtilsProvider utils={DateFnsUtils}> <Form> {/* Genaral Setting part Label Header Section */} <Grid container> <Grid item xs={12}> <Typography> <h3>Add Products</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}> Main Details </Box> </Typography> <Typography variant="body2"> <Box fontWeight="fontWeightRegular" m={0}> Main details of the product </Box> </Typography> </Grid> <Grid item xs={8}> <Grid> <Box margin={1}> <Field variant="outlined" size="small" component={TextField} name="productName" type="name" label="Product Name" helperText="Your product name " fullWidth /> </Box> </Grid> <Grid container> <Grid item xs={6}> <Box margin={1}> <InputLabel shrink={true} htmlFor="tags"> Brand </InputLabel> <FormControl variant="outlined" fullWidth size="small" > <Field component={Select} type="text" name="brand_id" 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" > Product Type </InputLabel> <FormControl variant="outlined" fullWidth size="small" > <Field component={Select} type="text" name="producttype" multiple={false} inputProps={{ name: "tags", id: "tags" }} fullWidth labelId="currency-id" // value='' // displayEmpty > <MenuItem value="" disabled> Animal </MenuItem> <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 container> <Grid item xs={6}> <Box margin={1}> <InputLabel shrink={true} htmlFor="tags"> Barcode Type </InputLabel> <FormControl variant="outlined" fullWidth size="small" > <Field component={Select} type="text" name="barcode_type" 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 shrink={true} htmlFor="tags"> Product Tag </InputLabel> <FormControl variant="outlined" fullWidth size="small" > <Field component={Select} type="text" name="producttags" 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> <Box margin={1}> <Field variant="outlined" size="small" component={TextField} name="barcode" type="name" label="Barcode" fullWidth /> </Box> </Grid> <Grid> <Box margin={1}> <WordEditor /> </Box> </Grid> <Grid> <Box margin={1}> <Typography variant="subtitle2"> <Box fontWeight="fontWeightBold" m={0}> Product Images </Box> </Typography> <Field component={UploadButtons} /> </Box> </Grid> </Grid> </Grid> <Divider /> {/* Sales Chennal form part */} <Grid container spacing={2}> <Grid item xs={4}> <Typography variant="subtitle2" color="primary"> <Box fontWeight="fontWeightBold" m={0}> Sales Channels </Box> </Typography> <Typography variant="body2"> <Box fontWeight="fontWeightRegular" m={0}> Select the sales channel you want to sell <br /> the products of integrated the sale Channels <br /> will appear on the list </Box> </Typography> </Grid> <Grid item xs={8}> <Grid container> <Typography variant="subtitle2"> <Box fontWeight="fontWeightBold" m={1}> Sales Channels </Box> </Typography> </Grid> <Grid container> <Grid item xs={6}> <Typography variant="subtitle2"> <Box fontWeight="fontWeightBold" m={1}> Outlet Name </Box> </Typography> </Grid> <Grid item xs={6}> <Typography variant="subtitle2"> <Box fontWeight="fontWeightBold" m={1}> Sell on Pos </Box> </Typography> <Field component={Switch} type="checkbox" name="printRecipt-switch" color="primary" /> </Grid> </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 Products;