refactor(webapp): bound Formik fields across all components

packages/server/src/modules/CreditNoteRefunds/dto/CreditNoteRefund.dto.ts

@@ -1,6 +1,5 @@
 import { ApiProperty } from '@nestjs/swagger';
-import { ToNumber, IsOptional } from '@/common/decorators/Validators';
+import { IsNotEmpty, IsOptional, IsPositive, IsString } from 'class-validator';
-import { IsDateString, IsNotEmpty, IsPositive, IsString } from 'class-validator';
 import { IsDate } from 'class-validator';
 import { IsNumber } from 'class-validator';
 
@@ -11,13 +10,8 @@ export class CreditNoteRefundDto {
     description: 'The id of the from account',
     example: 1,
   })
-  @ApiProperty({
-    description: 'The id of the from account',
-    example: 1,
-  })
   fromAccountId: number;
 
-  @ToNumber()
   @IsNumber()
   @IsPositive()
   @IsNotEmpty()
@@ -27,7 +21,6 @@ export class CreditNoteRefundDto {
   })
   amount: number;
 
-  @ToNumber()
   @IsNumber()
   @IsOptional()
   @IsPositive()
@@ -37,23 +30,23 @@ export class CreditNoteRefundDto {
   })
   exchangeRate?: number;
 
-  @IsOptional()
   @IsString()
+  @IsNotEmpty()
   @ApiProperty({
     description: 'The reference number of the credit note refund',
     example: '123456',
   })
   referenceNo: string;
 
-  @IsOptional()
   @IsString()
+  @IsNotEmpty()
   @ApiProperty({
     description: 'The description of the credit note refund',
     example: 'Credit note refund',
   })
   description: string;
 
