chrone: sperate client and server to different repos.

src/containers/Vendors/VendorForm/VendorAttahmentTab.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import Dragzone from 'components/Dragzone';
+import { FormattedMessage as T } from 'components';
+
+/**
+ * Vendor Attahment Tab.
+ */
+function VendorAttahmentTab() {
+  return (
+    <div>
+      <Dragzone
+        initialFiles={[]}
+        onDrop={null}
+        onDeleteFile={[]}
+        hint={<T id={'attachments_maximum'} />}
+      />
+    </div>
+  );
+}
+
+export default VendorAttahmentTab;

src/containers/Vendors/VendorForm/VendorFinanicalPanelTab.js

@@ -0,0 +1,110 @@
+import React from 'react';
+import classNames from 'classnames';
+import { FormGroup, ControlGroup, Position, Classes } from '@blueprintjs/core';
+import { DateInput } from '@blueprintjs/datetime';
+import { FastField, ErrorMessage } from 'formik';
+import moment from 'moment';
+import {
+  MoneyInputGroup,
+  InputPrependText,
+  CurrencySelectList,
+  Row,
+  Col,
+} from 'components';
+import { FormattedMessage as T } from 'components';
+import { momentFormatter, tansformDateValue, inputIntent } from 'utils';
+import { useVendorFormContext } from './VendorFormProvider';
+
+/**
+ * Vendor Finaniceal Panel Tab.
+ */
+export default function VendorFinanicalPanelTab() {
+  const { vendorId, currencies } = useVendorFormContext();
+
+  return (
+    <div className={'tab-panel--financial'}>
+      <Row>
+        <Col xs={6}>
+          {/*------------ Opening balance at -----------*/}
+          <FastField name={'opening_balance_at'}>
+            {({ form, field: { value }, meta: { error, touched } }) => (
+              <FormGroup
+                label={<T id={'opening_balance_at'} />}
+                className={classNames('form-group--select-list', Classes.FILL)}
+                intent={inputIntent({ error, touched })}
+                inline={true}
+                helperText={<ErrorMessage name="opening_balance_at" />}
+              >
+                <DateInput
+                  {...momentFormatter('YYYY/MM/DD')}
+                  onChange={(date) => {
+                    form.setFieldValue(
+                      'opening_balance_at',
+                      moment(date).format('YYYY-MM-DD'),
+                    );
+                  }}
+                  value={tansformDateValue(value)}
+                  popoverProps={{ position: Position.BOTTOM, minimal: true }}
+                  disabled={vendorId}
+                />
+              </FormGroup>
+            )}
+          </FastField>
+          {/*------------ Opening balance  -----------*/}
+          <FastField name={'opening_balance'}>
+            {({ form, field, field: { value }, meta: { error, touched } }) => (
+              <FormGroup
+                label={<T id={'opening_balance'} />}
+                className={classNames(
+                  'form-group--opening-balance',
+                  Classes.FILL,
+                )}
+                intent={inputIntent({ error, touched })}
+                inline={true}
+              >
+                <ControlGroup>
+                  <InputPrependText text={form.values.currency_code} />
+                  <MoneyInputGroup
+                    value={value}
+                    inputGroupProps={{
+                      fill: true,
+                      // ...field,
+                    }}
+                    onChange={(balance) => {
+                      form.setFieldValue('opening_balance', balance);
+                    }}
+                    disabled={vendorId}
+                  />
+                </ControlGroup>
+              </FormGroup>
+            )}
+          </FastField>
+
+          {/*------------ Currency  -----------*/}
+          <FastField name={'currency_code'}>
+            {({ form, field: { value }, meta: { error, touched } }) => (
+              <FormGroup
+                label={<T id={'currency'} />}
+                className={classNames(
+                  'form-group--select-list',
+                  'form-group--balance-currency',
+                  Classes.FILL,
+                )}
+                inline={true}
+              >
+                <CurrencySelectList
+                  currenciesList={currencies}
+                  selectedCurrencyCode={value}
+                  onCurrencySelected={(currency) => {
+                    form.setFieldValue('currency_code', currency.currency_code);
+                  }}
+                  disabled={true}
+                />
+              </FormGroup>
+            )}
+          </FastField>
+        </Col>
+      </Row>
+    </div>
+  );
+}

src/containers/Vendors/VendorForm/VendorFloatingActions.js

@@ -0,0 +1,103 @@
+import React from 'react';
+import {
+  Intent,
+  Button,
+  ButtonGroup,
+  Popover,
+  PopoverInteractionKind,
+  Position,
+  Menu,
+  MenuItem,
+} from '@blueprintjs/core';
+import { FormattedMessage as T } from 'components';
+import classNames from 'classnames';
+import { CLASSES } from 'common/classes';
+import { useFormikContext } from 'formik';
+import { useHistory } from 'react-router-dom';
+import { Icon } from 'components';
+import { useVendorFormContext } from './VendorFormProvider';
+
+/**
+ * Vendor floating actions bar.
+ */
+export default function VendorFloatingActions() {
+  // Formik context.
+  const { resetForm, isSubmitting, submitForm } = useFormikContext();
+
+  // Vendor form context.
+  const { isNewMode, setSubmitPayload } = useVendorFormContext();
+
+  // History.
+  const history = useHistory();
+
+  // Handle the submit button.
+  const handleSubmitBtnClick = (event) => {
+    setSubmitPayload({ noRedirect: false, });
+    submitForm();
+  };
+
+  // Handle the submit & new button click.
+  const handleSubmitAndNewClick = (event) => {
+    submitForm();
+    setSubmitPayload({ noRedirect: true, });
+  };
+
+  // Handle cancel button click.
+  const handleCancelBtnClick = (event) => {
+    history.goBack();
+  };
+
+  // Handle clear button click.
+  const handleClearBtnClick = (event) => {
+    resetForm();
+  };
+
+  return (
+    <div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
+      <ButtonGroup>
+        {/* ----------- Save and New ----------- */}
+        <Button
+          disabled={isSubmitting}
+          loading={isSubmitting}
+          intent={Intent.PRIMARY}
+          type="submit"
+          onClick={handleSubmitBtnClick}
+          text={!isNewMode ? <T id={'edit'} /> : <T id={'save'} />}
+        />
+        <Popover
+          content={
+            <Menu>
+              <MenuItem
+                text={<T id={'save_and_new'} />}
+                onClick={handleSubmitAndNewClick}
+              />
+            </Menu>
+          }
+          minimal={true}
+          interactionKind={PopoverInteractionKind.CLICK}
+          position={Position.BOTTOM_LEFT}
+        >
+          <Button
+            disabled={isSubmitting}
+            intent={Intent.PRIMARY}
+            rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
+          />
+        </Popover>
+      </ButtonGroup>
+      {/* ----------- Clear & Reset----------- */}
+      <Button
+        className={'ml1'}
+        disabled={isSubmitting}
+        onClick={handleClearBtnClick}
+        text={!isNewMode ? <T id={'reset'} /> : <T id={'clear'} />}
+      />
+      {/* ----------- Cancel  ----------- */}
+      <Button
+        className={'ml1'}
+        disabled={isSubmitting}
+        onClick={handleCancelBtnClick}
+        text={<T id={'cancel'} />}
+      />
+    </div>
+  );
+}

