feat: assign default default messages on sales transactions

packages/webapp/src/containers/Preferences/CreditNotes/PreferencesCreditNotesForm.tsx

@@ -4,12 +4,7 @@ import { Form } from 'formik';
 import { Button, Intent } from '@blueprintjs/core';
 import { useHistory } from 'react-router-dom';
 
-import {
+import { FormattedMessage as T, FFormGroup, FTextArea } from '@/components';
-  FieldRequiredHint,
-  FormattedMessage as T,
-  FFormGroup,
-  FTextArea,
-} from '@/components';
 
 /**
  * Preferences estimates form.
@@ -24,21 +19,6 @@ export function PreferencesCreditNotesForm({ isSubmitting }) {
 
   return (
     <Form>
-      {/* ---------- Terms & Conditions ----------  */}
-      <FFormGroup
-        name={'termsConditions'}
-        label={<T id={'pref.creditNotes.termsConditions.field'} />}
-        labelInfo={<FieldRequiredHint />}
-        fastField={true}
-      >
-        <FTextArea
-          medium={'true'}
-          name={'termsConditions'}
-          fastField={true}
-          fill={true}
-        />
-      </FFormGroup>
-
       {/* ---------- Customer Notes ----------  */}
       <FFormGroup
         name={'customerNotes'}
