From ac99a6ca75073b0dba43c1bd6abecb67fd5a709c Mon Sep 17 00:00:00 2001
From: elforjani13 <39470382+elforjani13@users.noreply.github.com>
Date: Mon, 6 Dec 2021 16:28:42 +0200
Subject: [PATCH] feat: add status & opened alert in credit & vendor.

---
 .../CreditNotes/CreditNoteOpenedAlert.js      |  68 +++++++
 .../VendorCreditOpenedAlert.js                |  69 +++++++
 .../RefundCreditNoteForm.js                   |   2 +-
 .../RefundCreditNoteFormProvider.js           |   4 +-
 .../RefundVendorCreditForm.js                 |   2 +-
 .../RefundVendorCreditFormProvider.js         |   4 +-
 .../CreditNoteDetailActionsBar.js             |  28 +--
 .../VendorCreditDetailActionsBar.js           |  28 +--
 .../VendorCreditNoteFloatingActions.js        | 181 ++++++++++--------
 .../CreditNoteForm/VendorCreditNoteForm.js    |   1 +
 .../VendorCreditNoteForm.schema.js            |   1 +
 .../CreditNotes/CreditNoteForm/utils.js       |   4 +-
 .../VendorsCreditNoteDataTable.js             |   5 +
 .../CreditNotesLanding/components.js          |  66 +++++--
 .../CreditNotes/VendorCreditNotesAlerts.js    |   8 +
 .../CreditNoteFloatingActions.js              | 180 +++++++++--------
 .../CreditNoteForm/CreditNoteForm.js          |   1 +
 .../CreditNoteForm/CreditNoteForm.schema.js   |   1 +
 .../Sales/CreditNotes/CreditNoteForm/utils.js |   8 +-
 .../Sales/CreditNotes/CreditNotesAlerts.js    |   8 +
 .../CreditNotesDataTable.js                   |   6 +
 .../CreditNotesLanding/components.js          |  67 +++++--
 src/hooks/query/creditNote.js                 |  19 ++
 src/hooks/query/vendorCredit.js               |  22 +++
 src/lang/en/index.json                        |   6 +-
 25 files changed, 567 insertions(+), 222 deletions(-)
 create mode 100644 src/containers/Alerts/CreditNotes/CreditNoteOpenedAlert.js
 create mode 100644 src/containers/Alerts/VendorCeditNotes/VendorCreditOpenedAlert.js