src/containers/Vendors/VendorForm/VendorForm.js

@@ -0,0 +1,173 @@
+import React, { useMemo, useEffect } from 'react';
+import { Formik, Form } from 'formik';
+import moment from 'moment';
+import { Intent } from '@blueprintjs/core';
+import intl from 'react-intl-universal';
+import classNames from 'classnames';
+import { useHistory } from 'react-router-dom';
+
+import { CLASSES } from 'common/classes';
+import { FormattedMessage as T } from 'components';
+import AppToaster from 'components/AppToaster';
+import {
+  CreateVendorFormSchema,
+  EditVendorFormSchema,
+} from './VendorForm.schema';
+
+import VendorFormPrimarySection from './VendorFormPrimarySection';
+import VendorFormAfterPrimarySection from './VendorFormAfterPrimarySection';
+import VendorTabs from './VendorsTabs';
+import VendorFloatingActions from './VendorFloatingActions';
+
+import withDashboardActions from 'containers/Dashboard/withDashboardActions';
+import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';
+
+import { useVendorFormContext } from './VendorFormProvider';
+import { compose, transformToForm } from 'utils';
+
+const defaultInitialValues = {
+  salutation: '',
+  first_name: '',
+  last_name: '',
+  company_name: '',
+  display_name: '',
+
+  email: '',
+  work_phone: '',
+  personal_phone: '',
+  website: '',
+  note: '',
+  active: true,
+
+  billing_address_country: '',
+  billing_address_1: '',
+  billing_address_2: '',
+  billing_address_city: '',
+  billing_address_state: '',
+  billing_address_postcode: '',
+  billing_address_phone: '',
+
+  shipping_address_country: '',
+  shipping_address_1: '',
+  shipping_address_2: '',
+  shipping_address_city: '',
+  shipping_address_state: '',
+  shipping_address_postcode: '',
+  shipping_address_phone: '',
+
+  opening_balance: '',
+  currency_code: '',
+  opening_balance_at: moment(new Date()).format('YYYY-MM-DD'),
+};
+
+/**
+ * Vendor form.
+ */
+function VendorForm({
+  // #withDashboardActions
+  changePageTitle,
+
+  // #withCurrentOrganization
+  organization: { base_currency },
+}) {
+  // Vendor form context.
+  const {
+    vendorId,
+    vendor,
+    contactDuplicate,
+    createVendorMutate,
+    editVendorMutate,
+    setSubmitPayload,
+    submitPayload,
+    isNewMode,
+  } = useVendorFormContext();
+
+  // const isNewMode = !vendorId;
+
+  // History context.
+  const history = useHistory();
+
+  /**
+   * Initial values in create and edit mode.
+   */
+  const initialValues = useMemo(
+    () => ({
+      ...defaultInitialValues,
+      currency_code: base_currency,
+      ...transformToForm(vendor, defaultInitialValues),
+      ...transformToForm(contactDuplicate, defaultInitialValues),
+    }),
+    [vendor, contactDuplicate, base_currency],
+  );
+
+  // Handles the form submit.
+  const handleFormSubmit = (
+    values,
+    { setSubmitting, resetForm, setErrors },
+  ) => {
+    const requestForm = { ...values };
+    setSubmitting(true);
+
+    const onSuccess = () => {
+      AppToaster.show({
+        message: intl.get(
+          isNewMode
+            ? 'the_vendor_has_been_created_successfully'
+            : 'the_item_vendor_has_been_edited_successfully',
+        ),
+        intent: Intent.SUCCESS,
+      });
+      setSubmitPayload(false);
+      setSubmitting(false);
+      resetForm();
+
+      if (!submitPayload.noRedirect) {
+        history.push('/vendors');
+      }
+    };
+
+    const onError = () => {
+      setSubmitPayload(false);
+      setSubmitting(false);
+    };
+
+    if (isNewMode) {
+      createVendorMutate(requestForm).then(onSuccess).catch(onError);
+    } else {
+      editVendorMutate([vendor.id, requestForm]).then(onSuccess).catch(onError);
+    }
+  };
+
+  return (
+    <div className={classNames(CLASSES.PAGE_FORM, CLASSES.PAGE_FORM_VENDOR)}>
+      <Formik
+        validationSchema={
+          isNewMode ? CreateVendorFormSchema : EditVendorFormSchema
+        }
+        initialValues={initialValues}
+        onSubmit={handleFormSubmit}
+      >
+        <Form>
+          <div className={classNames(CLASSES.PAGE_FORM_HEADER_PRIMARY)}>
+            <VendorFormPrimarySection />
+          </div>
+
+          <div className={'page-form__after-priamry-section'}>
+            <VendorFormAfterPrimarySection />
+          </div>
+
+          <div className={classNames(CLASSES.PAGE_FORM_TABS)}>
+            <VendorTabs vendor={vendorId} />
+          </div>
+
+          <VendorFloatingActions />
+        </Form>
+      </Formik>
+    </div>
+  );
+}
+
+export default compose(
+  withDashboardActions,
+  withCurrentOrganization(),
+)(VendorForm);

src/containers/Vendors/VendorForm/VendorForm.schema.js

