WIP/customers

client/src/containers/Customers/Customer.js

@@ -0,0 +1,20 @@
+import React, { useCallback } from 'react';
+import { useParams, useHistory } from 'react-router-dom';
+import { useQuery } from 'react-query';
+
+import DashboardInsider from 'components/Dashboard/DashboardInsider';
+import CustomerForm from 'containers/Customers/CustomerForm';
+
+import withDashboardActions from 'containers/Dashboard/withDashboardActions';
+
+import { compose } from 'utils';
+
+function Customer({}) {
+  return (
+    <DashboardInsider name={'customer-form'}>
+      <CustomerForm />
+    </DashboardInsider>
+  );
+}
+
+export default Customer;

client/src/containers/Customers/CustomerForm.js

@@ -0,0 +1,175 @@
+import React, { useState, useMemo, useCallback, useEffect } from 'react';
+import * as Yup from 'yup';
+import { useFormik } from 'formik';
+import {
+  FormGroup,
+  MenuItem,
+  Intent,
+  InputGroup,
+  Button,
+  Classes,
+  Checkbox,
+  RadioGroup,
+  Radio,
+} from '@blueprintjs/core';
+import { Row, Col } from 'react-grid-system';
+import { FormattedMessage as T, useIntl } from 'react-intl';
+import { queryCache, useQuery } from 'react-query';
+import { useHistory } from 'react-router-dom';
+import { pick } from 'lodash';
+import classNames from 'classnames';
+
+import AppToaster from 'components/AppToaster';
+import ErrorMessage from 'components/ErrorMessage';
+import Icon from 'components/Icon';
+import MoneyInputGroup from 'components/MoneyInputGroup';
+import Dragzone from 'components/Dragzone';
+
+import withDashboardActions from 'containers/Dashboard/withDashboardActions';
+import withCustomerDetail from './withCustomerDetail';
+import withCustomersActions from './withCustomersActions';
+import RadioCustomer from './RadioCustomer';
+
+import { compose, handleStringChange } from 'utils';
+import withCustomers from './withCustomers';
+
+function CustomerForm({
+  // #withDashboardActions
+  changePageTitle,
+
+  customers,
+  //#withCustomersActions
+  requestSubmitCustomer,
+  requestFetchCustomers,
+}) {
+  const { formatMessage } = useIntl();
+
+  const validationSchema = Yup.object().shape({
+    customer_type: Yup.string()
+      .required()
+      .trim()
+      .label(formatMessage({ id: 'customer_type_' })),
+    first_name: Yup.string().trim(),
+    last_name: Yup.string().trim(),
+    company_name: Yup.string().trim(),
+    display_name: Yup.string()
+      .trim()
+      .required()
+      .label(formatMessage({ id: 'display_name_' })),
+    email: Yup.string().email(),
+    work_phone: Yup.string(),
+  });
+
+  useEffect(() => {
+    changePageTitle(formatMessage({ id: 'new_customer' }));
+  }, [changePageTitle, formatMessage]);
+  //business
+  const initialValues = useMemo(
+    () => ({
+      customer_type: 'business',
+      first_name: '',
+      last_name: '',
+      company_name: '',
+      display_name: '',
+      // email: '',
+      work_phone: '',
+    }),
+    [],
+  );
+  const {
+    getFieldProps,
+    setFieldValue,
+    values,
+    touched,
+    errors,
+    handleSubmit,
+    isSubmitting,
+  } = useFormik({
+    enableReinitialize: true,
+    validationSchema: validationSchema,
+    initialValues: {
+      ...initialValues,
+    },
+
+    onSubmit: (values, { setSubmitting, resetForm, setErrors }) => {
+      requestSubmitCustomer(values)
+        .then((response) => {
+          AppToaster.show({
+            message: formatMessage({
+              id: 'the_customer_has_been_successfully_created',
+            }),
+            intent: Intent.SUCCESS,
+          });
+        })
+        .catch((errors) => {
+          setSubmitting(false);
+        });
+    },
+  });
+
+  const requiredSpan = useMemo(() => <span class="required">*</span>, []);
+  const handleCustomerTypeCahange = useCallback(
+    (value) => {
+      setFieldValue('customer_type', value);
+    },
+    [setFieldValue],
+  );
+
+  console.log(customers, 'ER');
+
+  const fetch = useQuery('customers-table', (key) => requestFetchCustomers());
+
+  return (
+    <div className={'customer-form'}>
+      <form onSubmit={handleSubmit}>
+        <div className={'customer-form__primary-section'}>
+          <RadioCustomer
+            selectedValue={values.customer_type}
+            onChange={handleCustomerTypeCahange}
+          />
+          <FormGroup
+            label={<T id={'display_name'} />}
+            className={'form-group--name'}
+            intent={
+              errors.display_name && touched.display_name && Intent.DANGER
+            }
+            inline={true}
+            helperText={
+              <ErrorMessage {...{ errors, touched }} name={'display_name'} />
+            }
+          >
+            <InputGroup
+              intent={
+                errors.display_name && touched.display_name && Intent.DANGER
+              }
+              {...getFieldProps('display_name')}
+            />
+          </FormGroup>
+        </div>
+
+        <div class="form__floating-footer">
+          <Button intent={Intent.PRIMARY} disabled={isSubmitting} type="submit">
+            <T id={'save'} />
+          </Button>
+
+          <Button className={'ml1'} disabled={isSubmitting}>
+            <T id={'save_as_draft'} />
+          </Button>
+
+          <Button className={'ml1'}>
+            <T id={'close'} />
+          </Button>
+        </div>
+      </form>
+    </div>
+  );
+}
+
+export default compose(
+  withCustomerDetail,
+  withCustomers(({ customers }) => ({
+    customers,
+  })),
+  withDashboardActions,
+  withCustomersActions,
+)(CustomerForm);