@@ -47,7 +27,21 @@ export function PreferencesCreditNotesForm({ isSubmitting }) {
       >
         <FTextArea
           medium={'true'}
-          name={'tax_number'}
+          name={'customerNotes'}
+          fastField={true}
+          fill={true}
+        />
+      </FFormGroup>
+
+      {/* ---------- Terms & Conditions ----------  */}
+      <FFormGroup
+        name={'termsConditions'}
+        label={<T id={'pref.creditNotes.termsConditions.field'} />}
+        fastField={true}
+      >
+        <FTextArea
+          medium={'true'}
+          name={'termsConditions'}
           fastField={true}
           fill={true}
         />

packages/webapp/src/containers/Preferences/CreditNotes/PreferencesCreditNotesFormPage.tsx

@@ -1,16 +1,19 @@
 // @ts-nocheck
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import intl from 'react-intl-universal';
 import { Formik } from 'formik';
+import * as R from 'ramda';
 import { Intent } from '@blueprintjs/core';
 
 import { AppToaster } from '@/components';
 import { PreferencesCreditNotesFormSchema } from './PreferencesCreditNotesForm.schema';
-import { usePreferencesCreditNotesFormContext } from './PreferencesCreditNotesFormBoot';
 import { PreferencesCreditNotesForm } from './PreferencesCreditNotesForm';
 import withDashboardActions from '@/containers/Dashboard/withDashboardActions';
 
-import { compose, transformToForm } from '@/utils';
+import { compose, transformToForm, transfromToSnakeCase } from '@/utils';
+import withSettings from '@/containers/Settings/withSettings';
+import { transferObjectOptionsToArray } from '../Accountant/utils';
+import { useSaveSettings } from '@/hooks/query';
 
 const defaultValues = {
   termsConditions: '',
@@ -23,8 +26,12 @@ const defaultValues = {
 function PreferencesCreditNotesFormPageRoot({
   // #withDashboardActions
   changePreferencesPageTitle,
+
+  // #withSettings
+  creditNoteSettings,
 }) {
-  const { organization } = usePreferencesCreditNotesFormContext();
+  // Save settings.
+  const { mutateAsync: saveSettingMutate } = useSaveSettings();
 
   useEffect(() => {
     changePreferencesPageTitle(intl.get('preferences.creditNotes'));
@@ -33,14 +40,19 @@ function PreferencesCreditNotesFormPageRoot({
   // Initial values.
   const initialValues = {
     ...defaultValues,
-    ...transformToForm(organization.metadata, defaultValues),
+    ...transformToForm(creditNoteSettings, defaultValues),
   };
   // Handle the form submit.
   const handleFormSubmit = (values, { setSubmitting }) => {
+    const options = R.compose(
+      transferObjectOptionsToArray,
+      transfromToSnakeCase,
+    )({ creditNote: { ...values } });
+
     // Handle request success.
-    const onSuccess = (response) => {
+    const onSuccess = () => {
       AppToaster.show({
-        message: intl.get('preferences.estimates.success_message'),
+        message: intl.get('preferences.credit_notes.success_message'),
         intent: Intent.SUCCESS,
       });
       setSubmitting(false);
@@ -49,9 +61,7 @@ function PreferencesCreditNotesFormPageRoot({
     const onError = () => {
       setSubmitting(false);
     };
-    // updateOrganization({ ...values })
+    saveSettingMutate({ options }).then(onSuccess).catch(onError);
-    //   .then(onSuccess)
-    //   .catch(onError);
   };
 
   return (
@@ -64,6 +74,9 @@ function PreferencesCreditNotesFormPageRoot({
   );
 }
 
-export const PreferencesCreditNotesFormPage = compose(withDashboardActions)(
+export const PreferencesCreditNotesFormPage = compose(
-  PreferencesCreditNotesFormPageRoot,
+  withDashboardActions,
-);
+  withSettings(({ creditNoteSettings }) => ({
+    creditNoteSettings: creditNoteSettings,
+  })),
+)(PreferencesCreditNotesFormPageRoot);

packages/webapp/src/containers/Preferences/Estimates/PreferencesEstimatesForm.tsx

@@ -4,12 +4,7 @@ import { Form } from 'formik';
 import { Button, Intent } from '@blueprintjs/core';
 import { useHistory } from 'react-router-dom';
 
-import {
+import { FormattedMessage as T, FFormGroup, FTextArea } from '@/components';
-  FieldRequiredHint,
-  FormattedMessage as T,
-  FFormGroup,
-  FTextArea,
-} from '@/components';
 
 /**
  * Preferences estimates form.
@@ -24,21 +19,6 @@ export function PreferencesEstimatesForm({ isSubmitting }) {
 
   return (
     <Form>
-      {/* ---------- Terms & Conditions ----------  */}
-      <FFormGroup
-        name={'termsConditions'}
-        label={<T id={'pref.estimates.termsConditions.field'} />}
-        labelInfo={<FieldRequiredHint />}
-        fastField={true}
-      >
-        <FTextArea
-          medium={'true'}
-          name={'termsConditions'}
-          fastField={true}
-          fill={true}
-        />
-      </FFormGroup>
-
       {/* ---------- Customer Notes ----------  */}
       <FFormGroup
         name={'customerNotes'}
@@ -47,7 +27,21 @@ export function PreferencesEstimatesForm({ isSubmitting }) {
       >
         <FTextArea
           medium={'true'}
-          name={'tax_number'}
+          name={'customerNotes'}
+          fastField={true}
+          fill={true}
+        />
+      </FFormGroup>
+
+      {/* ---------- Terms & Conditions ----------  */}
+      <FFormGroup
+        name={'termsConditions'}
+        label={<T id={'pref.estimates.termsConditions.field'} />}
+        fastField={true}
+      >
+        <FTextArea
+          medium={'true'}
+          name={'termsConditions'}
           fastField={true}
           fill={true}
         />

packages/webapp/src/containers/Preferences/Estimates/PreferencesEstimatesFormBoot.tsx

@@ -4,6 +4,8 @@ import classNames from 'classnames';
 import { CLASSES } from '@/constants/classes';
 import { useSettings } from '@/hooks/query';
 import PreferencesPageLoader from '../PreferencesPageLoader';
+import styled from 'styled-components';
+import { Card } from '@/components';
 
 const PreferencesEstimatesFormContext = React.createContext();
 
@@ -13,9 +15,8 @@ function PreferencesEstimatesBoot({ ...props }) {
 
   // Provider state.
   const provider = {
-    organization: {},
+    isSettingsLoading,
   };
-
   // Detarmines whether if any query is loading.
   const isLoading = isSettingsLoading;
 
@@ -26,11 +27,16 @@ function PreferencesEstimatesBoot({ ...props }) {
         CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT_ACCOUNTANT,
       )}
     >
-      {isLoading ? (
+      <PreferencesEstimatesCard>
-        <PreferencesPageLoader />
+        {isLoading ? (
-      ) : (
+          <PreferencesPageLoader />
-        <PreferencesEstimatesFormContext.Provider value={provider} {...props} />
+        ) : (
-      )}
+          <PreferencesEstimatesFormContext.Provider
+            value={provider}
+            {...props}
+          />
+        )}
+      </PreferencesEstimatesCard>
     </div>
   );
 }
@@ -38,4 +44,12 @@ function PreferencesEstimatesBoot({ ...props }) {
 const usePreferencesEstimatesFormContext = () =>
   React.useContext(PreferencesEstimatesFormContext);
 
+const PreferencesEstimatesCard = styled(Card)`
+  padding: 25px;
+
+  .bp4-form-group {
+    max-width: 600px;
+  }
+`;
+
 export { PreferencesEstimatesBoot, usePreferencesEstimatesFormContext };

packages/webapp/src/containers/Preferences/Estimates/PreferencesEstimatesFormPage.tsx

@@ -3,14 +3,16 @@ import React, { useEffect } from 'react';
 import intl from 'react-intl-universal';
 import { Formik } from 'formik';
 import { Intent } from '@blueprintjs/core';
+import * as R from 'ramda';
 
 import { AppToaster } from '@/components';
 import { PreferencesEstimatesFormSchema } from './PreferencesEstimatesForm.schema';
-import { usePreferencesEstimatesFormContext } from './PreferencesEstimatesFormBoot';
 import { PreferencesEstimatesForm } from './PreferencesEstimatesForm';
 import withDashboardActions from '@/containers/Dashboard/withDashboardActions';
 
-import { compose, transformToForm } from '@/utils';
+import { transferObjectOptionsToArray } from '../Accountant/utils';
+import { compose, transformToForm, transfromToSnakeCase } from '@/utils';
+import { useSaveSettings } from '@/hooks/query';
 
 const defaultValues = {
   termsConditions: '',
@@ -23,8 +25,12 @@ const defaultValues = {
 function PreferencesEstimatesFormPageRoot({
   // #withDashboardActions
   changePreferencesPageTitle,
+
+  // #withSettings
+  estimatesSettings,
 }) {
-  const { organization } = usePreferencesEstimatesFormContext();
+  // Save Organization Settings.
+  const { mutateAsync: saveSettingMutate } = useSaveSettings();
 
   useEffect(() => {
     changePreferencesPageTitle(intl.get('preferences.estimates'));
@@ -33,10 +39,15 @@ function PreferencesEstimatesFormPageRoot({
   // Initial values.
   const initialValues = {
     ...defaultValues,
-    ...transformToForm(organization.metadata, defaultValues),
+    ...transformToForm(estimatesSettings, defaultValues),
   };
   // Handle the form submit.
   const handleFormSubmit = (values, { setSubmitting }) => {
+    const options = R.compose(
+      transferObjectOptionsToArray,
+      transfromToSnakeCase,
+    )({ salesEstimates: { ...values } });
+
     // Handle request success.
     const onSuccess = (response) => {
       AppToaster.show({
@@ -49,9 +60,7 @@ function PreferencesEstimatesFormPageRoot({
     const onError = () => {
       setSubmitting(false);
     };
-    // updateOrganization({ ...values })
+    saveSettingMutate({ options }).then(onSuccess).catch(onError);
-    //   .then(onSuccess)
-    //   .catch(onError);
   };
 
   return (
@@ -64,6 +73,9 @@ function PreferencesEstimatesFormPageRoot({
   );
 }
 
-export const PreferencesEstimatesFormPage = compose(withDashboardActions)(
+export const PreferencesEstimatesFormPage = compose(
-  PreferencesEstimatesFormPageRoot,
+  withDashboardActions,
-);
+  withSettings(({ estimatesSettings }) => ({
+    estimatesSettings: estimatesSettings,
+  })),
+)(PreferencesEstimatesFormPageRoot);

packages/webapp/src/containers/Preferences/Invoices/PreferencesInvoiceFormBoot.tsx

@@ -15,7 +15,7 @@ function PreferencesInvoicesBoot({ ...props }) {
 
   // Provider state.
   const provider = {
-    organization: {},
+    isSettingsLoading
   };
 
   // Detarmines whether if any query is loading.

packages/webapp/src/containers/Preferences/Invoices/PreferencesInvoiceFormPage.tsx

@@ -3,14 +3,17 @@ import React, { useEffect } from 'react';
 import intl from 'react-intl-universal';
 import { Formik } from 'formik';
 import { Intent } from '@blueprintjs/core';
+import * as R from 'ramda';
 
 import { AppToaster } from '@/components';
 import { PreferencesInvoiceFormSchema } from './PreferencesInvoiceForm.schema';
-import { usePreferencesInvoiceFormContext } from './PreferencesInvoiceFormBoot';
 import { PreferencesInvoicesForm } from './PreferencesInvoicesForm';
 import withDashboardActions from '@/containers/Dashboard/withDashboardActions';
 
-import { compose, transformToForm } from '@/utils';
+import { compose, transformToForm, transfromToSnakeCase } from '@/utils';
+import withSettings from '@/containers/Settings/withSettings';
+import { transferObjectOptionsToArray } from '../Accountant/utils';
+import { useSaveSettings } from '@/hooks/query';
 
 const defaultValues = {
   termsConditions: '',
@@ -23,8 +26,12 @@ const defaultValues = {
 function PreferencesInvoiceFormPage({
   // #withDashboardActions
   changePreferencesPageTitle,
+
+  // #withSettings
+  invoiceSettings,
 }) {
-  const { organization } = usePreferencesInvoiceFormContext();
+  // Save settings.
+  const { mutateAsync: saveSettingMutate } = useSaveSettings();
 
   useEffect(() => {
     changePreferencesPageTitle(intl.get('preferences.invoices'));
@@ -33,12 +40,17 @@ function PreferencesInvoiceFormPage({
   // Initial values.
   const initialValues = {
     ...defaultValues,
-    ...transformToForm(organization.metadata, defaultValues),
+    ...transformToForm(invoiceSettings, defaultValues),
   };
   // Handle the form submit.
   const handleFormSubmit = (values, { setSubmitting }) => {
+    const options = R.compose(
+      transferObjectOptionsToArray,
+      transfromToSnakeCase,
+    )({ salesInvoices: { ...values } });
+
     // Handle request success.
-    const onSuccess = (response) => {
+    const onSuccess = () => {
       AppToaster.show({
         message: intl.get('preferences.invoices.success_message'),
         intent: Intent.SUCCESS,
@@ -49,9 +61,7 @@ function PreferencesInvoiceFormPage({
     const onError = () => {
       setSubmitting(false);
     };
-    // updateOrganization({ ...values })
+    saveSettingMutate({ options }).then(onSuccess).catch(onError);
-    //   .then(onSuccess)
-    //   .catch(onError);
   };
 
   return (
@@ -64,4 +74,9 @@ function PreferencesInvoiceFormPage({
   );
 }
 
-export default compose(withDashboardActions)(PreferencesInvoiceFormPage);
+export default compose(
+  withDashboardActions,
+  withSettings(({ invoiceSettings }) => ({
+    invoiceSettings: invoiceSettings,
+  })),
+)(PreferencesInvoiceFormPage);

packages/webapp/src/containers/Preferences/Invoices/PreferencesInvoicesForm.tsx

@@ -4,11 +4,7 @@ import { Form } from 'formik';
 import { Button, Intent } from '@blueprintjs/core';
 import { useHistory } from 'react-router-dom';
 
-import {
+import { FormattedMessage as T, FFormGroup, FTextArea } from '@/components';
-  FormattedMessage as T,
-  FFormGroup,
-  FTextArea,
-} from '@/components';
 
 /**
  * Preferences general form.
@@ -23,6 +19,20 @@ export function PreferencesInvoicesForm({ isSubmitting }) {
 
   return (
     <Form>
+      {/* ---------- Customer Notes ----------  */}
+      <FFormGroup
+        name={'customerNotes'}
+        label={<T id={'pref.invoices.customerNotes.field'} />}
+        fastField={true}
+      >
+        <FTextArea
+          medium={'true'}
+          name={'customerNotes'}
+          fastField={true}
+          fill={true}
+        />
+      </FFormGroup>
+
       {/* ---------- Terms & Conditions ----------  */}
       <FFormGroup
         name={'termsConditions'}
@@ -37,20 +47,6 @@ export function PreferencesInvoicesForm({ isSubmitting }) {
         />
       </FFormGroup>
 
-      {/* ---------- Customer Notes ----------  */}
-      <FFormGroup
-        name={'customerNotes'}
-        label={<T id={'pref.invoices.customerNotes.field'} />}
-        fastField={true}
-      >
-        <FTextArea
-          medium={'true'}
-          name={'tax_number'}
-          fastField={true}
-          fill={true}
-        />
-      </FFormGroup>
-
       <CardFooterActions>
         <Button loading={isSubmitting} intent={Intent.PRIMARY} type="submit">
           <T id={'save'} />

packages/webapp/src/containers/Preferences/Receipts/PreferencesReceiptsForm.tsx

@@ -4,11 +4,7 @@ import { Form } from 'formik';
 import { Button, Intent } from '@blueprintjs/core';
 import { useHistory } from 'react-router-dom';
 
-import {
+import { FormattedMessage as T, FFormGroup, FTextArea } from '@/components';
-  FormattedMessage as T,
-  FFormGroup,
-  FTextArea,
-} from '@/components';
 
 /**
  * Preferences general form.
@@ -23,6 +19,20 @@ export function PreferencesReceiptsForm({ isSubmitting }) {
 
   return (
     <Form>
+      {/* ---------- Customer Notes ----------  */}
+      <FFormGroup
+        name={'receiptMessage'}
+        label={<T id={'pref.receipts.receiptMessage.field'} />}
+        fastField={true}
+      >
+        <FTextArea
+          medium={'true'}
+          name={'receiptMessage'}
+          fastField={true}
+          fill={true}
+        />
+      </FFormGroup>
+
       {/* ---------- Terms & Conditions ----------  */}
       <FFormGroup
         name={'termsConditions'}
@@ -37,20 +47,6 @@ export function PreferencesReceiptsForm({ isSubmitting }) {
         />
       </FFormGroup>
 
-      {/* ---------- Customer Notes ----------  */}
-      <FFormGroup
-        name={'customerNotes'}
-        label={<T id={'pref.receipts.customerNotes.field'} />}
-        fastField={true}
-      >
-        <FTextArea
-          medium={'true'}
-          name={'tax_number'}
-          fastField={true}
-          fill={true}
-        />
-      </FFormGroup>
-
       <CardFooterActions>
         <Button loading={isSubmitting} intent={Intent.PRIMARY} type="submit">
           <T id={'save'} />

packages/webapp/src/containers/Preferences/Receipts/PreferencesReceiptsFormBoot.tsx

@@ -15,7 +15,7 @@ function PreferencesReceiptsBoot({ ...props }) {
 
   // Provider state.
   const provider = {
-    organization: {},
+    isSettingsLoading,
   };
 
   // Detarmines whether if any query is loading.

packages/webapp/src/containers/Preferences/Receipts/PreferencesReceiptsFormPage.tsx

@@ -3,18 +3,21 @@ import React, { useEffect } from 'react';
 import intl from 'react-intl-universal';
 import { Formik } from 'formik';
 import { Intent } from '@blueprintjs/core';
+import * as R from 'ramda';
 
 import { AppToaster } from '@/components';
 import { PreferencesReceiptsFormSchema } from './PreferencesReceiptsForm.schema';
-import { usePreferencesReceiptsFormContext } from './PreferencesReceiptsFormBoot';
 import { PreferencesReceiptsForm } from './PreferencesReceiptsForm';
 import withDashboardActions from '@/containers/Dashboard/withDashboardActions';
 
-import { compose, transformToForm } from '@/utils';
+import { compose, transformToForm, transfromToSnakeCase } from '@/utils';
+import withSettings from '@/containers/Settings/withSettings';
+import { useSaveSettings } from '@/hooks/query';
+import { transferObjectOptionsToArray } from '../Accountant/utils';
 
 const defaultValues = {
   termsConditions: '',
-  customerNotes: '',
+  receiptMessage: '',
 };
 
 /**
@@ -23,8 +26,12 @@ const defaultValues = {
 function PreferencesReceiptsFormPageRoot({
   // #withDashboardActions
   changePreferencesPageTitle,
+
+  // #withSettings
+  receiptSettings,
 }) {
-  const { organization } = usePreferencesReceiptsFormContext();
+  // Save settings.
+  const { mutateAsync: saveSettingMutate } = useSaveSettings();
 
   useEffect(() => {
     changePreferencesPageTitle(intl.get('preferences.receipts'));
@@ -33,12 +40,17 @@ function PreferencesReceiptsFormPageRoot({
   // Initial values.
   const initialValues = {
     ...defaultValues,
-    ...transformToForm(organization.metadata, defaultValues),
+    ...transformToForm(receiptSettings, defaultValues),
   };
   // Handle the form submit.
   const handleFormSubmit = (values, { setSubmitting }) => {
+    const options = R.compose(
+      transferObjectOptionsToArray,
+      transfromToSnakeCase,
+    )({ salesReceipts: { ...values } });
+
     // Handle request success.
-    const onSuccess = (response) => {
+    const onSuccess = () => {
       AppToaster.show({
         message: intl.get('preferences.receipts.success_message'),
         intent: Intent.SUCCESS,
@@ -49,9 +61,7 @@ function PreferencesReceiptsFormPageRoot({
     const onError = () => {
       setSubmitting(false);
     };
-    // updateOrganization({ ...values })
+    saveSettingMutate({ options }).then(onSuccess).catch(onError);
-    //   .then(onSuccess)
-    //   .catch(onError);
   };
 
   return (
@@ -64,6 +74,9 @@ function PreferencesReceiptsFormPageRoot({
   );
 }
 
-export const PreferencesReceiptsFormPage = compose(withDashboardActions)(
+export const PreferencesReceiptsFormPage = compose(
-  PreferencesReceiptsFormPageRoot,
+  withDashboardActions,
-);
+  withSettings(({ receiptSettings }) => ({
+    receiptSettings: receiptSettings,
+  })),
+)(PreferencesReceiptsFormPageRoot);

packages/webapp/src/lang/en/index.json

@@ -2302,10 +2302,15 @@
   "pref.estimates.customerNotes.field": "Customer Notes",
 
   "pref.receipts.termsConditions.field": "Terms & Conditions",
-  "pref.receipts.customerNotes.field": "Customer Notes",
+  "pref.receipts.receiptMessage.field": "Receipt Message",
 
   "preferences.invoices": "Invoices",
   "preferences.estimates": "Estimates",
   "preferences.creditNotes": "Credit Notes",
-  "preferences.receipts": "Receipts"
+  "preferences.receipts": "Receipts",
+
+  "preferences.estimates.success_message": "The preferences have been saved successfully.",
+  "preferences.credit_notes.success_message": "The preferences have been saved successfully.",
+  "preferences.receipts.success_message": "The preferences have been saved successfully.",
+  "preferences.invoices.success_message": "The preferences have been saved successfully."
 }