@@ -0,0 +1,44 @@
+import * as Yup from 'yup';
+import intl from 'react-intl-universal';
+
+const Schema = Yup.object().shape({
+  salutation: Yup.string().trim(),
+  first_name: Yup.string().trim(),
+  last_name: Yup.string().trim(),
+  company_name: Yup.string().trim(),
+  display_name: Yup.string()
+    .trim()
+    .required()
+    .label(intl.get('display_name_')),
+
+  email: Yup.string().email().nullable(),
+  work_phone: Yup.number(),
+  personal_phone: Yup.number(),
+  website: Yup.string().url().nullable(),
+
+  active: Yup.boolean(),
+  note: Yup.string().trim(),
+
+  billing_address_country: Yup.string().trim(),
+  billing_address_1: Yup.string().trim(),
+  billing_address_2: Yup.string().trim(),
+  billing_address_city: Yup.string().trim(),
+  billing_address_state: Yup.string().trim(),
+  billing_address_postcode: Yup.number().nullable(),
+  billing_address_phone: Yup.number(),
+
+  shipping_address_country: Yup.string().trim(),
+  shipping_address_1: Yup.string().trim(),
+  shipping_address_2: Yup.string().trim(),
+  shipping_address_city: Yup.string().trim(),
+  shipping_address_state: Yup.string().trim(),
+  shipping_address_postcode: Yup.number().nullable(),
+  shipping_address_phone: Yup.number(),
+
+  opening_balance: Yup.number().nullable(),
+  currency_code: Yup.string(),
+  opening_balance_at: Yup.date(),
+});
+
+export const CreateVendorFormSchema = Schema;
+export const EditVendorFormSchema = Schema;

src/containers/Vendors/VendorForm/VendorFormAfterPrimarySection.js

@@ -0,0 +1,77 @@
+import React from 'react';
+import { FormGroup, InputGroup, ControlGroup } from '@blueprintjs/core';
+import { FastField, ErrorMessage } from 'formik';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
+import { inputIntent } from 'utils';
+
+/**
+ * Vendor form  after primary section.
+ */
+function VendorFormAfterPrimarySection() {
+  
+
+  return (
+    <div class="customer-form__after-primary-section-content">
+      {/*------------ Vendor email -----------*/}
+      <FastField name={'email'}>
+        {({ field, meta: { error, touched } }) => (
+          <FormGroup
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name={'email'} />}
+            className={'form-group--email'}
+            label={<T id={'vendor_email'} />}
+            inline={true}
+          >
+            <InputGroup {...field} />
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/*------------ Phone number -----------*/}
+      <FormGroup
+        className={'form-group--phone-number'}
+        label={<T id={'phone_number'} />}
+        inline={true}
+      >
+        <ControlGroup>
+          <FastField name={'work_phone'}>
+            {({ field, meta: { error, touched } }) => (
+              <InputGroup
+                intent={inputIntent({ error, touched })}
+                placeholder={intl.get('work')}
+                {...field}
+              />
+            )}
+          </FastField>
+          <FastField name={'personal_phone'}>
+            {({ field, meta: { error, touched } }) => (
+              <InputGroup
+                intent={inputIntent({ error, touched })}
+                placeholder={intl.get('Mobile')}
+                {...field}
+              />
+            )}
+          </FastField>
+        </ControlGroup>
+      </FormGroup>
+
+      {/*------------ Vendor website -----------*/}
+      <FastField name={'website'}>
+        {({ field, meta: { error, touched } }) => (
+          <FormGroup
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name={'website'} />}
+            className={'form-group--website'}
+            label={<T id={'website'} />}
+            inline={true}
+          >
+            <InputGroup placeholder={'http://'} {...field} />
+          </FormGroup>
+        )}
+      </FastField>
+    </div>
+  );
+}
+
+export default VendorFormAfterPrimarySection;

src/containers/Vendors/VendorForm/VendorFormPage.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { useParams } from 'react-router-dom';
+
+import 'style/pages/Vendors/PageForm.scss';
+
+import { DashboardCard } from 'components';
+import VendorFrom from './VendorForm';
+
+import { VendorFormProvider } from './VendorFormProvider';
+
+/**
+ * Vendor form page.
+ */
+function VendorFormPage() {
+  const { id } = useParams();
+  
+  return (
+    <VendorFormProvider vendorId={id}>
+      <DashboardCard page>
+        <VendorFrom />
+      </DashboardCard>
+    </VendorFormProvider>
+  );
+}
+
+export default VendorFormPage;

src/containers/Vendors/VendorForm/VendorFormPrimarySection.js

