Merge branch 'develop' into feature/1880-leaving-page

invoiceninja · Jan 22, 2025 · a9729c1 · a9729c1
2 parents 4beef71 + 86a73ed
commit a9729c1
Show file tree

Hide file tree

Showing 10 changed files with 125 additions and 22 deletions.
diff --git a/src/common/constants/invoice-status.ts b/src/common/constants/invoice-status.ts
@@ -18,6 +18,5 @@ export default {
   [InvoiceStatus.Sent]: 'sent',
   [InvoiceStatus.Partial]: 'partial',
   [InvoiceStatus.Paid]: 'paid',
-  [InvoiceStatus.Cancelled]: 'cancelled',
   [InvoiceStatus.Reversed]: 'reversed',
 };
diff --git a/src/common/queries/invoices.ts b/src/common/queries/invoices.ts
@@ -43,7 +43,7 @@ export function useInvoiceQuery(params: InvoiceQueryParams) {
       request(
         'GET',
         endpoint(
-          `/api/v1/invoices/:id?include=client.group_settings${isLockedParam}`,
+          `/api/v1/invoices/:id?include=payments,client.group_settings${isLockedParam}`,
           {
             id: params.id,
           }

diff --git a/src/components/forms/Combobox.tsx b/src/components/forms/Combobox.tsx
@@ -258,6 +258,7 @@ export function Combobox<T = any>({
 
   useClickAway(comboboxRef, () => {
     setIsOpen(false);
+    onInputValueChange?.(inputValue);
 
     if (
       selectedOption &&
@@ -340,7 +341,6 @@ export function Combobox<T = any>({
                 onFocus();
               }
             }}
-            onBlur={() => onInputValueChange?.(inputValue)}
             placeholder={inputOptions.placeholder}
             disabled={readonly}
             defaultValue={

diff --git a/src/components/forms/InputField.tsx b/src/components/forms/InputField.tsx
@@ -104,13 +104,15 @@ export function InputField(props: Props) {
           )}
           placeholder={props.placeholder || ''}
           onBlur={(event) => {
-            event.target.value =
-              event.target.value === '' && props.type === 'number'
-                ? '0'
-                : event.target.value;
+            if (!props.changeOverride) {
+              event.target.value =
+                event.target.value === '' && props.type === 'number'
+                  ? '0'
+                  : event.target.value;
 
-            props.onValueChange && props.onValueChange(event.target.value);
-            props.onChange && props.onChange(event);
+              props.onValueChange && props.onValueChange(event.target.value);
+              props.onChange && props.onChange(event);
+            }
           }}
           onChange={(event) => {
             event.target.value =

diff --git a/src/components/forms/MarkdownEditor.tsx b/src/components/forms/MarkdownEditor.tsx
@@ -19,7 +19,7 @@ interface Props {
   onChange: (value: string) => unknown;
   label?: string;
   disabled?: boolean;
-  handleOnBlur?: () => void;
+  handleChangeOnlyOnUserInput?: boolean;
 }
 
 export function MarkdownEditor(props: Props) {
@@ -96,9 +96,14 @@ export function MarkdownEditor(props: Props) {
           browser_spellcheck: true,
           convert_urls: false,
         }}
-        onEditorChange={handleChange}
-        onBlur={() => {
-          props.handleOnBlur?.();
+        onEditorChange={(currentValue) => {
+          if (props.handleChangeOnlyOnUserInput) {
+            if (currentValue !== props.value) {
+              handleChange(currentValue);
+            }
+          } else {
+            handleChange(currentValue);
+          }
         }}
         disabled={props.disabled}
       />

diff --git a/src/pages/invoices/common/hooks/useTabs.tsx b/src/pages/invoices/common/hooks/useTabs.tsx
@@ -8,6 +8,7 @@
  * @license https://www.elastic.co/licensing/elastic-license
  */
 
+import { InvoiceStatus } from '$app/common/enums/invoice-status';
 import { route } from '$app/common/helpers/route';
 import { useHasPermission } from '$app/common/hooks/permissions/useHasPermission';
 import { useCurrentCompany } from '$app/common/hooks/useCurrentCompany';
@@ -97,6 +98,11 @@ export function useTabs(params: Params) {
       name: t('email_history'),
       href: route('/invoices/:id/email_history', { id }),
     },
+    {
+      name: t('payments'),
+      href: route('/invoices/:id/payments', { id }),
+      enabled: invoice?.status_id === InvoiceStatus.Paid,
+    },
   ];
 
   return tabs;

diff --git a/src/pages/invoices/edit/Edit.tsx b/src/pages/invoices/edit/Edit.tsx
@@ -99,6 +99,7 @@ export default function Edit() {
           {invoice && (
             <div className="flex space-x-20">
               <span className="text-sm">{t('status')}</span>
+
               <InvoiceStatusBadge entity={invoice} />
             </div>
           )}

diff --git a/src/pages/invoices/edit/components/Payments.tsx b/src/pages/invoices/edit/components/Payments.tsx
@@ -0,0 +1,85 @@
+/**
+ * Invoice Ninja (https://invoiceninja.com).
+ *
+ * @link https://github.com/invoiceninja/invoiceninja source repository
+ *
+ * @copyright Copyright (c) 2022. Invoice Ninja LLC (https://invoiceninja.com)
+ *
+ * @license https://www.elastic.co/licensing/elastic-license
+ */
+
+import { Paymentable } from '$app/common/interfaces/payment';
+
+import { useOutletContext } from 'react-router-dom';
+import { Context } from '../Edit';
+import { ClickableElement } from '$app/components/cards/ClickableElement';
+import { useDisableNavigation } from '$app/common/hooks/useDisableNavigation';
+import { Payment } from '$app/common/interfaces/payment';
+import { useTranslation } from 'react-i18next';
+import { date } from '$app/common/helpers';
+import { PaymentStatus } from '$app/pages/payments/common/components/PaymentStatus';
+import { useCurrentCompanyDateFormats } from '$app/common/hooks/useCurrentCompanyDateFormats';
+import { useFormatMoney } from '$app/common/hooks/money/useFormatMoney';
+import { Card } from '$app/components/cards';
+
+function Payments() {
+  const [t] = useTranslation();
+
+  const context: Context = useOutletContext();
+  const { invoice } = context;
+
+  const formatMoney = useFormatMoney();
+  const disableNavigation = useDisableNavigation();
+
+  const { dateFormat } = useCurrentCompanyDateFormats();
+
+  return (
+    <Card
+      title={t('payments')}
+      withScrollableBody
+      style={{ maxHeight: '42.5rem' }}
+    >
+      <div className="divide-y">
+        {invoice?.payments &&
+          invoice.payments.map((payment: Payment) =>
+            payment.paymentables
+              .filter(
+                (item) =>
+                  item.invoice_id == invoice?.id && item.archived_at == 0
+              )
+              .map((paymentable: Paymentable) => (
+                <ClickableElement
+                  key={payment.id}
+                  to={`/payments/${payment.id}/edit`}
+                  disableNavigation={disableNavigation('payment', payment)}
+                >
+                  <div className="flex flex-col space-y-2">
+                    <p className="font-semibold">
+                      {t('payment')} {payment.number}
+                    </p>
+
+                    <p className="inline-flex items-center space-x-1">
+                      <p>
+                        {formatMoney(
+                          paymentable.amount,
+                          payment.client?.country_id,
+                          payment.client?.settings.currency_id
+                        )}
+                      </p>
+                      <p>&middot;</p>
+                      <p>{date(paymentable.created_at, dateFormat)}</p>
+                    </p>
+
+                    <div>
+                      <PaymentStatus entity={payment} />
+                    </div>
+                  </div>
+                </ClickableElement>
+              ))
+          )}
+      </div>
+    </Card>
+  );
+}
+
+export default Payments;
diff --git a/src/pages/invoices/email/components/Mailer.tsx b/src/pages/invoices/email/components/Mailer.tsx
@@ -228,11 +228,9 @@ export const Mailer = forwardRef<MailerComponent, Props>((props, ref) => {
             <InputField
               label={t('cc_email')}
               value={payloadData.ccEmail}
-              onValueChange={(value) => {
-                setPayloadData((current) => ({ ...current, ccEmail: value }));
-
-                setTriggerTemplateGeneration(true);
-              }}
+              onValueChange={(value) =>
+                setPayloadData((current) => ({ ...current, ccEmail: value }))
+              }
               errorMessage={errors?.errors.cc_email}
             />
           )}
@@ -246,16 +244,19 @@ export const Mailer = forwardRef<MailerComponent, Props>((props, ref) => {
               setTriggerTemplateGeneration(true);
             }}
             disabled={freePlan() && isHosted()}
+            changeOverride
             errorMessage={errors?.errors.subject}
           />
 
           {(proPlan() || enterprisePlan()) && (
             <MarkdownEditor
               value={payloadData.body}
-              onChange={(value) =>
-                setPayloadData((current) => ({ ...current, body: value }))
-              }
-              handleOnBlur={() => setTriggerTemplateGeneration(true)}
+              onChange={(value) => {
+                setPayloadData((current) => ({ ...current, body: value }));
+
+                setTriggerTemplateGeneration(true);
+              }}
+              handleChangeOnlyOnUserInput
             />
           )}
         </Card>

diff --git a/src/pages/invoices/routes.tsx b/src/pages/invoices/routes.tsx
@@ -30,6 +30,9 @@ const EInvoice = lazy(
 const Documents = lazy(
   () => import('$app/pages/invoices/edit/components/Documents')
 );
+const Payments = lazy(
+  () => import('$app/pages/invoices/edit/components/Payments')
+);
 const Settings = lazy(
   () => import('$app/pages/invoices/edit/components/Settings')
 );
@@ -117,6 +120,7 @@ export const invoiceRoutes = (
       <Route path="activity" element={<Activities />} />
       <Route path="history" element={<History />} />
       <Route path="email_history" element={<EmailHistory />} />
+      <Route path="payments" element={<Payments />} />
     </Route>
 
     <Route