client/src/containers/Customers/RadioCustomer.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { handleStringChange } from 'utils';
+import { useIntl } from 'react-intl';
+import { RadioGroup, Radio } from '@blueprintjs/core';
+
+export default function RadioCustomer(props) {
+  const { onChange, ...rest } = props;
+  const { formatMessage } = useIntl();
+  return (
+    <RadioGroup
+      inline={true}
+      label={formatMessage({ id: 'customer_type' })}
+      onChange={handleStringChange((value) => {
+        onChange && onChange(value);
+      })}
+      {...rest}
+    >
+      <Radio label={formatMessage({ id: 'business' })} value="business" />
+      <Radio label={formatMessage({ id: 'individual' })} value="individual" />
+    </RadioGroup>
+  );
+}

client/src/containers/Customers/withCustomerDetail.js

@@ -0,0 +1,8 @@
+import { connect } from 'react-redux';
+import { getCustomerById } from 'store/customers/customers.reducer';
+
+const mapStateToProps = (state, props) => ({
+  customerDetail: getCustomerById(state, props.customerId),
+});
+
+export default connect(mapStateToProps);

client/src/containers/Customers/withCustomers.js

@@ -0,0 +1,18 @@
+import { connect } from 'react-redux';
+import { getCustomersItems } from 'store/customers/customers.selectors';
+import { getResourceViews } from 'store/customViews/customViews.selectors';
+
+export default (mapState) => {
+  const mapStateToProps = (state, props) => {
+ 
+    const mapped = {
+      customersViews: getResourceViews(state, 'customers'),
+      customers: getCustomersItems(state, state.customers.currentViewId),
+      customersLoading: state.customers.loading,
+      customerErrors: state.customers.errors,
+    };
+    return mapState ? mapState(mapped, state, props) : mapped;
+  };
+
+  return connect(mapStateToProps);
+};

client/src/containers/Customers/withCustomersActions.js

@@ -0,0 +1,23 @@
+import { connect } from 'react-redux';
+import {
+  fetchCustomers,
+  submitCustomer,
+  editCustomer,
+} from 'store/customers/customers.actions';
+import t from 'store/types';
+
+export const mapDispatchToProps = (dispatch) => ({
+  requestFetchCustomers: (query) => dispatch(fetchCustomers({ query })),
+  // requestDeleteCustomer: (id) => dispatch(deleteCustomer({ id })),
+  // requestDeleteBulkCustomers:(ids)=>dispatch(deleteBulkCustomers({ids})),
+  requestSubmitCustomer: (form) => dispatch(submitCustomer({ form })),
+  // requestEditCustomer: (id, form) => dispatch(editCustomer({ id, form })),
+
+  addCustomersTableQueries: (queries) =>
+    dispatch({
+      type: t.CUSTOMERS_TABLE_QUERIES_ADD,
+      queries,
+    }),
+});
+
+export default connect(null, mapDispatchToProps);