@@ -0,0 +1,126 @@
+import React from 'react';
+import classNames from 'classnames';
+import { FormGroup, InputGroup, ControlGroup } from '@blueprintjs/core';
+import { FastField, Field, ErrorMessage } from 'formik';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
+import {
+  Hint,
+  FieldRequiredHint,
+  SalutationList,
+  DisplayNameList,
+} from 'components';
+
+import { CLASSES } from 'common/classes';
+import { inputIntent } from 'utils';
+
+import { useAutofocus } from 'hooks';
+
+/**
+ * Vendor form primary section.
+ */
+function VendorFormPrimarySection() {
+  const firstNameFieldRef = useAutofocus();
+  
+
+  return (
+    <div className={'customer-form__primary-section-content'}>
+      {/**----------- Vendor name -----------*/}
+      <FormGroup
+        className={classNames('form-group--contact_name')}
+        label={<T id={'contact_name'} />}
+        inline={true}
+      >
+        <ControlGroup>
+          <FastField name={'salutation'}>
+            {({ form, field: { value }, meta: { error, touched } }) => (
+              <SalutationList
+                onItemSelect={(salutation) => {
+                  form.setFieldValue('salutation', salutation.label);
+                }}
+                selectedItem={value}
+                popoverProps={{ minimal: true }}
+                className={classNames(
+                  CLASSES.FORM_GROUP_LIST_SELECT,
+                  CLASSES.FILL,
+                  'input-group--salutation-list',
+                  'select-list--fill-button',
+                )}
+              />
+            )}
+          </FastField>
+
+          <FastField name={'first_name'}>
+            {({ field, meta: { error, touched } }) => (
+              <InputGroup
+                placeholder={intl.get('first_name')}
+                intent={inputIntent({ error, touched })}
+                className={classNames('input-group--first-name')}
+                inputRef={(ref) => (firstNameFieldRef.current = ref)}
+                {...field}
+              />
+            )}
+          </FastField>
+
+          <FastField name={'last_name'}>
+            {({ field, meta: { error, touched } }) => (
+              <InputGroup
+                placeholder={intl.get('last_name')}
+                intent={inputIntent({ error, touched })}
+                className={classNames('input-group--last-name')}
+                {...field}
+              />
+            )}
+          </FastField>
+        </ControlGroup>
+      </FormGroup>
+
+      {/*----------- Company Name -----------*/}
+      <FastField name={'company_name'}>
+        {({ field, meta: { error, touched } }) => (
+          <FormGroup
+            className={classNames('form-group--company_name')}
+            label={<T id={'company_name'} />}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name={'company_name'} />}
+            inline={true}
+          >
+            <InputGroup {...field} />
+          </FormGroup>
+        )}
+      </FastField>
+      {/*----------- Display Name -----------*/}
+      <Field name={'display_name'}>
+        {({ form, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            helperText={<ErrorMessage name={'display_name'} />}
+            intent={inputIntent({ error, touched })}
+            label={
+              <>
+                <T id={'display_name'} />
+                <FieldRequiredHint />
+                <Hint />
+              </>
+            }
+            className={classNames(CLASSES.FORM_GROUP_LIST_SELECT, CLASSES.FILL)}
+            inline={true}
+          >
+            <DisplayNameList
+              firstName={form.values.first_name}
+              lastName={form.values.last_name}
+              company={form.values.company_name}
+              salutation={form.values.salutation}
+              onItemSelect={(displayName) => {
+                form.setFieldValue('display_name', displayName.label);
+              }}
+              selectedItem={value}
+              popoverProps={{ minimal: true }}
+            />
+          </FormGroup>
+        )}
+      </Field>
+    </div>
+  );
+}
+
+export default VendorFormPrimarySection;

src/containers/Vendors/VendorForm/VendorFormProvider.js

@@ -0,0 +1,73 @@
+import React, { useState, createContext } from 'react';
+import { omit, pick } from 'lodash';
+import { useLocation } from 'react-router-dom';
+import DashboardInsider from 'components/Dashboard/DashboardInsider';
+import {
+  useVendor,
+  useContact,
+  useCurrencies,
+  useCustomer,
+  useCreateVendor,
+  useEditVendor,
+} from 'hooks/query';
+
+const VendorFormContext = createContext();
+
+/**
+ * Vendor form provider.
+ */
+function VendorFormProvider({ vendorId, ...props }) {
+  const { state } = useLocation();
+
+  const contactId = state?.action;
+
+  // Handle fetch Currencies data table
+  const { data: currencies, isLoading: isCurrenciesLoading } = useCurrencies();
+
+  // Handle fetch vendor details.
+  const { data: vendor, isLoading: isVendorLoading } = useVendor(vendorId, {
+    enabled: !!vendorId,
+  });
+
+  // Handle fetch contact duplicate details.
+  const {
+    data: contactDuplicate,
+    isLoading: isContactLoading,
+  } = useContact(contactId, { enabled: !!contactId });
+
+  // Create and edit vendor mutations.
+  const { mutateAsync: createVendorMutate } = useCreateVendor();
+  const { mutateAsync: editVendorMutate } = useEditVendor();
+
+  // Form submit payload.
+  const [submitPayload, setSubmitPayload] = useState({});
+
+  // determines whether the form new or duplicate mode.
+  const isNewMode = contactId || !vendorId;
+
+  const provider = {
+    vendorId,
+    currencies,
+    vendor,
+    contactDuplicate: { ...omit(contactDuplicate, ['opening_balance_at']) },
+    submitPayload,
+    isNewMode,
+
+    createVendorMutate,
+    editVendorMutate,
+    setSubmitPayload,
+  };
+
+  return (
+    <DashboardInsider
+      loading={isVendorLoading || isContactLoading || isCurrenciesLoading}
+      name={'vendor-form'}
+    >
+      <VendorFormContext.Provider value={provider} {...props} />
+    </DashboardInsider>
+  );
+}
+
+const useVendorFormContext = () => React.useContext(VendorFormContext);
+
+export { VendorFormProvider, useVendorFormContext };

src/containers/Vendors/VendorForm/VendorsTabs.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import { Tabs, Tab } from '@blueprintjs/core';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
+import classNames from 'classnames';
+import { CLASSES } from 'common/classes';
+
+import VendorFinanicalPanelTab from './VendorFinanicalPanelTab';
+import VendorAttahmentTab from './VendorAttahmentTab';
+
+import CustomerAddressTabs from 'containers/Customers/CustomerForm/CustomerAddressTabs';
+import CustomerNotePanel from 'containers/Customers/CustomerForm/CustomerNotePanel';
+
+/**
+ * Vendor form tabs.
+ */
+export default function VendorTabs() {
+  
+  return (
+    <div className={classNames(CLASSES.PAGE_FORM_TABS)}>
+      <Tabs
+        animate={true}
+        id={'vendor-tabs'}
+        large={true}
+        defaultSelectedTabId="financial"
+      >
+        <Tab
+          id={'financial'}
+          title={intl.get('financial_details')}
+          panel={<VendorFinanicalPanelTab  />}
+        />
+        <Tab
+          id={'address'}
+          title={intl.get('address')}
+          panel={<CustomerAddressTabs />}
+        />
+        <Tab
+          id="notes"
+          title={intl.get('notes')}
+          panel={<CustomerNotePanel />}
+        />
+        <Tab
+          id={'attachement'}
+          title={intl.get('attachement')}
+          panel={<VendorAttahmentTab />}
+        />
+      </Tabs>
+    </div>
+  );
+}

src/containers/Vendors/VendorsAlerts.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import VendorDeleteAlert from 'containers/Alerts/Vendors/VendorDeleteAlert';
+import ContactActivateAlert from '../../containers/Alerts/Contacts/ContactActivateAlert';
+import ContactInactivateAlert from '../../containers/Alerts/Contacts/ContactInactivateAlert';
+
+export default function VendorsAlerts() {
+  return (
+    <div>
+      <VendorDeleteAlert name={'vendor-delete'} />
+      <ContactActivateAlert name={'contact-activate'} />
+      <ContactInactivateAlert name={'contact-inactivate'} />
+    </div>
+  );
+}

