fix: landed cost dialog

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
-          name={'transaction_id'}
-          items={landedCostTransactions}
-          onItemChange={handleTransactionChange}
-          filterable={false}
-          valueAccessor={'id'}
-          textAccessor={'name'}
-          labelAccessor={'formatted_unallocated_cost_amount'}
-          placeholder={intl.get('landed_cost.dialog.label_select_transaction')}
-          popoverProps={{ minimal: true }}
-        />
+        <x.div position="relative" w="100%">
+          <FSelect
+            name={'transaction_id'}
+            items={landedCostTransactions || []}
+            onItemChange={handleTransactionChange}
+            filterable={false}
+            valueAccessor={'id'}
+            textAccessor={'name'}
+            labelAccessor={'formatted_unallocated_cost_amount'}
+            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'} />}