Merge pull request #904 from bigcapitalhq/fix-landed-cost-dialog

fix: landed cost dialog

packages/server/src/i18n/en/bill.json

@@ -22,6 +22,9 @@
   "field.status.unpaid": "Unpaid",
   "field.status.opened": "Opened",
   "field.status.draft": "Draft",
-  "field.created_at": "Created At"
+  "field.created_at": "Created At",
+  "allocation_method": "Allocation Method",
+  "allocation_method.quantity": "Quantity",
+  "allocation_method.value": "Valuation"
 }
 

packages/server/src/modules/BillLandedCosts/LandedCost.controller.ts

@@ -25,7 +25,7 @@ export class BillAllocateLandedCostController {
     private billAllocatedCostTransactions: BillAllocatedLandedCostTransactions,
     private revertAllocatedLandedCost: RevertAllocatedLandedCost,
     private landedCostTransactions: LandedCostTranasctions,
-  ) {}
+  ) { }
 
   @Get('/transactions')
   @ApiOperation({ summary: 'Get landed cost transactions' })

packages/server/src/modules/BillLandedCosts/commands/BillAllocatedLandedCostTransactions.service.ts

@@ -21,7 +21,7 @@ export class BillAllocatedLandedCostTransactions {
     private readonly billLandedCostModel: TenantModelProxy<
       typeof BillLandedCost
     >,
-  ) {}
+  ) { }
 
   /**
    * Retrieve the bill associated landed cost transactions.
@@ -77,6 +77,13 @@ export class BillAllocatedLandedCostTransactions {
       transaction.fromTransactionType,
       transaction,
     );
+    const allocationMethodFormattedKey = transaction.allocationMethodFormatted;
+    const allocationMethodFormatted = allocationMethodFormattedKey
+      ? this.i18nService.t(allocationMethodFormattedKey, {
+        defaultValue: allocationMethodFormattedKey,
+      })
+      : '';
+
     return {
       formattedAmount: formatNumber(transaction.amount, {
         currencyCode: transaction.currencyCode,
@@ -84,12 +91,14 @@ export class BillAllocatedLandedCostTransactions {
       ...omit(transaction, [
         'allocatedFromBillEntry',
         'allocatedFromExpenseEntry',
+        'allocationMethodFormatted',
       ]),
       name,
       description,
       formattedLocalAmount: formatNumber(transaction.localAmount, {
         currencyCode: 'USD',
       }),
+      allocationMethodFormatted,
     };
   };
 

packages/server/src/modules/BillLandedCosts/commands/LandedCostTransactions.service.ts

@@ -14,7 +14,7 @@ import { LandedCostTransactionsQueryDto } from '../dtos/LandedCostTransactionsQu
 
 @Injectable()
 export class LandedCostTranasctions {
-  constructor(private readonly transactionLandedCost: TransactionLandedCost) {}
+  constructor(private readonly transactionLandedCost: TransactionLandedCost) { }
 
   /**
    * Retrieve the landed costs based on the given query.
@@ -45,8 +45,8 @@ export class LandedCostTranasctions {
     )(transactionType);
 
     return pipe(
-      this.transformLandedCostTransactions,
       R.map(transformLandedCost),
+      this.transformLandedCostTransactions,
     )(transactions);
   };
 
@@ -90,7 +90,7 @@ export class LandedCostTranasctions {
     const entries = R.map<
       ILandedCostTransactionEntry,
       ILandedCostTransactionEntryDOJO
-    >(transformLandedCostEntry)(transaction.entries);
+    >(transformLandedCostEntry)(transaction.entries ?? []);
 
     return {
       ...transaction,

packages/server/src/modules/BillLandedCosts/dtos/AllocateBillLandedCost.dto.ts

@@ -4,7 +4,6 @@ import {
   IsOptional,
   IsArray,
   ValidateNested,
-  IsDecimal,
   IsString,
   IsNumber,
 } from 'class-validator';
@@ -17,8 +16,9 @@ export class AllocateBillLandedCostItemDto {
   @ToNumber()
   entryId: number;
 
-  @IsDecimal()
+  @IsNumber()
-  cost: string; // Use string for IsDecimal, or use @IsNumber() if you want a number
+  @ToNumber()
+  cost: number;
 }
 
 export class AllocateBillLandedCostDto {

packages/server/src/modules/BillLandedCosts/models/BillLandedCost.ts

@@ -60,8 +60,8 @@ export class BillLandedCost extends BaseModel {
     const allocationMethod = lowerCase(this.allocationMethod);
 
     const keyLabelsPairs = {
-      value: 'allocation_method.value.label',
+      value: 'bill.allocation_method.value',
-      quantity: 'allocation_method.quantity.label',
+      quantity: 'bill.allocation_method.quantity',
     };
     return keyLabelsPairs[allocationMethod] || '';
   }

packages/webapp/src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostDialogProvider.tsx

@@ -24,7 +24,7 @@ function AllocateLandedCostDialogProvider({
   dialogName,
   ...props
 }) {
-  const [transactionsType, setTransactionsType] = React.useState(null);
+  const [transactionsType, setTransactionsType] = React.useState('Bill');
   const [transactionId, setTransactionId] = React.useState(null);
   const [transactionEntryId, setTransactionEntryId] = React.useState(null);
 
@@ -34,7 +34,8 @@ function AllocateLandedCostDialogProvider({
   });
   // Retrieve the landed cost transactions based on the given transactions type.
   const {
-    data: { transactions: landedCostTransactions },
+    data: landedCostTransactions,
+    isLoading: isLandedCostTransactionsLoading,
   } = useLandedCostTransaction(transactionsType, {
     enabled: !!transactionsType,
   });
@@ -88,6 +89,7 @@ function AllocateLandedCostDialogProvider({
     costTransactionEntries,
     transactionsType,
     landedCostTransactions,
+    isLandedCostTransactionsLoading,
     setTransactionsType,
     setTransactionId,
     setTransactionEntryId,

packages/webapp/src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostFloatingActions.tsx

@@ -38,7 +38,7 @@ function AllocateLandedCostFloatingActions({
       <DialogFooterActions alignment={'left'}>
         {costTransactionEntry && (
           <UnallocatedAmount>
-           <T id={'landed_cost.dialog.label_unallocated_cost_amount'}/>
+            <T id={'landed_cost.dialog.label_unallocated_cost_amount'} />
             <strong>{formattedUnallocatedCostAmount}</strong>
           </UnallocatedAmount>
         )}
@@ -68,11 +68,16 @@ const AllocateDialogFooter = styled(DialogFooter)`
 `;
 
 const UnallocatedAmount = styled.div`
-  color: #3f5278;
+  --x-color-text: #3f5278;
+
+  .bp4-dark & {
+    --x-color-text: var(--color-light-gray1);
+  }
+  color: var(--x-color-text);
   align-self: center;
 
   strong {
-    color: #353535;
+    color: var(--x-color-text);
     padding-left: 4px;
   }
 `;

packages/webapp/src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostFormFields.tsx

@@ -8,8 +8,10 @@ import {
   RadioGroup,
   Radio,
   InputGroup,
+  Spinner,
 } from '@blueprintjs/core';
 import classNames from 'classnames';
+import { x } from '@xstyled/emotion';
 import { FormattedMessage as T, If, FFormGroup, FSelect, FRadioGroup, FInputGroup } from '@/components';
 import { handleStringChange } from '@/utils';
 import { FieldRequiredHint } from '@/components';
@@ -28,7 +30,7 @@ import { useAllocateLandedConstDialogContext } from './AllocateLandedCostDialogP
  */
 export default function AllocateLandedCostFormFields() {
   // Allocated landed cost dialog.
-  const { costTransactionEntries, landedCostTransactions } =
+  const { costTransactionEntries, landedCostTransactions, isLandedCostTransactionsLoading } =
     useAllocateLandedConstDialogContext();
 
   const { values, setFieldValue, form } = useFormikContext();
@@ -97,21 +99,35 @@ export default function AllocateLandedCostFormFields() {
         inline
         fill
       >
-        <FSelect
+        <x.div position="relative" w="100%">
-          name={'transaction_id'}
+          <FSelect
-          items={landedCostTransactions}
+            name={'transaction_id'}
-          onItemChange={handleTransactionChange}
+            items={landedCostTransactions || []}
-          filterable={false}
+            onItemChange={handleTransactionChange}
-          valueAccessor={'id'}
+            filterable={false}
-          textAccessor={'name'}
+            valueAccessor={'id'}
-          labelAccessor={'formatted_unallocated_cost_amount'}
+            textAccessor={'name'}
-          placeholder={intl.get('landed_cost.dialog.label_select_transaction')}
+            labelAccessor={'formatted_unallocated_cost_amount'}
-          popoverProps={{ minimal: true }}
+            placeholder={intl.get('landed_cost.dialog.label_select_transaction')}
-        />
+            popoverProps={{ minimal: true }}
+            disabled={isLandedCostTransactionsLoading}
+          />
+          {isLandedCostTransactionsLoading && (
+            <x.div
+              position="absolute"
+              right="35px"
+              top="50%"
+              transform="translateY(-50%)"
+              pointerEvents="none"
+            >
+              <Spinner size={16} />
+            </x.div>
+          )}
+        </x.div>
       </FFormGroup>
 
       {/*------------ Transaction line  -----------*/}
-      <If condition={costTransactionEntries.length > 0}>
+      <If condition={costTransactionEntries?.length > 0}>
         <FFormGroup
           name={'transaction_entry_id'}
           label={<T id={'transaction_line'} />}

packages/webapp/src/hooks/query/landedCost.tsx

@@ -67,9 +67,6 @@ export function useLandedCostTransaction(query, props) {
     },
     {
       select: (res) => res.data,
-      defaultData: {
-        transactions: [],
-      },
       ...props,
     },
   );

packages/webapp/src/style/pages/AllocateLandedCost/AllocateLandedCostForm.scss

@@ -21,7 +21,7 @@
   }
 
   .bp4-dialog-footer{
-    padding-top: 10px;
+    // padding-top: 10px;
   }
 
   .bigcapital-datatable {
@@ -30,6 +30,10 @@
       border: 1px solid #d1dee2;
       min-width: auto;
 
+      .bp4-dark & {
+        border-color: var(--color-dark-gray5);
+      }
+
       .tbody,
       .tbody-inner {
         height: auto;
@@ -43,6 +47,10 @@
           padding: 0.4rem;
           margin-left: -1px;
           border-left: 1px solid #ececec;
+
+          .bp4-dark & {
+            border-left-color: var(--color-dark-gray5);
+          }
         }
 
         .bp4-form-group{
@@ -51,6 +59,10 @@
           &:not(.bp4-intent-danger) .bp4-input{
             border: 1px solid #d0dfe2;
 
+            .bp4-dark & {
+              border-color: var(--color-dark-gray5);
+            }
+
             &:focus{
               box-shadow: 0 0 0 1px #116cd0;
               border-color: #116cd0;