src/containers/Vendors/VendorsLanding/VendorActionsBar.js

@@ -0,0 +1,143 @@
+import React from 'react';
+import {
+  NavbarGroup,
+  NavbarDivider,
+  Button,
+  Classes,
+  Intent,
+  Switch,
+  Alignment,
+} from '@blueprintjs/core';
+import { FormattedMessage as T } from 'components';
+
+import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
+import Icon from 'components/Icon';
+import {
+  If,
+  DashboardActionViewsList,
+  DashboardFilterButton,
+  AdvancedFilterPopover,
+} from 'components';
+
+import { useRefreshVendors } from 'hooks/query/vendors';
+import { useVendorsListContext } from './VendorsListProvider';
+import { useHistory } from 'react-router-dom';
+
+import withVendorsActions from './withVendorsActions';
+import withVendors from './withVendors';
+
+import { compose } from 'utils';
+
+/**
+ * Vendors actions bar.
+ */
+function VendorActionsBar({
+  // #withVendors
+  vendorsFilterConditions,
+
+  // #withVendorActions
+  setVendorsTableState,
+  vendorsInactiveMode,
+}) {
+  const history = useHistory();
+
+  // Vendors list context.
+  const { vendorsViews, fields } = useVendorsListContext();
+
+  // Handles new vendor button click.
+  const onClickNewVendor = () => {
+    history.push('/vendors/new');
+  };
+
+  // Vendors refresh action.
+  const { refresh } = useRefreshVendors();
+
+  // Handle the active tab change.
+  const handleTabChange = (viewSlug) => {
+    setVendorsTableState({ viewSlug });
+  };
+
+  // Handle inactive switch changing.
+  const handleInactiveSwitchChange = (event) => {
+    const checked = event.target.checked;
+    setVendorsTableState({ inactiveMode: checked });
+  };
+
+  // Handle click a refresh sale estimates
+  const handleRefreshBtnClick = () => {
+    refresh();
+  };
+
+  return (
+    <DashboardActionsBar>
+      <NavbarGroup>
+        <DashboardActionViewsList
+          resourceName={'vendors'}
+          views={vendorsViews}
+          onChange={handleTabChange}
+        />
+        <NavbarDivider />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon={'plus'} />}
+          text={<T id={'new_vendor'} />}
+          onClick={onClickNewVendor}
+        />
+        <NavbarDivider />
+        <AdvancedFilterPopover
+          advancedFilterProps={{
+            conditions: vendorsFilterConditions,
+            defaultFieldKey: 'display_name',
+            fields: fields,
+            onFilterChange: (filterConditions) => {
+              setVendorsTableState({ filterRoles: filterConditions });
+            },
+          }}
+        >
+          <DashboardFilterButton
+            conditionsCount={vendorsFilterConditions.length}
+          />
+        </AdvancedFilterPopover>
+
+        <If condition={false}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon="trash-16" iconSize={16} />}
+            text={<T id={'delete'} />}
+            intent={Intent.DANGER}
+          />
+        </If>
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="file-import-16" iconSize={16} />}
+          text={<T id={'import'} />}
+        />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="file-export-16" iconSize={16} />}
+          text={<T id={'export'} />}
+        />
+        <Switch
+          labelElement={<T id={'inactive'} />}
+          defaultChecked={vendorsInactiveMode}
+          onChange={handleInactiveSwitchChange}
+        />
+      </NavbarGroup>
+      <NavbarGroup align={Alignment.RIGHT}>
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="refresh-16" iconSize={14} />}
+          onClick={handleRefreshBtnClick}
+        />
+      </NavbarGroup>
+    </DashboardActionsBar>
+  );
+}
+
+export default compose(
+  withVendorsActions,
+  withVendors(({ vendorsTableState }) => ({
+    vendorsInactiveMode: vendorsTableState.inactiveMode,
+    vendorsFilterConditions: vendorsTableState.filterRoles,
+  })),
+)(VendorActionsBar);

src/containers/Vendors/VendorsLanding/VendorViewsTabs.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core';
+import { compose } from 'redux';
+
+import { useVendorsListContext } from './VendorsListProvider';
+import { DashboardViewsTabs } from 'components';
+
+import withVendorsActions from './withVendorsActions';
+import withVendors from './withVendors';
+
+import { transfromViewsToTabs } from 'utils';
+
+/**
+ * Vendors views tabs.
+ */
+function VendorViewsTabs({
+  // #withVendorsActions
+  setVendorsTableState,
+
+  // #withVendors
+  vendorsCurrentView,
+}) {
+  const { vendorsViews } = useVendorsListContext();
+
+  // Transformes the resource views to tabs.
+  const tabs = transfromViewsToTabs(vendorsViews);
+
+  // Handle dashboard tabs change.
+  const handleTabsChange = (viewSlug) => {
+    setVendorsTableState({ viewSlug });
+  };
+
+  return (
+    <Navbar className="navbar--dashboard-views">
+      <NavbarGroup align={Alignment.LEFT}>
+        <DashboardViewsTabs
+          currentViewSlug={vendorsCurrentView}
+          resourceName={'vendors'}
+          tabs={tabs}
+          onChange={handleTabsChange}
+        />
+      </NavbarGroup>
+    </Navbar>
+  );
+}
+
+export default compose(
+  withVendorsActions,
+  withVendors(({ vendorsTableState }) => ({
+    vendorsCurrentView: vendorsTableState.viewSlug,
+  })),
+)(VendorViewsTabs);