-  @IsDateString()
+  @IsDate()
   @IsNotEmpty()
   @ApiProperty({
     description: 'The date of the credit note refund',
@@ -61,7 +54,6 @@ export class CreditNoteRefundDto {
   })
   date: Date;
 
-  @ToNumber()
   @IsNumber()
   @IsOptional()
   @ApiProperty({

packages/server/src/modules/CreditNotes/queries/GetCreditNotePdf.serivce.ts

@@ -1,10 +1,10 @@
 import { Inject, Injectable } from '@nestjs/common';
-import { renderCreditNotePaperTemplateHtml } from '@bigcapital/pdf-templates';
 import { GetCreditNoteService } from './GetCreditNote.service';
 import { CreditNoteBrandingTemplate } from './CreditNoteBrandingTemplate.service';
 import { transformCreditNoteToPdfTemplate } from '../utils';
 import { CreditNote } from '../models/CreditNote';
 import { ChromiumlyTenancy } from '@/modules/ChromiumlyTenancy/ChromiumlyTenancy.service';
+import { TemplateInjectable } from '@/modules/TemplateInjectable/TemplateInjectable.service';
 import { EventEmitter2 } from '@nestjs/event-emitter';
 import { PdfTemplateModel } from '@/modules/PdfTemplate/models/PdfTemplate';
 import { CreditNotePdfTemplateAttributes } from '../types/CreditNotes.types';
@@ -15,6 +15,7 @@ import { TenantModelProxy } from '@/modules/System/models/TenantBaseModel';
 export class GetCreditNotePdf {
   /**
    * @param {ChromiumlyTenancy} chromiumlyTenancy - Chromiumly tenancy service.
+   * @param {TemplateInjectable} templateInjectable - Template injectable service.
    * @param {GetCreditNote} getCreditNoteService - Get credit note service.
    * @param {CreditNoteBrandingTemplate} creditNoteBrandingTemplate - Credit note branding template service.
    * @param {EventEmitter2} eventPublisher - Event publisher service.
@@ -23,6 +24,7 @@ export class GetCreditNotePdf {
    */
   constructor(
     private readonly chromiumlyTenancy: ChromiumlyTenancy,
+    private readonly templateInjectable: TemplateInjectable,
     private readonly getCreditNoteService: GetCreditNoteService,
     private readonly creditNoteBrandingTemplate: CreditNoteBrandingTemplate,
     private readonly eventPublisher: EventEmitter2,
@@ -34,40 +36,23 @@ export class GetCreditNotePdf {
     private readonly pdfTemplateModel: TenantModelProxy<
       typeof PdfTemplateModel
     >,
-  ) { }
+  ) {}
 
   /**
-   * Retrieves credit note html content.
+   * Retrieves sale invoice pdf content.
-   * @param {number} creditNoteId - Credit note id.
-   * @returns {Promise<string>}
-   */
-  public async getCreditNoteHtml(creditNoteId: number): Promise<string> {
-    const brandingAttributes =
-      await this.getCreditNoteBrandingAttributes(creditNoteId);
-
-    // Map attributes to match the React component props
-    // The branding template returns companyLogoUri, but type may have companyLogo
-    const props = {
-      ...brandingAttributes,
-      companyLogoUri:
-        (brandingAttributes as any).companyLogoUri ||
-        (brandingAttributes as any).companyLogo ||
-        '',
-    };
-
-    return renderCreditNotePaperTemplateHtml(props);
-  }
-
-  /**
-   * Retrieves credit note pdf content.
    * @param {number} creditNoteId - Credit note id.
    * @returns {Promise<[Buffer, string]>}
    */
   public async getCreditNotePdf(
     creditNoteId: number,
   ): Promise<[Buffer, string]> {
+    const brandingAttributes =
+      await this.getCreditNoteBrandingAttributes(creditNoteId);
+    const htmlContent = await this.templateInjectable.render(
+      'modules/credit-note-standard',
+      brandingAttributes,
+    );
     const filename = await this.getCreditNoteFilename(creditNoteId);
-    const htmlContent = await this.getCreditNoteHtml(creditNoteId);
 
     const document =
       await this.chromiumlyTenancy.convertHtmlContent(htmlContent);

packages/server/src/modules/VendorCreditsRefund/VendorCreditsRefund.application.ts

@@ -2,35 +2,19 @@ import { Injectable } from '@nestjs/common';
 import { DeleteRefundVendorCreditService } from './commands/DeleteRefundVendorCredit.service';
 import { RefundVendorCredit } from './models/RefundVendorCredit';
 import { CreateRefundVendorCredit } from './commands/CreateRefundVendorCredit.service';
+import { IRefundVendorCreditDTO } from './types/VendorCreditRefund.types';
 import { RefundVendorCreditDto } from './dtos/RefundVendorCredit.dto';
-import { GetRefundVendorCreditsService } from './queries/GetRefundVendorCredits.service';
-import { IRefundVendorCreditPOJO } from './types/VendorCreditRefund.types';
 
 @Injectable()
 export class VendorCreditsRefundApplication {
   /**
    * @param {CreateRefundVendorCredit} createRefundVendorCreditService
    * @param {DeleteRefundVendorCreditService} deleteRefundVendorCreditService
-   * @param {GetRefundVendorCreditsService} getRefundVendorCreditsService
    */
   constructor(
     private readonly createRefundVendorCreditService: CreateRefundVendorCredit,
     private readonly deleteRefundVendorCreditService: DeleteRefundVendorCreditService,
-    private readonly getRefundVendorCreditsService: GetRefundVendorCreditsService,
+  ) {}
-  ) { }
-
-  /**
-   * Retrieve the vendor credit refunds graph.
-   * @param {number} vendorCreditId - Vendor credit id.
-   * @returns {Promise<IRefundVendorCreditPOJO[]>}
-   */
-  public getVendorCreditRefunds(
-    vendorCreditId: number,
-  ): Promise<IRefundVendorCreditPOJO[]> {
-    return this.getRefundVendorCreditsService.getVendorCreditRefunds(
-      vendorCreditId,
-    );
-  }
 
   /**
    * Creates a refund vendor credit.

packages/server/src/modules/VendorCreditsRefund/VendorCreditsRefund.controller.ts

@@ -1,4 +1,4 @@
-import { Body, Controller, Delete, Get, Param, Post } from '@nestjs/common';
+import { Body, Controller, Delete, Param, Post } from '@nestjs/common';
 import { VendorCreditsRefundApplication } from './VendorCreditsRefund.application';
 import { RefundVendorCredit } from './models/RefundVendorCredit';
 import { ApiOperation, ApiTags } from '@nestjs/swagger';
@@ -9,22 +9,7 @@ import { RefundVendorCreditDto } from './dtos/RefundVendorCredit.dto';
 export class VendorCreditsRefundController {
   constructor(
     private readonly vendorCreditsRefundApplication: VendorCreditsRefundApplication,
-  ) { }
+  ) {}
-
-  /**
-   * Retrieve the vendor credit refunds graph.
-   * @param {number} vendorCreditId - Vendor credit id.
-   * @returns {Promise<IRefundVendorCreditPOJO[]>}
-   */
-  @Get(':vendorCreditId/refund')
-  @ApiOperation({ summary: 'Retrieve the vendor credit refunds graph.' })
-  public getVendorCreditRefunds(
-    @Param('vendorCreditId') vendorCreditId: string,
-  ) {
-    return this.vendorCreditsRefundApplication.getVendorCreditRefunds(
-      Number(vendorCreditId),
-    );
-  }
 
   /**
    * Creates a refund vendor credit.
@@ -32,7 +17,7 @@ export class VendorCreditsRefundController {
    * @param {IRefundVendorCreditDTO} refundVendorCreditDTO
    * @returns {Promise<RefundVendorCredit>}
    */
-  @Post(':vendorCreditId/refund')
+  @Post(':vendorCreditId/refunds')
   @ApiOperation({ summary: 'Create a refund for the given vendor credit.' })
   public async createRefundVendorCredit(
     @Param('vendorCreditId') vendorCreditId: string,

packages/server/src/modules/VendorCreditsRefund/dtos/RefundVendorCredit.dto.ts

@@ -1,12 +1,10 @@
-import { IsOptional, ToNumber } from '@/common/decorators/Validators';
 import { ApiProperty } from '@nestjs/swagger';
-import { IsDateString, Min } from 'class-validator';
+import { Min } from 'class-validator';
 import { IsString } from 'class-validator';
 import { IsDate } from 'class-validator';
-import { IsNotEmpty, IsNumber, IsPositive } from 'class-validator';
+import { IsNotEmpty, IsNumber, IsOptional, IsPositive } from 'class-validator';
 
 export class RefundVendorCreditDto {
-  @ToNumber()
   @IsNumber()
   @IsNotEmpty()
   @Min(0)
@@ -34,7 +32,6 @@ export class RefundVendorCreditDto {
   })
   depositAccountId: number;
 
-  @IsOptional()
   @IsString()
   @IsNotEmpty()
   @ApiProperty({
@@ -43,7 +40,7 @@ export class RefundVendorCreditDto {
   })
   description: string;
 
-  @IsDateString()
+  @IsDate()
   @IsNotEmpty()
   @ApiProperty({
     description: 'The date of the refund',

packages/webapp/src/components/AdvancedFilter/AdvancedFilterValueField.tsx

@@ -1,5 +1,5 @@
 // @ts-nocheck
-import React, { useMemo } from 'react';
+import React from 'react';
 import { Position, Checkbox, InputGroup } from '@blueprintjs/core';
 import { DateInput } from '@blueprintjs/datetime';
 import moment from 'moment';
@@ -7,29 +7,23 @@ import intl from 'react-intl-universal';
 import { isUndefined } from 'lodash';
 
 import { useAutofocus } from '@/hooks';
-import { T, Choose } from '@/components';
+import { T, Choose, ListSelect } from '@/components';
-import { Select } from '@/components/Forms';
 import { momentFormatter } from '@/utils';
 
 function AdvancedFilterEnumerationField({ options, value, ...rest }) {
-  const selectedItem = useMemo(
-    () => options.find((opt) => opt.key === value) || null,
-    [options, value],
-  );
-
   return (
-    <Select
+    <ListSelect
       items={options}
-      selectedItem={selectedItem}
+      selectedItem={value}
       popoverProps={{
         fill: true,
         inline: true,
         minimal: true,
         captureDismiss: true,
       }}
-      placeholder={<T id={'filter.select_option'} />}
+      defaultText={<T id={'filter.select_option'} />}
-      textAccessor={'label'}
+      textProp={'label'}
-      valueAccessor={'key'}
+      selectedItemProp={'key'}
       {...rest}
     />
   );

packages/webapp/src/containers/Accounts/withAccountsTableActions.tsx

@@ -14,3 +14,4 @@ const mapActionsToProps = (dispatch) => ({
 });
 
 export const withAccountsTableActions = connect(null, mapActionsToProps);
+export const withAccountsActions = withAccountsTableActions;

packages/webapp/src/containers/CashFlow/MoneyInDialog/OtherIncome/OtherIncomeFormFields.tsx

@@ -19,7 +19,6 @@ import {
   Row,
   FeatureCan,
   BranchSelect,
-  BranchSelectButton,
   FInputGroup,
   FFormGroup,
   FTextArea,
@@ -60,7 +59,6 @@ export default function OtherIncomeFormFields() {
               <BranchSelect
                 name={'branch_id'}
                 branches={branches}
-                input={BranchSelectButton}
                 popoverProps={{ minimal: true }}
               />
             </FFormGroup>

packages/webapp/src/containers/CashFlow/MoneyInDialog/OwnerContribution/OwnerContributionFormFields.tsx

@@ -11,7 +11,6 @@ import {
   Col,
   Row,
   BranchSelect,
-  BranchSelectButton,
   FeatureCan,
   FFormGroup,
   FMoneyInputGroup,
@@ -56,7 +55,6 @@ export default function OwnerContributionFormFields() {
               <BranchSelect
                 name={'branch_id'}
                 branches={branches}
-                input={BranchSelectButton}
                 popoverProps={{ minimal: true }}
               />
             </FFormGroup>

packages/webapp/src/containers/CashFlow/MoneyInDialog/TransferFromAccount/TransferFromAccountFormFields.tsx

@@ -11,7 +11,6 @@ import {
   Row,
   FeatureCan,
   BranchSelect,
-  BranchSelectButton,
   FMoneyInputGroup,
   FFormGroup,
   FTextArea,
@@ -49,7 +48,6 @@ export default function TransferFromAccountFormFields() {
               <BranchSelect
                 name={'branch_id'}
                 branches={branches}
-                input={BranchSelectButton}
                 popoverProps={{ minimal: true }}
               />
             </FFormGroup>

packages/webapp/src/containers/CashFlow/MoneyOutDialog/OtherExpense/OtherExpnseFormFields.tsx

@@ -11,7 +11,6 @@ import {
   Row,
   FeatureCan,
   BranchSelect,
-  BranchSelectButton,
   FTextArea,
   FFormGroup,
   FInputGroup,
@@ -47,7 +46,6 @@ export default function OtherExpnseFormFields() {
               <BranchSelect
                 name={'branch_id'}
                 branches={branches}
-                input={BranchSelectButton}
                 popoverProps={{ minimal: true }}
               />
             </FFormGroup>

packages/webapp/src/containers/CashFlow/MoneyOutDialog/OwnerDrawings/OwnerDrawingsFormFields.tsx

@@ -11,7 +11,6 @@ import {
   Row,
   FeatureCan,
   BranchSelect,
-  BranchSelectButton,
   FFormGroup,
   FTextArea,
   FInputGroup,
@@ -49,7 +48,6 @@ export default function OwnerDrawingsFormFields() {
               <BranchSelect
                 name={'branch_id'}
                 branches={branches}
-                input={BranchSelectButton}
                 popoverProps={{ minimal: true }}
               />
             </FFormGroup>

packages/webapp/src/containers/CashFlow/MoneyOutDialog/TransferToAccount/TransferToAccountFormFields.tsx

@@ -12,7 +12,6 @@ import {
   Row,
   FeatureCan,
   BranchSelect,
-  BranchSelectButton,
   FFormGroup,
   FTextArea,
   FMoneyInputGroup,
@@ -52,7 +51,6 @@ export default function TransferToAccountFormFields() {
               <BranchSelect
                 name={'branch_id'}
                 branches={branches}
-                input={BranchSelectButton}
                 popoverProps={{ minimal: true }}
               />
             </FFormGroup>

packages/webapp/src/containers/Dialogs/CustomerOpeningBalanceDialog/CustomerOpeningBalanceFields.tsx

@@ -14,7 +14,6 @@ import {
   FormattedMessage as T,
   ExchangeRateMutedField,
   BranchSelect,
-  BranchSelectButton,
   FeatureCan,
   InputPrependText,
 } from '@/components';
@@ -105,7 +104,6 @@ function CustomerOpeningBalanceFields({
           <BranchSelect
             name={'opening_balance_branch_id'}
             branches={branches}
-            input={BranchSelectButton}
             popoverProps={{ minimal: true }}
           />
         </FFormGroup>

packages/webapp/src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMadeFormFields.tsx

@@ -22,7 +22,6 @@ import {
   FeatureCan,
   ExchangeRateMutedField,
   BranchSelect,
-  BranchSelectButton,
   FFormGroup,
   FInputGroup,
   FDateInput,
@@ -62,7 +61,6 @@ function QuickPaymentMadeFormFields({
               <BranchSelect
                 name={'branch_id'}
                 branches={branches}
-                input={BranchSelectButton}
                 popoverProps={{ minimal: true }}
               />
             </FFormGroup>

packages/webapp/src/containers/Dialogs/QuickPaymentReceiveFormDialog/QuickPaymentReceiveFormFields.tsx

@@ -21,7 +21,6 @@ import {
   FeatureCan,
   ExchangeRateMutedField,
   BranchSelect,
-  BranchSelectButton,
   FFormGroup,
   FInputGroup,
   FTextArea,
@@ -62,7 +61,6 @@ function QuickPaymentReceiveFormFields({
               <BranchSelect
                 name={'branch_id'}
                 branches={branches}
-                input={BranchSelectButton}
                 popoverProps={{ minimal: true }}
               />
             </FFormGroup>

packages/webapp/src/containers/Dialogs/RefundCreditNoteDialog/RefundCreditNoteFormFields.tsx

@@ -31,9 +31,6 @@ import {
   FeatureCan,
   FInputGroup,
   FMoneyInputGroup,
-  FDateInput,
-  FFormGroup,
-  FTextArea,
 } from '@/components';
 import {
   inputIntent,
@@ -69,13 +66,16 @@ function RefundCreditNoteFormFields({
       <FeatureCan feature={Features.Branches}>
         <Row>
           <Col xs={5}>
-            <FFormGroup name={'branch_id'} label={<T id={'branch'} />}>
+            <FormGroup
+              label={<T id={'branch'} />}
+              className={classNames('form-group--select-list', Classes.FILL)}
+            >
               <BranchSelect
                 name={'branch_id'}
                 branches={branches}
                 popoverProps={{ minimal: true }}
               />
-            </FFormGroup>
+            </FormGroup>
           </Col>
         </Row>
         <BranchRowDivider />
@@ -84,23 +84,29 @@ function RefundCreditNoteFormFields({
       <Row>
         <Col xs={5}>
           {/* ------------- Refund date ------------- */}
-          <FFormGroup
+          <FastField name={'date'}>
-            name={'date'}
+            {({ form, field: { value }, meta: { error, touched } }) => (
-            label={<T id={'refund_credit_note.dialog.refund_date'} />}
+              <FFormGroup
-            labelInfo={<FieldRequiredHint />}
+                name={'date'}
-            fill
+                label={<T id={'refund_credit_note.dialog.refund_date'} />}
-          >
+                labelInfo={<FieldRequiredHint />}
-            <FDateInput
+                fill
-              name={'date'}
+              >
-              {...momentFormatter('YYYY/MM/DD')}
+                <DateInput
-              popoverProps={{ position: Position.BOTTOM, minimal: true }}
+                  {...momentFormatter('YYYY/MM/DD')}
-              inputProps={{
+                  value={tansformDateValue(value)}
-                leftIcon: <Icon icon={'date-range'} />,
+                  onChange={handleDateChange((formattedDate) => {
-              }}
+                    form.setFieldValue('date', formattedDate);
-            />
+                  })}
-          </FFormGroup>
+                  popoverProps={{ position: Position.BOTTOM, minimal: true }}
+                  inputProps={{
+                    leftIcon: <Icon icon={'date-range'} />,
+                  }}
+                />
+              </FFormGroup>
+            )}
+          </FastField>
         </Col>
-
         <Col xs={5}>
           {/* ------------ Form account ------------ */}
           <FFormGroup
@@ -108,7 +114,6 @@ function RefundCreditNoteFormFields({
             label={<T id={'refund_credit_note.dialog.from_account'} />}
             labelInfo={<FieldRequiredHint />}
             fill
-            fastField
           >
             <FAccountsSuggestField
               name={'from_account_id'}
@@ -121,7 +126,6 @@ function RefundCreditNoteFormFields({
                 ACCOUNT_TYPE.CASH,
                 ACCOUNT_TYPE.FIXED_ASSET,
               ]}
-              fastField
             />
           </FFormGroup>
         </Col>
@@ -133,7 +137,6 @@ function RefundCreditNoteFormFields({
         label={<T id={'refund_credit_note.dialog.amount'} />}
         labelInfo={<FieldRequiredHint />}
         fill
-        fastField
       >
         <ControlGroup>
           <InputPrependText text={values.currency_code} />
@@ -141,7 +144,6 @@ function RefundCreditNoteFormFields({
             name={'amount'}
             minimal={true}
             inputRef={(ref) => (amountFieldRef.current = ref)}
-
           />
         </ControlGroup>
       </FFormGroup>
@@ -159,19 +161,21 @@ function RefundCreditNoteFormFields({
       </If>
 
       {/* ------------ Reference No. ------------ */}
-      <FFormGroup name={'reference_no'} label={<T id={'reference_no'} />} fill fastField>
+      <FFormGroup name={'reference_no'} label={<T id={'reference_no'} />} fill>
         <FInputGroup name={'reference_no'} minimal fill />
       </FFormGroup>
 
       {/* --------- Statement --------- */}
-      <FFormGroup
+      <FastField name={'description'}>
-        name={'description'}
+        {({ form, field, meta: { error, touched } }) => (
-        label={<T id={'refund_credit_note.dialog.description'} />}
+          <FormGroup
-        fill
+            label={<T id={'refund_credit_note.dialog.description'} />}
-        fastField
+            className={'form-group--description'}
-      >
+          >
-        <FTextArea name={'description'} growVertically fill fastField />
+            <TextArea growVertically={true} {...field} />
-      </FFormGroup>
+          </FormGroup>
+        )}
+      </FastField>
     </div>
   );
 }
@@ -179,12 +183,7 @@ function RefundCreditNoteFormFields({
 export default compose(withCurrentOrganization())(RefundCreditNoteFormFields);
 
 export const BranchRowDivider = styled.div`
-  --x-divider-color: #ebf1f6;
-
-  .bp4-dark & {
-    --x-divider-color: rgba(255, 255, 255, 0.1);
-  }
   height: 1px;
-  background: var(--x-divider-color);
+  background: #ebf1f6;
   margin-bottom: 13px;
 `;

packages/webapp/src/containers/Dialogs/RefundVendorCreditDialog/RefundVendorCreditFormFields.tsx

@@ -152,8 +152,8 @@ function RefundVendorCreditFormFields({
       </FFormGroup>
 
       {/* --------- Statement --------- */}
-      <FFormGroup name={'description'} label={<T id={'refund_vendor_credit.dialog.description'} />} fill fastField>
+      <FFormGroup name={'description'} fill fastField>
-        <FTextArea name={'description'} growVertically fill fastField />
+        <FTextArea name={'description'} growVertically={true} fastField />
       </FFormGroup>
     </div>
   );
@@ -162,12 +162,7 @@ function RefundVendorCreditFormFields({
 export default compose(withCurrentOrganization())(RefundVendorCreditFormFields);
 
 export const BranchRowDivider = styled.div`
-  --x-divider-color: #ebf1f6;
-
-  .bp4-dark & {
-    --x-divider-color: rgba(255, 255, 255, 0.1);
-  }
   height: 1px;
-  background: var(--x-divider-color);
+  background: #ebf1f6;
   margin-bottom: 13px;
 `;

packages/webapp/src/containers/Dialogs/VendorOpeningBalanceDialog/VendorOpeningBalanceFormFields.tsx

@@ -14,7 +14,6 @@ import {
   FormattedMessage as T,
   ExchangeRateMutedField,
   BranchSelect,
-  BranchSelectButton,
   FeatureCan,
   InputPrependText,
 } from '@/components';
@@ -103,7 +102,6 @@ function VendorOpeningBalanceFormFields({
           <BranchSelect
             name={'opening_balance_branch_id'}
             branches={branches}
-            input={BranchSelectButton}
             popoverProps={{ minimal: true }}
           />
         </FFormGroup>

packages/webapp/src/containers/ItemsCategories/withItemCategories.tsx

@@ -15,3 +15,5 @@ export const withItemCategories = (mapState) => {
   };
   return connect(mapStateToProps);
 };
+
+export const withItemsCategories = withItemCategories;

packages/webapp/src/containers/Purchases/Bills/BillsLanding/withBillsActions.tsx

@@ -14,3 +14,4 @@ const mapDispatchToProps = (dispatch) => ({
 });
 
 export const withBillsActions = connect(null, mapDispatchToProps);
+export const withBillActions = withBillsActions;

packages/webapp/src/containers/Purchases/PaymentsMade/PaymentsLanding/withPaymentMade.tsx

@@ -18,3 +18,5 @@ export const withPaymentMade = (mapState) => {
   };
   return connect(mapStateToProps);
 };
+
+export const withPaymentMades = withPaymentMade;

packages/webapp/src/containers/Router/withRouteActions.tsx

@@ -29,4 +29,4 @@ const mapDispatchToProps = (dispatch, props) => {
   }
 }
 
-export const withRouteActions = connect(null, mapDispatchToProps);
+export const withRouteActions = connect(null, mapDispatchToProps)  

packages/webapp/src/containers/Setup/SetupSubscription/SubscriptionPlansPeriodSwitcher.tsx

@@ -10,7 +10,7 @@ import { SubscriptionPlansPeriod } from '@/store/plans/plans.reducer';
 import styles from './SetupSubscription.module.scss';
 
 interface SubscriptionPlansPeriodsSwitchCombinedProps
-  extends WithSubscriptionPlansActionsProps { }
+  extends WithSubscriptionPlansActionsProps {}
 
 function SubscriptionPlansPeriodSwitcherRoot({
   // #withSubscriptionPlansActions

shared/pdf-templates/src/components/CreditNotePaperTemplate.tsx

@@ -1,257 +0,0 @@
-import {
-  PaperTemplate,
-  PaperTemplateProps,
-  PaperTemplateTotalBorder,
-} from './PaperTemplate';
-import { Box } from '../lib/layout/Box';
-import { Text } from '../lib/text/Text';
-import { Stack } from '../lib/layout/Stack';
-import { Group } from '../lib/layout/Group';
-import {
-  DefaultPdfTemplateTerms,
-  DefaultPdfTemplateItemDescription,
-  DefaultPdfTemplateItemName,
-  DefaultPdfTemplateAddressBilledTo,
-  DefaultPdfTemplateAddressBilledFrom,
-} from './_constants';
-
-interface CreditNoteLine {
-  item?: string;
-  description?: string;
-  quantity?: string;
-  rate?: string;
-  total?: string;
-}
-
-export interface CreditNotePaperTemplateProps extends PaperTemplateProps {
-  primaryColor?: string;
-  secondaryColor?: string;
-
-  // Company
-  showCompanyLogo?: boolean;
-  companyLogoUri?: string;
-
-  companyName?: string;
-
-  // Credit Note number
-  showCreditNoteNumber?: boolean;
-  creditNoteNumebr?: string;
-  creditNoteNumberLabel?: string;
-
-  // Credit Note date
-  showCreditNoteDate?: boolean;
-  creditNoteDate?: string;
-  creditNoteDateLabel?: string;
-
-  // Address
-  showCustomerAddress?: boolean;
-  customerAddress?: string;
-
-  showCompanyAddress?: boolean;
-  companyAddress?: string;
-
-  billedToLabel?: string;
-
-  // Entries
-  lineItemLabel?: string;
-  lineQuantityLabel?: string;
-  lineRateLabel?: string;
-  lineTotalLabel?: string;
-
-  // Subtotal
-  showSubtotal?: boolean;
-  subtotalLabel?: string;
-  subtotal?: string;
-
-  // Total
-  showTotal?: boolean;
-  totalLabel?: string;
-  total?: string;
-
-  // Customer Note
-  showCustomerNote?: boolean;
-  customerNote?: string;
-  customerNoteLabel?: string;
-
-  // Terms & Conditions
-  showTermsConditions?: boolean;
-  termsConditions?: string;
-  termsConditionsLabel?: string;
-
-  lines?: Array<CreditNoteLine>;
-}
-
-export function CreditNotePaperTemplate({
-  // # Colors
-  primaryColor,
-  secondaryColor,
-
-  // # Company
-  companyName = 'Bigcapital Technology, Inc.',
-
-  showCompanyLogo = true,
-  companyLogoUri = '',
-
-  // # Credit Note number
-  creditNoteNumberLabel = 'Credit Note Number',
-  creditNoteNumebr = '346D3D40-0001',
-  showCreditNoteNumber = true,
-
-  // # Credit Note date
-  creditNoteDate = 'September 3, 2024',
-  creditNoteDateLabel = 'Credit Note Date',
-  showCreditNoteDate = true,
-
-  // Address
-  showCustomerAddress = true,
-  customerAddress = DefaultPdfTemplateAddressBilledTo,
-
-  showCompanyAddress = true,
-  companyAddress = DefaultPdfTemplateAddressBilledFrom,
-
-  billedToLabel = 'Billed To',
-
-  // Entries
-  lineItemLabel = 'Item',
-  lineQuantityLabel = 'Qty',
-  lineRateLabel = 'Rate',
-  lineTotalLabel = 'Total',
-
-  // Subtotal
-  subtotalLabel = 'Subtotal',
-  showSubtotal = true,
-  subtotal = '1000.00',
-
-  // Total
-  totalLabel = 'Total',
-  showTotal = true,
-  total = '$1000.00',
-
-  // Customer Note
-  showCustomerNote = true,
-  customerNote = '',
-  customerNoteLabel = 'Customer Note',
-
-  // Terms & Conditions
-  termsConditionsLabel = 'Terms & Conditions',
-  showTermsConditions = true,
-  termsConditions = DefaultPdfTemplateTerms,
-
-  lines = [
-    {
-      item: DefaultPdfTemplateItemName,
-      description: DefaultPdfTemplateItemDescription,
-      rate: '1',
-      quantity: '1000',
-      total: '$1000.00',
-    },
-  ],
-  ...props
-}: CreditNotePaperTemplateProps) {
-  return (
-    <PaperTemplate
-      primaryColor={primaryColor}
-      secondaryColor={secondaryColor}
-      {...props}
-    >
-      <Stack spacing={24}>
-        <Group align="start" spacing={10}>
-          <Stack flex={1}>
-            <PaperTemplate.BigTitle title={'Credit Note'} />
-
-            <PaperTemplate.TermsList>
-              {showCreditNoteNumber && (
-                <PaperTemplate.TermsItem label={creditNoteNumberLabel}>
-                  {creditNoteNumebr}
-                </PaperTemplate.TermsItem>
-              )}
-              {showCreditNoteDate && (
-                <PaperTemplate.TermsItem label={creditNoteDateLabel}>
-                  {creditNoteDate}
-                </PaperTemplate.TermsItem>
-              )}
-            </PaperTemplate.TermsList>
-          </Stack>
-
-          {companyLogoUri && showCompanyLogo && (
-            <PaperTemplate.Logo logoUri={companyLogoUri} />
-          )}
-        </Group>
-
-        <PaperTemplate.AddressesGroup>
-          {showCompanyAddress && (
-            <PaperTemplate.Address>
-              <Box dangerouslySetInnerHTML={{ __html: companyAddress }} />
-            </PaperTemplate.Address>
-          )}
-          {showCustomerAddress && (
-            <PaperTemplate.Address>
-              <strong>{billedToLabel}</strong>
-              <Box dangerouslySetInnerHTML={{ __html: customerAddress }} />
-            </PaperTemplate.Address>
-          )}
-        </PaperTemplate.AddressesGroup>
-
-        <Stack spacing={0}>
-          <PaperTemplate.Table
-            columns={[
-              {
-                label: lineItemLabel,
-                accessor: (data) => (
-                  <Stack spacing={2}>
-                    <Text>{data.item}</Text>
-                    {data.description && (
-                      <Text color={'#5f6b7c'} fontSize={12}>
-                        {data.description}
-                      </Text>
-                    )}
-                  </Stack>
-                ),
-                thStyle: { width: '60%' },
-              },
-              {
-                label: lineQuantityLabel,
-                accessor: 'quantity',
-                align: 'right',
-              },
-              { label: lineRateLabel, accessor: 'rate', align: 'right' },
-              { label: lineTotalLabel, accessor: 'total', align: 'right' },
-            ]}
-            data={lines}
-          />
-          <PaperTemplate.Totals>
-            {showSubtotal && (
-              <PaperTemplate.TotalLine
-                label={subtotalLabel}
-                amount={subtotal}
-                border={PaperTemplateTotalBorder.Gray}
-              />
-            )}
-            {showTotal && (
-              <PaperTemplate.TotalLine
-                label={totalLabel}
-                amount={total}
-                border={PaperTemplateTotalBorder.Dark}
-                style={{ fontWeight: 500 }}
-              />
-            )}
-          </PaperTemplate.Totals>
-        </Stack>
-
-        <Stack spacing={0}>
-          {showCustomerNote && customerNote && (
-            <PaperTemplate.Statement label={customerNoteLabel}>
-              {customerNote}
-            </PaperTemplate.Statement>
-          )}
-
-          {showTermsConditions && termsConditions && (
-            <PaperTemplate.Statement label={termsConditionsLabel}>
-              {termsConditions}
-            </PaperTemplate.Statement>
-          )}
-        </Stack>
-      </Stack>
-    </PaperTemplate>
-  );
-}

shared/pdf-templates/src/index.ts

@@ -1,6 +1,5 @@
 export * from './components/PaperTemplate';
 export * from './components/InvoicePaperTemplate';
-export * from './components/CreditNotePaperTemplate';
 export * from './components/EstimatePaperTemplate';
 export * from './components/ReceiptPaperTemplate';
 export * from './components/PaymentReceivedPaperTemplate';
@@ -8,7 +7,6 @@ export * from './components/FinancialSheetTemplate';
 export * from './components/ExportResourceTableTemplate';
 
 export * from './renders/render-invoice-paper-template';
-export * from './renders/render-credit-note-paper-template';
 export * from './renders/render-estimate-paper-template';
 export * from './renders/render-receipt-paper-template';
 export * from './renders/render-payment-received-paper-template';

shared/pdf-templates/src/renders/render-credit-note-paper-template.tsx

@@ -1,17 +0,0 @@
-import {
-  CreditNotePaperTemplate,
-  CreditNotePaperTemplateProps,
-} from '../components/CreditNotePaperTemplate';
-import { renderSSR } from './render-ssr';
-
-/**
- * Renders credit note paper template html.
- * @param {CreditNotePaperTemplateProps} props
- * @returns {string}
- */
-export const renderCreditNotePaperTemplateHtml = (
-  props: CreditNotePaperTemplateProps
-) => {
-  return renderSSR(<CreditNotePaperTemplate {...props} />);
-};
-