diff --git a/src/containers/Alerts/CreditNotes/CreditNoteOpenedAlert.js b/src/containers/Alerts/CreditNotes/CreditNoteOpenedAlert.js
new file mode 100644
index 000000000..58b9e8554
--- /dev/null
+++ b/src/containers/Alerts/CreditNotes/CreditNoteOpenedAlert.js
@@ -0,0 +1,68 @@
+import React from 'react';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
+import { Intent, Alert } from '@blueprintjs/core';
+
+import { useOpenCreditNote } from 'hooks/query';
+import { AppToaster } from 'components';
+
+import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+import withAlertActions from 'containers/Alert/withAlertActions';
+
+import { compose } from 'utils';
+
+/**
+ * Credit note opened alert.
+ */
+function CreditNoteOpenedAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { creditNoteId },
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  const { mutateAsync: openCreditNoteMutate, isLoading } = useOpenCreditNote();
+
+  // Handle cancel opened credit note alert.
+  const handleAlertCancel = () => {
+    closeAlert(name);
+  };
+
+  // Handle confirm credit note opened.
+  const handleAlertConfirm = () => {
+    openCreditNoteMutate(creditNoteId)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('credit_note_opened.alert.success_message'),
+          intent: Intent.SUCCESS,
+        });
+      })
+      .catch((error) => {})
+      .finally(() => {
+        closeAlert(name);
+      });
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'open'} />}
+      intent={Intent.WARNING}
+      isOpen={isOpen}
+      onCancel={handleAlertCancel}
+      onConfirm={handleAlertConfirm}
+      loading={isLoading}
+    >
+      <p>
+        <T id={'credit_note_opened.are_sure_to_open_this_credit'} />
+      </p>
+    </Alert>
+  );
+}
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+)(CreditNoteOpenedAlert);
diff --git a/src/containers/Alerts/VendorCeditNotes/VendorCreditOpenedAlert.js b/src/containers/Alerts/VendorCeditNotes/VendorCreditOpenedAlert.js
new file mode 100644
index 000000000..56c0fe5bf
--- /dev/null
+++ b/src/containers/Alerts/VendorCeditNotes/VendorCreditOpenedAlert.js
@@ -0,0 +1,69 @@
+import React from 'react';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
+import { Intent, Alert } from '@blueprintjs/core';
+
+import { useOpenVendorCredit } from 'hooks/query';
+import { AppToaster } from 'components';
+
+import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+import withAlertActions from 'containers/Alert/withAlertActions';
+
+import { compose } from 'utils';
+
+/**
+ *  Vendor credit opened alert.
+ */
+function VendorCreditOpenedAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { vendorCreditId },
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  const { mutateAsync: openVendorCreditMutate, isLoading } =
+    useOpenVendorCredit();
+
+  // Handle cancel opened credit note alert.
+  const handleAlertCancel = () => {
+    closeAlert(name);
+  };
+
+  // Handle confirm  vendor credit as opened.
+  const handleAlertConfirm = () => {
+    openVendorCreditMutate(vendorCreditId)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('vendor_credit_opened.alert.success_message'),
+          intent: Intent.SUCCESS,
+        });
+      })
+      .catch((error) => {})
+      .finally(() => {
+        closeAlert(name);
+      });
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'open'} />}
+      intent={Intent.WARNING}
+      isOpen={isOpen}
+      onCancel={handleAlertCancel}
+      onConfirm={handleAlertConfirm}
+      loading={isLoading}
+    >
+      <p>
+        <T id={'vendor_credit_opened.are_sure_to_open_this_credit'} />
+      </p>
+    </Alert>
+  );
+}
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+)(VendorCreditOpenedAlert);
diff --git a/src/containers/Dialogs/RefundCreditNoteDialog/RefundCreditNoteForm.js b/src/containers/Dialogs/RefundCreditNoteDialog/RefundCreditNoteForm.js
index d717dc0d0..05600768f 100644
--- a/src/containers/Dialogs/RefundCreditNoteDialog/RefundCreditNoteForm.js
+++ b/src/containers/Dialogs/RefundCreditNoteDialog/RefundCreditNoteForm.js
@@ -41,7 +41,7 @@ function RefundCreditNoteForm({
   // Handles the form submit.
   const handleFormSubmit = (values, { setSubmitting, setFieldError }) => {
     const form = {
-      ...omit(values, ['currency_code', 'formatted_amount']),
+      ...omit(values, ['currency_code', 'credits_remaining']),
     };
 
     // Handle request response success.
diff --git a/src/containers/Dialogs/RefundCreditNoteDialog/RefundCreditNoteFormProvider.js b/src/containers/Dialogs/RefundCreditNoteDialog/RefundCreditNoteFormProvider.js
index 596bd4dd0..978421272 100644
--- a/src/containers/Dialogs/RefundCreditNoteDialog/RefundCreditNoteFormProvider.js
+++ b/src/containers/Dialogs/RefundCreditNoteDialog/RefundCreditNoteFormProvider.js
@@ -31,8 +31,8 @@ function RefundCreditNoteFormProvider({ creditNoteId, dialogName, ...props }) {
   // State provider.
   const provider = {
     creditNote: {
-      ...pick(creditNote, ['id', 'formatted_amount', 'currency_code']),
-      amount: creditNote.formatted_amount,
+      ...pick(creditNote, ['id', 'credits_remaining', 'currency_code']),
+      amount: creditNote.credits_remaining,
     },
     accounts,
     dialogName,
diff --git a/src/containers/Dialogs/RefundVendorCreditDialog/RefundVendorCreditForm.js b/src/containers/Dialogs/RefundVendorCreditDialog/RefundVendorCreditForm.js
index 048c3beb5..0882a4dd8 100644
--- a/src/containers/Dialogs/RefundVendorCreditDialog/RefundVendorCreditForm.js
+++ b/src/containers/Dialogs/RefundVendorCreditDialog/RefundVendorCreditForm.js
@@ -41,7 +41,7 @@ function RefundVendorCreditForm({
   // Handles the form submit.
   const handleFormSubmit = (values, { setSubmitting, setFieldError }) => {
     const form = {
-      ...omit(values, ['currency_code', 'formatted_amount']),
+      ...omit(values, ['currency_code', 'credits_remaining']),
     };
 
     // Handle request response success.
diff --git a/src/containers/Dialogs/RefundVendorCreditDialog/RefundVendorCreditFormProvider.js b/src/containers/Dialogs/RefundVendorCreditDialog/RefundVendorCreditFormProvider.js
index c9cb6e779..0f97aa814 100644
--- a/src/containers/Dialogs/RefundVendorCreditDialog/RefundVendorCreditFormProvider.js
+++ b/src/containers/Dialogs/RefundVendorCreditDialog/RefundVendorCreditFormProvider.js
@@ -31,8 +31,8 @@ function RefundVendorCreditFormProvider({
   // State provider.
   const provider = {
     vendorCredit: {
-      ...pick(vendorCredit, ['id', 'formatted_amount', 'currency_code']),
-      amount: vendorCredit.formatted_amount,
+      ...pick(vendorCredit, ['id', 'credits_remaining', 'currency_code']),
+      amount: vendorCredit.credits_remaining,
     },
     accounts,
     dialogName,
diff --git a/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailActionsBar.js b/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailActionsBar.js
index b6e876638..dbe27e0c1 100644
--- a/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailActionsBar.js
+++ b/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailActionsBar.js
@@ -15,7 +15,13 @@ import withDialogActions from 'containers/Dialog/withDialogActions';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
-import { Icon, FormattedMessage as T, MoreMenuItems, Can } from 'components';
+import {
+  Icon,
+  FormattedMessage as T,
+  If,
+  MoreMenuItems,
+  Can,
+} from 'components';
 
 import { compose } from 'utils';
 
@@ -32,7 +38,7 @@ function CreditNoteDetailActionsBar({
   // #withDrawerActions
   closeDrawer,
 }) {
-  const { creditNoteId } = useCreditNoteDetailDrawerContext();
+  const { creditNoteId, creditNote } = useCreditNoteDetailDrawerContext();
 
   const history = useHistory();
 
@@ -61,15 +67,15 @@ function CreditNoteDetailActionsBar({
           onClick={handleEditCreditNote}
         />
         <NavbarDivider />
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon="quick-payment-16" iconSize={16} />}
-          text={'Refund'}
-          // text={<T id={'add_payment'} />}
-          onClick={handleRefundCreditNote}
-        />
-        <NavbarDivider />
-
+        <If condition={!creditNote.is_closed && !creditNote.is_draft}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon="quick-payment-16" iconSize={16} />}
+            text={<T id={'refund'} />}
+            onClick={handleRefundCreditNote}
+          />
+          <NavbarDivider />
+        </If>
         <Button
           className={Classes.MINIMAL}
           icon={<Icon icon={'trash-16'} iconSize={16} />}
diff --git a/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailActionsBar.js b/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailActionsBar.js
index d2cfdead2..d51ab8a92 100644
--- a/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailActionsBar.js
+++ b/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailActionsBar.js
@@ -15,7 +15,7 @@ import withDialogActions from 'containers/Dialog/withDialogActions';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
-import { Icon, FormattedMessage as T, Can } from 'components';
+import { If, Icon, FormattedMessage as T, Can } from 'components';
 
 import { compose } from 'utils';
 
@@ -32,7 +32,7 @@ function VendorCreditDetailActionsBar({
   // #withDrawerActions
   closeDrawer,
 }) {
-  const { vendorCreditId } = useVendorCreditDetailDrawerContext();
+  const { vendorCreditId, vendorCredit } = useVendorCreditDetailDrawerContext();
 
   const history = useHistory();
 
@@ -42,14 +42,15 @@ function VendorCreditDetailActionsBar({
     closeDrawer('vendor-credit-detail-drawer');
   };
 
-  const handleRefundVendorCredit = () => {
-    openDialog('refund-vendor-credit', { vendorCreditId });
-  };
   // Handle delete credit note.
   const handleDeleteVendorCredit = () => {
     openAlert('vendor-credit-delete', { vendorCreditId });
   };
 
+  const handleRefundVendorCredit = () => {
+    openDialog('refund-vendor-credit', { vendorCreditId });
+  };
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -60,14 +61,15 @@ function VendorCreditDetailActionsBar({
           onClick={handleEditVendorCredit}
         />
         <NavbarDivider />
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon="quick-payment-16" iconSize={16} />}
-          text={'Refund'}
-          // text={<T id={'add_payment'} />}
-          onClick={handleRefundVendorCredit}
-        />
-        <NavbarDivider />
+        <If condition={!vendorCredit.is_closed && !vendorCredit.is_draft}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon="quick-payment-16" iconSize={16} />}
+            text={<T id={'refund'} />}
+            onClick={handleRefundVendorCredit}
+          />
+          <NavbarDivider />
+        </If>
         <Button
           className={Classes.MINIMAL}
           icon={<Icon icon={'trash-16'} iconSize={16} />}
diff --git a/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFloatingActions.js b/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFloatingActions.js
index d831d0666..0d2c7a72b 100644
--- a/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFloatingActions.js
+++ b/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFloatingActions.js
@@ -26,35 +26,39 @@ export default function VendorCreditNoteFloatingActions() {
   const { resetForm, submitForm, isSubmitting } = useFormikContext();
 
   // Credit note form context.
-  const { setSubmitPayload, isNewMode } = useVendorCreditNoteFormContext();
-
-  // Handle submit, save and anothe new button click.
-  const handleSubmitAndNewBtnClick = (event) => {
-    setSubmitPayload({ redirect: false, status: true, resetForm: true });
+  const { setSubmitPayload, vendorCredit } = useVendorCreditNoteFormContext();
+  // Handle submit as open button click.
+  const handleSubmitOpenBtnClick = (event) => {
+    setSubmitPayload({ redirect: true, open: true });
     submitForm();
   };
 
-  // Handle submit as save & continue editing button click.
-  const handleSubmitSaveContinueEditingBtnClick = (event) => {
-    setSubmitPayload({ redirect: false, status: true });
+  // Handle submit, open and anothe new button click.
+  const handleSubmitOpenAndNewBtnClick = (event) => {
+    setSubmitPayload({ redirect: false, open: true, resetForm: true });
     submitForm();
   };
 
+  // Handle submit as open & continue editing button click.
+  const handleSubmitOpenContinueEditingBtnClick = (event) => {
+    setSubmitPayload({ redirect: false, open: true });
+    submitForm();
+  };
   // Handle submit as draft button click.
   const handleSubmitDraftBtnClick = (event) => {
-    setSubmitPayload({ redirect: true, status: false });
+    setSubmitPayload({ redirect: true, open: false });
     submitForm();
   };
 
   // handle submit as draft & new button click.
   const handleSubmitDraftAndNewBtnClick = (event) => {
-    setSubmitPayload({ redirect: false, status: false, resetForm: true });
+    setSubmitPayload({ redirect: false, open: false, resetForm: true });
     submitForm();
   };
 
   // Handle submit as draft & continue editing button click.
   const handleSubmitDraftContinueEditingBtnClick = (event) => {
-    setSubmitPayload({ redirect: false, status: false });
+    setSubmitPayload({ redirect: false, open: false });
     submitForm();
   };
 
@@ -63,89 +67,114 @@ export default function VendorCreditNoteFloatingActions() {
     history.goBack();
   };
 
-  // Handle submit button click.
-  const handleSubmitBtnClick = (event) => {
-    setSubmitPayload({ redirect: true });
-    submitForm();
-  };
-
   const handleClearBtnClick = (event) => {
     resetForm();
   };
 
   return (
     <div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
-      {/* ----------- Save  ----------- */}
-      <ButtonGroup>
-        <Button
-          disabled={isSubmitting}
-          loading={isSubmitting}
-          intent={Intent.PRIMARY}
-          onClick={handleSubmitBtnClick}
-          text={<T id={'save'} />}
-        />
-
-        <Popover
-          content={
-            <Menu>
-              <MenuItem
-                text={<T id={'save_and_new'} />}
-                onClick={handleSubmitAndNewBtnClick}
-              />
-              <MenuItem
-                text={<T id={'save_continue_editing'} />}
-                onClick={handleSubmitSaveContinueEditingBtnClick}
-              />
-            </Menu>
-          }
-          minimal={true}
-          interactionKind={PopoverInteractionKind.CLICK}
-          position={Position.BOTTOM_LEFT}
-        >
+      {/* ----------- Save And Open  ----------- */}
+      <If condition={!vendorCredit || !vendorCredit?.is_open}>
+        <ButtonGroup>
           <Button
             disabled={isSubmitting}
+            loading={isSubmitting}
             intent={Intent.PRIMARY}
-            rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
+            onClick={handleSubmitOpenBtnClick}
+            text={<T id={'save_open'} />}
           />
-        </Popover>
-      </ButtonGroup>
-      {/* ----------- Save As Draft ----------- */}
-      <ButtonGroup>
-        <Button
-          disabled={isSubmitting}
-          className={'ml1'}
-          onClick={handleSubmitDraftBtnClick}
-          text={<T id={'save_as_draft'} />}
-        />
-        <Popover
-          content={
-            <Menu>
-              <MenuItem
-                text={<T id={'save_and_new'} />}
-                onClick={handleSubmitDraftAndNewBtnClick}
-              />
-              <MenuItem
-                text={<T id={'save_continue_editing'} />}
-                onClick={handleSubmitDraftContinueEditingBtnClick}
-              />
-            </Menu>
-          }
-          minimal={true}
-          interactionKind={PopoverInteractionKind.CLICK}
-          position={Position.BOTTOM_LEFT}
-        >
+          <Popover
+            content={
+              <Menu>
+                <MenuItem
+                  text={<T id={'open_and_new'} />}
+                  onClick={handleSubmitOpenAndNewBtnClick}
+                />
+                <MenuItem
+                  text={<T id={'open_continue_editing'} />}
+                  onClick={handleSubmitOpenContinueEditingBtnClick}
+                />
+              </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>
+        {/* ----------- Save As Draft ----------- */}
+        <ButtonGroup>
           <Button
             disabled={isSubmitting}
-            rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
+            className={'ml1'}
+            onClick={handleSubmitDraftBtnClick}
+            text={<T id={'save_as_draft'} />}
           />
-        </Popover>
-      </ButtonGroup>
+          <Popover
+            content={
+              <Menu>
+                <MenuItem
+                  text={<T id={'save_and_new'} />}
+                  onClick={handleSubmitDraftAndNewBtnClick}
+                />
+                <MenuItem
+                  text={<T id={'save_continue_editing'} />}
+                  onClick={handleSubmitDraftContinueEditingBtnClick}
+                />
+              </Menu>
+            }
+            minimal={true}
+            interactionKind={PopoverInteractionKind.CLICK}
+            position={Position.BOTTOM_LEFT}
+          >
+            <Button
+              disabled={isSubmitting}
+              rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
+            />
+          </Popover>
+        </ButtonGroup>
+      </If>
+      {/* ----------- Save and New ----------- */}
+      <If condition={vendorCredit && vendorCredit?.is_open}>
+        <ButtonGroup>
+          <Button
+            loading={isSubmitting}
+            intent={Intent.PRIMARY}
+            onClick={handleSubmitOpenBtnClick}
+            text={<T id={'save'} />}
+          />
+          <Popover
+            content={
+              <Menu>
+                <MenuItem
+                  text={<T id={'save_and_new'} />}
+                  onClick={handleSubmitOpenAndNewBtnClick}
+                />
+              </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>
+      </If>
       {/* ----------- Clear & Reset----------- */}
       <Button
         className={'ml1'}
         disabled={isSubmitting}
         onClick={handleClearBtnClick}
-        text={isNewMode ? <T id={'reset'} /> : <T id={'clear'} />}
+        text={vendorCredit ? <T id={'reset'} /> : <T id={'clear'} />}
       />
       {/* ----------- Cancel ----------- */}
       <Button
diff --git a/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteForm.js b/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteForm.js
index 05fed2f74..dff4f9571 100644
--- a/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteForm.js
+++ b/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteForm.js
@@ -95,6 +95,7 @@ function VendorCreditNoteForm({
     }
     const form = {
       ...transformFormValuesToRequest(values),
+      open: submitPayload.open,
     };
     // Handle the request success.
     const onSuccess = (response) => {
diff --git a/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteForm.schema.js b/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteForm.schema.js
index d3c5cabe4..aa5e2ffdc 100644
--- a/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteForm.schema.js
+++ b/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteForm.schema.js
@@ -15,6 +15,7 @@ const getSchema = Yup.object().shape({
     .min(1)
     .max(DATATYPES_LENGTH.TEXT)
     .label(intl.get('note')),
+  open: Yup.boolean(),
   entries: Yup.array().of(
     Yup.object().shape({
       quantity: Yup.number()
diff --git a/src/containers/Purchases/CreditNotes/CreditNoteForm/utils.js b/src/containers/Purchases/CreditNotes/CreditNoteForm/utils.js
index 4e2232e70..9add47fe9 100644
--- a/src/containers/Purchases/CreditNotes/CreditNoteForm/utils.js
+++ b/src/containers/Purchases/CreditNotes/CreditNoteForm/utils.js
@@ -33,6 +33,7 @@ export const defaultVendorsCreditNote = {
   vendor_id: '',
   vendor_credit_number: '',
   vendor_credit_no_manually: false,
+  open: '',
   vendor_credit_date: moment(new Date()).format('YYYY-MM-DD'),
   // reference_no: '',
   note: '',
@@ -93,6 +94,7 @@ export const transformFormValuesToRequest = (values) => {
   return {
     ...values,
     entries: transformEntriesToSubmit(entries),
+    open: false,
   };
 };
 
@@ -119,7 +121,7 @@ export const entriesFieldShouldUpdate = (newProps, oldProps) => {
 /**
  * Syncs invoice no. settings with form.
  */
- export const useObserveVendorCreditNoSettings = (prefix, nextNumber) => {
+export const useObserveVendorCreditNoSettings = (prefix, nextNumber) => {
   const { setFieldValue } = useFormikContext();
 
   React.useEffect(() => {
diff --git a/src/containers/Purchases/CreditNotes/CreditNotesLanding/VendorsCreditNoteDataTable.js b/src/containers/Purchases/CreditNotes/CreditNotesLanding/VendorsCreditNoteDataTable.js
index dc2ade068..bc61bb221 100644
--- a/src/containers/Purchases/CreditNotes/CreditNotesLanding/VendorsCreditNoteDataTable.js
+++ b/src/containers/Purchases/CreditNotes/CreditNotesLanding/VendorsCreditNoteDataTable.js
@@ -100,6 +100,10 @@ function VendorsCreditNoteDataTable({
     openDialog('refund-vendor-credit', { vendorCreditId: id });
   };
 
+  // Handle cancel/confirm vendor credit open.
+  const handleOpenCreditNote = ({ id }) => {
+    openAlert('vendor-credit-open', { vendorCreditId: id });
+  };
   return (
     <DashboardContentTable>
       <DataTable
@@ -127,6 +131,7 @@ function VendorsCreditNoteDataTable({
           onDelete: handleDeleteVendorCreditNote,
           onEdit: hanldeEditVendorCreditNote,
           onRefund: handleRefundCreditVendor,
+          onOpen: handleOpenCreditNote,
         }}
       />
     </DashboardContentTable>
diff --git a/src/containers/Purchases/CreditNotes/CreditNotesLanding/components.js b/src/containers/Purchases/CreditNotes/CreditNotesLanding/components.js
index fd4f4adb0..92974bc8b 100644
--- a/src/containers/Purchases/CreditNotes/CreditNotesLanding/components.js
+++ b/src/containers/Purchases/CreditNotes/CreditNotesLanding/components.js
@@ -1,12 +1,5 @@
 import React from 'react';
-import {
-  Intent,
-  Tag,
-  Menu,
-  MenuItem,
-  MenuDivider,
-  ProgressBar,
-} from '@blueprintjs/core';
+import { Intent, Tag, Menu, MenuItem, MenuDivider } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
 import clsx from 'classnames';
 
@@ -14,18 +7,17 @@ import { CLASSES } from '../../../../common/classes';
 import {
   FormatDateCell,
   FormattedMessage as T,
-  AppToaster,
   Choose,
   If,
   Icon,
 } from 'components';
-import { formattedAmount, safeCallback, calculateStatus } from 'utils';
+import { safeCallback } from 'utils';
 
 /**
  * Actions menu.
  */
 export function ActionsMenu({
-  payload: { onEdit, onDelete, onRefund, onViewDetails },
+  payload: { onEdit, onDelete, onOpen, onRefund, onViewDetails },
   row: { original },
 }) {
   return (
@@ -41,11 +33,20 @@ export function ActionsMenu({
         text={intl.get('vendor_credits.action.edit_vendor_credit')}
         onClick={safeCallback(onEdit, original)}
       />
-      <MenuItem
-        icon={<Icon icon="quick-payment-16" />}
-        text={intl.get('vendor_credits.action.refund_vendor_credit')}
-        onClick={safeCallback(onRefund, original)}
-      />
+      <If condition={!original.is_closed && !original.is_draft}>
+        <MenuItem
+          icon={<Icon icon="quick-payment-16" />}
+          text={intl.get('vendor_credits.action.refund_vendor_credit')}
+          onClick={safeCallback(onRefund, original)}
+        />
+      </If>
+      <If condition={original.is_draft}>
+        <MenuItem
+          icon={<Icon icon={'check'} iconSize={18} />}
+          text={intl.get('mark_as_opened')}
+          onClick={safeCallback(onOpen, original)}
+        />
+      </If>
       <MenuItem
         text={intl.get('vendor_credits.action.delete_vendor_credit')}
         intent={Intent.DANGER}
@@ -56,6 +57,35 @@ export function ActionsMenu({
   );
 }
 
+/**
+ * Status accessor.
+ */
+export function StatusAccessor(creditNote) {
+  return (
+    <div>
+      <Choose>
+        <Choose.When condition={creditNote.is_open}>
+          <Tag minimal={true} intent={Intent.WARNING}>
+            <T id={'open'} />
+          </Tag>
+        </Choose.When>
+
+        <Choose.When condition={creditNote.is_closed}>
+          <Tag minimal={true} intent={Intent.SUCCESS}>
+            <T id={'closed'} />
+          </Tag>
+        </Choose.When>
+
+        <Choose.When condition={creditNote.is_draft}>
+          <Tag minimal={true}>
+            <T id={'draft'} />
+          </Tag>
+        </Choose.When>
+      </Choose>
+    </div>
+  );
+}
+
 /**
  * Retrieve vendors credit note table columns.
  */
@@ -103,8 +133,8 @@ export function useVendorsCreditNoteTableColumns() {
       {
         id: 'status',
         Header: intl.get('status'),
-        // accessor:
-        width: 120, // 160
+        accessor: StatusAccessor,
+        width: 160,
         className: 'status',
         clickable: true,
       },
diff --git a/src/containers/Purchases/CreditNotes/VendorCreditNotesAlerts.js b/src/containers/Purchases/CreditNotes/VendorCreditNotesAlerts.js
index 56320a325..9b4ecceba 100644
--- a/src/containers/Purchases/CreditNotes/VendorCreditNotesAlerts.js
+++ b/src/containers/Purchases/CreditNotes/VendorCreditNotesAlerts.js
@@ -8,6 +8,10 @@ const RefundVendorCreditDeleteAlert = React.lazy(() =>
   import('../../Alerts/VendorCeditNotes/RefundVendorCreditDeleteAlert'),
 );
 
+const OpenVendorCreditAlert = React.lazy(() =>
+  import('../../Alerts/VendorCeditNotes/VendorCreditOpenedAlert'),
+);
+
 /**
  * Vendor Credit notes alerts.
  */
@@ -16,6 +20,10 @@ export default [
     name: 'vendor-credit-delete',
     component: VendorCreditDeleteAlert,
   },
+  {
+    name: 'vendor-credit-open',
+    component: OpenVendorCreditAlert,
+  },
   {
     name: 'refund-vendor-delete',
     component: RefundVendorCreditDeleteAlert,
diff --git a/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFloatingActions.js b/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFloatingActions.js
index 727643a7b..db59adfe5 100644
--- a/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFloatingActions.js
+++ b/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFloatingActions.js
@@ -26,35 +26,40 @@ export default function CreditNoteFloatingActions() {
   const { resetForm, submitForm, isSubmitting } = useFormikContext();
 
   // Credit note form context.
-  const { setSubmitPayload, isNewMode } = useCreditNoteFormContext();
+  const { setSubmitPayload, creditNote } = useCreditNoteFormContext();
 
-  // Handle submit, save and anothe new button click.
-  const handleSubmitAndNewBtnClick = (event) => {
-    setSubmitPayload({ redirect: false, status: true, resetForm: true });
+  // Handle submit as open button click.
+  const handleSubmitOpenBtnClick = (event) => {
+    setSubmitPayload({ redirect: true, open: true });
     submitForm();
   };
 
-  // Handle submit as save & continue editing button click.
-  const handleSubmitSaveContinueEditingBtnClick = (event) => {
-    setSubmitPayload({ redirect: false, status: true });
+  // Handle submit, open and anothe new button click.
+  const handleSubmitOpenAndNewBtnClick = (event) => {
+    setSubmitPayload({ redirect: false, open: true, resetForm: true });
     submitForm();
   };
 
+  // Handle submit as open & continue editing button click.
+  const handleSubmitOpenContinueEditingBtnClick = (event) => {
+    setSubmitPayload({ redirect: false, open: true });
+    submitForm();
+  };
   // Handle submit as draft button click.
   const handleSubmitDraftBtnClick = (event) => {
-    setSubmitPayload({ redirect: true, status: false });
+    setSubmitPayload({ redirect: true, open: false   });
     submitForm();
   };
 
   // handle submit as draft & new button click.
   const handleSubmitDraftAndNewBtnClick = (event) => {
-    setSubmitPayload({ redirect: false, status: false, resetForm: true });
+    setSubmitPayload({ redirect: false, open: false, resetForm: true });
     submitForm();
   };
 
   // Handle submit as draft & continue editing button click.
   const handleSubmitDraftContinueEditingBtnClick = (event) => {
-    setSubmitPayload({ redirect: false, status: false });
+    setSubmitPayload({ redirect: false, open: false });
     submitForm();
   };
 
@@ -63,89 +68,114 @@ export default function CreditNoteFloatingActions() {
     history.goBack();
   };
 
-  // Handle submit button click.
-  const handleSubmitBtnClick = (event) => {
-    setSubmitPayload({ redirect: true });
-    submitForm();
-  };
-
   const handleClearBtnClick = (event) => {
     resetForm();
   };
 
   return (
     <div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
-      {/* ----------- Save  ----------- */}
-      <ButtonGroup>
-        <Button
-          disabled={isSubmitting}
-          loading={isSubmitting}
-          intent={Intent.PRIMARY}
-          onClick={handleSubmitBtnClick}
-          text={<T id={'save'} />}
-        />
-
-        <Popover
-          content={
-            <Menu>
-              <MenuItem
-                text={<T id={'save_and_new'} />}
-                onClick={handleSubmitAndNewBtnClick}
-              />
-              <MenuItem
-                text={<T id={'save_continue_editing'} />}
-                onClick={handleSubmitSaveContinueEditingBtnClick}
-              />
-            </Menu>
-          }
-          minimal={true}
-          interactionKind={PopoverInteractionKind.CLICK}
-          position={Position.BOTTOM_LEFT}
-        >
+      {/* ----------- Save And Open  ----------- */}
+      <If condition={!creditNote || !creditNote?.is_open}>
+        <ButtonGroup>
           <Button
             disabled={isSubmitting}
+            loading={isSubmitting}
             intent={Intent.PRIMARY}
-            rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
+            onClick={handleSubmitOpenBtnClick}
+            text={<T id={'save_open'} />}
           />
-        </Popover>
-      </ButtonGroup>
-      {/* ----------- Save As Draft ----------- */}
-      <ButtonGroup>
-        <Button
-          disabled={isSubmitting}
-          className={'ml1'}
-          onClick={handleSubmitDraftBtnClick}
-          text={<T id={'save_as_draft'} />}
-        />
-        <Popover
-          content={
-            <Menu>
-              <MenuItem
-                text={<T id={'save_and_new'} />}
-                onClick={handleSubmitDraftAndNewBtnClick}
-              />
-              <MenuItem
-                text={<T id={'save_continue_editing'} />}
-                onClick={handleSubmitDraftContinueEditingBtnClick}
-              />
-            </Menu>
-          }
-          minimal={true}
-          interactionKind={PopoverInteractionKind.CLICK}
-          position={Position.BOTTOM_LEFT}
-        >
+          <Popover
+            content={
+              <Menu>
+                <MenuItem
+                  text={<T id={'open_and_new'} />}
+                  onClick={handleSubmitOpenAndNewBtnClick}
+                />
+                <MenuItem
+                  text={<T id={'open_continue_editing'} />}
+                  onClick={handleSubmitOpenContinueEditingBtnClick}
+                />
+              </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>
+        {/* ----------- Save As Draft ----------- */}
+        <ButtonGroup>
           <Button
             disabled={isSubmitting}
-            rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
+            className={'ml1'}
+            onClick={handleSubmitDraftBtnClick}
+            text={<T id={'save_as_draft'} />}
           />
-        </Popover>
-      </ButtonGroup>
+          <Popover
+            content={
+              <Menu>
+                <MenuItem
+                  text={<T id={'save_and_new'} />}
+                  onClick={handleSubmitDraftAndNewBtnClick}
+                />
+                <MenuItem
+                  text={<T id={'save_continue_editing'} />}
+                  onClick={handleSubmitDraftContinueEditingBtnClick}
+                />
+              </Menu>
+            }
+            minimal={true}
+            interactionKind={PopoverInteractionKind.CLICK}
+            position={Position.BOTTOM_LEFT}
+          >
+            <Button
+              disabled={isSubmitting}
+              rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
+            />
+          </Popover>
+        </ButtonGroup>
+      </If>
+      {/* ----------- Save and New ----------- */}
+      <If condition={creditNote && creditNote?.is_open}>
+        <ButtonGroup>
+          <Button
+            loading={isSubmitting}
+            intent={Intent.PRIMARY}
+            onClick={handleSubmitOpenBtnClick}
+            text={<T id={'save'} />}
+          />
+          <Popover
+            content={
+              <Menu>
+                <MenuItem
+                  text={<T id={'save_and_new'} />}
+                  onClick={handleSubmitOpenAndNewBtnClick}
+                />
+              </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>
+      </If>
       {/* ----------- Clear & Reset----------- */}
       <Button
         className={'ml1'}
         disabled={isSubmitting}
         onClick={handleClearBtnClick}
-        text={isNewMode ? <T id={'reset'} /> : <T id={'clear'} />}
+        text={creditNote ? <T id={'reset'} /> : <T id={'clear'} />}
       />
       {/* ----------- Cancel ----------- */}
       <Button
diff --git a/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteForm.js b/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteForm.js
index b75e6130d..5e0aca734 100644
--- a/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteForm.js
+++ b/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteForm.js
@@ -97,6 +97,7 @@ function CreditNoteForm({
     }
     const form = {
       ...transformFormValuesToRequest(values),
+      open: submitPayload.open,
     };
     // Handle the request success.
     const onSuccess = (response) => {
diff --git a/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteForm.schema.js b/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteForm.schema.js
index dad38888e..3698610d3 100644
--- a/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteForm.schema.js
+++ b/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteForm.schema.js
@@ -16,6 +16,7 @@ const getSchema = () =>
       .min(1)
       .max(DATATYPES_LENGTH.TEXT)
       .label(intl.get('note')),
+    open: Yup.boolean(),
     terms_conditions: Yup.string()
       .trim()
       .min(1)
diff --git a/src/containers/Sales/CreditNotes/CreditNoteForm/utils.js b/src/containers/Sales/CreditNotes/CreditNoteForm/utils.js
index 807029d9f..d2825947b 100644
--- a/src/containers/Sales/CreditNotes/CreditNoteForm/utils.js
+++ b/src/containers/Sales/CreditNotes/CreditNoteForm/utils.js
@@ -35,6 +35,7 @@ export const defaultCreditNote = {
   credit_note_date: moment(new Date()).format('YYYY-MM-DD'),
   credit_note_number: '',
   credit_note_no_manually: false,
+  open: '',
   // reference_no: '',
   note: '',
   terms_conditions: '',
@@ -82,19 +83,20 @@ export const transformEntriesToSubmit = (entries) => {
 /**
  * Filters the givne non-zero entries.
  */
- export const filterNonZeroEntries = (entries) => {
+export const filterNonZeroEntries = (entries) => {
   return entries.filter((item) => item.item_id && item.quantity);
 };
 
 /**
  * Transformes form values to request body.
  */
- export const transformFormValuesToRequest = (values) => {
+export const transformFormValuesToRequest = (values) => {
   const entries = filterNonZeroEntries(values.entries);
 
   return {
     ...values,
     entries: transformEntriesToSubmit(entries),
+    open: false,
   };
 };
 
@@ -121,7 +123,7 @@ export const entriesFieldShouldUpdate = (newProps, oldProps) => {
 /**
  * Syncs invoice no. settings with form.
  */
- export const useObserveCreditNoSettings = (prefix, nextNumber) => {
+export const useObserveCreditNoSettings = (prefix, nextNumber) => {
   const { setFieldValue } = useFormikContext();
 
   React.useEffect(() => {
diff --git a/src/containers/Sales/CreditNotes/CreditNotesAlerts.js b/src/containers/Sales/CreditNotes/CreditNotesAlerts.js
index 7bf70e30b..1998279a5 100644
--- a/src/containers/Sales/CreditNotes/CreditNotesAlerts.js
+++ b/src/containers/Sales/CreditNotes/CreditNotesAlerts.js
@@ -8,6 +8,10 @@ const RefundCreditNoteDeleteAlert = React.lazy(() =>
   import('../../Alerts/CreditNotes/RefundCreditNoteDeleteAlert'),
 );
 
+const OpenCreditNoteAlert = React.lazy(() =>
+  import('../../Alerts/CreditNotes/CreditNoteOpenedAlert'),
+);
+
 /**
  * Credit notes alerts.
  */
@@ -16,6 +20,10 @@ export default [
     name: 'credit-note-delete',
     component: CreditNoteDeleteAlert,
   },
+  {
+    name: 'credit-note-open',
+    component: OpenCreditNoteAlert,
+  },
   {
     name: 'refund-credit-delete',
     component: RefundCreditNoteDeleteAlert,
diff --git a/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesDataTable.js b/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesDataTable.js
index 98fb9bc4e..a1721a8bb 100644
--- a/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesDataTable.js
+++ b/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesDataTable.js
@@ -100,6 +100,11 @@ function CreditNotesDataTable({
     openDialog('refund-credit-note', { creditNoteId: id });
   };
 
+  // Handle cancel/confirm crdit note open.
+  const handleOpenCreditNote = ({ id }) => {
+    openAlert('credit-note-open', { creditNoteId: id });
+  };
+
   return (
     <DashboardContentTable>
       <DataTable
@@ -126,6 +131,7 @@ function CreditNotesDataTable({
           onDelete: handleDeleteCreditNote,
           onEdit: hanldeEditCreditNote,
           onRefund: handleRefundCreditNote,
+          onOpen: handleOpenCreditNote,
         }}
       />
     </DashboardContentTable>
diff --git a/src/containers/Sales/CreditNotes/CreditNotesLanding/components.js b/src/containers/Sales/CreditNotes/CreditNotesLanding/components.js
index 2ee80875e..b1ea5a384 100644
--- a/src/containers/Sales/CreditNotes/CreditNotesLanding/components.js
+++ b/src/containers/Sales/CreditNotes/CreditNotesLanding/components.js
@@ -1,12 +1,5 @@
 import React from 'react';
-import {
-  Intent,
-  Tag,
-  Menu,
-  MenuItem,
-  MenuDivider,
-  ProgressBar,
-} from '@blueprintjs/core';
+import { Intent, Tag, Menu, MenuItem, MenuDivider } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
 import clsx from 'classnames';
 
@@ -14,15 +7,14 @@ import { CLASSES } from '../../../../common/classes';
 import {
   FormatDateCell,
   FormattedMessage as T,
-  AppToaster,
   Choose,
   If,
   Icon,
 } from 'components';
-import { formattedAmount, safeCallback, calculateStatus } from 'utils';
+import { safeCallback } from 'utils';
 
 export function ActionsMenu({
-  payload: { onEdit, onDelete, onRefund, onViewDetails },
+  payload: { onEdit, onDelete, onRefund, onOpen, onViewDetails },
   row: { original },
 }) {
   return (
@@ -38,11 +30,21 @@ export function ActionsMenu({
         text={intl.get('credit_note.action.edit_credit_note')}
         onClick={safeCallback(onEdit, original)}
       />
-      <MenuItem
-        icon={<Icon icon="quick-payment-16" />}
-        text={intl.get('credit_note.action.refund_credit_note')}
-        onClick={safeCallback(onRefund, original)}
-      />
+      <If condition={!original.is_closed && !original.is_draft}>
+        <MenuItem
+          icon={<Icon icon="quick-payment-16" />}
+          text={intl.get('credit_note.action.refund_credit_note')}
+          onClick={safeCallback(onRefund, original)}
+        />
+      </If>
+      <If condition={original.is_draft}>
+        <MenuItem
+          icon={<Icon icon={'check'} iconSize={18} />}
+          text={intl.get('mark_as_opened')}
+          onClick={safeCallback(onOpen, original)}
+        />
+      </If>
+
       <MenuItem
         text={intl.get('credit_note.action.delete_credit_note')}
         intent={Intent.DANGER}
@@ -53,6 +55,35 @@ export function ActionsMenu({
   );
 }
 
+/**
+ * Status accessor.
+ */
+export function StatusAccessor(creditNote) {
+  return (
+    <div>
+      <Choose>
+        <Choose.When condition={creditNote.is_open}>
+          <Tag minimal={true} intent={Intent.WARNING}>
+            <T id={'open'} />
+          </Tag>
+        </Choose.When>
+
+        <Choose.When condition={creditNote.is_closed}>
+          <Tag minimal={true} intent={Intent.SUCCESS}>
+            <T id={'closed'} />
+          </Tag>
+        </Choose.When>
+
+        <Choose.When condition={creditNote.is_draft}>
+          <Tag minimal={true}>
+            <T id={'draft'} />
+          </Tag>
+        </Choose.When>
+      </Choose>
+    </div>
+  );
+}
+
 /**
  * Retrieve credit note table columns.
  */
@@ -100,8 +131,8 @@ export function useCreditNoteTableColumns() {
       {
         id: 'status',
         Header: intl.get('status'),
-        // accessor:
-        width: 120, // 160
+        accessor: StatusAccessor,
+        width: 160, // 160
         className: 'status',
         clickable: true,
       },
diff --git a/src/hooks/query/creditNote.js b/src/hooks/query/creditNote.js
index db43afc33..99e6887cc 100644
--- a/src/hooks/query/creditNote.js
+++ b/src/hooks/query/creditNote.js
@@ -208,3 +208,22 @@ export function useRefundCreditNote(id, props, requestProps) {
     },
   );
 }
+
+/**
+ * Mark the given credit note as opened.
+ */
+export function useOpenCreditNote(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation((id) => apiRequest.post(`sales/credit_notes/${id}/open`), {
+    onSuccess: (res, id) => {
+      // Common invalidate queries.
+      commonInvalidateQueries(queryClient);
+
+      // Invalidate specific
+      queryClient.invalidateQueries([t.CREDIT_NOTE, id]);
+    },
+    ...props,
+  });
+}
diff --git a/src/hooks/query/vendorCredit.js b/src/hooks/query/vendorCredit.js
index e4d2a93a8..05df98147 100644
--- a/src/hooks/query/vendorCredit.js
+++ b/src/hooks/query/vendorCredit.js
@@ -219,3 +219,25 @@ export function useRefundVendorCredit(id, props, requestProps) {
     },
   );
 }
+
+/**
+ * Mark the given vendor credit  as opened.
+ */
+export function useOpenVendorCredit(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    (id) => apiRequest.post(`purchases/vendor-credit/${id}/open`),
+    {
+      onSuccess: (res, id) => {
+        // Common invalidate queries.
+        commonInvalidateQueries(queryClient);
+
+        // Invalidate specific.
+        queryClient.invalidateQueries([t.VENDOR_CREDIT, id]);
+      },
+      ...props,
+    },
+  );
+}
diff --git a/src/lang/en/index.json b/src/lang/en/index.json
index 4d4fae799..b0b5fe0bc 100644
--- a/src/lang/en/index.json
+++ b/src/lang/en/index.json
@@ -1562,6 +1562,10 @@
   "refund_vendor_credit.column.withdrawal_account": "Withdrawal account",
   "refund_vendor_credit_transactions.alert.delete_message":"The vendor credit refund has been deleted successfully.",
   "refund_vendor_credit_transactions.once_your_delete_this_refund_vendor_credit":"Once your delete this refund vendor credit note, you won't be able to restore it later, Are your sure you want to delete this transaction?",
-  "refund": "Refund"
+  "refund": "Refund",
+  "credit_note_opened.alert.success_message":"The credit note has been opened successfully",
+  "credit_opened.are_sure_to_open_this_credit": "Are you sure you want to open this credit note?",
+  "vendor_credit_opened.alert.success_message":"The  vendor credit has been opened successfully",
+  "vendor_credit_opened.are_sure_to_open_this_credit": "Are you sure you want to open this vendor credit?"
 }