src/containers/Vendors/VendorsLanding/VendorsEmptyStatus.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Button, Intent } from '@blueprintjs/core';
+import { useHistory } from 'react-router-dom';
+import { EmptyStatus } from 'components';
+import { FormattedMessage as T } from 'components';
+
+export default function VendorsEmptyStatus() {
+  const history = useHistory();
+
+  return (
+    <EmptyStatus
+      title={<T id={'create_and_manage_your_organization_s_vendors'} />}
+      description={
+        <p>
+          <T id={'here_a_list_of_your_organization_products_and_services'} />
+        </p>
+      }
+      action={
+        <>
+          <Button
+            intent={Intent.PRIMARY}
+            large={true}
+            onClick={() => {
+              history.push('/vendors/new');
+            }}
+          >
+            <T id={'new_vendor'} />
+          </Button>
+
+          <Button intent={Intent.NONE} large={true}>
+            <T id={'learn_more'} />
+          </Button>
+        </>
+      }
+    />
+  );
+}

src/containers/Vendors/VendorsLanding/VendorsList.js

@@ -0,0 +1,59 @@
+import React, { useEffect } from 'react';
+
+import 'style/pages/Vendors/List.scss';
+
+import { DashboardContentTable, DashboardPageContent } from 'components';
+
+import { VendorsListProvider } from './VendorsListProvider';
+import VendorActionsBar from './VendorActionsBar';
+import VendorViewsTabs from './VendorViewsTabs';
+import VendorsAlerts from '../VendorsAlerts';
+import VendorsTable from './VendorsTable';
+
+import withVendors from './withVendors';
+import withVendorsActions from './withVendorsActions';
+
+import { compose } from 'utils';
+
+/**
+ * Vendors list page.
+ */
+function VendorsList({
+  // #withVendors
+  vendorsTableState,
+  vendorsTableStateChanged,
+
+  // #withVendorsActions
+  resetVendorsTableState,
+}) {
+  // Resets the vendors table state once the page unmount.
+  useEffect(
+    () => () => {
+      resetVendorsTableState();
+    },
+    [resetVendorsTableState],
+  );
+
+  return (
+    <VendorsListProvider
+      tableState={vendorsTableState}
+      tableStateChanged={vendorsTableStateChanged}
+    >
+      <VendorActionsBar />
+
+      <DashboardPageContent>
+        <VendorViewsTabs />
+        <VendorsTable />
+      </DashboardPageContent>
+      <VendorsAlerts />
+    </VendorsListProvider>
+  );
+}
+
+export default compose(
+  withVendors(({ vendorsTableState, vendorsTableStateChanged }) => ({
+    vendorsTableState,
+    vendorsTableStateChanged,
+  })),
+  withVendorsActions,
+)(VendorsList);

src/containers/Vendors/VendorsLanding/VendorsListProvider.js

@@ -0,0 +1,66 @@
+import React, { createContext } from 'react';
+import { isEmpty } from 'lodash';
+
+import DashboardInsider from 'components/Dashboard/DashboardInsider';
+import { useResourceMeta, useResourceViews, useVendors } from 'hooks/query';
+import { isTableEmptyStatus, getFieldsFromResourceMeta } from 'utils';
+import { transformVendorsStateToQuery } from './utils';
+
+const VendorsListContext = createContext();
+
+function VendorsListProvider({ tableState, tableStateChanged, ...props }) {
+  // Transformes the vendors table state to fetch query.
+  const tableQuery = transformVendorsStateToQuery(tableState);
+
+  // Fetch vendors list with pagination meta.
+  const {
+    data: { vendors, pagination, filterMeta },
+    isLoading: isVendorsLoading,
+    isFetching: isVendorsFetching,
+  } = useVendors(tableQuery, { keepPreviousData: true });
+
+  // Fetch customers resource views and fields.
+  const { data: vendorsViews, isLoading: isVendorsViewsLoading } =
+    useResourceViews('vendors');
+
+  // Fetch the customers resource fields.
+  const {
+    data: resourceMeta,
+    isLoading: isResourceMetaLoading,
+    isFetching: isResourceMetaFetching,
+  } = useResourceMeta('customers');
+
+  // Detarmines the datatable empty status.
+  const isEmptyStatus =
+    isEmpty(vendors) && !isVendorsLoading && !tableStateChanged;
+
+  const provider = {
+    vendors,
+    pagination,
+    vendorsViews,
+
+    fields: getFieldsFromResourceMeta(resourceMeta.fields),
+    resourceMeta,
+    isResourceMetaLoading,
+    isResourceMetaFetching,
+
+    isVendorsViewsLoading,
+
+    isVendorsLoading,
+    isVendorsFetching,
+    isEmptyStatus,
+  };
+
+  return (
+    <DashboardInsider
+      loading={isResourceMetaLoading || isVendorsLoading}
+      name={'vendors-list'}
+    >
+      <VendorsListContext.Provider value={provider} {...props} />
+    </DashboardInsider>
+  );
+}
+
+const useVendorsListContext = () => React.useContext(VendorsListContext);
+
+export { VendorsListProvider, useVendorsListContext };

src/containers/Vendors/VendorsLanding/VendorsTable.js

@@ -0,0 +1,164 @@
+import React from 'react';
+import { useHistory } from 'react-router';
+
+import { TABLES } from 'common/tables';
+
+import { DataTable, DashboardContentTable } from 'components';
+import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
+import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
+
+import VendorsEmptyStatus from './VendorsEmptyStatus';
+
+import { useVendorsListContext } from './VendorsListProvider';
+import { useMemorizedColumnsWidths } from 'hooks';
+
+import withVendorsActions from './withVendorsActions';
+import withVendors from './withVendors';
+import withAlertsActions from 'containers/Alert/withAlertActions';
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+import { ActionsMenu, useVendorsTableColumns } from './components';
+
+import { compose } from 'utils';
+
+/**
+ * Vendors table.
+ */
+function VendorsTable({
+  // #withVendorsActions
+  setVendorsTableState,
+
+  // #withVendors
+  vendorsTableState,
+
+  // #withAlertsActions
+  openAlert,
+
+  // #withDrawerActions
+  openDrawer,
+
+  // #withDialogActions
+  openDialog,
+}) {
+  // Vendors list context.
+  const {
+    vendors,
+    pagination,
+    isVendorsFetching,
+    isVendorsLoading,
+    isEmptyStatus,
+  } = useVendorsListContext();
+
+  // Vendors table columns.
+  const columns = useVendorsTableColumns();
+
+  // History context.
+  const history = useHistory();
+
+  // Handle edit vendor data table
+  const handleEditVendor = (vendor) => {
+    history.push(`/vendors/${vendor.id}/edit`);
+  };
+
+  // Handle cancel/confirm inactive.
+  const handleInactiveVendor = ({ id, contact_service }) => {
+    openAlert('contact-inactivate', {
+      contactId: id,
+      service: contact_service,
+    });
+  };
+
+  // Handle cancel/confirm  activate.
+  const handleActivateVendor = ({ id, contact_service }) => {
+    openAlert('contact-activate', { contactId: id, service: contact_service });
+  };
+
+  // Handle click delete vendor.
+  const handleDeleteVendor = ({ id }) => {
+    openAlert('vendor-delete', { contactId: id });
+  };
+
+  // Handle contact duplicate .
+  const handleContactDuplicate = ({ id }) => {
+    openDialog('contact-duplicate', {
+      contactId: id,
+    });
+  };
+
+  // Handle view detail item.
+  const handleViewDetailVendor = ({ id }) => {
+    openDrawer('vendor-details-drawer', { vendorId: id });
+  };
+
+  // Handle cell click.
+  const handleCellClick = (cell, event) => {
+    openDrawer('vendor-details-drawer', { vendorId: cell.row.original.id });
+  };
+
+  // Local storage memorizing columns widths.
+  const [initialColumnsWidths, , handleColumnResizing] =
+    useMemorizedColumnsWidths(TABLES.VENDORS);
+
+  // Handle fetch data once the page index, size or sort by of the table change.
+  const handleFetchData = React.useCallback(
+    ({ pageSize, pageIndex, sortBy }) => {
+      setVendorsTableState({
+        pageIndex,
+        pageSize,
+        sortBy,
+      });
+    },
+    [setVendorsTableState],
+  );
+
+  // Display empty status instead of the table.
+  if (isEmptyStatus) {
+    return <VendorsEmptyStatus />;
+  }
+
+  return (
+    <DashboardContentTable>
+      <DataTable
+        noInitialFetch={true}
+        columns={columns}
+        data={vendors}
+        loading={isVendorsLoading}
+        headerLoading={isVendorsLoading}
+        progressBarLoading={isVendorsFetching}
+        onFetchData={handleFetchData}
+        selectionColumn={true}
+        expandable={false}
+        sticky={true}
+        pagination={true}
+        manualSortBy={true}
+        pagesCount={pagination.pagesCount}
+        autoResetSortBy={false}
+        autoResetPage={false}
+        TableLoadingRenderer={TableSkeletonRows}
+        TableHeaderSkeletonRenderer={TableSkeletonHeader}
+        ContextMenu={ActionsMenu}
+        onCellClick={handleCellClick}
+        initialColumnsWidths={initialColumnsWidths}
+        onColumnResizing={handleColumnResizing}
+        payload={{
+          onEdit: handleEditVendor,
+          onDelete: handleDeleteVendor,
+          onDuplicate: handleContactDuplicate,
+          onInactivate: handleInactiveVendor,
+          onActivate: handleActivateVendor,
+          onViewDetails: handleViewDetailVendor,
+        }}
+      />
+    </DashboardContentTable>
+  );
+}
+
+export default compose(
+  withVendorsActions,
+  withAlertsActions,
+  withDialogActions,
+  withDrawerActions,
+
+  withVendors(({ vendorsTableState }) => ({ vendorsTableState })),
+)(VendorsTable);

src/containers/Vendors/VendorsLanding/components.js

@@ -0,0 +1,158 @@
+import React from 'react';
+import {
+  Button,
+  Popover,
+  Menu,
+  MenuItem,
+  MenuDivider,
+  Position,
+  Intent,
+} from '@blueprintjs/core';
+import intl from 'react-intl-universal';
+
+import { Icon, Money, If } from 'components';
+import { safeCallback, firstLettersArgs } from 'utils';
+
+/**
+ * Actions menu.
+ */
+export function ActionsMenu({
+  row: { original },
+  payload: {
+    onEdit,
+    onDelete,
+    onDuplicate,
+    onInactivate,
+    onActivate,
+    onViewDetails,
+  },
+}) {
+  return (
+    <Menu>
+      <MenuItem
+        icon={<Icon icon="reader-18" />}
+        text={intl.get('view_details')}
+        onClick={safeCallback(onViewDetails, original)}
+      />
+      <MenuDivider />
+      <MenuItem
+        icon={<Icon icon="pen-18" />}
+        text={intl.get('edit_vendor')}
+        onClick={safeCallback(onEdit, original)}
+      />
+      <MenuItem
+        icon={<Icon icon="duplicate-16" />}
+        text={intl.get('duplicate')}
+        onClick={safeCallback(onDuplicate, original)}
+      />
+      <If condition={original.active}>
+        <MenuItem
+          text={intl.get('inactivate_item')}
+          icon={<Icon icon="pause-16" iconSize={16} />}
+          onClick={safeCallback(onInactivate, original)}
+        />
+      </If>
+      <If condition={!original.active}>
+        <MenuItem
+          text={intl.get('activate_item')}
+          icon={<Icon icon="play-16" iconSize={16} />}
+          onClick={safeCallback(onActivate, original)}
+        />
+      </If>
+      <MenuItem
+        icon={<Icon icon="trash-16" iconSize={16} />}
+        text={intl.get('delete_vendor')}
+        intent={Intent.DANGER}
+        onClick={safeCallback(onDelete, original)}
+      />
+    </Menu>
+  );
+}
+
+/**
+ * Actions cell.
+ */
+export function ActionsCell(props) {
+  return (
+    <Popover
+      content={<ActionsMenu {...props} />}
+      position={Position.RIGHT_BOTTOM}
+    >
+      <Button icon={<Icon icon="more-h-16" iconSize={16} />} />
+    </Popover>
+  );
+}
+
+/**
+ * Avatar table accessor.
+ */
+export function AvatarAccessor(row) {
+  return <span className="avatar">{firstLettersArgs(row.display_name)}</span>;
+}
+
+/**
+ * Phone number accessor.
+ */
+export function PhoneNumberAccessor(row) {
+  return <div className={'work_phone'}>{row.work_phone}</div>;
+}
+
+/**
+ * Balance accessor.
+ */
+export function BalanceAccessor({ closing_balance, currency_code }) {
+  return <Money amount={closing_balance} currency={currency_code} />;
+}
+
+/**
+ * Retrieve the vendors table columns.
+ */
+export function useVendorsTableColumns() {
+  return React.useMemo(
+    () => [
+      {
+        id: 'avatar',
+        Header: '',
+        accessor: AvatarAccessor,
+        className: 'avatar',
+        width: 45,
+        disableResizing: true,
+        disableSortBy: true,
+        clickable: true,
+      },
+      {
+        id: 'display_name',
+        Header: intl.get('display_name'),
+        accessor: 'display_name',
+        className: 'display_name',
+        width: 150,
+        clickable: true,
+      },
+      {
+        id: 'company_name',
+        Header: intl.get('company_name'),
+        accessor: 'company_name',
+        className: 'company_name',
+        width: 150,
+        clickable: true,
+      },
+      {
+        id: 'work_phone',
+        Header: intl.get('work_phone'),
+        accessor: PhoneNumberAccessor,
+        className: 'work_phone',
+        width: 100,
+        clickable: true,
+      },
+      {
+        id: 'balance',
+        Header: intl.get('receivable_balance'),
+        accessor: BalanceAccessor,
+        align: 'right',
+        width: 100,
+        clickable: true,
+      },
+    ],
+    [],
+  );
+}

src/containers/Vendors/VendorsLanding/utils.js

@@ -0,0 +1,23 @@
+import { useCallback } from 'react';
+import intl from 'react-intl-universal';
+import { Intent } from '@blueprintjs/core';
+import { AppToaster } from 'components';
+import { transformTableStateToQuery } from 'utils';
+
+// Transform API errors in toasts messages.
+export const transformErrors = (errors) => {
+  if (errors.some((e) => e.type === 'VENDOR.HAS.BILLS')) {
+    AppToaster.show({
+      message: intl.get('vendor_has_bills'),
+      intent: Intent.DANGER,
+    });
+  }
+};
+
+
+export const transformVendorsStateToQuery = (tableState) => {
+  return {
+    ...transformTableStateToQuery(tableState),
+    inactive_mode: tableState.inactiveMode || false,
+  };
+}

src/containers/Vendors/VendorsLanding/withVendors.js

@@ -0,0 +1,19 @@
+import { connect } from 'react-redux';
+import {
+  getVendorsTableStateFactory,
+  vendorsTableStateChangedFactory,
+} from 'store/vendors/vendors.selectors';
+
+export default (mapState) => {
+  const getVendorsTableState = getVendorsTableStateFactory();
+  const vendorsTableStateChanged = vendorsTableStateChangedFactory();
+
+  const mapStateToProps = (state, props) => {
+    const mapped = {
+      vendorsTableState: getVendorsTableState(state, props),
+      vendorsTableStateChanged: vendorsTableStateChanged(state, props),
+    };
+    return mapState ? mapState(mapped, state, props) : mapped;
+  };
+  return connect(mapStateToProps);
+};

src/containers/Vendors/VendorsLanding/withVendorsActions.js

@@ -0,0 +1,12 @@
+import { connect } from 'react-redux';
+import {
+  setVendorsTableState,
+  resetVendorsTableState,
+} from 'store/vendors/vendors.actions';
+
+const mapDispatchToProps = (dispatch) => ({
+  setVendorsTableState: (queries) => dispatch(setVendorsTableState(queries)),
+  resetVendorsTableState: () => dispatch(resetVendorsTableState()),
+});
+
+export default connect(null, mapDispatchToProps);

src/containers/Vendors/VendorsUniversalSearch.js

@@ -0,0 +1,46 @@
+import intl from 'react-intl-universal';
+
+import { RESOURCES_TYPES } from '../../common/resourcesTypes';
+import withDrawerActions from '../Drawer/withDrawerActions';
+
+/**
+ * Vendor univesal search item select action.
+ */
+function VendorUniversalSearchSelectComponent({
+  resourceType,
+  resourceId,
+  onAction,
+
+  // #withDrawerActions
+  openDrawer,
+}) {
+  if (resourceType === RESOURCES_TYPES.VENDOR) {
+    openDrawer('vendor-details-drawer', { vendorId: resourceId });
+    onAction && onAction();
+  }
+  return null;
+}
+
+const VendorUniversalSearchSelectAction = withDrawerActions(
+  VendorUniversalSearchSelectComponent,
+);
+
+/**
+ * Transformes vendor resource item to search.
+ */
+const vendorToSearch = (contact) => ({
+  id: contact.id,
+  text: contact.display_name,
+  label: contact.balance > 0 ? contact.formatted_balance + '' : '',
+  reference: contact,
+});
+
+/**
+ * Binds universal search invoice configure.
+ */
+export const universalSearchVendorBind = () => ({
+  resourceType: RESOURCES_TYPES.VENDOR,
+  optionItemLabel: intl.get('vendors'),
+  selectItemAction: VendorUniversalSearchSelectAction,
+  itemSelect: vendorToSearch,
+});

src/containers/Vendors/utils.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Intent } from '@blueprintjs/core';
+import { AppToaster } from 'components';
+import intl from 'react-intl-universal';
+
+export const transformErrors = (errors) => {
+  if (errors.find((error) => error.type === 'VENDOR.HAS.ASSOCIATED.BILLS')) {
+    AppToaster.show({
+      message: intl.get('cannot_delete_vendor_that_has_associated_purchase_bills'),
+      intent: Intent.DANGER,
+    });
+  }
+  if (errors.find((error) => error.type === 'VENDOR_HAS_TRANSACTIONS')) {
+    AppToaster.show({
+      message: intl.get('this_vendor_cannot_be_deleted_as_it_is_associated_with_transactions'),
+      intent: Intent.DANGER,
+    });
+  }
+};

src/containers/Vendors/withVendorDetail.js

@@ -0,0 +1,10 @@
+import { connect } from 'react-redux';
+import { getVendorByIdFactory } from 'store/vendors/vendors.selectors';
+
+export default () => {
+  const getVendorById = getVendorByIdFactory();
+  const mapStateToProps = (state, props) => ({
+    vendor: getVendorById(state, props),
+  });
+  return connect(mapStateToProps);
+};